RWD Weekly #371

Hello again and welcome to week 371 of the RWD Weekly, and a special welcome to all the new subscribers for this week.

After a long week away from home last week working on the #ant24live project it’s been much quieter this week.

Tomorrow I’m taking some time out to go through a few of the links below, in paritcular catching up on all the layouts from Every Layout, setting up an Eleventy site for testing, and applying the SVG glass effect from the tutorial section.

Right, let’s have a look at what this week brings.

Headline

Every Layout Is Released: Some Facts

Every layout is now available for purchase ($100) and free for those who can not afford it. I think this is a bargain considering that most people will be charging out at least $50 per hour. This resource will easily save you more than two hours work which will break you even.

Sponsorship

Clarity 2019: A Design Systems Conference

Clarity is a design systems conference focused on how we work together. We provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. We elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration. Check the line-up ↬

Article

Bootstrap: Introducing our Long Term Support plan

Bootstrap have announced that they’re now going to be following defined guidelines around the support and maintenance of its versions. From immediate effect Bootstrap 3 is end of life and will no longer receive security updates, and Bootstrap 4 will do the same after v4.4

The Real Dark Web

Charlie uncovers that not everyone is building websites with the latest and greatest tech stacks despite most of the conversations on twitter and in conferences centering around it. Most of us just build stuff the way we did 5 years ago.

I Used The Web For A Day On A 50 MB Budget

A long a detailed article that pulls out 14 tips on best practices for performance improvements I’m impressed that Chris was actually able to visit that many sites with just 50MB.

New CSS Features in Firefox 68

A review from Rachel Andrew about the new updates released in Firefox 68. My favourite in this was the :marker pseudo-element that has been added to allow you to target things like the colour/size of the bullet/number in a list. I also never knew you could extend something like a heading to become a list item by using display: list-item. That along with the ::marker means you can do some neat bits. See the Code Pen here

A Quick Update on Our SVG Icon Process

SVG icons have been the go to solution for a while replacing PNGs, Icon Fonts, and Gifs a long time ago. How do you implement SVG icons though? Cloud Four run through how they once approached it, but also how that approach has recently changed.

Buy the coffee

If you’re about to start up your own business or go out freelancing (while they can be the same, I’m considering them different for the sake of this article) there are some things that you can do to help win more business, and it might only cost you a coffee.

Tutorial

Responsive Iframes

Chris covers off the current best practice for laying out iframes responsively. This is most likely going to impact you if you’re including Vimeo/YouTube embeds on your site, but it’s practical for any kind of iframe.

Free Course: Beginner Web Design

Last week one of the most popular links was the one about starting a website from scratch so I thought you might also like this video from Dan at “Bring Your Own Laptop” on the same thing. This is four hours long, but if you like learning from video’s then head over and give it a go.

Making a Realistic Glass Effect with SVG

I really like this approach to using layered SVG’s with linked images and clipping paths to achieve this interesting visual result. I especially like the approach because once set it can be CMS-able to allow it to be repeated across all headings on your site.

How to add Flexbox fallback to CSS Grid

A few editions ago Zell showcased how to build a calendar using CSS Grid. This week he’s back with a fresh tutorial on creating a Flex Box fallback for the same output.

Tools & Resources

Building Beautiful UIs

This ‘course in a book’ is the first of a series of courses – published by the Adobe XD team – that are designed to help those who are either: new to user experience design, or who would like to develop and enhance their existing skills.

Isometric

This is a collection of free, beautiful, SVG isometric illustrations, that you can use in your website, app or in any project. If you’re wondering about the best way to include these SVG’s in your site then head back up to our article from Cloud Four this week

FREE O’Reilly book — Modern Web Development on the JAMstack

If you’re interested in getting started on the JAMstack, or even if you want to know what JAMstack stands for (it’s Javascript Apis Markup by the way) then this FREE O’Reilly book is just for you

Finally

The Atlas of Moons

This is a gorgeous feature from National Geographic which covers all of the moons within our solar system.


That’s all for this week, 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.