Craft & Practice

Subscribe
Archives
September 26, 2024

Tools I use in my development practice

A list of tiny web tools I've routinely used

One of the rites of passage in the web community is contributing open source tools and code for others to learn from, use, and build off of. I created my first gist today—a color palette generator mix-in for Sass.

A long term personal-professional-fun-goal of mine is to create some sort of small tool that would help make web development a little easier. The gist is a good start, but I have a long way to go before I am able to create or fund some of these tools.

In University, I redesigned and redeveloped my website each year; a learning by doing ritual while recording professional progress. A few years after graduation, that routine was lost. This year, I think I’ve made up for it a bit, in a third or fourth iteration this year alone.

I’ve sought and found some tools I, now, routinely come back to as my go-to resource when developing my website. I plan for this to live on some type of /resources page—similar to how I listed books that have shaped my practice.

This is specifically for devtools, ordered by use.

Subscribe now

Tools

  • Contrast Grid by Eight Shapes, Nathan Curtis and Dan Brown

  • Utopia by James Gilyead and Trys Mudford

  • CSS Grid Generator by Sarah Edo

  • Every Layout by Heydon Pickering and Andy Bell

  • The Good Line Height by Fran Pérez

  • Modular Scale by Scott Kellum and Tim Brown

  • OKLCH Color Picker & Converter by Evil Martians

  • Design System Checklist by my Booking.com colleagues Arda Karacizmeli, Dmitry Belyaev, and Steven Baguley.

Frequent references

  • Stacks, StackOverflow’s open sourced design system

  • Pajamas, Gitlab’s open-sourced design system

  • Primer, Github’s open-sourced design system

  • Cedar, REI’s open-sourced design system

  • Carbon, IBM’s product and marketing open-sourced design system

  • IBM’s Design Language, an open-sourced identity system for all of IBM

  • USWDS, the United States’ federal government’s open-sourced design system

  • Seeds, Sprout Social’s open sourced design system

  • Protocol, Mozilla’s open-sourced design system for all Mozilla and Firefox websites

  • Design System, the United Kingdom’s government services open-sourced design system

Don't miss what's next. Subscribe to Craft & Practice:
Powered by Buttondown, the easiest way to start and grow your newsletter.