Twitter bootstrap

A few weeks ago, we built a new internal tool at work. Developing this very UI-intensive application required me to write more javascript, CSS and HTML5 and less C# than I’m used to. The process of writing so much javascript in a structured way is worth a blogpost of its own. For now, I want to focus on how we created the layout.

For an internal tool like this one, functionality is much more important than design. But although there’s no designer involved, people expect it to look good anyway. So I started looking for a quick way to make a decent layout. I could use a template or framework of course. But I was a little reluctant to that, because in the past that often resulted in me fighting the template, to ultimately end up with a less than optimal solution.

And then my colleague Thomas (who helped me build this app, even on a Sunday!) suggested to use the Twitter bootstrap framework, the UI framework created by some smart guys at Twitter. I checked it out and was pleasantly surprised…

Image

I instantly liked it, mainly because:

  • It’s very easy to get going
  • It has everything you’d expect in such a framework
  • The documentation is good
  • The design itself is very clean
  • As far as I could tell, it follows common conventions (both in layout and code)

But what I like most about it is the philosophy it follows. The way everything is structured just makes sense, even to someone who’s not a UI specialist. Just glance at the following snapshot, taken straight from the docs:

This is the kind of html you’ll be writing to do 80% of the work. Nothing complicated here. It’s completely void of any boiler plate code you’d typically have to write.

Finally, the knowledge you gain by using a framework like bootstrap is very relevant. It’s not about learning to work with a bunch of very specific abstractions. It’s submerging yourself in a coherent set of best practices presented in the best way possible: a working and modular framework.

Conclusion: Twitter bootstrap is a very useful framework for prototyping and developing tools and backend systems. I’m not sure how it fits in other use cases (as the base of a large website for example). As with all frameworks, It’s probably not the holy grail for all types of webapps and websites in the world. Anyway, I highly recommended it and will certainly use it again in future projects.

Side note: another great thing that we ended up using the (optional) LESS version of bootstrap. Checking out LESS was on my TODO list for a while, and I’m glad I had a hands-on start now.

Advertisements

Bram’s toolbox: Evernote

Let’s kick off this relaunch of my blog with a series: Bram’s toolbox. It’s a simple concept: I introduce a tool/application that I’ve been using for a while and that makes me happy while I use it.

Today’s tool of choice: Evernote – an application to manage notes.

When I started using this application a few months ago, I instantly liked it. I’ve been using it ever since, stockpiling notes like a maniac. I’ve used a lot of other approaches for managing my notes in the past, and they all sucked. But this just feels right.

My evernote account currently holds more than 500 notes. This is a massive amount of information that would be hard to manage with most other tools. Can you imagine working with 500+ word docs organized in folders?

Some of the stuff I store in it:

  • Interesting things I read about programming. And that’s a lot of content!
  • Interesting articles about various subjects (news, history, health, lifehacking,…)
  • Guides to games I play
  • Guitar tabs
  • Some really funny pictures
  • Recipes
  • My own ‘sysadmin’ notes about configuring  PCs, smartphones and networks
  • Some blogpost drafts
  • Small code snippets
  • Inspirational stuff, like interior designs and website designs
  • My own notes about programming, e.g. libraries I used, tricks, procedures,…
  • Memories of nice moments (picture + quick notes)
  • Interesting tweets
  • General notes about… Anything
  • Inspirational/funny quotes

What I really like about evernote:

  • The web clipper. So much better than bookmarks, because… It saves the html and images for eternity.
  • The free account, which I use, is good enough. I’ve never hit any limits so far.
  • It just works
  • Store massive amounts of information without thinking about ‘files’
  • Easy searching, tagging etc.
  • Organize stuff YOUR way. The application doesn’t get in your way
  • Don’t waste time creating ‘documents’ with a ‘layout’ in a ‘folder’ when all you want to do is dump text and hit ctrl + s

Things I don’t do in evernote:

  • Everything that involves dates (that stuff gets messy fast, and belongs on my google calendar)
  • Overviews of stuff I’m currently working on, todo lists, goals I need to keep track off etc => those things go in Trello, which is another great app that I will feature in this series.
  • Links to websites I visit regularly. That’s what bookmarks are for.

Anyway, hopefully this post helps someone. I personally know some chaotic bookmark-hoarders who would certainly benefit from using Evernote. 🙂

Disclaimer: I’m not affiliated with any tools I promote in this series. I don’t get any money or perks.