Milkshake Island @roykolak - Tumblr Blog

A/B Testing via web components

I’ve been messing around with Web Components via Polymer with some friends lately and a question came to my mind, “What would an a/b testing element look like?”

Well, it would certainly involve an experiment wrapper with variant children. Hmm... but how to handle an experiment control and it's variants?

After a bit of work, I came up with this as the HTML tag structure.

Note, custom tags must include at least one dash, hence the "ui-".

I'm fairly happy with the end result. You can checkout a demo here. The web component future is looking very bright.

https://github.com/roykolak/experiment-variant-component

#Polymer #a/b testing #web components

Documenting a D3 project

The following is the very real progression of a D3 project to build a heatmap polar plot for GN Resound (a hearing aid company)

The polar plot already existed, so the task was to plot X number of data points along each degree. To start, we used a resolution of 50 points per degree.

Enjoy...

Awesome, let’s make those dots bigger as they get farther away from the center and add a few more angles.

Cool, but kinda messed up. Let’s add more data and integrate a dynamic color range based on the highest value and the lowest value expected to be found in an angle. D3 *should* map colors for the values in-between.

The color mapping is definitely not right, but let’s not worry about that now. The dot overlap is not useful; the dots need to be flattened into slim ovals.

Shit. The dots are being squashed at the wrong angle. Let’s fix that and add some more resolution.

Closer, but there’s still something fucked up with the placement... there should be no spin to the ovals and they need to be taller and wider.

Okay! That’s looking MUCH better. The colors have morphed a bit, but they are still way off from what they should be, something is messed up.

Yeah... no, that didn’t help.

Definitely closer, but still too washed out... I think my domain doesn’t match my range in the linear color scale.

Yep, that was it! Now... time to add some more resolution to each angle.

Oh yea, looking SHARP! something weird happening on each data point in the angles. Maybe I can squash the oval points a bit more and add a gradient border to each one...

That’s what I’m talking ‘bout! More resolution!

MORE RESOLUTION!!!!

Bingo.

#d3 #polar plots #heatmap

Installing a chrome extension or app from a website (inline installation)

Want to install a Chrome Webstore item, like an extension or app, from an external website? You're in luck, that's called an inline installation and it looks like this...

To try the flow in real life, checkout http://better-history.com/

To enable inline installation on an external website...

1. Add a link tag to the <head> that references the chrome webstore item.

2. Trigger the install popup via a user action. (like a click for example)

<button onclick="chrome.webstore.install()">Install now!</button>

The function, chrome.webstore.install, accepts success and failure conditions if required. You can also check chrome.app.isInstalled to see if the user already has the webstore item installed.

3. Verify you own the external site with Webmaster Tools

Visit Google Webmaster Tools to add the site as a property that you control.

4. Configure your webstore item to be inline installed

This is done by editing a published item from the Webstore dashboard. When editing, link the verified site and enable inline installation on the webstore item. See below for the specifics.

Still having trouble? Using Inline Installation.

#inline installation #chrome #webstore #chrome extension #chrome app #chrome webstore

Optimizing for contributions

I have received a handful of pull requests for Better History and a few people over the years have opened issues, but it's never been a community powered project. It's just been... open source.

After reflecting, I took action to fix the areas that I believed were problems. Below is a list of statements that guided the refactor...

(Curious about the new code? Clone and install here!)

No build/watch commands

After cloning, the directory should be immediately installable as a Chrome extension. No compiling or dependency installations.

Handle dependencies as a clientside app

No more package.json in the root, this is not a Node project. Use a barebones "dependency only" bower.json file because this project will not be added to the Bower registery.

Optimize for development

Ajaxing in html templates is fine for development. Manually adding script tags for new files in index.html makes sense to a new comer. No magic allowed.

Extract releasing code

Create a 'releaser' repo who's job it is to... package up a release. Have it be in charge of tasks like migrating html template files into one js file, concating and minifying js, and swap analytics ids. Contributors don't care about these tasks.

Make it clear this is an extension

The manifest.json file that powers the extension must live in the root of the project. This will also allow the cloned directory to be installable.

Remove programming language barriers

The JavaScript audience is much larger than the CoffeeScript crowd. In fact some JavaScript people actively avoid CoffeeScript. So an open source project in CoffeeScript is probably not ideal.

Curious about the new code? Clone and install here!

#better history #open source #contributors

Conveying a better experience

I've updated Better History's webstore page. I'm trying something new. I've decided to show Chrome's current history viewer in the screenshots.

