TNBT: Bringing Code Together

12. July, 2012

If you develop web apps, you have a workflow like this:

  • Repeat forever
    • Edit code
    • Deploy to server
    • Check in browser
    • Tweak HTML/CSS in browser
    • Find the location in the code which is responsible

Sucks? Yes. But until recently, there simply wasn’t a better way to do it. Only Eclipse allows to run am embedded web browser in your IDE but there is no connection between the code and the output. There usually isn’t a connection between related parts of the code. Or can you see all the relevant CSS styles while you edit code that generates an HTML tag? I mean: Can you see the CSS styles for “.todo” when you hover your mouse over code that means “send ‘class=”todo”‘ to the browser”?

Meet Brackets and see how awesome your IDE could be. If seeing is believing, here is the video:

Related Articles:

  • The Next Best Thing – Series in my blog where I dream about the future of software development

HTML5 Boilerplate

18. August, 2011

There is a lot which you can do wrong when starting a new web site from scratch. The HTML5 Boilerplate project tries to help you there.

It contains a sane project layout, many useful JavaScript libraries, a default CSS that will make your page look the same on (almost) any device and smart CSS selectors that allow you to work around problems with browsers and devices which don’t behave well (small screen, IE6 bugs, no JavaScript enabled, you name it).

Two Awesome Browser Demos

16. June, 2011

HTML(5) is starting to take off.

aqu4rium is a demo for a GWT based game framework which mimics an older IE9 demo Fishietank. My numbers: 250 fish, ~56FPS, load 0.1. is a 3D music video with interactive effects. After the video, you’ll be redirected to a page with lots of technical details, source and example code.

Efficient CSS

26. May, 2011

Is “.first” faster or slower than “li.first”?

This blog post has some answers: Efficiently Rendering CSS

HTML Generator in Java – renderSnake

19. March, 2011

There is another HTML generator: renderSnake. Here is how it looks:

public class Logo implements Renderable {
    public void renderOn(HtmlCanvas html) throws IOException { //@formatter:off

                            .style().write(".snake { color:yellow; }")._style()

                    .h2().write("lean and mean HTML page writing machine")._h2()._div()


I’m not sure about the “_” versions but it sure looks better than JSP 🙂

Related articles: Simple HTML Output From Java Using renderSnake

Printing web pages

19. November, 2010

Today, I tried to create a CSS file so readers of my stories can get a nice looking printout. Or so I thought.

The cast: Opera 10, Chrome 7, Firefox 4, Konqueror.

The task: Print plain text, two column, 2.5cm left margin.


Opera has one of the best print drivers for HTML. No other browser comes even close. But no support for column-count.

Chrome 7

Webkit does support column-count but not the official CSS3 style. You need a special attribute called -webkit-column-count. Cool.

What’s way less cool is the fact that the printer driver doesn’t support it. You can see it, but you can’t get it, baby.

Firefox 4

With -moz-column-count, you get two columns which make it into the printed page … but what is that huge left margin doing there? That looks like I get only 70% of the page for my text! There are three menus where I can “Setup page” but none of the dialogs behind them allows me to modify the huge print margins! What gives?


You’re kidding, right?

With the Webkit module, the print output looks mostly the same as in Chrome. With the KHTML module, I can’t even get two-column text.


The WWW was invented 1991. That was twenty years ago. Two decades. And web browsers still can’t get something right that bored TeX in 1984.

New W3C validator: Unicorn

4. August, 2010

The W3C has rolled all their validators (HTML, XML, CSS) into one: Unicorn.