Speakers include Dan Donald (@hereinthehive), Elliott Kember (@elliottkember), and Scrunchup’s Anna Debenham (@anna_debenham).

Students can attend for £20. There are currently only 50 student tickets available, so hurry!

Use the discount code debfollowers to save 15% off your ticket.

Related posts:

1. Upcoming Event: Young Rewired State hack week

It’s a week for young developers across the country to go and build visualisations, digital and/or non-digital products using government data, alongside working devs in businesses across the UK.

These would be presented back to government at the end of the week, either in person, or by live stream from wherever you are based.

Hack events are a great way to get hands-on experience working on real projects, and they’re also really good fun. This will look amazing in your CV or portfolio.

If you’re interested in taking part, please register, or if you’re a bit too old but would like to help out, maybe your organisation can volunteer some time and space for the hack days to take place.

A message from the Brighton hub:

We’re looking for up to three people to come and spend the week in our offices, working together, with some support from us to code/design an application, website or digital/non-digital visualisation, and present it back via live stream to people from the Government on the Friday.

As above, the criteria for signing up are:

• 15 to 18 years old.
• must be able to code or design to a reasonable standard.

To take part, sign up on the website.

Related posts:

1. Upcoming Event: Web Developers Conference

Dreamweaver

Need I say more? Adobe just does stuff right when it comes to software, they always have and always will. Dreamweaver is the perfect environment for hand coding sites from scratch or just managing the content in the WYSIWYG editor. I get to pick and choose how I want to work, the WYSIWYG is great for editing stuff like content and images so you don’t have to spend time looking through all your code for that one typo. In Dreamweaver CS4 they did some major updates to make the WYSIWYG view even more realistic to what actually shows in the browsers. It doesn’t stop there, when it comes to developing, I build the entire site in the Code View and don’t switch over until I get ready to insert the copy onto the site.

There is other software out there that provides just the coding environment and they are okay, they just don’t offer all the features that Dreamweaver does. FrontPage however is absolute junk and I would never recommend that to anyone. Microsoft likes to inject a lot of their own meaningless code into websites that are built using FrontPage. They were out of the game for a while and just came out with a new FrontPage. I haven’t had a chance to look at it in depth however I still wouldn’t suggest that another developer give it a shot.

Photoshop

Photoshop is another awesome Adobe software and if you do anything with web or graphics then this needs to be in your A List of programs. It has been around for years and now offers the ability to do 3D design work, great for logos and those out of the box websites. You’ll notice some of the 3D work on our website Minds Eye Design.

So as a web designer, how do I use Photoshop? For me personally I use Photoshop to do all the design work of the website, header graphics, logo design, buttons, page layout, etc. Once I have a finished look I send it off to get approval from the client. It’s always easier to edit a .PSD than it is to change the layout and design of a site when it’s built out. I never build out even a rough draft of the site until I get approval of the design. Always keep your file layered so that you easily manoeuvre, remove, add new pieces to the design. Once I’m ready to start building I slice up the .PSD to be different sections of the website and I deal with those graphics individually.

Basecamp

It doesn’t matter how many clients you have, you must use some form of project management. Basecamp is an online based project management tool that grows with you. Think of how helpful it would be if you had one go-to place with document collaboration, to-do lists, milestones, file storage, etc. Not to mention creating a login for your client to login and give feedback on designs, write the content for their site, upload graphics and logos, along with seeing deadlines that you posted for their project. If you’re saying to yourself, “that it would be awesome” then you need to get Basecamp, because they do all that and more.

Freshbooks

Since I found Freshbooks a few years ago not a day has gone by that I haven’t used it. I’m able to manage my clients and all of their login information. I have the ability to put together proposals and notify my clients via email when they are able to login and view them. I can send out one-time or recurring invoices, even auto-bill through my Authorize.net account. For my clients that aren’t very tech-savvy Freshbooks can send them a statement in the mail with a pre-addressed return envelope.

My clients can login and create support tickets which will automatically notify me or another staff member that is responsible for that item. I never loose track of where I spend my time thanks to the timer that helps me to log time spent on projects. I can also create staff & contractor logins for them to track their time as well. Clients can also login and see how their project is coming along by viewing how many hours have been tracked to specific tasks on the project.

Of course you got to have some way to manage all your expenses paying for domain names, hosting, and contractors so Freshbooks gives you an area to manage all of your expenses. Freshbooks will even give you a report at the end of the year to hand over to your CPA.

