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).
Leave a Comment » | 
Software | Tagged: CSS, HTML, JavaScript, jQuery | 
Permalink
Posted by digulla
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.
Leave a Comment » | Software | Tagged: HTML, JavaScript | Permalink
Posted by digulla
Is “.first” faster or slower than “li.first”?
This blog post has some answers: Efficiently Rendering CSS
Leave a Comment » | Software | Tagged: CSS, HTML, Performance | Permalink
Posted by digulla
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
Leave a Comment » | Software | Tagged: Code Generator, HTML, Java, JSP, renderSnake | Permalink
Posted by digulla
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.
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.
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.
2 Comments | Software | Tagged: Cascading Style Sheets, Google Chrome, HTML, KHTML, Konqueror, Mozilla Firefox 4, Multi-column, Printing, WebKit, WWW | Permalink
Posted by digulla
The W3C has rolled all their validators (HTML, XML, CSS) into one: Unicorn.
Leave a Comment » | Software | Tagged: CSS, HTML, Validation, W3C, XML | Permalink
Posted by digulla
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:
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:
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:
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.
Leave a Comment » | Conference | Tagged: 2010, DSL, ESA, FEST, Gaia, GlassFish, Hipparcos, HTML, HtmlUnit, J2EE, Jazoon, jDepend, JEE, L2, MDD, Mifos, Mockito, Modelling, NIO, Otto Bock, Perl, PMD, Roo, Selenium, Spring, Testing, Wicket, Xpand, Xtext | Permalink
Posted by digulla
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
Leave a Comment » | Software | Tagged: Groovy, HTML, JSP | Permalink
Posted by digulla
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 …
Leave a Comment » | Software | Tagged: AJAX, CSS, HTML, IE | Permalink
Posted by digulla
As an internet enthusiast, you will sooner or later get in contact with one of these greater evils: XHTML, JavaScript and CSS.
You will find the css Zen Garden, be baffled at what can be achieved with pure CSS and, typical for something evil, be lured into it’s fangs.
Suddenly, adhering to W3C standards will become an important goal. Even if there is no browser which can display all of the W3C standard. Most of the users use a browser, which specifically doesn’t support the W3C. Of course, the produce of said product will pledge differently but in the end, what matters is what you can see on the screen.
It ain’t pretty.
After you get your HTML to validate — which means you have already lost countless hours to fulfill a simple several-thousand-page international standard — and you can finally proudly add the XHTML DOCTYPE at the top of your page.
Now, some simple stylesheet to please the eye and you’re ready for the world.
Two weeks later, you find yourself confronted with two choices: You can either concede and show the world that you failed to find an optimum between the deficiencies of the CSS standard and the bugs and incompatibilities of just the two main browsers by publishing another dull website.
Or you can show that you simply don’t care and publish something which looks good on just your computer.
Eventually, one of your friends will tell you what they are snickering about when you show up.
When I saw XHTML and CSS for the first time, I hoped that it would solve some or even many of the problems we have today.
Instead, they made everything worse.
Absolute positioning of elements is relative. What’s so great about strong that the simple b was dropped? With CSS, the name of the element shouldn’t matter anymore.
Instead, we have roughly 200 styles. Many of them are actually supported by a few web browser and some of those are supported correctly.
When I want to emphasise something, Blogger.com wrestles this into my text: <span style=”font-style:italic;”>correctly</span>
Excuse me? <em>correctly</em> should do, shouldn’t it? What will the blind think?
I bought several books about CSS. They all share these common traits: A list of all styles, each with a table when it doesn’t work. A very big number of pages how to work around the most important browser bugs (search A List Apart for “box model”).
After several years, even the most hard headed CSS evangelist finally admits that some layout problems can still only be solved by using tables.
If you want a div to have a very definitive width and a margin around it, you must use voice-styles to confuse the browsers which get it wrong. Or use negative margins. Float it. Nest several divs. All but position it absolutely relative to a hidden element which must contain a flash animation.
The many CSS resources on the net show every day that you can achieve incredible designs with CSS.
FCKeditor is created by some smart minds. At home, it works. At work, I don’t get a toolbar.
I just want my div not to shrink too much because the content becomes a tad unreadable at 30pt. There is a style for that but it’s not supported by anyone. Or there are scroll bars that I don’t want. Or my readers with their new shiny 1920×1600 LCD screen are locked in a 300×256 postcard (all measurements in pixels).
Everybody screams test driven development today. Why is there no test suite for CSS and XHTML with PNG images how is has to render?
No further confusion how to interpret “padding, border, and margin areas”.
But it doesn’t even start to become a solution to the actual problem: Separate content from display.
I don’t care about “strong” or “b” or <span style=”font-style:bold;”> or <span class=”bold”>. It looks the same to the reader.
When I want to publish something on the net, I want to create a meta language. I want to use XML to specify “this is something someone said”. I want to be able to create new tags and then give them meaning (this will lead to the semantic web) and then give them a presentation.
I want a style sheet which defines new elements and how they look on the screen. I want to be able to say “all these elements are top aligned” without having to put them into the same container.
I want to be able to reuse the work of some greater design genius without having to worry about new browser versions. Without forcing my readers to enable JavaScript just to be able to visit my pages (read that is, not interact with them).
I want something like vex. Unfortunately, this project seems to be all but dead.
1 Comment | Software | Tagged: CSS, HTML, vex | Permalink
Posted by digulla
