Newsletter • Issue 4
Airplanes, Inclusive Components and Bootstrap V5
Howdy, partner and welcome to this week’s round-up!
As always, I want to make you a prize-winning developer by showing you how others have created their brilliant frontend work. The best part is I learn from these, too, so we’re all growing together! Let’s hit the trail.
Codepen
Airplanes
Steve Gardner’s Airplane is my favorite kind of tech demo. It looks good enough to be on a professional site, but the copy lets you know Steve had a lot of fun with it.
A 3D airplane moves through the scene as we scroll, and even transitions to an x-ray style wireframe mode. I had to learn some of the techniques behind this one!
The Techniques
I love how the plane moves throughout the piece smoothly without any noticeable hard stops. Steve explained that it’s really just a GSAP timeline that the user moves through with the scrollbar. He even gives us a great behind-the-scenes tip to watch it in action!
Right after line 340 in the JavaScript, make a new line and add tl.play();
You should see the airplane go through the animations while the rest of the page stays put!
The other thing I had to know was how he does this transition from solid to wireframe.
Steve explained that there are actually two airplanes animating at the same time. He’s using a ThreeJS trick that allows him to have two cameras in the scene. Each camera can only see one version of the plane, so the wireframe section only shows what the wireframe camera sees.
Resources
Steve used an open-source airplane model from Google Poly. It’s a great free resource you should definitely lean on.
Steve also shared his favorite ThreeJS tutorial with us, and I’ve gotta say, it’s AMAZING. A single tutorial, using basic shapes, but with a gorgeous result. Check this one out!
The scrolling is thanks to GSAP’s new ScrollTrigger plugin, which we mentioned last week as well. I have a feeling this won’t be the last time, either!
Horse Resource
Inclusive Components
I’ve been reading Inclusive Components, an excellent book on “designing inclusive web interfaces, piece by piece.” The author, Heydon Pickering, teaches a11y principles by building out several common components.
I wanted to share what I learned in the chapter “A Todo List” with you.
Placeholders and Autocomplete
There’s a big design trend to remove labels, leaving only placeholders to show users what each input is for. Sure labels look like clutter, but it’s necessary information, especially the longer a form gets.
Heydon points out two things I hadn’t thought of that make this pattern extra terrible: focus and autocomplete. “Placeholders disappear on focus and can be eradicated by autocomplete behavior, meaning sighted users lose their labels.” Yet another reason to always have a visible label!
<form> for more than Forms
When I’ve made todo list apps in the past, I’d use an <input /> and a <button /> but not a form element, because I didn’t think I needed it. Heydon points out why you’d want to use a <form> element to wrap that input and button:
“We’ll want to allow users to submit on Enter and this only works reliably where a <form> contains the input upon which Enter is being pressed.”
So to make sure your user can slam that enter key across all browsers, devices, and assistive technologies, wrap your input in a <form>.
You can check out this specific chapter here, and buy the book here.
Developer News
Bootstrap V5
Version 5 of Bootstrap has released this week, and while I haven’t used Bootstrap in years, this feels like a big step for the web. Bootstrap is still massively popular, so the fact that they’ve dropped jQuery and support for IE feels huge. As someone who is eagerly awaiting the death of Internet Explorer, I fully support this move.
So Long, Partner
That’s the end of the trail for this week. Thanks for riding with me.
Follow @FrontendHorse on Twitter and Instagram. If you enjoyed this, I’d be thrilled if you share it with a friend or tweet about it.
Special thanks to Steve Gardner for speaking with me about their work.
This is the part where we ride off into the sunset. Roll credits.
Your Neigh-bor,
Alex