How I Work
I’ve been making websites since the late 90s. Continuously since around 2003 when I discovered “web standards.” As it goes, there has been a lot of change in how websites and applications are built. Nowadays I primarily work on three things: design systems, web apps, and websites. Occasionaly I do branding and print work.
Below I’ve collected some tools and best-practices I follow when working in the first three categories.
I fit into the design system ecosystem best where design and engineering meet. I enjoy driving company-wide adoption of a design system by making design tokens accessible to every engineer no matter what platform or technology is being used. The main tool I use to do this is Style Dictionary. It’s architected well and very flexible and easy to use.
Beyond that, the usual suspects help round out the task of design token management: continuous integration, NPM, Node, Figma. For release management I like the general process outlined in A stable mainline branching model for Git.
Whether designing user interfaces or writing the components that will power them, I find a lot of enjoyment in crafting web applications. In terms of design and user experience, philosophically I sit somewhere between web apps are primarily utilitarian, should not go against ingrained user expectations and shouldn’t try to reinvent the wheel visually and web app designs should never blindly follow other trends and must develop a cohesive uniform uniqueness that oozes into every nook and cranny to provide an overall feeling of confidence and warmness for the person using it.
Below are the primary technologies I prefer to work with.
- React. I really, really like React. The inherent patterns in the code and file organization hit all the right notes for me. I love writing a simple, stateless functional component just as much as writing a full class component that manages state for all its children.
- Emotion (or Styled Components). With web apps, generally speaking, I prefer to manage styles with CSS-in-JS. I’m aware of some of the trade-offs but I think having the styles directly paired and present with the component markup offers a not insignificant amount of cost savings over a long period of time. And not having to worry about the cascade and holding a grander picture of the mental model of the CSS frees up mental space and makes it easier to onboard new developers. Also, it’s easy to hook into a design system and reference design tokens as needed.
- TypeScript. I still begrudge Typescript’s fussiness but have seen the benefits of working with it on large projects and once you get used to all the little things it adds to a development environment you definitely miss it when it’s gone.
- Styled System. A React app without Styled System is a sad app. Styled System makes writing interfaces a breeze and responsive design a joy.
- Figma. For design I like working in Figma best but have also worked with Sketch and the Adobe Suite.
I almost always build websites on WordPress. And for organizations and small businesses it’s almost always the best or a superb choice for managing a website. It’s stable, scales well, is extremely popular and has a strong and healthy ecosystem of people who know how to develop for it and use it.
For websites I use a utility-based approach for styling and CSS management. It is a very efficient method to integrate a design framework into a website and grealy decreases the amount of time it takes to convert a website from design to a production-ready site. (It’s also great for multiple people working on a design conversion.) To give an example, the ERLC President website design project design was converted from Sketch files to a fully functioning, production-ready website in slightly less than a month.
- Docker. I use Docker to set up a local environment for each WordPress project. (I wrote a tutorial on how to install WordPress with Docker.) And when possible I configure the project to automatically deploy via GitHub integrations. (I do not miss FTP.)
- Sage theme. The Sage theme is my preferred starter theme. It has by far the best developer experience with all the conveniences of a modern development environment in a PHP-based project. There is a bit of a learning curve but the community is helfpul and it’s well worth the effort.
- Tailwind CSS. I used to use a set of custom stylesheets that were based on Basscss but Tailwind offers all of what I had in my custom setup and more.
- PostCSS. I use PostCSS to take advantage of things like CSS variables (though these have pretty good native support now), automatic unit conversions (e.g. writing values directly in CSS as
1rem), and other niceties such as these.
- PurgeCSS. With utility-based CSS you end up with a lot of classes you don’t need. PurgeCSS gets rid of these unused classes.
Note: The last three items in the list above can be integrated with the Sage theme (via Webpack) so everything works together.