🚀 Masonry layout with CSS grids

Frontend  Focus #465 — November 4, 2020 | Read on the web Native CSS Masonry Layout In CSS Grid — There is now a specification for native CSS masonry-style layouts (think similar to how Pinterest lays things out), as part of the 'Grid Layout' spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly. Smashing Magazine Chasing the Pixel-Perfect Dream — This term isn’t anywhere near as ubiquitous as it once was, but for times where design duplication is demanded, Josh asks how we can now go about it, how realistic such a request is, and shares some tricks to help us “scooch a bit closer to pixel-perfection”. Joshua Comeau Webinar: Transforming Your Application's Analytics in 30 Minutes — Watch this webinar to learn how using a well-architected analytics development environment, with modern capabilities such as data and visual authoring, can fully transform an application in just 30 minutes. Logi Analytics sponsor Comparing Various Ways to Hide Things in CSS — There are many ways to ‘hide’ things in CSS, and each come their own pros and cons. Marko Ilic reviews each technique and caps things off with a summary to help you decide which to use and when. CSS-Tricks In Defense of Tables and Floats in Modern Day Development — If you find yourself considering tables or floats the author makes the case for using them “with confidence”, so long as “the situation aligns with their intended use”. John Macpherson MDN Web Docs: Editorial Strategy and Community Participation — An update on MDN including some details on their move from a Wiki approach with a MySQL database for content, to a Jamstack approach that allows contributions via Git. It does not say which SSG, for those curious, but other recently released Mozilla sites have already been written in 11ty. Chris Mills ⚡️ Quick bits: Support for <input type="date"> is finally in the latest Safari beta. The Brave browser now has over 20 million users (up from 8.7m this time last year). Handy little contextual icons showing the effect of a stated flexbox alignment rule are coming to Chrome - tap through to see the examples. This repo is worth a star - it's filled with references and resources to aid your frontend dev.. including us(!) 😄 💻 Jobs Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. Komoot Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here. 📙 Tutorials, Articles & Opinion Comparing Static Site Generator Build Times — This is an interesting post, especially given that build speed can become a major concern for large sites and because various SSGs make claims of build speed part of their “pitch.” I love how the author lays out his hypotheses first and compares them with the result. I would say the results more or less aligned with expectations. Sean C Davis Micro Frontends Pattern Comparison — Comparing build-time integration, server-side integration, run-time integration via iframes, and run-time integration via script. Florian Rappl What Is This Gemini Thing Anyway, & Why Am I Excited About It? — Gemini is a network protocol for exchanging particularly lightweight hypertext documents, but no HTML is involved. Imagine if the Web were forced to be lightweight. That's what Gemini is and it's quite fun to play with. Drew DeVault Browsers Don’t Have Feelings—Measure What Matters to Users — Page load time isn't enough, users care about perceived performance. Track interactivity metrics and build for impact. New Relic sponsor Getting Audio Visualizations Working with Web Audio API — A developer works through the trickiness of cross-browser issues around the Web Audio API and comes up with a neat visualization for his audio chat system. Dwayne Harris If Not Single Page Apps (SPAs) Then What? — If you’re not a fan of the SPA approach, what else can you do? Turns out there are numerous modern alternatives from Stimulus to RedwoodJS. Tom MacWright What Can Web Designers Do With Their Unused Designs? — Four ways to repurpose your unused designs and give them new life. Suzanne Scacca Grab Your User's Attention with The :focus-within CSS Selector — A neat trick, using this selector to style the parent of a focused element. Vitor Paladini ▶  Distorted Infinite WebGL Slider with Pixi.js — Learn how to recreate the the infinite scrollable image slider as seen on the Lamadone Studio site using Pixi.js. Yuriy Artyukh Running Front-End Experiments LaunchDarkly sponsor Designing User-Friendly Data Tables Meredith Meller Tailwind Versus BEM: The Benefits and Drawbacks of Both Eric Bailey 🔧 Code, Tools and Resources Photo-Realistic Glass in the Browser — Ok, so this WebGL/Three.js demo may well bring your browser to a crawl, but I'd say the effect is well worth seeing. Related repo here. Domenico Bruzzese CSS Spider: The Fastest and Easiest Way to Spy (Check, Copy and Edit) CSS of Any Site — Chrome only for now, but a neat way to really quickly view the CSS of any element you hover over. FresaLabs Graphery SVG: A Library for SVG Creation and Management — This well-documented library is good for creating and manipulating SVG in JavaScript. Offers a simple API — that’s said to be very close to the native structure of SVG. Graphery Adobe XD for Visual Studio Code — The Adobe XD design system now extends into the Visual Studio world for enhanced developer collaboration. Adobe Meraki UI: Beautiful Tailwind CSS Components That Support RTL Languages — You don’t often see a CSS framework advertised as supporting RTL, so that’s somewhat new. Includes 43 components in all, based on Flexbox and Grid. khatab Wedaa & Mosab Ibrahim A HTML and CSS Coin Flip Donate Button — This neat little animation, complete with randomized flipping, has no 3D elements, just 2D elements and some clever math to give the illusion of a 3D coin. Cooper Goeke codepen ngx-bootstrap: Fast and Reliable Bootstrap Widgets in Angular Valor Software

by via Frontend Focus