Last week I had the absolute pleasure of chatting to Chris Coyier & Dave Rupert , (who, incidentally are awesome!) on Shop Talk Show!
Rad links from around the web #1
I spend every minute of the day looking at amazing things that other people are doing on the web. Studio buddy Glen helped convince me to compile a list.
- Redpen, by Matthew Farag — I already used this with a couple of clients this week.
- Addy Osmani wrote about the front end performance on Pitchfork’s Daft punk feature, which is beautiful, but jankkky-as-a-motherfucker.
- Two crazy, stupid incredible CSS demos #1 #2
- Aaron Shekey with a Stunning post about why Adobe reflow was created. (I want my blog to look like this)
- Playground Inc’s site is pretty
Its Friday! Break out the beer & Tumblr!
- Japanese trademarks
- Thugkitchen
- NASA Gifs
- Every second by my friend Magda and her buddy Sam
Yesterday I (finally!) released Gallery CSS, which is a simple gallery carousel — Normally, there isn’t anything particularly interesting about carousels, except this one is written using only CSS (no JavaScript, no dependencies).
Writing Gallery CSS was a total experiment, I didn’t want to have to use jQuery, and some “do everything” plugin. So I sat down and forced myself to find a working solution. Through this process, I’d inadvertently learnt a lot of tiny details… which I think is what every good open source project does.
I took those learnings and recorded a 40 minute, 720p screencast, it covers build tools, process, css animation & transitions, and some other rad tips along the way. Not bad, right?
So begins my experiment: Open source for free, $12 screencast to learn what I had to know to put it together.
Go get yourself a copy! (Please)
Recently I worked with Art Processors to create the “Replay” feature for The State Library of New South Wales’ “Curio” — Essentially, you get to see which exhibits you viewed at the gallery after you’ve left (you’re geotagged through the building as you explore).
One particular part of this build proved difficult, I thought it may be worth sharing — The polygonally (is that a word?) masked images:
To get this effect to work on webkit browsers, I was able to use the proprietary webkit feature: -webkit-mask-image, with an SVG polygon image.
In Firefox (or browsers that actually handle SVG well) — I hand modified the SVG polygon image, adding a clipPath that also contained a copy of the original polygon.
I also added some IDs so that the clipPath and original polygon could be referenced separately, then it was just a matter of changing the CSS so webkit would reference the polygon and Firefox would use the clipPath.
For some extra icing, I added a transition: all .25s so that the mask-size would be animated when changed.
Curio was a blast to put together, I can’t wait to see what ArtPro come up with next time.
Menu bar feels like its getting kinda insane
@njmcgee pointed out Bartender app, via Garrett Murray’s post
