RWD Weekly #390
Hey everyone and welcome to week #390 of the responsive design weekly.
The content will be the same as always, but the intro will be short as my work team are telling me we have to get to the Christmas party.
For all those with a hangover today, I feel you. Here’s some links to keep you busy and focused while you die a little inside.
Right, let’s get linking!
Headline
Level of Effort
I like the ideas that Brad is putting out here.
Rather than chucking Zeplin links at developers…
Brad Frost
Developers need to snap out of it and demand to be a part of the design process instead of blindly building out bad “requirements”.
This week we’re putting together a Xmas card for our clients (12 days of Gifmas… lots of gifs) so I spent 30 minutes putting together a ‘close enough’ representation for the designers to see how their static designs would come to life in practice. This resulted in a couple of small tweaks to the idea that otherwise would have taken a lot longer had it been built in production and then shared as UAT. If developers were part of the original design process this time would have been further saved. Always involve the builders in the design work.
Article
A Picture Says a Thousand Words, But Not Really
Not everyone has the ability to see as well as the next person, in fact around 29% of people have some form of visual impairment. This article looks at the steps you can take to ensure the content you’re producing is just as helpful for those 29% as the rest.
Getting Started with Web Performance
Are you looking for an introductory article that you can use to explain to someone why it’s important to their business? Or maybe you’re on the performance band wagon but you’re not exactly sure why. This article from Karolina and Calibre have you covered.
Building a search engine from scratch
If you’ve ever wondered why there aren’t more competitors for Google other than the likes of Bing and Duck Duck Go then this article will clear things up. From the engineering challenges to the sheer start up capital required, it’s a tough business to get into.
How to fight back against Google AMP as a web user and a web developer
Some folks love AMP, others despise it. I love the idea of faster websites but disagree with Google’s approach in AMP. If you want to reduce the dominance that Google have over the web there are things that you can do as Marko Saric points out in this article.
No to Chrome
I love a lot of the people that work at Google and try and provide better development tools through Chrome as well as the Google Developer Expers. Ire, Addy, Paul, Jake, Una… many many more that I won’t include here do amazing work. The thing is though, the amount of control that Google has over the shape of the web is not a good thing. This site explains the steps you can take to start to shift the balance away from Google’s control.
Instant pages with just-in-time preloading
We’ve featured instaclick in the newsletter in the past, but now it’s your opportunity to hear from Alexandre himself about why/how he built the very impressive tool.
Tutorial
Reading a WebPageTest Waterfall Chart
Do you ever see a website waterfall loading chart and scratch your head about what it all means? It can be daunting to look at initially but once you break it down it will begin to make sense. This article shows what is what and how to get started.
7 Uses for CSS Custom Properties
Michelle has a bunch of uses for Custom Properties that are just perfect to try out while nursing a mild hangover from a christmas party. Just sayin’.
Drawing Homer Simpson using circles in CSS
As I mentioned in the intro, I’m off to our xmas party tonight in my Simpsons holiday shirt so I was delighted to see that I could draw homer in CSS just using circles. Would it be easier to use an SVG? Probably, but not as much fun.
Debugging Variables With Watchpoints in Firefox 72
Have you ever wanted to know where properties on objects are read or set in your code, without having to manually add breakpoints or log statements? Watchpoints are a type of breakpoint that provide an answer to that question. This article from Miriam Biudayr goes through the steps to take to set this up within Firefox for a better developer experience
Beautiful Scrolling Experiences – Without Libraries
Everyone loves to scroll jack a users experience (apparently), but there are ways to do this without resorting to javascript. The scroll-snap-type and scroll-span-align are just some of the scroll properties that you can apply via CSS to get a more native experience not reliant on JS.
Responsive Type and Zoom
Beware when setting your typography in responsive sites as there are chances that the way you implement it will remove the ability to users to properly zoom in on text when they want to.
JavaScript Quotes
Dave has just started the Wes Bos new course for JS beginners.
This gives you a great taste in just how thorough and easy Wes’s courses are, thanks Dave for sharing!
Tools & Resources
There are so many links to tools and resources in the main link below that I’ve decided to leave it as just one link that you can explore from. Be warned, this one link will lead to 10-15 open tabs as you explore ways to improve your site’s performance.
Fast load times
Now that I’ve given Google a hard time this week, let’s look at the great resources they put back into the community. These tips have nothing to do with AMP, they’re all about how you can improve your site to load as fast as possible.
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.
