RWD Weekly #335
Hey everyone and welcome to another responsive design weekly newsletter.
Last week I had the opportunity to go to my first Full Frontal conference in Brighton in the UK and I wasn’t disappointed. I took notes for the first few talks before I decided to sit back and be inspired by the last few… and inspired I was.
Since then I have a little challenge going with myself to create something new, no matter how simple or silly it might be, every other day. The idea is to break away from working on big long term projects and get some quick wins that are more fun and less stressful, they only need to work in the window I’m looking at.
Our feature image this week is also a result of the conference after seeing Tim Holman speak. The image is a generative art piece that I found on https://turtletoy.net/, and the link to Tim is Holman’s work on generative art using his markdown tutorial builder.
Let’s get linking!
Sponsor
WP Migrate DB Pro
Let’s say you’re developing locally but need the latest data from the live database. With WP Migrate DB Pro installed on both sites, you can simply pull the live database down and replace your local database (even if you local database isn’t publicly accessible). Once your changes are ready for the staging site, you can push your local database up and replace your staging database. How’s that for a workflow? I use this on an every other day basis for RWD.is when commuting to work without an internet connection.
Get WP Migrate DB Pro today
Articles
Real URLs for AMP Cached Content Using Cloudflare Workers
One of the complaints aimed towards the implementation of AMP is that you had your content served from Google on their own URLs. Cloudflare have developed a way in which you will still gain benefit from being on the Google AMP caching servers, but you’ll retain your own domain when the content is served. I’m going to be honest, I got lost about 5 minutes into this article but it seems to be a good thing if that was your only reservation on AMP. It’s still in alpha, but they’re after testers if you’re interested.
A Netflix Web Performance Case Study
There are no silver bullets to web performance. Simple static pages benefit from being server-rendered with minimal JavaScript. Libraries can provide great value for complex pages when used with care.
Redirects, and their Effect on Performance or How a (Seemingly Minor) Third Party Change Affected the Website Performance of a Popular JavaScript Bundler
A great journey around Doug’s uncovering of redirects on the Webpack.js.org website and how he helped fix more than 600 redirects affecting performance.
Performance Rule #1: Do What You Need to Do—But Not More
There’s so many ways that you can improve the performance of your site, but if you focus on this as your first port of call then you’re off to a good start.
Inlining or Caching? Both Please!
It feels like every 6-12 months filament group redefine how to make pages as performant as possible with minimal fuss, and this article is no different. One of the biggest issues with inlining Critical CSS was having to have it duplicated in the CSS you request as well.now with service workers and the very smart folks at filament group we can have our cake and eat it too.
Usability Interviews for Atom
If you’re a fan of the atom text editor brought to you by Github then they’re looking to you to help them make a better product.
Up to speed with web performance
A fantastic round up from the performance.now() conference from Hidde de Vries with some great speakers.
CSS Frameworks Or CSS Grid: What Should I Use For My Project?
A balanced overview from Rachel around the pros and cons of using a CSS framework
Tutorials
Editorial Layouts, Floats, and CSS Grid
Since floats aren’t compatible with CSS Grid, aligning floated elements to an established grid can be a real headache. This is a nontrivial impediment to traditional editorial layouts’ ability to take advantage of Grid’s benefits.
What is First Input Delay?
Learn how to track your first input delay (and what that actually means) with Ire’s article this week. It utilises Google’s tracking library perfMetrics object.
Inclusive Design For Accessible Presentations
You could rename the title of this article to just “Great design for presentations” and be done with it. Everything that Allison talks about isn’t A11y for accessibility sake, but it will make you stand out.
Dark modes with CSS
CSS Tricks provide an overview of Mark Otto’s article.
Tools
web.dev
This new site from google is an uber valuable resource about building faster websites, securely, and ensuring they’re accessible. I’m glad they’ve done a good job there too, seeing as they’ve gone and taken our local .dev TLD for themselves :). I have to say it too… I think it’s great that this site was built without the use of AMP. A site from Google dedicated to best practices for great performance that is not using AMP goes to show that you can be faster if you just work on it.
Squoosh
Compress and compare images with different codecs, right in your browser
Tutorial Markdown
Tutorial markdown is a small js library, which allows (with some data attributes) for a tutorial to type, and execute its code as you scroll through the document. You can see an example of it working on generative artistry.
Gridsome
A new static site generator baby is born. It’s highly inspired by Gatsby.js (React based) but built on top of Vue.js.
Jobs
Last week I featured this job however the job listing fails when you have query parameters on the URL’s…. go figure. Anyway, I’ve updated the links for this week to route through Bit.ly and you can find the job now. Hurry, applications close this weekend.
Senior Front-End Developer – Natural History Museum (London)
The Natural History Museum are looking for a talented Senior Front-end Developer to work on the Museum’s public-facing digital experiences. The role is based at the iconic Museum itself in South Kensington, London. Apply today (closing on 19th November, 9am)!
Finally
That’s it from me this week. Next week you’ll be able to see my silly projects start to come to life and I open your heckles and ideas as per usual. Have a happy Friday and I’ll see you again next week.
Cheers,
Justin.
