I did come across a niggly little bug in the latest release (2.3 at time of writing) which causes a large number of mail clients to incorrectly parse the generated email headers. The most obvious manifestation of this bug is that the headers are displayed in the body. Which probably isn’t what you want.

Fortunately the ‘fix’ is simple. By default PHPMailer 2.3 defaults to using “\r\n” for linebreaks. This is what confuses a lot of mail clients as they’re expecting a “\n”.

PHPMailer Class, line 259:

change:
var $LE = "\r\n";

to:
var $LE = "\n";

That worked for me, although YMMV.

ISPs are required by law to hand over any and all of this information to the security services, police and most worryingly to your local council upon request. Quite apart for putting an intolerable strain on smaller independent ISPs this is a direct breach of our civil liberties.

This, along with other laws which restrict photography in public places are being pushed through under the imaginary umbrella of “The War on Terror”, but what it’s really about is protecting the stranglehold of and handful of media giants. How long will we continue to allow governments to strip us of our basic civil liberties in order to protect us from this imagined threat?

Wonder why you haven’t heard about this on the news? You’d think this would be front page stuff right? It’s funny how some stories seem to get buried isn’t it.

European Parliament members have already voted in favour of outlawing this kind of ISP disconnection policy. French MEP Guy Bono’s proposed bill on safeguarding cultural products, drafted in September, had made clear: “Criminalising consumers so as to combat digital piracy is not the right solution”

“The repressive measures are measures dictated by industries that have been unable to change their business models to meet the needs imposed by the information society. Switching off internet access is a powerful sanction which could have profound repercussions in a society where access to the internet is a mandatory law for social inclusion.”

So here’s how the new laws work:

First strike: Suspect is issued an email warning.
Second strike: Internet access contract is suspended.
Third Strike: Internet access contract is terminated and access is cut off.

Sounds fair right? Not really. So what is this really about? Is it about protecting us? Is it about protecting the profits of some very, very rich people? Or is it just another step towards a full police state? Let’s face it, we’re halfway there already.

The following assumes that you have Uniform Server installed in “%ProgramFiles%\Uniform Server\”. If you have it somewhere different just modify the instuctions accordingly.

In the php.ini file located in “%ProgramFiles%\Uniform Server\udrive\usr\local\php”, search for the follwing line:
;extension=php_curl.dlland enable curl by removing the semicolon as follows
extension=php_curl.dll

It’s not quite as simple as that. You’ll need three dll files for cURL to actually function. Luckily you can get them here.

http://jamazon.co.uk/files/uniserver_curl.zip

Download and unzip the file above. You should end up with three relevant looking dlls

ssleay32.dll
copy into “%ProgramFiles%\Uniform Server\udrive\usr\local\apache2\bin”

libeay32.dll
copy into “%ProgramFiles%\Uniform Server\udrive\usr\local\apache2\bin”

php_curl.dll
copy into “%ProgramFiles%\Uniform Server\udrive\usr\local\php\extensions”

Then just start (or restart) Uniform Server for the changes to take effect.

You can take a look at the output of phpinfo() or run the following code to determine whether or not cURL is installed.

<?
if (!function_exists('curl_init')){
die('Sorry, cURL support is not installed');
}
echo "Yay! cURL support is Installed!";
?>

Bob’s your uncle!

Essentially a protocol relative URL will request external resources such as images and scripts in the context of the current pages protocol http: or https:

If, like me, you’ve been ’solving’ the issue of “mixed content” warnings with a small chunk of server-side logic you’ll be pleased to hear that all you really needed to do was something like this:

<script src="//www.example.org/script.js"></script>

Looks broken doesn’t it. I can assure you that it’s entirely valid. Get into the habit of specifying all external resource URLs as protocol relative and you’ll banish mixed content warnings forever.

More about this on http://nedbatchelder.com

Partly because I wanted to make something using the Twitter Search API, and partly because I wanted to do something relatively easy in PHP after spending far too long working with ASP, and because I hate Internet Explorer, I created icanhazrealbrowser.com

The site uses Twitter’s Search API to keep track of anyone ‘hating on’ Internet Explorer. These ‘disses’ are collated into a real-time compendium of hate.

It’s far from perfect, and produces a few false positives here and there, but it’s just a bit of fun.

