#3 Lets chat(GPT) about frontend.

Hello 👋🏼 frontendies! Third issue this year, and we've already more than doubled in size - there are 24 of us out there! Still a very prestigious club, but we're obviously getting into the mainstream (right?!). Enough of that celebration, though - let's get back to business!

March was relatively slow regarding news, or should I say non-AI news. ChatGPT and its friends flooded every possible media, and anything else felt like some slight distraction. However, frontend is still going strong, so I found a couple of interesting links this month worth checking out.

P.S. AI is fascinating, and yes, that cute cover image was generated with Midjourney 🙂

Do you remember how much stuff Safari's team released last month to their beta/nightly/technology preview build? All that effort found its way to the production build and is part of the latest version, 16.4 🎉 135 new web features, and over 280 updates packed into a single release. Lots of exciting stuff there for almost every API you can imagine. ElementInternals, @property, outline with border-radius, and loading="lazy" on iframes stand out for me, but you should go and check out the release notes cause it's truly packed!

Chrome's team is adding to the platform as well. This time around, it's View Transition API. If you ever tried to create a nice transition between two states, maybe morph some elements in the process, you'll know how tedious that code is and how awesome it would be to tell the browser to do that. We're far from making it a standard feature, but state transitions for Single Page Applications just landed in Chrome v111, and it looks very promising.

Last month I mentioned the 5.0 beta release of TypeScript, and it took a little while for it to go into production. There are many new features and improvements like decorators, multiple configuration files, enums, and much more, so check out the detailed announcement on Microsoft's dev blog.

Don't get me wrong, I'm grateful we have libraries like FloatingUI or Tippy, but I can't wait to replace them with a CSS-only solution. Anchor positioning looks very promising, and I'm excited about this development.

Another feature in Chrome v111 - trigonometric functions in CSS. calc, min, max, clam, and now a bunch of new functions that you can use to offload some calculations to CSS and easily position your elements or create exciting effects without a single line of JavaScript.

Kent and Simon are building in the open, from a design to a fully functional website in around 2h. Watching these two guys, especially working together, is a pleasure to watch.

Debugging disappearing elements is painful and annoying. This trick is so simple that I still can't believe I haven't thought about it before 🤯

Tailwind's team is not slowing down. Another minor release includes an extended color palette, ESM and TypeScript support, line-clamp out of the box, CSS variables shorthand, and other features. Worth checking out - as usual, Adam did a great job unpacking all of that in a detailed blog post.

I like many things about VSCode, but I can't say it's fast or easy on my battery. Zed tries to address these issues, so it might be worth checking out if you're "in the market" for a new editor.

After years of being criticized for poor documentation, React finally got a complete overhaul, and it seems that now you can find what you're looking for, and it's full of helpful info, including API references, examples, and multiple guides.

Interesting performance comparison of a few popular frameworks: Astro, Gatsby, Next.js, Nuxt, Remix, SvelteKit, and WordPress. How do they perform in real-world scenarios, their Core Web Vitals, and payload size. The report was created by the Astro team, so keep that in mind while looking at results 😉

Components are excellent and have become a standard tool in modern web development across almost every major framework/library, so Drupal's maintainers decided to jump on board and bring components to Drupal Core in the form of Single Directory Components.

Finding functioning, accessible, and not built on the gazillion of dependencies calendar is almost impossible. Writing your own is probably even more demanding than that. Mads Stoumann created an excellent step-by-step guide that will take you through different aspects of this challenge, like accessibility, internationalization, styling, and basic functionality.