of scripting and web-coding

Building a mini snake game in JS is one of these things every webcoder should be able to do. Since I hadn't tackled that "challenge" yet (and mostly because I was bored like hell and wanted to code something without using jQuery for a change), I decided to give it a shot. This is very basic, but it taught me a two interesting things I was unaware of: it seems that a DIV cannot natively receives the focus, but a simple workaround to cope with this is to give the DIV a tabIndex value if you duplicate an array (Array.splice(0)), references are maintained (so as far as I understand, if you modify the original array, the copy will be modified in sync...sounds pretty weird, but I must admit that there was something fishy with the values returned during my initial attempts to clone an array) Anyway, you can find the result of that one-hour experiment at the following URL: http://www.manuthommes.be/toolbox/snakejs/ Note: Left/Right arrows to turn. ...

Although this was common practice in the early days of the Web, working with HTML tables when it comes to building a webpage layout should be avoided as much as possible nowadays. CSS offers all the tools that are needed to create perfectly dynamic and flexible layouts, so you really should only rely on HTML tables to present actual data. This being said, it happens that you don't have the choice, and that this just what I've learned recently in my work. In the context of a client project, the framework I've had to use (Peoplesoft, an HRIS system) indeed generates HTML pages presenting a structure quite "2000"-ish, consisting in a complex nesting of HTML tables. Moreover, each time you add a component on the page (via the system itself, not when hardcoding it), a system TABLE is create to wrap the object. This can cause obviously a lot of problems, but in this case, my problem was quite specific. A few pages of the system use a well-defined table layout :...

Just a short post to share a tiny project I recently worked on: a binary clock. The script is written in pure Javascript (no jQuery for a change), and the design of the buttons was rapidly made in Photoshop, so nothing fancy...but I really wanted to create this :-) http://manuthommes.be/toolbox/binaryclock/ As usual, the code is not obfuscated so you can have a look and feel free to copy/edit.

Back in the years when I was still coding in QBASIC (pretty nice language to start programmation), I took an interest in steganography (see Wikipedia for more information on the subject) and quickly came across an article describing a technique to hide a picture into another one .   The aim of this post is to share this technique and rapidly shows how it can be implemented in HTML5 using canvas elements. The original piece of software I built with QBASIC, I  called it "Blackshell", did work neatly, but was very slow (about 1 min of processing to hide a 100*100 picture). As I've been looking for a project to get myself started with the use of canvases with HTML5 for a few months, I thought I might just try to port that tool in HTML/JS. You can find a first draft here: http://manuthommes.be/toolbox/html5exp/ EDIT: it seems that the script does not run properly on my website any longer (beats me why...). If you encounter trouble too (i.e. the colors are all weird...

I've been pretty busy with work over the past days, but I managed to finalize my lightbox javascript library still. Although I can't confirm it is 100% cross-browser, it seems to be running well under IE8/9, Firefox and Chrome. I reckon it should work as well on Safari, but you never know. The actual library and a sample HTML file can be found here: https://sourceforge.net/projects/delightbox/files/ How to use ? First, include jQuery and, needless to say, the library. Second, call the function init from dlb , once the DOM has been fully created and the page is ready. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./delightbox-latest.js"></script>         <script>         jQuery(document).ready(function(){             dl...

Down below is a fully working example of the lightbox (aka thickbox) effect described in the previous article. Note that the technique has even been improved, since the script now prevents by itself a link from being opened. As a result, you do not need to place the target URL as a custom attribute anymore. Just append a class to an anchor and the script is ready to be use d !   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">     <head>         <title></title>              <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>         <script>         jQuery(document).ready(function(){   ...

Over the past few weeks, I have been in the process of finding the perfect way to create a lightbox effect of my own (both for professional and personal projects).  You can obviously rely on a existing library (such as Litebox), but if you want to have a full control over the lightbox, you might want to create it from scratch. This being said, we will not reinvent the wheel and we will get some help from jQuery to ease the manipulation. First things first, for those who do not know...what is a lightbox? Here is what Wikipedia tells about it: "Lightbox is a JavaScript technique used to display images and other web content using modal dialogs" A lightbox effect is often used to enhance image galleries. Basically, suppose you display a series of thumbnails on your page. If the user wants to see the full-size picture, he has to click on the thumbnail, which will then open the image in a new tab or in a new window. This is quite unpractical, since it breaks the flow o...