Web Developer Blog

Useful GROUP BY techniques (source: Jeff's Blog ( SQLTeam hosted)) for SQL Server developers. Rather than grouping unneccesarily columns, use a derived table. i.e. (SELECT ... FROM ... WHERE ... GROUP BY ...) AggregateTableName . Plus don't group expressions, but the columns that make up the expression. Tags: Web Developer Blog , SQL Server , SQL Team

Function to encode an email address to help protect against spamming. function mailto_link($email) { $encoded = bin2hex($email); $encoded = chunk_split($encoded, 2, '%'); $encoded = '%'.substr($encoded, 0, strlen($encoded) - 1); $htmlencoded = substr(chunk_split(bin2hex(" $email"), 2, ";&#x"), 3,-3); return "<a href=\"mailto:$encoded\">$htmlencoded</a>"; } Takes an email address as the parameter and outputs an encoded mailto link. You could use this while looping through email records in a database for example. <?php echo mailto_link("user@example.com"); ?> Tags: Web Developer Blog , PHP

PortableApps.com is the new site for Portable Firefox / Thunderbird / FileZilla / OpenOffice etc. All of the applications on this site can be run from an external flash/hard drive. No installation neccessary. Just unzip and go. More applications will be on the site in the future. From operating systems and office suites to image editors and games. Tags: Web Developer Blog , Portable Applications

A list of Firefox extensions that are useful for web development. The Web Developer Extension is a 'must have' for web developers (i.e. if you could only have one, it would be it). Some haven't been updated for Firefox 1.5 (or you may have to go to the extension authors homepage to get an updated version). Update (07 Dec 2005) : Add N Edit Cookies, DevBoi, Screen grab!, MozRef Sidebar. Update (20 Jan 2006) : Console², FireBug, View Cookies, View Rendered Source Chart. Update (25 Jan 2006) : IE View Lite. Aardvark (remove elements of a page, can view tag type/id/class) Add N Edit Cookies Codetch (WYSIWYG editor) ColorZilla (colour picker) Console² (JavaScript Console Replacement) DevBoi (web development documentation reference) EditCSS Fangs Screen Reader Emulator FireFTP FireBug (DOM Inspector + JavaScript console) Html Validator Hypertext DOM Browser IE Tab IE View IE View Lite (smaller download than IE View, by almost 10x) JavaScript Debugger L...

This function returns the dimensions of an element (left, right, top, bottom, width and height). You can pass on either a string (which gets the element by ID), or the element itself. function getElementDimensions(el) { if(typeof(el) == "string") { el = document.getElementById(el); } if(!el || !el.offsetParent) return false; var left = el.offsetLeft, top = el.offsetTop, width = el.offsetWidth, height = el.offsetHeight; do { el = el.offsetParent, left+= el.offsetLeft, top+= el.offsetTop; } while (el.offsetParent); return {"left" : left, "right" : left + width, "top" : top, "bottom" : top + height, "width" : width, "height" : height}; } Example use: var foo = document.getElementById("foo"); var fooDim = getElementDimensions(foo); if(fooDim) { alert(fooDim.left); } var barDim = getElementDimensions("bar"); if(barDim) { alert(barDim.top); } Tags: Web Developer Blog , JavaScrip...

Two functions for working with nodes via the W3C DOM (while they have only been tested on web pages, there is no reason why they won't work (with minor modifications) with anything that implements the W3C DOM and uses JavaScript/ECMAScript). function removeAllChildNodes(node) { if(!node || !node.childNodes) return; var nodeCount = node.childNodes.length; for(var i=nodeCount-1;i>=0;i--) { node.removeChild(node.childNodes[i]); } } function getImmediateChildren(node, tagName) { if(!node || !node.childNodes) return; if(!tagName) tagName = "*"; var elements = document.getElementsByTagName(tagName); var nodeCount = elements.length; var children = new Array(); for(var i=0;i<nodeCount;i++) { if(elements[i].parentNode == node) { children[children.length] = elements[i]; } } return children; } Imagine the following HTML: <div id="foo"> <ul> <li>Item 1</li> <li>Item 2</li...

The Uniform Server - run a web server off your external drive (for Windows based PC's). A useful way of developing your websites, no matter what PC you are using. No need to install anything. Server is Apache and includes MySQL, PHP and Perl. Can be used as a production/live web server (just copy the files over to the server hard drive). Edit (17-Jan-06) : Site is down, but you can still get it from SourceForge.net: Uniform Server . Tags: Web Developer Blog , Portable Development , Portable Web

If you run ipconfig /all in the command prompt in Windows it shows detailed info about your network adaptors. You may want to then print that information off. However it is in a command prompt window (where copying and pasting isn't exactly easy). Here is a batch file that opens up notepad with the information. When you close notepad, it then deletes the ipconfig.txt file that was created. ip.cmd ipconfig /all > ipconfig.txt & start /wait notepad ipconfig.txt & del ipconfig.txt Edit (27 Nov 2005): This can be set up as a doskey macro to replace existing command, can pass on parameters that ipconfig accepts. So if you run this in the command prompt window, then type in ipconfig /? , it will show the help in notepad. doskey ipconfig=ipconfig $* $g ipconfig.txt $T start /wait notepad ipconfig.txt $T del ipconfig.txt Tags: Web Developer Blog , IPConfig

The W3C has several useful validation services. Most are for the standards they have developed, but there is also one for web feeds (Atom / RSS). These are the ones I know of. (X)HTML / MathML (plus some favelets you can add to your bookmarks) Link Checker (checks for broken links) CSS (Cascading Style Sheets) Feeds (Atom / RSS) P3P (Platform for Privacy Preferences) RDF (Resource Description Framework) XSV (XML Schema Validator) SVG (Scalable Vector Graphics) Tags: Web Developer Blog , W3C Validation

There are quite a few freeware applications that run on an external drive. These sites have a list of them. The advantage of them is that you do not need to install anything (except maybe to get the files to copy to the drive). When you use these applications you can develop your applications or websites on any (Windows 2000/XP) PC that can read your drive. Portable Apps (a suite of applications, including Firefox, Thunderbird, FileZilla) Portable Freeware TinyApps.Org (not all of these applications are portable, but quite a few are). An example of how portable development can be done is web development. If you follow the instructions at Apache/MySQL/PHP on a usb flash drive , you can run an Apache Server off of your drive, so you have a portable web development environment. If there is a text editor you like and it is portable (for example SciTE ) you can edit your pages and test them with PortableFirefox without ever installing anything, then upload them to your site using P...

The Ultimate getElementsByClassName . Originally written by Jonathan Snook, this function has been improved by Robert Nyman. A very useful function if you want to get elements that all have the same class name. Supports searching for elements with multiple class names (i.e. class="one two"). Tags: Web Developer Blog , CSS , JavaScript

PDF Database Report is a template for the MyGeneration code generator. It uses iTextSharp to generate the document. The report includes tables, foreign keys, indexes and views. Details for each column (name, data type, is nullable etc) is shown for each table and view selected. Tags: Web Developer Blog , MyGeneration , iTextSharp

Thinking of adding effects to your web pages using JavaScript? Jonathan Snook has comprised a list of useful ones you can use: JavaScript Effect Libraries . Moo.fx (simple animations, small download), script.aculo.us (more powerful, has AJAX capabilities, drag/drop, visual effects, auto-complete controls) and Rico (AJAX, drag/drop, cinematic effects, behaviours). Use the Prototype JavaScript Framework, which can make developing JavaScript web applications easier. script.aculo.us is probably the most powerful. There is also a mention of Walter Zorn , whose libraries support more browsers (doesn't use Prototype, drag-and-drop works even with Netscape 4 and Internet Explorer 4). Tags: Web Developer Blog , JavaScript

Adding events to elements via javascript should be easy but is not. Each browser has different methods of adding events, most standards compliant ones would use addEventLister() (as defined by the W3C), but Internet Explorer uses attachEvent() . That is why Scott Andrew LePera created functions to add and remove events, regardless of browser: Crossbrowser DOM Scripting: Event Handlers . However, Peter-Paul Koch of QuirksMode found a problem with it: addEvent() considered harmful . So he set up a recoding contest for developers to improve on it. Eventually a winner was declared , but there are still problems with it. It does not work on IE5 Mac or Netscape 4 (although with the number of people still using them dropping, it may not cause a problem as long as you have a fallback, like server-side processing), plus there can still be a memory leak with Internet Explorer for Windows. One of the judges, Dean Edwards decided to write his own solution . It is different, as it does not use ...

Many more objects properties and methods have been added to JavaScript DOM Text Clips . As well as being useful as text clips, it also serves like a reference - it can be used to see if a certain element supports a method or property as defined by the W3C. Any of these properties or methods, if used appropriately (i.e. don't use 'href' on a 'table' element for instance), should work in any DOM1 compliant browser. Tags: Web Developer Blog , PN2

An alternative javascript file for Tabbed Search . Instead of changing the form action when clicking a table, it changes the action when clicking the submit button, so it does not impact on other possible submit buttons in the form. HTML and CSS pages remain the same. The script: tabbedsearch.js // http://simon.incutio.com/archive/2004/05/26/addLoadEvent function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } // this sets up the forms for search // tested and works in IE 5+, Firefox 1.0+ function setupForms(method) { // get all forms and loop through them var forms = document.getElementsByTagName("form"); for(i=0; i<forms.length;i++) { if(forms[i].id == "") { forms[i].id = "form" + i; } var formid = forms[i].id; // get list var list = forms[i].getElementsByTagName("ul...

If you look at Google or other popular search engines, you notice that they use tabs to indicate what you are searching. What they do not do though, is change the forms action without going to a new page. With this script and accompanying CSS, it changes the parent forms action page and sets focus on a tab. The pages are contained in an unordered list that is then formatted to look like tabs. Uses W3C DOM level 1 methods and properties, so should work in any complaint browser. Tested and works in IE5+, Firefox 1.0 and Opera 8.50. If JavaScript is disabled, it simply goes to the page linked to. The script: tabbedsearch.js // http://simon.incutio.com/archive/2004/05/26/addLoadEvent function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } // this sets up the forms for search // tested and works in IE 5+, Firefox 1.0...

More Text Clips for PN2. Work in progress. Useful when developing web pages, or any scripting that uses the W3C DOM and JavaScript. <?xml version="1.0"?> <clips name="JavaScript DOM"> <!-- reference DOM 1 latest: http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html --> <!-- reference DOM 2 core latest: http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html --> <!-- reference DOM 2 html latest: http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html --> <clip name="------ Document properties ------"></clip> <clip name="anchors">document.anchors</clip> <clip name="applets">document.applets</clip> <clip name="body">document.body</clip> <clip name="cookie">document.cookie</clip> <clip name="domain">document.domain</clip> <clip name="forms">document.forms</cli...

This function gets the inner text of the supplied node. It is recursive, so includes inner text of any child nodes. <br /> tags will be converted to linebreaks. Whitespace can be optionally excluded. Should work in any W3C DOM level 1 compliant browser. Simple to use - just do: myNode = document.getElementById("myNode"); // include whitespace var text = getInnerText(myNode); var textNoWhiteSpace = getInnerText(myNode,true); And the script itself: function getInnerText(node,ignorewhitespace) { var text = ""; // if the node has children, loop through them if(node.hasChildNodes()) { var children = node.childNodes; for(var i=0; i<children.length; i++) { // if node is a text node append it if(children[i].nodeName == "#text") { if(ignorewhitespace) { if(!/^\s+$/.test(children[i].nodeValue)) { text = text.concat(children[i].nodeValue); } } else { text = text.concat(children[i].nodeValue...

Updated Text Clips for Programmers Notepad 2 (C# ). ASP.NET Snippets and Miscellaneous Snippets (properties) added. Tags: Web Developer Blog , PN2

Programmers Notepad 2 has a very useful tools feature. The configuration is kept in the %APPDATA%\Echo Software\PN2 folder as UserTools.xml The format is fairly simple. Here is my UserTools.xml file: <schemetools> <global> <tool command="C:\Program Files\Scintilla Text Editor\SciTE.exe" flags="40" folder="" index="0" name="SciTE" params="&quot;%d%f&quot;" parsepattern="" shortcut="0"></tool> <tool command="C:\Program Files\FileZilla\FileZilla.exe" flags="40" folder="%d" index="1" name="FileZilla" params="" parsepattern="" shortcut="0"></tool> <tool command="explorer.exe" flags="40" folder="" index="2" name="Windows Explorer" params="%d" parsepattern="" shortcut="0"><...

The Opera browser is now available without banner ads. Has fairly good standards support and is a very small download, also very fast at loading and displaying web pages. Now if only it had an extensions mechanism like Firefox. A three way battle between Firefox, IE and Opera (which was only really two way before as Opera had ads). Tags: Web Developer Blog , Opera

Edit (30 Sep 2005): ASP.NET Snippets and Miscellaneous Snippets (properties) added. More Text Clips for Programmers Notepad 2 . Useful for when working with C#. Create a file in the clips sub directory of the Programmers Notepad directory, with the extension .clips (i.e. csclips.clips) and paste in the following code: <?xml version="1.0"?> <clips name="C# Clips"> <clip name="------ Exception handling ------"></clip> <clip name="throw"><![CDATA[throw(new |Exception());]]></clip> <clip name="try-catch"><![CDATA[try { | } catch(Exception e) { }]]></clip> <clip name="try-finally"><![CDATA[try { | } finally { }]]></clip> <clip name="try-catch-finally"><![CDATA[try { | } catch(Exception e) { } finally { }]]></clip> <clip name="------ Iteration ------"></clip> <clip name="do"><![CDA...

Search weblogs with Google Blog Search . If a site has an RSS feed and 'pings' a site (like Weblogs.com) when it is updated, it should become searchable through this. In some ways better than Google Search as it is likely to be more up to date and have less spam. You can have your results as an Atom or RSS feed. No ads (yet). Tags: Web Developer Blog , Google , Google Blog Search

Passing Tamper-Proof QueryString Parameters and Creating Expiring Web Pages cover how you can improve the security of your web application. While the example code is in VB.NET, the idea can be applied to any web programming language (PHP, Perl, VBScript etc). Basically you pass a hash (of the parameters plus a 'secret salt' (a custom string added to the start/finish)) only known to those that need to connect to the page (often just pages on the same website, but maybe used by other sites), along with the parameters and the current time and date. Tags: Web Developer Blog , ASP.NET

7nights - Web Standards Are Your Responsibility . It may be a challenge to get an uncompliant site recoded to standards, but will save time in maintenance in the future (if you pages are semantically well done), plus the pages will work as expected (except perhaps a few CSS quirks) in any browser that is compliant with the standard. Standards can also be a selling point for an application - a bigger market can be targetted than if you coded just for the dominant browser (i.e. Internet Explorer). Plus there is no guarantee that your site will work in the future (if IE lost its dominant market share). Tags: Web Developer Blog , Web Standards

Runasspc allows limited account users to run programs with admin rights. Better than runas as it saves the credentials encrypted in a file and you decide which programs can be run as admin, no need to give out the password. Tags: Web Developer Blog , Runasspc

Standards-schmandards is a site about developing accessible web pages. Despite its name, standards are important to its authors. It is the home of FANGS , a screen reader emulator for Firefox. Tags: Web Developer Blog , Web Standards

Looks like many pages will not be broken when the CSS in IE7 is improved. So by implemented hacks that use child selectors and the * html hack to work round IE, the * html will be ignored while the child selector processed (like what other browsers do). "We've already started talking about a few of the CSS changes that are going to be available in IE 7 when we release, but there are a few hanging points that we haven't talked about yet or haven't covered completely. There are 3 specific items I'd like to talk about: Using the root node wild card selector for IE only rules (* HTML) [strict mode only fix] Multi-class selectors as defined by CSS 2.1 (.floral.pastel) [strict mode only fix] Pseudo-element parsing sometimes flags rules as invalid (P:first-letter{ color: red; }) [strict/quirks mode fix]" Improving the CSS 2.1 strict parser for IE 7 Tags: Web Developer Blog , CSS , IE7

Some may have figured this out already, or use the GDS install tool at Horopter.com (which also contains instruction on how to do it manually). There is an easier way than this (the files are actually part of the Google Desktop install): Go to C:\Program Files\Google\Google Desktop Search Copy the files GoogleDesktopMozilla.src and GoogleDesktopMozilla.png Go to C:\Program Files\Mozilla Firefox\searchplugins Then paste the files into this folder You can also create a batch script to do it as well: @echo off cd "%ProgramFiles%\Google\Google Desktop Search\" echo Copying GoogleDesktopMozilla.src copy GoogleDesktopMozilla.src "%ProgramFiles%\Mozilla Firefox\searchplugins\" echo Copying GoogleDesktopMozilla.png copy GoogleDesktopMozilla.png "%ProgramFiles%\Mozilla Firefox\searchplugins\" Tags: Web Developer Blog , Google , Google Desktop

Client-side version of LinkList Class (C#, ASP.NET) . Works in a similar way: var links = new WebDeveloperBlog.LinkList(); links.Add("Home", "home.aspx", "Home Page"); links.Add("Page 1", "test.html"); links.Add("Page 2", "page2.aspx"); links.Add("Page 3", "page3.aspx"); // need to set CssClass for 'Inline' and 'Block' types links.CssClass = "myclass"; // use inline type (surround with span tags) links.ListType = "Inline"; document.write("<p>Inline ListType<\/p>" + links.ToString()); // use block type (surround with div tags) links.ListType = "Block"; // change separator links.Separator = " | "; document.write("<p>Block ListType<\/p>" + links.ToString()); // use ordered list type (surround with ol, li tags) links.ListType = "OrderedList"; document.write("<p>OrderedList ListType...

Seems Google Talk , Google's instant messenger service, is now available. Uses the open source Jabber/XMPP protocol. Because of this, it is more cross platform friendy - i.e. you can cmmunicate with users on Mac, Linux etc - but not with AIM or MSN Messenger users. Requires a Gmail account. Very basic, no rich text or smilies. Links to Gmail inbox and allows you to email by clicking the familiar Gmail logo next to a name. Tags: Web Developer Blog , Google Talk

These functions query a web page and gets all elements using CSS selectors. Could be seen as more powerful versions of getElementByTagName. cssQuery is by the author of IE7 (not the new browser being developed by Microsoft, but a hack to improve CSS support in IE 5 or later). It has recently had an update to cssQuery Version 2 to support more selectors. getElementsBySelector is similar to this and is less powerful and is used via document.getElementsBySelector. An example of where this might be useful is if you wanted to change all links that opened in a new window to open in the current window instead and be made bold: var tags = cssQuery("a[target='_blank']"); for(i=0;i<tags.length;i++) { tags[i].setAttribute("target", ""); tags[i].style.fontWeight = "bold"; } Tags: Web Developer Blog , CSS , Javascript

This class can be used to generate a list of links that could be used for breadcrumbs or menu navigation. Add items to the list as follows (1st parameter is text, 2nd is the page url and 3rd is the tooltip, which is optional): LinkList links = new LinkList(); links.Add(new LinkList.Link("Home", ResolveUrl("home.aspx"), "Home Page")); links.Add(new LinkList.Link("Page 1", ResolveUrl("page1.aspx"))); links.Add(new LinkList.Link("Page 2", ResolveUrl("page2.aspx"))); links.Add(new LinkList.Link("Page 3", ResolveUrl("page3.aspx"))); // need to set CssClass for 'Inline' and 'Block' types links.CssClass = "myclass"; There are four types of list types. Shown in the order they are added in. Also, if the current page you are on is the same as one in the list, the text is displayed instead of the link. One is 'Inline', which surrounds the links with a span tag (only if yo...

Much like the original Recursive File List Control , this user control lists files and folders within a virtual web folder. Improvements include - excludes directories ending in '_file' (i.e. those created by Internet Explorer when you download a web page), excludes files beginning with '~$' (i.e. temporary documents generated by Microsoft Office applications), multiple instances can be placed on a web page, postback does not end up causing duplication of list and it takes into account other querystring parameters that may be passed on to the page. Control (filelist.ascx) <%@ Control Language="C#" src="filelist.ascx.cs" Inherits="WebDeveloperBlog.RecursiveFileList" %> Code behind (filelist.ascx.cs) using System; using System.Collections; using System.Collections.Specialized; using System.IO; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebDeveloperBlog { public class RecursiveFileList : UserCo...