Maybe someone will enjoy it.

By this time next year, if IE 6’s usage pattern continues to match that of IE5, IE6 will be around 13% - iedeathmarch.org

In my opinion a 13% market share is still too high to drop IE6 support completely for anything intended for consumption by the general public. Let’s not forget that the majority of computer users do not know or care what a “browser” is. They just “click on the e” or “go onto the AOL internet”.

For closed system like admin interfaces or internal web apps I see no reason why system requirements which exclude ancient browsers cannot be enforced. That’s the distinction between a website and a web app. A web app is software, and software comes with system requirements. Obviously the decision to drop IE6 support depends heavily on your target audience. So the general rule of thumb should surely be if your site/app would not suffer from IE6 compatibility don’t bust your nuts making it IE6 compatible.

My preferred method is simple. If I’ve decided that an application I’m developing is not going to be ie6 compatible i will add in some simple browser detection either server-side or with a bit a JavaScript which disables the application and shows a friendly message informing the user that they are using a very old browser. I generally give them some upgrade options in the from of links to the Firefox and IE7 download pages.

If your site or application actually works okay in IE6 but has some quirks that you’re unable/unwilling to iron out another good approach, and one taken by Facebook is to display a friendly unobtrusive message to IE6 users again explaining that they’re using very old software and some parts of the site might look/behave oddly. It would be interesting to see figures on how many upgrades have occurred as a direct result of IE6 users of Facebook. I imagine it’s considerable.

All in the the trends look promising, but no sooner will we forget about IE6 like we did IE5 then we’ll start begging for IE7 and all it’s idiosyncrasies to bow out in the same way.

This one had me stumped. The control panel for our CMS worked fine, just as it had been since, well since forever. The problem was that when visited with Internet Explorer users were now being presented with a brief flash of the login page followed by a 404 Not Found error.

After repeatedly pummeling my desk with my head I noticed that turning off Internet Explorer’s friendly HTTP errors allowed the control panel to be viewed as expected. So why was Internet Explorer in particular interpreting the server’s response as a 404 when it was clearly a 200? I already knew that the server wasn’t issuing a 404 response and the Live HTTP headers Firefox plugin confirmed this.

The HTTP headers displayed by ieHTTPHeaders (Thanks for the tip Lyallzord) told a different story though.

The problem was eventually traced to an incorrectly referenced pngfix behaviour pngbehaviour.htc in one of the control panel stylesheets. To be honest it was news to me that it even existed, but the path was incorrect following a restructuring of site assets hence the broken reference.

It seems that Internet Explorer on recieving a 404 response for referenced behaviour will helpfully 404 the entire document.

So that’s nice.

Rick recently asked me help out with the redesign of the G&G Motorsport site. The task? An Ajax powered drop-down inline contact form available from any page. The solution? jQuery.

G&G Motorsports is an independent company specialising in the supply, fitting and calibration of engine control systems. The new site needed to serve up news, event and product information in a slick and stylish way, so a clunky old-school contact form just wasn’t going to cut the mustard.

To progressively enhance Rick’s custom Wordpress install , yet at the same time keep things simple, the contact anchors begin as simple mailtos which will always be available in the absence of JavaScript. jQuery is then used to attach some onclick events which show the hidden contact form with a slideDown effect.

The form itself is submitted via an Ajax callback to a standalone custom php script which receives and validates the form data, asynchronously serving a response back to the $.post callback which is then displayed in real-time to the user.

The new site can be seen on ggmotorsport.co.uk, or you can read more about the redesign over at ricknunn.com

The following guide came about after I was tasked with transferring my Web Development expertise into two VB developer colleagues. No mean feat in the one month I have left at my current place of work. Ultimately it’s possibly a futile task, but it’s worth a shot.

Web Development is not just collection of related technologies. It’s a state of mind, and in that respect it is very much like Yorkshire.

What follows is aimed at existing developers (VB or otherwise) looking to move into Web Development. The advice I offer is that of best practice in the field of Web Development. The books suggested are generally those which I have read myself that or that come highly recommended by friends and colleagues of mine.

What is a Web Developer?

