Responsive design weekly 309

Hi and welcome to edition 309 of the RWD Weekly newsletter.

This week we're taking a look at some Math with CSS — there's even a link where you can test your skills against 11 year olds — as well as inclusive media queries.... a presentation not to be missed.

There's some excellent resources for page transitions and container queries as well, plenty of things to keep you busy experimenting on a Friday.

Designing for Inclusion with Media Queries

It's not often that a presenation becomes the headline of the newsletter, but Eric Bailey absolutely smashes this with his slide deck and comments. This is not a video of Eric presenting, but instead it's 127 slides of amazing information, tips, and tricks for building on the web today.

The Front-End Tooling Survey 2018 - Results

A cracking effort from Ashley Nolan in putting the survey and results together. These results represent a sample of front-end developers working in the industry. Therefore, they shouldn’t be taken as gospel, simply as pointing towards a rough trend.

Exploring Progressive Web Apps to Enhance eBay’s Mobile Experience

It's a shame that eBay is focusing their PWA for Android devices first now that iOS also support Service Workers. I'm sure it's because there's some additional functionality that isn't supported and I have reached out to the author for further clarification within 9 minutes of me reaching out I had an answer from Alex Russell. It turns out that Safari are still yet to implement some service worker features including Navigation Preload which are required for this work. Thanks Alex!

Math and front-end

This week at work we all spent around 30 minutes going through these school maths problems resulting in a lot of scribbling on paper (and some embarrassed faces). You should give it a go, because like Chen points out in this article we do use maths when we're dealing with the front end. This can be setting the page layout, creating border-radius, triangles with borders or setting fluid typography.

Responsive tables, revisited

Lea Verou comes back to one of the more challenging issues we've had since the move from fixed desktop sites to the responsive world, the data table. There are a number of existing solutions which I think are covered really well with Table Saw (link to resource), but these are some interesting approaches that I've not seen before.

Page Transitions for Everyone

A couple of weeks ago Sarah Drasner wrote an article on getting nice page transitions using Vue. This we have Georgy Marchuk taking a look at using Swupjs to enable page transitions for all sites.

HTTPS + service worker + web app manifest = progressive web app

Jeremy Keith covers off his talk at the Delta V conference and goes into the details around how to turn any website into a progressive web app.