Frontend to Fullstack Monthly #14 – The state of HTML in 2024

We’re back with Frontend to Fullstack Monthly #14 – new courses, updates, and all the industry’s latest news!

Frontend Masters Boost (From this Blog)

This month, Boost welcomed new writers sharing essential tools, technology, and modern browser features:

Sacha Greif, co-creator of the first-annual HTML survey stopped by to share interesting findings from the results of the survey.
CSS just might be the fastest-moving web technology right now. We’ve covered scroll-driven animations a few times, and this month Preethi Sam gets deeper into it showing off making reading progress indicators not for the whole page but for sections of a page. The Popover API is also now available across browsers. You can use it via HTML alone, but it’s likely CSS will help make it fit your design. It’s the perfect thing for tooltips, but unfortunately we don’t have the anchor positioning API to go with it yet. Still, we can use popovers for tooltips with a smidge of extra JavaScript. Lastly, here’s a CSS property I’ll be you’ve never heard of: overflow-clip-margin and it’s got a cool trick up it’s sleeve.
When you are building with a framework, it’s often not only that framework that concerns you. There might be a meta framework on top of it. There might be additional needs the framework intentially doesn’t handle for you. For instance, if you’re building with React, you might use Next.js on top of it, and a styling library like Styled Components as those other tools have no particular opinion about styles. Over in Vue land, Ben Hong shared with us the whole Vue ecosystem. That includes routing libraries, state management, meta frameworks, testing libraries, and much more. Ben is a Vue core team member so this is gold!
There is a very simple way to “prefetch” a web request: use HTML. The <link rel="prefetch" href="…"> tag will do just that, caching the results. You should be relatively sure a user needs this data, but if you are, it can be a performance improvement. Adam Rackis shares how it can leveraged when a frameworks server-side data fetching can’t be used.

For beginners:

Putting your very first website online (we call that deploying) is a big moment. It might just hook you on this whole web thing. To take any guesswork out of it, we have a step-by-step instructions for one way to deploy a website. If you’ve never written a line of JavaScript, but perhaps have a bit of experience in design or HTML/CSS, you may get something out of our Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers. You also might feel overwhelmed sometimes trying to figure out how to spend the learning time you have. Members of our Discord weighed in on that recently with some sage advice.

Frontend Masters Courses

We launched four new courses:

A revamp of our most popular CSS course: Ultimate CSS Grid & Layout Techniques, v3
Three courses centered around user feedback: UX Research & User Testing, The Product Design Process, and Guide for Launching Your Next Big Idea.

We have recorded a ton of courses recently and will be releasing at least four more courses this month!

Industry news & updates

Last month we shared news that the WebKit and Chrome teams were somewhat at odds on how best to implement ‘masonry-style’ layouts in CSS. The conversation has continued at pace, with lots of thoughts on the best way forward, and why certain approaches are favored.

Google I/O took place a couple of weeks back and beyond the banging of the AI drum, there’s now a full YouTube playlist of all the session videos — plenty worth watching here, including Una Kravets taking a look over the latest in web UI.

✨ Key releases you may want on your radar: Astro 4.9, Storybook 8.1, Angular 18, Ionic 8.1, Next.js 15 RC.

Tutorials and articles

With anchor positioning built into the browser, you’ll now be able to build layered user interfaces without relying on third-party libraries. The CSS Anchor Positioning API is in Chrome as of version 125.

Jiayi Hu shares a thorough walkthrough of the practicalities of using Chrome DevTools for digging into performance issues.

Chris Coyier notes that container query adoption isn’t particularly high, and shares some reasons as to why that may be the case (beyond it just being new, and any potential browser support concerns).

WordPress just turned 21… but not everyone is celebrating — David Bushell is frustrated with the current ‘code-within-code’ approach to WP development.

Jen warns when testing the responsiveness of our sites, we need to stop just resizing the browser and should instead use device emulation.

Adam Argyle and Kevin Powell ▶ chat about under the radar CSS features in this video, highlighting 23 that you should know, and be using. A good refresher on what’s possible.

Preethi Sam runs through making a timer with CSS.