Always cache the length property in for loops when using JavaScript

By David Pratt / Tags: , , / No Comments / Published: 26-01-10

To speed up for loops in JavaScript you should always look to cache the length property so that the value of this doesn’t have to be recalculated on every iteration of the loop. There are a couple of ways to do this, the first and most obvious way is to calculate the array length outside of the loop e.g.

var l = bigArray.length;
for(var i = 0; i < l; i++){
	//Do stuff
}

Another less well known way is to cache the length property in the for loop decleration e.g.

for(var i = 0, l = bigArray.length; i < l; i++){
	//Do stuff
}

Drupal – Getting the image path of a CCK field

By David Pratt / Tags: / 12 Comments / Published: 26-01-10

I often find myself using the Views module in Drupal to generate SQL that I can then use elsewhere directly, such as from page handler include files. Occasionally however, the SQL that the View module generates doesn’t quite work as you would expect, or as though it would from within a standard View. This happens in my experience more often than not when you’re dealing with CCK image fields. The problem being that the contents of the 3 fields that are associated to a particular image within the content type table, don’t contain anything that resembles a path to the physical location of the image in the file system. The 3 fields that I am referring to can be identified by their endings; one will end in _fid, another with _list and the last with _data. To explain this better it might be easier if I give an example, the following SQL will get the contents of the 3 fields that are associated with an image, in this case it is the website logo field:

SELECT
field_website_logo_fid,
field_website_logo_list,
field_website_logo_data
FROM content_type_website
LIMIT 1

When I perform this query I get:

fid: 1723
list: 1
data: a:10:{s:8:"duration"; i:0; s:6:"height"; i:0;s:5:"width"; i:0;s:18:"audio_bitrate_mode"; s:0:""; s:18:"audio_channel_mode";s:0:""; s:12:"audio_format"; s:0:""; s:13:"audio_bitrate"; i:0; s:17:"audio_sample_rate"; i:0; s:3:"alt"; s:0:""; s:5:"title"; s:0:"";}

You’ll notice that none of these values give anything obviously meaningful to work with, and this can be confusing because as you can see, there isn’t anything obvious here (to me anyway) that looks like an image path, or that can be used to construct an image path. You might be able to guess that the fid value can be used as a look up on another table to get more information about the image (which it can by the way), but you’d need to find that table and either do a join or an additional look up to find that out. Rather that doing that, the easiest method that I’ve come across to find the path of the image (if you know the fid value) is to use the field_file_load function like so:

$file = field_file_load($node->website_logo_fid);
$filepath = $file['filepath'];

You could then put the $filepath directly into an image:

print '<img src="/'.$filepath.'" alt="" />';

Bear in mind that you might need to consider the base path before the $filepath.

The other instance that you might want to retrieve an image path from a CCK image field, is from within a template file. If you know the name of the CCK image field, then you can retrieve the path by doing something like:

$field_website_logo[0]['filepath'];

Importing large files into mysql with phpmyadmin

By David Pratt / Tags: , / 196 Comments / Published: 18-01-10

I’m writing this here because it’s the third time I’ve had this problem, and the third time I’ve forgotten how to fix it! If you ever get hit with the error message:

Phpmyadmin error message

“You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.”

When trying to import large SQL files into mysql using phpmyadmin, the phpmyadmin documentation offers a few solutions, but I find the easiest method to overcome this is…

Find the config.inc.php file located in the phpmyadmin directory. In my case it is located here:

C:\wamp\apps\phpmyadmin3.2.0.1\config.inc.php

Find the line with $cfg[‘UploadDir’] on it and update it to:

$cfg['UploadDir'] = 'upload';

Create a directory called ‘upload’ within the phpmyadmin directory.

C:\wamp\apps\phpmyadmin3.2.0.1\upload\

Then place the large sql file that you are trying to import into the new upload directory. Now when you go onto the db import page within phpmyadmin console you will notice a drop down present that wasn’t there before – it contains all of the sql files in the upload directory that you have just created. You can now select this and begin the import.

If you’re not using WAMP on Windows, then I’m sure you’ll be able to adapt this to your environment without too much trouble.

Using the logical OR operator in setting variables

By David Pratt / Tags: / 2 Comments / Published: 11-01-10

If you ever find yourself setting a variable based on the existence of an object property or variable, and write tests similar to [Edit: assuming that the Object object is known to exist.]:

if (object.property){
	var foo = object.property;
}else{
	var foo = "foo";
}

Or:

var foo = "foo";
if (object.property){
	foo = object.property;
}

Then there is more elegant way to achieve this by using the logical OR (||) operator in setting the variable. The same result as above can be achieved by this line of code:

var foo = object.property || "foo";

What this is in effect doing is testing the result of the logical OR operator based on the existence of the two conditions i.e. object.property and “foo”. As “foo” will always resolve to true because it exists, it is just down to the ambiguity of object.property to determine the output i.e. if object.property exists, then foo will take the value of object.property, otherwise it will adopt the value “foo”.

Software to put on a clean install of Windows 7

By David Pratt / Tags: / 8 Comments / Published: 04-01-10

