James White - Web developer.

Web Developers are the people who make websites work. A quiet and underground group certainly, but if someone has a great idea for a website then it's a developer that turns the idea into a reality. I'm not saying we're changing the world, I'm just saying that some, some developers are changing the way the world works.

There are websites; Google, Ebay, Amazon, Wikipedia, Paypal and Facebook that really are changing the way the world works and they all run on scripts written and refined by communities of web developers.

Not all doctors discover penicillin and not all developers build Google Maps. But each developer can stand on the shoulders of the last and slowly build a better, faster and more useful internet.

I started developing websites 10 years ago, back when all you had to worry about was tables and onmouseover events. I'm still learning; the technology driving the internet is evolving just as fast as it ever has and with exciting (to me at least) developments around each corner there is always something new to look into.

This Site

Much of this site is given over to discussing web technologies, scripts, developers and the kinds of problems that we deal with.
Technicalities - To see the kind of issues faced in making just this modest website
Playground - To play with some make-things-do-something type web toys
Contact - And if you're so overwhelmed/underwhelmed/angered/delighted by the site then pop along to Contact and vent your love/rage at me

Playground

I wanted to make a simple 3d engine in Javascript. Writing a set of functions that compiles a 3d coordinates into x and y values with appropriate scale and lens distortion wasn't too difficult.
To make an object describe a circle you can work out the x and y coordinates at any point using simple trigonometry - the hypotenuse will always be the radius of the circle and the adjacent and opposite angles are derivatives of the current angle of the radius. Now if instead of applying the y value to the vertical position of the object, you used it as a way of distorting the scale of the object it would look like the object was moving towards and away as it gets bigger and smaller.

Apply the same principles to scale distortion for the z axis and tie it all together with mapped mouse events and calculated inertia and you get something quite fun.
This is a crude proof of concept, please excuse the rough edges. Click and drag to rotate, try throwing it around.

Technicalities

Javascript Libraries

I'd like to start by saying that this site has been scripted by me, from scratch. If you would like to know why I haven't used Mootools or jQuery;
Click here.

Validation

I'd also like to point out that the HTML for this site has been tested for cross browser compatibility and been validated. For more information about validation;
Click here.

Accessibility & Graceful Degradation

The site is still completely usable without Javascript. Though this rules out AJAX (find out why), it does mean that the site is much more accessible. To find out why accessibility means more than working in all browsers;
Click here.

Scrolling & The Back Button

If you are viewing the site in a small window you can scroll around the current area, but not around the whole site. If you click the Back button you are taken to the previous area, not the previous page. Little things, but they make a difference to the usability of the site. For details;
Click here.

Images

Someone once said that a picture is worth a thousand words. Unless the picture is of 500 words, in which case it's not.
These are some photos that I've taken and I think some are quite pretty.

Contact

If for some reason you feel unable to contain within you some nugget of information then please feel free to contact me.
If for some bizzarre reason you want my postal address, email me and I'll get in touch.

Email.
offwhitedesign

Tel.
+44 (0)7934848228

Skype.
swhite.uk

Techniques

Scrolling

The first thing you may notice is that the site uses a mechanism that has become quite popular; automatic scrolling. You click a link and the site scrolls off to another part of the page by itself.

It's pretty simple to make things scroll using Javascript, though there are problems. Primarily we need to make sure that the site will function without Javascript. If you want to know why this is so important, click here.

So links must work in themselves. Then we have Javascript commandeer click events on relevant links, stop the browser from following the original link and trigger a function that causes the scrolling.

In this instance I didn't want the user to be able to scroll away from the current area, the other areas are hidden and the user could get lost on what appears to be an empty page. So we hide the scroll bars and stop the user from being able to scroll around.

The problem we then face is one of screen size. If the window is smaller than the area being viewed then the user won't be able to scroll and see all of the content. So we have to use some CSS techniques to enable scrolling, but limit it to just the current area.

History

If you open this page and navigate around for a while before clicking the Back button then your browser will think that you want to go back to the last page, not the last area of this page. Unintuitive and annoying. But we can get Javascript to put the name of the current area into # value in the URL (browsers don't necessarily do anything if you change the # value).

Furthermore tell Javascript to monitor for any changes in the URL so if you click the Back button the URL # will return to the previous value (the last area) and Javascript will direct you there. This also means that external links can point to specific areas on the page.

Lovely. Accept that Internet Explorer doesn't support the # method. So if Javascript detects that the browser is Internet Explorer, it creates an invisible iframe, adds it to the page and writes the area name into that. When the Back button is clicked the iframe returns to the previous value and Javascript can take it from there.

Accessibility

Websites have a surprising amount of jobs to fulfill. They certainly have to be interesting, pretty, intuitive and fast. But that is just the start of it.

It used to be that if you wanted to look at the internet you had to have a computer, a modem and plenty of time. Today the internet is viewable on desktops, laptops, netbooks, tablets, PMPs, mobile phones and even wrist watches (no really).

One of the most important issues that developers face is ensuring that websites display correctly on devices of different sizes and capabilities. Web developers use principles like Graceful Degradation or Progressive Enhancement to cater for the largest possible audience.

Graceful degradation

Graceful Degradation is the principle of writing for modern browsers with all current technologies enabled, but for every technology employed, an alternative is offered.

Show Movie > if unavailable; show image > if unavailable; show text.

This site uses Javascript to scroll around and animate boxes opening, but if Javascript is disabled or unavailable then the site will continue to function without it. The page still loads, links still work and though not as animated, the site is still presented in a respectable manner.

