A single serving web site for an escalator

I love single serving sites. And I’ve recently been amused at the number of broken escalators at BART stations. After seeing burritojustice’s tweet, I quickly forked Is there a Giants game today? to let BART travelers know about their how their favorite escalator is doing.

Introducing isthe24thstmissionbartescalatorworking.com

Have an idea? Submit a pull request on GitHub.

My first app: Is there a Giants game today?

Beard wonders: Is there a Giants game today?

Today is an important day for Bay Area residents. It’s the Giants’ first home game of the season. With the season in full swing, there’s a question on everybody’s mind each day: Is there a Giants game today?

Fans want to know. Anyone taking public transit definitely wants to know.

So my friend and I created a simple app: Is there a Giants game today?

Screenshot of "Is there a Giants game today?"

First home game of the season

It’s our first website side project, and it was fun to create. Check out Laura’s post for the background story. I’ll cover the technical aspects and what we learned.

We worked on it bit by bit, starting with static content and then added the ability for the site to update each day with game information. The code is on GitHub too – fork it and play with it.

What we learned

Keep it simple. Content is minimal. We just answer the question and provide information about today’s game or the next game. No fancy graphics, design or features.

It’s okay to start with a base. There are several Mozilla sites similar to ours that answer a simple question: Are we fast/mobile/pretty/slim/small/first yet? We used their layout and code as a base to get our page working as quickly as possible.

JSON for data storage. Instead of storing the Giants’ schedule in a database, we placed it in a JSON file. This allows all logic to be handled client-side and should make it easier to add offline support later.

JavaScript and jQuery for basic functionality. The page uses jQuery to access the schedule and fill in the content after the page loads. We also learned how to manipulate JavaScript Date objects to find the appropriate game information and format the date for upcoming games.

What’s next?

Improved layout across devices. We’re planning to use LESS so that the page will adapt to various screen sizes. Right now the page looks okay on different devices, but it should be easy to make it even better.

Offline support. Since people don’t always have a data connection on the go, we should make the app work offline too.

hCalendar support. We can use the hCalendar microformat to allow users to always have the next Giants in their favorite calendar app.

Have an idea for making the site better? Submit a pull request or leave a comment.

My first MDN Hack Day – NYC

stickers, swag, rockets!

stickers, swag, rockets!

The other week I joined a number of Mozillians and web makers for a Hack Day in New York City. What’s a Hack Day?

The intention is to host a day of talks, hacks and demos that first introduces the participants to Mozilla and our various open web projects, then invite attendees to shift into participant mode and start hacking.

Sounds fun, right? A day of learning and hacking with others who like like to make things on the web.

My Hack Day experience

I was delighted to participate while visiting New York. As a hobbyist web maker, I found the talks and collaborative hacking very helpful. While there’s lots of great documentation for web developers, nothing beats talking to people and sharing ideas. I’m currently working on a simple web app for people in the Bay Area, and I was able to get advice from experts on some implementation challenges I’d hit with offline support. Plus, there was time at the end of the Hack Day to see what everyone created and get to know each other better.

What’s next?

This was the first ever MDN Hack Day, and there are several more being planned for later this year. The next one will be in Buenos Aires on April 20, and you should participate if you are in the area (it’s free!). Future Hack Days will be announced on Mozilla Hacks.

Getting ready for my first rodeo at SXSW

I first heard about SXSW when I was in college, and it sounded amazing. Nerds converging in one place for an entire weekend of talks, events, and hanging out? That’s my kind of event. A dream event, even.

This year I’m going, and I’m ecstatic about my first SXSW Interactive. After digesting the massive schedule and reading several guides (my favorite is Brad King’s Nerdpocalypse guide), I have a basic plan. My goal is to meet lots of people and get ideas for making Firefox social media even better. There are a few talks and events I definitely want to attend, and the rest I’ll figure out as I go (mind like water).

Are you going to SXSW? @dailycavalier me on Twitter and let’s meet up.

SXSW veterans, what are your tips for surviving?

How users were social with Firefox in 2011

2011 was the first year we focused on nurturing relationships with Firefox users on social networks. We built and developed those relationships through hugs, handshakes and high-fives. In past years, we posted on Facebook and Twitter on an ad hoc basis, maybe a couple times a month. Now we’re intentional about posting relevant content almost daily and having conversations with our users as well. As a result, we’ve seen our number of relationships nearly double in a year and our users are actively engaged.

How did we increase the amount of content we published from a few dozen posts a year to over 300? Sure, we could have only shared news and updates about Firefox as a product, but we found our users resonated better with a balance of 3 different types of content. As Jane mentioned in her post:

Our content is split pretty evenly between being (i) informative about Firefox as a product and sharing the latest news, (ii) offering helpful advice and tips on how to make the most of Firefox, and (iii) most importantly balanced with fun, engaging and inspiring engagement activities.

As 2012 kicks off, we’ll continue to nurture relationships more than ever. Mozilla is an organization about people building a better Web. Our millions of friends support that cause and are actively engaged with us. Those friends have made the Mozilla project  successful, and they will continue to help us in making the Web better. Our New Years resolution is to continue innovating on your behalf and keeping the power of the Web in people’s hands. And nurturing relationships is a key part of that.

2011 in social by the numbers

  • 6.5 million Firefox fans on Facebook
  • 640,000 @Firefox followers on Twitter
  • 45-50% of Facebook fans engaging with us each month
  • In March, Firefox 4 spread around world through two social campaigns that were shared by hundreds of thousands of users
  • Over 300,000 Facebook shares (likes, comments, shares) in the last 3 months alone
  • Some Facebook posts were localized into as many as 15 language
  • Celebrated 7 years of Firefox by bringing cuteness to the world with Firefox Live with 4.5 million video plays and 200,000 hours of cuteness watched

A campaign about Your Web, for the Web

Note: This campaign is very much a work in progress and some aspects of it will most likely change. However, this should give you an idea of what the campaign could look like.

I was recently inspired by the webdev team’s activity at Open Source Bridge the other week, where hackers were asked what they want the Web to be. Dozens of people used posters, letter stencils, and markers to create their answer and show the possibilities open to us because of technology. The beautiful result can be seen in their video and Mike Morgan’s photo gallery, which is appropriately named Your Web.

Everyone uses and thinks about the Web differently, and we all have the opportunity to be part of the Web and choose how it evolves. So let’s show our users that. As part of a campaign for existing Firefox users, I’d like to see the activity from Open Source Bridge grow to a new scale in a way that any Firefox user can participate. The concept should be solid, the user’s interaction should be simple, and the gallery should be visually compelling (with some HTML5 + CSS3 love, naturally).

The Concept

Let’s create a fun and interactive way for users to think about the Web and tie that back to Mozilla’s mission and why we create products like Firefox. Let’s ask users a simple question about the Web and showcase their responses. Questions like “What do you love about the Web?” and “What do you want the Web to be?” can be answered in a single word or phrase. It should be a broad enough question that anyone can answer it easily.

The Interaction

Show users how others have answered the question and then ask them for their response. To make the response even richer and provide a human element, we encourage users to write their response on a poster and upload a picture of them holding the poster, similar to the Your Web gallery. A user can also tag their response to show how they use the Web (eg: an Artist, Developer, Student, or Writer).

The Gallery

Once a user submits their response (the photo is optional, by the way), they see their answer appear in the gallery, along with responses from similar users based on their locale and tag. The gallery could show a word and photo cloud where the more popular responses are larger. One could then share their response by email or on a social network. Here’s a rough sketch of how it could look, courtesy of Crystal Beasley:

Sketch of the main page

Sketch of the main page

Sketch of the submission form

Sketch of the submission form

Localization

I’m excited to see how users around the world think about the Web and answer the question, but many of those responses will be in different languages — languages I don’t speak. Unlike other campaigns where we localize content before the campaign launches, most of the content for this campaign will be submitted by users. This gives us an interesting opportunity to have our multilingual users translate responses so that others can understand how people around the world answer the question.

For example, a German user could offer a translation for a French response, and then German users could view that translation when they mouse over it. And we could do this in a way that still gives our localization community the ability to review translations before they appear for other users.

Another fascinating question is how do we structure the responses across different locales so the answers are brief but still descriptive? We could limit user submitted answers to a certain number of words or characters. In English, that limit could be pretty low — perhaps 4 words up to 30 characters total. We could probably establish a rule for each locale as to how long answers can be. What would make sense for other locales? For your locale?

Feedback

I’m teaming up with Winston Bowden to put this together (here’s the wiki page), and I’d love feedback on how to tweak this idea and make it even better. I would especially like to see your thoughts on the localization aspects.

Blogging for the Web

At a recent Cantina night at Mozilla HQ, a group of us were talking about how we don’t blog much. It’s not for a lack of ideas – there’s plenty of Web projects we can talk about. And we do talk about them all the time but it’s usually offline. We quickly realized that just as we read dozens of blogs each week, others are probably interested in what we’re doing and would like to talk with us about it. We all agreed we’d like to blog more.

Since none of us are active bloggers right now, we decided we’d encourage each other to blog, even offering to screen ideas for interest and review drafts.

So we made a pact – we’d each write a blog post in the next month. A few days later, half of us already had a blog post up. And I’m confident the rest of us will have our posts online soon. And yes, this post counts as mine.

As a result we’re moving our offline conversations online, expanding our conversations to a much larger audience. And we’re helping each other to become better bloggers. That’s the kind of peer pressure I like. Everyone wins.

Like us, do you want to blog more? Join our pact and then add a link to your next blog post in the comments. I’d love to read it.

Google is going after bit.ly with goo.gl

Today, Google announced that its URL shortener goo.gl is now available for public use. They’re also supporting easy QR code creation (by adding .qr to URLs) and metrics data (by adding .info to URLs). While bit.ly already offers metrics (add a “+” to any bit.ly link), they don’t currently offer QR codes.

I imagine bit.ly will follow suit and add a simple way to convert links to QR codes. This will benefit custom bit.ly domains (such as mzl.la) since users will be able to just add .qr (or whatever they decide) to turn their short links into QR codes. As a result, viewing a page on your mobile device or sending a page to a friend’s mobile will become easier in some cases. It’ll be interesting to see how this plays out and how important the QR code feature becomes.

In the near future, I can also see Google allowing domain owners to use the goo.gl platform instead of bit.ly for their custom URLs. It’s an easy way for Google to compete with bit.ly, and that’s clearly what they’re trying to do with goo.gl. It’s good to see that bit.ly has a new competitor, and I hope users benefit from the new services that result from this more competitive environment.