Issue 34
Flexbox, Safari 9.1, reporting browser bugs and an animated fox.
News
Issue 34
After all of the travel over the last few weeks I am very glad to be back in the office. Lots of interesting links this week from Flexbox to a new Safari, how to report browser bugs and an animated SVG fox!
A few upcoming things that I'm involved in. The online RWD Summit is next week, I'll be speaking about Grid and Flexbox but the whole three days looks excellent. Tickets include all of the videos if you can't be online the whole time and for reference later. Use the discount code RACHEL for a 20% discount.
In June you can spend a day with me learning CSS Layout, either in Berlin on the 2nd of June or in London on the 13th. Both of these workshops will be focussing on advanced and newer layout methods.
Rachel Andrew, CSS Layout News
Safari 9.1
Yesterday Safari 9.1 was released and includes various noteworthy things. Safari now supports the HTML picture element for responsive images and also CSS Custom Properties - "CSS Variables".
Version 4.0 of Normalize.css
Many of you will be using Normalize in your projects, so it might be useful to know that version 4.0 is out.
Learn
Guide to Flexbox - Mijingo
A video introduction to Flexbox from Ryan Irelan.
Grid Layout & Flexbox City - Zeldman on Web & Interaction Design
Zeldman collates a bunch of Flexbox and Grid links, many of which will be familiar to readers of this email!
CSS Flexible Box Layout - CSS | MDN
I'm a great fan of the Mozilla Developer Network (MDN) as a reference for web technologies. Here you can find their documentation for Flexbox.
Getting Started with CSS Shapes: Wrapping content around custom paths - HTML5 Rocks
An older article but still one of the best resources for learning about CSS Shapes. I would love to see some creative uses of Shapes - drop me a line if you have built something or spotted a use in the wild.
Interesting
CSS only Responsive Tables
Some very nice methods for creating responsive tables from David Bushell.
Dirty Tricks From The Dark Corners Of Front-End (Slides, PDF) – Smashing Magazine
An excellent collection of tips and tricks from Vitaly Friedman of Smashing Magazine. I love this sort of thing, the things we only discover in the course of doing real work and solving real problems. I think there will be something for everyone in this slide deck.
How to Report a Bug | Test the Web Forward
I seem to have become the place where people send their reports of strange CSS Grid behaviour in browsers. I'm really not the best conduit for this information! If you do think you have found a bug in a particular browser then the best place to report it would be the browser in question. This page explains how to do that with handy links for the main browsers.
Before reporting a bug you can take a look and see if the issue is already logged. Usually when I come across something, even in a developing spec like Grid Layout, when I head to the bug tracker it is already a known issue. I can then just wait until I see it has been resolved and test again.
Animated Animals in CSS and SVG | Codrops
This is a fun tutorial. Not a huge amount of real world useful application right now and Chrome only, but playing with ideas like this is a way to learn new techniques that can then be put to use in the real world. Also, that fox is cute!
Our Sponsor
Save and Learn Layout with my Early Bird Offer - ending soon!
The complete CSS Layout Workshop takes you right through from fundamentals to advanced and experimental CSS techniques. Part 1 is now online and the lessons for Part 2 are currently being added. Save $10 on the complete package with the Early Bird Offer.
All courses include access to our Slack Community, all videos and code examples to follow along.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.