All Posts

In this article, I explain what is a scalable vector graphic (SVG) and how it differs from other graphics. I will also walk you through coding your very first graphic!

In the previous article, I walked through creating a basic SVG. In this article, I will pick up where we left off and explore SVG animations.

In this article, I explain the use cases for Jest snapshot testings of React components and provide an honest assessment of their usefulness.

A lengthy discussion on general principles for testing frontend code, different approaches for snapshot testing React component with Jest, and a proposal and experiment/tutorial on using Cypress screenshot testing to replace Jest snapshot testing for React components.

Design tokens are being used by companies like Amazon and Adobe to solve the pitfalls of coding a design system. In this article, I explain what they are and why they're important.

A continuation of my series on design tokens. I recommend reading the previous article for context. This is a very detailed explanation of how to use Style Dictionary to manage and export design tokens. I’ll explain what Style Dictionary is, what it does, and the technical details on how it’s implemented. This is more of an explanation than a tutorial. A tutorial on implementing a style dictionary from a design file will be the next article in this series.

Learn how to fully automate the process of exporting design tokens from Figma with Style Dictionary. You'll also learn about serverless functions and GitHub Actions along the way.

After transforming design tokens from a design file into platform deliverables with Style Dictionary, the final step to automate a design to developer handoff is consuming those deliverables across applications on various platforms. We'll get an idea of how to achieve that in this article.

Learn how to go beyond a standard light and dark theme toggle by generating design token theme shades with Style Dictionary.

In this week's episode, I'll be telling you why you should "use the source" like Luke Skywalker used the force.

Add some visuals to your Style Dictionary by learning how to automate the process of documenting design tokens with Docusaurus.

Tailwind effectively exposes utility classes that apply design tokens. Learn how to pair a design tokens pipeline with a Tailwind project.

Is there a better approach than having designers maintaining a high-fidelity design file? Maybe. I'll lay out a mental model of transferring high-fidelity from a design file to Style Dictionary.

Initiating and consistently contributing to a show and tell with your team can increase your credibility amongst your peers and spark personal motivation. In this episode, I list the steps on how you can start a show and tell.

Learn how to create a CLI tool that generates a report on design tokens adoption.

Learn about my idea to encapsulate design specifications as well as common functionality by pairing framework-specific, headless UI component libraries with design tokens.

Are there any free ebook options for developers? Of course! There is GitHub. In this episode, I announce how you can partake in a GitHub reading challenge.

In today's episode, I'll be discussing a content model that allows developers to share their knowledge, improve their portfolio, and expand their network.

Learn how to catch the implementation of unofficial design tokens with Stylelint for a better developer experience.

Learn how to organize component design tokens into an API that generates their Tailwind utility classes.

In today’s episode, I’ll be discussing how to help someone else review your code. You help them with their context switching and you help yourself mature as a professional developer.

In today's episode, I apply a lesson from my powerlifting days on how to bring energy and excitement to the repetitive tasks of software development.

If you're an absolute beginner, don't worry. Learn what web development is and start your journey of becoming a web developer.

Learn the basics of UI elements and how applications are constructed from them.