So this week, as promised everyday around 4PM(UTC) We’ve posted a new cheatsheet for a particular subject. They’ve already helped so many people and I hope, as a website developer, they can help you too.

The cheatsheets themselves just contain the tags for code, no explanation apart from sone that do contain a small caption next to them. A very good skill to have during developing online is to look at code and be able to reaad what it does without breaking it down. For example…

<?php wp_login(); ?>

Means This is the Wordpress Login Text

Many langauges make sure you can do this by just looking at the tag themselves. Here whats we’ve covered this week on pureelite

1. HTML + XHTML Cheat Cheets
2. CSS Cheatsheet
3. MySQL Cheatsheet
4. AJAX Cheatsheets
5. PHP Cheatsheet
6. Ruby on Rails Cheatsheet
7. Wordpress Cheatsheet

So if you’ve enjoyed reading them, please comment and tell other people about them!

We’ve got our HTML,XHTML,CSS and MySQL. Now to make it all fancy and dynamic.AJAZ is the running on requests without reloading the browser. This means that you can process and do functions without going to a new page with a new layout and styles.

For example the various AJAX libarys are in the Ruby on Rails, this powers the postings on twitter, the updating on tweetree and loading and saving data in website applications like fetchMP3 and Facebook.
jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Download the jQuery Cheatsheet

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Download the Prototype cheatsheet here

Theres currently  a discussion going on that is about the process of making a website, every developer has their own method. Mine is very simple but the points below are an excellent way to make and plan a website. Many websites take alot more, thinking and people to make so the process can get switched or messed a round a lot. Please comment with your methods.

1. Do your research – What is the purpose of this site? Who is it for? etc. Become the website.
2. Write your content – Finding a decent copywriter will pay off here.
3. Work out the page structure for the website – Basically a sitemap. Knowing the content will help at this stage.
4. Code your content in semantic (X)HTML – Don’t think about the layout or styling at this point; just content!
5. Start brainstorming and sketching layout designs – Knowing the content will help immensely at this stage.
6. Modify your (X)HTML to contain any classes, ids and structural elements you may need when writing the CSS.
7. Code any behavioural JavaScript elements – It’s helpful to do this without any styling on the website at first.
8. Code any backend elements in your desired language – PHP, Ruby, etc.
9. Code your CSS and insert images – This is where you make the site look how you designed it.
10. Go back over anything that is still left – Tweaking and finishing any JavaScript that relied on styling. Finishing backend coding. Adding any structural elements you forgot about.
11. Profit!

I am always pleased to see a nice new good website arise. Well as everyone knows we’re now on a new host and I simply only found a out about this host when my friend Ben sent me a link to a photo. The site in question would be localhostr. Its a very cleaver name and I’m sure any website developer or network administrator will know why its cleaver.

Since I was sent the link I haven’t stopped using it. Its Fast, Elegant and Simple. Its simply just an alternative to Photobucket and Tinypic. I used to use Tinypic but now i have moved to localhostr. Its simpler, has both an ajax uploader and a flash uploader. Although as announced on the website the uploader doesn’t currently work with flash 10. I know without doubt that the developers behind the website will be busy trying fix it.
Read more »

Right, earlier today I presented to you a website where you can edit already made ajax loading icons, that’s all well and good but as soon as it went up i know a number of people got it on their RSS, one of them being my friend Mat. Right long story short mat was talking to me about faking an ajax loader and was asking why people do it. Well I dont know much about the human mind but I like to think about why we do things. You don’t need a qualification for that.

Why would you fake loading time with ajax?
Right well before we dive into that question, not all websites fake it, for example here at pure elite (because we’re running the huge FTP) behind the site im sure sometimes submitting and receiving data might take a while. Many websites, for example Myspace and Bebo wont fake it. Main reason is there is no need. They’re databases are already huge and sometime(ok, most of the time) submitting data will take a few seconds. So don’t go accusing people of faking when they haven’t. Get proof!

Even when you have proof there is a very good reason why they are faking it, reassurance. People are always going to feel more confident when they can see a visual implication so they know they’re data has been submitted. If your a good web developer you need to appeal to these values of peoples minds. The point of having an ajax loader is to just reassure people that something is happening on the page.

Sometimes its done with php wait/pause or JavaScript pause/wait. I cant remember the terms off the top of my head but tis is good practice to have a 2/3 seconds wait on the page when submitting data with ajax. Also if you think about it there’s nothing to loose by doing it either, your reloading par t of the page with ajax therefore the page anchors or position isn’t moving and there’s is no downside. Although for the older people using the internet, they dont know the technical terms like ajax and php(then again not many end users do) but having a rotating icon on a page might distract them from moving down the page. So you have to think about who will be visiting and using your website.

I hope that answered Mat and some other people that were thinking it but didn’t ask me.

I have some big news soon on a project that i have beenw orking on for a while now and along with releasing  abeta of this product int he next few weeks ill also be releasing some of the source code for some of the jax and editorial content. Meanwhile i needed an ajax loding image earlier and tbh, i dont think any serious web developer has got time to make their own in fireworks or photoshop. Heres a very simple resource…

http://www.ajaxload.info/

There ya go, a very simple and useful web 2.0 service. What do you think?

This is an index of all the currently leaked Windows 7 builds, Provided by Milestone 1 and Pure Elite so please go to the relative sites and show your support. This HTTP has been provided for the supporters of joejoe.org! Also reposted at pure elite, so please enjoy the builds.

Current Builds:

• Windows 7 6519 x86

• Windows 7 6801 x86 – M3

• Windows 7 6801 x64  -M3

And being added this evening is Windows 7 6596 x86

HTTP
http://www.pureelite.co.uk/windows7/

FTP
Hostname: pureelite.co.uk
user: win7
pass: goodies

Please feel free to download as many builds as necessary but please think about the costs and upkeep of the server, have you fair share and don’t abuse it.

Thanks!

This is something every website developer should have uploaded on their servers, i have:

http://www.jakemchugh.co.uk/dev/lightbox

Many of my clients have wanted image gallery’s and this is a nice little effect that brings more attention towards the image being shown, You can download it here:

http://www.lokeshdhakar.com/projects/lightbox2/

How to use this:

• Download and extract the contents

• Add the following lines to your “HEAD” section of your HTML page, change to be appropriate.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

• When you have added the image add rel=”lightbox” into your img code, like this:

<img src=”IMAGEURL” alt=”" rel=”lightbox” />

Whey hey, there it is… Working
[Please check the lightbox website for more info] Here

I hope to post your more effects to help you enhance your web UI.