Metallica Live in Sofia (2008 Bulgaria)

Usually I don’t blog much about non-technical daily stuff but this is something that changed the world for more than 50 000 people.

1. Entrance – Entering the Stadium was as always adventure. After passing the first check point we turned the wrong direction and went round the whole stadium. Because of this at the end we were stuck in big mass of people which slowed us down with a hour and a half. We missed both Down and Sword but happily arrived around 8:40 early enough not to miss anything from Metallica.

2. Spot – The spot we occupied was great – 20m from the stage a bit to the left (generally heading the most left microphone) with great view and…

3. Sound – With the very first song I was amazed. There are many comments for bad sound but where we were – it was PERFECT. Not moving my pants from the sound waves but quite clear. I had never attended a concert with such good sound quality.

4. Track list – Just great. No new crap only head banging classics –

Creeping Death, Fuel, Ride The Lightning, For Whom The Bell Tolls, Welcome Home (Sanitarium), Leper Messiah, …And Justice For All, Wherever I May Roam, Fade To Black, Master Of Puppets, Motorbreath(muutafrat ….), Nothing Else Matters, Sad But True, One, Enter Sandman, Last Caress, Stone Cold Crazy, Seek And Destroy (Sucheeen seek and distroy oi oi oi)

5. Crowd – I believe we were insanly good. Everyone was shouting and singing on all songs and with the stadium totally full I hope Metallica will remember Bulgaria for quite long

6. Pyro – There were great flames and pyro that heated up the close to the stage people.

7. Metallica – great performance (hey James stop spitting you almost hit me), great musicians, great attitude – Thanks for the Flag at the end

Can not wish for something more (heh except next year again – Lars you promised)!

Dynamic Increase / Decrease Font Size Box with Javascript

Web Accessibility is important aspect of the modern websites and including functionality for increasing / decreasing the font-size of the body text is a good step for achieving it. With all recent A grade browsers this is kind of unneeded since they have build in zoom functionality (ctrl + / ctrl -) but still there are couple of advantages for using custom solution:

  1. Preventing broken design due to resizing displacements
  2. Easier for less experienced users who don’t know how to zoom from the browser
  3. Looks kind of cool πŸ™‚

The script I’ve written has the following features:

  1. Stores settings (increase/decrease value) in cookie
  2. Uses style switching (overwriting) so there is no font resizing after page load
  3. Limits the resizing to three steps in each way

Here is the code and example. Note that I’m changing only the body font-size because all paragraphs are using relative units (em). If you prefer to use absolute units (px) you will need to declare all CSS selectors you are using.

dynamic font resizing

Of course there are couple of things which can be improved but I wanted a simple script working under all major browsers : IE 6+, FF, Opera, Safari.

Firebug / Web Developer Toolbar Alternative for Safari

Most of the recent projects I’m working on have requirement to support Safari (under Windows, OS X and iPhone) which unfortunately has some strange rendering biases.

After couple of hours googling around I found the solution and strangely enough it is build in Safari.Β  It is the so called Web Inspector which in terms of functionality and look is very close to Firebug (with no live editing capabilities) but with quite good net profiler.

However to enable it you have to add couple of lines in one xml file (instructions taken from the Webkit’s site see link bellow):

On Windows, you’ll have make sure that the following lines are in your preferences file at the location

C:\Documents and Settings\<USERNAME>\Application Data\Apple Computer\Safari\WebKitPreferences.plist

(where <USERNAME> should be your Windows user name):

<key>WebKitDeveloperExtras</key>
<true/>

For more information and details check the Web Inspector page

Happy debugging!

Customizable Form Select / Dropdown Replacement with Mootools

After seeing couple of implementations of replacing the default form checkboxes and radio buttons I was on a search for cross-platform select dropdown which can be fully styled with CSS. Unfortunately there are not so many options and the best I could find is elSelect:


elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.

However I believe there is plenty of space for improvements.

1. Porting to Mootools v1.2

You need to replace setHTML, setText and other deprecated stuff to the new syntax.

2. Instead of creating new input just move the original (otherwise all events connected with the DOM element are lost and it does not work with .NET forms) –

Replace:

this.hiddenInput = new Element('input').setProperties({
			type  : 'hidden',
			name  : this.source.getProperty('name')
		}).injectInside($(this.options.container))

with:

this.hiddenInput = this.source.injectAfter($(this.options.container));

3. Various optimizations + autocomplete functionality and keyboard shortcuts (Tab-ing through the form).

Also I’m checking the browser agent since under iPhone it is better not to replace the select and adding some code graceful degradation:

var addCustomSelect = function(wrapper){
	if(!Browser.Platform.ipod){
		try{
			var mySelect = new elSelect( {container : wrapper});
		}catch(e){}
	}
	if ($(wrapper).getElement('select')) $(wrapper).getElement('select').setStyle('display','inline'); // Select is still here - degrade gracefully
}
if($('cust-sel')) addCustomSelect('cust-sel'); // Call as soon as possible

Other good tip is to have the select (you are replacing) with style visibility:hidden so it does not flicker when loading.

You can download my modified version from here. It has 1 and 2 applied plus some other minor changes. Still it is a good idea to diff the original and my version since I have custom modification that you might not need.

How-to Install Nvidia Driver on 2.6.25-2 Debian Kernel (with Xen)

Another big surprise rolled out from the Debian Unstable repository when today I updated my kernel from 2.6.25-1 to 2.6.25-2 – the maintainers have enabled Xen in the non-Xen kernel (linux-image-2.6.25-2-686). The result from this is that Nvidia drivers don’t compile throwing error about Xen enabled kernel.

The solution (if you don’t want to recompile your own kernel) :

