Our much anticipated Family Feud
rip-off inspired game show is finally here! Emma was joined by Nick and special guest Abenezer Abebe to form the Hypertext Assassins. KBall captained (despite never seeing Family Feud before) the DSL Destroyers with Mikeal and special guest Ali Spittel.
Our much anticipated Family Feud
Native lazy-loading for images landed in Chrome 76 via the
loadingattribute 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
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:
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.
JS Danger is back! Suz, Emma, and Divya square off in our don’t-call-it-jeopardy game show. Will Emma totally redeem herself? Are Divya’s trivia skills as on point as her debate skills? Will Suz murder Jerod in a fit of terrible-question-inducing rage?! Listen and play along!
Our Jeopardy-style (but don’t call it Jeopardy) game is back! This time Jerod plays the part of Alex Trabeck and Emma tries her hand at contestant-ing. Can Scott Tolinski from the Syntax podcast hang with Emma and Nick? Listen and play along!
Jerod and KBall are joined by Micro Frontends in Action author Michael Geers to discuss (you guessed it) micro frontend architecture. We ask: what is the concept? How is it similar/different to micro services? Who is it best fitted for? How do you put it in practice? And much more.
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.
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:
It’s a new year which means companies are hiring and developers are interviewing. So we thought it would be fun to host a fun game of technical Jeopardy.
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.