Category Archives: Web Applications

Web Applications

Rounded Corners: Die! Die! Die!

If you’ve noticed that we don’t seem to have a lot of websites designed in screaming primary colours. We also don’t have a lot pastel coloured websites anymore (I liked them though). That is because every three years the design schools kick out a new wave of designers who spend five years regurgitating the received wisdom they have just learned.

What is the most insidious recent web trend? Rounded corners. What started as a kind of joke and an impressive hack to differentiate websites is now the stifling, boring norm.

Rounded corners are boring. If you add them to your website they make it look just like all the other websites in the world. If you create an image hack to implement rounded corners so they work on IE then you are actually mad. You are actually forcing users to download at least two images for the privilege of looking just the same as everyone else.

Currently the most exciting web design is Twistori which is an exercise in retro colours but take a close look at it.

Where are the underlined words to show me I can click on things? How can it create an entirely different ways to read text using font size alone? What is it doing?! I think, I think… it might be, the future.

I also quite like the look of GitHub, look at those panels, look at that negative space. Even the tab bar is square.

Tab bars are at the end of their lives too, there are too many and they look too alike. What you want to do is take that tab bar and turn it into massive words that are clickable. That would be awesome.

At least for a few years.

Standard
Software, Web Applications, Work

String Templates, or what I learned from Python and doing nothing

It’s an ill wind that blows no-one any good. The same is true of projects (although money generally helps more here; it’s an ill project that is making no-one any money).

I’m currently meant to be doing some work on Accessibilty for some new HTML pages. I thought it would be pretty easy but I was really wrong and it is changing the whole way I look at the View part of the (deceased) MVC web paradigm.

On my last project I was looking at things like Groovy’s Markup Builder and marvelling at how my collegues managed to put together a 30 line Freemarker template that did some pretty compex HTML assembly. In my spare time I have been looking at Haml as a way of escaping the verbosity and monotony of XHTML and to have the code guarantee the correctness of my page structure to avoid validation grind.

That’s because in those projects I was a developer/web designer. I wanted accurate, compliant HTML with minimum effort and which was easy to style without having awful CSS hacks.

On my current project I’m in the utterly baffling (for me anyway) world of .Net. There is no way that I can understand the huge variety of C#, XML and templating overrides that make up my current project. Having code generate HTML is a massive barrier to me being productive because, while I know a far bit of HTML having to root around an entire Visual Studio project to find the fragment that generates the problematic Div element you actually want to work with means I spend the whole day knowing nothing about .Net rather than applying the knowledge I do have.

Now some people are going to say that having a wacky Component model is different from having a nice templating language but look at something like Haml or Freemarker. The former is concise and fun and full of obscure rules; the latter is tremendously powerful, more firmly rooted in HTML and not much less obscure. For power users I agree, they are the bomb. They are a massive barrier to entry though, in a way that HTML just isn’t. People may do HTML badly but they rarely don’t do it at all.

This experience put combined with using Django/Jinja/Google App Engine is leading to me have a huge rethink about the way templating and views are put together. Passing a map of parameters to a template that is essentially exactly the way the output will look on the final device is obviously the way this problem should be tackled.

To try and get the HTML to generate in the current project I spent a day trying to get: SQLServer, BizTalk, Active Directory and Windows MQ to work together. This is utter madness and can only have been created by programmers who have no idea how to collaborate with non-programmers.

Why should I be trying to install BizTalk when what I want to do is actually generate some sample HTML so we can have a quick check of WAI standards? It should be possible to define some fixture data and then just generate HTML from the templates. It really shouldn’t be hard.

This experience is really changing the way I think about web frameworks. I am already determined to learn String Template, then I am going to look at whether my current favourite frameworks allow me to use it. I’m going to look at frameworks that ask you to put the HTML template next to the Java code. I want to know if I can put those templates in the same heirarchy that the actual website uses.

In short if I need to work with people outside the project team on a web project again, how can I get all the good things about templates and combine them with both simplicity and intuition as to how a website is organised?

Standard
Web Applications

Dropbox, how did you ever live without it?

If Distributed Version Control and their related source sites improved my coding life massively this year then Dropbox was a little piece of everything magic that dropped into my life.

Dropbox is a distributed file share system, for someone with multiple machines running multiple OS that’s pretty handy. Previously I had been using Jets3t and Amazon S3 to try and keep files in the cloud. That’s a great system but it has a major problem that Dropbox fixes effortlessly.

Data objects in your S3 buckets have no revision history, there’s only one copy of the object and when you upload the wrong revision of the file you clobber the correct version and then if you don’t notice you can quite happily overwrite later revisions of the file on your other machines.

Dropbox versions your files and allows you to revisit previous revisions of your data. It’s like a file share and source control in one awesome package. Dropbox also handles the synchronisation for you seemlessly. As soon as a file has changed and is accessible it is whisked away to the net. Your other machines synchronise on startup or when they reconnect to the web. The file copy is very fast for me but I tend to have lots of bitty files rather than monster sets of images I am constantly working on.

It also has some features that I haven’t tried yet like creating public URLs to data for general download.

