Staticpulse

home of nano anderson



Remarks apropos of your humble narrator

Where I am: I’m an iOS Engineer at Yahoo! I help them develop apps for the iPad and iPhone without using too much memory.

Where I’m from: Born in Boston in 1986 (I hear the Celtics were good that year. Red Sox too… until a few things happened near the end). “Formative” years spent in New Jersey (high school in Manasquan & a B.S. in Information Technology from Rutgers); late 2008 saw me going international. First London (a Masters in International Relations from Hult), then Poland (assisting my partner with her PhD in the Słupsk area), followed by Venezuela (starting my business in Porlamar on the island of Margarita. Yes, it’s as tropical as it sounds).

I ended up moving to Brooklyn, NY (not the part that all the other designers and hipsters live in), and I’m here for the long haul. If you’re in the area or want to talk web stuff, .


My work as a web builder


Yahoo Screen (iPhone & iPad) — Programming | 2013

I turned down a senior level engineer position at Stamped in March of 2012. Seven months later, they were acquired by Yahoo.

Fast forward one year to March of 2013, and the friend who recruited me at Stamped decided to try again. And this time, I made the right choice. At Yahoo, his team was working on a brand new mobile video project, and I was lucky enough to be the first engineer on the team.

Over the next six months, the team in New York’s brand new mobile product office designed, engineered, tested, and even struck a few high-profile deals. Things moved at a breakneck pace, but it was one of the most exhilarating and informative product sprints I’ve been a part of.

On a team of 5 front-end engineers, 2 back-end engineers, and 3 designers, I was definitely in brilliant company. My contributions encompassed developing functional prototypes, architecting the caching layer, and pushing for the use of Auto Layout (the damn thing is still hell to debug, but I love it to death). Once the team grew and the app started to coalesce, my role became much more generalized, fixing bugs and adding features across all areas of the app. You can download the app here.

New York Magazine (iPad) — Programming | 2012/2013

Ask and you shall receive.

While I didn’t immediately get put on iOS development at New York Magazine when I started there, after we launched The Cut, I was given the opportunity to work on a marquee project: the New York Magazine iPad App.

The project was designed and engineered collaboratively with the New York Magazine digital and editorial teams as well as The Wonderfactory, a group with years of experience in designing and developing digital magazines.

As the only iOS developer working from New York Magazine office, I was essentially a remote developer assisting The Wonderfactory, who were managing the project. I acted as the liason between their project, development, and design teams, and our own editorial and digital design teams to make sure the magazine matched New York Magazine’s vision for a dual daily+weekly magazine experience. As we neared the end of the project, I had to put on my QA Engineering hat while helping determine the protocol for a brand new API that could serve content to both this app as well as any future apps built by the team at NYMag. You can download the app here.

The Cut (web) — Programming | 2011/2012

When I started at New York Magazine (summer 2011) I thought I was going to get put on an iOS app. I didn’t expect to become the third developer on a team that nobody really knew about at the company. Welcome to «fashionteam».

Fashionteam was tasked with turning a fashion blog and photo site into a full-fledged fashion destination. Big, beautiful, smart work day in, day out. You can read more about what it meant for the the company in a blog post from the Editorial Director for the Cut.

