What's going on with HTML?

Issue #293.May 30, 2024.2 Minute read.
Bytes

đź”® For the past year we’ve been working closely with the React Query team to create query.gg â€“ the new official React Query course.

We’re excited to announce that it’s now available and will be up to 30% off through June 5th.

You can claim your discount here.


Today’s issue: The George R.R. Martin of JavaScript, the Laravel threat, and teaching my goldendoodle flexbox.

Welcome to #293.


Eyeballs logo

The Main Thing

Alliance of magicians meeting from Arrested Development

HTML wizards meetup

What’s going on with HTML?

The first-ever State of HTML survey came out earlier this month, and I must admit that I was surprised to learn that the average HTML developer makes $750k per year.

That’s a joke, but we did find 5 surprising insights from the survey to give a better idea of what’s going on in web platform world:

  1. Developers are very hyped about the new popover API. And considering the fact that most codebases currently have appx. 1,000 lines of code dedicated to managing popovers, it’s not hard to see why.

  2. For all their benefits, SVGs are still one of the things that developers struggle with the most – whether its managing their size, layout, or styling.

  3. It seems like the true believers are going to have to wait another year for Web Components to really hit the mainstream. Developers still report various pain points with Web Components, particularly when it comes to styling (Shadow Dom) and customization.

  4. When it comes to accessibility, you can get pretty far with semantic HTML, descriptive alt texts, and using good contrast. But developers still report some struggles with “the rest” – keyboard navigation, focus management, and testing accessibility.

  5. One of the more interesting bits was what elements developers still feel are missing from HTML. Lists, native tabs, style-able toggles, and loading placeholders rounded out the top 4 features on the wishlist.

Bottom Line: Welcome to the golden age of hypertext markup.

        

speedcurve logo

Our Friends
(With Benefits)

Renaissance-style painting of woman looking at a phone

When you push some new features and the site won’t load

Catch performance regressions before they happen with SpeedCurve

Your site was super fast when you built it – but now it’s 6 months later, and that thing feels slower than a 4-hour Scorcese movie.

Next time, use SpeedCurve.

Their regression monitoring platform was created by a team of web performance pioneers to help you catch performance regressions before they happen.

Here’s how it works:

  1. Create performance budgets by setting thresholds for metrics you care about, like Core Web Vitals

  2. Integrate SpeedCurve with your CI/CD process to send you alerts or even break the build when the performance budget is violated

  3. Get all the diagnostics you need to find and fix the problems, when there’s an issue

Check out the free trial – and see why developers at Airbnb, Shopify, and many more really love it.


Pop Quiz logo

Pop Quiz

Sponsored by Socket

Their developer-first security platform is the best way to secure all your dependencies, and is used by teams at Figma, Vercel, Expo, Replit, and many more.

What will be logged to the console when this code executes? The answer is below.

window.name = "Mike Tyson";

const me = {
  name: "Tyler",
  sayName() {
    console.log(this.name);
  },
};

const sayName = me.sayName;
sayName();

Cool Bits logo

Cool Bits

  1. We made you this free course preview of our new React Query course, query.gg, so you can try before you buy.

  2. Max Böck wrote about teaching an old dog new CSS tricks. That’s cool, because my goldendoodle still can’t figure out flexbox.

  3. Almog G did an in-depth case study on client-side rendering performance, SEO, and how it (might) be better than server-side-rendering.

  4. Salma Alam-Naylor shared 5 easy tips to improve your personal website performance on the Sentry blog. Dumbledore said that “there will come a time when we must choose between what is right and what is easy” – but these tips are both, so I guess that time hasn’t come yet 🙏. [sponsored]

  5. If you were confused about async vs defer vs typemodule, Zachary Lee wrote this article to clear it up.

  6. Astro 4.9 was just released and includes support for React 19, plus the (experimental) ability to render Astro components outside of Astro.

  7. Vinny wrote about Why we don’t have a Laravel for… yet. Is that a threat?

  8. Calling all design systems fans! The StackBlitz and zeroheight teams are hosting an in-depth discussion on designer-developer collaboration next week. They’ll be sharing proven tactics for establishing a continuous feedback loop for design system users and maintainers alike. [sponsored]

  9. Marcelo created a virtual DOM in 200 lines of code. Relax, this VDOM is “not about performance” (it’s about the friends you made along the way).

  10. Marvin Hagemeister (aka the George R.R. Martin of JavaScript) just published the 9th installment of his “Speeding up the JavaScript ecosystem” series on Server Side JSX.


Pop Quiz logo

Pop Quiz: Answer

Sponsored by Socket

What will be logged to the console when this code executes?

window.name = "Mike Tyson";

const me = {
  name: "Tyler",
  sayName() {
    console.log(this.name);
  },
};

const sayName = me.sayName;
sayName();

The answer? “Mike Tyson”.

Since we’re not in strict mode, sayName isn’t a method, and we’re not using call or apply, this inside of sayName will default to the window object.