1. Home
  2. Discover
  3. Design
  4. Responsive Design Weekly

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 Hosting

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

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #414 — HTML Boiler Plate 8.0

Friday, June 12, 2020

Pride month, Woke Web, Mad Magazine Effects and more View this email in your browser Hello and welcome to RWD Weekly Newsletter number 414. This week we look at the social differences when it comes to

RWD Weekly #413

Friday, June 5, 2020

View this email in your browser Before we get started with this weeks newsletter I wanted to cover off what has been happening this week. I've spent this week almost speechless with the situation

RWD Interview Series with Rachel Andrew

Friday, May 29, 2020

The last of our interview series finishes with a bang! View this email in your browser Hello and welcome to RWD Weekly Newsletter edition #412 and the final installment of the second interview series.

RWD Interview Series with Brad Frost

Friday, May 22, 2020

Our second to last interview in the series with Brad Frost. View this email in your browser Hello and welcome to RWD Weekly Newsletter edition #411 and the continuation of the interview series. This

Double header RWD Interview Series : Ethan and Ire

Friday, May 15, 2020

Our second series of interviews continues with Ire and Ethan. View this email in your browser Hello and welcome to RWD Weekly Newsletter edition #410 and the continuation of the interview series. This

You Might Also Like

The Problem With Using Social Media as Design Education

Tuesday, May 7, 2024

View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party Twenty-five days were left

#455: CSS

Tuesday, May 7, 2024

CSS Masonry Layout, Self-Modifying CSS Variables and Hanging Punctuation Issue #455 • May 7, 2024 • View in the browser Smashing Newsletter Dobryi vechir Smashing Friends, When I first encountered CSS

🤯 Immersive Admin Dashboard Designs + 🏆 Challenge Updates

Tuesday, May 7, 2024

Stay Up-to-Date With UpLabs' Latest Design News 🎨 Firstly, let's congratulate Rahul Parmar, the winner of our latest 👾 ChatGPT Redesign Challenge! Congratulations!! Secondly, the end of April

Web Components, Conditional Styling, Popover API, color-mix(), Product Designers

Tuesday, May 7, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 7 2024 Map of the web graph.henryn.ca A visualization of

Map of the Web, JSR Registry, Presidential Campaign a11y, Age of Average, CSS Specificity

Tuesday, May 7, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 6 2024 Map of the web graph.henryn.ca A visualization of

How we do UX retreats at Balsamiq (+ steal our agenda!)

Monday, May 6, 2024

Inside our UX group retreat ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly: #395: Why Are My Live Regions Not Working?

Monday, May 6, 2024

May 6, 2024 • Issue #395 View this issue online or browse the full issue archive. Featured: Why are my live regions not working? "Live regions have a reputation for being "flaky" and

Writing a POV Doc

Sunday, May 5, 2024

Issue 193: Share what you care about at scale ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

It's Officially Show House Season

Thursday, May 2, 2024

View in your browser | Update your preferences ADPro Showing Up, and Showing Off One of the traditions design aficionados look forward to the most each year is the return of decorator show houses. In

Zelman Meats, AI Feedback Loop, Figma Variables, CSS Masonry, Passkeys

Thursday, May 2, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 2 2024 Zelman Meats logo by Red Dot Studio logodesignlove.