What it meant for the technology was pretty epic. The NYMag and Vulture teams had recently moved all of the blogs over to a new CMS. Fashionteam had to make that CMS do backflips and summersaults in order to get it in shape for a launch 1 year later. We were hitting all the buzzwords, especially the “r”s, responsive and retina. A year after Ethan Marcotte published his Responsive Web Design article at A List Apart, bigger websites were starting to catch on, but none (not even the monster launch of bostonglobe.com had the design ambitions that we had for "the new Cut", as we lovingly referred to it. We wanted to blow minds with this project.

This was the most “teamy” team effort I’d ever teamed up on, so I cannot take the usual credits. I will say that my hands were most deeply soiled while working on responsive, full-browser-screen slideshows, building brand new tools for editors to create runway show pages and tag our insanely-huge image repository, and getting our Javascript and LESS/CSS frameworks off the ground (though those latter have been vastly improved by my teammates on fashionteam). 100% responsive and retina-capable. The Javascript framework was custom built by us, leveraging jQuery mostly for its selector powers, but also for fall-back animation techniques where CSS3 wasn’t available. The back-end was handled by our expert Java developers, with some process-improving changes by front-end (going from static to AJAX, implementing a common design language using Twitter Bootstrap).

A Man Like Me in a Place Like This (web) — Programming | 2011

This one’s a doozy.

Introduced by a mutual friend as someone who was looking to redesign their portfolio page, Tristan Smith told me from the get go that he was looking for something much more interesting than just a portfolio. He had one of those already (click on his name!) — he wanted something that people would talk about.

His idea is harder to explain than to simply show, so I encourage you to click through to A Man Like Me in a Place Like This to see for yourself what he wanted the world to see.

OK, if you decided to read ahead instead of clicking through, here's the gist of it: Tristan has Google Latitude set up on his phone, which sends his location to their servers every minute or so. He authorized my server to see that location, which I feed into a gigantic screen-filling Google Streetview scene serving as the background to his text-only micro-site. It gives you his exact coordinates, updating automatically, and it lets you pan around his location to see what he’s seeing (from the perspective of the Streetview car, of course).

I programmed the front-end in HTML, CSS, and Javascript (jQuery). The back-end originally used the Foursquare API to track Tristan’s check-ins and map them to Google Streetview coordinates, but when Tristan suggested using Latitude (implemented using PHP/AJAX) to do it in real time, without check-ins, I flinched, cringed, and then wept with joy at the thought. How many people in the world can you follow the exact path of, 24/7? With Tristan’s new site, you can add 1 to the count.

Silent Shout (iPhone) — Programming | 2011

Before Elf Pond, my friend Anthony and I embarked on our first joint project: an iPhone app that you could use to talk to people in places where two people standing next to each other could not be heard. Concerts, loud bars… classrooms? No, we do not condone chatting during class!

The fruit of our labor is Silent Shout, which has a novel option-choosing screen and intuitive transitions between the three stages of “shouting” — 1) Choose display options (saved for the next time you open the app), 2) enter your text, & 3) rotate your phone to shout (or click iphone_keyboard_done, of course).

I programmed the app in Objective-C. The design came from Anthony Cafaro. I set up version control systems for both the code and the graphic assets, so that every iteration of asset was automatically built and optimized with the app whenever Anthony checked an image into the system.
During the process of designing the UI, we ran into a problem where some of our friends who were testing the app didn’t really understand the “presentation” option (we also didn’t know what to call it ourselves: “sizing”? “display style”?). The options given were only truly understood once they started using the app, and that was way too long for our tastes. The next-best thing to actually using the app to understand the option was to show a video of the option in action. Our solution: animate the options in-place. Anthony did some after-effects wizardry, and I managed some Objective-C UIView subclassing wizardry to create a reusable animated option display, visible on the main screen of the app.

Elf Pond (web) — Programming | 2011

One of my most memorable experiences from my time in New Brunswick was a show my friends and I put on in our basement one cold night in November, 2005. Actually, another friend of ours made the show a possibility, but we made the best of it. We made our famous “Abdab Chili,” stocked the fridge with soda and beer, and hinted to as many people as we could that this was a show they would not want to miss.

You see, this was a secret show. By a band dear to our hearts, and to the hearts of many others. This band hadn’t played a show in years. They had broken up. And now they wanted to play a reunion show. But first, they had to test things out, see if they were up to the challenge.

They were, and the show was forever etched into the collective memories of those who attended. But those who missed this once-in-a-lifetime opportunity felt left out. So my good friend Anthony Cafaro came up with an idea: a website where anybody could come a bit closer to (re)living the experience.

I programmed this entire site using HTML, CSS, and Javascript (jQuery). The entire design was conceptualized by Anthony Cafaro, a brilliant designer I had the extraordinary luck of becoming friends with. He handed me a design and an accompanying styleguide (the first photo in the gallery to your left) and I ran with it. Even if you aren’t a Penfold fan, this site will suck you in to the experience thanks to Anthony’s amazing graphic design and video treatments, and maybe a little bit of my “programming magic” as Anthony likes to call it.
One programming hurdle we had to overcome was a horrible page-scrolling slowdown when either of the videos was visible on the page. At one point during the process, the whole page was a beast to scroll. Eventually, I figured out that it was CSS box-shadow rendering causing the slowdowns. The shadows were big and used rgba to decrease their opacity. Luckily, Anthony & I are proponents of grid layout techniques when applicable, and this layout was built from the ground up with both horizontal and vertical rhythm in mind. Our "just use a pencil" solution was simple: using our grid for laser-accurate placement, we just slapped a shadow background image behind each of the videos!

Teacher Hub (web) — Programming & Design | 2010 – present

