At one point I needed to generate roughly 30 css classes to leverage CSS sprites. I’ve been used do this all by hand back when CSS was written without any help, but having such awesome tools like LESS there must be a way to do this more comfortable. After searching for a while various sources (and also the LESS documentation) said that there are no loops in LESS, so I looked through the Bootstrap sources I found some stuff that looked similar to loops (grid.less and mixins.less).

After simplifying what I found here is the shortest version of doing a loop-like construct in LESS:

LESS code:

@iterations: 30;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

	// create the actual css selector, example will result in
	// .myclass_30, .myclass_28, .... , .myclass_1
	(~".myclass_@{index}") {
		// your resulting css
		my-property: -@index px;
	}

	// next iteration
	.loopingClass(@index - 1);
}

// end the loop when index is 0
.loopingClass (0) {}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

Resulting CSS:

.myclass_30 {
  my-property: -30 px;
}
.myclass_29 {
  my-property: -29 px;
}

.......
.......
.......

.myclass_1 {
  my-property: .1 px;
}

This is just a very basic example but I thing you get the idea how to use this trick.

After using it for a while you sometime discover some shortcomings.
For example: Many of my client do not use git so I need to send them an archive with the current state of development. There are different way to get this done.

• Do this in your file manager. Very annoying, because you need to sort out all files that should not be in the archive (.git folder, log, cache, etc.)
• On your console:

  git archive --format zip --output useful_name_for_the_zip_file.zip name_of_branch

This is not easy as it should be. So why not create your own custom git command (or git extension)? Like git archive-file!

How to create a custom git command

• create a executable script file somewhere in your executable paths. It must use the following naming schema  “git-your-custom-command” and must be without a extension. (In my example from above: “git-archive-file”)
• This file can be written in any scripting language who want and that is executable on your system. (It also should work with binaries.)
• This file does not need to be anywhere near all the other git command.
• Now you could use it as “git your-custom-command”

Example script

In any local repository you now can do: “git archive-file” which will compress all your tracked files into a zip archive. The name of the archive file will be chosen from your current HEAD. If the current branch name differs from “master” the branch name will be included into the zip file name.

If you like to get some nice git extras commands check out: git-extras.

But not everything works flawless. Here is a thing struggled with:

Embedding an image is quite easy (the image will be compiled into the final swf file):

Using HTML to format text shouldn’t be a problem for anyone.

This will show the image from the given URL and “some text”. The Image is going to be loaded when displayed, it is not embedded into the swf file.

How to use a embedded image in a HTML text element?

It took a while, so here is the solution. It is not clean as it should, but it works.

First you need a helper class, which embeds the image:

Then you could do this, as I said it looks a little bit like a hack, but it works just fine.

I have one a table, lets call it “table1″, and another table, lets call it “table2″. Table1 references a row from table2, but I didn’t used foreign keys in these days. (I don’t if I didn’t know that they are exist or if InnoDB wasn’t available.) The Website has an admin tool which edits all the tables through some HTML forms. My mistake was that it is possible to delete a row from table2 which leaves all the rows in table1 referencing this row in table2 somehow broken. Today someone discovered this mistake I needed to clean this up. My idea was to create a simple query which cleans table1 and the alter the PHP which deleting rows from table2 to also clean up table1.

I started which the following query:

Which leads to the following error:

#1093 - You can't specify target table 'table1' for update in FROM clause

I was some kind of shocked because I had no idea whats wrong with this query. After searching the web for a while I found out that it is some kind of bug in MySQL but there is a weird looking workaround:

This works very nicely, but costs a lot of performance, because you need to add another subquery and you create a temporary table. So the better solution is to sanitise all your data before you remove some referenced rows

You need:

• Enough space on hard drive
• Windows installation CD/DVD
• Linux/Ubuntu Live-CD/DVD (!!)
• Some time you like to waste on a Windows installation process

Instructions:

• Make sure you have enough free space on you hard disc.
• If you hadn’t install GParted, do it now.
• Make space for the Windows partition on you hard drive and create a new NTFS partition. The overview from GParted should somehow look similar to this (/dev/sda2 is my NTFS partition):
  

  GParted - partitions on hard drive

