This past week has been a doozy. First things first: Chris wrote a book called Practical SVG and it’s published by A Book Apart. There are many good reasons to buy the book and first among them would be the foreword by Val Head:

Harness the power and possibilities of crisp, performance-efficient SVG with Chris Coyier. From software basics to build tools to optimization, you’ll learn techniques for a solid workflow. Go deeper: create icon systems, explore sizing and animation, and understand when and how to implement fallbacks.


✻ ✻ ✻

Also! Our own Robin Rendle has started a newsletter called Adventures in Typography which you'll surely enjoy!


From the blog

✻  Ana Tudor wrote about the state of CSS reflections where she looks at a variety of options to mirror elements with plain CSS. She looks at non-standard properties such as -webkit-box-reflect and the mysterious element() function in Firefox.

✻ Chris takes a quick look at the React and Redux DevTools which reveals the underlying inner workings of React components, like this:

✻ In Remote Control WordPress at Scale, Scott Fennell wraps up the third post in the series. The idea is that you have one “master” or “control” WordPress installation and then let the other WordPress websites you have all update from this same origin.

✻ Chris also looked at how you might set the width and max-width of an element:

Spoiler: you can do it two ways which look very different in code but aren't any different in practice. This is the follow up article to what we opened the last newsletter with. 

What we’ve been reading, listening and watching

Sketch has just been updated and now brings symbol resizing which effectively gives designers the option to keep certain components in place, sort of like position: absolute.

Adapting the same design for different device sizes just got easier. You can now select a layer, and use a dropdown in the Inspector to set how it should behave when its container is resized.

The team at Sketch also announced the Sketch Cloud Beta, which lets you save files and share designs with other team members. Pretty exciting!

✻ ✻ ✻

Dave Rupert has been diving into web performance and is particularly interested in making sure that he’s not just using vanity metrics. In A Standard System of Measurements he tries to come up with a list of devices and experiences to test for that are often forgotten about entirely.

He breaks the discussion into tier one and tier and two metrics. The first tests include checking your website on a “Good 3G” connection (~750kb/s) and testing on a popular Android device.

Dave then points to a session with Paul Irish on old performance tricks which consequently goes into a lot more depth.

✻ ✻ ✻

The team at Stack Overflow announced Documentation, a new collaborative effort with their community that aims to provide a general reference for a host of technologies and issue. The CSS topic looks at everything from centering and typography, to transitions and positioning.  

✻ ✻ ✻

Wes Bos launched a new course on ES6:

ES6 is a major update to JavaScript that includes dozens of new features. With a focus on simplicity and readability, this course is an efficient way to find out what is new in JavaScript and most importantly when and how you should use it.

✻ ✻ ✻

Chris was on The Rightly Designed Show and talked about the early days of CSS-Tricks.

✻ ✻ ✻

According to Guy Podjarny, HTTPS adoption doubled this year:

This is great news for the web, both because of the value HTTPS provides and since it’s a rare case where a security control is visibly growing in adoption. This post digs into the data, tries to explain the drivers behind it, and suggests ways we can learn from HTTPS to promote other security practices.

Chrome DevTools tricks

Chrome’s DevTools is being improved constantly so it’s very easy to find new tips and tricks to improve your debugging workflow. In this new weekly segment we’ll point to a single feature that’s piqued our interest lately.

To kick things off we’ll be looking at a faster way to inspect an element. If you’re in Chrome and type the following:

command + shift + c

…then hover over an element and you’ll see all sorts of helpful info, like the element’s classname, width and height values.

By then clicking on that element it will jump to that section in the console and you’ll be able to see a list of all its properties, just as if you right clicked and hit ‘Inspect Element’.

Pretty handy!

What have you learnt this week?

Chris Coyier: Random fact about me. My undergraduate college degree is a Bachelor of Arts. My focus was ceramics. I don't make anything anymore (maybe someday!) but I do appreciate it still a great deal. I love ceramic art shows, galleries, and collect a good bit of it. 

I ran across Ayumi Horie's site the other day, who not only makes interesting work, but has a massive links page linking to other artists, designers, organizations, blogs, etc. 

I'm always a sucker for a massive linkdump page, but it's especially cool to see one outside my normal webdev bubble. This one is a gateway to loads of inspiration.

Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list