SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for the ‘Technical’ Category

Tesla Forum Search

Posted by Shane O'Sullivan on August 22, 2013

Tesla Forum Search

I like to read the forums on the teslamotors.com site, but a big problem they have is that there is no search feature.

To solve this problem, I wrote a Chrome plugin to do the searching for you.  It basically crawls the forums, tokenizes the posts and builds a simple search index.  This is stored on your computers hard drive, which makes searches very quick.

Try it out!

Posted in Technical | Tagged: , , , | Leave a Comment »

Launching Ads Reporting at Facebook

Posted by Shane O'Sullivan on June 26, 2013

For many months I and a few other engineers at Facebook have been building a new reporting tool for advertisers. This involved both a huge amount of work to build a fast, flexible backend that lets you slice your data in almost any way you can think of, in real time, and a UI to match.

I’m really proud of this work, which involved building a DataTable that can handle an infinite number of rows and columns, in place column reordering, resizing and all the other fun stuff that goes along with it.

If you run ads on Facebook, give it a try. It provides an unprecedented level of detail on the performance of your campaigns including how much you’re paying for the actions that you care about, such as mobile app installs, page likes etc.

Some press about it:

FB Studio (with video): http://www.facebook-studio.com/news/item/updates-to-ads-manager-reports

Techcrunch: http://techcrunch.com/2013/06/26/facebook-ad-manager-reports-update/

Adweek: http://www.adweek.com/news/technology/facebook-doubles-stats-ad-buyers-150778

AdExchanger: http://www.adexchanger.com/social-media/facebook-adds-device-reporting-new-reach-frequency-metrics/

Posted in Technical | Tagged: , , , | Leave a Comment »

Edgeconf 2013 Web Performance Panel

Posted by Shane O'Sullivan on February 12, 2013

Edgeconf 2012 Web Performance Panel

I had a great time at Edgeconf, taking part in the Web Performance panel. We got to discuss many of the common issues that web developers face when building complex web apps, such as avoiding reflow, repaints and avoiding garbage collection.

The full video is available now HERE.

The slides are available here

All other panel videos are available HERE, or will be soon if not yet uploaded.

Posted in Technical | Tagged: , | Leave a Comment »

Click, change then animate: My self imposed rule for a fast & smooth UI

Posted by Shane O'Sullivan on October 14, 2012

