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.

ro.me 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
        html
            .div(id("logo"))
                .div(id("logo_text"))



                    .h1()
                        .a(href("index.html"))
                            .write("render")
                            .style().write(".snake { color:yellow; }")._style()



                            .span(class_("snake")).write("S")._span()
                            .write("nake")
                        ._a()
                    ._h1()
                    .h2().write("lean and mean HTML page writing machine")._h2()._div()



                ._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

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?

Konqueror

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.

Conclusion

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.


Jazoon 2010, day 3

7. June, 2010

The last post of the series (day 1, day 2).

The Gaia satellite and Data Processing by William O’Mullane

The day started with some astronomy. Gaia is another effort for a complete sky survey (like it’s predecessor Hiparcos). It’s a “cheap” mission by ESA which costs “only” 600 Million Euros (most space missions start at 1 Billion). It’s interesting how they keep pushing the limits today. Gaia will orbit L2, 1.5 million km away from Earth (the Moon is only 300’000km away). If something goes wrong, there is no way to fix it (which is why most systems are redundant except for the main mirror, for example). The main camera has 170 CCD chips. A huge effort is taken to determine the exact position of the satellite, it’s rotation speed, precise orientation, the position of the components (like the main camera in relation to the main mirror).

It will generate such an enormous amount of data that most of it will have to be thrown away on the craft before it is downloaded. The data will be available to anyone … anyone who can store a couple of petabytes at least (1 petabyte = 1000 terrabytes).

The mind boggles 🙂

Essentials of Testing: The Tools You Need to Know by Bettina Polasek and Marco Cicolini

My topic 🙂 The talk showed how they selected a couple of tools from all the available ones out there by functionality, how they support and complete each other and how well they are supported. Here is the list they came up with:

  • jDepend to know who uses what
  • GlassFish as a means to run J2EE tests out- and inside a container
  • HtmlUnit for testing web pages outside the browser (faster than Selenium but doesn’t catch all kinds of errors)
  • Selenium for testing web pages inside the browser. Slower than HtmlUnit but can test browser specific quirks.
  • PMD to keep your code clean.
  • FEST stands for “Fixtures for Easy Software Testing” and is a library to make testing more simple. For example, you’ll find code here to test Swing UIs or mock the classes you need outside the scope of your test.
  • Mockito, a mocking framework. It takes mocking to the next level with fluent interfaces.

Rapid Application Development with Apache Wicket by Andrew Lombardi

Again a tough one. I’d have loved to attend Using Software Metrics to detect refactorings by Thomas Haug.

Wicket is another web framework for Java. “Why another one?” I hear you wail. Because they all suck? Being an Apache project, Wicket tries to suck less. It’s fully mavenized and builds upon a component framework (the simple ones are built in and you find extensions on wicketstuff.org).

Wicket revolves around the idea that you give it a plain HTML (with almost no extensions) and a piece of Java which connects parts of the HTML with the code so you can simply render your pages from these components.

I’m not 100% sold, yet. Wicket was started around 2005 and has been under the radar most of the time. This can mean that it doesn’t solve all the problems. We’ll see.

Lunch break.

Building DSLs with Eclipse by Peter Friese

I’m a huge fan of code generation. A lot of code that we write is actually pretty repetitive and I really miss my preprocessor from the good old C days. Of course, today, it’s called Model Driven Development and we use XML and model transformation and EMF and the like but still.

Peter showed how to build a small DSL with Eclipse Xtext and generate code with the help of Xpand.

Kids, when you play with DSLs, always remember:

  1. They should be limited. Don’t build general-purpose programming languages with it. Less is more (less time spent debugging and hair pulling in this case).
  2. Know what you want to achieve. The tools won’t help you there.
  3. Know your tools. You can write Towers of Hanoi in SQL but it’s not as much fun as using JavaFX instead.

After the talk, I had a long chat with Peter about DSL debuggers. To make them work, we must have (at least) the following information:

  • Position in the input stream
  • Which DSL rule was applied
  • Which template contributed code
  • The state of the session at this time (values of all parameters, etc)
  • All user supplied transformations which were applied
  • Position in the output stream
    1. Only this huge amount of data will allow us to create meaningful “stack traces” if we want to debug DSL modeling problems.

      Spring ROO – A New Level of Enterprise Java Productivity by Eberhard Wolff

      I skipped most of the talk because I juggled ideas with Peter about DSL debuggers.

      Most of my problems are still there and will be solved by Roo 1.1 (couldn’t find out a release date for that).

      My major objection with Roo: It actually generates all the code. With Grails, for example, I get a controller but the class is empty. This makes it obvious where the defaults are being used. Roo, OTOH, copies a whole slew of code and files into your project when you create a new controller. This is code that you don’t know but which you’ll have to maintain.

      High Performance File IO: the Perl/Java battle by Daniel Eichhorn and Stefan Rufer

      How well does Java fare against Perl when it comes to filtering files if you use NIO? It seems that for big files, say 500MB, Java is just 25% slower which amounts to 24s vs 19s. 24 seconds to process a 500MB file twice isn’t that bad, is it?

      Mifos – the Grameen Foundation’s Java-based Microfinance application by Michael Vorburger

      Motto: Making the world better one line of code at a time. If you heard about microfinance, this is a software which helps to run it. Next time you find yourself with some time at your hands, how about helping fight poverty and join the Mifos open source project?

      Software in the service of handicapped people: Research & Development at Otto Bock by Hans-Willem van Vliet

      Along the same lines as Mifos, Otto Bock tries to make the world better by helping disabled people with wheelchairs and prostheses.

      It was interesting to hear how complex something like a smart leg is and how much people still want to look like everyone else.

      And That’s a Wrap

      With that, Jazoon 2010 ended. For me, it wasn’t as exciting as the last three years, mainly because the keynotes were somewhat weak. Well, see you all back in 2011.


Building HTML

9. July, 2007

There are two ways to generate HTML: The right way and the JSP way. Enough has been said about JSP, what’s the right way?

The right way is to have a programming language that is flexible enough to merge HTML and code painlessly. Groovy does it this way:

 def builder = new MarkupBuilder ();
 builder.html {
    head {
        title getTitle()
    }
    body {
        genBody (builder)
    }
 }

What is going on here?

First of all, you must know that you can omit several things in Groovy: parentheses or semi-colon, for example. If we add these, the example becomes less readable but better understandable for Java developers:

 def builder = new MarkupBuilder ();
 builder.html () {
    head () {
        title (getTitle());
    };
    body () {
        genBody (builder);
    };
 };

So obviously, in the first line, a method html() is called. Now, you need to know that the code in curly brackets is a closure and that closure is added as the last parameter to the call of the method in front of it. This means the code in the curly brackets is passed into html() and can be executed any time html() wants to do it. It can even invoke the closure several times. In Java, the definition of html would be: html(Closure c).

The same happens with head(), title() (which takes a String argument) and body(). Now where are these methods defined?

Nowhere. MarkupBuilder() is a class which defines a “catch all” method called invokeMethod. Whenever Groovy cannot find the right method to invoke, it will check if a class defines

 Object invokeMethod(String methodName, Object args)

and invoke this method instead. The method gets the name of the original method and all the original parameters in a list.

In our case, MarkupBuilder.invokeMethod() will use the method name as the HTML element name. That’s it. A little bit of flexibility in the parser got us a long way towards HTML without making the code unreadable.

Next, we need a flexible way to pass HTML attributes. In Groovy, named arguments are supported:

 void genBody (MarkupBuilder builder) {
     builder.p (style:'font-weight: bold;', 'Impressive.')
 }

This will call MarkupBuilder.invokeMethod() with “p” as the method name and a list consisting of the map with the style and a string. This information will be used to build the element and it’s content.

Of course, the builder will stream the output (which is very simple since it can wrap your code when it needs to: essentially it will just warp all the virtual methods you call), there is no way to forget a closing element (your program won’t compile anymore) and splitting complex HTML into several methods is a cinch.

Life can be so simple with a little bit of flexibility.

Further reading: Using MarkupBuilder for Agile XML creation


Debugging AJAX Applications with IE

6. July, 2007

Note: Most of the information for this blog entry was copied from this blog (German only).

Debugging AJAX Applications (or RIA) has become much more simple with the Firefox extensions Web Developer Toolbar and the fantastic tool Firebug.

IE has lagged behind but there are now two tools which help a lot: IE Developer Toolbar which mimics the HTML/CSS editing capabilities of Firebug and some of the tools of WDT (like clearing the cache, showing outlines and disabling images). For debugging JavaScript, you can get the MS Script Debugger but you have to dig through the config to enable and disable it.

Now all I need is a way to get at the IE Dev Toolbar when the browser window has no menu …