#143

How we hide elements is a good example of why nobody should brush off HTML & CSS skill.

You got your display: none;. The sledgehammer of hiding things on the web. Apply that to an element with CSS and it not only visually disappears and is removed from the layout flow but disappears for users using assistive technology as well.

You got your visibility: hidden;. That’s nice when you want the element to remain in the layout flow, but still be hidden for everyone. It pairs nicely with opacity: 0; because both can be transitioned for smooth hide/show animations.

Is that all you need to know about hiding things on the web? Heck no, there is more. There are ARIA-attributes that get involved. There is the HTML hidden attribute that is its own little interesting beast. There is considering tab order weirdness that can occur when hiding things, and the inert attribute that releases to that. You’ve got touch-screen explorability to consider when hiding native interactive elements. You’ve got to consider how hidden elements can still affect selectors. Not to mention the concept of hiding things only for certain types of users and the salad of CSS property/values sometimes needed.

It’s complicated, and a perfect example of why nobody should be able to brush off HTML and CSS as being trivially easy and something any ol’ programmer can plop out.


You can’t just phone in tabs.

You know what’s just as complicated as hiding things? Tabbed interfaces. It involves hiding inactive tab content, so I suppose it would be. Unlike accordions, where HTML provides a native mechanism for them via <details> and <summary>, there is no such provided functionality for tabs. We can code them up ourselves without too much trouble in JavaScript, but if all we do is toggle some classes that style the tabs differently and display block/none the content, have we actually built an accessible interface?


Need quick starter code of a whole bunch of React concepts? Check out CodePen Topics.

Did you see there are Topics over on CodePen now? React is just one of many, and has lots of great starter examples.

This our Alpha release of that, but we hope it’s already useful in being able to explore different popular technologies and patterns and find good information and code.


env() is to var() in CSS as const is to var in JavaScript

Perhaps you already know about CSS Custom Properties. They are like variables in CSS, only more awesome than what you’d get with a CSS preprocessor because they can do things like cascade their values and change in a media query which only work at runtime.

Being able to re-declare a custom property is a nice feature, but what if you didn’t want people to be able to do that? Like const in JavaScript. Well that’s sorta what env() will be able to do in CSS eventually. “Environment Variables”. They already exist now for browsers to declare things like safe-area-inset-top for helping us design around browser screens with unusual features.

We cant set them ourselves just yet, but we can fake it.


Did you know you can take a string and just chuck it into your browsers’ cache right from client-side JavaScript?

You can, and then look in that cache for requests via service worker later. That’s the concept behind both inline and caching things, like SVG icons.


JavaScript has APIs for turning text into audio.

let u = new SpeechSynthesisUtterance();
u.text = "Hello";
speechSynthesis.speak(u);

Even more useful? Translate the text to other languages first and then speak it.


Have you built a cool animation that is powered by mouse movement?

Before the user interacts with it with their own mouse, you can simulate random mouse movement, as Louis Hoebregts shows us. Pretty cool for CodePen demos of that nature ;)


A website is a car and not a book.

Robin Rendle:

[A car has] to be mass produced and they have to be tested. Each has to be built up of perfectly identical components that need to fit together in a very specific format. There are technical issues – limitations of physics, money, and time – that require confronting on a daily basis. You can’t point at one part of the car and have an opinion about aesthetics because that one component changes the relationships of the others. You have to understand that you’re looking at an immensely complicated system of moving parts.


The Power of Named Transitions in Vue.

Everything Vue does with animations and transitions is pretty great. Travis Almand documents giving them names.


VSCode Power User
5,374+ Devs/Designers Already Learning!
SPONSOR

VSCode Power User Course

🎩 A community-supported OpenSourcerer — Awais has helped 5374+ devs & designers switch to VSCode — free editor everyone’s talking about. His Shades of Purple theme has 1.2 Million users.

Learn 200+ tips/tricks to become a VSCode Power User today →