MailChimp

MailChimp 
I’ve used a lot of email marketing applications such as ConstantContact, Benchmark, Campaigner Pro and none of them have even come close to touching the usability and functionality of MailChimp. They are the most affordable, have great analytics and the ease of use is mind blowing. They also just brought their new supercomputer, Omnivore, online. Omnivore is a powerful abuse detection technology that helps keep their clients free of Blacklisting. They were actually one of the first email marketing platforms ever made, however at the time there wasn’t a big demand so they kept it for in-house marketing. They launched MailChimp to the public a few years ago and since then have become one of the best Email Marketing companies around. Check out how they compare to iContact and ConstantContact.

WordPress

I’m hoping that you’ve heard of WordPress if you’re reading this. Most people think of WordPress as a blogging platform but really it is a CMS platform. It just so happens that WordPress is so easy to use that just about anybody can run a website. It’s one of the more popular platforms for bloggers since most of them don’t know a lot of HTML/CSS. It has been underestimated by web developers as a CMS for websites, although it has been picking up a lot of steam in the past year. I proudly use WordPress as my one and only CMS platform for clients.

There are ofcourse other blogging platforms that are pretty good such as Blogger and Typepad. I personally don’t care for Typepad simply because you have to pay for it. I understand they want to make money but at a minimum of $9/month I don’t see why you wouldn’t just do a Blogger site. Blogger however is a little annoying because of the shameless advertisements and that you don’t have the flexibility as you do with WordPress. Now it’s important that you understand there are two genres of WordPress, one is WordPress.com which is hosted online and you can get a free account however that is the same as a Blogger account. Everything I’m talking about is WordPress.org which is a free download that you can install on your own server and customize as much as you want. If you’re not going to host it yourself then it’s really a toss up between Blogger and WordPress.com

Wufoo

Last but definitely not least is Wufoo, an online HTML Form Builder. Wufoo changed the way that I do HTML forms. Now instead of it taking me almost an hour to create and setup a custom form I can have it done in under five minutes. Wufoo also creates a database for every form that you create where it saves form entries. If you’re a freelancer then you need to have Wufoo on your A List, they can save you time and they are very affordable. You can even use them for to create a paid event registration form able to accept all major credit cards via an Authorize.net account. Wufoo forms can even send instant notifications to your cell phone, which comes in handy when you want to keep up with new client consultation requests.

What’s on your A List?

What are some programs or third-party apps that are on your A List? Have you had the pleasure of working with any of the programs I listed above? I’m interested to hear how you use them.

No related posts.

Hello, my name’s Jamie Rumbelow and I’m a 15 year old developer, entrepreneur, musician, philosopher and artist from Cambridge in the UK. I’m here to talk about real time web applications, their use, some examples, and what you need to do to start creating real time apps.

Real time web applications are exactly that – real time. They allow us to push the boundaries of the web and turn it into a communication platform rather than just a resource. They enable instant communication, collaboration and contribution – and are slowly taking over and revolutionising the web. From simple chat apps to word processors to drawing programs to social networks to books to online lessons to reviews and ratings to heaven knows what else, they allow our web experience to feel faster and more open. We can finally feel other people working with us, along side us and communicating.

You’ve probably come across real-time web technologies before. Take a look at Facebook. For starters, the instant messenger fixed at the bottom right of every page allows users to chat to their online friends in real time. It tries to mimic a desktop instant messenger as much as possible, and although there are occasional problems with it, it is a remarkable achievement and goes to show what some simple JavaScript can do. Facebook is also starting to merge real-time features into the rest of their application. If you visit the home page you can see friend’s status updates and other elements of the stream appearing in real time. Some of these smaller, less complicated touches can utilise real-time tech and make the user experience that little bit nicer.

One of the very big and groundbreaking uses of real time technologies is, of course, Google Wave. Google Wave is a communication tool that allows people to chat in real time, and actually see each other’s characters appear as they’re typing. It’s a novel idea, and while Wave hasn’t proved that useful it is still a very clever bit of kit. Wave also allows support for attachments and other forms of media or gadgets, to add much more real time functionality. You can chat, brainstorm ideas, play games or tweet all from the Wave system. Check out Wave at http://wave.google.com

