--- title: "An ultimate guide to grid design" publication: "Frontend Focus" issue: 464 published_at: "2020-10-28" canonical_url: "https://frontendfoc.us/issues/464" --- Plus this week's browser, HTML and CSS links. Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #464 — October 28, 2020 | [Read on the web](https://frontendfoc.us/issues/464) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1603894456/cvqq6foiu3vzyl9mmd3d.png)](https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892) [Responsive Grid Design: An Ultimate Guide](https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892) — 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](https://css-tricks.com/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 [![\](https://copm.s3.amazonaws.com/b2dbdcc6.jpg)](https://frontendmasters.com/courses/next-js/?utm_source=newsletter&utm_medium=email&utm_campaign=frontendfocus) [New Course: Introduction to Next.js, The Full-Stack React Framework](https://frontendmasters.com/courses/next-js/?utm_source=newsletter&utm_medium=email&utm_campaign=frontendfocus) — 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](https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/) — 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](https://addyosmani.com/blog/the-prpl-pattern/) — 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](https://drafts.csswg.org/css-grid-3/) is up, and includes Masonry layouts. - Mozilla is [running a survey](https://www.surveygizmo.com/s3/5897636/Mozilla) to better understand the needs of developers. - Starting next month, Microsoft will [forcibly open over 1,000 websites in Edge](https://www.zdnet.com/article/microsoft-will-forcibly-open-some-websites-in-edge-instead-of-internet-explorer/) instead of Internet Explorer. - Caniuse is [partnering with BrowserStack](https://caniuse.com/feed/164) to help you test features on real browsers/devices. - Here's a [round up of the deprecations and removals](https://developers.google.com/web/updates/2020/10/chrome-87-deps-rems) in Chrome 87 to help you plan. - Why isn't `loading="lazy"` the default behavior for browsers? [This discussion](https://dev.to/devteam/any-reason-for-not-using-loading-lazy-attribute-3gn8) on dev.to is asking just that. - Using the Eleventy SSG? Here's a [growing collection of Eleventy (11ty) projects, plugins, and resources](https://11ty.rocks). - [Release notes](https://webkit.org/blog/11333/release-notes-for-safari-technology-preview-115/) for Safari Technology Preview 115. 💻 **Jobs** [JavaScript/TypeScript Architect + Developer Advocate, London UK](https://job.careersjs.com/9bl) — 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)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — 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](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — 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](https://booking.cooperpress.com/jobs)_. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/v1603895719/z6pzwoaphxem3xo7df1p.png)](https://css-tricks.com/creating-css-shapes-with-emoji/) [Creating CSS Shapes with Emoji](https://css-tricks.com/creating-css-shapes-with-emoji/) — This is pretty neat. A mash-up of sorts, bringing together [CSS Shapes](https://caniuse.com/css-shapes) with various 😎 emoji to create interesting text-wrapping effects. Preethi Sam [Getting Started with Chrome's Origin Trials](https://web.dev/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](http://w2ui.com/web/blog/14/Quality-Engineering-for-Web-UI) — 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](https://css-tricks.com/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.](https://blog.animaapp.com/introducing-the-1st-design-to-development-platform-41133b24eb7c) Geoff Graham [Web Performance: 11 Must-Read Tips to Give Your Site a Speed Boost](https://www.shopify.com/partners/blog/web-performance?utm_campaign=become+a+partner+cooperpress&utm_medium=brief&utm_source=newsletter&utm_term=frontend+focus) Shopify Partners sponsor [When Will Web Browsers Be Complete?](https://gist.github.com/lf94/ad72f1da36fbc965e4a1d4daeb1d6cb3) — A short exploration into the ‘end game’ of web browsers. [Lots of chatter on this over on HN too](https://news.ycombinator.com/item?id=24915887). Lee LF94 [How to Timeout a fetch() Request](https://dmitripavlutin.com/timeout-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](https://gomakethings.com/how-to-build-a-progressively-enhanced-accordion-component-with-vanilla-js/) Chris Ferdinandi 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1603895373/nbjhwimonxfnbzl7bdpx.png)](https://icons.modulz.app/) [Radix Icons: A Crisp Set of 15×15 Icons in a Variety of Formats](https://icons.modulz.app/) — Assets available for Figma, Sketch, IconJar, SVG, installable via npm, and as React components. modulz [A Better Way to Work With Git?](https://www.git-tower.com/?utm_source=frontend%20focus&utm_medium=newsletter&utm_campaign=2020%2010%2028%20frontend%20focus) — 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](https://github.com/infinitered/nsfwjs) — 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](https://github.com/armandsalle/butter-slider) — You can set it up with data-* attributes in the HTML with a simple init() call, or do it from your script. [Demo here](https://codesandbox.io/s/butter-slider-demo-rwxwi). Armand SALLE [![\](https://res.cloudinary.com/cpress/image/upload/v1603885855/dr5riqhyfum52w7jh5ts.png)](https://diana-adrianne.com/purecss-character/) [Pure CSS Oil Painting](https://diana-adrianne.com/purecss-character/) — 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](https://rocketvalidator.com/) — 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](https://github.com/fingerprintjs/fingerprintjs) — 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 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link or news for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)