Impressive effects for very low effort

A CSS animation, which we will use later

Modern UIs leverage SVGs for icons and images due to their flexibility across different screen sizes, but having them pop into your page is boring. Luckily, we can do better through animations, and you don’t even need to add anything special if you don’t want to — it can be done with only SVG elements and CSS!

Follow along with my CodePen examples (all in React) to learn how.

What kinds of animations?

SVGs are more or less ways to define how a computer should draw out an image, so it’s very appropriate that we create animations to make it seem like SVGs are…


Demystifying the JavaScript that makes animations on Apple’s product pages possible

There’s no denying that Apple’s people know how to craft an interesting product page. For those unfamiliar, here’s what happens on their iPad Pro page as you scroll:


It makes behavior more consistent and the code a lot cleaner

A website that is probably an SPA

The method to route users across pages of your site is one of the first decisions made when designing a SPA. Routing libraries are very flexible and support whatever choice you make, as long as it is configured correctly, but simply having it work does not mean that code cleanliness or behavior will suffer at scale. I will outline the case for having hashes in routes.

Defining Hashed Routes

I define hashed routes as any route that has the character ‘#’ in it. To be more explicit:

Usually, we see it in hash-based…


Because it frustrates me that people are making financial and political decisions based on misconceptions

Screenshot of the web page

(This is the link, for those who want to see the page)

According to a YouGov poll from 2013, 48% of people surveyed answered incorrectly when asked about the consequences of being bumped up a tax bracket, showing the nation’s staggering lack of understanding about marginal taxes. (Yes that survey is fairly old now, but I doubt that the figure has changed much since then.) This has real consequences, because people could make poor decisions based on this.

I’m writing this to explain marginal taxes in a simple example, free of all other factors. I am not trying to get…


Svelte‘s tutorial had a pretty good typewriter transition. Here’s how to make it better with some DOM APIs.

Svelte’s logo

I recently picked up Svelte by going through its tutorial. This article is about this particular part, on custom JS transitions.

The limitation on that transition is that it only supports elements with one text node, but that’s extremely limiting. Imagine having a bunch of paragraphs that you want transition in with a typewriter — you would need to add transitions to each one and put delays to make one paragraph show after another! Alternatively you could make your text a single string and tinker with CSS to preserve whitespace while sacrificing your HTML structure.

Both are terrible. …


A real world use case (with code samples) illustrating how composition APIs in front end frameworks are amazing

A color-coded diagram of how the sample code is organized, with the composition API having much better organization
A color-coded diagram of how the sample code is organized, with the composition API having much better organization
Which looks more organized to you?

Note: I will only name React Hooks in this post, but know that these principles apply to other frameworks with similar APIs (e.g. Vue 3’s Composition API) as well. In fact, Vue’s creators have already covered this topic!

React Hooks are old news, but I wanted to cover a real use case that I had recently when working on my website and give a concise example.

Background

I was making a paginated list in Vue’s composition API. The components are split up in this way:

  • PaginatedList: holds state for the list and page in order to render a subset of the…

Aka my proudest JS moment, and an explanation of JS Promises

A kind of semaphore. Photo by antdiario from https://freeimages.com

I wanted to take a moment to write about my implementation of semaphores in JavaScript. It isn’t the best designed or most complex JavaScript I’ve ever written, so if you’re in a hurry and only looking for code, feel free ahead to the code if you wanted to skip my ramblings. I understand ;-)

What is a Semaphore?

A semaphore limits access to a resource to some number of consumers. Any new requests for the resource will get stalled until later, eventually to be handled.

For example, my original use case was for an endpoint on my Express server that triggers a request to…


How to incorporate WAAPI with ReactTransitionGroup v2

I write this assuming that the reader already knows the basics of React, basically how to render a component and what state and props are.

Feel free to skip to the section starting with “Here’s how it works” if you want to skip all the background info, or to the very end for a link to the repo.

The premise: you want to learn animations in React in a scalable, succinct way that shows off your mastery of UI and design.

That was me a few months ago, back when I was naive and idealistic.

React’s support for animations is…

Weiming Wu

I learn UI skills that my employer doesn't care about

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store