I decided to do this after looking at Adblock's extension page. I noticed how they displayed a 'before' and 'after' state. I really liked that because I could instantly see the benefit.

Even if I couldn't see a benefit, Adblock is reminding me why ads suck on a website.

Providing that frame of reference was something that I never tried. Up until this point, I was selling Better History to people based on the great interface. But I wasn't reminding people of what they are living with now.

Better History improves browsing...

Better History improves searching...

Better History improves viewing device sessions...

#Better history #adblock #marketing #needs #frame of reference

New logo for Better History

too colorful, conflicting shades, too much dimension, Google's branding, very noisy, doesn't scale well, dated design, skeuomorphic but also not, complex diagonals, letters.

flat, simple, and scales well.

In use right now!

#better history #new logo #logo

Meet Chrome Historian

About two years ago, I began to notice that Better History was becoming a large project in terms of the amount of code. This is never good because it scares away potential contributors.

So I decided to extract the "Chrome Settings" styles and create Chrome-bootstrap. That project now has almost 200 Stars on github.

I'm attempting to performing this extraction operation again with the history querying magic that is the secret sauce of Better History.

Meet the Chrome Historian

Version 3.3.0 of Better History, which will be released in a few days, will be powered by the Historian.

It feels great to get all this code out of Better History proper. The separation makes real sense too because Historian contains all the WebWorkers and Chrome API interfacing code. Those two ideas require a strong API and separating this out into it's own project will naturally lead to that goal.

The specs still need to make the jump, but the dev version of Better History is using this new library at the moment.

Extract and be merry people.

#better history #chrome historian #web workers #github #chrome bootstrap #extraction

Kill the features and re-evaluate what's important

Better History has been around a long, long time. It's had over 106 releases. since 2011. Thats just... insane.

Over the past year or so, I stopped using it. I just didn't find it that useful anymore. It was slow, it had features all over the place, I didn't even know how half the configurable options ended up in the settings section and more importantly: why I chose to make them configurable...

Think long and hard about Configurability people.

So I thought, knowing what I know now about Chrome, the History API, and maintaining something for the past 3 years, what would I do differently?

That was an extremely easy question to answer:

Enforce speed above all else

Re-evaluate the importance of features

Eliminate the deep historical UI

So after lots of code deletion and simplification, I can proudly say that:

Better History is fast as hell

Better History is about 50% lighter on features (no joke)

Better History is working with, not against, the History API.

It's clear to me now that some features need to come back, but only a small percentage. But hey, now I know.

#better history #death to features #3.0

Idiots!!! Where is DATE?!

Since I've started releasing software in 2008, I've been getting user feedback on it. Some of this feedback has been amazing, while others have been incredibly hurtful. I'm going to try something here, and start posting bits of the feedback I receive, anonymized of course.

Received this bit of feedback about Better History. For the record, this user is 100% right, but it's all in the delivery.

#feedback

Debugging js bottlenecks like a pro

It's no secret that Better History is a slow searcher. Countless people have left reviews stating this over and over again on the Chrome Webstore. I always thought it was the Chrome history API that was at fault... until recently.

Programmatically Profiling

In order to find the bottlenecks in BH's search code, I used the console profiling api. This let me zero in on the exact section doing the work. Here's what I found...

Ah yeah... 2830ms... That's the winner.

Digging deeper it's pretty clear to see that the problem is coming from moment.js, a date library for JavaScript. It's a great library that wraps lots of really useful functionality around the JS Date object.

But looks like it might be a bit slow for this usecase.

The offending code is pretty obvious when you see it. Looping over all the found results and instantiating a moment date object for every visit... Nice one Roy.

Tune in soon for the fix...

#profiling #console #chrome #dev #better history #momentjs

It's wrong. It's all wrong.

Better History has been kicking... I don't know... 4 years? In that time I built what I thought a historical history interface should look like.

But no... it's not right. The Chrome history API does not work like a historical record. A url has one reference in the database who's timestamp is updated. Which means...

Visits in the past are rewritten by future visits to a site.

Historical interfaces that make sense are not possible and will eventually breakdown. I see this confusion in reviews all the time, but until now, I didn't have proper vision to act on it.

Effective immediately, I have disabled the signup flow for tag syncing in Better History. While I was happy w/ the user signups (139 paying customers!), it was ultimately not that effective and scaleable.

Oh boy, I have got some shit up my sleeve...

#better history #shit up my sleeves

First Better History revenue report!

In January, a paid feature was added to Better History. This feature was the ability to sync your tagged sites to the server in order to keep them safe and access them everywhere. The cost for this service is a one time fee of $8.