Another, lesser known system is Etherpad – something that has really impressed me and I will definitely use in the future. It’s an online, real time word processor. It’s fast, I mean really fast, and works really smoothly. Although it’s not the most full featured word processor ever, its interface is really simple and easy to use and the real time features work brilliantly. Creating a pad takes literally a second, you don’t even have to sign up, and then you can just point people to the URL and they can join and start collaborating. I highly recommend it, so check out http://etherpad.com for more.

Now we have looked at a bit of what real-time technologies can do, let’s get to the nitty gritty. How can I add real-time functionality to my app? There are a number of different techniques that I’ll touch on, but the simplest is called polling. During polling, the client (your user) makes a regular connection via an AJAX request to the server. The server responds with a status code or a message which notifies the client of an event – the event could be a new chat message, or the event could just be a simple response letting the client know that everything’s still okay and functional. Messages are generally in the form of a data serialisation format like JSON or XML, but can be any format, as long as the client knows how to parse it. Generally a session key is used to persist data across a polling session.

A second technique requires Flash – where a pixel flash widget is embedded into the page, which using Flash’s socket support connects to the server and keeps the connection open. The server then pushes data to the client when it receives it, and the Flash widget receives the data and triggers a JavaScript event, allowing the client to update the page. A good approach for when Flash isn’t installed is to fall back to polling, but there are other socket-based techniques such as a Java applet or HTML5’s Web Sockets API.

There are open protocols such as XMPP to provide real-time communication. XMPP is used by Google Wave, Apple’s Push Notifications, Google Talk, and much more. XMPP not only supports its own protocol (which uses a custom server to send and receive messages), but also support for connections over HTTP using servers like Tornado, which was recently released and powers the real-time stream on FriendFeed.

The most important thing to remember though is to only use real-time tech when it will add to the user experience – if you just want to play around with real-time stuff, try creating a mini chat app or something else, but don’t just build real-time support into your application for the hell of it. Real-time is difficult to do, and get right, but once done properly it can add real benefit to the user’s experience on your application, and provide a bit of that wow factor.

If you’ve got any questions about real-time web applications, web development, programming, or anything else, just send me an email at jamie at jamierumbelow dot net. You can find my blog, Jamie on Software, at jamieonsoftware.com. You can follow me on Twitter at @jamierumbelow. Good luck, and let me know if you build something cool!

No related posts.

• You know what Twitter is and are familiar with the terminology
• You know what a RESTful API is

Rate limits

Twitter has 2 different rate limits in place for IP addresses accessing the API. The standard rate limit is 150 requests per hour which can be enough for simple applications. But for apps that require more regular polling or requests that are started from a user visiting a page or running a script this simply isn’t enough. So you can get your application whitelisted, once approved (not more than 48 hours) you get 20,000 requests per hour. To get whitelisted Twitter has made a simple form. You must be logged in with the user that will be accessing the API and you need to list all servers that will be accessing the API.

It is always best to do this before you launch an app. I learnt the hard way with TwitterLeague (which I no longer operate) and had some unhappy users who couldn’t log in due to me hitting the rate limit for the hour after only a few minutes.

Unauthenticated methods

By “unauthenticated” I mean that you do not require a users login credentials to access the method. For instance getting a feed of the latest tweets from the public timeline, or getting a list of followers for a user who does not have their status set to private.

Sample PHP code for requesting the most recent tweets from the public timeline

//Initiate a curl session
$ch = curl_init();

//Set the URL to the Public timeline
curl_setopt($ch, CURLOPT_URL, "http://api.twitter.com/1/statuses/public_timeline.xml");

//Set a reasonable timeout of 5 seconds
curl_setopt($ch, CURLOPT_TIMEOUT, 5);

//Make sure we return all the data
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Put the contents into a variable
$xml = curl_exec ($ch);

//Close the curl session
curl_close ($ch);

//Print out the xml
echo $xml;

These methods are great for applications that want to gather statistics and do not require users to sign up or have a customised user experience. For instance Twitter Grader is a site where you enter a username and every day from the time you enter your username it will gather statistics about the number of followers, number of tweets and an overall rank. This can then be analysed with lots of different filters like location or popularity etc. This can all be done because you don’t need to be authenticated to read someones tweets (if their account is not set to private).

Authentication