A web developer is a software developer or software engineer who is specifically engaged in the development of World Wide Web applications, or distributed network applications that are run over the HTTP protocol from a web server to a web browser. Many web developers are also skilled in related areas such as web design, information architecture, usability engineering, web content management systems, web server administration, database administration, software engineering, project management, network security, and search engine optimization.

Developers often specialize in either front-end or back-end work. Frontend developers tend to focus on the client-side and typically work with technologies such as markup languages, ECMAscript and its variants (JavaScript, JScript, ActionScript), CSS, and the DOM. Backend developers usually focus on the interaction between server-side frameworks using Perl, Python, Ruby, PHP, JSP, or .NET and databases. Some back-end developers maintain databases directly on their web servers, while in other situations the backend developer calls data, managed by a database administrator, on an external system.

- Wikipedia

In my experience the statement about specialization comes into play more within larger organisations. Small to medium enterprises tend to look for generic web developers with a grounding in one or maybe two server-side frameworks as well as an understanding of (X)HTML / CSS and JavaScript. Generally speaking, most web developers begin their careers within smaller organisations, and while it is not always the case, you will tend to find a large degree of overlap between front-end and back-end web developers for this very reason.

The Right Tools for The Job

There was a time when the in thing was to use a WYSIWYG editor to design and develop websites. Those days have gone (Microsoft please pay attention! Visual Web Developer 2008? OMGWTFDONOTWANT!!*). Dreamweaver, whilst it’s design view should be used for nothing more than ridicule, is a perfectly adequate syntax highlighting code editor for web development. It also has the benefit of it’s built in FTP client which is very handy. What you use to edit your code is entirely a personal preference. Something with syntax highlighting and brace matching will save you time by helping you to work faster. Some options include:

• Notepad++ - Windows - Open source syntax highlighting code editor, many plugins available including an FTP client (compatible with Wine.. sort of)
• Aptana Studio - Windows/Mac/Linux - Eclipse based editor with an invaluable PHP debugger plugin as well as working nicely with html/css/javascript right out the box
• Notepad - Windows - included with any copy of Microsoft Windows (There’s no reason that, at a push you can’t ply your trade with this trusty tool)
• Dreamweaver - You should be familiar with it if nothing else. For some reason your employer might INSIST that you use it.

Mozilla Firefox is an excellent developer’s browser, and with the following plugins installed is close to a perfect development environment.

• Web Developer Plugin
• Firebug
• Firecookie
• ColorZilla
• HTML Validator

For testing in multiple versions of Internet Explorer in Windows, IETester is an invaluable tool. IEs4Linux is handy for linux based development environments but there’s not substitute for running virtual machines with differing OS/Browser setups to cover all bases. It is also a good idea to invest in a Mac of some description for testing purposes.

* To avoid confusion, the budding Web Developer should attempt to learn lolcat

First Things First

Your first task is to forget everything you think you know about Web Development. Forget Dreamweaver (for now). Please forget Frontpage. Don’t even THINK about cranking up Visual Studio, it isn’t a web development tool despite what Microsoft might tell you. To be sucessful in web development whether you plan to move into front-end or back-end development or even if you just want to be a competent web designer you need to start from the ground up. That’s HTML and CSS.

Knowing (X)HTML inside out is not an option. You cannot skip this step. CSS guru status is possibly optional for those in a soley back-end role where presentation and layout are the consideration of a front-end developer. Even so, I would argue that there’s no excuse for not learning at least the basic principles of CSS. Whether you’re a designer designing for the web, a front-end developer implementing the designs of others, or a back-end developer providing the business logic behind someone else’s front-end, you should always strive to fully understand the medium in which you’re working and the way in which your design patterns impact on others.

It is possible to grasp the fundamentals of designing for the web in XHTML and CSS in a fairly short space of time. I know this from experience after watching a colleague of mine, a talented graphic designer, learn web design from the ground up simply by reading and trial and error over the course of several months. Of course, it goes without saying that the intricacies of cross browser compatibility can take years to fully master, and in this respect there is no substitute for the wealth of experience gained over time fixing one mind numbing IE6 bug after another, over and over and over again, until your eyes start to bleed and what’s left of your brain trickles out of your nose. One year and a bit later Rick is still a talented graphic designer but one who makes my life all the more bearable by chopping up his own designs and turning them into perfectly semantic valid XHTML and CSS. All it takes is patience and a thirst for knowledge.

