iEARN Tech Office

This fall, we did some cleaning, organizing, and re-shuffling of the iEARN-USA office in Manhattan. It ended up making sense for the tech team to move into its own corner of the office, so I got a chance buy some furniture and craft up a new space for us.

I’m trying to be better about posting more, so here’s a photo from my iPhone because waiting until I bring my DSLR into the office will mean I’ll never post this. It’s nothing magazine worthy, but it makes me a bit more proud to come in and work here every day.

iEARN Tech Office

And now the linkroll – in the photo you can see posters from Ugmonk and United Pixelworkers, a coffee mug from Art Center, a tote from Circles Conf, my beloved chotskies from MailChimp and the Brooklyn Cyclones, and these desks my co-worker picked out for us from BlueLounge.

P.S. If you want to come work with us, we have openings for a full-time Tech Coordinator and a Tech Intern.

→ Professional Homepage

My wife is a medical student and applying for a pediatric residency this year. As a huge proponent of the indie web, I just had to set her up with a simple little webpage of her own on her own domain. This is what we came up with.

→ Heroes Often Go a Lifetime with No Recognition

Tyler Braun:

When I meet with someone for the first time over coffee one of my common questions is to ask what the person would like to accomplish in the next 5 years . . . Amazingly, no one has ever answered by saying, “I’d like to do something hard that no one will know about.”

Gulp. That was convicting. Time to get back to work.

→ Some Will Seek Forgiveness, Others Escape

Beautiful raw video by Nervous Energies of Aaron Gillespie playing “Some Will Seek Forgiveness, Others Escape” acoustic.

There’s a lot of songs / artwork / films that have moved me, but only a handful I can sincerely say have pulled me through a time in my life.

This song is one of them.

→ Front-end Performance

In addition to soaking up as much knowledge as I can about CSS architecture, I’ve spent a ton of time recently learning more about front-end performance.

Harry Roberts excellently rounds up and explains here in detail a lot of the strategies I’ve picked up over the last few months, plus a few more. He covers markup structure, parallelisation, prefetching, gzipping and minifying, among other things.

Definitely a must read for anyone diving into this topic.

→ CSS Architecture

One of the things I love most about the work I do is that I’m constantly learning.

As I work on web applications long-term more and more and my role shifts from being a “designer who can develop” to a “front-end developer with a background in design”, writing better CSS is constantly on the front of my mind.

And by better, I mean CSS that scales across an application more easily and presents content more beautifully on more devices, both past, present and future.

I’ve been soaking up as much knowledge as I can. There’s been a lot written about this subject lately, but Jonathan Snook’s book and Harry Roberts’ article Code smells in CSS have stuck out as being especially helpful to me.

My First JavaScript Plugins

This fall I released my first two JavaScript plugins on GitHub. They’re both rather simple, but I find them really helpful in my work and my hope is others will too.

Responsive Table Headers

My usual way of handling tables for narrow viewports in responsive layouts is to convert the cells into block elements. This is very easy to do with CSS and I find the table usually remains very readable, except when the table has a header.

Instead of being on top, the header cells now need to be repeated multiple times inline next to each of their respective body cells.

Responsive Table Headers is a jQuery plugin that automate this DOM manipulation on the browser side and keeps the markup cleaner and more semantic.

Check out the code, docs and demo at the GitHub repo.

Format SymbolSet Stars

I pre-ordered Symbolset as soon as I saw it. The idea to make a semantic symbol font for the web using OpenType ligatures was brilliant.

I quickly found myself using their star symbol in ratings systems. With Sybmolset, you literally put the word “star” in your markup when you want to show a star. For ratings, i would rather output the more semantic and backwards compatible “4 stars” for a rating instead of repeating the word star multiple times.

Format Symbolset Stars is a JavaScript plugin that automates this DOM manipulation on the browser side and keeps the markup cleaner and more semantic. If you have Modernizr installed, it checks for support of @font-face before making the manipulation.

Check out the code, docs and demo at the GitHub repo.

→ America's Finest Timelapse

I grew up in a pretty rad city…