computers vs. people

Martin Wittmann's blog on User Experience and Web Technology

Today I wrote some crappy code (and I'm fine with that)

It's a shame

It's a shame but until 2 months ago the bills I sent to my customers were almost unstyled pdf files created in Openoffice. Everytime I wanted to send a bill, I had to open the last bill of that customer, change the date, bill number,... to correct values and put in the line items.

After more than 2 years fo being self employed I felt embarrassed about the way my bills looked.
So I tried to create a better looking bill in Openoffice but the very first thing I wanted to do (create a grey header background) was complicated, unflexible and still didn't look good.

Microsoft Office to the rescue?

MS office for sure would help me get that bill template done, so I set out to create the template I had in my mind in MS Word. This was when I realized that the basic problem in using a word processor is, that the very concept of a word processor as we know it, is not helping me to create documents but is hindering me.

I guess we all tried to position images in Word documents and at least for me most often this broke my text formatting and left me frustrated.

Back to the future!

I felt it in my stomach. For quite a while.
I knew there must be a better way to create, structure and reuse documents.
I knew there is a technology that separates content from layout and is easily and commonly used, standardized and most importantly feels like the right way to create and edit documents.

Nope it's not LaTex.
For a very long time I have worked with Html on a daily basis.
It was sitting right in front of my face!

The only problem with Html is was that there was no easy way to create printable documents. (Printing directly from the browser has never led me to good results. Page numbers, Missing backgrounds,...)
So I came across PhantomJs which is not even very new anymore.
(If you never heard of it: It's a Webkit and Javascript API that lets you render Html to Images and Pdfs among other things)

A New Hope

I copied parts of an example and created a Js file which let me specify a Html file and create a printable pdf out of it. So I still had to manually edit templates but at least I was able to create a bill layout with which I was comfortable.

But manually editing files is quite error prone and editing Html files, executing a shell command and the checking the result felt like I was working 10 years ago. This led me to the point where I wanted the following:

  • A webapp that lets me list, create and edit bills (I still didn't implement deleting)
  • Automatically create a correct Bill Number and date
  • Chose a customer and set its Name, address,...
  • A rough live preview of the created bill
  • Choosing payment options (send the money, already paid, no payment text)
  • Automatically creating, naming and updating the pdf file when saving a bill

I think that's the whole feature set.

So i took that little Php framework structure of mine (Drupal just felt too heavy and would net help me a lot in this case), put in a controller, 2 models and some views. Duckt tape that whole thing together and made it work for me.

There are about 15 css rules (apart from the bill template css), about 60 lines of js code and roughly 600 lines of undocumented php code.

After making this thing work, I realized that all code we write should be valued under its contraints.
If I write code that should work for thousands of people, scale well, be read and changed by many developers I will think twice before every statement I put into my code. But if the only person using and developing this is likely to be me I can even name variables after musicians I like if that makes me happy.

So the real things I learned writing billy (that's the working title) are that making something just work is awesome and that the efforts I put into writing the best code I can, should also include thoughts about the projects contraints.



Add comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.