In early 2010, I was approached by a dear friend with a proposal. His wife, a newly minted New Jersey Public School teacher, found herself a predicament which would manifest itself within the next few months. All of her classroom purchases were now obsolete, as she had been reassigned for the following school year. In addition, she was looking for services that would introduce her to other teachers and their ideas about classroom arrangement, lesson plans, and teaching concepts for the grade she was reassigned to.

While there are myriad teacher sites/portals/forums/shops out there, none of them had any sense of design, proportion, or information architecture (see: a-to-z teacher stuff, teachers.net, sprout classrooms…). So we decided to make our own Teacher Hub, a place for teachers to buy and sell their wares, share ideas, sell their services as consultants, and anything else they want to do (in an easy-to-understand interface, to boot!).

I designed & programmed this entire site using Ruby on Rails 3, MySQL, HTML, CSS, Javascript (jQuery), and inspiration-drawing. Feel free to view the acknowledgements section of Teacher Hub to find out where I drew inspiration from.
I also manage all hosting (VPS @ Media Temple) for Teacher Hub. The site is hosted using Apache with Phusion Passenger as the Ruby on Rails module. All deployments are managed by custom Capistrano recipes which pull from our private Subversion server and send update information to our Basecamp project for historical reference. Although ORM (ActiveRecord) makes database work much easier, my knowledge of administering and querying MySQL was crucial in getting the project developed quickly.

NetEvents TV (web) — Programming, Server Management | 2009 – present

While studying in London, I was introduced to the CEO of NetEvents Int’l. He had recently launched a venture to capture the essence of the many events he curates each year, encompassing the latest networking technologies and concepts put forward by some of the brightest minds in these times.

This venture is NetEvents TV, where you can watch videos of interviews with network technology firm executives, engineers, & directors as well as live coverage of the events NetEvents puts on throughout the year and the occasional documentary (such as this history of ethernet narrated by its creator, Bob Metcalfe).

I manage this site by coding in C#, building new ASP.NET admin/CMS systems for a formerly completely-SQL-controlled (MSSQL) site with no administration site. I also encode video as well as embed multi-language captions in both embedded FLV files (using Captionate) as well as the W3C timed text XML format.

Fairgift Ltd. (web) — Programming | 2009 – 2013

While working at a previous agency, I was assigned to this site as a “maintainer.” I was soon informed that my duties included not only maintaining the site, but fixing glaring bugs littered throughout this e-commerce and gift registry site. Did I mention that the site is actually two pre-compiled ASP.NET web applications? And that the administration site is built in PHP, with no function/object sharing between admin & user-facing sections? Two completely separate codebases working on the same database. Yikes.

Despite the issues, it was a treat to work on the site because I believed it filled a need. They dealt exclusively in Fair Trade products, trading directly with the producers (which you can find out more about on their meet the producers page the site has been taken down since they sold the company in early 2013) so that you know your purchases and registry listings benefit artisans with minimal intervention.

This site was built using ASP.NET & PHP, using MySQL as the data store. I built an AJAX-powered stock management tool which uploads and parses CSVs given to them by their order fulfillment warehouse to keep their admin system and warehouse system in sync. I also managed Fairgift’s Subversion servers to keep their code in check.

Interactive World War II Casualties Chart (web) — Programming & Design | 2008

During my final year at Rutgers, I took my first course in Information Visualization. I had known for a while that I loved beautiful design, but who knew there was a discipline which could guide you through all the techniques, skills, and requirements to make that idea in your head into a logical, cohesive, and data-dense piece of art? I was floored (my professor and Edward Tufte were the primary catalysts here).

As my final project, I decided to use my web skills and build a successor to my World War I chart (directly below), an interactive chart displaying the vast discrepancies between reported casualties by the various sources which exist on the topic (militaries, historians, encyclopedias, etc.). Go ahead, open it.

I built this interactive chart using HTML, CSS, and jQuery. The site uses the less-common horizontal scrolling style, which may not feel natural, but does give you a precise alignment between all charts for much easier comparison.

World War I Casualties Chart (print) — Design | 2008

Combining my fascination with modern war history and my class requirements to design a data visualization with emphasis on clarity, data density, and practicality (this wasn’t a history class, after all), I endeavored to create a chart which portrayed a paradox common in histories from the ancient past to the modern day: statistical margin of error in war reporting. Since my gut feeling was that this explanation would bore the pants off of most of my classmates (and any other non-historians looking at the chart), I went about it in a way that would perhaps spark the interest of a casual viewer. I made the point of highlighting the extreme.

