Help Invent CSS Grid Level 3, Aka “Masonry” Layout — Masonry style layouts (above) see content laid out like a brick/stone wall. It’s a popular pattern, but one that rapidly becomes difficult to get just right. Real-world feedback is now being sought from devs and designers on how CSS should handle such layouts. This article runs through the current proposal, the debate at the heart of things, and how to share your thoughts.

Jen Simmons (WebKit)

The Frontend Developer/Engineer Handbook 2024 — An in-depth, detailed, and free guide to the current web development landscape. It's a superb resource (by way of Frontend Masters) for getting up to speed on everything from code editors, CSS, UX, UI, the command line, popular tools and frameworks, performance, accessibility, testing, AI, and much more. One to bookmark/share.

Cody Lindley

WorkOS: Enterprise-Grade Auth for Modern SaaS Apps — WorkOS supports both the foundational auth and complex enterprise features like SSO. It provides flexible and easy-to-use APIs, helping companies like Vercel, Loom, and Webflow become Enterprise Ready. Best of all, WorkOS User Management supports up to 1 million MAUs for free.

WorkOS sponsor

Upgrading jQuery: Working Towards a Healthy Web — Yes, jQuery is still pretty much everywhere, so considering its staying power here’s what work is being done to ensure jQuery users stay up to date. This online tool can tell you if the version you’re running is out of date.

Timmy Willison (jQuery)

Detect JavaScript Support in CSS — A way to provide alternative CSS rules depending on whether or not JavaScript is available in the user’s browser. It can also help reduce flashes of unstyled content or undesirable layout shifts. There are a few gotchas to be aware of though.

Ryan Mulligan

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products and best practices of top startups.

PostHog sponsor

HTML Attributes vs. DOM Properties — They’re completely different, but often coupled. Jake outlines the the difference, and why it matters.

Jake Archibald

Don’t Use the maxlength Attribute to Stop Users From Exceeding the Limit — “the maxlength attribute doesn’t improve UX, it degrades it”.

Adam Silver

The F-Shape Pattern and How Users Read — When users consume your content they will be scrolling, scanning, and skipping around your page. Here’s what you need to know about typical reading behavior and design strategies you can consider to prevent potentially unwanted scanning patterns.

Vitaly Friedman

Long Alt — Keep your image alternative text brief, devoid of special characters, empty of URLs, and ideally in one language.

Adrian Roselli

Quill 2.0: A Powerful Rich Text Editor for the Web — This is a major release for the popular open-source WYSIWYG editor, and represents a significant modernization of things. Here's the announcement post outlining what's new in 2.0 post, and the repo too. Not tried it before? There’s a playground.

Slab Inc.

Wedges: A Collection of UI Components for React — A well thought out, aesthetically pleasing set of UI and Tailwind CSS based components. You can also download a Figma file of them to use when mocking up layouts. GitHub repo.

Lemon Squeezy

The Ultimate CSS Shapes Collection — Single-element implementation. Lots to choose from, including some rather novel options. One click to copy the code!

Temani Afif

MarkdownDown: Convert Any Web Page to Clean Markdown with Images Downloaded — Just enter a URL and choose from optional settings to remove non-content elements, link vs. download for the images, and apply further instructions to customize the code via GPT-3.5.

Asad Memon

Mastodon Embed Timeline Widget — Easily embed a Mastodon timeline on your site. No dependencies, no trackers, cross-browser, WCAG compliant and fully responsive. Demo here.

i.j

consent-banner-js: A Zero-Dependency, Lightweight Cookie Banner — Comes in at just ~3KB, consent platform agnostic – pretty straightforward.

Tag Concierge