Authentication is used for a couple of reaons. You either want to secure your data (we won’t get into an argument about basic authentication without SSL), or you want to have a personalised view. When you login to Twitter.com you see your tweets, your settings and your mentions etc. API authentication acts in the same way. If you want a web app that has an area for a user to login to, where they get a personalised page with data from the Twitter API, then you need to connect to the API as that person. That all make sense? If it did then you can read about the 2 types of authentication offered by Twitter.

Basic HTTP Authentication

When Twitter first announced their API back in 2007 they only had one method of authentication. This was Basic HTTP Authentication, which means sending a users username and password to let Twitter know you are requesting data on behalf of the user. This is great for Twitter clients like Tweetdeck and Tweetie because users are used to doing that with Instant Messenger clients etc. Beware that there are some big drawbacks.

With web apps it means that phishing is an issue. Any website could grab your Twitter credentials and take over your account and do a lot of damage.

The next biggest problem that Basic Auth brings is that it hides which user/application that’s sending tweets. This means that if an application gets your details and does malicious things with it, the only thing you can do is change your password and then go back to all the legitimate applications you use and update your credentials with them.

Sample PHP code for requesting a users direct messages

//Initiate a curl session
$ch = curl_init();

//Set the URL to the Public timeline
curl_setopt($ch, CURLOPT_URL, "http://api.twitter.com/1/direct_messages.xml");

//Add the users username/password (you will need to get this from the user)
curl_setopt($ch, CURLOPT_USERPWD, "someusername:somepassword");

//Set a reasonable timeout of 5 seconds
curl_setopt($ch, CURLOPT_TIMEOUT, 5);

//Make sure we return all the data
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Put the contents into a variable
$xml = curl_exec ($ch);

//Close the curl session
curl_close ($ch);

//Print out the xml
echo $xml;

OAuth

If you don’t know what OAuth is please see this wikipedia article. There are 2 main advantages for users who authenticate using OAuth, the biggest being that they don’t have to enter their username and password into a third-party application because when authentication is needed the app redirects to Twitter.com so the user can enter their credentials there. When a user does this the application gets a couple of codes that are unique to that user and that application. This leads on to the second advantage. Because the codes given to the application are unique to the user and application it means Twitter knows who is sending tweets on the users’ behalf and therefore the users can remove a single applications access to their account without disrupting other applications access.

The image below shows you how you can connect to Twitter and get access tokens so you can then send status updates etc without using a users username and password.

Future changes to the API roadmap

At Le Web 2009 Ryan Sarver from the Twitter Platform team gave us a preview of where the API will be going in the next year. There were a few changes to authentication. One of those was that there is going to be a 6 month deprecation of Basic Authentication. This is a big step and could well stop thousands of applications working. So they have done a couple of things to ease the transition:

• If you use OAuth authentication the user will have 10x the number of request available in their request limit
• You can use a persons username and password to get OAuth access tokens

So both of these points are encouraging you to start using OAuth as the only method of authentication for Twitter. It’s a great step forward to make Twitter more secure for their massive user base.

Ollie’s golden rule for authentication

Only use Basic auth if you absolutely have to. If you are doing a web app don’t use basic auth! Promise me!

No related posts.

So why would you bother? Firstly, maintainability. The goal is to keep the mechanics of your code separated from your HTML. By removing these dependencies you can re-craft your HTML without making huge changes to your functions. Secondly, re-usability. By abstracting the function you are trying to perform away from the specifics of the site you’re currently working on, you can easily apply your code to future projects with little effort.

So, here is our quick-hack. All we want to do is create a sideways slide-out menu. Click on our button and out it slides.

Ok, still with me? Excellent. What we’ve done here is animate our slide-out div from 0 pixels wide to 100 pixels wide in 300 milliseconds. Pretty smooth. Now let’s list the things that are wrong here.

1. This will only work with the 2 divs specified, we can’t easily apply this to any other divs.
2. We have hard coded the width of the div, rather than letting the CSS handle layout.
3. We have no way of re-binding the click event in case we make changes to the document, such as we often like to do with AJAX.
4. If we place all our Javascript inside our document load function, we’ll eventually end up with one huge function, very difficult to manage.
5. We’re pros, we wanna take it to the next level.

Right, the first thing we do is place our code in its own function. This is easy enough.

This is great, we can now turn any pair of elements into a slide-out menu and at any speed. Great start, and already several benefits. Where do we go from here? Let’s tackle the width issue. Browsers let us add custom data to any element on our page, and jQuery provides handy methods for us to achieve this.

