RWD Weekly #362

Welcome to week 362 of the responsive design weekly newsletter!

As I was hoping I have come back with a renewed passion for tinkering on the web and over the next several weeks I hope to be rolling out a few experiments with AR and VR on the web.

Here’s hoping I can pull a few of these off, but for now let’s get linking.

Headline

Cake or death: AMP and the worrying power dynamics of the web

Andrew Betts takes a close look at AMP across three specific areas: Technical, User experience and Commercial.

Sponsorship

Catch Visual UI Bugs and Launch with 100% Confidence. Get Started Free.

Percy’s all-in-one testing platform makes it easy to review your UI across responsive widths and browsers. With visual testing, you can replace time-consuming manual QA to catch visual bugs automatically and ship with complete confidence in your designs. Get started today.

Articles

Should Chatbots Replace Forms On Mobile?

Chatbots or forms, what do you think? I really like a conversational interface to find my way through a data collection process, but done wrong it can be incredibly infuriating.

Microsoft Edge Insider

Woohoo, another browser/OS/device set of combinations to support. Thanks Microsoft! I say this in jest, I’m glad there’s more competition on the Mac albeit at the demise of the Edge rendering engine.

Next Generation of Storytelling on the Web

The next generation of story telling on the web will be done through VR, learn how Mozilla see this happening.

Unraveling The JPEG

Have you ever wondered what is behind a JPG? Well now you can learn and play around with the code to see how it impacts the image. This will also help you understand how image compression works.

How to go through the job application process

Zell has conducted an interview and goes through the job application process from a developers point of view. If you’re thinking about apply for your first job, or looking to make a switch I highly recommend you check this out.

It’s a trap-ezoid: CSS Shapes aren’t what you’d expect

While CSS shapes might not be what you expected when you start this article, hopefully you’ll come to see their power.

Tutorials

Rebuilding the Solar System with CSS

An epic example of setting up the planets using CSS. I’m glad I came across this as I’m putting together a landing page for our Solar System Notebooks so I hope Rob doesn’t mind me using his inspiration to make it even better.

Digging Into The Display Property: Grids All The Way Down

Subgrids are an exciting addition to the CSS Grid specification and as we see it roll out across browsers you’re going to find uses for it.
Rachel looks at how they can effect a simple card layout.

Reducing motion with the picture element

Brad shares a technique where you can take advantage of the media query attribute of the picture element to call a different image when users prefer reduced motion. A great idea for any GIF’s you’ve got on your sites.

Why we prefer CSS Custom Properties to SASS variables

CodyHouse provide some practical examples of why they decided to keep their CSS variables inside of the CSS Custom Properties. This spans color schemes, typography, spacing, and vertical rhythm and does well to also pull out the catch (browser support)

Resources & Tools

CSS Grid Generator

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

Storyboard

Build your story just the way you want it.

Zdog

Round, flat, designer-friendly pseudo-3D engine for canvas & SVG

Finally

That’s all for this week, enjoy your weekend and if you have written about anything you have been doing lately please hit reply and let me know!

Cheers,
Justin.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.