The Toggle

Many of CloudFlare’s settings are literally turning features and services on or off, so Kevin (our designer), wanted to preserve the toggle concept (considering that it’s heavily used in our current UI). Stylistic changes aside, I wanted to make sure the toggle buttons were built and functioned significantly better than the existing ones; every one of the old toggles had to be instantiated via javascript, transitioned with jQuery animations, and were composed of 8 DOM elements each (!!).

The first toggle I came up with was built entirely from a <input type="checkbox" /> element, but sadly I came to find out that Firefox’s -moz-appearance: none doesn’t actually do anything, so you’re left with nothing but an oversized checkbox. It works wonderfully in WebKit, however. Chrome has also implemented CSS3 transitions for pseudo elements, which makes me wish even more that this solution worked.

The Final Markup

Once I got over the fact that I needed more than one DOM element to produce a toggle switch, I came up with the following snippet, which is composed of a label, the checkbox, and a span. I used the label to build the two states of the switch (using :before and :after) and the <span class="knob"> to control the toggle element. Basic CSS3 transitions work nicely across all (modern) browsers here, as the span is being transitioned, so there’s no need to worry about support for pseudo element transitions.

Downsides

One small gripe I have with this is hard coding the text into the CSS, which could cause some annoyances if you’re working with a multi-lingual site, but a simple solution is using CSS’s attr() function to pull the text from data attributes on the DOM element.

Unfortunately <=IE8 doesn’t support the :checked pseudo selector, so a small bit of JS is needed to detect the checked state for these browsers, if you plan to support them.

Original Code

The code above has been modified to allow it to be compiled in JSFiddle, but the original code I’ve written is below. I’m a big believer in ems/rems, so that is being used heavily across my projects. Maybe I’ll have to write up another post about how the units below are converted..

.switch{
	/* Hack to make Chrome round to .33334 */
	$switchWidth: 80.01px;

	background-color: $formBg;
	border: 1px solid $formBorderColor;
	color: $white;
	cursor: pointer;
	font-size: 0;
	height: $formInputHeight;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;
	width: $switchWidth/$rem;

	@include user-select(none);
	@include appearance(none);

	&:after,
	&:before{
		background-color: $green;
		color: $white;
		content : 'On';
		font-size: $inputFontSize/$rem;
		line-height: $lineHeight;
		height: 100%;
		left: 0;
		padding: 6.75px/$rem 0;
		position: absolute;
		text-align: center;
		top: 0;
		width: 51%; /* This is so the rounded corners of the knob doesn't make things wierd */
	}

	&:before{
		background-color: $formBorderColor;
		content : 'Off';
		left: auto;
		right: 0;
		width: 50%;
	}

	.knob{
		background: darken($formBg, 3%);
		border: 1px solid $formBorderColor;
		border-bottom: none;
		border-top: none;
		display: block;
		font-size: $inputFontSize/$rem;
		height: 100%;
		left: -1px;
		position: relative;
		top: 0;
		width: ($switchWidth/2)/$rem;
		z-index: 2;

		@include border-radius($baseBorderRadius);
		@include transition(all 0.15s linear);

		&:before,
		&:after{
			border: 4px solid transparent;
			border-left-color: inherit;
			content : '';
			display: block;
			height: 0;
			left: 50%;
			margin-left: 2px;
			margin-top: -3px;
			position: absolute;
			top: 50%;
			width: 0;
		}

		&:before{
			border-left-color: transparent;
			border-right-color: inherit;
			margin-left: -10px;
		}
	}

	input{
		position: absolute;
		visibility: hidden;
	}

	input.checked + .knob,
	input:checked + .knob{
		left: 50%;
	}
}

I wanted to write/add the fewest lines of code possible, so I went the input[type=”range”] route, which made implementation extremely simple. No jQuery slider or equivalent to implement, so that alone cut down on large amounts of javascript. The trade off is that it basically just doesn’t work in Firefox. Oh well. Since the input field just falls back to a text field, you can technically just type a valid number and it will still function; just no fancy slider.

So, slide away!

Update: I added an input[type=”range”] polyfill, so the range slider does now work in Firefox.

Edge Font Previewer Github Repo

Adobe recently released their Edge Fonts service, which contains over 500 freely available fonts for (unlimited) use, running all on the back of Typekit. If you’re interested in reading more about the situation, see here, here, or here.

The fact that they did this at all is a big leap forward for Adobe, so that’s awesome. BUT, the edgefonts.com site is weak in making it easy for people to browse all of the available fonts. As of writing this, the only place to preview the fonts is at the bottom of Adobe’s Edge Web Fonts page, which is displayed in a very unnatural, select-one-and-hope-it’s-cool kind of way:

A Solution (well, a start)

