Making the Internet – and making it awesome – since 1998.
Craig and I mashed up of two of his creations – Sun Boxes and Moon Phases – for the eclipse on the 21st. If you let the app know your location, it will use local data to begin at dawn, climax during the eclipse’s maximum obscuration, and end at dusk. If you aren’t in the US (or if you want to know what the eclipse “sounds like” in a different location), you’ll also be able to choose a location instead.
Check it out here when the time comes: http://www.craigcolorusso.com/apps/sun-phases/
I just spent a fair bit of time figuring this out and thought I’d document it in case someone else is looking for the same thing.
What I wanted to do was center some text if there was only one line, but left-align it if the text spilled over to a second (or more) line:
After going down a bit of a rabbit hole w/r/t ::first-line and :text-align-last, and even considering employing some JavaScript, I realized there’s actually a pretty vanilla way of achieving the effect:
div.parent { text-align: center; }
p.child { display: inline-block; clear: both; margin: 0 auto; text-align: left; }
Last summer, I did the layout for Nurse & Soldier’s new LP, “You are standing behind the curtain”:
Last fall, I started playing drums with them.
This winter (i.e. this week!) we’re doing some regional touring:
| Friday | 1/17/2014 | Pistol Pete’s | Portland, ME | Details |
| Saturday | 1/18/2014 | Secret Project Robot | Brooklyn, NY | Details |
| Saturday | 1/18/2014 | Death by Audio | Brooklyn, NY | Details |
| Sunday | 1/19/2014 | Deep Thoughts | Boston, MA | Details |
I was once again tapped by my good friend Craig Colorusso to build a web-based sound installation honoring the victims of the Sandy Hook Elementary School shooting in December 2012.
Animating CSS gradients in a browser (indeed, in as many of them as possible) posed particular challenges, especially with regard to processor load. In the end, we were able to find a good middle ground between Craig’s vision and technical reality.
I dare you to find out how many clicks it takes to get to the current first-class letter and postcard rates on the USPS website. Take your time. I’ll wait. Unbelievable isn’t it? I stopped counting at five.
Because I really enjoy sending and receiving physical objects through the mail, the question of current postal rates probably motivates more than half of my visits to that website. Every time it does, I am stunned by how difficult it is to find this simple bit of information.
Well, this most recent visit was the last straw. I have created two sites which exist solely to answer these questions. Behold:
www.howmuchdoesitcosttosendaletter.us
www.howmuchdoesitcosttosendapostcard.us
Update 1/11/2016: It was a pain in the ass to keep maintaining this, plus Google started doing this “instant answers” thing where it answers certain questions you type in rather than just give you a bunch of links. Thus, I’ve decided to put those domain names to good use and just redirect them to Google’s answers. Enjoy!
My husband is a musician. He recently decided to brush up on his sight-reading, but was having a hard time finding pieces he’d never seen to practice on. He off-handedly mentioned to me that it would be great if there were a website that would just keep feeding him new, random pieces to sight-read.
“If only there was a website that…” The words that launched 1,000 ships! Needless to say, DLE was on the job and only a few months later we launched New Piece, Please!
Attentive.ly was started by by a couple of Fission Strategy alums to help organizations broaden their focus from email campaigns to social media services like Twitter and Facebook. They brought me on to revamp the interface for both the dashboard experience and the public facing marketing site.
Rather than begin with static wireframes, we went immediately into a rapid prototyping phase using the Foundation framework. For design, we leveraged a couple of Theme Forest themes, which got us quickly into front-end development.
Given the raging success of isitsnowingrightnow.com, we weren’t surprised to receive a special request for isitrainingrightnow.com.
Through Collective UX, I took the lead on reorganizing Warner Bros. Games’ purchase and account flows for web as well as several gaming platforms. The games we focused on were for 6-10 year olds, so the parental involvement aspect afforded some very interesting challenges!
Deliverables included Axure flows and wireframes.
ActBlue brought me in to redesign their public-facing website, giving it a “tech solution” marketing makeover. I did a quick round of wireframing to nail down the structure, several rounds of design honing in on a dynamic design, as well as template front-end development, leveraging Twitter Bootstrap.
Fission Strategy came to me with Our Time’s Voting Widget needing a major interaction overhaul with a very quick turnaround (it was May and they wanted to get people registering for the fall election STAT). Over the course of a few brainstorming sessions, I helped them get users registering and sharing their registration experience with minimal friction in a tiny amount of space. Great challenge for a great cause!
I had the privilege of creating the layout and design for Beautiful Weekend’s newest release:
Check out Beautiful Weekend’s music on Bandcamp.
At long last, I am very excited to announce the launch of the Sun Boxes Mobile App in both the iOS (iTunes) store and the Android store! You may recall from an earlier post that I built the Sun Boxes website last year. Sun Boxes is a sound installation by Craig Colorusso that uses solar power to play a series of guitar drone notes out of single speakers. Sounds mundane, perhaps, but it is one of the most humbly powerful pieces of art I’ve seen recently. I feel lucky to be a part of its momentum!
Our aim with the mobile app was not only to give users an easy way to interact with the piece by themselves, but also to encourage them to stage their own installation of the piece by turning their and their friend’s devices into individual Sun Boxes.
For this project, I was user experience designer, graphic designer, as well as front-end developer. Back-end development was handled expertly by my long-time collaborator and all around kind person, Mark Henderson. He created an API for the project, so you can expect more interfaces to join the fray soon.
Having never built an app myself (I’ve only designed them in the past), I have many, many resources to thank in making this possible. First and foremost, we leveraged the Phonegap platform in order to develop for both iOS and Android simultaneously, using the web technologies we already know and love. Steven Levithan‘s Date Format plug-in made handling times much easier than it would have otherwise been. Jason Job’s epic blog post about archiving and distributing iOS builds saved me from utter failure more than once.
And, as always, I would never get past “hello” without the amazing community that is Stack Overflow.
My pal Mark and I launched Some Demands on October 15, 2011, 28 days after the first gathering in Zucotti Park (and three days after having the idea for the site!). While public support of #occupy was rising, so were criticisms that the movement had no clear goals.
We started Some Actions on November 4, 2011, as Occupy Oakland called for and carried out a general strike. Growing numbers of people were asking what they could do to get involved beyond occupying public spaces.
Together, these two sites are known as Some Sites, and they aim to provide an open space for suggesting and voting on what needs to change and how to change it.
Over the spring and summer, I had the opportunity to work with Local Projects on the companion website to the 9/11 Memorial in New York City. The memorial doesn’t open until 9/11/11, but you can already start exploring the names on the memorial wall now at the website:
For this project, I created the interface and client-side interactions for the CMS used to maintain the memorial names database. This involved everything from concepting intuitive layouts and interactions within an existing design framework, to handing the data off to the server via JSON.
I also pitched in on the rest of the guide’s front-end development, in particular scripting the interactions for scrolling through the names on the wall.
It’s rare that a project gives me the chance to do new things (build a CMS from scratch) while contributing to a meaningful cause (remembering 9/11). It was great to have such an opportunity in this site.
This project is near and dear to my heart. Sun Boxes is something I want as many people as possible to experience and it’s really satisfying to get to be part of making that happen.
The most exciting part of the site is the part I didn’t build! The incomparable Sean Carstensen put together a Flash-based app which allows web users to hear the cycle of sounds that comprise Sun Boxes while seeing a slideshow of the boxes in action. We hope to expand this experience to mobile devices, and to add functionality that encourages users to “stage” Sun Boxes on their own with as many devices as they have at hand.
Also coming soon: the Sun Boxes store! T-shirts, recordings, and things so exciting I’m not allowed to tell you about them!
I built the site on the WordPress platform, with jQuery as the primary JS platform. For the newsletter sign-up, I used Quad’s excellent script for using AJAX on the DreamHost list signup form. I did mod it slightly, as I am using more than the customary name and email fields on the site. In order to avoid the tedium of spelling out each extra variable, I modded Quad’s submitToList() function to just grab every non-submit form input and serialized it all using jQuery’s serializeArray() function. Damn if that wasn’t just easy as pie!
Check it out: http://www.sun-boxes.com/
In the winter of 2011, the likelihood that it was snowing outside was a pretty much 50-50 proposition. DLE decided to help users get the information they needed in order to leave the house prepared.
At long last, an update to our little Android app that could!
In this update:
– More and better sounds
– Adjustable Volume
– Ability to turn off notifications
– Fixed unlock screen alert
– Fixed done/cancel button functions
And most importantly, a fancy new icon!
See my original post for a more detailed explanation of what this application is all about.
This was a quick and fun project I got to do with my excellent friend Christopher DeWan. Special thanks to Kelvin Luck and his Custom Cross-Browser Scrollbars jQuery plugin.
Live link: http://deloitte.com/view/en_GX/global/about/annual-review-2010/index.htm
Through Collective UX, I pitched in on a massive site reorganization for the New York Stock Exchange. Diving into their diverse financial product offerings was quite an education!
Deliverables included sitemaps and wireframes.
While I don’t ordinarily recommend resorting to JavaScript to resolve presentation problems, there are some occasions where a design is not flexible and a pure CSS solution is just out of reach. One such situation that seems to come up regularly is achieving “justified” alignment for floated list elements. If such a list is inside of a container, which it generally is, the margin between the list elements will be a problem for the the elements at the end of each “row”. Unfortunately, there isn’t yet a pseudo-class “last-child-this-row” or “in-the-last-column”.
My solution was to create a tiny little plugin to achieve this. It basically measures the width of the container, measures the width of a representative list item, figures out how many of those fit into each row, and then gives each list item at row’s end a special class to be manipulated via CSS.
$.fn.flushify = function() {
return this.each(function(){
$('li',this).removeClass('row-end');
var w = $(this).width();
var x = $('li:first-child', this).innerWidth();
var ender = Math.round(w/x);
$('li:nth-child('+ender+'n)',this).each(function(){
$(this).addClass('row-end');
});
});
}
Obviously, I could have just as easily done this for row-start if my list items’ margin was on the left instead of the right.
Perhaps there are better ways to achieve this effect that I’ve overlooked. If you know of one, weigh in!
I was the sole front-end developer on this project. Some small JavaScript flourishes helped it be more fun than your everyday brochure site. I finally took the time to develop a jQuery extension for making the final “column” of a list of floated elements flush with the right edge of the container. I call it Flushify.
Other people’s jQuery plug-ins I used in this project:
If you’ve worked in a corporate office before, you’ve likely come across someone who continues to be employed there despite seeming to do no work at all.
One former coworker of mine seemed to have an endless supply of one-liners that masterfully deflected work while leaving his facade of competence untarnished. Over time, I began to associate him with the Melville short story Bartleby the Scrivener in my mind. I also started to keep a list of his work-defying quips.
After a while, I felt strongly that ALL workers EVERYWHERE should have access to this magical power, and thus the idea of the Bartleby the 8 Ball Android app was born: A device, much like the Magic 8 Ball, that produces a suitable retort whenever someone comes at you with unpleasant work to do.
I loved working with Irrational on their “corporate” site redesign last winter, so it was great to get the opportunity to work on the announcement site for their upcoming Bioshock sequel with No Pilots No Demos.
Working on this site really took me back to my days at PROD4EVER, trying to make non-Flash sites look and feel like a Flash site. It’s always a challenge!
Highlights in this case were the various animations: “continuous” clouds, breathing fire, waving flags. Figuring out how to keep all that recursion from crashing Firefox was tough, and ultimately we had to cut a lot of the animation because of it. Fun nonetheless!
My application-focused side-project, Dead Letter Enterprises, just launched our first Android app: the Gradual Alarm Clock.
Think of it as a snooze in reverse: GAC sounds once at 30 minutes before your alarm, twice at 15 minutes, and three times at 5 minutes. At the alarm’s set time, the alarm repeats until dismissed.
Theoretically, waking gradually will ensure that you’re really ready to get up by the time your alarm goes off.
I and my DLE colleague Mark Henderson concepted and wireframed this app, while the ever-patient Alexey Tchernykh handled the code.
The app is available now for a mere $1.99 in the Android Market:
market://details?id=com.deadletterenterprises.gradualalarmclock
My very good friend Craig Colorusso asked me to make a website for his very amazing installation piece Sun Boxes. If you ever have the opportunity to see Sun Boxes live and in-person, I highly recommend doing so — it’s a truly unique and inspiring experience.
This one-page site is merely placeholder for a more fleshed out blog site to come!
Tweue is a Twitter-based web app that allows users to queue their tweets not by scheduling them at precise times, but by choosing the interval of time between them. Perhaps a user only signs into Twitter once a day, but doesn’t want to bombard their followers all at once. Tweue allows them to spread their tweets evenly over the course of the day.
My pal Ryan Walsh had been collecting recordings of readings of DFW works for quite a while when he approached me about putting them together on a website. The result is, happily, one of the most-visited sites I’ve ever worked on! And a great tribute to my favorite author.