And here is our new function:

That wasn’t so bad, this is also how built-in jQuery functions like slideUp and slideDown remember the original sizes of stuff that you ask it to animate.

What we have so far is good, and there’s nothing wrong with leaving it there. However, we’re now gonna make this a full-blown jQuery plugin. What we want to be able to do is make anything we like slide-out whenever we like. This separates our sliding logic from our menu setup logic. Here’s what we want our makeOurSlideyMenu function to look like.

That’s a beauty, clean and simple with no animation logic included. However, it doesn’t work yet. We now need to create a slideOut function, so this is where we get clever. jQuery lets us extend the jQuery object itself and add custom functions using the jQuery.fn.extend method. There are just a couple of simple rules to remember, we wouldn’t want to break convention now. As a rule, jQuery() functions return a jQuery object. In the cases of animation we’ll return the same object that was given to us, which allows for function chaining (y’know, like $(something).doThis().doThat() etc). Also, we try not to assume that the user will always send parameters into a function (so, if they forget to give you a speed, just assume a default speed). Inside a jQuery function, ‘this’ refers to the jQuery object containing the elements we care about.

So, let’s get stuck in:

What we’ve done here is called a function within jQuery that extends the jQuery functionality. We pass into this the name of our function and its definition. We can now call our slideOut function on any jQuery collection of elements and each one will animate over the specified time. This will really make our life easier in the future and keeps the site specific logic tidy.

Related posts:

1. CSS Nuggets in Scrunchup

:first-of-type

For an example of this, have a look at the first paragraph of this article. I have set the font size of the first paragraph to be slightly larger than the paragraph text in the rest of the article to draw the reader in.

:last-of-type

The :last-of-type selector is useful if you want to take the bottom border out of a table. In this example I’m changing the bottom border from black to red so you can see it working.

Remember this isn’t just restrained to tables, you can use it for other elements too.

nth-of-type

One of the things that CSS is not great at (at the moment) is grid layouts. Scrunchup’s homepage has grid blocks for each article, and getting them to line up vertically and horizontally was a bit of a challenge. I want to tell the block on the end of the row to clear, but none of the others, and the only way of doing this with CSS that I knew of was by adding a class to the last block on each row with, and targeting it with clear:left. Not only does this add extra markup, but the content I’m styling is dynamic – what is the last block in the row at one time may be the first at another. Our search results page is a good example of this.

Why you shouldn’t define heights

We could give each block a height of, say, 400px and that would solve the problem. But this is a really bad idea. If someone visiting your site wants to increase the text size, or you have just a little more text in the block than the block can hold, it will break the layout. This is one of the things that differentiates web design from print design – content on the web is dynamic.

Using a wrapper div

Having different sized boxes without setting the 1st one on each row to clear causes the layout to break. The most common way of fixing this is to put each row in a wrapper div. But this adds extra markup, and you still have the same problem if the grid blocks are not static.

Using nth-of-type

Here’s the code I used to solve this problem:

It uses a little bit of maths that, very basically put, tells the 4th block in every row to fully clear the blocks above it. Being able to specifically target an element without giving it a different class is incredibly useful.

We can also use exactly the same technique to turn off the margins in the 3rd block of every row so it lines up flush to the left and the right.

nth-of-type is an incredibly powerful selector, and can be used in some really creative ways.

Faux Randomness

For the tag cloud at the bottom of each page, I got the tags to rotate at different angles. It looks random, but it’s not really. Here’s the code:

Shadows

In case you didn’t know how to already, here’s how to use CSS to make shadows.

I’m going to break this up to show you what does what. The first bit we define is how far we want the shadow to offset to the right, so 1px shifts the shadow 1px to the right. The next bit shifts it down, so in this example, it will be shifted 2px down. Where I’ve put 3px is the amount of blur the shadow will have. If I put 0px, it would be a solid shadow. Finally, I’ve given the shadow a colour of #333333 which is a dark grey.

Inset Shadows

You can also do inset shadows. These can look quite good on form labels, such as search boxes to make it look like it’s cut into the background. Here’s the code:

Each browser has its own proprietary way of understanding box-shadow because it’s quite new, so to make sure it shows up in previous versions of browsers, you’ll need to repeat the code like this:

IE has it’s own unique way of doing shadows, so you’ll need to put this in your CSS too…

Transform