In this case, the extreme translated to “How could so many people report the number of casualties so vastly differently than others?”

I built this chart using Omnigraffle and extensive research into the different sources of casualty numbers reported for World War I.

Rutgers OIRAP (web) — Programming | 2006 – 2007

In need of an internship or job during the summer of 2007, I was introduced to the technical head of Rutgers’ Office of Institutional Research and Academic Planning and secured an interview with him just before the end of the spring semester. The interview led to an offer to join as a programmer on their faculty CV management team.

With over 3000 faculty, there is a lot of knowledge holed up in New Brunswick, Camden, & Newark, but the common reference material for that knowledge — the CV — is often a very computer-unfriendly medium when searching for expertise in a field. Word documents, PDFs, Mathematica-generated images [and though I can’t remember the name now, some programming/layout language that lets you output to PDF that the engineering faculty was gaga about]; they all made media relations and other faculty-search needs almost impossible to fulfill.

So we built a new way to store and search CVs, which was quite unpopular (though thankfully it wasn’t my job to convince people of the obvious benefits to such a program).

This was my first large-scale deployment of an ASP.NET site. My tasks were to bug-test previously written code and write new code to improve usability through tools such as semantic HTML, CSS, and large doses of Javascript/AJAX (some using jQuery, but plenty written from scratch).

The Pine (web) — Coding/Layout/Design | 2006 – 2007

In 2003, I went to my first basement show in New Brunswick. The Pine played, and my life changed (I don’t give The Pine all the credit, though…). Eventually Roger (singer and guitarist) and I began a casual correspondence (pen pals?), and when the Pine came to the east coast a second time, I hosted them (with the help of my best friends and roommates) during their NY/NJ stay. Eventually the subject of websites (my specialty) came up.

Roger’s distinctive art style was a primary component of all of his band's releases, and we wanted to keep that aesthetic on the web as well. So we went the most literal way possible: Roger drew the website on paper, and I made it digital.

Using Roger’s drawings as a blueprint, I scanned and converted them all into rasterized graphics with transparency. I then cut them up where necessary and glued the pieces together using HTML, CSS, and pre-jQuery Javascript to create a faux-fabric “window” into the various sections of the site.

Staticpulse (web) — Coding/Layout/Design | 2002 – Present

Staticpulse was a name I thought was cool in high school. Over the years it’s been a place for me to write, design, and experiment with programming.

This incarnation of Staticpulse was built by hand, using jQuery for Javascript and HTML5 Boilerplate & Blueprint as my CSS defaults.

Other experience in the field of information architecture


Sunflowers (book) — Writing/Design/Layout/Photography | 2008 – Present

I took a wonderful trip in the summer of 2006. It was the kind of trip that in the years since, every time I encounter one of my friends who accompanied me on it, the trip comes up. Inevitably. And with incredible nostalgia.

So when I found myself in September 2008 in London with no job and waiting for a January semester to begin, I found myself a new calling: author. And after writing a few pages of a rough draft on those tiny pocket moleskine cahiers, I realized that I wanted to relive the trip in journal form. Instead of treating it as a memoir, I wanted to treat it as if I had actually written a journal on the trip.

The overall design aesthetic is of a scrapbook with a grid. Photos are digitally “pasted” next to the torn-out journal pages against a soft beige background. It’s a large-format book, and pages contain fewer words than the average paperback, giving the feeling of a coffee table book that can be picked up and put down without guilt. The large photographs also contribute to that feeling, as well as giving a strong visual incentive to pick it up or leave it out for easy access.

I also run a blog keeping track of the quirks and common aspects of writing a book that I imagine most people would not be aware of, as happened to me when I began to write and lay out my book.

Rutgers (teaching) — TA in “Web Design With XML Technologies” class | Summer 2008

After I graduated, I had a summer to burn since I knew I would be in London come the fall. Not wanting to settle for the typical “temp” jobs, I took a look at my alma mater’s class schedule and found a course that I would personally want to take and which was taught by one of my favorite professors. So I sent her a letter asking if I could join the class as a teaching assistant. They promised me nothing more than an honorarium (my first, so I was unaware of the humble nature of honorariums), but I thought it would be a perfect opportunity to pick up some teaching skills, learn a few tricks with XML that I hadn’d discovered yet, and make some great contacts.

It was a little weird at first, since I was acting as an assistant in a class full of all my former peers, but the overall experience was positive. I got what I had wanted out of it, and kept my web skills up-to-date, and had a great summer session without all that stress of being the one who’s actually getting graded!