Automagical

Stuff in world. Sometimes technical, sometimes not.

Dissecting Chrome's new Uber page

Chrome, being based on an open source project, has multiple release channels. A few weeks ago, a new preferences page popped up in the dev channel. Because my extension, Better History, needs to look and behave exactly like Chrome's UI, I had to dive into this new face and understand it in order to replicate it. Let's get to it.

 

Settings-2

Codenamed Uber

If you start to poke around in the html of this new preferences page, you will notice a lot of references to the word 'uber'. Even more, if you browse crbug.com, the term 'uber' pops up when describing the new preferences panel. Therefore, this new design will be referred to as Uber.

Updated look and feel

The more immediate change is the UI. Uber features an updated interface. Chrome kept to good conventions by leveraging css for all the updates, no images here.
Extensions-2

Furthermore, it's becoming clear that this redesign was to bring Chrome UI more inline with the recent Google unification. This can be seen more notably in the sidenav and I can only suspect that we will be seeing more unification in the coming updates.

Inbox_4_-_roy

Iframes

Each preference view (history, settings, extensions) is an iframe. Chrome is leaning on cross origin communication to signal events between the side navigation and each iframe. The union of these iframes with the side navigation collectively creates Uber. 

You are probably asking yourself, why iframes Chrome? I was struggling with this for a few days, then I slowly realized that going with iframes meant that 
  • A preference view can exist in Uber or can be visited directly. 
  • A preference view can be tested and developed in isolation 
  • A preference view just needs to implement the required API to interact with Uber

All pluses. The postMessages API, which is how Chrome is communicating between iframes, is still relatively new, and the usage here is really nice. Here is an example of some javascript doing this in Uber.

Slide in/out effect

A huge part of this new design is the out/in slide effect when switching views. How is it so smooth (hint, css transitions)? It took a little bit of digging, but I managed to figure out all the parts and it's pretty simple and easy to replicate. 

Image

Above you'll see the three iframes that represent each view in Uber. The last iframe container has a 'selected' class. Here's the css...

Thats it. The key is all the views exist on the page and to trigger the effect, remove the 'selected' class from the views and add it to the newly selected view.

Everything you need to know about internationalizing a Chrome Extension

I recently internationalized Better History and below is everything I discovered and/or wished I knew before, after, and during the process. I hope this helps you.


Only pass string substitution values
Even though you could, at one point, pass integers as substitution values to chrome.i18n.getMessage, you cannot do this now. A bug was opened when this "number or string" functionality was broken, which caused me to investigate the actual API docs on the matter. The docs clearly state that the substitutions should be...

string or array of string substitutions

Even though, the bug looks like it will be fixed and "number or string" functionality will be restored, it's not a good idea to pass numbers. This issue broke Better History in Chrome Dev as I was not parsing dates as strings, so watch out! 

Refreshing your locale files
You don't need to restart the browser or reinstall your extension to have your locale changes picked up. Nope, just disable and enable your extension to pick up any locale changes.

If you want to change the browser's locale, you will need to restart Chrome after you change the language preference for your operating system.

Just because your extension works locally does not mean it will work on the Web Store
It's true, let those words sink in for a moment.

The tips below only relate to the Web Store when you are uploading your extension. If you do not follow these tips, you will see a useless error message like the one below then you upload your extension... 

An error occurred: Message JSON file must be in UTF-8 encoding.

So be sure to follow everything below or else you'll be pulling your hair out.

No comments in your locale files
Although your extension will install fine locally, it will be rejected by the Chrome Web Store if any locale file contains...

// a comment like this

 It will fail the UTF8 validations that your extension is only subjected to when uploading to the store.

No byte order mark (BOM) in your locale files
This should be a no brainer because the BOM is not recommended in UTF8, but this got me. You can check for the BOM in your locale files by running the following in the command prompt...

> file _locales/en/messages.json
_locales/en/messages.json: UTF-8 Unicode (with BOM) English text

No improperly encoded character anywhere
Be on the lookout for strange characters, missing characters, or miss matched symbols because anything like that will result in a validation error on the server. I had to comb through all 19 locale files to fix one, little character.

