Craft of UI — by Jhey Tompkins

No lessons to complete. No progress tracking. Just real UI patterns, demos, and techniques you can explore at your own pace.

What if you could break down any interface, understand why it works, and confidently bring it to life? Not just copy a design, but really understand it. To know which tools to reach for, and build with precision, performance, and accessibility in mind. To make it feel right and make it your own.

Building user interfaces is complex. Even a “simple” sign-up form involves choices about motion, accessibility, performance, and the finer UX details that most people never notice. And too often, education only covers slices of that complexity.

You might learn how to make something look good or move well. But what about making it work right? For everyone? What about building fast, inclusive, resilient interfaces that feel effortless?

The Craft of UI is a practical UI playbook and reference for building things well. It’s about learning how to see like a developer who understands design, and code like a developer who cares deeply about users.

It’s about working with the web, not fighting it. Leveraging the power of HTML and CSS. Sprinkling in JavaScript when it adds real magic. And reaching for libraries only when they truly help you go further. This isn’t about chasing trends or selling you “taste”. It’s about timeless skills you can return to again and again, skills that level you up and pay the bills. Tools change. APIs evolve. But the foundations of the web platform remain your unfair advantage when mastered.

You don’t need to be “a natural”. You just need the right approach and the right mindset. With practice, you become the person who can break down any interface and build it with confidence. Whether you’re just getting started or already the team’s go-to.

This playbook will help you:

• Think through UI problems, not just code them
• Use the web platform fully before adding dependencies
• Know when (and why) to reach for libraries or frameworks
• Explore emerging browser APIs so you’re ready when they land
• Build fast, accessible, resilient UIs that make people go “wow”

This isn’t about following instructions or copying patterns. It’s about learning to reason through interfaces so you can tackle problems you haven’t seen, make smart decisions, and develop your own craft. The goal is understanding, not imitation. You gain the confidence to bring your own ideas to life.

Over the years, I’ve built a reputation for being able to recreate just about anything passed my way. But that ability isn’t about tricks. It’s the result of mindset, curiosity, and knowing how to think through a UI challenge from first principles.

This playbook captures that approach in patterns, demos, and mental models gained from over a decade of building for the web. It shows how I see an interface, break it down, and bring it to life.

If you’ve ever looked at a design and thought, “How would I build that?”, this is for you. This is about equipping you with the skills — and the confidence — to say, “I’ve got this.”

Because when you can do that, everything changes. You’re not chasing snippets. You’re not blocked by tools or libraries. You become the reference. You become the documentation.

You bring ideas to life and you make it look easy.

It’s not just satisfying, it’s how you 10x your career. You become the person the team turns to when they say: “Can we even build this?”.

Could you become that person? Yes. You could. And I’ll show you how. Through real demos, practical patterns, and a deep respect for the web platform.

Hey – I’m Jhey Tompkins 🤙

I’m an engineer who loves making the web feel magical whilst showing others how to do the same.

Currently, I’m a Staff Design Engineer at Shopify. Before that, I worked in Developer Relations at Google as part of the CSS and UI team on Chrome. I was also a Design Engineer at Vercel. Along the way, I’ve built for brands like Nike, Uber, Nearform, and Monzo.

Over the years I’ve shared thousands of demos with the community building a following of over 140,000 people on X and 20,000 on CodePen, where I became the “Most Hearted” of all time. Those demos opened opportunities to speak at conferences around the world about building user interfaces and to work with companies like Shopify and Google.

People now know me for turning complex challenges into simple, delightful experiences. For building things that make you say “wait, how did you do that?” and for doing it with the web platform and good craft.

This playbook is my way of sharing how I think about UI work. From the fundamentals to the fun stuff. Not just how to build things that work, but how to build things that feel right and wow.

Whether you’re here to explore a specific pattern or just browse for inspiration, I want this to be something you come back to whenever you need it.

Let’s go.