Gracefully degrading robots

This backwards compatibility is also important for search engine indexing. Google (as an example) uses a program to read, understand and index websites. If most of the information on your website is presented in images then Googlebot will be unable to understand it.

Graceful Degradation means that we should include an alternative to the image for those who are unable to see it. Happily there is the image "alt" (alternative) attribute where we can describe the contents of the image. Googlebot can read the alt tag, and understand what images you have on your site.

Likewise if Javascript or Flash delivers content then Google might be unable to access or understand it. Which is a notable downside to AJAX...

AJAX

Much of this site is presented on a single page, the information is broken down into areas and the links take you from one area to another.

The positive side to this is that there is no load time between areas - they are all loaded at once. The negative side is that the initial load time (when the page opens) is longer because there is more to load.

One technology that websites can use is AJAX (Asynchronous Javascript And XML). AJAX is a way in which Javascript can get information from the internet without having to reload a page. Using AJAX I could load the information into the relevant areas only when the user goes to that area. Initial load times would be reduced and the page would load faster.

But because Javascript is loading the content, the site will be unusable by those without it. The Javascript won't be initiated by the Googlebot and the content will not be indexed. As well as that, the load times between areas would increase as the new area would need to be populated with content after the user has clicked to go there.

Taking this into account and the low number of resources that this site uses I decided to load everything at once.

Validation

Because websites are made for different browsers and devices they are written in a standard language, HTML, which they can all understand. HTML has a set vocabulary and there are strict rules associated with each word in it. If a developer uses an unrecognized word, or uses a recognized one incorrectly then browsers will behave in unexpected ways.

Assessing the HTML in a web page against these rules is called Validation. If the HTML in a page doesn't break any of the constraints then it is said to be valid.

Happily we don't have to sit with an HTML handbook and check each line of code to make sure that it doesn't contravene any rules, there is a free validation service offered by the World Wide Web Consortium (W3C).

W3C is an international body, led by the inventor of the internet Tim Berners-Lee, who aim to keep a balanced web by developing protocols and standards that mean no one company or group dictates the use or application of the internet.

Libraries

There are libraries of Javascript functions available. You simply link to them and you have all the functions you can probably think of. One example of a JS library is jQuery, which lets you do all sorts of things to the objects (text boxes, images pages etc.) on your site.

Now it certainly makes sense for developers to use these libraries, they can make website production faster by an order of magnitude. I think however, that it is important to know that javascript libraries don't allow you to do anything that cannot be done without them. They simply provide a short cut.

The scripts in established JS libraries have been tested and refined and work with all browsers and platforms. It certainly is comforting to initiate a function and know that the desired effect will be seen by everyone regardless of how they are viewing the site.

jQuery Version
To see a simple version of this site using jQuery Click Here.

The pitfalls of using a JS library however is when one becomes reliant on it and you don't know how it works. If there are any problems or unexpected results the developer is completely reliant on others to find a solution. While the developer community is large and often helpful it is down to ourselves to understand the nature of the tools that we employ.

Curriculum Vitae

About Me

I wrote my first website in notepad in 1998 with a simple javascript onmouseover event handler. Since then I've been learning what else you can do with a web browser. PHP4 then PHP5, OOP, Javascript, MySQL, AJAX, XML, XHTML, CSS, HTML5, jQuery... I'm still learning.

I was a volunteer editor for the DMOZ project from 2003 to 2007, I had built every computer I'd owned till I got a laptop and an iMac – I use linux when I can; I'm a geek.

Employment History

Web Developer, My-wardrobe.com - 2011 - present
Apache server maintenance and administration
Agile Development methodology - Scrum
OOS PHP, MYSQL
SVN version control

www.my-wardrobe.com

Freelance PHP Developer - Queenstown, New Zealand - 2008 - 2011
Develope bespoke management systems in OO Javascript, PHP5, MYSQL.
Produce pixel-perfect valid, compliant DHTML and CSS pages from mock-up files.
Create and prepare web ready image assets from Photoshop and Illustrator files.
Develop stand-alone OO Javascript libraries from scratch.
Develop additional functions that integrate with an existing PHP5 management system.
Integrate API's from Google, Facebook, Youtube, Paypal and Twitter.
Test HTML/CSS rendering and Javascript compliance across browser/platform.
Create HTML email templates – tested and integrated with litmus.com.
Advise clients of search engine optimization through intelligent content management.
Maintain remote apache servers.
Produce complex, joined MySQL queries.

www.myogle.co.nz
www.mountfordvineyard.co.nz
www.abl.co.nz

Web Developer - Self-Employed, Falmouth, Cornwall - 2004 - 2008
Develop content management system from scratch in PHP4 and javascript.
Modify CMS to meet individual clients' needs - developing additional functions.
Design websites from client and functional requirements – liaise with clients.
Domain registrar and hosting management.
Produce and manage site MYSQL databases.
Maintain web hosting and registrar services.

www.cloudnine-living.com
www.laurabufferyphotography.co.uk
www.offwhitedesign.co.uk/example_old

3d Artist DeBeers LV, London - 2002 - 2004
Chief 3d artist creating 3d computer models of high-end jewellery, sent for production using CAM and rapid prototyping machines.

Education

Falmouth College of Art - 1999-2002
3d Sustainable Design Degree - 2.1 BA(hons)

Falmouth College of Art - 1999-2002
Art & Design Foundation Diploma (Major in 3d design) - Merit

Portal

Other things

The Photo Competition - If you don't know what this is, it's not for you.
Fects - A pointless iPhone and Android app that makes things up

Comment