A few months ago I joined the Ads Interfaces team at Facebook, after almost two years on the mobile team, and am very proud of being part of the group that shipped a full rewrite of the Ads Create Flow (http://www.facebook.com/ads/create) last week.  The application is highly complex, with many varying user interface elements, lots of data floating around, validations and so forth, so it made sense to write it 100% client side in JavaScript. 

In many ways it’s a standard MVC application with

  • declarative view definitions, so you can easily relate the code to what you see in the Web Inspector
  • well defined data models which can be observed for changes
  • bidirectional bindings between views and models to keep the UI in sync with the data.  That is, if a piece of data changes, the UI should just update itself.  Of course, it is also possible to add code in between any binding if some more complex processing is needed.  For example, when changing the top level objective (clicking one of the huge buttons), I wanted it to animate the change, so rather the transference of the data update is delayed.

My New Rule

One of the primary lessons I took away from this is that asynchronous data fetching is one of the leading causes of users feeling like a UI is “webby”.  That feeling where the interface suddenly, with a jerk, jumps around and changes size.

This is often caused by images loading, or by an API call returning, resulting in the UI being redrawn.

I decided on a new rule to apply to interfaces I work on:

The UI can change suddenly when the user interacts with it.  All other changes should be smooth.

What this means is if the user clicks a link or a button, it’s OK to immediately change the UI, since they can see the causation.  However if new data comes back, or a large image loads shifting the entire UI up or down, this should be smoothly animated. 

I’ve found that this both gives an interface a more polished feel, but also draws the users eye to important information.  In addition, if they were already reading something, trying to make a choice of what to click next, if that jumps even a couple of centimeters they have to start searching for it again – it may have gone below the bottom of the screen.  However if it smoothly moves there over 300ms, they continue without much interruption.

It’s important to not go overboard with this of course.  Don’t animate everything, as it’ll feel gratuitous.  I’ve found that sticking to animating only asynchronous operations leads to an application feeling both fast and professional.

Image

Some examples in the Ads Create Flow are the large image that loads for Sponsored Stories (the bottom picture), and the entire Ad preview that loads as a result of a data callback (under Right Hand Column Preview).

Image

One caveat is that on IE 8 & 9, you’re going to have a bad time.  I chose to not bother with janky timer based animation solutions, both in the interest of saving time, and from a healthy disdain for legacy browsers.  So, I advise to stick with CSS3 animations, and let the users of old browsers have a working but less attractive application. 

Posted in Facebook, HTML5, Internet Explorer, Javascript, Technical | 4 Comments »

What Git branch was I working on again?

Posted by Shane O'Sullivan on June 16, 2012

A situation I often find myself is remembering what Git branch I was working a few hours ago.  Partially this is my own fault, since I tend to name Git branches after task IDs, e.g. “12345″, in order to easily find them, but also just my brain has limited space and can’t remember more than three things at any one time.

A useful command I’ve found (for the Mac and probably Linux) is the following

for k in `git branch|perl -pe s/^..//`;do echo -e `git show --pretty=format:"%Cgreen%ci %Cblue%cr%Creset" $k|head -n 1`\\t$k;done|sort -r

This prints out a list of your branches, and the length of time since you last checked them out.  It makes it really easy to find that unmemorable branch.

Of course, it’s easier if you put that command in a reusable function, e.g.

function listGitBranchesByMod() {
    for k in `git branch|perl -pe s/^..//`;do echo -e `git show --pretty=format:"%Cgreen%ci %Cblue%cr%Creset" $k|head -n 1`\\t$k;done|sort -r
}

inside some *.sh file on your PATH.

I found this somewhere on the web, and cannot find it again. If it was you, please let me know so I can link to the original. Oh, and thanks!

Posted in Technical | Tagged: , | Leave a Comment »

Caching Events in Mobile Safari is a bad idea

Posted by Shane O'Sullivan on May 3, 2012

A recent issue with JavaScript devlopment that I’ve come across on Mobile Safari (note: not desktop Safari) is that if you add an event listener to a DOM node and for whatever reason keep a reference to the Event object you receive, you’ll run into errors.

This is because the same Event object is reused,  with its properties being updated every time.  I presume this is to conserve memory on mobile devices, as it is both in short supply and causes too much garbage collection, the enemy of responsive UIs.

The simple solution is, rather than caching the Event object (a bad idea any as it prevents it being garbage collected on other platforms), take what information you need from it, such as touch coordinates, and cache those instead.

Posted in Javascript, Technical | Leave a Comment »

Dynamically change deviceDpi on iOS

Posted by Shane O'Sullivan on December 13, 2011

When Apple released the iPhone 4 with a retina display, they quadrupled the pixel density.  This caused problems for websites, as all their assets would now look tiny.  To solve this, Apple made it so that websites would keep the old low density rather than the retina display, and would allow sites to opt in to using the hi-res display.

This is done by adding a <meta> tag to the header, like

  <meta name=”viewport” content=”initial-scale=0.5,maximum-scale=0.5,user-scalable=no,width=device-width,height=device-height,target-densityDpi=device-dpi” />

Note the 0.5 for the scale values.  This resizes the screen to take advantage of the full retina display.  Pretty.  To use the low-res version, the scale parameters are 1.

However, if you’re writing a static HTML based web app, with no backend, you can’t go sniffing the user agent to figure out whether to set the scale to 0.5 or 1 before generating the page, so you’ll have to do it in JavaScript.

Code!!

Here’s a simple script to do that, from my colleagues on the JSGameBench project at Facebook.  To use this, first put the meta tag above into the <head> of your document, with scale values of 1.

  if (window == window.top) {
        var meta_viewport = document.querySelector &&
          document.querySelector(“meta[name=viewport]“);
        if (meta_viewport && window.devicePixelRatio >= 2 ) {
          meta_viewport.setAttribute(‘content’, ‘user-scalable=no, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5′);
        }
  }

The script looks for the meta tag, checks if you have a hi-res Apple display, and switches the device screen scale to use all the pixels, not just one in four.

One more thing…..

If your web app uses CSS like

html, body {
  width: 100%;
  height: 100%;
}

to fit the app to the screen dimensions, and inside perhaps you have some JS based scroller, then you’ll need two further lines.  The script then becomes

if (window == window.top) {
  var meta_viewport = document.querySelector &&

    document.querySelector(“meta[name=viewport]“);
  if (meta_viewport && window.devicePixelRatio >= 2 ) {
    meta_viewport.setAttribute(‘content’, ‘user-scalable=no, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5′);
    document.body.style.width = ’200%’;
    document.body.style.height = ’200%’;
  }
}:

Without these extra lines, the page will only occupy one quarter of the screen, rather than all of it.

Now you have an app that looks right on older iOS devices, but still uses the hi-res screen of the iPhone4 for really sharp fonts and more.

Finally

Make sure that when designing your borders and other screen elements to use multiples of two.  E.g. have your borders be 2px, not 3px, so that when the phone divides them by two it’ll look right.

Posted in Technical | Leave a Comment »

CSS Box Sizing makes me happy

Posted by Shane O'Sullivan on September 13, 2011

Quick note: For anyone fighting for years against the CSS box model, where the visible size of an element depends on the sum of it’s width, height AND padding, check out the box-sizing: border-box;. It does exactly what we need, where if you say


.myclass {
width: 100%;
padding: 10px;
}

then myclass will still take up 100% width of its container, instead of overflowing.

https://developer.mozilla.org/en/CSS/box-sizing

Posted in Technical | Leave a Comment »

Quick canvas effect prototyping

Posted by Shane O'Sullivan on March 7, 2011

I’m doing some playing around with image processing on HTML5 Canvas elements, and so I’ve hacked together a simple page for prototyping different algorithms. Check it out http://chofter.com/EffectPrototyping.

The code abstracts away most of the complexities of working with Canvas elements, and just lets you get down to what you need: your pixel manipulation algorithms.  It provides a number of test images and examples to get you started, so have fun!

Oh and yes, it’s pretty ugly :-)

Posted in Technical | Leave a Comment »

Palm and the Mobile Expressionists

Posted by Shane O'Sullivan on January 28, 2011

Palm/HP have a new advertising campaign aimed at getting app developers all excited, and I was very happy to be a part of it.  Here’s hoping it helps give webOS the kick it needs to show developers how simple and fun it is to develop for.

Posted in Technical | Leave a Comment »

 
Follow

Get every new post delivered to your Inbox.

Join 535 other followers

%d bloggers like this: