All Posts

Introduction to Scalable Vector Graphics (SVG): What are they?

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!
Read more

Introduction to Scalable Vector Graphics (SVG): Animations

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.
Read more

Jest Snapshot Testing for React Components (An Honest Assessment)

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

Replacing Jest Snapshots With Cypress Screenshots for Testing React Components: An Experiment

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.
Read more

Introduction to Design Tokens

What Are Design Tokens and How Are They Useful?

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.
Read more

Managing and Exporting Design Tokens With Style Dictionary

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.
Read more

Exporting Design Tokens From Figma With Style Dictionary

Automating the Handoff From Designers to Platforms

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.
Read more

Consuming Design Tokens From Style Dictionary Across Platform-Specific Applications

Suggestions For An Automated Workflow

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.
Read more

Generating Design Token Theme Shades With Style Dictionary

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

Use The Source, Luke

Professional JavaScript: Episode 1

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

Documenting Design Tokens With Docusaurus

Adding Visuals To Your Style Dictionary

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

Integrating Design Tokens With Tailwind

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

Transferring High Fidelity From A Design File To Style Dictionary

A Potential Alternative To The Traditional Design To Developer Handoff

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.
Read more

Code, Show, and Tell

Professional JavaScript: Episode 2

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.
Read more

Scoring Design Tokens Adoption With OCLIF and PostCSS

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

Bootstrap UI Components With Design Tokens And Headless UI

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

GitHub Reading Challenge

Professional JavaScript: Episode 3

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.
Read more

The Developer's Content Model

Professional JavaScript: Episode 4

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.
Read more

Linting Design Tokens With Stylelint

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

Stitching Styles to a Headless UI Using Design Tokens and Twind

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

How to Help Someone Else Review Your Code

Professional Javascript: Episode 5

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.
Read more

How To Energize Your Developer Experience With a Powerlifting Technique

Professional JavaScript: Episode 6

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.
Read more

What is Web Development?

Learn the Basics of Web Development: Lesson 1

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

Embracing the (UI) Elements

Learn the Basics of Web Development: Lesson 2

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