• Nu:Tone – Words and Pictures
• Little Dragon – Ritual Union
• SBTRKT – SBTRKT
• Holy Ghost! – Holy Ghost!
• Justice – Audio. Video. Disco.
• Magnetic Man – Magnetic Man
• Kraak & Smaak – Electric Hustle
• Thievery Corporation – Culture of Fear
• Dirty Art Club – Heavy Starch
• Maximum Balloon – Maximum Balloon

Favorite Mixes of 2011:

I collect a lot of mixes from various artists & djs. They keep me moving all day long! Here are my favorites from 2011:

SBTRKT Essential Mix

One of my favorite shows last year, SBTRKT came out of nowhere and became one of my favorite artists. I fell in love with this mix the second I heard it.

Afrolicious 3-Year Mixtape

I had this one on repeat for months. It’s spicy and funky!

Disco Science (Om:cast 025)

I love Om Records! This disco mix by J Boogie makes me feel good, plain and simple.

Boy 8-Bit – May 2011 Mix

Like Ramadanman, Boy 8-Bit knows all the right beats to get me moving. Toe tapping, bouncy Marcy can’t hold still when this mix is playing.

Fool’s Gold Radio – August 2011 Mix

A friend turned me on to A-Trak…now one of my absolute most favoritest djs! Can’t wait to see this guy play out somewhere.

Track listing:

1. Stargazer Thievery Corporation
2. Please Turn – Little Dragon
3. Baby – Spank Rock
4. Don’t Play No Game That I Can’t Win Beastie Boys feat. Santigold
5. No Freedom – J. Boogie’s Dubtronic Science feat. Afrolicious & MC Zulu
6. Hold On – Holy Ghost!
7. Built for Love – Kraak & Smaak
8. Lotus Flower (SBTRKT Remix) – Radiohead
9. Battle for Middle You – Julio Bashmore
10. Embody – SebastiAn
11. Civilization – Justice
12. Stratosphere – Digitalism
13. Midnight City – M83
14. Katy on a Mission – Katy B
15. Look at Stars (Machinedrum Remix) – SBTRKT
16. Walking Away (Original Mix) – Blue Motion & Grimm feat. Remo
17. Scale it Back – DJ Shadow & Little Dragon

Have a listen on my opentape playlist!

I decided to query the Flickr API and make a location & time-based photo clock. I teamed up with Nick Thiel, former POP Art Director; we brainstormed a bit about how the idea might look, focusing on functional design communication. Nick’s design works very well, informing the user of both function of the clock and the relationship of the images.

In just under a week, I coded the Javascript clock logic and layout markup, incorporated the Flickr API via JSON-P and used @font-face for the first time (so easy & quick to render!). I also got nitty-gritty with jQuery optimization & the prototype design pattern and lastly, I added a city-picker that allows users to choose slideshow destinations. There are so many amazing Flickr photos, I keep checking up on all the cities and trying out new ones. I’d say it was a productive week!

VIEW POP_Clock

Here is the track-listing:

1. Just Begun (feat. Jay Electronica, J. Cole & Mos Def) – Talib Kweli & Hi-Tek
2. Now or Never – The Roots, Phonte & Dice Raw
3. I Need a Dollar – Aloe Blacc
4. Plastic Beach (feat. Mick Jones & Paul Simon) – Gorillaz
5. K+D+B – The Chemical Brothers
6. Codename: Rondo – Ghostland Observatory
7. One Touch – LCD Soundsystem
8. It’s Time Tonight – Orgone
9. Giant – Vampire Weekend
10. The Ghost Inside – Broken Bells
11. Not Like Any Other Feeling – The Thermals
12. Lovesick (Once Again) – The Hundred in the Hands
13. Lights (Komatic Remix) – Technicolour
14. New Day Come (The Nextmen Remix) – New Zealand Shapeshifter
15. Raver’s Spesh – Rusko
16. Atlas Air – Massive Attack
17. Eyesdown (feat. Andreya Triana) – Bonobo

Have a listen on my opentape playlist!

One of the keys to improving screen reader user experience: users shouldn’t be forced to listen to ALL of the content on the page when it is being hidden from sighted users (think Javascript accordion). Here’s how to really hide content from screen readers:

<style type="text/css">
.reallyHidden {
      display:none;
      visibility:hidden;
}
</style>

Not to be confused with offscreen positioning, which is still read aloud to screen readers. This method is used to provide context for background images (like graphic headlines and logos) and to hide access menus from sighted users:

