{"id":2156,"date":"2024-05-13T15:42:44","date_gmt":"2024-05-13T21:42:44","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2156"},"modified":"2024-05-15T07:06:28","modified_gmt":"2024-05-15T13:06:28","slug":"frontend-to-fullstack-13","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/frontend-to-fullstack-13\/","title":{"rendered":"Frontend to Fullstack Monthly #13 \u2013\u00a0How should masonry work in CSS?"},"content":{"rendered":"\n

We\u2019re back with Frontend to Fullstack Monthly \u2013 new courses, updates, and all the industry\u2019s latest news!<\/p>\n

From Boost this month<\/h2>\n

Boost has been busy this month bringing you articles on all sorts of web platform features and news. We\u2019ve also shipped a freshened up design, leaning into GitHub\u2019s open source\u00a0Mona Sans<\/a>, a variable font that certainly seems up to the task of typography on a tech blog.<\/p>\n

The\u00a0aspect-ratio<\/code>\u00a0property in CSS is super useful and has been supported in all browsers for quite a while now, but it doesn\u2019t take much for it to not work as expected. If this is happening to you,\u00a0here\u2019s what might be going on<\/a>. We\u00a0prefer the fundamentals at Frontend Masters; vanilla HTML, CSS, and JavaScript will always serve you well. Here\u2019s\u00a0an easy grab-and-go search form<\/a>\u00a0using just the vanilla tech you need. The\u00a0Popover API is now available<\/a>\u00a0across browsers and personally I\u2019m most excited about\u00a0using it for tooltips<\/a>.<\/p>\n

We\u2019d also like to welcome some new guest authors, like Adam Rackis who\u00a0introduces us to the versatile Auth.js\u00a0<\/a>library and in this case use it with Svelte. Ben Hong did an exemplary job showing us the\u00a0landscape of tools around Vue<\/a>\u00a0right now.\u00a0Preethi Sam gets awfully clever<\/a>\u00a0with Scroll-Driven Animations making section-based scroll progress indicators.<\/p>\n

New Frontend Masters courses<\/h2>\n

We launched two new courses:\u00a0Building Go Apps that Scale on AWS<\/a>\u00a0and\u00a0Everything You Need to Know About Git<\/a>. We have recorded a ton of courses recently and will be releasing at least four more this month.<\/p>\n

And we\u2019ve been in the studio cooking up tons of new courses! They are recorded as\u00a0live workshops<\/a>, and then edited into courses. Hope you can join us!<\/p>\n

Industry news & updates<\/h2>\n

The first\u00a0beta of React 19<\/a>\u00a0landed at the end of April with, notably, full support for Custom Elements. It\u2019s targeted at library and tool developers to get prepared for a final v19 release, but you\u00a0can always upgrade if you want\u2026<\/a><\/p>\n

The\u00a0WebKit<\/a>\u00a0and\u00a0Chrome<\/a>\u00a0teams are at odds on how best to implement so-called masonry-style layouts in CSS.\u00a0Chris Coyier gives his take on Boost<\/a>.<\/p>\n

Node.js 22<\/a>\u00a0arrived as the new \u2018current\u2019 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\u00a0--run<\/code>\u00a0option. FYI if you want to get up to speed with Node, we have an entire\u00a0learning path for Node.js<\/a>.<\/p>\n

Ryan Dahl is keen to stress that\u00a0JSR is not a new package manager<\/a>\u00a0or replacement for\u00a0npm<\/code>, but part of a fundamental shift in how packages are distributed \u2014 tailored for the modern ES modules era.<\/p>\n

Google has\u00a0delayed the end of third-party cookies in Chrome<\/a>\u00a0yet again.<\/p>\n

Here\u2019s what work is being carried out<\/a>\u00a0to keep jQuery up to date across the web. jQuery UI got\u00a0a small new release too<\/a>\u00a0\u2013 there\u2019s plenty of life in jQuery yet.<\/p>\n

\u2728 Key releases you may want on your radar:\u00a0Astro 4.7<\/a>,\u00a0Svelte 5 RC<\/a>,\u00a0Next.js 14.2<\/a>\u00a0Electron 30.0<\/a>, and\u00a0version 2.0<\/a>\u00a0of text-editor\u00a0Quill.<\/em><\/p>\n

Handy tutorials and articles<\/h2>\n

\u2b50\ufe0f Cody Lindley is back with another\u00a0updated edition of the\u00a0Frontend Handbook<\/em>\u00a0for us<\/a>. It\u2019s 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.\u00a0Biased maybe, but well worth a bookmark we reckon<\/em>.<\/p>\n

Did you know you can\u00a0detect JavaScript support just in CSS<\/a>? It\u2019s all thanks to the\u00a0scripting<\/code>\u00a0media query.<\/p>\n

Here\u2019s a solid step-by-step instructional video (29 minutes) on \u25b6\ufe0f\u00a0digging into responsiveness issues<\/a>\u00a0in Chrome\u2019s Performance Panel.<\/p>\n

Daine Mawer explains\u00a0how we can create fluid typography<\/a>\u00a0with the CSS\u00a0clamp()<\/code>\u00a0function.<\/p>\n

Alexis Kypridemos shows us how we\u00a0convert plain text to encoded HTML<\/a>\u00a0with vanilla JavaScript.<\/p>\n

Useful projects<\/h2>\n

Extension<\/a>\u00a0is a new, easy way to get started with building your own browser extensions. One terminal command and you\u2019re up and running.<\/p>\n

Consent Banner JS<\/a>\u00a0is a zero-dependency, lightweight (~3KB) cookie banner.<\/p>\n

TresJS<\/a>\u00a0can 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.<\/p>\n

\ud83d\udcca\u00a0Unovis<\/a>\u00a0is a flexible data visualization framework that\u2019s happy working alongside React, Angular, Svelte, Vue or vanilla TypeScript\/JavaScript. There are\u00a0lots of examples<\/a>, all with code.<\/p>\n

Tagify<\/a>\u00a0is an elegant component for inputting tags.<\/p>\n

This gallery<\/a>\u00a0has over 250 click-to-copy CSS gradients.<\/p>\n

Naming things (functions, classes, properties, etc) can be hard,\u00a0this site sets out to help<\/a>.<\/p>\n

Thanks for reading \u2013 see you in the next one!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":15,"featured_media":2192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[172],"class_list":["post-2156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-newsletter"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/newsletter.jpg?fit=1792%2C1024&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2156"}],"version-history":[{"count":6,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2156\/revisions"}],"predecessor-version":[{"id":2165,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2156\/revisions\/2165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2192"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}