Addy Osmani:

Native lazy-loading for images landed in Chrome 76 via the loading attribute and later came to Firefox. We are happy to share that native lazy-loading for iframes is now standardized and is also supported in Chrome and Chromium-based browsers.

<iframe src="https://changelog.com" loading="lazy" width="600" height="400"></iframe>

YaS!! Lazy load all the things 💚

You might be asking yourself… “is CSS a programming language now?!” Turns out it is, thanks to the Space Toggle trick (which I’m still trying to grok as I write this).

Instead of only triggering the default email or phone apps when selecting a mailto or tel link on your website, “mailgo” provides a modal with more options such as “Open in Gmail”, “Open in Outlook”, etc.

This will extra functionality will be less important on mobile now that Apple is letting us change our default clients in iOS 14 (so that the default app would already be set to Gmail, for example), but you may find it helpful for your users anyhow. 4.96 KB cheap.

htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

htmx is small (~7kb gzipped), dependency-free, and even IE11 compatible. It’s the successor to intercooler.js and even comes bundled with a very nice haiku:

javascript fatigue:
longing for a hypertext
already in hand

It’s backwards compatible back to IE 8 (😱), loads super fast thanks to minimal page weight, and completely free to run on Netlify. Get yer live action demo right here.

Even with the proliferation of modern UI tools like React, Vue, etc. you still have times when dealing directly with the DOM is a must. When that time comes, this site will help you get things done with explanations and code samples for common tasks.

Chris Coyier:

You might reach for <input type="number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers. Even more importantly, there are a variety of screen reader problems.

(We discuss the uncanny valley of number inputs on this JS Party episode about the stale parts of browsers.)

Turns out the best practice (just use text inputs) has a twist to it: inputmode!

Use it by inlining the SVG directly into your HTML

<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>

Comes in 24x24 outline and 20x20 solid styles.

Mike Turley for CSS-Tricks:

JavaScript developers have realized that by defining a page’s structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don’t know anything about, they can (understandably) become frustrated and start asking what the heck we’re getting out of this.

I get this question occasionally and I often have trouble answering it. All of the materials I’ve found on this topic are written for an audience that is already familiar with JavaScript — which is not terribly useful to those who focus on HTML and CSS. But this HTML-in-JS pattern (or something else that provides the same benefits) will likely be around for a while, so I think it’s an important thing that everyone involved in web development should understand.

This repo contains the source code for [the Udemy course](Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)) of the same name. Each mini project has its own README and live demo, too.

It can be used to build websites, documents and feeds, as a templating tool, or as a renderer for higher-level components and tools. It’s primary focus is on static site generation and Swift-based web development.

I’ve always enjoyed using DSL’s like this.

let html = HTML(
    .head(
        .title("My website"),
        .stylesheet("styles.css")
    ),
    .body(
        .div(
            .h1("My website"),
            .p("Writing HTML in Swift is pretty great!")
        )
    )
)

Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content, user experience, publishing, and distribution.

There’s so much to digest here. 85 contributors! Quite an achievement and one that I’m excited to dig in to.

I am dumbfounded by the level of skill involved in pulling this off.

Just like caniuse.com, but for email!

(The only thing worse than browser incompatibilities is email client incompatibilities)

Nintendo has been slowly bringing their iconic games and characters to mobile platforms. Maybe it’s time they consider the web platform? 😉

Conventional template languages like EEx use a form of interpolation to embed a programming language into a markup language, which can result in some ugly code that can be difficult to write and debug.

Temple is written using pure elixir.

There are some good ideas here, for sure. (Click through for code samples.)

My concern with this (and with pretty much all non-HTML style template languages) is cognitive overhead for folks who’d rather be writing HTML. That being said, if I were creating a web app from scratch all by my lonesome, I’d 💯% give Temple a go.

This looks like a nice way to help make web components easier to use. If you want to see it in action, Chris Coyier has a solid write-up over on CSS-Tricks.

10 cool things you can achieve with nothing but HTML. They don’t all work well (and they don’t all work in all browsers), but the big takeaway here is that you should know the capabilities of the tools you’re using before you layer another tool on top.

My big concern is at the bottom of that technology pyramid. The lowest common denominator of the Web. The foundation. The rhythm section. The ladyfingers in the Web trifle. It’s the HTML. And it is becoming increasingly clear to me that there’s a whole swathe of Frontend Engineers who don’t know or understand the frontend-est of frontend technologies.

Solid rant with a nice list of resources at the end. 👌

A great example of how good accessibility practices are often actually good usability practices for all. While the problems highlighted are most impactful on those who have challenges, I found every single alternative suggested improved usability for me as well.

Author Raghavendra Peri states:

According to the research conducted by Nielsen, it is not best practice to have a placeholder in the form field from a user experience perspective. This is because many users are confused by placeholders. In particular, people with cognitive disabilities tend to have issues understanding placeholder text because they think it is pre-populated text and will try to submit the form without entering their specific information.

TL;DR Don’t use placeholders! But for examples of what else to do, read this article.

Fascinating read through covering historical context for accessibility and assistive technologies as well as diving into the way we do accessibility in the web today.

According to author Be Birchall this article aims to shift your perspective

by showing how web accessibility fits into the broader areas of technology, disability, and design. We’ll see how designing for different sets of abilities leads to insight and innovation. I’ll also shed some light on how the history of browsers and HTML is intertwined with the history of assistive technology.

This is the coolest webpage I’ve seen in awhile. The way the quine is accomplished is so brilliantly simple, it almost feels like cheating. It’s brilliant, by the way, because of the esoteric knowledge required to pull it off. It’s simple, because it’s literally a single CSS rule.

The prefers-reduced-motion media query is a great tool for improving accessibility and helping users with visual impairments that make animations and such hard to follow, but did you know you can use it inside a picture element with a srcset? Brad writes:

This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so there’s a bit of extra work involved, but the technical execution is pretty dang straightforward.

What would be even cooler is if blogging and social media services did this automatically…

The year long feud between the WHATWG and the W3C is officially over as the W3C hands over the HTML and DOM standards to WHATWG. This leaves the browser vendors including Microsoft, Google, Mozilla, and Apple in charge of web standards. JS Party #39 discusses the feud and just what each of these groups are.

This is notable/different because it uses descriptive HTML rather than semantic CSS classes:

<grid columns=8>
  <c></c>
  <c span=3>3</c>
  <c></c>
  <c span=7-8>7-8</c>
  <c span=2+2>2+2</c>
  <c span=5-8>5-8</c>
  <c span=1-4>1-4</c>
  <c span=6..>6..</c>
  <c span=2..>2..</c>
  <c span=4..>4..</c>
  <c span=1-2>1-2</c>
  <c span=4-5>4-5</c>
</grid>