[Robin]: Last week we talked a bit about weird browsers and why I’m so gosh-darned excited for them. Well, this week I’ve been thinking a bit about weird tools for making websites like utopia.app:
In its simplest form, you can use it as an online coding playground for React projects, and include custom assets, and external packages and component libraries via node. To edit the code, we included VSCode, Microsoft’s open source code editor – complete with ESLint, Prettier, theme support. There’s a console for debugging, an external preview for sharing your creations with the world, and runtime error messages. And there’s a canvas that lets you render one or many components, and that updates as-you-type.
This sort of feels like if Figma merged with Chrome DevTools and VSCode. And at first, it’s a little overwhelming seeing all these toggles and buttons and what not but it makes me excited that design and development tools might coalesce somehow in the future.
?
Oh, here’s a reminder to check out the State of CSS 2021 survey before it ends this week. It always makes for an interesting read to see how folks are using CSS and what properties they’re not aware of yet. There’s always stuff here that reminds me I should probably check out this little thing.
?
I enjoyed this tip all about landmarks in the HTML Hell Newsletter. There’s a whole list of small things to remember when it comes to using elements like main that help users navigate across a webpage. Take this one for example on writing forms:
If there are multiple form landmarks on a page, each should have a unique label (aria-label or aria-labelledby)
Huh! I did not know this. I knew that if you use the <nav> element then you should really out to add an aria attribute to help explain what the different navigations are doing, like this…
<body>
<header>
<nav aria-label="Primary"></nav>
</header>
<footer>
<nav aria-label="Secondary"></nav>
</footer>
</body>But I didn’t know the same thing applied to the <form> element.
?
I feel embarrassed that I didn’t know this other thing, too. Geoff Graham wrote about lists, semantics, and CSS and mentioned that when you write some styles like this…
.nav li {
list-style: none;
}…then it sort of breaks accessibility features:
The only problem is that wipes out the semantics of the list in VoiceOver in WebKit browsers. With list styling, VoiceOver announces the list and the number of items in it. Without list styling, VoiceOver only announces the content in the list items.
Thinking about this for a bit and here’s my hot take: I don’t think that WebKit should remove VoiceOver when CSS changes are made like this. When I’m writing CSS I almost want everything I write to be ignored when it comes to accessibility. As an author, I’d prefer it if browsers made accessibility decisions only when I start writing HTML. I know that’s not always possible, but it would be ideal I reckon.
Styles are styles, markup is semantics. Keeping them separate just makes more logical sense to me and it would certainly help me from making these easy and innocuous mistakes like the list stuff above.
?
One of the questions I tend to ask all the time is this: can I include HTML element A inside of element B? For example, sometimes I forget that you can throw a <div> into a <dl> like this (and with this <div> below it helps you style the ever-so-nifty definition list):
<h1>Shopping List</h1>
<dl>
<div>
<dt>Milk</dt>
<dd>1 gallon</dd>
</div>
</dl>All this is a bit weird because it means you have to remember which HTML element is allowed to fit inside another and the only way to learn is through trial and error which can take a long while (and I’m still learning!).
Well, thankfully there’s this great tool called Can Include which quickly answers this question: all you have to do is ask which child element can be placed within a parent and this website will reveal the answer…
Now we can answer age old questions such as: can a <div> be placed inside a <h1>? (Sorry – nope!)
?
CSS Resets—like Eric Meyer’s—are extremely handy because when we use them we hope to reduce browser inconsistencies and make it easier for us to write override the default styles that browsers apply to HTML elements.
This new CSS reset by Elad Shechter is interesting in a different way though because it applies a few new CSS features that have just started to arrive in browsers. For example, right away it just kicks in the door and is incredibly punk rock:
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
all: unset;
display: revert;
}What the what? Okay, let’s walk through this thing step by step. After we interviewed Elad about all this in more depth, I wanted to make a quick summary of what’s going on above:
*selects every element:whereis used to decrease the level of specificity of these changes so we can easily override them later:not(iframe, canvas, img, svg, video)makes sure that we don’t break thewidthandheightof these elements:not(svg *)makes sure we don’t break any elements within the svg elementall: unsetremoves all the styles of the user agent stylesheet (so a h1 looks just like a h2 and buttons don’t have backgrounds or borders)- And finally
display:revertmakes sure that thedisplayproperty for every HTML element is kept just the same (so for example a span is still inline whilst a div is stilldisplay: block)
You can test what effect this has on HTML elements with this quick demo page I made. First off though, HTML looks something like this by default in Edge:
And then if we were to apply this punk rock chunk of Elad’s CSS reset, then our HTML will look like this…
This makes a whole bunch of sense to me and as Elad mentions at the end of the interview, I’m excited to see how all this @layer stuff is used in the future to improve our CSS resets even further.
??
Dylan Smith wrote about styling the kbd element:
What I like most about
<kbd>, though, is how well it lends itself to interesting visual styles. It usually represents a single key on a keyboard. Physical and virtual keys are little squares and rectangles. If all you do is add a border to it, you’re most of the way there. Even though I very rarely actually get to use this element on my site, I wanted to dress it up as a bit of an Easter egg.
I love faffing about with the <kbd> element.
?
I like this fun neon button by Pranjal Bhadu where you can see the text mirrored beneath it once it’s highlighted…
This is interesting because most of the time UI elements on the web don’t have reflective surfaces, and tend not to interact with other surfaces or anything. That’s neat! But I also really like this CSS-only wavy curve loader of Pranjal’s…
Nifty stuff.
Sponsor
What is Real User Monitoring? RUM explained
Real User Monitoring tools help software teams to identify front-end performance issues, measure trends in application performance, and improve the customer experience. Learn how you can use Raygun to improve the health of your software today.
Sponsor
VideoPress for WordPress
If you run a self-hosted WordPress site like we do, VideoPress is a major upgrade to hosting videos in content. You get VideoPress through Jetpack. If you buy Jetpack Complete, you’ve got it — otherwise, it’s an à la carte purchase. So, if VideoPress is the only feature of Jetpack you want, no problem.
With VideoPress, you get a nice customized video player, cloud-hosted optimized video delivery, playback speed control, and the videos will look good on mobile without you having to manually create a poster.
[Chris]: I saw that Parcel went v2. The new homepage looks nice. One of those sites you can just smell the Tailwind on. They call it a “build tool”. “Bundler” is another word that comes to mind, probably because that is what webpack calls itself. Grunt and Gulp were “task runners”. All these tools get a bit confusing because there is a lot of overlap, but not entirely.
For example, for all the people out there that write JavaScript in TypeScript syntax: what exactly is doing your TypeScript transformation? TypeScript ultimately has its own compiler with its own API that you could call directly, but I’m not sure most people do that. Next.js supports TypeScript, but it just kinda works as long as you have scaffolded the project with the right flag. Internally, Next uses Babel to process the TypeScript, but of course Babel somewhere somehow ultimately uses the TypeScript compiler. Right?!
Circling that back to Parcel, Parcel also abstracts TypeScript usage. That’s the kind of area where Parcel shines. You do literally nothing but link up a <script src="script.ts"> in some HTML (which acts like an “entry point”) and it’ll just work. What does the TypeScript processing? I dunno, something, somewhere, which ultimately uses the TypeScript compiler. Probably?
Vite is getting more and more popular every day. Part of the appeal is that it supports many of the things developers like “out of the box”, like TypeScript. Does it just call the TypeScript compiler directly? I don’t think so, it uses esbuild and esbuild does that? How does Astro do it? I dunno it just does.
All these tools end up just feeling like magic. But hey, so does my entire computer so.