This is an issue from the newsletter Frontend Horse. This was originally published on June 18th, 2020. Visit Frontend.Horse to subscribe and find more issues.
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.
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!
I was going to embed the CodePen, but the scaling doesn't make certain animations match up right. I highly suggest you open it in its own window.
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!
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.
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!
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.
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!
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
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.
That’s the end of the trail for this week. Thanks for riding with me.
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.
If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.