If you have a look at the author photo at the top of the page, you should see it’s slightly tilted (depending on your browser version).
To achieve this effect, you can use the following code:

This rotates the element 2 degrees clockwise. If you put (-2deg), it turns it the opposite way.
To make it look like a polaroid photo, you can use this code:

Icons

To automatically show a filetype icon on a link to a file, you can use something called an attribute selector. In this example, I’ve set all links to .pdf files to display a little pdf icon. The href$=’.pdf’ bit looks for anything that ends with the string .pdf.

You can also do the same thing with links. I’ve set all the links on this site that go to Flickr to display a little Flickr icon. The href*=”http://flickr.com” bit looks for anything that contains the string http://flickr.com.

Browser Support

Most modern browsers support all of these CSS nuggets, with the exception of IE. I’d put a full browser support table for each of these selectors but it would date very quickly, so to find out which browsers currently support which selectors, head on down to www.quirksmode.org – it has a lovely compatability table and resources which I refer to extensively, and I really recommend it.

Got your own CSS Nuggets? Share them in the comments.

Related posts:

1. The Evolution of a jQuery Plugin

If you are looking to be, or already are a developer, then I’d think it likely that you have a good idea of what programming is and probably an idea of some of the different languages on offer. If however you are a designer, writer, artist or marketer then you probably don’t. Worse still, you will probably at some point have to work with somebody does. Thus follows a list of the languages that you may need to know exist and have a rough idea of how they work, that way when a developer says to you “lets use a combination of C# and PHP” you can tell him that maybe he needs to think this through a little more.

I’ve split the languages into three different sections: server side, client/user side and data definition. Data definition languages will not come with tutorial links as they’re best used in combination with something else and often covered there.

Language types

Server side:

These languages run on the server that’s “on the internet”. The user never sees any of the code and in most cases probably won’t even be aware that something complicated is happening. Server side languages are used for creating forums, contact forms and blogs to name 3 common examples. The upside is that you have exactly the same environment for everything (so no worrying about different browsers) and also a central store of information such as a database.

Client/User side:

These cause things to happen on the user’s computer. The user sees the code and if they want can edit it, therefore you cannot use these languages to connect to your database or perform secure actions such as logging in. They do however allow your page to become “interactive”.

Data definition:

Essentially these languages don’t quite fit into either of the above, yet are something it’s worth knowing about because some of them are very popular. These languages basically store information, that’s it.

Server side languages

PHP:

It’s free, and it’s supported by most hosting providers on the internet. It’s used for wordpress, phpBB, and on Scrunchup to name just a few. Aside from being free and widely supported, it also has extensive documentation, many tutorials and also connects easily to MySQL databases (covered later under data definition). The best tutorial site I have found for it is Practical PHP Programming.

Java:

The reputation of this language is one of boredom, bloat and general ickyness. It is not as “fun” as Ruby, it is more bloated than Python and is a lot stricter than PHP. These are not bad things, Java has an incredible range of features, is very well developed and secure. Sun know what they are doing and if I were to write a large scale application for something such as a local government, I would consider Java. Tutorials are not hard to come by, but the Sun website is a good starting point.

C# and the .NET framework:

It is developed by Microsoft and thus requires a Windows server to run on. Microsoft have many tools for C# developers which makes developing with the language much easier and faster. It also connects with MsSQL very easily and has no shortage of online tutorials and help sites. It is an industry standard comparable to Java in the corporate world. Examples of where it is used are StackOverflow, Microsoft, and MSN. I have not learnt C# but the tutorial at csharp-station seems to cover the key points to get started.

Ruby:

You’ve probably heard of “Ruby on Rails”, it’s the cool new language that everybody is talking about. This is not quite correct. Rails is a framework for Ruby, Ruby itself is the language. Ruby is not nearly as well supported as PHP but is gaining popularity fast for its clean writing style and easy to read nature. It also connects to MySQL very easily, has a thriving community and is free. Some examples of sites that use it are Basecamp, Penny Arcade, and A List Apart. Tutorial wise I suggest looking at the Ruby documentation page, it has links to several good tutorials.

Python:

Like Ruby is very easy to read and not as well supported as PHP is in terms of web hosts. Python was not designed as a website language and has uses far beyond making websites, its design philosophy is that there should be one way to do things and if you’re moving from writing code in PHP to writing code in Python, this can seem limiting at first. Having used both Python and PHP I much prefer Python for anything beyond a simple web-app. Python is used by NASA, Google App Engine, and EVE Online‘s game client. I recommend the official Python tutorial as a great way to start learning.

