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.

Twitter
Facebook
Website
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

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #446 — the one about position: sticky

Saturday, February 13, 2021

Keep users in context with position:sticky, and learn why it's you that has changed and not the web. Read online Hello again, welcome back to RWD Weekly #446. The feature site this week has X-FRAME

RWD Weekly #445 — the one about GitHubs homepage

Friday, February 5, 2021

Pixelated art, CSS animated gradients, performant home pages and more. Read online Hello again, welcome back to RWD Weekly #445. Our feature site this week was suggested by Raquel Freitas because she

RWD Weekly #444 — the one about scroll-margins

Friday, January 29, 2021

Open Web Docs, Haptic effects in the browser, avoiding layout shifts and a tonne more. Read online Hello again, welcome back to RWD Weekly #444. This week we're taking a look at a classic website

RWD Weekly #443 — Open Web & Responsible Web Apps

Friday, January 22, 2021

This week we look at the serious side of the web and how it can be quickly switched off for some. Read online Hello again, welcome back to RWD Weekly #443. I'm happy to say that using TailwindCSS

RWD Weekly #442 - AVIF & Aspect Ratios

Friday, January 15, 2021

AVIF, Aspect Ratios & three hours worth of reading on a 2021 Website Check list Read online Hello again, welcome back to RWD Weekly #442. After a very slow start back to work last week it already

Hollywood Regency Meets the Upper East Side in Manolo Blahnik's New Manhattan Flagship

Monday, June 21, 2021

Plus, 7 ways to save a project before things start to go wrong (image) Architectural Digest AD PRO Logo Image may contain: Grass, Plant, and Lawn Move Over, Marie Antoinette—These Giant Animal

✏ What’s Coming in WordPress 5.8, Free Developer Stuff, 12 CSS Parallax Effects, and more...

Monday, June 21, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU What's Coming in WordPress 5.8 (Features and Screenshots) WPBEGINNER.COM COMMENTS How to Use Dynamic Imports in

🖥 Sleek Landing Page Designs + 🏆 Challenge Updates

Monday, June 21, 2021

The Designer Digest Is Floating Your Way 🎈 To begin, we'd like to congratulate Faiz Abiyandani, the winner of our latest 🏃‍♀️Fitness App Challenge! Next, don't forget that the second week to

Camping Out in a 3,000-Square-Foot Loft

Monday, June 21, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room. Photo: Annie Schlechter

Accessibility Weekly #245: When CSS Isn’t Enough

Monday, June 21, 2021

Sponsored by Automattic. They're hiring. June 21, 2021 • Issue #245 View this issue online or browse the full issue archive. Featured: When CSS isn't enough: JavaScript requirements for

Voice UI, Sharp Images, Philip K. Dick, Windows Layers, CSS Paint API

Monday, June 21, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 21 2021 An Alternative Voice UI To Voice Assistants

✏ How to Avoid SEO Disaster, 6 Types of Web Design, Simply Markdown, and more...

Sunday, June 20, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU An Alternative Voice UI to Voice Assistants SMASHINGMAGAZINE.COM COMMENTS Simply Markdown - Easy Create Markdown with

✏ Is AMP Dead and Do We Care? React Markdown Editor, Bad vs Good Designs, and more...

Saturday, June 19, 2021

Poll: Is AMP Dead, and do We Care? WEBDESIGNERDEPOT.COM COMMENTS Bad Vs Good Accessible Designs USABILITYGEEK.COM COMMENTS Client-Side Routing in Next.js SMASHINGMAGAZINE.COM COMMENTS React Markdown

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript