Tom Dohnal

State-of-the-art frontend development

Go to YouTube channel

TypeScript satisfies operator

November 11, 20224 min read

How to make sure that a variable matches a type and have TypeScript do its type inference magic simultaneously? The answer is the satisfies operator, added to TypeScript 4.9.

Read moreWatch video

Animated gradient texts

November 2, 20228 min read

Let's explore how to create beautiful animated gradient texts (like on Vercel.com) with plain HTML and CSS! This is an interactive blog post with bespoke widgets designed and implemented to help you understand all the key concepts much faster!

Read more Watch video

React SVG Animation (with React Spring) #4

November 24, 202118 min read

We're going to implement an animated emoji by morphing SVG paths. (It sounds fancier than it should.) The code itself is going to be pretty straightforward but we'll need to spend some time in a graphic editor (like Figma) to get our SVG ready.

Read more Watch video

Subscribe to the newsletter

Stay up to date with state-of-the-art frontend development.

No spam. Unsubscribe any time.

TypeScript ANY vs UNKNOWN—A Deep Dive

November 14, 20217 min read

In this blog post, we'll dive deep into what "any" and "unknown" types are, what are their similarities and differences, and when (not) to use them.

Read more Watch video

Custom Checkbox in React (Animated and Accessible)

October 21, 20219 min read

In this article, you're going to learn how to create a custom animated (yet accessible) checkbox. The technique that you'll learn is also applicable for styling radio inputs.

Read more Watch video

React SVG Animation (with React Spring) #3

March 1, 202112 min read

We're going to implement a shild checkmark animation by animating lines in SVG (the path element) and we'll learn how to extract animation logic into re-usable custom hooks.

Read more Watch video

React SVG Animation (with React Spring) #2

December 20, 20209 min read

You'll learn how to create this SVG animation in React Spring and what's tricky about animating transform: scale(...) and transform rotate(...) in SVG.

Read more Watch video

React SVG Animation (with React Spring) #1

November 21, 20208 min read

You'll learn how to build SVG animations using React and the React Spring library.

Read more Watch video

Blocking Fallback for getStaticPaths–New Next.js 10 feature

November 1, 20203 min read

What is blocking fallback in getStaticPaths and when it should be used?

Read more

SSR (Next.js) - part 2/2: Is it even worth it?

April 16, 20205 min read

In this article we'll explore the pros and cons of server-side rendering as opposed to "client-only" single-page apps (and statically generated sites). We'll go through the UX 📱, business 🧳, and product development 👩🏿‍💻perspectives. You'll learn when you should opt for server-side rendering, when statically generated sites are a better choice, and under which circumstances you'll be better off with a "basic" SPA.

Read more

SSR (Next.js) - part 1/2: What is SSR?

April 2, 20205 min read

In this series of articles, I'm going to go through the _what_, _why_, and _how_ of the migration process of our React web application 💻 to a server-side rendering solution. You'll learn what SSR is, how it differs from the "client-only" single-page applications and "regular" web apps, what are its pros and cons, and, finally, how to go about **migrating an existing React app to an SSR solution (Next.js).** (The concepts are the same for Vue apps (and Nuxt.js) or similar. 😉)

Read more

Subscribe to the newsletter

Stay up to date with state-of-the-art frontend development.

No spam. Unsubscribe any time.

hey@tomdohnal.com