After having a non-blogpost-worthy summer, I attended Fronteers 2008 Thursday and Friday last. Some people might have known about that, but I didn’t announce that on this weblog. In this blogpost, I’ll mention the things I liked about Fronteers 2008.

Fronteers 2008 was held in Pakhuis de Zwijger, Amsterdam (actually a few hundred meters away from the place where the whole Fronteers idea was initiated last year). As I did some volunteering during the conference, I did not see every session.

Friendly URLs

During a session about The Dutch Web Guidelines, Koen Willems told us about friendly URLs. Now I think everyone knows the general benefits of friendly URLs. Luckily, Koen came up with something new: a technique to handle search requests with friendly URLs. So instead of example.com/search.php?q=awesomekeyword you’d have example.com/search/awesomekeyword.

The key is to redirect the first one to the second one on the server, that is just a few lines of code. With some unobtrusive JavaScript you could add a feature to do the redirection on the client side. In my opinion, it is a bit overdone to rewrite this kind of URLs, mainly because a search result page for a perticular keyword is not part of the hierarchy of the website.

Maintainable CSS

Stephen Hay talked about maintainable CSS. He bundled the oh-i-know-that-but-i-don’t-do-that parts of writing CSS in a nice presentation. Main point is setting up a good structure in your document: layout, color and type, eventually in seperate CSS files. Also setting up a good structure in you HTML will make maintaining your code a lot easier.

Actually I don’t really like the idea of separating the layout, color and type parts of your design. I think I will need to click more through tabs in my editor. “How do you write CSS?”, you might ask. After setting up a good structure in my HTML, I build the CSS in the same order. So header parts at the top, footer parts at the bottom. I indent the selectors for elements inside the parts of my layout. Your file becomes quite large if you do it this way, but combined with a good text editor it works like a charm for me.

CSS selectors madness

After partying on the boat Lizboa, I walked towards the train station with Bert Bos and some other people. Bert told us how CSS was initiated, and what the difficulties were in the beginning. He mentioned the idea of selectors, before the cascade was developed. It would be like this mad: If you have an element, and two selectors actually select that element, you will get an average of the properties that apply to those selectors. For example, if you have p {color:red} and body p {color:blue}, your paragraphs would be… purple.

Maintainable JavaScript

Christian Heilmann picked maintaining JavaScript as topic for his presentation. Luckily he didn’t introduce much new things to me. He told about separating parts in your application in functions, and then make some of the general functions available outside the application, and some specific parts not. So if you have a small function to convert seconds to minutes and seconds, you can write it in your application as one function. Then call it every time you need it. You then reveal the re-usable parts out of the script’s scope, because some other script on your website might use it as well.

Another good thing to use, is a configuration object at the top of your application, instead of using class names and ID values inside the functional part of your JavaScript. What I missed a bit over there, is that some configuration might be depending on the page your JavaScript is loaded. You could simply use attributes of elements inside your webpage, and read them out via JavaScript. An example is using a meta tags in your head, with some strings for messages you display. You can translate an HTML page (eventually in your CMS), and use the same JavaScript file over and over again. You can also use the HTML5 data attributes. (However, you’ll get an “invalid” HTML webpage. The validator at W3.org cannot handle custom DTDs). I will write an in-detail instruction on how to do all this in the near future.

Absolute positioning to the rescue

Several front-end people sometimes ask me: why do you use absolute positioning for this…? My answer always is: I do not want to change the logical order of the content in my HTML. This is exactly what Andy Clarke presented about. First, he defined all kinds of positioning in CSS. Then he gave some (beautiful looking) examples of general occurring cases where absolute positioning is better than floating elements all around.

Conclusion

Fronteers 2008 was a really amazing experience, if I may say so as someone who helped organizing it a bit. If you’re interested in the other sessions, you might want to take a look at the page where all slides are collected. If you have any questions about the conference or the topics I mentioned above, feel free to drop a comment below.

A while ago I bought the book DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith. The title says it quite well, this book is about using JavaScript and the DOM to extend the user experience of web sites.

The first chapter gives some background information about the history of JavaScript. Not as extensive as ppk on JavaScript, but good for beginners. Turning the page to chapter two will let us learn the basics of JavaScript.

Other chapters will learn you how to use the DOM to manipulate the document and style of the web page. Also, a chapter about animation is included and that is not widely covered in JavaScript books I’ve read. In the last chapter you’ll use the discussed techniques to build a web site extended with JavaScript and of course the DOM.

I didn’t buy the book because I wanted to learn about the DOM, but more as a reverence and a source of inspiration to learn new techniques. The reverence part was satisfied by a nice chapter at the end of the book, including all DOM methods with details on how to use them. However, this book is not a great source of inspiration for a bit experienced front-enders.

The book explains very well on how and why to use graceful degradation, separated behavior and markup and backwards compatibility. For beginners that is really cool, I haven’t seen many newbie JavaScript programmers use those techniques and it is really good they are given good information on this subject. But as said, anyone who knows those techniques already will not be satisfied by this book.

You’re new to JavaScript and DOM, and are interested in this book? I can really recommend it for you. I think you might be want to read the preview at Google Books, or the sample chapter at the official website.

…but it did not work in browsers other than Firefox. I looked at my code, it seemed to be okey. I couldn’t use Firebug, since the script worked in Firefox.

After a bit longer looking at my code I found the problem. I used a semicolon inside the string for the CSS. It looked a bit like this: elm.style.display = "none;";. After deleting the semicolon it all worked as intended. A bit weird you cannot use it in this kind of statements, but can when you use the cssText property. And also since you must use it in CSS too.

I made a page in my codex that illustrates the problem. In Firefox it works like expected. IE6 and IE7 both do absolutely nothing useful (they give errors) and other browsers make the text white, but the background not black.

Lately I’ve been working on some group projects, and I had the idea to make a tool to report bugs, errors and other unwanted things on a web site. So I made that tool, and now it is time to share it with the world.

I made a page in my codex for the BugReporter. There you can find info for implementing the tool in you project (it’s quite easy), as well as a demo.

The tool is written in JavaScript, and the server-side script in PHP, but that can be changed in any other server-side language as you want. Nice features are making the bug-window transparent (double-click), and the AJAX transport of the data to the server. It is also very small, only a few kilobytes.

So, if you’re working on a group project, say more than three people, this might be useful.

Although I build this many months ago when I got bored, I didn’t publish the Sudoku Solver. I was just interested in how fast JavaScript could do this, and if I had the skills to code all the logical things.

The solver doesn’t solve very hard Sudokus, but many puzzles you’ll find in newspapers he solves in just a second or two. If you have some tips on how to solve this faster, or better, please leave a comment here.

Also mention this is not a best practice project, the JavaScript is not optimal and is embedded in the HTML document instead of doing this unobtrusive.

During the building of the solver, I also found another Sudoku Solver with even more solving methods and some great options. I also found a Sudoku Programmers Forum, but the more of the things discussed there I didn’t understand.