RWD Weekly #382
Hey everyone and welcome to weak #382 of the responsive design weekly.
This week we look at RWD itself and see whether it has lived up to the hype we put around it, and we also hear from the name coiner himself, Ethan, in a new talk.
There’s a little bit more JS content in there this week as well, but don’t worry we’re not going too far down that road just yet.
Headline
The World-Wide Work.
I’ve always loved sitting in an audience to listen to Ethan delivering a talk. He delivers current topics, whether it be technical approaches or universal ideas, through wonderful stories that are relatable. This presentation is in video form from his latest conference, but also in written form along with the visuals from the slides. An excellent read and watch.
Article
The term “Responsive Web Design” has failed
Hmmmm, click baity? The argument that RWD has failed the mobile web does hold some water, would we have to deal with proprietary implementations of Google’s AMP if we had done a better job with the tools we have?
Let’s Not Forget About Container Queries
I was expecting to see a lot of people pitching the idea for container queries as part of the web we want challenge, and in this article Chris looks at the current state of Contain Queries and why they’re still a great idea.
I left my full-time job one year ago to ride the indie hacker road. This is what I’ve learned.
Myself and two good mates have been talking about doing something like this for years, and while we’re in situations that aren’t conducive to taking the plunge (is anyone though?) I still love reading about peoples adventures with startups.
What’s New In DevTools (Chrome 79)
Chrome have come along with some great updates in Chrome 79. We have better access to cookies (where they came from, value, additional info), you can now switch Dark Mode and Reduce Motion inside of Dev Tools as well. There’s plenty more, check it out.
Why jQuery is Obsolete and Time to Stop Using It
Honestly, this isn’t moving across to a JavaScript newsletter! There is a very good point here though, although jQuery was instrumental is bringing today’s JavaScript to where it is today the fact that it accomplished that means it’s time to make one less http request.
How to design delightful dark themes
An excellent post from Teresa Man at Superhuman around the types of things to look out for when creating a Dark Theme for your website. Teresa goes into a lot more detail, but the top level is
- Darken distant surfaces
- Revisit perceptual contrast
- Reduce large blocks of bright color
- Avoid pure black or white
- Deepen colors
How Frontend Developers Can Empower Designer’s Work
If you work in a team where the developers and designers are at arms length, or if the art directors don’t see why the web team push back on the use of 15 fonts for a campaign page — if you want to help bridge the gap then this article gives you some great tips on working better between teams.
How DWP used the easy read format to make its content more accessible
I find that some agencies spend a lot of time trying to make their products (websites) as flashy as they can be. Content needs to fly in from the left/right, motion needs to be incorporated into every interaction, and the sites that feature on Awwwards (yes, the ones that turn your laptop into a hot water bottle) are often the guide they work from. In truth, what we’re trying to provide 90% of the visitors to our website is information. Content. This article looks at how sometimes a simplified easy read format is sometimes the best approach.
Tutorial
Recipes for Performance Testing Single Page Applications in WebPageTest
I love Web Page Test for its simplicity, you add a URL into the input and click test to get good insight into how you page is going from a performance point of view. Single Page Apps, SPA’s, are a bit different because the app will go through various states based on user interaction. This article takes you through a few guides around what you can do with some of WebPageTest’s advance features.
Don’t Wait to Use Subgrid for Better Card Layouts
Card layouts are popular on the web, rows and columns of boxes with similar content. CSS grids can help align those cards, but it can still be hard to line-up content inside the cards: headers and footers that might need more or less room. That’s why we need “subgrid” – coming in Firefox 71 and available now in Firefox Nightly.
The Web Share API in Safari on iOS
If you’re implementing the web share api on your site BEWARE. The API takes three arguments, Name, Text, URL, but when sharing on iOS it will only pass two and leave the URL off (go figure, the most vital piece).
Making Tables Responsive With Minimal CSS
We can always go to a js solution like table saw, but this article shows that we can get quite a long way with just CSS when making our tables responsive.
6 things I check on every website I build
From using the keyboard only, checking alt text, plus four other basic tips you can make sure you launch with a more accessible website than you would have. Is there anything else that you do?
The wondrous world of CSS counters
Hui Jing does a deep dive into CSS counters and even produces a CSS only driven Fizz Buzz test. Does this officially make CSS a programming language now? (that’s a rhetorical question, please don’t answer).
Some Design Advice
A cracking list of recommendations from Tyler at Cloud Four. From the use of white space to typographic rules for hierarchy, to understanding browser constraints and designing for small screens first and LOTS in between.
Rebuilding Apple Music Header in HTML & CSS
My first thought was “why would you ever actualy want to rebuild the apple player in HTML”, but then it occurred to me that the web can be anything it wants to be… even a music player. The tutorial itself is excellent and givens insight into little CSS tricks that will help you in future website builds
Dynamic CSS Components Without JavaScript: Every Layout
Resources
The SQL Murder Mystery
I’ve started learning JS now and am enjoying the slow and steady pace that the platforms are taking. When you can make learning something enjoyable and interactive, you’re going to have a better chance at retaining and reusing that information. This murder mystery walks you through how to use SQL to request data from a database, and you need to step through and find out whodunnit.
roughViz
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser
Codepen
1 element card background patterns (see description)
Oh my, Ana Tudor is a master! Ana has delivered some gorgeous background patterns using only (S)CSS. I have absolutely no idea what is going on with the code, but I will nudge towards SCSS being a programming language for sure.
CSS is Awesome
Using the power of Variable fonts, see just how awesome CSS can be
Finally
That’s all for this week. As always thank you to those that sent through link recommendations, if you’ve come across something or have written something please send it through.
See you again next Friday.
Cheers,
Justin.
