Frontend Horse #4 - Airplanes, Inclusive Components, and Bootstrap V5
Tags: css, html, javascript, webdev
Published: 2020-06-22 20:08:18

_This is an issue from the newsletter Frontend Horse. This was originally published on June 18th, 2020. Visit [Frontend.Horse](https://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.

---

### CODEPEN
## Airplanes
[Steve Gardner](https://twitter.com/steeevg)’s [Airplane](https://codepen.io/ste-vg/pen/GRooLza) 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](https://dev-to-uploads.s3.amazonaws.com/i/s5ts5kc6ftpt4h5ffiok.png)
_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](https://codepen.io/ste-vg/pen/GRooLza)._

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/lr3wadpppiufw1xewkhk.png)
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](https://poly.google.com/). It’s a great free resource you should definitely lean on.

Steve also shared [his favorite ThreeJS tutorial](https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/) 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](https://greensock.com/docs/v3/Plugins/ScrollTrigger), which we mentioned last week as well. I have a feeling this won’t be the last time, either!

[Check it out ->](https://codepen.io/ste-vg/pen/GRooLza)

---

### HORSE RESOURCE
## Inclusive Components
I’ve been reading [Inclusive Components](https://inclusive-components.design/), an excellent book on “designing inclusive web interfaces, piece by piece.” The author, [Heydon Pickering](https://heydonworks.com/), 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](https://inclusive-components.design/a-todo-list/), and [buy the book here](http://book.inclusive-components.design/). Big thanks to [Jhey](https://twitter.com/jh3yy) for recommending I pick up this fantastic book.

---

### DEV 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 ->](https://v5.getbootstrap.com/)

---

## So Long, Partner
That’s the end of the trail for this week. Thanks for riding with me.

Follow @FrontendHorse on  [Twitter](https://twitter.com/frontendhorse) and  [Instagram](https://instagram.com/frontendhorse). 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_

---

If you liked this post, head to [Frontend.Horse](https://www.frontend.horse) to subscribe! You'll get the next issue before it's posted here on Dev.