I really didn't know what to expect when I started trying to sell a feature to Better History customers. Would people feel cheated? Would people feel annoyed? Would people... like it?

The answer to those questions is yes. But let's just get right to it...

There are currently 110 paid users of Better History. The majority of new customers join right in the middle of the month with numbers dropping towards the start/end of the month.

Seeing a graph like the one above signals to me that it is safe invest some time in Better History syncing. I know that it will never be a huge money maker, but hey... you got to start somewhere.

#better history #revenue report

When there are no moves, look harder

Over the past few months, Better History started getting reviews like this...

Works great, actually, but I miss the "other devices" functionality that the inbuilt history page has. With that, it'd be a 5. Wonder if there's a way to have both side by side?

Additionally, things like 'device' history for synchronization across multiple chrome installations do not show up under better history.

These reviews were correct, Better History does not show your other device's session information like active tabs and pages. And that really does suck.

The problem is that Google has not finalized the APIs for extensions to use to get device session data. It is currently in Chrome Dev and needs to get through Beta and into Stable.

When I started seeing reviews like this, I originally thought, "I know! It does suck... to bad I can't do anything about that". These users wanted something badly, I wanted it badly, and we were all sad.

Wrong response Roy

Months went by and the status of the Devices/Sessions APIs hadn't changed. It was still in Dev status. So I decided to build a mocked out Devices section in Better History. And it looked goooood...

I decided I HAD to release this. Even as a mockup, people would know what was coming. I added a little permanent overlay to explain the situation to users...

and that was that. I released it and watched people hit the new mocked up page over the next few days in Google Analytics.

That's when I realized...

The lack of API support on Google's end was out of my control. That should have never been the focus. What was the opportunity on my end because of the lack of support in Chrome's API?

The answer to that question is growing the mailing list. After the Devices section launched, the mailing list shot up because of the callout in the Devices section.

When there are no moves, you are not looking hard enough.

#better history #mailing list #google chrome #chrome

Removing the limitation

Did you know that Better History, the top history extension in the Chrome webstore, does not let you explore all your history? It only allows you to see the last 10 weeks and beyond that, you're out of luck. It's not a UI bug, the feature just doesn't exist.

While the popularity of Better History grew and grew over the years, most people just didn't seem to care about the limitation. I would get a bad review from time to time, but most people were happy without it.

Adding this feature was always on my list, but implementing a flow that felt right proved to be a tough task. So I kept putting it off.

With the latest version of Better History (released today!), I added a calendar view that lets you dive back in your history to the very beginning. What breakthrough was made that this feature is appearing now?

This isn't the same idea that I toyed around with at the beginning. The feature I released is just a calendar. That's it. You click on a week and you are taken to that week's view, which already exists. It has no concept of a user's browsing history.

I didn't need to spend time on a brand new, flashy interface that renders all your history in an integrated way. I just needed to remove the limitation.

#Better history #limitation

Introducing the Colors Dev Panel

Bad Habits

When I was working on Postcard Pals, I noticed a bad habit that I had developed. The bad habit went something like this:

Copy a hex color from the dev inspector

Search for it on Google

Find and click the result for Color-Hex.com

Copy a slightly lighter or darken hex shade

Paste it in the dev inspector

(sometimes repeating 2/3/4 times if it should be lighter/darker)

Visiting Color Hex was not the bad habit, how I got my final result was the real problem. You can see that there are 6 steps up there and after a short while, that will suck the fun out of building things.

Better Tools

If we are gonna fix this color issue, then let's really fix. I'm talking...

Lighten a color in N steps

Darken a color in N steps

Saturate a color in N steps

Desaturate a color in N steps

Blend a color into another color in N steps

Get a palette of all unique colors on a page

Select a palette color and modify it on the page in real-time

Translate between hex, rgb, and hsl

Get shemas (complementary, split, triadic, tetradic, etc...)

It's also important to focus on the two main usecases...

Explore colors to find the right variation

Manipulate page colors to prevent copy and pasting

Let me just wave this wand right here, and...

Colors Dev Panel. Install Now!

Fresh off the presses; ready for all your color dev needs. Is it missing something? https://github.com/roykolak/colors-dev-panel

Go get building.

#colors dev panel #chrome #chrome extension #dev panel #postcardpals

Building for the right reasons

Turning an idea into reality is so rewarding. I don't think anyone can argue with that statement. I recently found myself trying so hard, obsessed even, to build something that people would pay for. This was having an immediate, and negative, effect on my creation process.

