Edward Tanguay's Web Developer Site - Most Recent Items

CSS CODE: Large button links with A elements

12 Aug 2008 03:26:23 GMT

Many times you want to have a menu with A elements as the links instead of e.g. LI elements. Here is an example with large buttons. See example here. (visit site to comment, no login required)

PHP CODE: How to check if an IP-address is within the range of two IP-addresses

17 Jul 2008 05:11:08 GMT

This function checks if an IP address is between two others, not that ip2long has a problem by itself so you need the sprintf("%u") function as well. Also it returns false if any of the IP addresses are invalid as to avoid tampering. (visit site to comment, no login required)

FIREFOX TIP: Download Firebug for Firefox 3

06 Jul 2008 19:06:23 GMT

I installed Firefox 3 today and instantly found the search-history-in-the-URL-bar to be indispensible. All the more to my horror did I realize that Firebug was no longer installed because it was not compatible with Firefox 3. Luckily there is a beta being built that IS compatible and it works just like the old one. The SQLite Manager and Web Developer bar still work in Firefox 3 and so with these three, no reason not to upgrade! Enjoy. (visit site to comment, no login required)

JAVASCRIPT CODE: Javascript photo-viewer that works in four browsers

06 Jul 2008 13:44:09 GMT

This was a little experiment to get a useful base of cross-browser code that does some interactive stuff in Javascript. It is simple but handles mouseover, button highlight, and just has a nice, basic feel. The only issue is in Opera the text is at top of the buttons, but didn't have any nerves left for that one. At first I tried using :hover and :focus which brought me to the conclusion that this really isn't standard between the browsers so used onmouseover and onmouseout to deal with it. Also worked out a number of quirks that various browsers had, e.g. I removed the ugly dotted focus line in Firefox on the buttons, they left it there in Firefox 3 as well I noticed, I replaced it with a gradient background for the focussed button. So this code looks decent in Firefox 2/3, Internet Explorer 7 (probably 6 too), Opera 9.5 (in fact only after I upgraded from 8 did it show the background on the buttons), and Safari. The bad boy of the group is Opera, but since opera gets embedded in quite a number of devices these days (e.g. Philips TVs), you don't want to leave it out completely. You can view this example online here. Of course next step when implementing this is to make it read from a database or XML file, I just wanted to get the browser-compatibility as accurate as possible first. (visit site to comment, no login required)

JAVASCRIPT TIP: Online Javascript tutorial as pre-AJAX refresher

03 Jul 2008 02:37:47 GMT

If you are getting into AJAX and need a booster course on Javascript, this site has a nice concept/example format to get you up to speed fast without the make-the-background-color-blink examples you get on other sites. Note the "AJAX for N00bs" section as well. (visit site to comment, no login required)

JAVASCRIPT CODE: How to display random quotes with Javascript.

03 Jul 2008 02:27:25 GMT

This code uses the setInterval method to call a showQuote() function every 7 seconds, check out the online example. (visit site to comment, no login required)

JAVASCRIPT CODE: How to set simple cross-browser Javascript event handlers

30 Jun 2008 23:44:08 GMT

This code runs in Explorer, Firefox, Opera and Safari, simple code that enables you to attach Javascript functions to button clicks, etc. (visit site to comment, no login required)

PHP CODE: How to use an .ini file with constants for e.g. translations

30 Jun 2008 22:05:38 GMT

If you have various translations of your website, a quick way to implement this is to have an .ini file with all the translations in it and read it out. This code shows you how to also use constants within the ini file. (visit site to comment, no login required)

CSS CODE: How to position text in a div with left and right areas

30 Jun 2008 22:04:33 GMT

This CSS script give you absolute pixel-exact control of where to place text in a left and right area of a wide div, e.g. a header or footer. I was not able to get it to align automatically, e.g. left/center/right, so you have to know your font size and your text and position things exactly, but at least you have control, checked in Firefox and Explorer. (visit site to comment, no login required)

GENERAL TIP: Download and listen to free MP3s of IT conference talks at IT Conversations

25 Jun 2008 04:31:43 GMT

I've been recently downloading and listening to some great IT talks from the Conversation Network, talks by e.g. Rasmus Lerdorf founder of PHP, Mark Shuttleworth, founder of Ubuntu, even things that are on the edge of technology such as stuff going on in Biology and other sciences, really interesting talks by some key people in the industry, I've listened to about 5 and they've all been good. They have a nice format: you sign up to their RSS feed and just download the ones you want straight onto your MP3 stick and go. The free MP3s have a plug to sign up at the beginning and the end but you can download and listen to anything you want. After you download one, you get an email to review it the next day and in one click you can say how you liked it, which I assume gives good feedback so the best float to the top. If you have a lot of listen/wait time in your daily life, this is a great way to stay up on the latest in the IT space. (visit site to comment, no login required)

PHP TIP: The free EditPad Lite now with friendly UTF-8 BOM feature

19 Jun 2008 03:29:41 GMT

EditPad Lite has been my text editor of choice for a long time since it is free and has an easy time-stamping feature (ALT-E-I) and you can set the time format. But it used to have a nasty habit of always writing a BOM to the beginning of UTF-8 files which PHP 5.2 can't deal with. I always had to go into jEdit and save the UTF-8Y file again as UTF-8. But just in March EditPad Lite came out with a new version that allows you edit UTF-8 files without the BOM characters at the beginning and and EditPadLite will *leave it this way*, very nice. This means that if I need to make a quick change to a PHP file, I don't have to fire up and wait the 15 long seconds for Eclipse to commence: I simply pop into EditPadLite and edit it without fear of adding a BOM (hmm, interesting that it sounds like "BOMB" since that is exactly what it does to your PHP file, nice). In any case, EditPad Lite is now an ideal free text editor to edit any kind of text file in any encoding and to convert to and fro between the various encodings (e.g. between Windows 1252, ISO-8859-1, and UTF-8). You have the option to simply change the encoding setting of a file but not translate the characters or you change the encoding setting of a file and translate the characters as well--just the tool you need when you find yourself in encoding hell. (visit site to comment, no login required)

FLEX CODE: How to apply a simple filter to a label

13 Jun 2008 00:57:03 GMT

You can do a lot more with filters, e.g. dynamically change them in ActionScript but here is the syntax for a basic shadow filter on a text. (visit site to comment, no login required)

FLEX CODE: Example of using CSS styles in Flex Builder

13 Jun 2008 00:29:54 GMT

Check out this example here. This shows you the basics of using styles in flex, I did all of this with the FlexBuilder in design mode, very easy to use, when you are in a CSS file just click on design. The alpha transparency is wonderfully easy and the background picture leaves behind all the problems you have with page backgrounds in HTML/CSS, namely, it constantly resizes it, etc. (visit site to comment, no login required)

FLEX TIP: Flex Builder 3 has a design mode for CSS style sheets

12 Jun 2008 23:47:15 GMT

When you are in a CSS file in Flex Builder 3, you can click on the Design button and see your styles as they will appear. You can change them and the CSS code will change in the background, it gives a library/symbol feeling to CSS files, nice. (visit site to comment, no login required)

ECLIPSE TIP: Code completion for PHP templates

12 Jun 2008 21:19:57 GMT

When you make a PHP tempalte (like a macro) with Windows|Preferences|search for "templates"|PHP Templates, and you include $$${variable} in your template text, you will be presented with a dropdown of all available variables in the context where you call your template, nice. (visit site to comment, no login required)

FLEX CODE: How to use ActionScript to access file system in AIR

10 Jun 2008 23:19:42 GMT

This is another example of access filesystem this time with ActionScript. Did an expanding window in this example, but there are some scrolling issues on this window I need to work out, couldn't find a scrollable=false in the application element. To try this example, download adobe air and then you can install this application. (visit site to comment, no login required)

FLEX TIP: Flex allows you to comment out attribute values

10 Jun 2008 22:49:29 GMT

Flex Builder is full of surprises, here is another uncommon but useful feature: two slashes in front of an attribute value comments it out. ...addendum: any variable after the line with the double-slash will not be recognized in code complete = bug. oh well, 1 point for ingenuity. (visit site to comment, no login required)

FLEX CODE: Basic file access example in AIR

10 Jun 2008 22:28:55 GMT

This shows you the basics of getting access to files and directories with AIR using FileSystemTree and FileSystemDataGrid. Would be interesting to see how these work in Linux and Mac. To try this example, download adobe air and then you can install this application. (visit site to comment, no login required)

FLEX CODE: Basic syntax for Windows in AIR

10 Jun 2008 21:55:05 GMT

Here's how to get started with windows in an AIR application. (visit site to comment, no login required)

FLEX CODE: How to add a custom icon to a button

07 Jun 2008 06:19:47 GMT

View the example here. The graphic is png with transparency and you see that it lets the background of the button show through. (visit site to comment, no login required)