Better History 1.5, internationalized and live in 20 languages!

I'm so proud of version 1.5 of Better History. It is a tremendous step forward for this project. This release involved many people across the globe who volunteered to help translate text from Better History into their language. 
Chrome_web_store_-_better_hist

The teamwork here was so inspiring. All these people, excited to help and anxious to tell their friends of their work on Better History. I couldn't have asked for better partners to collaborate with for this release.

They put up with spreadsheets, text files, encoding issues, and email after email containing new phrases to translate. Here are all these awesome people:
Oh, and the best part? I had to turn many people away for this 1.5 release in order to scope the feature set. So expect lots more languages like Hindi, Dutch, and Hebrew to be coming soon.

Through this development experience, I learned so much about translating Chrome extensions. You can expect a lengthy write up in the near future. I have a list of hints and gotchas at least a mile long... no joke. Internationalizing a Chrome extension can be a very painful process.

Suggestions, bugs, comments? Follow and tweet to @Better_History! Don't forget, free stickers!

Whew, I'm tired; time for some sleep.

Better History has 50,000 users! I have free stickers!

Hey Better History fans, I got some stickers for you here.


Img_20120107_113753

In celebration of Better History (my Chrome extension) passing 50,000 users, I have 150 stickers to give out. A couple of months ago, I bought a deal for 100 custom vinyl stickers from Sticker Mule on App Sumo. There was a hiccup with the batch that was sent to me, but Sticker Mule corrected it and sent me 150 stickers instead of 100! 

So if there are any Better History fans out there that want a couple free stickers, drop me a line at roy.kolak@gmail.com with your address and I'll send them out to you.

Img_20120107_114023

Thanks to everyone for all the awesome feedback and support on Better History. I'm getting closer to releasing the next version, which is a very important update that will take Better History to the next level.

Stay tuned.

My sister's wedding and Grooveshark

Grooveshark sent me 150 Grooveshark sunglasses for everyone at my sister's wedding. It's a great, but slightly complicated story so let's start at the beginning.

My sister was getting married. That's pretty awesome and I wanted to add something goofy to the mix. I have been known to wear Grooveshark sunglasses for real.. as in, not as a joke, real. So I decided to order Grooveshark sunglasses for the wedding party, for 10 people. Because this was a special occasion order, I got a little creative and wrote the following in the comment field on the order form.

GROOVESHARK! stop. 
my sister is getting MARRIED! stop. 
These are for the wedding party. stop. 
MY SISTER IS GETTING MARRIED. stop.
GROOVESHARK! stop.

And that was that. I received the glasses in a few days, all 10 of them. The next day I was checking my email when I read the following message from Grooveshark Support.

Hey Roy. Thanks so much for your Grooveshark Sunglasses order. We were so excited to hear that you were using them for your sister's wedding. Thanks for being such an awesome Shark. How many people are you all expecting? Over.  
Kieran - Grooveshark Dude 

Nice one Grooveshark! I responded with the required info (150 people), to which he replied with a phone number asking for me to contact him. The next day, I gave him a ring and Kieran wanted to know if it was ok if they ship a large box to my address. I said, "yes!", so quickly, thanked them, and hung up without ever asking what will be in the box.

This phone conversation happened Sunday and the wedding was set for the coming Saturday. I was crossing my fingers that inside that box would be 150 Grooveshark sunglasses. 

So Monday came, then Tuesday and Wednesday, and still no box. I was starting to get a little worried. Thursday and Friday. Nothing. Last chance Saturday morning. Nope, no package. On the upside, I had the original 10 groovesharks for the wedding party. All was not lost. 

The wedding was a blast. My sister and her new husband did a bang up job and we put the 10 Grooveshark shades to great use at the wedding (more pictures at the bottom). Here's the happy couple sporting the Groovesharks...

375_100111
So, that was that. But.. what happened to the large box that was sent to my address? Great question.

After the wild weekend calmed and ended, I heard a knock at my apartment's backdoor. It was my neighbor. He wanted to make sure that I knew about the large box addressed to me in the backyard. Clearly I did not know about this box.