Having laboured under the fickle, unreliable Windows Vista (that came bundled with my new laptop) for the last 4 months, I was delighted to give the free Windows 7 upgrade that I was entitled to a go after it eventually dropped through the letterbox. My excitement soon became frustration as the “straightforward” upgrade process proved to be anything but – software that I had on my machine was preventing the upgrade from completing successfully. A clean factory restore of the original Windows Vista followed by a clean upgrade to Windows 7 did the trick, but at the expense of losing all of the installed applications. And so I was presented with the task that every developer secretly enjoys but whines about, that of installing fresh copies all the applications that I frequently use.

Below is the list of applications that I loaded on to my new Windows 7 machine. Please let me know if you think my life could be improved by using anything not listed here!

(Note: Most of the applications that I’ve listed here can be auto-magically downloaded and installed with a tool called Ninite . Handy.)

Browsers
Coding
  • Eclipse with PDT – My IDE of choice, but still feels a bit clunky.
  • Editplus 3 with extras. – I have been using this text editor for nearly as long as I have been coding websites. I’ve tried many times to shift all my development work to a full IDE such as Aptana or Eclipse, but I end up coming back to Editplus time and time again because of its speed and ease of use.
  • jQuery API browser – Much easier and quicker than navigating around the online API reference.
  • Win Merge – A great file compare tool. Integrates with Editplus nicely.
Firefox extensions
  • ColorZilla – A colour picker for websites.
  • CSS Usage – Allows you to scan multiple pages of a site to see which CSS rules are used.
  • DownThemAll! – A download manager.
  • Dust-Me Selectors – Compare the DOM to the CSS and finds all unused CSS rules.
  • Firebug – Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • FirePHP – FirePHP enables you to log to your Firebug Console using a simple PHP method call.
  • Greasemonkey – Allows you to customize the way a webpage displays using small bits of JavaScript.
  • HTML Validator – Adds HTML validation inside Firefox and Mozilla. Aim for the green tick!
  • Image Zoom – Allows you to zoom in on images on a web page.
  • KGen (for SEO) – KGen is an extension that allows you to see what keywords are strong on visited web pages.
  • Live HTTP Headers – If you haven’t got Fiddler 2 installed, then this is a basic alternative.
  • Rank Checker (for SEO) – Allows you to easily check your website rankings in Google, Yahoo, and Bing.
  • Screen Grab – Allows you to take full web page screenshots, beyond the visible area.
  • SeoQuake (for SEO) – A suite of SEO tools.
  • Shareaholic – So useful it should be bundled with the browser as standard!
  • Web Developer – Lost its crown as the most useful Firefox extension to Firebug, but still has some unique and useful features.
  • YSlow – Analyzes web pages and why they’re slow based on rules for high performance web sites.
Image editing
  • Paint.NET – One up from MS Paint. Handy for cropping images.
  • Shrink-O-Matic – For optimising images. It takes a bunch of images and squeezes every surples byte out of them.
Office applications
  • Free Mind – A light-weight, free, mind-mapping tool.
  • Open Office – Not quite as slick as the latest version of MS Office, but still very impressive.
  • Visio – Still the best flow charting tool. Although there is an open-source one called Dia which is pretty good.
SEO tools
  • Xenu Link Sleuth – An essential tool for understanding exactly how big sites hang together. Great for finding obsolete and deadlinks.
Utilities and tools
  • 7zip – The best free, multi-format file compression utility.
  • AutoRuns – Offers a load more options over the Windows msconfig tool.
  • CCleaner – Crap cleaner
  • Defraggler – Allegedly better than the disk defragmenter bundled with Windows.
  • Fences – Desktop organiser. Wicked.
  • Fiddler 2 – This tool is amazing. What it does is watch all of the HTTP calls that are made when loading a webpage and record every detail about it, but what makes it particularly powerful is that you can set up a range of filters to record only what your interested in. Essential for debugging and testing.
  • File Zilla – FTP client
  • Greenshot – For taking all kinds of screenshots. Way better than the classic combo of hitting the PrtScn button and pasting into MS Paint!
  • HTTP Watch – Similar to Fiddler 2, but a bit more clunky!
  • Java Runtime Environment – Download it before you’re prompted to!
  • Process Explorer – Shows you information about which handles and DLLs processes have opened or loaded.
  • Recuva – Enables you to recover files that you have mistakenly deleted.
  • Revo Uninstaller – Removes every trace of a program.
  • Robo Form – Enables online forms to be auto filled.
  • Skype – Messenger and voice communicator.
  • Spybot – Search and Destroy – Removes spyware and other sorts of undesirables from your PC.
  • Subversion with Tortoise – I’m familiar with this, but many of the folk in the know seem to be making the switch to GIT these days. New years resolution, learn GIT.
  • TeraCopy – The built in windows copy and move commands + 1.
  • Tweet Deck – Plugin in your Twitter, Facebook and LinkedIn account details, and you never have to visit the actual sites again.
  • VideoLAN – Plays just about every video format that has ever existed, probably even some that don’t as well…
  • WinDirStat – Helps you understand visually exactly what is hogging all your hard disk space.
  • WinHTTrack – For copying an entire website.
  • Windows Grep – The best find and replace tool that I’ve come across.
Music

Where would a developer be without his tunes?

  • iTunes – I use it to get Podcasts from the iTunes store.
  • Songbird – Similar to iTunes, but allows you to install add-ons in a similar fashion to Firefox.
  • Spotify – Amazing.