<style type="text/css">
.offscreen {
      position:absolute;
      left:-50000px;
}
</style>

The other thing I’ve spent a lot of time on is making custom JavaScript widgets keyboard & screen reader accessible (tab switchers, accordions, etc.). Because these widgets present new content on interaction, we have to alert screen reader users to that new content and make it clear what’s going on.

There are three parts to this accessibility requirement:

1. Updating links after triggering action to indicate what they will do: Expand vs. Minimize
2. If links are kept short for visual reasons (i.e. Expand >), add offscreen text to provide context:

   <a href="#" id="trigger">
         <span class='tip'>Expand</span>
         <span class="offscreen">content section</span>
   </a>

3. If new content appears on screen, send focus there dynamically so screen reader users know it has been added. Be aware this takes focus away from the link, but this only really affects keyboard users.

   
   $('a#trigger').click(function(e){
        // span.tip needs logic for toggle, this only goes one way
        $(this).find('span.tip').text('Minimize');
        $('#newContent').focus();
   });

My goals were to:

• Learn enough native JS to complete an entry(!)
• Use canvas
• Keep usability in mind since it tends to go out the window when shaving off bytes: cursors, tip text, etc.

To see what I ended up with (as well as a super fancy jQuery version that was my starting point), you can play with a demo here.

What is JS1k, you ask? From the source: “the object of this competition is to create a cool JavaScript “application” no larger than 1k. Starting out as a joke, the first version ended with a serious amount of submissions, prizes and quality.”

View my uncompressed JS1k entry

<script type="text/javascript">
	var c = document.getElementsByTagName('canvas')[0];
	var b = document.body;
	var a = c.getContext('2d');
	</script>
	<script type="text/javascript">
	d=document;

	h=d.createElement('h1');
	h.innerHTML='Draw.';
	b.insertBefore(h, c);

	// context abbreviation loop
	for($ in a){
		a[$[0]+($[6]||$[2])]=a[$];
	}

	// commonly used integers
	x=150;
	y=120;

	c.width=c.height=x*2;
	k='background:#';
	z=c.style;
	z.cssText=k+"416012";

	// pen color array
	A=['000','0e943a','C0C0C0','C5B358'];
	co = '#'+A[0];

	//create color squares
	for(i=0;i<4;i++){
	  sqr(A[i]);
	}
	// not overlapping circle
	oLp = 0;
	// not drawing
	drw = 0;

	onmousemove=function(e){

		// get mouse/canvas properties
		gTs(e,c)

		// mouse intersects circle
		if(dI(eX-oL, eY-oT)){

			z.cursor='crosshair';
			oLp = 1;
			// if the mouse is down, leave a mark
			if (drw == 1) {
			with(a){
	                ln(eX-oL, eY-oT); // lineTo
	                strokeStyle = co;
	                sr() // stroke
	            }
            }
		}
		// mouse off circle
		else {
			z.cursor='default';
			oLp = 0;
			drw = 0
		}
	};
    onmouseup=function(){ drw = 0}
    onmousedown=function(e){
    	// if overlapping
		if(oLp) {
			gTs(e,e.target)
			drw = 1;
			with(a){
				ba(); // beginPath
				lineWidth=3;
				mv(eX-oL, eY-oT) // moveTo
			}
        }
	}
	// get target values
	function gTs(e,t){
		eX=e.pageX;
		eY=e.pageY;
		oL=t.offsetLeft;
		oT=t.offsetTop;
	}
	// create square: k='background:#', v=color from array
	function sqr(v){
		n=d.createElement('a');
		n.id=v;
		n.style.cssText=k + v +';cursor:pointer;height:15px;float:left;margin:0 8px 0 0;width:15px';
		n.onclick=function(e){co='#'+e.target.id}
		b.appendChild(n)
	}
	// does intersect: a=pageX, b=pageY, x=circleX/circleY, y=circleRadius
	function dI(a,b) {
	    f = a-x;
	    g = b-x;
	    return f*f+g*g <= y*y
	}
	// create sphere
	with(a){
		g=cR(x,y,0,x,y,200); // createRadialGradient
		g.addColorStop(0,'#f00');
		g.addColorStop(1,'#600');
		ba(); // beginPath
		fillStyle=g;
		ac(x, x, y, 0, Math.PI*2,false); // arc
		ca(); // closePath
		fl() // fill
	}
	</script> 

Wally is a great runner, snuggler, explorer and a happy, goofy dog. He came from the Jefferson County Dog Shelter in Madras, Oregon and has amazing “off-roading” capabilities. I hope everyone in the world can experience animals as amazing as this guy!

