The Open UI site has undergone an upgrade. Learn how I reduced JavaScript on load by 97%, reduced initial bundle size by 1.9mb, and knocked off 1.9s the time to interactive by planning and executing a rewrite from Gatsby to Astro.

Both e.code and e.key have different purposes. One works great for language specific input, and the other works great for knowing the physical position of a pressed key. Let's learn more about these two seemingly similar properties

Effectively rendering huge amounts of data on a website can be a challenging problem. I'll show you how to use the masonry pattern to not only deal with this challenge, but to do it while looking stylish.

Take a look at a new 2000s-inspired component library. You’ll learn what a2k is, how it’s been built, and how to use it to build retro applications in React, Vue, vanilla, or your favourite frontend framework.

As the market for tech jobs becomes increasingly competitive, the importance of distinguishing yourself from other applicants only grows. Writing a cover letter is an excellent way to separate yourself from the dozens of other applicants.

How I used Notion with my job hunt to land four job offers.

How to ensure that your urls get resolved correctly when used as CSS variables.

Embrace the technology of the present by paying homage to the interfaces of the past. Build a cool retro-style draggable component using Lit web components.

Managing icons is an under-discussed part of UI library mgmt. By poorly managing your icons you can increase the data sent to your users by several hundred KBs of mostly unused icons! Learn how your favourite libraries manage their icons

Many small projects grow organically, which can later cause architectural headaches. I came across such a headache when building the icon package in a UI library. Let me show you how SVG's use, em units, and import.meta can help you manage your icons.

Improve your relationship with your designers by automating your Storybook admin. We'll run through how to automatically catalog all the icons used in your frontend codebase.

We'll take off the training wheels and build a rule for a real-life web component. Doing so will help consumers remember the best ways to use the component, and better contribute to an accesssible web.

Build ESLint rules to ensure consumers of your design system adhere to your design system's (and the web's) best practices.

Learn how ESLint rules can help enforce your design system's best practices by understanding how ESLint parses your JS into an AST and traverses it using the Visitor pattern.

Error messaging plays an important role in making your user-facing products as delightful as possible. Having useful error messages can go a long way toward making a frustrating scenario for an end-user as pleasant as possible.

So you've created your UI library and shared it with the big wide world. What's next? This article wraps up our journey and offers some tips on where to go from here. I hope you've enjoyed the ride!

Good documentation is a cornerstone of great developer experience, and great developer experience will encourage developers to stick with your library. This article offers different documentation options (from the very simple, to the more involved) to help you get your library well-documented and set up for success.

Versioning and publishing can feel intimidating. At least it does for me. Getting it right means you deliver well-communicated updates that work with your end-users workflow. Getting it wrong can lead to developer headache and a loss of end-user trust. This article presents some questions for you to help you pick your versioning strategy, along with some tools to help you publish confidently.

Your component library is taking shape and you're getting close to publishing! Can you confidently say that you won't ship broken behaviour and that your components work across browsers? If you said no, it's time to consider your testing strategy. If you said yes, then it's still time to consider your testing strategy. Don't add testing only when you need to.

If you haven't chosen a starter kit, you'll need to get your development environment up and running. This article will present a handful of common setups to help you quickly develop, (maybe) build, and (maybe) bundle your component library.

Choosing a library for building web components can help you deliver quickly. It's just... there are a few dozen libraries to pick from. Don't worry, this article will help you think critically about which library (if any) is most appropriate for your UI library.

Finding the right tools to manage your monorepo isn't a new problem, but it's still important to pick the right ones. This article runs through a handful of different tools, to help you pick the ones you need to make your development experience a pleasant one.

Understanding how you expect your end-users to consume your library can influence how your structure your repo. This article presents some questions to get you considering how best to scaffold your repo.

When creating your UI library, you'll be faced with tough dilemmas at every step of the journey. This article series will help you navigate the many choices you'll need to make. These choices cover areas like repo scaffolding, choosing a framework, testing, versioning, publishing, and documentation. By the end, you'll have set the foundations for a robust, and accessible, UI component library.