Issue 130

News

Issue 130

I've been working on slides and examples for upcoming conference talks and workshops, conference season will be round again very soon. On Thursday this week I'm doing a webinar for Smashing TV.

Lots of interesting tips, techniques and articles to link to. Don't miss the new videos from Jen Simmons, they are a different style of video to those I've produced in the past, and to anything else I've seen online. If you are finding it hard to learn some of the concepts around Grid layout, you might find these do the trick.

The issue this week is supported by an anonymous sponsor - thank you!

Rachel Andrew, CSS Layout News

(187) Layout Land - YouTube - YouTube

Every Tuesday and Thursday Jen Simmons will be releasing new videos on the new layout possibilities in web design.

These are excellent, and a completely different approach to the usual code-heavy tutorial screencasts.

youtube.com

Learn

Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver — Smashing Magazine

On Smashing Magazine, a useful article on IntersectionObserver and how to use it for lazy-loading images and other use cases.

smashingmagazine.com

Home | Laws of UX

"Laws of UX is a collection of the key maxims that designers must consider when building user interfaces."

I really like the site design too.

lawsofux.com

CSS Paint API  |  Web  |  Google Developers

Find out about the CSS Paint API, part of Houdini and about to be enabled by default in Chrome Stable.

google.com

CSS Houdini Experiments · @iamvdo

More Houdini fun this week with these experiments.

iamvdo.me

Using CSS Clip Path to Create Interactive Effects | CSS-Tricks

A great article demonstrating how to use the clip-path property to create various effects.

css-tricks.com

Interesting

Grid Experiment No. 4

A lovely menu layout using CSS Grid which is also responsive.

codepen.io

Case Study: lynnandtonic.com 2017 refresh

Lynn writes about creating her portfolio site, which I linked to in a previous email.

andyet.com

Keeping aspect-ratio with HTML and no padding tricks

Here's an interesting approach at a "hack" for maintaining aspect ratio.

codeburst.io