The Fundamentals

Broadly speaking a page on the World Wide Web consists of

• Markup - HTML or XHMTL - The bare-bones of the page structure and it’s content
• Style - CSS - colors, fonts, layout etc
• Client-side logic - JavaScript - how the page deals with complex user interaction.

Marking it up

The only possible starting point is to learn to write markup. Markup is what defines the structure of the pages which make up the web. A common misconception, and one that’s more commonly held by those already within the IT industry is that there are many different technologies for displaying pages on the web. Whether the url of your page ends in .html, .asp, .php or one of a multitude of other extensions, the page that you see is your web browsers interpretation of some (X)HTML markup (hopefully) in conjunction with some CSS. The important thing to remember is that no matter what technology is used on the server-side to generate a web page, the web page is self never amounts to anything more than some HTML and CSS. We’ll touch on JavaScript later on but for now we’ll pretend that it doesn’t exist. So I have to say sorry to all you .NET developers but I’m afraid that ASP.NET pages really aren’t some kind of magical in-browser .NET application. It’s an illusion created by Visual Studio, Some poorly auto-generated HTML forms and a heap of really bad old-school JavaScript.

The standards for (X)HTML markup are set out by the W3C (World Wide Web Consortium). As a Web Developer you should strive for as much as much of your (X)HTML to validate against the doctype you specify; and you should ALWAYS declare a doctype (or the sky catch fire). You should validate your markup regularly during development and before release. Having a HTML validator built into your browser (such as Firefox) saves a lot of time in this respect. One of the best resources for learning the fundamentals of HTML and CSS is htmldog.com, whether you’re a total n00b or you’re halfway proficient in the basics already they seem to have tutorials and reference to suit. W3Schools is also a very good (but ugly) source of quick reference for pretty much all web technologies including HTML, CSS, JavaScript and most major server-side languages.

If you’re planning on heading down the .NET route of Web Development (and there’s nothing wrong with that), it’s imperative that you fully understand the concepts of semantic, valid HTML, pure CSS layouts as well as good JavaScript practices before you even open Visual Studio. That way you’ll have a solid understanding of which features of ASP.NET to take advantage of and which you need to avoid like the plague.

It is one thing to understand HTML, it is quite another to write semantic HTML and express context and meaning through markup. I would suggest reading up on the subject of semantic markup before going any further as a solid understanding of these principles will make the transition into the dark world of CSS much less painful.

Reference:

www.htmldog.com - HTML and CSS Tutorials
www.W3Schools.com - Web Technologies Reference Guides
www.w3.org/Consortium - About the W3C

Books:

HTML Mastery

Cascading Style Sheets

Style on the web is achieved using Cascading Style Sheets. An in depth guide to CSS is beyond the scope of this article but if HTML is the cake then you can think of CSS as the icing. CSS allows you to take your plain, u-nstyled, semantic markup and skin it anyway you choose without affecting it’s content or structure. Every presentational element of a website design can be achieved using CSS and CSS should be your only method of styling markup.

CSS support across browsers is inconsistent. Different browsers will render valid CSS in wildly different ways to each other, and it is in dealing with these cross browser issues that the skill and experience of the front-end developer really comes into play. Be prepared for hours of nail-biting CSS debugging action. There is no substitute for learning from your mistakes. It takes time to smooth your way through the minefield of browser incompatibilities but resources like quirksmode.org are a godsend providing explanations of common CSS bugs, workarounds and accepted means of circumventing certain issues (Mostly Microsoft Internet Explorer ones).

Reference:

www.quirksmode.org - CSS Bugs and Hacks
www.positioniseverything.net - More CSS Bugs and Hacks

Books:

CSS Mastery
CSS The Definitive Guide

Client-Side Logic

It is almost impossible to develop a modern web application without employing at least a small amount of client-side code in the form of JavaScript. But what is JavaScript? JavaScript is not Java, and if you say it is I will hurt you. JavaScript is not like Java. It isn’t even a stripped down version of Java.

JavaScript is the name erroneously given to the implementation of the ECMAScript scripting language which is built into almost all modern web browsers.