I ripped it open and yep... 150 Groovesharks!

Img_20111005_083938
Turns out, the Groovesharks were delivered before the wedding, but the delivery person tossed them in the backyard (for package security reasons) and I never bothered to check there. 

Over the past few months I have been giving these shades out to both friends and random people wherever I go. People love hearing this story and who doesn't want a pair of Grooveshark shades? Checkout all the happy people in the shots below.

Thanks for the awesome gesture Grooveshark! You are great people.

(download)

The only thing better than good software is great users

I've been developing Better History for the past few months and it has seen some popularity on the Chrome Web Store. This has made me tremendously happy.

I've been working on side projects ever since I can remember. I've put together some webapp ideas, I made an iPhone app or two, created a few games, and I even got into a Twilio app for awhile. But none of these projects amounted to anything. Nobody cared about them because they didn't fill a need; they were not useful.

That all changed with Better History. Within a few weeks the user base expanded from 300 to 25,000. Currently it's closing in on 50,000. From this, one point is clear: these users rocks.

I'm getting so much feedback. Great feedback. Suggestions and ideas that I would have never thought of. There is nothing fancy about the way that I'm probing and collecting this feedback (it's just a Google Docs form), but the input keeps rolling in.

I get about 5 to 10 messages a day. It's almost at the point where I can't keep up, but mostly because the messages are thought out and full of rich ideas which then require an equal response. A few even included sketches and code samples.

The reviews on the Web Store have been excellent as well. I always respond directly to everyone that leaves a review. This is extremely easy because the reviewers are linked to their Google+ profiles. I even started a circle titled 'Better History users' in G+.

Recently I asked users to help with translating Better History and within 4 days I had 12 users volunteer to translate Better History to:
  • Spanish
  • Polish
  • German
  • Chinese (Simplified)
  • Hungarian
  • Portugese
  • French 
  • German
  • Italian
  • Arabic
  • Swedish
  • Russian
Amazing. 

Therefore, I've come to the conclusion that the only thing better than good software is great users.

-----------

Note: An official translation announcement for Better History will be made in the future with credit given to all the volunteers.

Three promotions for Better History

With the approaching Chrome Store redesign, promotional images with updated dimensions are recommended for apps and extensions. I wanted to get in on the ground floor with Better History, so I put together three promos featuring the Better History clock that includes (quiet) references to time travel movies. 

Small (440 x 280)

Small

Large (920 x 680)

Large

Marquee (1400 x 560)

Marquee

Better History 1.0 is live

It feels great to say that Better History 1.0 has been released. Over the past few months, users of Better History (almost 500 and climbing!) have seen 15 releases. Each update has added new functionality which improved an area of Chrome which many have ignored due to it's current design and, therefore, usefulness.

The milestones that Better History has blown through were small so that each could be completed quickly and efficiently. This worked incredibly well and when looking at the big picture, these milestones represent a history interface that is useful.
  1. Organizing history into digestible time intervals
  2. Grouping visits from the same domain
  3. Enhancing day filters
  4. Making search actually work
  5. Deleting beyond removing single visits
  6. Evolving the time interval interface 
I've been working on my marketing skills in preparation for the chrome store redesign. I've put together a few promotions that will be sharing here in a few days. Because Better History is all about the past, I created some promos that loosely reference three time travel movies. I can't wait to see how they will effect the user base once the new Chrome Store goes live.

Now that the basic functionality of a modern day history viewer is there, it's time to advance what should be there. I've got a few ideas to run with, but that will only get me so far. 

I hope you've got a few to contribute.

Better History 0.9.1, Critical bug fix

I just pushed out a critical bug fix for Better History. Your history is safe, but the bug involved not being able to view all your visits for day filters on the left side.

When you search your history in Better History, the number of results are limited to 100 for performance reasons. This limit was incorrectly being applied to the day filters. The number of visits for day filters are not limited.

This issue has been fixed in 0.9.1, which was released yesterday around 5pm. So it goes.