RWD Weekly #280 : A bit of WebVR

This week I've spent a LOT of time inside WebVR and it's been wonderful

View this email in your browser Hello and welcome to edition number 280 of the responsive design weekly newsletter. This week I've been putting the final touches on my presentation for next weeks Adobe Max conference taking part in Vegas.  The feature image for this week comes straight out of the presentation as I've been playing around with WebVR, and this happens to be how the site renders on VR. I'm quite nervous about the talk as well, and I have a rather bizarre approach to talks and I'm not sure if anyone else follows a similar approach. It goes a little something like this: Get an opportunity to speak Panic that I can't fill the allotted time (seriously, 75 minutes!!!) Spend 60-80 hours pulling together thoughts, ideas, posts, & demos Realise that there's 5 hours worth of slides Remove 80% of all the slides/thoughts/ideas/demos Lay in bed awake until 4:45am the day of the talk. Swear I'll never do it again Talk Look for another opportunity to speak again. Goto 1. I'm excited about the opportunity though because the conference always exceeds expectations, is incredibly inspiring, and the stuff I'm able to share is really exciting for me (and hopefully the audience too). I'm putting together a mini-talk site with all the information and links for the attendees as well which I'll post next week. Let's get linking! Headline Media Queries Based on Element Width with MutationObserver You have probably faced a situation before where you really wished CSS media queries were based on elements' width rather than the entire viewport. This article explores a JavaScript approach to add different attributes to an element depending on its width using resize event and MutationObserver. Sponsor Create Responsive Forms with JotForm's Newest Form Builder! JotForm 4.0 is the first form builder that allows you to publish responsive online forms using any device: smartphone, desktop, or tablet. Whether you want to sign up new email subscribers, register guests for an event, or take product orders, JotForm allows you to design the perfect form for your needs. Learn more. Get Started with Jot Form Articles Redesigning Laravel.io A detailed look at over 20 tweaks to a redesign for the laravel.io site   6 myths of Progressive Web Apps Do you know what a PWA is? Do you know what it isn't? Peter O'Shaughnessy takes us through 6 misconceptions about progressive web apps.   Priority Hints A browser API to enable developers signal the priorities of the resources they need to download.    Tutorials A fearless guide to using CSS Grid today Brenda Storer gets you started with using grid with this introductory tutorial   Help Your Users `Save-Data` A range of performance tips from Jeremy Wagner, a lot of which you can get from his book "Web Performance in Action".   Responsive Text, Daft Punk Style These are some great ideas for dealing with unknown text heading lengths, and I love the use of --css-variables for the calc it approach.   (S)CSS Best Practices That You Have Not Yet Known Some straightforward tips for setting out your CSS.   Building a CSS-only image gallery I think the title says it all, not much for me to add :)   Implementing A Service Worker For Single-Page App WordPress Sites SPAs greatly enhance service workers, such as enabling you to choose from different appshells to load during runtime. Integrating with WordPress is not all that smooth, at least to make the website become offline first, because we need to find all resources from the theme and all of the plugins to add to the precache list.   Advanced web font loading with Typekit's CSS embed code  Typekit has done another post on using font-face observer to improve font loading with their new CSS solution.   Introducing a free and easy way to manage creative files Your files deserve a safe home. Organizing, sharing & approval of creative in a customizable portal; everything is easier with Orbit. // sponsor   Resource HTML5 Boilerplate 6.0 Released HTML5 boilerplate has hand an upgrade. They've removed IE8 support, included a sample Web App manifest file, upgraded to modernizr 3 and more.   Typi Typi is the result from a few months of research on both typography principles and the integration of relevant principles into code.   Codepen Lazy loading with inline SVG This is a great way to give your users an understanding of what is about to load (once the images finally come down the wire ;)   Finally That's it for this week. Thanks for subscribing, and if you have any questions please feel free to hit reply and ask me. Until next week, stay responsive! Cheers, Justin. Copyright © 2017 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 Copyright © 2017 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