Client/User side

Javascript:

It’s popular and supported in all major browsers (though as you’d expect, some better than others). Being linked to HTML it requires you to know what the DOM (Document object model) is to some extent. It reads a lot like PHP and C# so if you come to it from Ruby or Python then you are in for a bit of a rough time at first. Ajax is a subsection of Javascript that involves loading content onto the page after it has already loaded. Javascript has a very large community and many frameworks to help you use it, jQuery and Scriptaculous being two that spring to mind. Javascript is used by Facebook, Apple and Twitter. For a tutorial on Javascript I suggest looking at W3Schools tutorial and looking at the source-code of sites.

Flash:

Flash can be good, Flash can be bad. Any time a site has a video playing on it (like YouTube), chances are it’s using Flash. Any time a website plays sound at you (last.fm) chances are it’s using Flash. Most internet games are written in Flash and a Flash plugin is available for all modern browsers. Flash can be bad because not all websites benefit from animations and music, it is also not readable by those that rely on screen-readers which can lead to accessibility issues. Flash is used by YouTube, Diablo 3, and Desktop tower defence. Entheosweb have a wide range of lessons in Flash to help you get started.

Data Definition

XML:

This looks a lot like HTML, indeed, some sites use XML combined with XSLT instead of HTML (starcraft2.com). Most languages have an “XML parser” that can read XML and then use the data it contains. XSLT is a set of commands that can be applied to the XML as a client side language that will transform the XML into something else such as HTML.

SQL:

Like chocolate this comes in many variants: MySQL, PostgreSQL, MsSQL, Oracle and probably more. SQL is the language used to communicate with a database and add, find, remove and alter data in it. SQL is used on any site that has a database.

Following this up

In future editions of ScrunchUp I plan to follow this article up with a more in depth look at each language and include a small program in them to give a better idea of what a language is like and how good each it is at various things, you may even find that programming is not as daunting and complex as is often made out and that you’d like to have a go at it yourself!

Related posts:

1. Starting out in Web Development

Further education or employment?

This was a major dilemma I came across when I decided I wanted to get into web development. Because the nature of this industry is fast paced, everything moves too fast for the education system to keep up with. But does this mean that the education system (in terms of technology) is redundant? Well I’m still not sure. But I will tell you my trail of thought.

• By the time I completed the course the technology would be out of date
• I can’t motivate myself to work at a place which I wouldn’t have much benefit from
• I wanted to learn and earn
• I work better teaching myself

Employment it is!

There is one type of employment that works really well in this industry. Apprenticeships. Most people think apprenticeships are just for plumbers and electricians, but its a great way to see what the real world is like. I started work (and still work there to this day) at Dorset County Council doing web applications with geographic/spatial data. But don’t think that I just worked 9-5. As soon as I knew enough about web development I started programming in my spare time.

Challenge yourself

It’s easy enough to pick up a programming language and develop a simple website, but how do you actually stamp your mark on the industry? You need to push yourself. My first website was a social network complete with video uploads, forums, chat rooms and everything. All I knew before I started the project was how to insert something into a database table and how to grab a value from a form (which I learnt on the job).

Keep going

Once you have a web app or two, just keep up the momentum. I currently have about 3 app ideas on the go at the same time.  This way I keep my head in the game, and learn about new technologies and methods. Plus I am working up quite a large portfolio to help me when I apply for another job.

Put yourself out there

When I created FootyTweets, my largest Twitter web app to date, I wanted to put myself out there, get some buzz generated, and getting people to recognise my work and efforts. So I looked at Twitter Developer Nest and put my name down to do a talk on the service and some of the issues I have come across.

I ended up speaking at the event and got lots of people asking me about the site and got lots of contacts. I loved it so much that I went back the next time and showed off my latest web app. Where did this lead? Well on Monday (30th September 2009) I went with a bunch of people I met at the event to have a photoshoot with UK Wired magazine.

I thought back and realised that if I’d just sat at home, made web apps and didn’t put myself outside of my comfort zone, then I wouldn’t be the developer I am today.

Your opinion matters!

I’m open to all of your input so please comment away below. You can also have a look at the Twitter polls that I put together for each issue of Scrunchup.

Related posts:

1. What are the different languages?