I wanted a way to browse many fonts at a time (like on typekit.com for instance), so I made a small project out of it and experimented with creating my own Edge Fonts previewer. Yeoman was also recently released, so I used this opportunity to try it out. Below are a list of the tools/frameworks I used:

• Yeoman (and all that comes with it)
• RequireJS
• Lodash (an extension of Underscore.js)
• Backbone.js
• Backbone.Marionette
• Backbone.Paginator
• jQuery
• Sass & Compass

If you’re interested in taking a gander at the code, head on over to the github repo. This is an early release just to get something out the door and I plan to add some more features and refine it overall.

Edge Font Previewer Github Repo

So, to start: Columns. Almost all of my projects end up needing some combination of columns (without the hassle of grid frameworks), and since I’ve been building responsive sites, I needed to create something simple and reusable to solve my responsive column problem so that content would flow nicely from mobile to desktop.

I found that I rarely used anything above 4 columns, so if you need more than that you’ll see a method to the madness below. I’ve based my media query breakpoints on the Frameless grid (mobile, wide mobile, tablet, widescreen) and I keep my column-collapsing relative to the number of columns (i.e., I don’t flow a 3 column layout into 2, but I do flow 4 into 2).

Having variable gutter spacing between projects was always necessary, so simple set columnGutter to whatever spacing size/unit you prefer and have at it.

Below is the Sass syntax, but for those interested in LESS, see this gist for both options.

Sass Syntax

/* Media Queries Assume: 1em = 16px */

/* ================================================= */
/* Helpers
/* ================================================= */
.clearfix{*zoom: 1;&:before,&:after{display:table;content:"";}&:after{clear:both;}}

@mixin box-sizing( $boxmodel ) {
	-webkit-box-sizing: $boxmodel;
	   -moz-box-sizing: $boxmodel;
	    -ms-box-sizing: $boxmodel;
	        box-sizing: $boxmodel;
}

/* ================================================= */
/* Columns
/* ================================================= */
$columnGutter : 20px;

.columns{
	list-style: none;
	margin:0;
	padding:0;
	width:100%;
	@extend .clearfix;

	img,
	input,
	select,
	textarea{
		max-width: 100%;
	}

	& > .column{
		float:left;
		width:100%;
		@include box-sizing(border-box);
	}
	&.two > .column,
	&.col-2 > .column{
		&:nth-child(odd){
			clear: left;
		}
	}
	&.three > .column,
	&.col-3 > .column{
		&:nth-child(3n+1){
			clear: left;
		}
	}
	&.four > .column,
	&.col-4 > .column{
		&:nth-child(4n+1){
			clear: left;
		}
	}
}

/* ================================================= */
/* Mobile layout
/* 240–479 px
/* ================================================= */
@media screen and (min-width: 15em) { /** 16px * 15 = 240px **/
	.columns{
		& > .column{
			margin-bottom: $columnGutter;
		}
	}
}

/* ================================================= */
/* Wide mobile layout
/* 480-599 px
/* ================================================= */
@media screen and (min-width: 30em) { /** 16px * 30 = 480px **/ }

/* ================================================= */
/* Tablet layout
/* 600-959 px
/* ================================================= */
@media screen and (min-width: 37.5em) { /** 16px * 37.5 = 600px **/
	.columns{
		& > .column{
			margin-bottom: $columnGutter * 1.5;
		}
		&.two > .column,
		&.col-2 > .column,
		&.four > .column,
		&.col-4 > .column{
			padding-left: 0;
			padding-right: $columnGutter * (1/2);
			width: 50%;

			&:nth-child(even){
				padding-left: $columnGutter * (1/2);
				padding-right: 0;
			}
		}
	}
}

/* ================================================= */
/* Widescreen layout
/* 960-1079 px
/* ================================================= */
@media screen and (min-width: 60em ) { /** 16px * 60 = 960px **/
	.columns{
		&.three > .column,
		&.col-3 > .column{
			padding-left: $columnGutter * (2/3);
			width: 33.3333333333333%;

			&:first-child,
			&:nth-child(3n+1){
				padding-left: 0;
				padding-right: $columnGutter * (2/3);
			}
			&:nth-child(3n+2){
				padding-left: $columnGutter * (1/3);
				padding-right: $columnGutter * (1/3);
			}
		}

		&.four > .column,
		&.col-4 > .column{
			padding-left: $columnGutter * (3/4);
			width: 25%;

			&:first-child,
			&:nth-child(4n+1){
				padding-left: 0;
				padding-right: $columnGutter * (3/4);
			}
			&:nth-child(4n+2){
				padding-left: $columnGutter * (1/4);
				padding-right: $columnGutter * (2/4);
			}
			&:nth-child(4n+3){
				padding-left: $columnGutter * (2/4);
				padding-right: $columnGutter * (1/4);
			}
		}
	}
}

