broken digits

CSS3 mixins for SASS

ben@brokendigits.com (DJBS) — Mon, 14 May 2012 20:15:44 +0000

The Compass project provides a ton of useful mixins for SASS, but over the course of many projects I’ve created a streamlined set that’s more useful for my day-to-day development.

My mixins prefix where necessary and I try to provide smart defaults. The naming convention is descriptive and not just a flattened reproduction of the CSS3 properties being used.

/* Commonly used mixins for CSS3 in SASS by Ben Sargent (2012) www.brokendigits.com */ /* generically prefix any property name */ @mixin prefix($name, $value) { -webkit-#{$name}: $value; -moz-#{$name}: $value; -ms-#{$name}: $value; -o-#{$name}: $value; #{$name}: $value; } /* for border-radius, named to be consistent with roundedcorner */ @mixin rounded($radius: 6px) { border-radius: $radius; } /* used for rounding a single corner. eg. roundedcorner(top, left) */ @mixin roundedcorner($surface, $side, $radius: 6px) { border-#{$surface}-#{$side}-radius: $radius; } @mixin boxshadow($horiz, $vert, $blur, $color) { box-shadow: $horiz $vert $blur $color; } @mixin innershadow($horiz, $vert, $blur, $color) { box-shadow: inset $horiz $vert $blur $color; } @mixin opacity($level) { filter: alpha(opacity = $level * 100); opacity: $level; } @mixin borderimage($image, $top, $right, $bottom, $left, $repeat: stretch) { border-width: #{$top}px #{$right}px #{$bottom}px #{$left}px; -webkit-border-image: url($image) $top $right $bottom $left $repeat; -moz-border-image: url($image) $top $right $bottom $left $repeat; -ms-border-image: url($image) $top $right $bottom $left $repeat; -o-border-image: url($image) $top $right $bottom $left $repeat; /* border-image: url($image) $top $right $bottom $left $repeat; removed since Chrome's implementation is fundamentally broken */ } /* useful for semi-transparent borders which can have bleed-through. See https://developer.mozilla.org/en/CSS/background-clip */ @mixin backgroundclip($val: padding-box) { -webkit-background-clip: $val; -moz-background-clip: $val; } @mixin transition($property: all, $duration: 0.2s, $timing: linear) { -webkit-transition: #{$property} $duration $timing; -moz-transition: #{$property} $duration $timing; -ie-transition: #{$property} $duration $timing; -o-transition: #{$property} $duration $timing; transition: $property $duration $timing; } /* if you need to transition a prefixed property, use this instead */ @mixin transition-with-prefix($property, $duration: 0.2s, $timing: linear) { -webkit-transition: -webkit-#{$property} $duration $timing; -moz-transition: -moz-#{$property} $duration $timing; -ie-transition: -moz-#{$property} $duration $timing; -o-transition: -o-#{$property} $duration $timing; transition: $property $duration $timing; } @mixin transform($type) { -webkit-transform: $type; -moz-transform: $type; -ms-transform: $type; -o-transform: $type; transform: $type; } @mixin animation($name, $timing: 0.5s) { -webkit-animation: $name $timing; -moz-animation: $name $timing; -ms-animation: $name $timing; -o-animation: $name $timing; }

Endless Groove, Ep. 5

ben@brokendigits.com (DJBS) — Mon, 27 Jun 2011 05:45:32 +0000

Exit 9 – No Accident in Paradise
Sei A - Body of Eyes
Deep in Calm – You Will Pay
Midland – Through Motion
Reason Or Romanza – Radiance Trigger (Rescue Mix)
Commix – City Section
Danny Howells – Black Cat (Total Science Remix)
The Chemical Brothers – Swoon (Don Diablo Remix)
Cassian – I Like What You’re Doing (Nightriders Remix)
Bas Amro – Ten
Vincenzo – Where You Are
White Hinterland – Icarus

Endless Groove, Ep. 4

ben@brokendigits.com (DJBS) — Thu, 09 Sep 2010 22:16:43 +0000

Endless Groove is back with some super smooth beats to round out the summer. This session I went back to the basic idea that Endless Groove started with: mellow, driving repetitive beats with a lot of melody and some beautiful vocal effects. I also snuck in some true classics that I’ll let you find on your own. Enjoy.

Solee – Legends (Slow Motion Mix)
John Talabot – La Niña (Afrodub Version)
Pablo Bolivar – Memories (Nhar Remix)
John Talabot – Matilda’s Dream
Mock & Toof – Shoeshine Boogie (Wolf + Lamb Remix)
Der Dritte Raum – Weitwelt
Ripperton – Random Violence/Telépopmusik – Breathe
Kaito – We Are Living Here
Vibrasphere – Breathing Place
Die Antwoord – $0$
Ray Mang – Look Into My Eyes
Lindstrøm – Another Station (Todd Terje Remix)
El Guincho – Antillas (Prins Thomas Diskomiks)
Pollyester – German Love Letter (Permanent Vacation Mix)
Röyksopp – This Space

Endless Groove, Ep. 3

ben@brokendigits.com (DJBS) — Mon, 26 Apr 2010 17:34:33 +0000

Nothing says summer like a bit of Chromeo.

Technically, it’s not summer yet, but this should put you in the mood. Enjoy.

Ripperton – L’Ardo
Moonbeam – Tokyo Dragon (tONKPROJECT Ebencrib Remix)
Estroe – Inspirited Away (Nuno Dos Santos Remix)
Julius Steinhoff – Something Like Wonderful
Booka Shade – This Is Not Time
Estroe – High Maintenance
Don Diablo – I Am Not From France (Linus Loves Remix)
The Kleptones – Hiding in the Bayou (LCD Soundsystem vs. Black Crowes)
Ajello – Silert Tears (Space Ranger Remix)
Way Out West – Future Perfect (Henry Saiz Remix)
Estroe – Kiss & Make Up
Moonbeam – Tokyo Dragon (Roger Martinez Remix)
Chromeo – Night by Night (Siriusmo Remix)
Rodion & Bottin Galli – Give It Up
Libex & Marshall – Psychic Harmony 2010
Bvdub – To Live (edit)

“Next Unread Message” Script for Apple Mail

ben@brokendigits.com (DJBS) — Thu, 18 Feb 2010 18:11:54 +0000

One thing that’s always bugged me about Apple’s Mail.app is the lack of a quick shortcut to your next unread message, irrespective of which mailbox it is in. Luckily, it was fairly easy to whip up a quick little script which does just that. Note that the script assumes your mail is sorted with the newest messages at the bottom — otherwise, you’ll need to edit line 7, replacing “last message” with “first message”.

tell application "Mail" to try set mailAccounts to every account set messageFound to false repeat with acc in mailAccounts if not messageFound then try set unreadMessage to {last message of mailbox "INBOX" of acc whose read status is false} set messageFound to true set accountWithUnread to acc end try end if end repeat if accountWithUnread exists then tell message viewer 1 set selected mailboxes to {first mailbox of accountWithUnread whose name is "INBOX"} delay 0.1 set selected messages to unreadMessage end tell end if activate on error beep end try

Add a keyboard shortcut with your favourite tool, like FastScripts or Quicksilver.

Endless Groove, episode 2

ben@brokendigits.com (DJBS) — Wed, 21 Oct 2009 18:37:21 +0000

Endless Groove Episode 2 continues in the idea of finding a nice, mellow relaxing groove and just letting it run its course. That’s not to say there aren’t moments that make you want to break out and dance, but this is music to work to. Or to drive to. This is a collection of music that I absolutely love, each track with a sprinkling of magic melody to keep things interesting. It also features one of the best tracks I’ve heard in years, the perfectly named The Magnificent by Lindstrøm. Killer.

Memory Tapes – Treeship (edit)
Tigerskin – Platin
Fritz Kalkbrenner – Blackmail
Hernan Cattaneo & Soundexile – Butterfly Effect (remix)
Pryda – Reeperbahn
Sebastian Davidson – Nightbird (Shur-I-Kan’s Sound of Summer Mix)
Lindstrøm – The Magnificent
Good Guy Mikesh & Filburt – Someone Told Me
Woolfy vs. Projections – Absynth (Markus Worgull Remix)
Shonen Jump – Vincenzo
Antix – The Hoard (Dousk Remix)
Dølle Jølle – Balearic Incarnation (Todd Terje’s Extra Doll Mix)
Iridium – Lullabies In The Dark

Endless Groove, episode 1

ben@brokendigits.com (DJBS) — Wed, 15 Apr 2009 20:55:24 +0000

I spend a lot of time sitting at my computer (shocking, I know). Sometimes, I just want some nice, mellow house music that sets itself into a groove and rolls. Some of my sets have had this characteristic, but I decided to create a new imprint called “Endless Groove”, just for these sorts of mixes. It’s got a bunch of tech house and a bit of progressive, and every once in a while the set kicks it up a notch and you may find you head bobbing along and your feet tapping your chair. At least, if you’re anything like me…

The Black Dog – Train By The Autobahn (Part 1)
Danny Howells – September
Lindstrøm – Where You Go I Go Too
Adele – Hometown Glory (Pocketknife’s Familiar Faces Remix)
Junior Boys – Hazel (Ewan Pearson’s House Dub Mix)
Felix Da Housecat & Kris Menace – Artificial
The Chain – Geo
Matias Aguayo - Minimal (DJ Koze Mix)
Schodt – First Breath (Dankann Remix)
Tore Jarlo – Raining Down On You feat. Pia (Dumb Dan Edit)
Bertrand Dupart & Gwen – Lolita (Rocco Remix)
Low Motion Disco – Things Are Gonna Get Easier (Windsurf Remix)
Paul Keeley – Life Aquatic
Danny Howells – September (re-entry)

phoenix sessions 005

ben@brokendigits.com (DJBS) — Tue, 25 Nov 2008 03:32:11 +0000

So it turns out that if you wait to too long between set releases, pretty much every one of your favourite artists releases a killer new track. I guess you could refer to this set as the Epic Mix.

16 Bit Lolitas make a couple of appearances with tracks from their magnificent new LP. DJBS favourites UNKLE, Jaytech and Way Out West all contribute in one way or another — I even found room for the new version of the all-time classic Shapeshifter’s track, Lola’s Theme (which made an appearance on one of my first ever mix sets, many years ago).

This will probably be the last set released under the “phoenix sessions” moniker for a while, as I intend to explore some new spaces in the near future. Stay tuned.

Black River (Gui Boratto Remix) – Bomb The Bass
Reformation (Robert Babicz Remix) – Lucca
Coconut Blues – Gabriel Ananda
Bazook (Bazookapella) – Chris the Greek & Matheos
Formula of Fear (Uberzone Dub Mix) – Hybrid
Murder Weapon – 16 Bit Lolitas
Azteca (KOS’s Stadium Mix) – KOS
Twilight (Layo and Bushwacka! Remix) – UNKLE
Lola’s Theme (2008 Re-edit) – The Shapeshifters
Heart & Soul – Yvel and Tristan
The Warning (Terracotta Army’s Eastern Invasion) – Way Out West
Nobody Seems to Care (feat. Jennifer Horne) – 16 Bit Lolitas
Candy (James Zabiela Remix) – Spooky
Geko – Guy J
Meaningful Story (Jaytech Remix) – Dinka
Omptine D’Un Ature Ete, L’Apres Midi – Jay Haze and Yann Thiersen

Cappuccino’s FlickrDemo in 45 lines of jQuery

ben@brokendigits.com (DJBS) — Fri, 05 Sep 2008 17:19:42 +0000

When I first saw 280 North’s “280 Slides” application, I have to admit I was very impressed. They built a truly native-feeling (well, if you’re on a Mac) tool on the standard web platform. Not an easy feat, and clearly some big brains operating on the problem.

But the more I read about their toolkit (Objective-J), the more unsettled I felt. It’s the same feeling I get when I see tools like Flex. These are some seriously complicated development environments, meant to abstract away to the fundamental building blocks of the web.

When 280 North released their Objective-J toolkit a few days ago, called Cappuccino, I poured through their documentation and demos to get my head around what they had built. And it’s very impressive. But as a jQuery addict, I didn’t like their dismissal of it as at tool for making small adjustments to a web page. I feel that you can build a full-fledged web application in jQuery just as simply — or simpler — by embracing HTML/CSS as a layout engine, and JavaScript as a scripting language.

So I tackled re-implementing their FlickDemo application (several hundred lines of Objective-J) using jQuery and jQuery UI. It took about 3 hours to build, and ended up being about 45 lines of code (plus the frameworks, of course), and just under 200 lines of CSS declarations.

What I didn’t do: I didn’t bother hacking the CSS to work in Internet Explorer. It’s not that it couldn’t be done — jQuery supports it just fine — I’m just lazy. So you’ll need a modern WebKit or Gecko browser to see the demo. I also didn’t implement the drop shadows that Cappuccino uses on their images.

Also, the jQuery version doesn’t take over all you keyboard shortcuts, so you can still navigate around in your browser.

Original Cappuccino version

My jQuery version

Download the source here: flickrDemo-jQuery.zip

Update: Due to popular demand, I’ve changed the behavior of the slider so the image size updates in realtime. Total change: one word.

Update 2: Alexander Simmerl was nice enough to provide an upgrade to the image loading, bulking up the code by a few lines but greatly improving the load animation. In the comments, dak contributed a 2-line CSS fix for the inline-block layout problems in FF2 and IE7, which I’ve also merged.

I think this is as far as I’ll take the demo. Ultimately, it’s not that compelling of an application (but it does make a good demo). To respond to some of the criticism I’ve read, my point was not to argue that jQuery was a drop-in replacement for Cappuccino. Clearly there’s a ton of nuances to the Cappuccino runtime that would need to be carefully reimplemented if we wanted a 100% identical demo. My point is that it’s quite simple to do web application development in jQuery, and something as heavy as Cappuccino is not the only option (and in many cases, probably not the best option). I see Cappuccino as a kind of AIR-in-reverse (native apps that run in a web browser!) and possibly an interesting technology path for coders that are already familiar with Cocoa but don’t have experience with the nuances of direct web development. One thing I’m sure of is HTML/CSS/JavaScript are not going anywhere… they may be complimented by frameworks like Cappuccino, but the core will remain.

phoenix sessions 004 (Air Canada Edition)

ben@brokendigits.com (DJBS) — Mon, 07 Jul 2008 18:38:08 +0000

A large chunk of this mix came together on a flight from Calgary to Montreal, early one morning a few weeks ago. It was a really nice way to spend the flight, and the presence of power adaptors on the seats really made my day. Flying the horrors of Continental or United lately has really blinded me to the perks the rest of the civilized world enjoys.

Only one comment this time about the set: Sultan and Ned Shepard have delivered one of the most mind-blowing breakdowns in recent memory in the form of “Jeopardy”. I’ve switched things around a bit here by combining the original’s techy progressions with 16-Bit Lolitas’ funkier remix, and it gives me chills. Enjoy.

Bonafied Lovin’ (Juri Hulkkonen Remix) – Chromeo
Movin’ (UNKLE’s Surrender Sounds Session 9) – Skylark
Mongoose (Guy J Remix) – Sasha
Jeopardy feat. Kuba Oms – Sultan and Ned Shepard
Jeopardy feat. Kuba Oms (16-Bit Lolitas Mix) – Sultan and Ned Shepard
One Dress, Two Legs (Dub Mix) – Jaytech and Jeff Drake
Fun Punch (Bag Raiders Remix) – Bag Raiders
Ikaros feat. Nicky (Retroid Remix) – Clesk, Pea and Shuda
Anime (Rocco Main Mix) – Hernan Cattaneo and John Tonks
Shine On – Soda Inc.
The Big Space (Subsky Mix) – 3kStatic
Dusty Horizon (Trafik’s Sirocco Mix) – Roland Klinkenberg
Pyramid – Jaytech