RWD Weekly #387

Hey everyone and welcome to week #387 of the responsive design weekly.

We’re jammed pack with design tools and resources this week to go along with our usual articles and tutorials. Lots of fun for a Friday!

This week our feature image pays tribute to Lynn Fisher with her most excellent responsive redesign of her website. Each year Lynn pushes the boundaries and shows us how to properly embrace the fluid responsive nature of the web. Thanks Lynn!

Right, let’s get linking!

Headline

Print To CSS

I love Dan’s approach to learning CSS Grid here almost as much as I love Jessica Fletcher. Using print layouts from magazines is a great start for lovely desktop orientated layouts, but the impressive piece is how he’s then translated those layouts in a responsive manner.

Sponsor

Learn a New Skill in 5 Minutes with Gymnasium

Take 5 minutes to learn a practical skill with Gymnasium’s Take 5 video tutorials. Gymnasium is dropping a new video every day this month with a different theme each week — from web design to career development. What are you waiting for? Start learning!

Article

Request with Intent: Caching Strategies in the Age of PWAs

If you’re running a PWA the chances are that you’re going to want some granular control over the assets that you’re requesting and what is being cached when that occurs. Aaron’s article this week looks at this from a JS point of view, but in the lead up to that also covers a tonne of different ways you can be more performance with the assets on your site by using the mechanisms that browser provide already like lazy loading, asset file/source type, asset size.

backdrop-filter

This lets you apply visual effects to the area behind an element and I only just learned about it thanks to this mention from Stefan Judis. This is great for adding blurred effects or to brighten the area behind a heading across a banner image.

Good Enough

If it’s good enough, hit the publish button. Max talks about not stewing on whether your blog post is good enough to publish and just get the point across and hit publish.

Highlights from Chrome Dev Summit 2019

I have missed the posts coming out from Ire so I’m really excited to see this one about her highlights from the Chrome Dev Summit.

Tutorial

Preparing for a Tech Talk, Part 3: Content

I still think that I’m preparing my talks wrong when I put them together so I can never get enough of these articles. I quite like the approach here, it’s similar to the way I approach putting talks together so it’s nice to know there at least one other person out there.

Blending Modes in CSS

Blending modes allow us to do some impressive designs with text overlaying on top of imagery

Masks

A great interactive tutorial on all the power of masks.

Avoiding jagged edges on gradients.

Tools & Resources

Colors and Fonts

Curated library of colors and fonts for Web Developers & Digital Designers

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.

Cube.js Templates

The easiest way to build analytics dashboards and applications. Mix your favorite frontend open-source tools to build the app of your dreams.

illlustrations

These are 100 awesome illustrations during 100 days of illustration challenge. You can use these to design your – landing pages, mobile app or presentations. Do buy them a coffee though…

Fresh Folk

an illustration library of people and objects

Design System Playground

A head start for putting together a design system by choosing your fonts/colours and letting it do the work for you.

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.

Subscribe to our Newsletter

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