Week notes #10

This week I was recovering from a fever/cold/nightmare illness that left me with an awful lot of email and unfinished tasks ready for next week so unfortunately nothing much happened of note. I did help write a primer on BEM though; it organises all of the current thinking about modular CSS and why we might want to take that approach when we start work on large-scale front-ends.

I also started work on a post about background-blend-mode for the Almanac and it’s an interesting property that gives developers the ability to manipulate images, sort of like Photoshop. Here’s a quick demo I was messing around with:

See the Pen Background blend mode by Robin Rendle (@robinrendle) on CodePen.

One of the cool things about front-end development is that you might have a string of projects which don’t require any of the latest properties or tools, so much so that when you try and figure out how they work it feels like designing things in the future. This is certainly the case with background-blend-mode, especially when you start chaining these values together for each layer of a background.

In the demo below I’ve tried to replicate a Miami Vice lookin’ 3D effect where two background-images are set slightly askew from one another whilst gradients are layered on top, each manipulated with a different blend mode:

See the Pen Gradients and background-blend-mode by Robin Rendle (@robinrendle) on CodePen.

Cool, huh? I’m not sure how useful this is in day-to-day front-end development but who cares when it’s this pretty?


Next week there’ll be more about the redesign of the site, notes about a new office I’ll be moving into and some info about a couple of interesting posts I’m working on.