RWD Weekly #354
Hey everyone and welcome to another week of responsive front end goodness.
This week we’re looking into the updates for PWA’s in iOS 12.2, looking at how we can detect when our browser window is hidden, learn how to plan for responsive images and get back to some ol’ school aligning of text along with much much more.
Let’s get linking.
Headline
You probably don’t need that hip web framework
“If you’re building a new idea, you want to get it to market as fast as you can, so the absolute best thing you can do is ignore all of these new fads, frameworks, and fancy patterns—instead just using whatever works to ship a first cut.” – I’ve been applauding this paragraph for the past 3 hours.
Sponsorship
IMAGECON 2019: Transforming the digital experience. Registration now open!
Join hundreds of other developers, rich media experts and creatives in San Francisco on May 1st & 2nd for two jam-packed days of knowledge sharing, networking and thought leadership from industry experts. With 7 keynotes, 12 different workshops and fantastic networking opportunities, you won’t want to miss it! Get your ticket today
Articles
What’s new on iOS 12.2 for Progressive Web Apps
Max takes a deep dive into the new release of Safari on iOS 12.2 and what that means for the world of the PWA. Unfortunately it seems as though there are still some issues with background processes but they are moving forward with it which is a good sign.
Detecting when a webpage is hidden
The latest version of Chrome adds support for another case of hiding a web page: On desktop, if the user fully covers Chrome’s window with a different window, Chrome will now correctly update the visibility state of the active web page.
Everything I know about freelancing
A really great refreshing list of important ideas to follow in the world of freelancing. Do yourself and favour and read all of these, and then enjoy a better freelancing life (or finally take that leap).
Scroll Anchoring in Firefox 66
Scroll anchoring ensures that when that pesky ad loads in at the top of the page, or when you change device orientation, you remain at the same point that you were previously reading. Hoorah!
Tutorials
Animation Performance 101: Browser Under the Hood
If you’re looking to incorporate animations into your web build (and you should, it can really help the user) here are some tips to remember to ensure that those animations are smooth and performant.
Planning for Responsive Images
Chris Nwamba goes through the planning you should be doing when delivering responsive images on your site. One of the things that I’ve realised working in an agency with Art Directors is that they want every image to be the same as the photoshop document they scamped it up in. While we know that isn’t possible, this kind of planning and understanding around the changing viewport sizes means you can shoot imagery in a way that is better suited to this style.
Vue.js and D3: A Chart Waiting To Happen
We’re working on some data display for an internal project at work at the moment and I’ve been looking at different charting libraries. In my searches and reviews I came across this article which is pretty cool.
The Hidden Power of CSS Text Align
With Flexbox around I usually have all of my content positioning taken care of (and CSS Grid also helps), but there’s still a lot you can achieve using plain ol’ text-align.
// sponsored
Northwestern University Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the in-demand skills, such as UX, UI, and HCI, needed to drive user interactions. Choose from specializations in content strategy, data science and analytics, and learning design. Earn your Northwestern master’s degree entirely online.
Tools
Sitespeed.io 8.9
Sitespeed has released a new update and they’re starting to crack down more on third party scripts, often something that gets away from you unnoticed as the marketing team add more and more tracking code through GTM. It breaks the 3rd party scripts by utility, surveillance, ad, analytics, library and other
Introducing Warp: Fixing Mobile Internet Performance and Security
I’ve just downloaded this onto my phone and am currently WAY back on getting access to WARP. I didn’t realise the 1.1.1.1 app would improve the speed of the sites I was using, but given the amount of networks I switch between I prefer the idea of having my traffic safe.
Resources
Essential JS Design Patterns
Addy Osmani has made is book available online and free for everyone to benefit from, thanks Addy!
CodePen
Generative Poster
I love generative art and this is a great example.
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.
