~frontendfocus | Issue 661 - Masonry moves forward (16)

The First Public Working Draft of CSS Grid Level 3 / Masonry Layout — This new draft represents progress on masonry layout as a built-in capability of CSS in two possible syntactic forms: a grid-integrated syntax, and a grid-independent syntax, both outlined as alternatives. The CSSWG has resolved to adopt fully mixed track sizing for this new layout model, allowing all the possible track listings...

▶  CSS Masonry Layouts — As we’ve covered in recent months (and as alluded to above) there’s differing, strong opinions on how best masonry layouts should finally be realised in CSS. Nicole does a good job of bringing us up to speed on the various sides both clearly and fairly.

How Josh W. Comeau Rebuilt His Blog, App Router Style — We’re huge fans of Josh’s blog (particularly its wealth of CSS articles). He’s just rebuilt it entirely using Next.js, MDX, Sandpack, and an array of other technologies, and gives a detailed, behind the scenes look at a modern React-driven frontend project.

Get Ready for Interop 2025: Your Chance to Shape the Web — An invite to “help shape the future of web interoperability”. Submissions for ideas/proposals are being taken now, with the deadline on October 9th. Here’s what 2024 has focused on.

Improving Rendering Performance with CSS content-visibility — When a page has 20,000 custom emoji on it, things may well get a touch slow. Nolan set out to fix things.

A Redesign Case Study — Like Josh Comeau (above), Ahmad Shadeed, whose excellent frontend articles we often feature, has too recently rebuilt his website, though with a stronger focus on the design. This case study digs into his rationale and process.

The Frontend Treadmill — Some candid advice and musings on the frontend ecosystem, technical decisions, and wasted energies: “our current framework layer is working against the grain instead of embracing the platform”.

Monitor Your Local and Real-User Core Web Vitals Performance in Chrome 129 — The latest Chrome features a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance.

How to Create a Chrome Extension with React, TypeScript, Tailwind CSS and Vite — Covers everything you need to know right through to publishing in the Chrome Web Store.

Clever Polypane Debugging Features I'm Loving — A nice look at some of the handy features to be found in the stand-alone dev browser, Polypane.

Dark Patterns Hall of Shame: Learn About Dark Patterns and Unethical Designs — Real examples showcasing what not to do in UI design, with details/screenshots from real websites that have made such poor UI choices.

CSS Almanac — The almanac over at CSS Tricks has been spruced up. It’s a great resource packed with references for various CSS selectors and properties.

Generate Dynamic JSON Forms and Collect Data Right in Your App — Integrate SurveyJS UI libraries to design secure, custom forms in minutes. Code-free interface, easy integration with any backend, and fully customizable.

Vue-Multiselect 3.1: A Complete 'Selecting Solution' for Vue.js — There’s a lot on offer here, complete with SSR support, Vuex support, strong test coverage, and with no dependencies.

Departure Mono: Monospace Pixel Font with a Lo-Fi Technical Vibe — It’s open source and takes inspiration from “the constraints of early command-line and graphical user interfaces”, along with late 90s and early 2000s pixel fonts. Cool website!

blocks.md: Generate Forms and Web Pages from Markdown — Not a free tool, but an interesting one to try out. It has its own syntax along the lines of something like Haml or Pug, and you can use it free locally.