Hello and welcome to RWD Weekly Edition #273.
This week I have two very exciting UK based conferences to tell you about. The first is on in two weeks and it is our featured image this week, but before I tell you more about that I wanted to go back to last weeks snippet.
Last week in the introduction I talked about column-count and had the following:
I left the <h2> outside of the columns because I didn't want the header to be a part of the content in the columns (it looked weird).
Thankfully one of our readers let me know on the codepen that this didn't need to be the case, see below:
I just wanted to let you know, that there is a way to do this in CSS too. You can leave the heading inside the columns and give it a column-span: all;
.columns { height: 80vh; column-count: 3; column-gap: 2em; h2 { column-span: all; } }
That's awesome, thank you!
Anyway, back to the conferences. The first one I wanted to tell you about was the Reasons.to conference coming up on the 4th, 5th, 6th September in Brighton, England. I've just booked my ticket and hotel and am looking forward to seeing Harry Roberts talk about performance, Chris Gannon on SVG, Nadieh Bremer with her amazing data visualisations, Mark Boulton and a whole bunch of other amazing speakers.
I'm there for 3 days so would love to meet up for a coffee during the day or a beer in the evening if you're around. Tickets close in 6 days so be quick.
Headline This is today's must read article. Remember when Eric Portis explained responsive images with cartoons, well Lin Clark does the same but explaining how CSS works in the browsers (or how the browser works with CSS) and then how they made it all really really quick in Firefox.
| | State of the Browser is a one-day, single-track conference with widely varying talks about the modern web. This year's loose theme is: Rise of the Browsers. Speakers include Peter Gasston, Peter O'Shaughnessy, and Seren Davies. The conference is in London, UK, and it's on a Saturday so you don't even need time off work. They're incredibly welcoming, I took Noah along to my first one when he was only 9 months and they looked after us both.
| | Articles If you're like me and wanting to push the designers you work with to take advantage of the new capabilities the Grid and Flexbox give us then this article might help them get to grips with the capabilities.
I've been pushing PWA's quite a bit on the newsletter the past few months, and for good reason. It's such a positive step forward on the web, and if you're looking for further reasons then check out all the things you get for free!
These metrics are now baked into SpeedCurve (if you're a customer) and measure things like h1 render, biggest image render, biggest background image render. These are pretty much the largest and most 'heroic' items on your page so it's good to know when they load.
Like any other element in a design system, animations must have a purpose. To integrate animation, start by looking through your interface and noting how and why you use animations in your particular product and brand.
Sometimes you just need to spend some time offline. This page takes that to a new level by making you disconnect from the internet to be able to see it. Very cool.
Last week we saw a post from the team at Speedcurve about whether page weight was the right thing to look at. This week I came across another discussion this time coming from Imgix.
Tutorials
Looks like a container query. Uses the flex-grow: 9999 technique for component layout. Grid to for spacing and a 'magic' SVG for an aspect ratio relative responsive image.
By adding a video preload to your video embeds you can get your audiences watching your content faster without necessarily having to download any extra MBs that would be wasted if they decide not to watch.
If you want to get web notifications going here's a great tutorial over on CSS Tricks. I don't mind these when you initiate the request, but a LOT of sites these days try and push notifications as soon as I land on the site (like asking for an email address to subscribe to a newsletter 1 second after landing on the article).
Great to see Chrome Dev Tools (at least in Canary) now have a colour contrast ratio to show if you're passing AA or AAA standards.
This week I came across an article from a couple of web champions about their treks through Japan while taking some pictures. They used this storytelling map that was originally done by Codrops which I LOVE and hope to use (one day) to map out some of my own trips. It's responsive too!
Silky smooth interactions are critical for providing a natural-feeling application. The devil is in the details, and ill-performant web animations feel awkward, "janky", and, above all, slow.
Harry Roberts takes us through how we can look at third party script providers and test to see whether they're causing any load strain on our sites that are affecting performance. There are some neat tools listed as well, a must for any front-ender concerned about performance.
Tammy has written a few articles in the past two weeks, you can even check out her amazing stuff on this video of her recent Velocity talk.
Champion the open source test automation favorite, and learn advanced automation secrets that will help you release better desktop and mobile apps faster! Read the guide here » // sponsor
Plugins, Resources, & Tools Last week was the release of the HTML5 boilerplate latest version. The biggest updates (for me) is the addition of the web app manifest file, and update to jQuery and the drop of IE8 support (with a message that IE 8/9 are outdated)
Have you ever received an email where they have a timer that is counting down? I wanted to do it in this email but time ran out (pun intended)
I've really enjoyed reading this book so far. It's one of those books that you can read from cover to cover over a weekend and come into work on the Monday a typography expert…. or you can use it as a reference on your desk for whenever you run into a design or development problem when it comes to typography.
That's it for this week. I'm spending the weekend fixing up my wifes Yoga site and am happily adding FlexBox and Grid Layout at every opportunity I can find. The only time floats are being used now will be to wrap text around an image.... the way it was designed ;)
See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment