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?

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.

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.