We’re back with Frontend to Fullstack Monthly – new courses, updates, and all the industry’s latest news!
From Boost this month
Boost has been busy this month bringing you articles on all sorts of web platform features and news. We’ve also shipped a freshened up design, leaning into GitHub’s open source Mona Sans, a variable font that certainly seems up to the task of typography on a tech blog.
The aspect-ratio property in CSS is super useful and has been supported in all browsers for quite a while now, but it doesn’t take much for it to not work as expected. If this is happening to you, here’s what might be going on. We prefer the fundamentals at Frontend Masters; vanilla HTML, CSS, and JavaScript will always serve you well. Here’s an easy grab-and-go search form using just the vanilla tech you need. The Popover API is now available across browsers and personally I’m most excited about using it for tooltips.
We’d also like to welcome some new guest authors, like Adam Rackis who introduces us to the versatile Auth.js library and in this case use it with Svelte. Ben Hong did an exemplary job showing us the landscape of tools around Vue right now. Preethi Sam gets awfully clever with Scroll-Driven Animations making section-based scroll progress indicators.
New Frontend Masters courses
We launched two new courses: Building Go Apps that Scale on AWS and Everything You Need to Know About Git. We have recorded a ton of courses recently and will be releasing at least four more this month.
And we’ve been in the studio cooking up tons of new courses! They are recorded as live workshops, and then edited into courses. Hope you can join us!
Industry news & updates
The first beta of React 19 landed at the end of April with, notably, full support for Custom Elements. It’s targeted at library and tool developers to get prepared for a final v19 release, but you can always upgrade if you want…
The WebKit and Chrome teams are at odds on how best to implement so-called masonry-style layouts in CSS. Chris Coyier gives his take on Boost.
Node.js 22 arrived as the new ‘current’ branch of Node.js and is due to become the active LTS version later this year. It now has a WebSocket client enabled by default, watch mode is considered stable, and you can now run npm scripts more quickly using its --run option. FYI if you want to get up to speed with Node, we have an entire learning path for Node.js.
Ryan Dahl is keen to stress that JSR is not a new package manager or replacement for npm, but part of a fundamental shift in how packages are distributed — tailored for the modern ES modules era.
Google has delayed the end of third-party cookies in Chrome yet again.
Here’s what work is being carried out to keep jQuery up to date across the web. jQuery UI got a small new release too – there’s plenty of life in jQuery yet.
✨ Key releases you may want on your radar: Astro 4.7, Svelte 5 RC, Next.js 14.2 Electron 30.0, and version 2.0 of text-editor Quill.
Handy tutorials and articles
⭐️ Cody Lindley is back with another updated edition of the Frontend Handbook for us. It’s a free, in-depth, guide to the current web development landscape. It covers everything from code editors, CSS, UX, UI, popular tools and frameworks, performance, accessibility, testing, AI, and much much more. Biased maybe, but well worth a bookmark we reckon.
Did you know you can detect JavaScript support just in CSS? It’s all thanks to the scripting media query.
Here’s a solid step-by-step instructional video (29 minutes) on ▶️ digging into responsiveness issues in Chrome’s Performance Panel.
Daine Mawer explains how we can create fluid typography with the CSS clamp() function.
Alexis Kypridemos shows us how we convert plain text to encoded HTML with vanilla JavaScript.
Useful projects
Extension is a new, easy way to get started with building your own browser extensions. One terminal command and you’re up and running.
Consent Banner JS is a zero-dependency, lightweight (~3KB) cookie banner.
TresJS can be used to create 3D scenes with Vue components and Three.js if you want to put together dynamic, striking visual experiences on the Web.
📊 Unovis is a flexible data visualization framework that’s happy working alongside React, Angular, Svelte, Vue or vanilla TypeScript/JavaScript. There are lots of examples, all with code.
Tagify is an elegant component for inputting tags.
This gallery has over 250 click-to-copy CSS gradients.
Naming things (functions, classes, properties, etc) can be hard, this site sets out to help.
Thanks for reading – see you in the next one!
