Talk In Code

JS Bin is an online tool that allows you to test JavaScript without having to muck about with files. You can just quickly cut and paste some code in and view the output. It is even possible to make the code you are looking at public and then use this as part of an ajax call in another instance of the application.

To get you started there is a nice help section, which also includes a couple of videos.

This tool really impressed me, especially the easy inclusion of several different JavaScript frameworks. I don’t mind testing JavaScript, but sometimes I just want to run a little bit of code on it’s own to see why it isn’t working as I expected it would. This tool fills that much needed gap, and the addition of allowing other people to view your code is a very nice feature. Well worth a look!

Tizag has been created along the same lines as W3Schools in that it is a useful resource of tutorials and code examples on webbases languages. Most of the tutorials are well written and extremely detailed and so are useful for beginners and experts alike.

If you can’t find what you are looking for then the Tizag Webmaster Forums are very active and you will always find someone who will lend a helping hand to whatever you are stuck on.

One thing that comes in useful when linking to other websites is to use a little thumbnail of the site as part of the link. Although it is possible to do this it usually involves having command line access to the server so that you can install various different programs and extensions.

The simplest mechanism accomplish this is to use third party sites to create the thumbnail for you. Here are a few examples of free thumbnail services.

www.thumbshots.org

Thumbshots provides access to small images (thumbnail size) of many different websites. However, they are very small, with no way to change this, and can often be weeks out of date if the site has had a redesign. You can access Thumbshots from any webpage by using an image with a source that reads from the Thumbshots website.

<img src="http://open.thumbshots.org/image.pxf?url=http%3A%2F%2Fwww.talkincode.com%2F" alt="Site image" />

This produces the following image for Talk In Code.

Websnapr

Websnapr is a slightly more customisable system as you can select from four different image sizes. These are t for thumbnail, s for small, m for medium and l for large.

Here is an example code for a small image of Talk in Code.

<img src="http://images.websnapr.com/?url=http%3A%2F%2Fwww.talkincode.com%2F&size=s" alt="Site image" />

This produces the following image.

Art Viper

Art Viper website thumbnails is a more complicated mechanism of getting images of websites. Here is a list of the parameters you can pass to the script.

1. q: The quality of the image, about 90 seems like a good bet.
2. h: The hight of the image.
3. w: The width of the image.
4. sdx: The width of the rendering browser in pixels.
5. sdy: The height of the rendering browser in pixels.
6. url: The URL that the image is to be created from.

So putting these things together you can create the following source.

<img src="http://www.artviper.net/screenshots/screener.php?url=http%3A%2F%2Fwww.talkincode.com%2F&q=90&h=280&w=340&sdx=1024&sdy=768" alt="Site image" />

This produces the following image.

Saving The Images

Printing off images from other peoples websites is good, but it can lead to certain sections of the site slowing down as the browser goes off to fetch the image from a different server. The ideal situation is to save the image to your server and then link to it from there.

Take any of the above examples. It is possible to extract the information from the images served and store them on your own site. This can be accomplished with curl using the following code.

$url = urlencode('http://www.talkincode.com/');
$image_url = 'http://images.websnapr.com/?url='.$url.'&size=s';
 
$ch = curl_init();
$timeout = 0;
curl_setopt($ch,CURLOPT_URL,$image_url);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
 
// Getting binary data
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_BINARYTRANSFER,1);
 
$image = curl_exec($ch);
curl_close($ch);
 
// output to browser
header("Content-type: image/jpeg");
$imageFile=fopen('websiteimage.jpg','w');
fwrite($imageFile,$image);
print $image;

This saves the image and then prints it out.

By far the best resource for finding information about PHP and all of the functions available is from the PHP website. Not only can you view the PHP documentation, but you can also download PHP and many of the extensions like the Smarty template system.

Each PHP function and section has its own page with lots of detailed information about usage and instillation, which can be found quite easily on the site by entering the domain name followed by the function name you want to look up. If the function isn’t found that the site points you towards a search results page.

One of the better aspects of the site is the user submitted code snippets that can be found on many of the pages. Take the substr() function as an example. There are many pages of user submitted functions, hints, tips, error trapping and other code snippets which can usually solve most of the problems that you are stuck on.

Although the instillation section is completely brilliant, the site probably isn’t the best site in the world if you are starting out to learn PHP, there is a getting started section, but this wont get you past a certain level.