We’re back with Frontend to Fullstack Monthly #14 \u2013 new courses, updates, and all the industry’s latest news!<\/p>\n\n\n\n
This month, Boost welcomed new writers sharing essential tools, technology, and modern browser features:<\/p>\n\n\n\n
overflow-clip-margin<\/code>\u00a0and\u00a0it’s got a cool trick up it’s sleeve<\/a>.<\/li>\n\n\n\n- When you are building with a framework, it’s often not\u00a0only<\/em>\u00a0that 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,\u00a0Ben Hong shared with us the whole Vue ecosystem.<\/a>\u00a0That includes routing libraries, state management, meta frameworks, testing libraries, and much more. Ben is a Vue core team member so this is gold!<\/li>\n\n\n\n
- There is a very simple way to “prefetch” a web request: use HTML. The\u00a0
<link rel=\"prefetch\" href=\"\u2026\"><\/code>\u00a0tag 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\u00a0when a frameworks server-side data fetching can’t be used<\/a>.<\/li>\n<\/ul>\n\n\n\nFor beginners:<\/p>\n\n\n\n
\n- Putting your very first website online (we call that\u00a0deploying<\/em>) is a\u00a0big<\/em>\u00a0moment. It might just hook you on this whole web thing. To take any guesswork out of it,\u00a0we have a step-by-step instructions for one way to deploy a website<\/a>. 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\u00a0Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers<\/a>. You also might feel overwhelmed sometimes trying to figure out how to spend the learning time you have.\u00a0Members of our Discord weighed in on that<\/a>\u00a0recently with some sage advice.<\/li>\n<\/ul>\n\n\n\n
Frontend Masters Courses<\/h2>\n\n\n\n
We launched four new courses:<\/p>\n\n\n\n
\n- A revamp of our most popular CSS course:\u00a0Ultimate CSS Grid & Layout Techniques, v3<\/a><\/li>\n\n\n\n
- Three courses centered around user feedback:\u00a0UX Research & User Testing<\/a>,\u00a0The Product Design Process<\/a>, and\u00a0Guide for Launching Your Next Big Idea<\/a>.<\/li>\n<\/ul>\n\n\n\n
We have recorded a ton of courses recently and will be releasing at least four more courses this month!<\/p>\n\n\n\n
Industry news & updates<\/h2>\n\n\n\n
Last month we shared news that the\u00a0WebKit<\/a>\u00a0and\u00a0Chrome<\/a>\u00a0teams were somewhat at odds on how best to implement ‘masonry-style’ layouts in CSS. The\u00a0conversation has continued<\/a>\u00a0at pace, with\u00a0lots of thoughts<\/a>\u00a0on the best way forward, and\u00a0why certain approaches are favored<\/a>.<\/p>\n\n\n\nGoogle I\/O took place a couple of weeks back and beyond the\u00a0banging of the AI drum<\/a>, there’s now\u00a0a full YouTube playlist of all the session videos<\/a>\u00a0\u2014 plenty worth watching here, including\u00a0Una Kravets taking a look over the latest in web UI<\/a>.<\/p>\n\n\n\n\u2728 Key releases you may want on your radar:\u00a0Astro 4.9<\/a>,\u00a0Storybook 8.1<\/a>,\u00a0Angular 18<\/a>,\u00a0Ionic 8.1<\/a>,\u00a0Next.js 15 RC<\/a>.<\/p>\n\n\n\nTutorials and articles<\/h2>\n\n\n\n
With anchor positioning built into the browser<\/a>, you\u2019ll now be able to build layered user interfaces without<\/em> relying on third-party libraries. The CSS Anchor Positioning API is in Chrome as of version 125.<\/p>\n\n\n\nJiayi Hu shares a thorough walkthrough of the practicalities of using Chrome DevTools<\/a> for digging into performance issues.<\/p>\n\n\n\nChris Coyier notes that container query adoption isn\u2019t particularly high, and shares some reasons as to why that may be the case<\/a> (beyond it just being new, and any potential browser support concerns).<\/p>\n\n\n\nWordPress just turned 21<\/a>… but not everyone is celebrating \u2014 David Bushell is frustrated<\/a> with the current ‘code-within-code’ approach to WP development.<\/p>\n\n\n\nJen warns when testing the responsiveness of our sites, we need to stop just resizing the browser<\/a> and should instead use device emulation.<\/p>\n\n\n\nAdam Argyle and Kevin Powell \u25b6 chat about under the radar CSS features in this video<\/a>, highlighting 23 that you should know, and be using. A good refresher on what’s possible.<\/p>\n\n\n\nPreethi Sam runs through\u00a0making a timer with CSS<\/a>.<\/p>\n\n\n\nUseful projects<\/h2>\n\n\n\n
webstatus.dev is a new dashboard<\/a>, from Google, highlighting web platform features.<\/p>\n\n\n\nCSS Pattern<\/a> is a growing collection of nice background patterns from Temani Afif. It’s now 144 strong, and, as you’d expect, all made with just CSS.<\/p>\n\n\n\nThis browser-based tool attempts to quickly convert jQuery-based scripts<\/a> into efficient modern JavaScript.<\/p>\n\n\n\nFontsource has over 1,500 open-source fonts<\/a> to browse and<\/em> integrate into your project via npm packages. Handy.<\/p>\n\n\n\n