• Reboot you system, install Windows on the NEW partition on your hard drive (It is quite important to choose the right one, otherwise you Linux system could get lost). After the installation there is (currently) no way to boot you Linux system, since Windows has overwritten the Linux boot loader.
• Insert you Ubuntu/Linux Live CD / DVD and boot a Live system.
• Mount you Linux partition into you Live system. (Easiest way is: On main menu: “Places” -> “Name/size of Filesystem”
• Open a console/terminal
• Check if everything is correctly mounted and get the ID of you Linux partition. Enter:

  mount

  which should give you a line like this

  /dev/sda2 on /media/0d104aff-ec8c-44c8-b811-92b993823444 type ext4 (rw,nosuid,nodev,uhelper=devkit)

  Now run:

  ls /media/0d104aff-ec8c-44c8-b811-92b993823444/boot

  Replace 0d104aff-ec8c-44c8-b811-92b993823444 with the ID given by the mount command earlier. (Tip: Use <Tab>-Key to get autocompletion.)
  The result should be very close to this:

  config-2.6.18-3-686      initrd.img-2.6.18-3-686.bak  System.map-2.6.18-3-686
  grub                     lost+found                   vmlinuz-2.6.18-3-686
  initrd.img-2.6.18-3-686  memtest86+.bin

• Overwrite the master boot record and replace the Windows boot loader with GRUB: (again insert the correct ID for the partition and make sure you perform this on the right hard drive!)

  sudo grub-install --root-directory=/media/0d104aff-ec8c-44c8-b811-92b993823444 /dev/sda

• Grub automatically detects all the installed operating system. After a reboot you should be able to chose which operating system you want to boot.
• Done.

Tip: If you do not see the grub menu during boot, press and hold the Shift key before the boot process starts.

• Edit the .bashrc file from you home directory and append the following lines:
  1. alias alert_helper=‘history|tail -n1|sed -e "s/^\s*[0-9]\+\s*//" -e "s/;\s*alert$//"’
  2. alias alert=‘notify-send -i /usr/share/icons/gnome/32×32/apps/gnome-terminal.png "[$?] $(alert_helper)"’
• Install the libnotify-bin package

  sudo apt-get install libnotify-bin

• If you do not want to restart execute the next command in a console:

  source ~/.bashrc

Now you have a new command available on your console: alert
If you do something time consuming now add the additional alert after the last command and you will get a nice notification:

notification from the console

Today I tried the same with my Ubuntu 10.04 installation and I encountered a few problems. This is how I got my webcam working with Skype:

• Check if your web cam is working in general. The program Cheese is quite suitable for this task.
• Test if Skype works with you cam. Open the options dialogue, go to “Video” and click test. If you see yourself, everything is fine
• Otherwise create a shell script with the following content:
  1. #!/bin/bash
  2. LD_PRELOAD=/usr/lib/libv4l/v4l1compat.so  /usr/bin/skype

  This script forces Skype to use the Video4Linux drivers instead of the native ones.

• If you got this error like this:
  

  X Error, request 132, minor 18, error code 8 BadMatch (invalid parameter attributes)

  Modify you script this way:

  1. #!/bin/bash
  2. export XLIB_SKIP_ARGB_VISUALS=1 skype
  3. LD_PRELOAD=/usr/lib/libv4l/v4l1compat.so  /usr/bin/skype
• Whenever you start Skype and want to use your web cam use this script to start Skype.

P.S.: If you are on a 64bit system you probably need to do this:

It took a while to get everything running and I pulled all the information I needed from many different sites. So pulled them all together in this blog entry:

1. Register at the VMware page. Download the package for VMware server as *.tar.gz. Extract the archive.
2. Current VMware products do not support the Linux kernel 2.6.32. Therefor you need a patch for the installation archive. Download the patch from the following link and extract it in the parent folder of you VMware download: VMware patch for Linux kernel 2.6.32. More information could found on this page and pages linked on this page.
3. Run the script with super-user rights. It is quite simple to install. Most of the times you could just hit enter for every question of the installer. At one point the installer ask for a system user which runs the Vmware instances. If you leave it at the default choice, root will be the user. Make sure you have password to log in as root user. (You can set a root password by running the following command on a terminal:
   

   sudo passwd root

4. If you are running a new Ubuntu system you might have get a Firefox version >= 3.6. In these versions the VMware console plugin for the browser won’t work, so download a older version of Firefox from this page (3.5.9 should be highest working version number).
   Extract it somewhere and run it:

   ./firefox -no-remote -P

   You might create a new Firefox profile (-P) and make sure a new instance of the Firefox is starting (-no-remote)

5. On a few guest operating systems you might have some trouble with some of the arrow keys of you keyboard. To get them working run this command from a terminal:
   

   sudo echo “xkeymap.nokeycodeMap = true” >> /etc/vmware/config

   You need to run this on the computer where you want to start the VMware console. More Informations could be found here.

6. Browse to you VMware administration panel (http://localhost:8222 or https://localhost:8333). Create and start a virtual machine. Install the browser plug-in. Launch the console.

VMware admin & console

Ok. That’s fine. Now we change the code a little bit to this one:

What do you expect? I was quite surprised:

global1: 10
foo1: NaN
foo2: 0
global2: 10

Why do we get a Not a Number? Why is JavaScript not using the global var as in the first example? Why is the global variable i not increased, the operation took place before the declaration of the local variable i? JavaScript has some “strange” rules about variable declaration. Every variable declared within a function is initialised at the beginning of the function, so our function actually would look like this:

Looking into the rules of JSLint which helps to verify JavaScript code to improve the quality of your JavaScript you get a few rules how to safely declare variables:

• JavaScript allows var definitions to occur anywhere within a function. JSLint is more strict.
• JSLint expects that a var will be declared only once, and that it will be declared before it is used.
• JSLint expects that a function will be declared before it is used.
• JSLint expects that parameters will not also be declared as vars.
• JSLint does not expect the arguments array to be declared as a var.
• JSLint does not expect that a var will be defined in a block. This is because JavaScript blocks do not have block scope. This can have unexpected consequences. Define all variables at the top of the function.

So Remember: Variables are not initialised when they are declared!

Links:

• all JSLint rules for quality JavaScript code.
• WTFJS.com, a page collection all kinds of JavaScript curiosities.

Yesterday I finally moved my two open source haXe libraries (hxJson2 and hxGD) to GitHub. (hxGD was hosted on Google Code before.) I really like the ideas of the work flow of git and seriously thinking about moving all my private Subversion repositories into git repositories, since there are well working tools to even import history and branches.