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.
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…
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:
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.
I define hashed routes as any route that has the character ‘#’ in it. To be more explicit:
Usually, we see it in hash-based…
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…
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. …
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.
I was making a paginated list in Vue’s composition API. The components are split up in this way:
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…
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…
I learn UI skills that my employer doesn't care about