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, so it feels right to users and turns heads when it matters.

This playbook works the way you need it to. You can explore a demo to grab a technique and move on, or dive deeper to understand every decision, tool, and approach behind it. Each example shows you how to take ideas from concept to reality, whether you just need a quick win or want to master the underlying thinking.

You can also see exactly how a demo is made. Learn the tools, techniques, and thought process behind it, then take those lessons and apply them to your own ideas. It’s a practical reference of demos with insight that teaches you to create confidently on your own.

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 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 interfaces that are fast, accessible, and polished
• Discover the clever techniques behind your favorite demos

This isn’t about following instructions or blindly obeying 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.

Many courses might teach you how to make some impressive interaction or animation. This playbook teaches you how to decide what to build, how to build it, and why one approach is better than another. Frameworks change. Libraries come and go. The way the web works does not.

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 confidence to say, “I’ve got this”.

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 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 ask, “Can we even build this?”

Could you become that person? Yes. You could. And I’ll show you how.

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