Skip to main content

The Programming Designer

Most developers prefer to seperate design from functionality. This is a noble goal, but sometimes hard to implement. In my experience developing web applications, the most typical collision between design and functionality happens in JavaServer Pages, the most typical templating format of web front-ends in Java web applications. Most readers know JSP's, but for those who don't, think of it as Java's PHP, or the templates we use for producing HTML.

However, a problem which is still at large in web applications today is that these templates are designed by Java developers, or pure programmers with little knowledge of web design and web standards. Or worse, programmers that believe they do know web stuff when they actually don't, or don't know how important the web front-end really is.

The problem with programmers doing these JSP's is that that they are doing design, sometimes even when they don't have to. The classical example of this is putting layout of the entire page in<>'s because they can't handle CSS. Tables are even used for lists. They embed JavasScript and styles in the HTML. If they do use CSS, they might inconsistently use classes and id's.

And by the end of the day, the result of the programmer's futile attempts at doing web design ends up plain ugly.

Then to the rescue: The web designer.

The web design is delivered in the shape of a couple of example static HTML pages with CSS and JavaScript files attached. Shipped and dropped in the lap of the programmer.

What follows are several strenuous days of the programmer picking at the JSP, trying to make the web design fit and look like the web designer's example.

There are two ways to avoid this pattern. The first one is: Programmers, steer clear of web design. Just leave the design till later on. Learn the basic DOM-elements of HTML you will be producing, and use it in a consistent way.

But remember that no matter how well the programmer uses div's and id's in the most elegant scheme of definitions, the web designer will definitely come up with his/her own ones that must be complied with across all the JSPs in an application (and there are often quite a few of these, mind).

The second way to avoid the pattern is the programming designer. The programming designer is a very rare breed. They are creative personas with an understanding of usability, colors, spaces and kindness to the eye in general. They also have basic skills of programming, master CSS and JavaScript, and are in essence able to work on the same JSPs as the programmers do. Not creating functionality or content though, but simply tweaking the div's and the id's.

Needless to say, the interests and motivations of a designer are very far from those of an innate programmer. I think one could even draw the conclusion that these two professions draw quite opposite personality types. Perhaps this is also why we often detest the products of eachother.

Me, as a programmer for instance, I hate doing web design. I can never figure out a set of good colors that work. I can't get CSS stuff working, it's just stuff bouncing around. And personally, I'm a functional person, not esthetical. I can't see the point of improving design once you have achieved usability, although I do of course recognize that there is an actual need for this in attracting use and success of an application. What more, I envy this effect that often leaves the designers being the heroes of a successful web application as they make the outlook, the good looks, the bells and whistles.

