RWD Weekly #415 — Unsupported Media Type & Bootstrap 5

View this email in your browser

Hello and welcome to RWD Weekly Newsletter edition 415.

Over the past few weeks and the interview series I let our journey through the HTTP status codes fizzle out, but this week we're back with an unsupported media type.

The 415 status code will happen when you try and upload an SVG logo but the server is expecting to receive a JPG or PNG.

This week we're also seeing a first glimpse of what Bootstrap 5 might have in store for us with an Alpha release, we learn a bit more about Z-Index, and take a look at Hexagonal layouts with CSS Grid.

This week I also changed the original interview series set to be free to download, if you haven't come across it before it's a bit of a nostalgic read to see what we were all worried about when it came to building websites back in 2013... but also how there's still some strong similarities with today.

Let's get to those links (after a quick look at our sponsor).

Sponsor

Digital Ocean - get $100 credit

Do you want your own server spun up in under a minute for just $5 a month?

I use Digital Ocean to run the https://responsivedesign.is site and it has been ticking along beautifully for the past 5 years. I use a plain droplet configured from scratch, but now they have a droplet marketplace already set up with Wordpress, Ghost, Docker, Magento, Minecraft, CPanel, Plesk, Django, Grafana, Mastodon, Discourse and a bunch of others.

Get your Digital Ocean Server Today from $5

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

Article

Bootstrap 5 alpha!

Bootstrap 5 is hitting alpha and it's jam-packed with changes. The biggest changes for me is a shiny new logo (very nice), a departure from using jQuery, and the dropping of support for Internet Explorer. You can read about more of the changes (including increased use of CSS custom variables) in this article.

Introducing Cache Analytics

Performance is a huge part of creating a responsive website, and caching is a huge part of making a site performant. While a lot of websites have Cloudflare sat in front of it and making it faster, you can now look closer at the caching of your site in the Cloudflare dashboard by URL, document type, domain and more. Great for improving your caching from a performance and bandwidth point of view.

Tutorials

Building a hexagonal grid using CSS grid

This is a terrifically detailed walk through from Jesse Breneman on how to get a set of hexagonal grids laid out.... well you can read the title and guess what it's about. The layout is with CSS Grid, the hexagonal are done with a clip path. I'm really impressed with the alternate stacking of the items... very clever indeed.

Learn Z-Index Using a Visualization Tool

I thought I had a reasonable grasp on z-index, turns out I did not and anything that was working for me in the past was purely by luck (or lots of trial and error). This tutorial looks at the z-index setting, source order, and positioning and goes through the rules with some handy tools to try out different settings.

CSS Custom Properties Fail Without Fallback

Using custom CSS properties can cause some issues if the custom property fails. The reason was highlighted by Jeremy Keith recently and is because CSS works out the cascade values first before checking the the custom variables, and as a result throws out any fallbacks. BUT, this post shows how the use of @supports can save you.

Tools and Resources

Quotebacks

Quotebacks is tool that makes it easy to grab quotes from around the web and store them to make embeddable blockquote components. I like the approach to make a more connected web.

Chart

I wish I had this a month ago when we did a prototype for a customer experience dashboard. This plugin for XD (Figma and Sketch too) allows you to create charts quickly with real data inside of your prototypes, through Tabular data, json, or even live google sheets or API's.

SlidesCarnival

Best Free PPT Templates and Google Slides Themes. So, these won't help you with building a site but they might come in handy to help put together a pitch to a business about why you should be building their site.

Finally

Chrome is experimenting with URL display again

Twitter is hilarious (but not really). I respect Jake and the work he does for the web and this week one tweet of his really took off (in a not so good way). In true Twitter style, I read this post and the comments without watching the video and was annoyed at the end and thought it could have been handled better... but I didn't comment. Today I watched the video and couldn't agree with the approach more, check out the video.

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.

Cheers,

Justin.

Copyright © 2020 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

RWD Weekly #415 — Unsupported Media Type & Bootstrap 5

Sponsor

Digital Ocean - get $100 credit

Article

Bootstrap 5 alpha!

Introducing Cache Analytics

Tutorials

Building a hexagonal grid using CSS grid

Learn Z-Index Using a Visualization Tool

CSS Custom Properties Fail Without Fallback

Tools and Resources

Quotebacks

Chart

SlidesCarnival

Finally

Chrome is experimenting with URL display again

Older messages

RWD Weekly #414 — HTML Boiler Plate 8.0

RWD Weekly #413

RWD Interview Series with Rachel Andrew

RWD Interview Series with Brad Frost

Double header RWD Interview Series : Ethan and Ire

You Might Also Like

Behind the Design of Lauren Santo Domingo’s Ski House

2025 Interior Design Trends, Revealed

Want a free strategy session with us?

One Simple Thing You Can Do to Retain Your Staff

#483: UX Writing

Accessibility Weekly #423: Beautiful Focus Outlines

175 / Build your ideas without writing any code

Into the Fediverse

The Books AD Editors Can’t Put Down Right Now

What astrology has to do with PR?