Using Dropbox has radically simplified my life, my encrypted password files now synch between home and work machines without my having to do anything. I can work on documents as I get inspired without having to wonder whether I uploaded the latest copy to S3. All my worries about clobbering files are over and even if I can’t run the nifty client application I still get to access my Dropbox via the web interface.

Dropbox, for me has been an unqualified success.

Standard
Programming, Ruby, Scripting, Web Applications

Sinatra example

Since the Sinatra Project website currently seems to have been hijacked and directed to spam (the RubyForge page seems to be fine and is still a good introduction in its own right) I wanted to post an example of how to get going with Sinatra and also to highlight what makes it such a different approach to web frameworks. Here’s the example code on CodeDumper.

I wrote this with JRuby (for the cross-platform win). You’ll need to install the Sinatra, Haml and Mongrel Gems to get it to run.

It uses two styles, first there is the REST-ful extraction of parameters from the url and then there is the form POST submission. In both cases the code is pretty much the same as Sinatra extracts all parameters into the params hash.

I’ve inlined the Haml to make the example simple but normally the view templates would be extracted out of the code into separate files.

Sinatra is sometimes described as being as a web DSL rather than a web framework, it seems apt as it eschews MVC separation but instead by attaching code to routes directly it allows Controller code to be tiny and to delegate appropriately rather than putting in a heavyweight structure that might result in more frameworking code than actual “doing” code.

However one of the things I really like is something you can’t show in a code fragment and that is the ability to dynamically interact with your web application on the fly. Start up Sinatra, change the code of the file you’re running and your changes are reflected immediately. End the compile, deploy, view cycle! It kind of makes web programming fun again.

Standard
Web Applications

Who is I?

Want to take a new look at news feeds? Whoisi is a feed aggregator with a few distinctive features, firstly it is orientated around people, secondly it allows you to associate an individual with pretty much anything that provides an RSS feed, it is also an experiment with anonymous collaboration.

News feeds are organised around people (e.g. John Resig) and for people who just have one blog it isn’t very exciting but if someone has a Twitter stream, a blog or two, Flickr and a LiveJournal then suddenly you are looking at a consolidated view of everything that person is up to.

Which is either really cool or is the behaviour of a demented stalker. For people who have a strong web presence and are generally pretty cool and interesting then it is really useful to get a single view of them. For example John’s JQuery conference posting works better when you combine Twitter and the photostream.

I think I kind of prefer Whoisi’s liberal anarchy to most of the other sites I have seen. It asks important questions as to how the web should work. Why do we need accounts and passwords? If information is public then do individuals get a say in how they information they provide is organised?

Standard
Web Applications

Nicely Couched

Couch.it is the new wiki application on the block. I got pointed towards it because it is running on top of CouchDB. But having mucked around with it for a bit I have to say that it’s not just a good example of the kind of thing you can do with Couch, it is also the most exciting take on Wiki software I’ve seen for a while.

What is there to like? Well firstly there is the idea of the anonymous wiki that you can create on the fly. Products like GitHub have significently reduced the barrier to setting up an open source project. Just choose a name and that’s it you are away coding and sharing your code.

Couch.it is the same, got some text that you need to organise? Got some ideas you want to get down? Just create a wiki, write some stuff and then if it is working out claim it and give it a decent name. Couch.it just feels totally spontaneous.

It also totally resolves the issue between using a wiki-syntax (in this case Markdown) and having the pretty WYSIWYG interface. The near-realtime preview is fantastic and makes you wonder why you have ever had to click on another tab or button to see your preview.

The site has a really unfussy design (except for the goddamn rounded corners (stop it, this isn’t 2006)) but gives you a few customisation options.

The support has also been great and turnaround has been good on issues.

The subdomain naming is really easy to use, compare how easy it is to mucking around with settings in something like Google Sites.

If you are looking for a wiki or you want to see some CouchDB in action I totally recommend this site.

Standard
Web Applications

Microblogging Sites: Got to catch them all!

So I am currently using Twitter, Identi.ca and Jaiku (ask for invites if you want them). Of course to get every microblogging site I probably also need accounts on Plurk and Pwonce; at least. In fact in the time I typed all this there are probably another two or three that started up and which I need to get accounts on.

The good news about all this fecundity is that each system actually has some distinctive features and there is a fair amount of innovation and imitation amongst the players. Twitter has pretty much defined the genre but its agonisingly slow progress towards stability has meant that its feature set is actually pretty sparse. It is real bare bones stuff. Only the recent election page gives an indication of what a future Twitter might look like.

Laconica is open source and Identi.ca is clear on the ownership of the material on the site. Collectively they represent the open source solution to microblogging. The service also has the idea of tags that create a new way of reading posts and actually encourage you to connect to people you do not already know. Tags are really Laconica’s special sauce and as people use hashtags anyway I am sure it will not be long before all sites recognise them (particularly as Ping.fm and the like broadcast the same message to all the sites). For the moment though I love tagging stuff in posts and then looking at who else has posts with that tag.

