My dev toolkit through the years

Posted

TLDR; I currently use NeoVim in the Linux layer of ChromeOS for development. I recommend this setup for anyone interested in web development who has a bit of knowledge of Linux or is willing to learn. If Vim or Linux aren’t for you, VSCode in the Linux layer of ChromeOS is simple to set up, and once you are done you shouldn’t need to bother with knowing any Linux commands (other than for stuff like npm).

I’ve been doing web development at various levels for well over 20 years, mostly working through various iterations of my own site. As such, my toolchain has gone through a few iterations of tools. When I first started, I was using a Mac on System 7, later updated to a better Mac with OS8. For these, I used Claris HomePage Lite and BBEdit Lite. The lite version of Claris didn’t support tables, without which “cutting edge” web development of the late 1900’s was impossible. But it did make it easier to do the basics of a design, which I could then edit in BBEdit. This is how the first couple of iterations of my site were created. It was static, had no purpose, and the only part of it that mattered was the link to my LiveJournal. I alternated between IE6 (the Mac edition was easily the best browser available at the time) and iCab, a small German browser that helped introduce me to web standards. It had a small icon that showed a smiley face when a page validated, and a frown when it didn’t that explained why when clicked. Trying to make iCab smile made me research web standards. This in turn led to a rabbit hole of Jeffrey Zeldman, the Web Standards Project, A List Apart, and many others. Some of the people and sites that Zeldman introduced me to, I still follow to this day.

Around 2001, I upgraded to OSX. The first version. BBEdit Lite was replaced by TextWrangler, which I used for a year or two. At some point, though, I heard about something called Vim that was available on the console, as well as in a “Mac” GUI. I ran the vimtutor and, while it took me a while to get good at it, I could immediately see that it would make text editing more productive. Vim has not left my toolkit since, though it has been supplemented a few times by tools such as Bluefish. I used Safari, and later Camino, for my browser. I enjoyed Camino so much, even though it lacked extensions, that I wrote a bookmarklet that could turn Greasemonkey userscripts into other bookmarklets. It was well-received and featured on a site that showcased the few ways to improve Camino.

I used OSX all the way until Panther, but when I read a post by Mark Pilgrim (archive.org link as his web presence is 410 gone) it gave me pause. I had heard of Linux, of course, and had played with old versions of Red Hat before, but it wasn’t really usable. I had recently heard of a new version, though, Ubuntu. Mark’s post caused me to give Ubuntu a try, and I have been using Linux since 2006, in one form or another. I currently have two laptops, one running Mint and the other ChromeOS. My toolchain is the same in both: Vim (currently in the process of switching to NeoVim by symlinking the config files), git, Chrome (with Firefox and Epiphany for testing), and of course node.js and some tools for it like prettier. That’s it. No visual editor, no VSCode (the last time I tried it I almost lost three weeks worth of work on my client’s site). I do run a pretty customized Vim setup which I’ll cover in a future post. The Linux wrapper for ChromeOS makes it a very good machine, and if the Chromebook I had did not have such a tiny, uncomfortable keyboard, it would be my preferred environment.

While my dev toolkit is small, I am always tinkering with my machines, trying out new settings and tools to make things just a fraction of a percent slicker. Normally I wind up deleting them, but this of course means that I have lots of cruft like old config files or dependencies laying around. Cleaning all this up is something I do on my Mint machine at least four times a year. It takes a day or two, and risks deleting the wrong thing. As my config files are backed up onto GitHub, however, with the Chromebook I can easily disable and reenable the Linux system to get back to square one, or even powerwash if needed. This saves me time and helps keep my system responsive. My Mint machine can cross-boot into Windows for school, and ChromeOS Flex does not support dual-booting. This is the only reason I still use any other operating system. If you currently use Linux for web development (or really anything), I recommend you look into the Linux layer of Chromebooks for your next machine instead; it increases security, simplifies a lot of troubleshooting, and for most computer usage boots nearly instantly into the browser. So long as using an OS by Google isn’t a dealbreaker for you, this makes the nicest development environment I’ve ever used. And I’ve used several.

My first client site

Posted

A couple of weeks ago, I pushed my first client site live! TnT Cakery is a San Antonio-local custom cake home baker. Tina, the owner, had no idea what she wanted when she said she would like a website, so the entire thing was mostly left to my discretion. After a brief meeting with her, I found that as she custom makes (and prices) all her cakes, an online ordering system would not work well, so the focus should be showing off previous work with a primary call-to-action of having the viewer contact Tina to order a cake.

