Snippets
Cars with Broken Windshield Wipers
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”.
Fancy SVG Letter Animation
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.
The "Optimal Image Format" for Each Browser
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
<picture><source type="">syntax.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.
Google Noto Fonts
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.
Print QR Codes For Easy URL References
Often regarded as an advertising eyesore, QR codes have their place in certain circumstances. One obvious example is providing an easily-scanned sigil on a printed Web page that enables the user to return to the live version without having to type the URL.
To create the matching QR code, we’ll use Google’s Chart API, which has four required components:
- The kind of chart information we want Google to deliver (
qr, in our case);- The rendered size of the QR sigil, in pixels;
- The URL to encode;
- The form of character encoding to use.
We’d typically associate the URL with a heading element at the top of the page:
To create the printed result, we’ll provide a margin on the right side of the
h1that is large enough for the heading, and then position a QR code in that area:
Code language: CSS
header h1 {
margin-right: 200px;
margin-bottom: 2rem;
line-height: 1.5;
}
Because the QR code will be unique to each page, this would be added as an embedded style sheet:
Code language: CSS
@media print {
header h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
This approach has the downside of forcing the developer to enter a URL individually for each page into the API code. If your Web host is running PHP, you can provide the URL of the current page automatically:
Code language: CSS
@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}