Responsive Design Weekly - RWD Weekly #447 — the one about Z Index

Read online

Hello again, welcome back to RWD Weekly #447.

Our feature site this week comes from a course which I've signed up for called The ultimate Three.js course. It's not a sponsored spot so I won't tell you how amazing the course looks, but I can't wait to get started and build out my very own little galaxy.

Let's get linking!

Sponsor

Authority Pro Theme Package

Authority Pro perfectly highlights your knowledge, years of experience, and acquired wisdom. Even if it’s early in your journey toward building expertise and trust, this carefully-constructed design will accelerate how quickly your audience grows.

View details

Advertise your product, service, or job opportunity to 26,413 tuned in web designers and developers. Find out more.

Article

An Opinionated Guide to Performance Budgets

Performance budgets are one of those ideas that everyone gets behind conceptually, but then are challenged to put into practice – and for very good reason. Web pages are unbelievably complex, and there are hundreds of different metrics available to track. If you're just getting started with performance budgets – or if you've been using them for a while and want to validate your work – this post is for you.

A new history API, "app history"

The web history API is very useful when it comes to most web use cases, but with the rise in webs applications the benefits aren't always there. There is a new proposed API layers to go on top of the existing API called appHistory.

Web Frameworks: Why You Don’t Always Need Them

There's a tonne of different ways you can build a site without frameworks these days, but is that the right way to go? I was chatting to a virtual colleague today about how this newsletter got started, and how it's much easier to build responsive websites today. But, with that ease, it takes me longer to get a project setup then it did with just a HTML page and a CSS file. In making things easier, we've just shifted the complexity.

Front-of-the-front-end and back-of-the-front-end web development

Brad has such a good head on his shoulders and I'm nodding along with the breakdown between the ends of web development. I particularly like both being responsible for writing unit tests (which in my opinion is the least favourite part of the work).

No news is... a sign of a stagnating Internet

Apparently if you're in Australia you're not allowed to post news links into Facebook any more. This is off the back of the Australian Government passing legislation around what Google and Facebook can republish and the cost to those companies for republishing that content. I can't see Australia sticking with things the way they are, but it's a bold move.

A History of the Web in 100 Pages

John Allsopp, who famously wrote a dao of web design, has begun a new project. A documentary about the web told through 100 web pages. This is the first in the series and covers the first three web pages in the list, can you guess what the first one is?

Tutorials

Maximally optimizing image loading for the web in 2021

In this post Malte outlines 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. YAY, performance and images in one tutorial.

How to use and feature-detect CSS grid masonry layout

This post shares what you need to do to get started and implement masonry layout in your sites, and it explains feature detection in CSS and JavaScript. It's not going into the nighty-gritty details of masonry grid layouts. If you want to dive into the topic, Stefan has included more links at the end of the tutorial.

Understanding Z-Index in CSS

A very clever and informative journey through Z-index using kids, floaty toys, paddling pools, ducks, and lakes. Ahmad breaks these confusing systems down into easy to understand chunks and you always walk away with a better understanding. If you like this article you'll love his book too!

Resources & Tools

Prince 14

While I cringe every time someone asks me to upload and link to a PDF on a website, I know there are use cases for people wanting to download a PDF VERSION of something. That's where Prince comes in, which gets its name from what it does... Print from CSS. There's a new release which includes, colour emoji and SVG fonts, support for calc(), new column and page float capabilties and formatting with JS.

Github1s

Just add 1s after github and press Enter in the browser address bar for any repository you want to read.

Finally

That's all for this week. Thanks for stopping by, if you found something useful please recommend us to a friend and help us continue to grow.

Cheers,

Justin.

Copyright © 2021 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:

Simple Things

Simple Things LTD

Thame, Oxfordshire OX92EQ

United Kingdom

Add us to your address book

Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Responsive Design Weekly - RWD Weekly #447 — the one about Z Index

Sponsor

Authority Pro Theme Package

Article

An Opinionated Guide to Performance Budgets

A new history API, "app history"

Web Frameworks: Why You Don’t Always Need Them

Front-of-the-front-end and back-of-the-front-end web development

No news is... a sign of a stagnating Internet

A History of the Web in 100 Pages

Tutorials

Maximally optimizing image loading for the web in 2021

How to use and feature-detect CSS grid masonry layout

Understanding Z-Index in CSS

Resources & Tools

Prince 14

Github1s

Finally

Older messages

RWD Weekly #446 — the one about position: sticky

RWD Weekly #445 — the one about GitHubs homepage

RWD Weekly #444 — the one about scroll-margins

RWD Weekly #443 — Open Web & Responsible Web Apps

RWD Weekly #442 - AVIF & Aspect Ratios

You Might Also Like

Pierce & Ward’s Secret Sources, Business Advice You Can’t Afford to Miss, and More

World Press Photo Contest, Speedometer 3.0, Anchor Position, Sliding Frame, Meta Llama 3

Car UX, DevTools Tips, CSS Patterns, iOS404, Internet Cables

Big Tents, Pistachio Palettes, and Other Late-Breaking Milan Discoveries

163 / Dieter Rams inspired Framer components, America's national parks and more free resources…

Logo System, BCWA Identity, War Robots, 84—24, 19th-Century Atlas

Emma Roberts's Home: AD100 Firm Pierce & Ward Share Their Secret Sources

#452: Design Workflow

Mario & Pareto, faces.js, Sleep vs Blog, Dark Mode, DOM Folding

Gap, Teenagers, Artistic Intelligence, Should Designers Code, CSS in RSCs