Blog on chrispederick.com

Using Blur To Create A Wallpaper For iOS 7

iOS 7 looks completely different from previous versions of iOS so after installing it on my iPhone I decided to change my wallpaper to better fit with its design.

The iOS 7 lockscreen is now much cleaner and lends itself to highlighting a photo, but I found using the same photo as my homescreen wallpaper too distracting. iOS 7 “uses translucency to provide a sense of context and place” so I wondered if using a blurred version of the same photo would look good on the homescreen.

Blur is a $0.99 universal iOS app that allows you to blur any picture and set it as your wallpaper. The interface is simple, but beautifully designed and allows you to quickly import a picture, adjust the blur effect and export the blurred picture back to your camera roll.

Blur screenshot

Using this blurred version of my lockscreen photo on my homescreen leaves it clean, but keeps a visual connection back to the lockscreen and I plan on using this technique whenever I change the photo on the lockscreen.

Phone screenshot

Adaptive Backgrounds

Adaptive Backgrounds 

“A jQuery plugin for extracting dominant colors from images and applying it to its parent.”

Sassy Z-Index Management For Complex Layouts

Sassy Z-Index Management For Complex Layouts 

“Keeping track of stacking contexts and orders in CSS is hard, but the approach we’ve looked at here is intended to be the most straightforward and require the least amount of maintenance.”

Frontend Development Bookmarks

Frontend Development Bookmarks 

“A huge list of frontend development resources collected over time, from general knowledge to concrete problems.”

Headroom.js

Headroom.js 

“Headroom.js is a lightweight, high-performance JavaScript widget that allows you to react to the user’s scroll.”

Script-injected async scripts considered harmful

Script-injected async scripts considered harmful 

“The inline JavaScript solution has a subtle, but very important (and an often overlooked) performance gotcha: inline scripts block on CSSOM before they are executed.”