An ultimate guide to grid design

Frontend  Focus #464 — October 28, 2020 | Read on the web Responsive Grid Design: An Ultimate Guide — A comprehensive and highly visual guide to using grid for layout (think column structure, gutters, side margin values, etc). The sort of thing that's handy for reference. Nitish Khagwal A Primer on the Different Types of Browser Storage — The browser has many options we can utilize to store data, this post from Ido Shamun runs through them. CSS-Tricks New Course: Introduction to Next.js, The Full-Stack React Framework — Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more. Frontend Masters sponsor Prevent Layout Shifts with CSS Grid Stacks — A detailed explanation with real examples of a CSS grid technique used to prevent layout shifts when a component state changes. Hubert Sablonnière Faster Web App Delivery with PRPL — PRPL is a pattern for structuring and serving web applications and Progressive Web Apps with an emphasis on improved app delivery and launch performance. Addy Osmani ⚡️ Quick bits: The draft of CSS Grid Level 3 is up, and includes Masonry layouts. Mozilla is running a survey to better understand the needs of developers. Starting next month, Microsoft will forcibly open over 1,000 websites in Edge instead of Internet Explorer. Caniuse is partnering with BrowserStack to help you test features on real browsers/devices. Here's a round up of the deprecations and removals in Chrome 87 to help you plan. Why isn't loading="lazy" the default behavior for browsers? This discussion on dev.to is asking just that. Using the Eleventy SSG? Here's a growing collection of Eleventy (11ty) projects, plugins, and resources. Release notes for Safari Technology Preview 115. 💻 Jobs JavaScript/TypeScript Architect + Developer Advocate, London UK — It’s time to build your masterpiece – can you design a platform and a framework used by the NHS, HMRC, Valve, and Microsoft? CareersJS Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team Find Your Next 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 Creating CSS Shapes with Emoji — This is pretty neat. A mash-up of sorts, bringing together CSS Shapes with various 😎 emoji to create interesting text-wrapping effects. Preethi Sam Getting Started with Chrome's Origin Trials — Origin trials give you access to a new or experimental features before they are made available to everyone. Here’s how to register for them. Sam Dutton Comparing Tools for Quality Engineering for Web UIs — When tasked with automating his front-end tests, a developer set out to explore the options and shares an interesting comparison table here. Vitali Malinouski Anima 4.0: Go Straight From Design to React in the Design Handoff — Lets you cherry-pick elements straight from a design and get fully written React components that just work. Here's more about the Anima 4.0 release. Geoff Graham Web Performance: 11 Must-Read Tips to Give Your Site a Speed Boost Shopify Partners sponsor When Will Web Browsers Be Complete? — A short exploration into the ‘end game’ of web browsers. Lots of chatter on this over on HN too. Lee LF94 How to Timeout a fetch() Request — How to use setTimeout(), the abort controller, and fetch() API to make requests with a configurable timeout. Dmitri Pavlutin How to Build A Progressively Enhanced Accordion Component with Vanilla JS Chris Ferdinandi 🔧 Code, Tools and Resources Radix Icons: A Crisp Set of 15×15 Icons in a Variety of Formats — Assets available for Figma, Sketch, IconJar, SVG, installable via npm, and as React components. modulz A Better Way to Work With Git? — Trying to remember all those Git commands? Still afraid of using Git’s advanced features? There’s a better way. Tower sponsor NSFW JS: TensorFlow-Powered Client Side Indecent Content Checking — Would it be helpful for you to detect.. ‘unseemly’ images on the client side? Enter NSFW JS. We first featured this over a year ago but it’s just had a significant performance-oriented update. Infinite Red, Inc. Butter Slider: A Simple Drag and Hold Slider with No Dependencies — You can set it up with data-* attributes in the HTML with a simple init() call, or do it from your script. Demo here. Armand SALLE Pure CSS Oil Painting — Another amazing project from Diana, all done with just HTML and CSS. This time the page is presented like a game character creation screen, in which you can customize elements - such as hair color. The detail on the necklace is particularly impressive. Diana Smith Rocket Validator: Automated Accessibility Scanner for Large Sites — Not free, but you can sign up for a trial. This tool will automatically scan your site, from a single starting URL, to find markup and accessibility errors and warnings. rocket validator Fingerprint JS 3.0: Modern and Flexible Browser Fingerprinting Library — With v3 it’s become completely modular and has been rewritten in TypeScript. Definitely one of those ‘please use this for good, not evil’ type projects though. FingerprintJS

by via Frontend Focus