Slow Thoughts, Quick Write

I commit to write something down everyday for a year.

Google “Keep” Launches

Sound Software Design Practices

Software design is a creative process since by nature each piece of software is unique. However, there are still some sound practices that the practitioners of software design can agree upon: 

  1. Separate view, business logic, and data persistence (MVC, MVVM, etc)
  2. Inversion of Control
  3. Asynchronous I/O 
  4. Scale out 
  5. Unit test
  6. Loose coupling
  7. Favor data over code
  8. Adaptable data format
  9. Fault recovery

Using these, we can compare one design with another along different dimensions and hopefully make better decisons

Use spacing/padding to make touch friendly UI

To make your UI affordance touch friendly, consider increase the touch target zone to be at least 40 px by 40px. However, this doesn’t mean to have icon graphic or typographic size set to be 40px (in fact, doing so would make the UI/chrome feel heavier). For mobile web, the tension between touch target sizing and content sizing can be balanced with extra padding of the hit target element. For example, keep icons at 16x16 while add padding of 12 around it makes the button more touchable

Add ‘ellipsis’ behavior to multiline text DIV element

With CSS3 you can set text-overflow to ‘ellipsis’ for single line text content (use with white-space:nowrap and overflow:[otherthan visible]). For those times when you have multiple line of text of which you only want to show the first couple, you can use jscript to achieve the same effect. See the following jsFiddle for a demo 

jQuery plugin for maxlength on textarea

color picking fun

simple yet effective color picking site

Zip tie way of product design

According to this wiki entry zip tie was originally invented as airplane electric wire fasteners. Now it is a household item sold in bags of 100s to tie  all kinds of thing that otherwise hard to collect and organize.

Lets compare the use of zip tie to its main alternative, twine:

  • Zip tie is more expensive than twine
  • Zip tie is single use while twine can be reused
  • Zip tie is much easier to use and more creates better/tighter/stronger bundling
  • Zip tie needs to be bought in specific length, twine can be cut to the length needed

Looks like the only advantage (for household chore at least) zip tie has over twine is the ease of use (no need to learn to how to tie a good knot) and consistent result, yet zip tie is evidently far more successful.

Does this mean that if a product design solves even one aspect of a user problem in a totally awesome way, then it is going to get breathing space to compromise (cost, flexibility, reuse-ability)?

Don’t check jQuery.css() value when jQuery.hasClass() will do

Looks like jQuery is using the computedStyle to return any $.css(name) query. For css measurements expressed in % (percentage), this is going to behave differently across different browser. It seems that WebKit browser will return the original percentage value, but IE and Firefox will return the computed ‘px’ value. 

In short, if you have code that does ‘if ($div.css(‘top’) == ‘50%’)…’, most likely this is  going to break on IE and Firefox. Instead, see if you can isolate the css property in a separate class (like ‘.vertical-center {top:50%}’) and use ‘if ($div.hasClass(‘vertical-center’)) …’ instead.

Did this Samsung commercial diss the PC?

The commercial below has been aired over NFL games a lot lately. If you think about the scenario “doing two things at once at office”, then wouldn’t it make more sense to do it on a PC? If I look closely at the video, I can see a PC monitors at the lower right corner of the opening frame, and a keyboard on the desk  later in the clip. The PC is blended with other furnishing of the cubicle like shelves full of binders; in other words old stuff.

So intentionally or not, Samsung is saying PC is no longer relevant, like file binders are not that relevant. 

-ms-touch-action css property makes mobile web tricky

From MSDN documentation on -ms-touch-action (italic mine)

"When a user touches an element, that element’s -ms-touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.

The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.

If a default touch behavior is not invoked, Document Object Model (DOM) events will be fired for that contact instead”


This proves tricky for scripting any touch event handling with IE10, since the touch/pointer events won’t get fired if -ms-touch-action is anything but ‘none’. For example, if I want to add a side swiping gesture handler to a vertically scrolling stream of contents (say posts). I have yet find a way to turn off -ms-touch-action as part of MSPointerDown event and add the pointer of the event to the gesture.

Still searching…