Introducing bbclub-font: Easily add Baseball club logos to your site/app. (my tweets: Sep 1-7)

Over the weekend, I participated in On Deck Cup hackathon (Submissions and winners, story by BostInno) and created bbclub-font: Easily add Baseball club logos to your site/app.

“bb” stands for “baseball” and in short, I created a web-friendly icon fonts of all 30 MLB teams.

bbclub-font-screen

I had a user story going in (So Agile!):

As a front-end developer, I want a easy way to put logos of MLB teams to the website/visualization so that I can easily enhance visuals on my database driven site/data visualization without much fuss

There are bunch of sabermetrics sites out there that offer bunch of really interesting contents. My hope is by creating this and open sourcing it, those sites can easily enhance their visuals as exciting as its contents.

Source is all viewable in my git hub repo

It is heavily influenced/inspired by two projects that I love and use,
StateFace by propublica and Boston-based Dave Gandy’s font-awesome

I’m pretty happy with the outcome. I pulled off what I wanted to accomplish in a time that was available. I did do a little bit of illustartor prep, (organizing logos into adobe illustrator format) but I did all the .ai to font conversion (using Glyphs Mini), css coding, writing and building a how-to documentation (github page using jekyll/foundation. Responsive, of course.) and building examples/demo within the hackathon time, beating the deadline!

As part of a demo, I used the Sports Data LLC’s API. It is really good. You can get an API key as trial and pretty much on the spot start using this. I think it is useful for baseballhackday in spring. I used Game Boxscore API to call in the day’s game, and deopending on the number of runs, changed the font-size of the logo. This was done in less than 2 hours (I had to skip *free* lunch, boo hoo) and I still need to work on it so that it’ll get more days than just that one (though I would be happy to imortalize the 13-9 win over Yanks.)

Creating font icon was something that I wanted to do for a while, but didn’t have time to execute. Now that I know how to do it, I feel can do this for my work going forward. What is nice is that all of those logos are in there and you can make them as large as you want, display resolution independent, retina ready, and it is only ~24k.

I used the app called Glyphs

I used the mini version which is only $44 and only support upper/lower case alphabets plus space (53 total) but the pro version is $300. If you are using it, I think it is money well spent imho.

***

I been tweeting nonsense since May 19, 2007 (such long time ago, can you believe that?). I put weekly digests of my tweets on this blog, so that I can search for it quicker using my blog’s search function. I tweet awfully a lot about baseball (I am a Red Sox fan, if you didn’t notice), but if you are interested, please follow me at @DaigoFuji. Here are my tweets between Sep 1 and Sep 7:

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>