As usual backup before executing any of these πŸ™‚

  1. cd /lib/modules/2.6.25-2-686 (or wherever are your modules)
  2. grep CONFIG_XEN . -Rl | xargs -i sed -i -e ‘s/CONFIG_XEN/CONFIG_LUPO/g’ {}
  3. export IGNORE_XEN_PRESENCE=1
  4. sh NVIDIA-Linux-x86-173.08-pkg1.run (or you can use patched 169.12 – http://www.nvnews.net/vbulletin/showthread.php?t=110088 )

Source: linux-image-2.6.25-2-686: nVidia driver fails to compile due to active Xen support

How-to Install VMware Player / Workstation on 2.6.25 Kernel

Update: Looking for 2.6.26 howto – here you go !

After the successful How-to install VMware Player and Workstation on 2.6.24 Linux kernel and with 2.6.25 up and running on my Debian Unstable (Sid) I had no option but to update the procedure.

  1. Download latest and greatest products from VMware
  2. Install and patch as described in the previous post (use vmware-any-any-update-116.tgz)
  3. Download the vmware-any-any-update-117-very-ALPHA.tgz
  4. Extract the archive in /usr/lib/vmware/modules/source (or wherever are yours vmblock.tar, vmmon.tar, vmnet.tar)
  5. Run vmware-2.6.25.sh and then vmware-config.pl
  6. If compiles – have fun, if not drop me a line πŸ™‚

Important notes:

  1. The original author of the patches is 6xx I have modified the vmmon.patch since otherwise I was getting the error at the bottom of the article. The original patches can be found here
  2. vmware-2.6.25.sh is a very dumb script – read it carefully before executing. It will be even better to paste the commands one by one
  3. This any-any patch has nothing to do with the original any-any patches by Petr therefor I do not want to take the credit for it. All I’m trying to achieve is to gather the Linux VMware community here and share ideas. If someone wants to help and make the patches more unified and smarter just drop me a mail (can be found on the home page)
  4. I take no responsibility for any problems or damage that may
    occur as a result of using any of the information contained in this article.
    Use the information at your own risk πŸ˜‰

Error log:

include/asm/page.h: In function β€˜pte_t native_make_pte(pteval_t)’:
include/asm/page.h:128: error: expected primary-expression before β€˜)’ token
include/asm/page.h:128: error: expected β€˜;’ before β€˜{’ token
include/asm/page.h:128: error: expected primary-expression before β€˜.’ token
include/asm/page.h:128: error: expected `;' before β€˜}’ token
include/asm/paravirt.h: In function β€˜pte_t __pte(pteval_t)’:
include/asm/paravirt.h:955: error: expected primary-expression before β€˜)’ token
include/asm/paravirt.h:955: error: expected β€˜;’ before β€˜{’ token
include/asm/paravirt.h:955: error: expected primary-expression before β€˜.’ token
include/asm/paravirt.h:955: error: expected `;' before β€˜}’ token
include/asm/paravirt.h: In function β€˜void pmd_clear(pmd_t*)’:
include/asm/paravirt.h:1171: warning: missing braces around initializer for β€˜pud_t’
include/asm/paravirt.h:1171: warning: missing braces around initializer for β€˜pgd_t’
include/asm/paravirt.h:1171: error: cannot convert β€˜pud_t’ to β€˜pgdval_t’ in initialization
make[2]: *** [/tmp/vmware-config2/vmmon-only/common/task.o] Error 1
make[1]: *** [_module_/tmp/vmware-config2/vmmon-only] Error 2
make[1]: Leaving directory `/usr/src/linux-headers-2.6.25-1-686'
make: *** [vmmon.ko] Error 2
make: Leaving directory `/tmp/vmware-config2/vmmon-only'
Unable to build the vmmon module.

Downtime due to WordPress 2.5 high CPU usage

Sorry for the downtime guys. I have reached my CPU usage limit due to turning on automatic database backup feature in WordPress (or something else – not quite sure).

Lets hope from now on everything will be ok.

Update:

With my blog suspended for second time I got really pissed and investigated the reasons. My previous believes about buggy pluggins was not correct and with little googling I found out that WordPress 2.5.x has some serious problem with CPU usage. As I examined my load logs it is obvious that the PHP process is using more than 5 times as previous versions.

The solution is either to install WP Super Cache or to downgrade to the previous version before 2.5.

Howto Create Lossless Flash Screen Captures (Screencasts) for Free

Two weeks ago I started my search for free solution that can do cross-browser and cross-platform screen captures. After couple of days I understood that creating screencasts without using Camtasia is hard because I needed something that can do the following:

  1. Produce Flash Video (FLV) which is good for streaming
  2. Use a lossless codec for great quality
  3. Works under Windows XP
  4. Gives good quality/size ratio

The solution is Camstudio + Camstudio Lossless Codec + miniRec + FFmpeg

Camstudio is free open source screen capture software (in relatively mature state) with great set of features described on the official website ,blog and forum

Camstudio Lossless Codec is not really necessary because exporting in uncompressed video works too but requires alot more space. I tried other lossless video formats like MSU Screen Capture Lossless Codec but since I’m converting it in Flash Screen Video it doesn’t make much difference.

miniRec Audio Recorder is nice and very simple application for recording your voice while capturing the video stream. While Camstudio has build-in audio recording support I had too much troubles with it (the encoded FLVs had some strange bugs) so I’m just recording it separately.

FFMpeg – as usual the cherry of the pie now with support for the Flash Screen Video format (flashsv). With its help it is easy to produce high quality lossless FLVs with relatively small size.

How it all works out:

  1. Install Camstudio 2.5 Beta 1 – there are many tutorials on youtube about it and I’ll skip this step. Also you can check the official install screencast – http://camstudio.org/video/install/ which is for abit older version
  2. Install Camstudio Lossless Codec – it is quite easy, just download the archive, extract it somewhere, right click on the inf file and chose install
  3. Run Camstudio and click on Options –> Video Options. For me the best settings for getting as small as possible files are like this:
    Camstudio Settings

    (If you have any better suggestions please share with me)

  4. Download and install miniRec from here. I have not used any special settings since the voice is compressed by FFmpeg while merging the video and audio streams. My suggestion is to set a global shortcut key for both miniRec and Camstudio so it is possible to fire them almost simultaniously.
  5. Record all you want πŸ™‚
  6. Get FFmpeg. There are versions both for linux and windows. I’m currently using SVN-r12810 but anything relativly recent should do the trick.
  7. The magic for converting your avi to flv is:
    ffmpeg -i input.avi -vcodec flashsv output.flv
    if you are joining with the audio use:
    ffmpeg -i input.avi -i input.wav -ar 22050 -vcodec flashsv output.flv
  8. And the result will be like this:
You do not have flash installed.

PS. The song that is used in the screencast is under Creative Commons and can be found here

Howto Optimize Rendering Speed of ASP.NET Ajax Websites

A common case for most ASP.NET sites is slow frontend rendering due to many Javascripts. The typical requests graph looks like this:

ASP.NET Rendering Graph

All these AXD files are embedded Web Resources usually Javascripts and sometimes CSSs. The bad news about having many embedded Javascripts are:

  1. Many HTTP Requests (meaning generating more load to the web server)
  2. Poor rendering time because when the browser starts downloading a Javascript file it stops downloading(rendering) everything else (easily seen on the graph)
  3. Less chance for caching any of those files
  4. If HTTP compression is enabled in the IIS many files mean more load and worse compression ratio than one merged file.

The most common scenario for having many embedded Javascripts is either using AJAX or some commercial .NET controls.

The solution for merging AJAX AXDs in a single file is described in those two great posts:

Script combining made easy [Overview of the AJAX Control Toolkit’s ToolkitScriptManager]

and

Script combining made better [Overview of improvements to the AJAX Control Toolkit’s ToolkitScriptManager]

The recapitulation when with a friend of mine (Julian) tested out this technique was reducing the loading time with about 2 seconds on a quite clean and well build site. Also the better HTTP compression reduced the size a bit.

If you are using ComponentArt’s Web.UI version 2007.2 or later controls there is solution posted on their blogs too:

Optimizing Web.UI Client Script Deployment

And couple more general advices:

  1. If it depends on you merge all your Javascript and CSS files
  2. Load CSS at most top of you page
  3. Load Javascripts at most bottom of your page (if possible)
  4. Minify both Javascripts and CSSs
  5. Be smart πŸ™‚

Update: Stefan Dobrev sent me a link for moving the AJAX Javascripts to the bottom (point 3 of the list above) which should improve rendering time too. Thanks Stefan

Howto Convert Vmware Windows XP IDE Disk to LSILogic SCSI

I quite often use my Windows XP VM running under Vmware Server 1.0.5 (Debian Unstable) and because I still don’t have RAID I am forced to try every possible performance optimizations.

Latest and greatest was when successfully converting my 10 GB preallocated IDE disk to LSILogic SCSI following procedure close to this one. (Try it on your risk !)

1.Create LSI Logic disk:

vmware-vdiskmanager -c -s 100mb -a lsilogic -t 0 tempDisk.vmdk

2. Add SCSI definitions in your VMX file:

scsi0.present = "TRUE"
scsi0.virtualDev = "lsilogic"
scsi0:0.present = "TRUE"
scsi0:0.fileName = "tempDisk.vmdk"

2. Boot the VM and install LSI Logic driver – use WHQL 1.20.18.00 (at least I could not install the latest version)

3. Make backup of the VM Disk !

4. Open the disk definition file (.vmdk). Get from there the disk size (sum of all extents)

# Extent description
RW 20971520 FLAT "WXP-flat.vmdk" 0

Then create another disk

vmware-vdiskmanager.exe -c -s 20971520 -a lsilogic -t 1 anotherTemp.vmdk

This one is only needed so you can get the new geometry and replace it in the original .vmdk

5. Replace old geometry with new from anotherTemp.vmdk. In my case I replaced this

ddb.adapterType = "ide"
ddb.geometry.sectors = "63"
ddb.geometry.heads = "16"
ddb.geometry.cylinders = "16383"

with this

ddb.geometry.cylinders = "1305"
ddb.geometry.heads = "255"
ddb.geometry.sectors = "63"
ddb.adapterType = "lsilogic"

6. Update you VMX file so scsi0:0 points to the main disk image.Β  Also you can remove the old IDE definitions.

7. Boot your VM and have fun.

Couple of other performance suggestions:

1. Always defrag your guest operating system disk.

2. Use MemTrimRate = "0"

3. Use scsi0:0.mode = "independent-persistent"

4. Keep your guest operating system as light as possible. Turn off themes, effects, unneeded services etc.

Resources used:

http://sanbarrow.com/ide2scsi.html

http://communities.vmware.com/thread/50084