✻ Geoff Graham gives us five tips for aligning icons with text.
✻ David Attard walks us through Google Tag Manager. Never heard of it? Neither had we. It's a script you add to your site for managing the other third-party scripts, like analytics. That way when you need to add/remove/change/reconfigure those other scripts, you can do it right through GTM instead of hand-coding and manually deploying these kind of changes.

✻ Chris takes a look at an interesting problem with flexbox and truncating the text of a flex child element:

Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

Fortunately, there is a (standardized) solution. You just need to use a non-flexbox property/value to do it.


✻ Chris also wrote up some of the questions from his recent AMA. Why didn't OOCSS catch on? OR DID IT?
 

What we’ve been reading, listening and watching

There’s lots of helpful tricks for optimising JPG images in this post by Colt McAnlis:
With the Average webpage size now larger than the original DOOM game, you have to start asking where all the bytes are coming from, and how you can do more to toss those things out.
And Typographica has released a list of their favourite typefaces of 2015:

Welcome to our tenth annual celebration of what is fresh and interesting in type design. Who decides what meets that standard? No single writer. No editorial board. No consensus by committee. No superstar-studded jury (though there are some luminaries in this bunch). Those formats all have value. But what makes this list different — and maybe a little weird but, to me, always insightful — is that each contributor makes their own pick.

❥ Sponsor: 7 Days of Free Images
Enhance your designs with 7 days of free graphics, photos, design elements, and more. Get the free trial now!
 
A note from the archives

and its related elements are tricky beasts. They’re often misused for layout or left unused for tabular content, only to be replaced with a hacky combination of other HTML elements and CSS.

This is why we’ve created a Complete Guide, where we’ve assembled all of the information about how to use the elements and what they’re for, as well as tips to avoid some of the most commonly associated problems with them.

A Complete Guide to the Table Element

 
What have you learnt this week?

Chris Coyier: Some new comments on an old snippet on the site lead me to decide updating it was worthwhile. The snippet was some tables listing the event.keyCode for pressed keyboard keys. 

I always learn stuff when I set about updating old content. This time, I learned that keyCode really isn't the right thing to use anyway, it's which. So I made that more clear, updated some information, and added a tester tool, and renamed the snippet better.

 
Questions about web design and development?

Don't forget that we have forums! They are totally public and we welcome anybody to ask questions. Even better, help other people (it's good for the ol' karma). 

We enjoyed this thread in which a forums member was wondering how to achieve a certain responsive layout. The discussion not only has potential solutions, but is a whole discussion about current and future layout techniques, including some talk about display: contents; that is super new and quite interesting!


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