Jaiku is part of the Google umbrella of services and you really notice when the ads appear. It makes you think “How does Twitter get by from week to week?”. Jaiku’s take on microblogging includes two special features, comments and channels. Comments are simply the ability to reply to other’s posts. Ironically the comments have no message limit (unlike the original post) and therefore comments on a post can become more forum post like. It’s interesting because it allows you to expand on the original topic but it also feels like something that defeats the whole purpose of microblogging.

The other problem with Jaiku is that comments do not appear threaded in your personal timeline so your contact’s comments float there with no context and you have to explictly root out what the comment is responding to exactly. This is, officially, rubbish; comment threads should work just like Facebook’s new comment system with threads appearing in your timeline in order and regardless of who you are following.

Jaiku’s channels are also a mixed bag, they again allow you to connect to people who share interests with you but who you don’t yet know. Great, but currently there are simply not enough people on Jaiku, this will change when people can login to the service with their Google ids but until then a lot of channels are filled with RSS feeds which is technically nifty but also spammy and boring. Being able to comment on RSS feeds is only interesting if there is someone else reading your comments.

The other problem is that channels are much more formal than hashtagging. The nice thing about Hash Tags is that you can drop one into your post and see if there is anything else similar. With a channel you have to open and own one and the lack of people means you effectively create a channel with one person and no posts. At least the hashtags guarantee that there is always one post for each tag.

Right, that’s the technical side of things out of the way. One interesting thing about having multiple blogging accounts is the way you can now start to divide your posting. Previously I was probably over-posting to Twitter; I hate people who post their breakfast as much as anyone but it is easy to slip into trivial updates.

Now with multiple accounts I am starting to segregate stuff. Since Twitter was originally about keeping the pulse with the distributed beast that is The ThoughtWorks I am keeping technical/work stuff there. Weird observations about London and more esoteric stuff is going to Identi.ca. Partly because I hope to find new cool people who like esoteric stuff via tagging.

Jaiku has struggled to find a niche in my microblogging ecosystem but I am starting to think that if we take discussion and conversation to be the primary thing Jaiku is about then the logical content is actually contentious stuff and posts about games.

I will be curious to see whether people begin using their accounts in different ways as well or whether they just spam all their accounts with the same stuff via a cross-posting application or website. If they do, then I think Twitter suffers most and Jaiku gains as you effectively gain the ability to annotate and enhance posts in Jaiku in a way that you cannot at the moment in Twitter.

Standard
Ruby, Web Applications

Haml: Round Deux

So, with a comment on an earlier post about Haml, saying that it had had a major update I decided to give it another go. This time in conjunction with the web framework Ramaze.

While Haml has definitely improved but there was a definite sensation of returning to an abusive relationship. Haml is very cool but it can also be a colossol bitch to use. Mostly because of its whitespace lovin’ ways. Care to punt as to what the root cause of this issue was:

Illegal nesting: content can’t be both given on the same line as %form and nested within it.

I’d put a space character between my attribute curly braces and the form tag declaration:

%form {:action => 'url'}

when I should have put:

%form{:action => 'url'}

Do I really need this level grief just to avoid writing closing tags?

Haml does, as its advocates say, bring a clean and clear syntax to the table but it also brings a bundle of its own issues along the way. Particularly time consuming is having to adjust indents when placing content at different layers. The strict two spaces rule means you have to adjust blocks and even if you set up your browser to do soft tabs at two spaces (just for one syntax) it is still easier to play around with markup than Haml.

One feature I did like a lot since last time is that variable interpolation is a lot easier now:

%p== My variable goes #{@here}

Inline tags are still hopeless but that’s true of mostly of the lightweight templating systems.

Standard
Web Applications, Work

The death of MVC

The MVC pattern is so embedded into the concept of modern web development I feel quite the heretic for declaring it over. Yet more and more I think we are moving away from it as a pattern. Views have been boiled down to a special case of templating and now Controllers are the next under the microscope. What does a Controller do? Well it marshalls the model and exposes it to the view.

However with the relentless march of REST how much controlling is the Controller really doing? The HTTP request tells you the format of the data, identifies the resource it is interested in. How much need is there for a controller for each request type? Surely the Uber Controller that responds to the HTTP request is all that’s required.

I have also been using Groovlets recently and when using them I feel like “why not mix your model lookup with the ‘view'”. In my Groovlets I essentially lookup the data for the view either directly via Groovy SQL or via the Service layer that is injected out of Guice. The view is then created using Markup Builder.

Since my scripts end up at around 50 lines of code I think that any benefit I might have in separating things is outweighed by the fact that the entire interaction is in one place and can be found, read and changed very easily.

MVC saved us from really painful web architectures but as we grow more sophisticated in the way we handle HTTP Requests and the more we understand the implications of HTTP and the less ceremonial our languages becomes the less benefit we get from it.

Standard
Groovy, Java, Programming, Scripting, Web Applications

Towards Groovier Projects

My latest project has witnessed an influx of Groovy. The project buildfile is run by Gant, there are Groovlets providing lightweight pages but it is in the test folders that the Groovy has made its most insidious advances.

Markup builder makes fragments of HTML to test, Groovy’s built-in Sql is beginning to setup and check the results of data operations at a functional level. Soon I plan to implement a Groovy Struts 2 result and then it will begin to replace Freemarker.

Standard