I eventually reached a point where I would be turned off by an idea because I didn't think it could generate revenue. This was a really stupid place to be especially because I had limited to zero success with revenue generating webapps.

Programming and designing is an extremely rewarding experience for me. If I wanted to build something because I thought I could make the experience the best it could be, then ignoring that impulse to create would seal my fate. I would remain where I am, or worse - backtrack.

Having this toxic thought changed my relationship with creating. All of a sudden it wasn't about improving my skills, it was about trying to be "smart" from the beginning and judge the gains and losses. Yuck.

That wasn't me. So when a winter deep freeze entered the Chicago area, I pulled out a simple idea that was first buried deep in my head a year or so ago...

Send someone a postcard via the internet

No chance of it being "profitable", could use Lob to print and mail postcards, collect payments via Stripe, get images from The Noun Project. It was perfect.

I used Twitter to post the progress. This was an important part of the process. To be so transparent about building the experience just screamed pure creativity.

You can visit postcard-pals.com to see the final results. Here are some of the highlights from start to finish...

Couple of Public Domain icons from @nounproject thanks to @mailchimp. Things are moving along nicely… pic.twitter.com/OYlo93fPbh

— Roy Kolak (@roykolak)

January 8, 2014

Finishing up the form to input the postcard info. Time for @lob integration to actually mail the postcard… pic.twitter.com/wDTjHuV848

— Roy Kolak (@roykolak)

January 8, 2014

Give that title some depth! Ditched the form modal, that was a cop out. Time to get flipping… http://t.co/JuBhHy1vGH pic.twitter.com/9Or6tTnzcB

— Roy Kolak (@roykolak)

January 8, 2014

tight. So much better. And yes, the name changed again... hopefully for the last time. pic.twitter.com/ptx955Ugh7

— Roy Kolak (@roykolak)

January 10, 2014

Added lots more great icons via @nounproject and @mailchimp, thanks guys! pic.twitter.com/NDM5fabwy7

— Roy Kolak (@roykolak)

January 11, 2014

Hello css3 clouds. I think you're the *perfect* fit for Postcard pals. source: http://t.co/NAlksdmy7Y pic.twitter.com/mUjAbTm7rg

— Roy Kolak (@roykolak)

January 12, 2014

Finished making the postcard fronts into pdfs to send to @lob, even made a custom pdf for the back via PDFkit 4 node pic.twitter.com/9jjIYjsPUO

— Roy Kolak (@roykolak)

January 16, 2014

blending the title into the background a bit... experimenting w/ subtitles. pic.twitter.com/792AHvQc3h

— Roy Kolak (@roykolak)

January 22, 2014

Wrapping up the success screen for @postcardpals, only thing left is payment integration! pic.twitter.com/qsNxXY6Jig

— Roy Kolak (@roykolak)

January 22, 2014

And the final result. Check it out! Postcard Pals

#postcardpals #lob #stripe #thenounproject #creation

Showing users what a feature is capable of

A friend, Tom Kersten, recommended a video to me by Kathy Sierra awhile back. The talk was called Building the Minimum Badass User and it's an excellent video with a very nice build up. There are many messages throughout the talk, but one part spoke to me: You must show users how to be badass.

Around this time, I was working on adding Tags to Better History. The feature was about what it sounds like, tag sites that you visit and keep them safe in Better History. I was wrapping it up, when Kathy's talk entered my mind again.

When a new user first installs Better History, they would not have any tags and that was probably not ideal. They would not feel badass and Better History's potential would be weakened.

You want to provide repeated exposure to examples of what really good looks like.

Kathy Sierra

I needed to show them what a great tag collection looked like. So I rolled up my sleeves and whipped together about 60 sites that get tagged on install. I tried to cover a wide range of interests like: Recipes, Clothing, Places to travel, Productivity, etc...

Much better! People would now experience, very early on, what tagging in Better History means for them... what value it can add to their lifes'.

Pre-populating of tags had another interesting side effect. A few weeks later, I added a sharing feature for a tag. Easily share all the sites in a tag by clicking a 'Share' button and getting a link, like the one below, to send to anyone.

http://www.better-history.com/share/52ae60216d80247b02000042

When I launched the sharing feature, guess what I saw? People were sharing the pre-populated tags left and right.

Were they purposely sharing the sample tags? My guess is no. They were probably looking around, seeing what Tags were and what sharing one meant.

Looking back, it's hard to think about the adoption of tags and tag sharing without the solid base of starter tags. Gotta show'em the potential.

#better history #kathy sierra #tom kersten #BoS #business of software

Trending Blogs

Recently Viewed Blogs

Milkshake Island