I love that I’ve gotten to use Zend Framework on a few projects recently. While I do work with other platforms at POP, PHP frameworks are my favorite; configuration and syntax are very intuitive, as a Javascript and Flash developer; my own curiosity brings success with code. I’m excited to learn other frameworks, too — for now I’m simply loving the hands-on experience with Object-Oriented PHP and the MVC pattern.

Some of the challenges & successes of my recent Zend projects:

• Two modules: default and mobile
• Twitter feed caching for page performance & API request limits
• Custom view helpers for outputting content
• Use of the BundleScript Helper
• Custom routes for a specific URL structure
• Use of built-in head script and style helpers for clean layout templates

I’m excited to learn more about Zend and other frameworks; the best part of being a web developer is expanding my skill-set. I love challenges, so having them built-in to my job make it super satisfying!

I partook in the non-courier race and finished last of the people who actually completed it (a few dropped out) — but since I was the only woman, I won by default. Kind of embarrassing, but a win’s a win!

12►

View the gallery:

12►

I was responsible for art direction, interface design and development. Because other firms were creating print and online ads, I also created a downloadable brand guide for vendors in order to promote a consistent identity.

See how the design evolved:

Some successes of the project included successful brand communication and a sophisticated user-interface for the RV industry. Most importantly, it provided a robust website during the recent economic crisis, which hit RV dealers particularly hard; online deals helped the company to stay competitive.

Most recently, I handed off full-time production on the site to Copper Cup Images in Oklahoma. It’s great to see fresh life breathed into the project, including a timely social media campaign. It’s important for businesses to increase their exposure and connect with their audiences, and Sutton RV is doing it right.

Because I was sourcing a single Twitter page that is updated once or twice a day, I determined that using PHP to parse the feed would suffice. If I were pulling in a trending topic that had a way higher frequency of updates (like every few seconds), I would use an AJAX feed instead. But for this particular instance, PHP got the job done quite easily.

With portability & reusability in mind (the main objectives of object-oriented code), I wrote a custom PHP class that generates a Twitter feed in an unordered list. To use the class, you just have to include the file somewhere in your PHP page and create a new TwitterFeed object, passing in the Twitter username and number of posts you would like to show.

<?php
class TwitterFeed {

function __construct($username, $limit){

    // generates feed url from $username and $limit 
    $feed = 'http://twitter.com/statuses/user_timeline.rss?screen_name='.$username  »
    .'&count='.$limit;

    // check if file is accessible, to prevent errors in output
    if (! ($handle = @fopen($feed, "r")) ) {
        die("<p>There was a problem fetching data. Please check back later.</p>");
    }
    else {
    // use SimpleXML to parse feed
    $file = file_get_contents($feed);
    $tweets = new SimpleXMLElement($file);

    echo "<ul id=\"twit-twit\">\n";

    // create array for XML elements I want to skip in my foreach loop
    $skip = array('title','link','atom','description','language','ttl');

    foreach($tweets->channel->children() as $item){
	// skips the first few elements in "channel" (title was being stubborn, so I added more logic)
	if(array_search((string)$item->getName(), $skip) == FALSE && (string)$item->getName() !== 'title'){

	    // remove username from post descriptions
	    $description = str_replace($username.": ", "", $item->description);
	    // make links with http: active in descriptions
	    $description = preg_replace("/(http:\/\/|(www\.))(([^\s<]{4,68})[^\s<]*)/", "<a href=\"http://$2$3\"  »
	    target=\"_blank\">$1$2$4</a>", $description);
	    // make links with @ active in descriptions
	    $description = preg_replace("/@(\w+)/", "<a href=\"http://www.twitter.com/\\1\"  »
	    target=\"_blank\">@\\1</a>", $description);

	    // format date - convert to Unix timestamp, then reformat as desired
	    $pubDate = strtotime($item->pubDate);
	    $date = date('g:i a m-d-y', $pubDate);
	    $url = $item->guid;

	    // print descriptions with active links and date linked to post on Twitter
	    echo "<li>".$description." | <a href=\"".$url."\" target=\"_blank\">".$date."</a></li>\n";
	}
    }
    echo "</ul>\n";
    }
}
}
?>
» denotes break in code for viewing purposes

To get your Twitter feed into action on a PHP page, create a new TwitterFeed object (make sure you’ve included the class somewhere and you’re using PHP 5):

<p>Twitter Feed<p>
<?php $twitterfeed = new TwitterFeed('MyTwitterUsername', 5); ?>