Thursday, November 16, 2017

RWD Weekly #284

View this email in your browser
Get your RWD shirt from Cotton Bureau
Hello and welcome to RWD Weekly edition #284.

I'm happy to say that the RWD Tees are back up on Cotton Bureau again as part of their thousand Tee sale. If you want to pick up a pretty sweet gift for your team mates at Xmas now is the time to get one of these.

I'd also like to say a huge congratulations to Jake and Web Design Weekly this week for hitting edition #300, an absolutely herculean effort!
 

Snippet Show

I've been quiet on this for a few weeks but earlier this week I came across a great tweet from Matt Smith with this little CSS nugget:

/* you forgot the 'alt' attribute */
img[alt=""],
img:not([alt]) {
border: 5px dashed #c00

}

This snippet looks for images where the alt tag attribute is blank or if it has been ommitted altogether, and if so wraps the image with a red line. Nice!

Let's get to some links!

Headline

Using CSS Grid: Supporting Browsers Without Grid

Rachel looks at the most asked question about CSS Grid Layout — how to you provide fallbacks. This article looks at how to determine your browser support list, looking how far back CSS Grid goes back and shows you how you can structure your CSS to be backwards compatible (and covers off some key gotchas that may trip you up)
 

Relative Requirements

This is a great approach when working with clients on new projects and identifying the most important elements of the project and plotting that out. This approach is a great way to get the people involved in the project to agree upon what may trump an decision, is it usability, accessibility, performance, delight?

 

Sponsor
120+ Unique, Premium Typefaces

120+ Unique, Premium Typefaces - 31 Font Families - only $9!

It's time to fall into a fantastic font sale! This Autumn Font Sale is overloaded with more than 120 gorgeous typefaces, culled from 31 different font families. You'll be privy to a wide variety of styles ranging from vintage to cartoony, not to mention a slew of extras like alternates. No matter your latest project, you're bound to find the perfect font in this collection. See the fonts

Articles


Introducing the New Firefox: Firefox Quantum

One of the biggest releases occurred this week with Firefox releasing v57 better known as Firefox Quantum. It is twice as fast as it was 6 months ago and Mozilla believes it will be on target to be twice as fast again in 2018.

So why such a big deal? Well for the first time since making a move across to Chrome back in 2008/9, I've reset my default browser to Firefox. This comes down to the leaps and bounds that Firefox developer tools have come along (although Chrome still has them beat there) as well as having the best CSS Grid inspector, but the switch is mainly down to the fact that it is fast for browsing.
 

Declining Complexity in CSS

Eric Meyer recently published the fourth edition of "CSS - The Definitive Guide" and posted a picture of the new book along side the 2nd & 3rd editions. The latest iteration is as big as those two put together, yet in this article Eric explains why CSS is simpler, although there's more of it that we can use now.
 

Self-Publishing a Book for Fun and Profit

Brad covers off the entire process of writing and publishing his Atomic Design book. He even goes into the nitty gritty of which label printer to buy to make packaging and sending them easier.
 

How to Optimize the Critical Rendering Path in WordPress

Some really useful tips on getting your websites loading faster if you're using WordPress and plenty of links to plugins that can help you with the heavy lifting.
 

November Update of Adobe XD

At the Adobe Max conference the unveiling of Adobe XD wasn't packed with as many features as you would have hoped for with a 1.0 release, but a month later they've dropped some great updates, not least of all the Design Specs feature. This allows developers to find flows, measurements and copy styles while developing the front end.
 

Engaging users through high quality AMP pages

Google will be enforcing a rule that requires AMP pages to be on content parity with the original pages, or they'll be removed from the top spot in Google mobile searches (the search carousel).
 

Using SVG as placeholders — More Image Loading Techniques

A review of the couple of options when using SVG placeholders to improve the perceived performance of your site.
 

Release Notes for Safari Technology Preview 44

 

Tutorials


Grid areas and the element that occupies them aren't necessarily the same size.

Chris is experimenting a lot with Grid this week... or at least he is publishing a few of his thoughts on the Grid this week. This tutorial details how elements might not fill up the entire grid area, and that they can be positioned to the left/right, top or bottom of the area.
 

Aspect Ratios for Grid Items

Chris Coyier looks at examples with CSS Gridlayout that will allow us to deal with multiple aspect ratio requirements within a single page layout.
 

The 5 Most Common Image Mistakes for E-commerce Companies

Performance is incredibly important when it comes to selling products online. Make sure you're not making any of these mistakes and throwing sales away.
 

Tools

 A-Frame 4DOF Component

If you're looking at exploring how to take the DayDream of Samsung GearVR controllers and add more interactive features for your AFrame worlds then this component looks at the tilt/gyroscope options in the controllers
 


Finally

That's it for this week. In the lead up to the Xmas break I'm going to be putting together a couple of best of editions to get us over the holidays so that you've still got something to distract you and keep you tinkering, and I can spend more time trying to cut down a tree and put together kids xmas presents ;)

See you next week!

Cheers,

Justin.
Copyright © 2017 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
Studio 1, Make Space Studios
London, London SE17DR
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by MailChimp

No comments:

Post a Comment