JavaScript is what allows the developer to deal with complex user interaction. Broadly speaking, any kind of interaction between the user and the page which involves more than simply moving the user to another page is probably controlled by JavaScript.

Each web browser implementation of ECMAScript varies slightly and this can catch out even the most experienced JavaScript developer. Many open source projects have sought to level the playing field with comprehensive cross browser libraries which attempt to provide solid cross-browser APIs for common programming tasks. These libraries commonly referred to as as ‘frameworks’ allow developers to focus on writing their application rather than on the multitude of cross-browser issues their application faces; and I cannot be more clear when i say that “You really really need to use a JavaScript framework of some description or you’ll go clinically insane”

JavaScript Frameworks

• jQuery - The Write Less, Do More JavaScript Library
• MooTools - a compact JavaScript Framework
• Prototype - Easy AJAX and DOM manipulation
• Dojo - the JavaScript Toolkit

Some of these JavaScript frameworks make it possible by means of plugins to work on client-side logic with very little in-depth understanding of JavaScript. jQuery for example has a simple enough basic usage that designers with little to no programming experience are often able to integrate fairly complex interface logic unaided via plugins. Should you wish to develop anything more complex than what is available as a plugin you will need to learn JavaScript. For this you will need books. JavaScript is often dismissed as a ‘toy’ language or simply as a very basic scripting language but it is in fact a very powerful language in it’s own right and can take some effort to master.

One thing all these frameworks have in common is AJAX. AJAX is the acronym of Asynchronous JavaScript and XML. To an extent AJAX is little more than a marketing term, like “Web 2.0″. Generally speaking, AJAX is a term mostly misunderstood by the vast majority of people who use it. The term AJAX is commonly used to refer to any form of JavaScript based rich user interface (another acronym commonly banded about is RIA - Rich Internet Application). In essence AJAX is the name erroneously given to any means by which modern web applications communicate asynchronously with a web server to provide a rich user interface. This communication doesn’t have to be XML, in fact more often than not it isn’t XML. The underlying technologies behind an AJAX request are way beyond the scope of this article. The best way to learn more about AJAX is by choosing a JavaScript framework and using it.

Reference:

A concise history of ECMAScript
JavaScript Tutorials
en.wikipedia.org/wiki/AJAX - Sums it up better than I ever could

Books:

Learning JavaScript

AJAX hacks (never read but looks to be a great little primer)

Server-Side Logic

The Server-side is where your web applications get down to business. This is where you connect to databases, manipulate data and make decisions based on user input. You could say this is the “real programming”, but that would be to the detriment of all your hard work on the client-side.

A front-end developer need not learn a server-side language, though it is good practice to understand at least the basics of the server-side language of any project you’re working on. Back-end developers it goes without saying should be proficient in at least one server-side language as well as SQL and database design principles. There are as many choices of server-side framework as you care to choose but your best option is to pick one and learn it inside out. Popular frameworks include.

PHP - Arguably the most ubiquitous open source server-side language of all time - That doesn’t make it the best though
Ruby on Rails - Favoured by cool kids with slick hairdos
JSP - Favoured for “Enterprise Solutions” and by those with smart beards
ASP - Also known as Classic ASP - Most commonly VBScript or JScript - Although defunct as a language, many developers will find themselves supporting ASP web apps for many years to come. It’s a valuable skill to have
ASP.NET - ASP’s big brother - Most commonly VB.NET or C# - Very powerful yet most usually favoured by those who don’t know what they’re doing

Databases

As a back-end developer you will need to be proficient in SQL (structured query language) which is often but not always pronounced “sequel”. SQL is the language in which almost all Database systems accept queries. The basics of SQL are the same from system to system, but each database system has it’s own slightly varying syntax. Popular relational database systems include:

• MySQL - Open Source - Most popularly partnered with PHP
• PostgreSQL - Open Source - slightly less popular than MySQL
• Microsoft SQL Server - Most commonly used with ASP(.NET)
• Oracle - if you’ve got money to burn

Reference:
www.w3schools.com/sql - Basic SQL tutorial

Books:
SQL in a Nutshell

Final Thoughts

So hopefully this has given you some new directions to spin off in on your journey into web development. Hopefully it’ll help you avoid some time-consuming pitfalls, maybe it won’t, and maybe that’s half the fun.