patient front end development

Consider this a specific example of how ‘slow’ development (The Case for Slow Programming, Slow is Not a Dirty Word, even The Quick Hack v. Developing Software from this week) can lead to a quicker development pace over time.

Impatient (fast) front end development includes pulling in plugins that (almost) work for the current use case of a new widget. Whacking at them until they do, and moving on.

Writing code to address only what the current use case needs is great. The best case scenario is doing so in a manner which allows extension without further (w)hacks or a re-write. Getting there requires time to consider potential uses of the ‘widget’.

I was asked to extend such a ‘widget’. The original design mockup:

The development decision process resulted in the switch button being implemented with the Switchery plugin. Its default appearance:

Definitely similar to the design. Switchery could work if its implementation can be adjusted maintainably to accomodate the differences.

The primary change was to add the copy, added to the widget through css:

.switchery {
    width: 75px;
.switchery::before {
    content: "Inactive";
    position: absolute;
    top: 0;
    right: 5px;
    left: auto;

Initial results in a browser:

Sacrifices have already been made because of the Switchery implementation.

And, pulling in the plugin added ~300 lines of js, ~60 lines of css.

The next request to use this widget:

Primary differences bieng:

The path to extend for this case appeared tedious. And in the case of the space around the ‘switch indicator’, would have required modifying the switchery js which calculates the position and sets an absolute position.

Just to change the copy:

.switchery.publish {
    width: 140px;
.switchery::before {
    content: "Not Published";

This felt strange, not maintainable. Adding new css every time the ‘widget’ needs new copy felt silly. Even updating the Switchery js to accept options to set the text would have been cumbersome.

An early quick win had resulted in subsequent painful (slow) development.

Instead of continuing with Switchery, I spent a few hours to create something that would allow more flexibility for later uses, and hopefully less complexity.

Example here.

This is now more flexible for different sizes and labels with its:

This widget did lose one thing that Switchery provided, the background color does not change with the same ‘fade to and from center’ effect. The product and design team did not find this important.

posted: 01/14/2015