RWD Weekly #415
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.
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.
