Centering text, but only when there’s just one line of it

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:

Screenshot 2016-02-21 19.09.50

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; }
Centering text, but only when there’s just one line of it

Nurse & Soldier: LP & Tour

Last summer, I did the layout for Nurse & Soldier’s new LP, “You are standing behind the curtain”:

a0253962933_2

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
Nurse & Soldier: LP & Tour

A Tribute to Sandy Hook

tsh1

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.

A Tribute to Sandy Hook

UX Rant: Current Postage Rates (with bonus solutions!)

???????????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!

UX Rant: Current Postage Rates (with bonus solutions!)

New Piece, Please!

sr1

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!

 

New Piece, Please!

Attentive.ly

Screen Shot 2013-01-27 at 12.04.34 PMAttentive.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.

Attentive.ly

Our Time’s Voter Registration Widget

Our Time's Voter Registration Widget

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!

Our Time’s Voter Registration Widget

Sun Boxes Mobile App

 

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.

Sun Boxes Mobile App

Some Sites

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.

Some Sites

9/11 Memorial Guide

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:

http://names.911memorial.org/

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.

 

9/11 Memorial Guide

The new Sun Boxes website is live!

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/

The new Sun Boxes website is live!

Gradual Alarm Clock 1.1 is live!

No more snoozin', no more losin'!

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.

Gradual Alarm Clock 1.1 is live!

Flushify

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!

Flushify

EdgeCast Website

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:

EdgeCast Website

Bartleby the 8 Ball

I would prefer not toIf 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.

Bartleby the 8 Ball

Bioshock Infinite Announcement Site

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!

Bioshock Infinite Announcement Site

Introducing a Gradual Alarm Clock for Android phones

No more snoozin', no more losin'!

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

Introducing a Gradual Alarm Clock for Android phones