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.
Need quick starter code of a whole bunch of React concepts? Check out CodePen Topics.
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
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.
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.
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.
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?
A website is a car and not a book.
[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.
🎩 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 →