Prepare to fire up those tabs, because we’ve been busy working on a number of posts over the last week:

✻ I Heart CSS: Geoff looks at the many ways to display a heart. So many ways!

✻ Making a Simple Image Resizing/Optimizing Service in Automator: Chris shows us how to build your own simple image resizer and optimizer for free on OS X.

✻ A Quick Overview of `object-fit` and `object-position`: we take a look at two of Robin’s favourite CSS properties which gives developers control of the content inside an . Spoiler: it's just like the background-size and background-position properties, only for HTML images. Stop the SQUISH.

✻ Squigglevision:  a fun technique that uses a number of jiggly SVG filters on top of any element to make it look animated.

Building Concentric Circles with Nice Color Palettes For Fun and Science: over on the Media Temple blog, Chris plays around with SVGs, APIs and Jade to generate a series of pretty cool circles.

 



What we’ve been reading, listening and watching


• Continuing his thoughts on loading CSS, Jake Archibald describes another way to control that process but this time with Custom Properties (more popularly known as native CSS variables). Effectively this technique gives us the ability to load bits of an interface at a time. And if you check out the demo in Firefox or Chrome Canary then you’ll see the header load, then the sidebar, then the main content. This is definitely a technique to keep an eye out for in the future.


• Next up, in response to Chris’ note in the previous edition of the newsletter where he argued that style guides don’t need as much public fanfare and celebration as they currently receive, Brad Frost replied:

I see an organization’s commitment to a sound, deliberate design system that’s meant to stand the test of time. If style guide logos, mascots, and dedicated sites help organizations get on board and excited about design systems, I’m all for ’em.
• And finally, Rebecca Murphey has come up with some JavaScript exercises to help beginners.




In other news around the web



Fun from the archives


Goofus and Gallant tackle web design:



What have you learnt this week?


Robin Rendle: This week I’ve been thinking about web typography, both in terms of code and aesthetics. I’ve wondered what designers need to know about code in order to set type effectively and how we might create rules that can act as useful guidelines for the future.

Consequently, I’ve started to call these guidelines The New Web Typography:
Our hypertext, as fabulous as it might be, sits on a network built in the image of a sand dune. The slightest change to the environment and the whole thing topples over or gobbles up our text. Instead of building systems on shifting foundations then we must celebrate a new form of typography where we strive to navigate the instability between reader and text.


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