Newsletter #4 - Airplanes, Inclusive Components and Bootstrap V5

June 18, 2020

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! Steve Gardner's Airplanes Codepen

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.

The Airplane transitioning between solid and 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!

Check it out ->


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. Big thanks to Jhey for recommending I pick up this fantastic book.


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.

Check it out ->


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

Subscribe to get future issues in your inbox!