Good architecture and good programming goes unnoticed (meaning that it only gets noticed when it's done badly). Yes, I am jealous :)

Still, spite the gap between our personas, I have seen programmers successfully venturing into the world of web design, as well as designers learning the skills and becoming adapt programmers. Some have even been doing both since they started of with their own LAMP application and had no way of outsourcing design nor programming. These are programming designers. I believe that EVERY web application project should bring one of these on board.

They have a role all throught the project. From the beginning they can maintain a prototype application of static HTML pages. Moving on the start assisting the development of the infant JSPs, making sure that the programmers take no wrong turns in the use of HTML. Continually, they do their magic and paint the functional application with their magnificent colors, scripts, images and layouts using the optimal techniques of seperated CSS and JavaScript files. They ensure that the application follows all relevant standards of W3C, ensuring accessability and correct design in all Internet browsers.

I would also like to note that inversion of design/design injection can be done with SiteMesh, which is a great tool for templating and page modularization. This is a good way of giving the programming designer a file/decorator/template where he or she can work freely while not interefering with the tangles of the programmers.

Popular posts from this blog

Encrypting and Decrypting with Spring

I was recently working with protecting some sensitive data in a typical Java application with a database underneath. We convert the data on its way out of the application using Spring Security Crypto Utilities. It "was decided" that we'd be doing AES with a key-length of 256, and this just happens to be the kind of encryption Spring crypto does out of the box. Sweet!

The big aber is that whatever JRE is running the application has to be patched with Oracle's JCE in order to do 256 bits. It's a fascinating story, the short version being that U.S. companies are restricted from exporting various encryption algorithms to certain countries, and some countries are restricted from importing them.

Once I had patched my JRE with the JCE, I found it fascinating how straight forward it was to encrypt and decrypt using the Spring Encryptors. So just for fun at the weekend, I threw together a little desktop app that will encrypt and decrypt stuff for the given password and sa…

Managing dot-files with vcsh and myrepos

Say I want to get my dot-files out on a new computer. Here's what I do:

# install vcsh & myrepos via apt/brew/etc
vcsh clone https://github.com/tfnico/config-mr.git mr
mr update

Done! All dot-files are ready to use and in place. No deploy command, no linking up symlinks to the files. No checking/out in my entire home directory as a Git repository. Yet, all my dot-files are neatly kept in fine-grained repositories, and any changes I make are immediately ready to be committed:

config-atom.git
    -> ~/.atom/*

config-mr.git
    -> ~/.mrconfig
    -> ~/.config/mr/*

config-tmuxinator.git  
    -> ~/.tmuxinator/*

config-vim.git
    -> ~/.vimrc
    -> ~/.vim/*

config-bin.git   
    -> ~/bin/*

config-git.git          
    -> ~/.gitconfig

config-tmux.git  
    -> ~/.tmux.conf    

config-zsh.git
    -> ~/.zshrc

How can this be? The key here is to use vcsh to keep track of your dot-files, and its partner myrepos/mr for operating on many repositories at the same time.

I discovere…

Always use git-svn with --prefix

TLDR: I've recently been forced back into using git-svn, and while I was at it, I noticed that git-svn generally behaves a lot better when it is initialized using the --prefix option.

Frankly, I can't see any reason why you would ever want to use git-svn without --prefix. It even added some major simplifications to my old git-svn mirror setup.

Update: Some of the advantages of this solution will disappear in newer versions of Git.

For example, make a standard-layout svn clone:

$ git svn clone -s https://svn.company.com/repos/project-foo/

You'll get this .git/config:

[svn-remote "svn"]
        url = https://svn.company.com/repos/
        fetch = project-foo/trunk:refs/remotes/trunk
        branches = project-foo/branches/*:refs/remotes/*
        tags = project-foo/tags/*:refs/remotes/tags/*

And the remote branches looks like this (git branch -a):
    remotes/trunk
    remotes/feat-bar

(Compared to regular remote branches, they look very odd because there is no remote name i…

Considerations for JavaScript in Modern (2013) Java/Maven Projects

Disclaimer: I'm a Java developer, not a JavaScript developer. This is just what I've picked up the last years plus a little research the last days. It's just a snapshot of my current knowledge and opinions on the day of writing, apt to change over the next weeks/months.

We've gone all modern in our web applications, doing MVC on the client side with AngularJS or Ember, building single-page webapps with REST backends. But how are we managing the growing amount of JavaScript in our application?
You ain't in Kansas anymore So far we've just been doing half-random stuff. We download some version of a library and throw it into our src/main/webapp/js/lib, or we use it from a CDN, which may be down or unreachable when we want to use the application..

Some times the JS is minified, other times it's not. Some times we name the file with version number, other times without. Some times we get the latest library of master branch and name it with the commit-id in the fi…

Microsoft ups their Git efforts another notch

This week Microsoft announced first class Git support embedded in the coming version of Visual Studio.

Now, it's not completely shocking. We could have seen it coming since Microsoft started offering Git repos on CodePlex, and more recently offering a Git client for TFS. In any case, these are some big news. Scott Hanselman weighs on some features and some more background here.

For those who are a bit unaware of what the Git situation on Windows looks like these days, I've dotted down these notes:
Some explanation on these:

msysGit has long been The Way to use Git on Windows. It's basically a port of Git itself, so it's a command-line tool.GitExtensions (includes Visual Studio integration), TortoiseGit, Git Shell, posh-git and most other tools are powered by msysGit.libgit2 is a native library for doing Git stuff. It is developed completely separate from Git itself. The above tools could (and should) probably use libgit2 instead of hooking onto and around msysGit.Github…