The color scheme was designed to call to mind an iced cake. The logo (which was originally designed in CSS and only moved to SVG via a screenshot) should be reminiscent of a two-layered cake on a cake stand.

The code is almost entirely HTML and vanilla CSS, written in Vim. JavaScript is used only to size the images in the carousel to eliminate weird reflow issues. The image carousel uses scroll snapping rather than a complicated (and potentially inaccessible) JavaScript solution (though a recent video by Kevin Powell highlights the A11y slider which I will probably experiment with). There is a CMS backend powered by NetlifyCMS so Tina can upload new cakes and reviews herself in the future. The site responds well all the way down to the slimmest candybar phone.

I have been using Jekyll for a long time for my personal site, but eleventy has recently caught my eye, so I learned it for this project. It is mostly similar to Jekyll but not so much so that the little differences tripped me up (being almost the same is worse than being completely alien). Having used it, I am now planning to move this site to 11ty as well in the near future. Of course, this means GitHub Pages will no longer work for a CI/CD workflow, but I also discovered Netlify (I’d heard of it, of course, but never used it) and already plan to move over there.

Overall, this project changed drastically between my original concept and the version that went live, but Tina was very excited about it. All her friends and clients who have seen it love it. And the logo I designed is now on her business cards, cake box stickers, and is about to be on shirts. Overall, I consider this an incredibly successful first foray into the world of professional development.

DevBrowser

Posted

There are a plethora of available web browsers in use right not, but only three rendering engines powering nearly all of them. Webkit powers Safari (including the iPhone browser), Gecko powers Firefox and its derivatives like IceWeasel, and Blink powers Chrome and all the Chromium spin-offs, including Microsoft Edge. From a web development standpoint, this means that while the more browsers you can test in the better, as long as you test in these three engines you are mostly covered (though there are obviously various versions to worry about too). As a Linux user, I use Chrome for Blink, Firefox for Gecko, and Epiphany for Webkit. However, I would love a new browser that could streamline this process.

All i want is a basic viewport and devtools, but an option in the devtools that can switch between the three engines. No other features required. All three engines are open source so this shouldn’t be much of a problem. Perhaps even the ability to change the version of the engine as well.

Actually now that i think about it there used to be a Firefox extension that could switch to Trident (the old Internet Explorer engine) on Windows; i wonder if that could be modified. I know even that night be a pretty large project, and might not be possible.

If anyone is interested in creating this and wants to create a Kickstarter to fund it, let me know and I will happily contribute. Optional requirements worth more donation money:

  1. Code it in Python
  2. Release it as open source
  3. Call the browser Joshing Around (just kidding, it should obviously be called DevBrowser or something like that, I was just joshing around there)

Watermelon rinds

Posted

I can’t be the only one who slices watermelon rinds into long thin strips, then takes the time to feed them one by one down the disposal, just to avoid taking the rind out in the trash. I can’t be alone in this.

Can I?

My path to a change

Posted

I got my first job as a bagger at Kroger when I was sixteen years old. Since then all my jobs have been in either retail or food service. I turned 40 last October. That means I have been working in the toxic customer service industry for twenty-four years. I’ve decided I’m ready for a change.

Since I was a kid I’ve been fascinated with codes and ciphers. While I know that computer cryptography is far superior to anything that uses pencil and paper (other than a one-time pad) I still enjoy doing ciphers by hand. A few months ago I came across the VIC cipher, which most consider was the most complicated hand cipher ever used in the field. I played with it for a while, encoding and decoding messages to myself, but realized I could write a program to encode messages for me to decode. Yes, this sounds fun to me. My coding skills are a decade or so out of date, so I bought the newest edition of my favorite programming book, JavaScript: The Definitive Guide and started reading up.

At the same time, I was hired at Starbucks. They paid for me to go to collage. I had been wanting to go to collage since I was a kid but life kept getting in the way. I decided that I was going to make a change in my life to get out of this industry. Starbucks didn’t work out, but the motivation has stayed with me. I have completed the Responsive Web Design Certification at freeCodeCamp. I’ve been watching YouTube videos and reading articles on how to break into a career as a developer.

I’m getting out of customer service jobs. I’m committed to learning all I can and improving my life. And I’m going to post updates of what I’m learning and doing along the way.