January 6, 2020
The tools I use
I’ve always thought that building a website is a lot like building a home. There are similar layers to the process. The bones of the house, the framed walls, are like the bones of a website, the semantic HTML elements. The design choices and decorations such as paint and trim and cabinet textures are like the CSS presentation layer of the web. The functionality of the home, the plumbing, the solar panels, the thermostat and heating system are like the JavaScript functionality of a website.
When you’re building a house, you need the right tools. And after my years of construction I have a set of tools that are my reliable go-tos. My framing hammer with a waffle sticking surface and magnetic divot to hold a 16-penny framing nail makes it easy to start a nail in the top of a wall without needing to find a step ladder, and it’s weighted just right so that it drives a nail in with ease. My speed square is invaluable as so many 90-degree angles appear in construction - it helps me mark boards for cuts on a compound mitre saw, provides an edge to score a vinyl tile with a utility blade (be careful doing that, I lost the tip of a finger once - it grew back), and many other useful functions. Likewise, when building a website I have a reliable set of tools that I refer to as well.
Here are my web-building tools:
Firefox Developer Edition - the developer edition of Firefox is really enhanced with the developer in mind. I usually have all versions of Firefox installed (standard, developer, and nightly) but Developer Edition is where I do most of my dev work. I’ve been a Firefox fan/advocate for well over a decade. The popular Firebug extension is the tool that first really helped me dig into code. Developer Tools, the evolution of Firebug, contains so many helpful tools for digging into code. The CSS Grid and Flexbox panels are great for visualizing these newer layout tools.
VS Code - for the kind of work I do, any text editor will do, and I have tried a lot of text editors. I can’t really say that one truly is the best -and you can’t go wrong with any of them. But VS Code just happens to be so incredibly reliable and fast, and I really like that it comes with Emmet and a lot of other useful extensions built-in. I have a soft spot for the Atom text editor, and often switch back and forth between the two. I used Notepad++ quite a bit and if I was working primarily in Windows that tool would be in my bucket for sure.
iA Writer - there is something to be said for a simple clean writing interface. I like that it allows me to focus on one sentence at a time. But I really like how iA Write offers grammar-syntax-highlighting (not to be confused with code-syntax highlighting found in text editors) which is incredibly useful is visualizing how you’re constructing sentences.
Sketch - I’ve been using Sketch for a few years for mocking up web design. The UI is so simple and intuitive for web design. I love the grid features for doing layout. I’ve also really liked using Adobe’s copy of Sketch, Adobe Xd, but as I mention later, I just can’t get my mind around the monthly subscription cost.
Affinity Photo/Designer/Publisher - sure at work I use Adobe products all day long. They are the industry standard. But I just can’t get my mind around the idea of paying an infinite recurring subscription to Adobe for my personal work. Affinity’s products faithfully recreate the features of Photoshop, Illustrator and InDesign and only cost a one time payment of $50 each! I know you get a lot with a Creative Cloud subscription but I just don’t need most of it, and I can’t stomach that monthly price tag. I really wish Adobe would offer a discounted Creative Cloud option for independent freelancers/enthusiasts that was priced similar to a Netflix subscription. That would be a no-brainer for me, but until that day comes, and it probably never will, I’ll be using Affinity’s versions that do nearly the exact same thing. I’ve also tried a lot of open-source design alternatives (here is a blog post I wrote about an open-source alternative to Creative Cloud a couple years ago) and while I’ll highly suggest giving them a try too, I do recognize that their UI is a challenge, and frankly getting Inkscape to run on a Mac is a chore. Considering the very low cost for Affinity and much better UI, and familiarity with Adobe, I can’t suggest Affinity enough.
Scout-App is a great open-source tool for compiling your CSS.
Hyper - An open source alternative to your terminal window. Having a highly customizable terminal window is a really nice way to make working in a terminal a lot cooler!
Spotify - music makes me more productive. Spotify is just easier to access across devices/platforms.
Labels: web design, web development
December 22, 2019
What I've Learned This Year, and What I Want to Learn Next
This year I feel pretty good about what I’ve learned in web design/development, and as always I am excited about what I can look forward to learning next.
This year I’ve learned a good bit about:
- SASS and CSS Variables
- CSS Animations
- CSS layout with Grid and Flexbox
CSS is my favorite part of web design/development. My CSS skills feel like they are improving a lot in the last year. I like using CSS variables to create art. Here is an example of the American flag created with a base unit defined as a CSS variable. All other measurements are based on that root variable using the calc property. I also spent some time exploring CSS Animations as in this example of a CSS dog I created named Codee (pronounced “Cody”).
Probably the most exciting thing I learned this year was how to layout a page using CSS Grid. Here is an example of a world made with CSS Grid.
Next I want to learn:
- Development Frameworks: React, Angular, but especially Vue
I like that Vue is independent from a big tech company. In the same way that I prefer Firefox over browsers provided by large corporations (Chrome, Edge, Safari), I also like the idea that Vue is not from a large tech corporation (React is from Facebook, Angular is from Google). Diversity in browsers, frameworks, software is a good thing. The independence of Vue is a big pro. But I know that knowing all of these frameworks is indispensable, so while I will start with Vue, I will progress to trying all of them. From what I’ve read they are often used in conjunction.
I’m also interested in trying out some Static Site Generators, and 11ty is at the top of my list.
Labels: web design, web development
December 18, 2019
CSS Grid is the web layout standard of the future
Today I Learned that Mozilla has a great guide for comprehending CSS Grid!
If you have been a web designer/developer for any length of time you’ve surely used your fair share of float:lefts and clear-fixes to arrange content on the web, and despite the frustrations of that, you gladly accepted them for giving up the old way of table-based layout back in the pre-responsive web design days. And you probably gladly switched to the grid-based Bootstrap approach despite having to load in all that extra code, because up until now there was not a built-in layout language for the web. That all changes with CSS Grid (and Flexbox), a layout structure that is built-into CSS and widely supporting by the major web browsers. Best of all, Grid (and Flexbox) seamlessly with with older techniques so you don’t have to choose one of the other.
CSS Grid is certainly the layout tool for future web development, and it’s worth noting that it can be used hand-in-hand with Flexbox (or ‘Flexible Box Model’) which has a lot of similar features, attributes, naming conventions and so on. It’s a little confusing at first, but once you at least kinda* get the hang of it creating layouts for the web is a dream. (*I say Kinda because no one would be expected to be a repository of everything there is to know about Grid, or Flexbox, or the rest of CSS for that matter - this is one reason we have Google).
One way to distinguish Flexbox and Grid is know that Flexbox is one-directional (horizontal or vertical) and Grid is bi-directional (horizontal and/or vertical), as this article clearly explains.
CSS Tricks also has an excellent reference for Grid (based on their reference for Flexbox) that I use every time I work with Grid. And my favorite version of my favorite Browser, Firefox Developer Edition, has some amazing tools built in for visualizing and working in Web.
Labels: web design, web development