RWD Weekly #323

Bringing you the latest news around building and designing on the web.

View this email in your browser Hello again and welcome to this week's responsive design weekly newsletter. This week we'll take a look at getting started with web page test, get our sites working faster with service workers, check out the new and upcoming way to lazy load images and much more. Let's get linking.   Headline The Web I Want "This is the way he wants it, well, he gets it". For those of you that are closely aligned with my musical tastes you'll recognise that from Guns and Roses Civil War, but the actual quote comes from Cool Hand Luke. Both have nothing to do with the link :) Chris covers off something that is near and dear to my heart, creating web pages using HTML to serve content as a first port of call... and ideally the last. The days of rolling everything into Vue, React, Angular, just to serve content to the masses (I'm looking at your NASA) are certainly upon us, but I just cannot fathom how these decisions are made.   Sponsor Online Project Management Tool Boost Your Team's Productivity What's it all about? Well, monday.com is about managing your workload professionally, planning ahead visually and communicating with the team. Once these points are set, have your champagne to celebrate the success of your graphic design brand! Articles Make Something Great: Become an Open Source Contributor This is a great introduction on how anyone can contribute to open source. If you've always thought about it then read this article and go and find something to contribute to today.   CSS Logical Properties and Values in Chromium and WebKit With the arrival or CSS Writing Modes and the ability to quickly change from left to right to right to left, or top to bottom/bottom to top. With those updates it's hard to work out something like margin-top/bottom/right/left. This aims to fix that problem.   Privacy and user choice in AMP's software architecture There's a big focus on this article around the privacy of the user, but I'd be more interested in delving deeper into what AMP considers the actions of a user that wants a page to be prerendered. I worry less about the privacy implications of someone not viewing a page that is loaded and focus more on the wasted requests and bandwidth.   Changes on CSS Grid Layout in percentages and indefinite height long story on how percentage work on CSS in general and in CSS Grid Layout row tracks and gutters particularly.   A native lazy load for the Web platform This is very exciting. I'm just finishing a quick web cast on how to enable lazy loading in Wordpress by using the RWD site as an example, but it's great to see that a simple update to the <img> tag will let us do this natively.   Getting started with Material Design Components for web   Join Thousands of Expert Designers and Receive 'Mastering Sketch' eBook Join hundreds of thousands of expert designers who receive our twice-weekly articles focused on the forefront of design. Subscribe to the Toptal Design Blog today and receive our 'Mastering Sketch' eBook, with six helpful articles for Sketch productivity.  Subscribe on the right-hand side, after reading our article comparing Sketch and AdobeXD. // Sponsor Tutorials Zero to 15 Building a Nothing PWA in 15 minutes   Getting Started with Service Workers An introduction into Service Workers from the Flavio Copes and the team from Alligator   A Tale of Two Buttons In this article James runs through the typical approach of having a button style for default and active, but then having to change that up depending on if it's on a light on dark background.   A brief guide to using WebpageTest I'm really enjoying David East's Front End News and his detailed overview of something particular each week, this week it's using Web Page Test.   Tools & Resources HTTP Archive NEW FEATURE: LENSES Use a lens to drill down into a particular subset of websites. The HTTP archive now support @WordPress, @Drupal, and @Magento lenses.   Mozilla Protocol - Protocol Design System A design system used for any mozilla branded websites. You will probably already be familiar with this look from the Mozilla Developer Network documents. I wouldn't use this directly, unless you want to look like Mozilla, but it is a good frame of reference if you're building your own design system.   lazyestload.js load images only when they are in (and remain in) the viewport   Finally "Shop the look" with web-based augmented reality Some great work as part of a hackathon bringing some Augmented Reality to the browser in a shopping scenario. Thanks to those that suggested some of the links for this week, if you have come across something that you found interesting, or have written yourself, hit reply and let me know. Cheers, Justin. Copyright © 2018 Simple Things, All rights reserved. You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade. Our mailing address is: Simple Things Studio 1, Make Space Studios London, London SE17DR United Kingdom Add us to your address book Want to change how you receive these emails? You can update your preferences or unsubscribe from this list