July 17th, 2013

CSS abstractions done right

Posted in Code |

Summary

Don’t start coding at the abstract level. Arriving at the right abstractions is a process that requires multiple passes – also known as refactorings. What you should do, is start solving the problems at hand – we call these “implementations” – and then gradually identify redundancies. Redundancies have the potential to become reusable abstractions. We call these “patterns”.

The problem

Don’t get me wrong, I totally respect the work done by the authors of CSS frameworks such as Bootstrap or Inuit.

They’ve done a great job identifying and implementing some common layout patterns and making them easy to reuse. Read the rest

September 17th, 2012

TDCSS.js

Posted in Ikke kategoriseret |

Test driven CSS development

I’m a huge fan of test-driven development!
Almost every day, I make use of unit tests when writing Javascript. TDD helps me focus my development on singular tasks, and it enables me to easily verify that all my stuff works after refactorings or other kinds of changes.

One day I thought: “Why don’t we have this for CSS?”.

CSS – especially for large projects with many developers – is a major pain!
There are no clear-cut rules for modularity, the inheritance mechanisms are obscure, and the runtime environments (the browsers) are still no way near consistent in their interpretations of style rules. Read the rest

May 23rd, 2012

Specs and creativity

Posted in Code, Creativity |

Today I became aware of the existence of the Joel Test – a list of questions for assessing the quality of a software development team:

  1. Do you use source control?
  2. Can you make a build in one step?
  3. Do you make daily builds?
  4. Do you have a bug database?
  5. Do you fix bugs before writing new code?
  6. Do you have an up-to-date schedule?
  7. Do you have a spec?
  8. Do programmers have quiet working conditions?
  9. Do you use the best tools money can buy?
  10. Do you have testers?
  11. Do new candidates write code during their interview?
  12. Do you do hallway usability testing?

Read the rest

April 26th, 2012

Growing software

Posted in Code |

Next time you refer to software development as “building” something, there’s a good chance that you’re doing damage to your project.

The construction metaphor is widespread in software and IT, and there are several reasons why:

  • It sounds like you are creating a thing which can be assessed on its’ own in absolute terms – detached from the social reality of its’ inhabitants or users.
  • It sounds like you are doing something, which will eventually be finished.
  • It makes software engineers and architects seem more like “real” engineers and architects.

All of this sounds very serious and reassuring to clients.

But the worst threat to problem solving is misunderstanding the nature of the problem. Read the rest

February 24th, 2012

Benchmarking the jQuery DOM ready binding

Posted in Code |

After a discussion with a colleague about the pros and cons of using a lot of $(document).ready(function(){ … }) statements across a project, I decided to measure the raw performance of the event binding itself.

Both of us agreed that extensive use of this statement represents a sort of code-smell – that it’s probably a sign that your Javascript needs better structure – and that this, in turn, will probably lead to bad performance in one way or another.

But that set aside, how about the statement itself?
Does it incur a performance hit?

Here’s the code I used for testing:

var no_of_bindings = 100;
 
function bind(){
    for (var i = no_of_bindings - 1; i >= 0; i--){
        $(document).

Read the rest

November 22nd, 2011

How to use Knockout.js with XSLT

Posted in Code |

As you may know, Knockout.js uses inline Javascript for it’s elegant, declarative bindings:

<li data-bind="css: {'active': visible()}"></li>

But if you use XSLT to render your HTML, it may fail because the curly-braces may not be supported in attributes.

To make this work, you need to do two things:

  1. Convert the attribute:

    data-bind="..."

    into an

    <xsl:attribute name="data-bind">

    Like this:

    <li>
     <xsl:attribute name="data-bind">
      css: {'active': visible()}
     </xsl:attribute>
    </li>
  2. Do a search and replace exchanging the curly braces with XML-safe entities:
    	"{" to "&#123;"
    	"}" to "&#125"

    So the final XSLT should look like this:

    <li>
     <xsl:attribute name="data-bind">
      css: &#125'active': visible()&#125
     </xsl:attribute>
    </li>

     

Ugly, I know! Read the rest

September 20th, 2011

DropCheck: A magic checklist using Dropbox and Knockout.js

Posted in Mobile |

Ever created a todo list in a .txt file, then popped it into Dropbox for iPhone viewing?

I do it all the time! That’s why I created DropCheck.

 

DropCheck

DropCheck is a web app that turns lines in a .txt file into checkable lines in a nice web app interface.

It’s tailored specifically for grocery shopping, as this is a common use case for me.
You have the ability to tick off each item as it goes in your shopping cart (“Yes”).
Or you can mark it as sold out (“No”).

At the bottom you can move the checked items to the bottom of the list, so you have them out of sight. Read the rest

October 25th, 2010

My Photoshop wishlist

Posted in Design |

Color variables

Imagine changing the color scheme of an entire design with flick of a switch. This would be a real time saver.

States (like hover states or ajax states)

We’ve got layer comps. Now make them interactive. Maybe something like Axure.
Right now, Fireworks is just too complicated to bridge the gap between prototyping and proper graphic design.

Hide layers (like hide tracks in Logic)

In Logic, every track can be hidden if they’re not used. This drasticly reduces clutter in the arrange window.
Why not make this possible with layers in Photoshop?

Version Control

In code this is indispensable. Read the rest

October 8th, 2010

How to make CSS3PIE work

Posted in Code, Design |

CSS3pie

Countless hours have been lost creating rounded corners, dropshadows and gradient backgrounds for the web.
With Internet Explorer still lacking support for CSS3, until recently it seemed like we would have to keep doing tiny graphic sprites (or implementing dirty javascripts) in order to accomodate the demand for such UI niceness.

Enter: http://css3pie.com/
PIE is a .htc CSS behaviour script that enables support for dropshadows, rounded corners and background gradient CSS3 properties in Internet Explorer – all the way back to IE6!

Of course, I couldn’t wait to try it out.
And it didn’t work.
Bummer …

Fortunately, I found out why:
It only works on positioned elements. Read the rest

February 16th, 2010

Useful PHP libraries, part 2 – Scaffold CSS

Posted in Code |

NOTE: This post describes a library which has been discontinued. These days I use SASS instead.

Scaffold CSS was developed by Anthony Short and it is every CSS-coder’s dream come true:

Variables, nested selectors, abstractions from vendor-specific properties etc. etc. etc. Good stuff!

Installation and usage couldn’t be simpler! (Really. I don’t see how it could!)
You place the library folder in whatever folder holds you CSS-files. Then you copy-paste the .htaccess-file that redirects every request for your CSS-files to the library. Scaffold then reads through your CSS and interprets whatever tricks you’ve written and serves up nicely formatted (or minifed, if you prefer) W3C-compliant CSS. Read the rest