There are currently four active methods for storing data on the client side.
- Cookies (old school, still useful because they are sent with server requests)
- Local Storage (very easy to use)
- Session Storage (exactly the same, only clears when the tab is closed)
- IndexedDB (quite complex, quite powerful)
These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.
I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at the same time, all out-of-sync with each other. Plus a few of them had seemingly kinda broken ones that flapped at awkward times and angles.
What does that have to do with web design and development? Nothing really, other than that I took the scene as inspiration to create something, and it ended up being an interesting hodgepodge of “tricks”.
Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.
Perhaps you’ve heard about the WebP image format? And how it’s a pretty good performance win, for the browsers that support it? Well that’s only for Blink-based browsers, at the moment. Estelle Weyl’s article Image Optimization explains the best image format for each browser:
Browser Optimal image format Chrome WebP IE 9+ / Edge JPEG-XR Opera WebP Safari JPEG-2000
And you can serve these formats through the
Couple that complexity with the complexity of responsive images, and it really seems like outsourcing image delivery to a dedicated service seems like the way to go. At least above a certain scale.
When text is rendered by a computer, sometimes characters are displayed as “tofu”. They are little boxes to indicate your device doesn’t have a font to display the text.
Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel. Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “no more tofu”. Noto has multiple styles and weights, and is freely available to all.