A nice simple video that explains what you should and shouldn’t do to avoid a hangover. Eat fatty food and carbs. Take Advil before you go to bed (not Tylenol). Eat eggs and bananas, and drink juice in the morning. Check.

The one annoyance I’ve been facing recently is the way the @arguments variable is concatenated with spaces as opposed to commas. This may make sense for most mixins, but there are a few CSS properties where concatenating all of the given arguments with commas makes much more sense, as there can be multiple values for each property—box-shadow and text-shadow for instance. Take a look at this Gist comment for an example of what happens.

There’s a relatively simple fix of just string escaping your declaration:

.box-shadow(~"1px 1px 2px rgba(0,0,0,0.5), inset -1px -1px 0 rgba(255,255,255,0.5)");

However, the nitpicky problem I have with that is: I either have to manually write out my color value or create multiple scoped variables and interpolate them into the string (e.g., ~"@{color1}"). What I prefer to do is this:

.box-shadow(1px 1px 2px fadeout(@black, 50%), inset -1px -1px 0 fadeout(@white, 50%));

This keeps things easier to read, especially if I were to use a more complex color, and makes less work for me as I don’t have to think about writing out the rgba() format.

The example above is what I wanted, so I found a nice little regex that I plopped into a few of my mixins that makes this happen exactly as I needed:

.box-shadow(@shadow, ...) {
  @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
  -webkit-box-shadow: @props;
     -moz-box-shadow: @props;
          box-shadow: @props;
}

What this does is uses javascript to interpolate the arguments variable and wipes out all brackets, leaving only the commas. To demonstrate more visually, it’s doing this:

"[1,2,3]".replace(/[\[\]]/g, ''); // returns: "1,2,3"

In the end, I understand why it was decided to concat @arguments with spaces instead of commas, part of me just wishes there was a less-hacky way to specify the concatenation options either on a global or scoped level.

Update: 05/16/2012

I just realized when only passing one argument to the mixin (e.g., .box-shadow(1px 1px 2px fadeout(@black, 50%))), LESS builds the arguments variable using space-delimitation in the parameter block instead of commas, so the output looks like this:

box-shadow: 1px, 1px, 2px, rgba(0,0,0,0.5)

So, obviously that doesn’t work. Lame. In the interim I just have two mixins: one for a single property value, and one for multiple values:

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}
.multi-box-shadow(...) {
  @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
  -webkit-box-shadow: @props;
     -moz-box-shadow: @props;
          box-shadow: @props;
}

Update 5/31/12: The Solution!

Commenter Vicente created an interesting solution by supplying two arguments (followed by the ellipses), with the second argument having a default value so the @arguments array will always be interpreted correctly:

.box-shadow(@shadowA,@shadowB:transparent 0 0 0, ...) {
    @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
    -moz-box-shadow:@props;
    -o-box-shadow:@props;
    -webkit-box-shadow:@props;
    box-shadow:@props;
}

The problem I had with this implementation was the mixin creating unnecessary code when passing only one shadow. The output would end up looking like this (shortened for brevity):

box-shadow: 1px, 1px, 2px, rgba(0,0,0,0.5), transparent 0 0 0;

In the end it’s a good idea, so I took it one step further to prevent generating any unnecessary code, finally solving my dilemma with these CSS properties: I used an “X” as the default for the second variable and added a little extra to my regex, which will filter out the X (and trailing comma) from the stringified array:

.box-shadow(@shadowA, @shadowB:X, ...){
    @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-box-shadow: @props;
       -moz-box-shadow: @props;
         -o-box-shadow: @props;
            box-shadow: @props;
}

At last, you can finally add an infinite numbers of box shadows (or any other complex comma separated properties for that matter) via mixins!

Note: 06/25/13, This solution is no longer needed.

As commenter Matthew points out, as of the 1.3.2 release, this solution is no longer needed. LESS now has built-in support for comma-separated values, via semicolon (;) delimiters. An example is below:

.box-shadow(1px 1px 2px fadeout(@black, 50%); inset -1px -1px 0 fadeout(@white, 50%));

This currently only works when using post thumbnails, so it won’t work for inline images in posts, but maybe I’ll get to that later. For now, here’s the small filter I created to convert post thumbnails into <picture> elements:

/**
* Replace normal <img> tag with custom <picture> polyfill element for responsive images
*
* @uses wp_get_attachment_image_src
*/
function post_thumbnail_picturefill( $html, $post_id, $post_thumbnail_id, $size, $attr ){

    $alt = preg_match('/alt="(.*)"/', $html, $matches);
    $picture_fill_html = '<picture alt="'. $matches[1] .'">';

    $small = wp_get_attachment_image_src( $post_thumbnail_id, 'thumbnail' );
    $picture_fill_html .= '<!-- <source src="' . $small[0] . '"> -->';
    $picture_fill_html .= '<source src="' . $small[0] . '">';

    $normal = wp_get_attachment_image_src( $post_thumbnail_id, $size );
    $picture_fill_html .= '<!-- <source src="' . $normal[0] . '" media="(min-width:480px)"> -->';
    $picture_fill_html .= '<source src="' . $normal[0] . '" media="(min-width:480px)">';

    $large = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
    $picture_fill_html .= '<!-- <source src="' . $large[0] . '" media="(-webkit-min-device-pixel-ratio:2 and min-width:480px)"> -->';
    $picture_fill_html .= '<source src="' . $large[0] . '" media="(-webkit-min-device-pixel-ratio:2 and min-width:480px)">';

    $picture_fill_html .= '<noscript>' . $html . '</noscript>';
    $picture_fill_html .= '</picture>';

    return $picture_fill_html;
}

add_filter( 'post_thumbnail_html', 'post_thumbnail_picturefill', 10, 5 );

What’s happening here is rather simple: the ‘thumbnail’ size I’ve configured in WordPress is served as the default (no media query), thus the smallest image. Any screen 480px wide and above is served whatever the requested thumbnail size was, followed by loading the WordPress configured ‘large’ image for retina displays. You can read more about how the picturefill.js script works on the Github page, but the noscript tag will serve as a fallback and thus I’m just sending whatever image was going to be printed in the first place.

This could be extended with better support by adding some more specific image sizes in WordPress that could added here for various breakpoints. I kept it simple here by just providing three options: A small version (the thumbnail), the intended size (whatever the requested thumbnail size was), and a large version (for retina displays).

April and I bought a ModKat back in January. Soon after, I gave in and we adopted a cat. Okay, not really—she convinced me to adopt the cat first. But anyway, after 2+ months of use and answering questions from friends, here are my thoughts:

Design

This was one of the primary reasons we bought the ModKat, because let’s face it—it’s an expensive litter box. We live in a relatively small apartment, so if we were gonna clutter things up, it had to be in style. Upon first opening, we were slightly intimidated by its physical size—we knew it was gonna be bigger, but when you’re switching from a “normal” box, it’s a big upgrade. Mostly because of its height. After about 30 seconds though, the feeling goes away.

The design itself is pretty ingenious. The scooper can be hooked on either side of the hinge to fit in any space you have while keeping the design as clean and minimal as possible. Next is the reusable liner, which is smart because, well.. That just makes sense. The bin itself comes in some sweet (and bright) colors, so it quickly becomes a piece of decor instead of an eyesore.

Function

Simply put, the thing works. The lid is by far the best feature; we went from sweeping the floor of litter almost daily to nearly no mess at all. Every time the cat jumps out of the box, it’s inevitable that he lands on the lid first, filtering the litter from his paws. It also helps that cats can’t kick litter out of the box.

Sidebar—We once found a pile of litter outside of the old litter box because the damn cat (somehow?) MISSED THE ENTIRE LITTER BOX. But at least he had the decency to cover it up..

We got the ModKat when our cat was only 4 months old, so there was literally no break in period—he jumped right in and went about his business.

Overall, I love it. Yeah, it’s expensive, but maintenance is easy and it eases the pain of knowing there’s a bunch of cat poop in your house.

The Situation

When I output a nested relationship object with to_json , I have one association where Rails will output a blank object instead of just an empty array. However, if I output the same thing in the Rails console, it’s an empty array.

For example: I have a job object, which can have many changes associated with it. So, in a shortened version of my code I have this:

window.job = <% @job.to_json( :include => {
    :changes => {
        :include => [:user]
    }
} ).html_safe %>

The Result

What this will do is output my Job JSON object, but instead of job.changes >> [], it will be: job.changes >> [{attr_1: null, attr_2: null, attr_3: null}]. Even if I just try to say <%= @job.changes %> it will output:

[#<Change id: nil, job_id: 47, description: "", completed: false, round: nil, completed_by: nil, user_id: nil, created_at: nil, updated_at: nil>]

What’s even more confusing is that even when there are changes, Rails will output an array of those changes with an empty change object in the array.

The weirder part is when I try to duplicate it in the Rails Console, it doesn’t happen:

$ > @job = Job.find(47)
  Job Load (0.5ms)  SELECT `jobs`.* FROM `jobs` WHERE `jobs`.`id` = 47 ORDER BY jobs.created_at DESC LIMIT 1
 => #
$ > @job.changes
Creating scope :page. Overwriting existing method Change.page.
  Change Load (0.3ms)  SELECT `changes`.* FROM `changes` WHERE `changes`.`job_id` = 47 ORDER BY changes.created_at ASC
 => []
$ > @job.changes
 => "[]"

I’m not sure if I’m doing something wrong or if this is a bug in Rails 3.1.3. It doesn’t seem to happen with any of my other associations. Has anyone else run across this at all?