RWD Weekly #304

Vue based pattern library, cutting the mustard with CSS, and the results from our poll on charging for newsletters.

View this email in your browser Hello everyone and welcome back to another awesome edition of RWD Weekly Newsletter! Last week I asked you to take part in a poll about charging for newsletters and I wanted to share the results with you this week. Paid for only subscription option (2.9%) Pay weekly for a free newsletter (no sponsors if you pay) ( 3.8%) Free newsletter, but with labeled sponsors (currently what is done (82.7%) Nothing, I want free content with no ads (10.6%) As you can see the huge majority of you like the approach that we're using today, paid sponsorship that is clearly labled (and curated in our case). I thought it was strange that the second highest number was wanting free content with no ads... but then I suppose if you asked me what I wanted (and not what I thought was fair) I might have answered it that way as well. That was a fun experiment so we're going to keep the polls running again. This week we have a podcast featured with Andrew Betts where he talks about the Web vs AMP so I'd like to know your thoughts: 1. AMP is good for the web 2. AMP is bad for the web Let me know what you think and I'll let you know the results next week! Off to the links. Headline   Cutting the Mustard with CSS Media Queries In the past we've used a javascript check to define the types of things we might load onto a page. The idea is that certain modern browsers support new things, and if those new things are supported you could reasonably expect the browser was new enough to do all the fancy stuff you wanted... so you would load that in. If the browser didn't support it then you would just supply the standard content. This is a really interesting hack, but I think removing CSS altogether isn't the answer, and building your layouts in the right way from the outset is still the best approach. What do I know though, sites like Nature.org/com are using this. Sponsor Colour Theory Pocket Notebooks This set of pocket notebooks cover the basics of the colour wheel, colour meaning and the different combinations in design. The CMYK is a throwback to the earlier days of print. Sign up to be notified when they're ready and get 20% of the price. Buy Now Articles Dear Developer, The Web Isn't About You This talk as been transcribed and has turned into a very good article. Chek out what Charlie has to say about the web, and how you can build better websites   Optical adjustments in components Have you ever noticed that sometimes when you make everything line up on the grid perfectly that things don't appear balanced? This is due to the size or 'roundness'of an object and this article covers off a few things ot watch out for and how to fixe them   How Pizza Night Can Cost More in Data Than Dollars We all use 'free' services these days, and to do that we all accept their privacy policies without reading them. This article looks at a typical pizza night in with a friend and the type of data that is collected during the interactions with these services.     Tutorials   A tale of Webpack 4 and how to finally configure it in the right way (Spoiler: there is no right way. #justwebpackthings)   The Power of Serverless You hear serverless quite a bit these days... spoiler alert there are still servers. Chris, however, does a very good job of explaining what people mean when they say serverless, and a series of examples of how these services make our life a lot easier.   Traversing the DOM with JavaScript When I first started learning javascript (jquery) it was because I needed to move through the DOM, and retrieve or create something. Zell has produced a cracking tutorial which goes through how you can do this with vanilla JS.     Tools & Resources Collection of CSS snippets A little while ago Michael Scharnagl asked on Twitter for folks favourite CSS (had to be vanilla and fit on a tweet). With 799 replies and over 2000 likes this is a list of some of the most popular responses.   Inside AdWords: Introducing the mobile Speed Scorecard and Impact Calculator The speed scorecard allows you to plot your own website against your competitors, enter some visitor/coversion/value data, and be shown how much your site speed is affecting your bottom line.   Vue Design System Vue Design System is an open-source tool for prototyping UI design systems built by @viljamis. It provides you and your team a set of organized tools, patterns & practices to build upon, so that you can get started with the actual design system faster.   Google AMP vs the Web Special guest Andrew Betts of the W3C Technical Advisory Group joins the show to discuss Google AMP: how it works, whether we should use it, and if it's a threat to the open web and to society overall?   Designing for A Viewport The web is a medium that has a viewport. What does it mean to truly be designing for the web — a medium that reveals the page slowly, from inside a viewport frame?   //Sponsor Responsive Images for a Better Cross-device Experience. Try ImageKit! ImageKit.io's real-time URL-based transformations and optimizations allow you to get started with responsive images on your website in minutes. No need to create and manage different versions of the same images on your own. ImageKit.io does that for you to create a great visual experience across devices. Try now for free!   Finally, Don't mind me, I'm just playing virtual basketball by throwing a ball into my computer screen. That's all from me this week. If you've read something interesting, or even better yet if you've written about something you've done please hit reply and share the love/knowledge/link. Happy Easter! 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