Hello and welcome to RWD Weekly Newsletter number 414. This week we look at the social differences when it comes to peoples ability to access the web, take instant.page for a spin to compare performance, uncover when you should use Grid and Flex plus much more. Right, let’s get linking…. but first check out this course. Learn Eleventy From Scratch – Piccalilli Are you interested in the JAM Stack but you’re not really sure how to get started? Have you been working with Hugo, Gatsby, or Jekyll or other static site generators but you want to give Eleventy a go? Well I HIGHLY recommend you signing up to this new course from Andy Bell. He’s just finished the first past of the entire course and with more than 40,000 words. Available 22nd June! Article Building the Woke Web: Web Accessibility, Inclusion & Social Justice With over 40% of the world unable to access the internet it is important that we remember how privileged we can be. In these times of isolation and the closing of a lot of brick and mortar, we rely on the use of the internet not just to connect to people but be able to do simple things like access health service information, banking, and shopping for food. This article from Olu is brilliant, and outlines what we should be doing both for people without access but also for people who have slow connections and expensive data plans. Everything You Have to Know About Core Web Vitals Google are using a set of new performance metrics referred to as Core Web Vitals. The chances are that if you don’t optimise for these, expect to see your rankings drop. This article from Calibre goes through the metrics so you understand what to look for, and cover some tools you can use to track and monitor them. Tutorials The Mad Magazine Fold-In Effect in CSS One of my favourite times as a child was getting a few dollars to go to the newsagents and buy a magazine. I still remember the excitement of going in and the HOURS I took making a choice (something which my kids put me through now). MAD was one of my favourites, and the Fold-in back cover was always genius… and now we have it in CSS. A/B Testing Instant.Page With Netlify and Speedcurve Instant page is a small JS script that detects you hovering around a link and, given the right conditions, will go a prefetch everything you need for the next page if you decide to click on the link. In this tutorial Tim looks at how you can set up your site to AB test the script AND see the performance outcomes in Speed Curve. Grid for layout, Flexbox for components I’ve always explained the difference between Grid and Flexbox as Grid for two dimensional layouts, Flexbox for one dimensional layouts… but it always comes back to the catch all explanation — it depends.  This article takes you through a number of different layouts/components and details how you can achieve them through either Flex or Grid. Building a Virtual Conference Talk There is bound to be a number of you that are providing presentations over the internet these days while we still battle with Covid. Whether it’s for a conference, for work, or for education…. this is the start of how you can produce a nifty presentation with your slides and a video of you speaking as a video for people to enjoy. Tools and Resources HTML5 Boilerplate 8.0.0 Ten years later and version 8 has been released. Modernizr is updated and Query is removed along with the browser upgrade message, and the Google Analytics script comes default with IP anonymised. Illustrations of Black People for Your Next Digital Project One of the suggestions from last week’s newsletter (thank you Alyssa) is this great set of Black illustrations that can be used for your sites. There are paid and free options. CodePen CSS Grid: Newspaper Layout Love love love this newspaper style layout for Codepens. It is at its most impressive state at desktop size, but works on every viewport still. Finally Pride month – Google Sheets I’m a sucker for an online Easter Egg so I’m glad when my friend from work showed me this trick today. That’s all for this week. As always thank you to those that sent through link recommendations, if you’ve come across something or have written something please send it through. Cheers,Justin.