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


Efficient CSS

26. May, 2011

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

This blog post has some answers: Efficiently Rendering CSS


New W3C validator: Unicorn

4. August, 2010

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


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 …


What’s Wrong With … CSS?

28. February, 2006

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: &ltspan 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.


Follow

Get every new post delivered to your Inbox.

Join 327 other followers