Wednesday, 26 September 2012

The ABCs of Web Development

Web development can often be an utterly perplexing affair. Today, aimed at beginners, I’d like to introduce you to twenty six concepts or technologies, each mapping to a letter of the alphabet. Sounds wonky? It probably is! Let’s get started after the jump.

Republished TutorialEvery few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in March, 2011.

A — AJAX

AJAX stands for Asynchronous JavaScript And XML and is the main driving force behind all these super smooth web applications you’ve been using over the past few years.
AJAX, as a technology, has been pretty much all pervasive. GMail? Check. Flickr? Check. eBay? Check. You can even find it in WordPress’ administration panel. So what exactly does it do and how does it do it?
At the center of everything is the XMLHttpRequest which allows calls to be sent and received, after a page has been fully rendered without touching the rest of the page. This essentially means that a web application doesn’t have to go through the a full page refresh for each and every action. This, in turn, provides a much smoother, much immersive, desktop like user experience.
Related reading

B — Browser

A browser is the understated structure on which you frame your magnificent masterpieces, be it websites or applications. They aren’t limited to retrieving websites though — modern web browsers are quite the multitasking beasts. My installation, for example, taps into IRC, FTPs into my development servers and syncs my credentials across every device I use.
As you may have surmised, browsers are simultaneously the cause of much cheer and rage to the modern web developer – they’re invaluable tools as well as annoying beasts. Any developer who has to make sure that his work has to look perfect in every browser will know the pain.
Related reading

C — CSS

CSS is one prong of the front end development trident. CSS, which stands for Cascading Style Sheets, is the language with which you define how a page is displayed — its presentation, if you will.
During the horror days of web development, developers would frequently weave the presentation code into their source. CSS, amongst other technologies, alleviated this greatly by providing a method to cleave presentation from the content.
Related reading

D — DOM

The DOM, an abbreviation of Document Object Model, is the accepted convention for interacting with HTML [or XML] documents. The DOM API provides a way to traverse and manipulate a document programmatically.
The DOM creates a hierarchy that matches the structure of the parsed HTML document. The children are called nodes or DOM nodes.
If you hear someone talking about the DOM, chances are, they’re talking about DOM scripting. This is the term used to describe programmatically accessing and manipulating the DOM through JavaScript. This is the tech behind most modern web sites and applications you see today.
Related reading

E — Events

Modern web applications are deeply event driven affairs. But what’s an event? Most things you do on a web page constitute an event. The trepidatious hover over a funny but possibly NSFW link, clicking on a button, pressing tab to move to the next text field are all valid events.
Event handling refers to the process where we attach a specific chunk of code to be run whenever a certain event is fired. Again, this is one of those fundamental concepts behind modern web development that you’ll need to master.
Related reading

F — Firebug

Any craftsman needs his tools to work efficiently. Web developers aren’t deviants from this rule. One of the most robust tools around is Firebug.
Firebug is a Firefox extension that will galvanize your workflow. It lets you edit and monitor a page’s every aspect on the fly. I can’t quite explain all the features it provides so make sure to hit the links below.
Related reading

G — Grid

Grids are the visual frameworks on which pages are structured. Ported over from the once burgeoning print industry, grids are an essential part of the modern web development workflow.
There are a number of CSS frameworks catering to exactly this need since building a grid based layout, for a non-trivial number of pages and layouts, can be an exercise in masochism.
Related reading

H — HTML

If you’re reading this today, you probably already have a vague idea as to what this is. If you got tricked into this link though, read on. By the way, welcome to Nettuts! We write about web development, cookies and Justin Bieber.
HTML stands for HyperText Markup Language, the defacto markup language of the web — it’s to web pages as bricks are to homes. HTML consists of several components or elements — tags, tag attributes and the content enclosed within the tags.
The latest version of the HTML standard, HTML5, is now upon us bringing a number of new features, streamlining the workflow and fixing a few incompatibilities.
Related reading

I — IE

Ahh, Internet Explorer. The name evokes both awe and anger. Once a hero which brought forth impressive new features to the market, single handedly moving the industry forward, it also dropped the ball by letting the browser stagnate. Till date, it’s also the leading cause of alopecia in front ends developers. After a decade of battering, the latest version of Internet Explorer, 9, is once again in the right path towards innovation.
Whatever your stance towards Internet Explorer is, it’s an intrinsic and inextricable part of the web development process.
Related reading

J — JavaScript

JavaScript is the final member of the essential web development trio. JavaScript, which is NOT Java, is the scripting language of the web. Its use in billions of web pages and, more importantly, web sites stakes that claim. You define behavior through JavaScript — managing events, manipulating the DOM and talking to the server.
Thanks to the incredible adoption of libraries, like jQuery, awareness and knowledge of JavaScript has been growing every year, year after year. I think it’s appropriate to say that JavaScript is an absolute must for every modern web developer.
Related reading

K — Keyword Optimization

SEO relates only tangentially to web development but even then, it’s important for a web developer to have basic knowledge of what SEO is and what it does.
Keyword optimization refers to the process of choosing the correct keywords for your website and then optimizing them so your audience can find your site. While you’re dabbling with all the tenets of SEO, remember this: content is king. If you have bad content with excellent SEO, users will find you but leave soon after. If you have good content, users will find you and stay.
Related reading

L — Less

Less is a stylesheet language with a few aces up its sleeves. Their website states that LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions and I’m inclined to agree.
LESS is CSS on anabolic steroids. Yes, it sounded better in my head but you know what it means. It brings the concepts of a dynamic language to CSS thereby making humongous stylesheets a lot more easier to manage.
Related reading

M — MVC

The Model View Controller pattern, better known as MVC, is one of the most used in the web development world. It’s an architectural pattern that separates each part of a web application into logical chunks for better maintainability — models handle data, views handle presentation while the controller coordinates the flow of information between the two.
If you’ve used a modern web development framework, you’ve used MVC. Ruby on Rails, Code Igniter and Zend Framework all use this pattern.
Related reading

N — Node.JS

Node.JS ushered in a new era of web development. It enables running JavaScript on an incredibly fast VM [V8]. The consequences of such a paradigm shift may not be immediately apparent but an hour or so with it will make it clear as day.
Incredible speed as well as the ability to manage thousands of concurrent IO events are the main talking points along with the near universal JavaScript developer user base.
Related reading

O — Object

Object oriented programming has been widely adopted by the programming community for the flexibility it brings to the table. With OOP you can write few lines of code, make it more DRYer and thus much more easier to maintain.
But what exactly is an object? It’s quite hard to explain it in a single, semantically self contained sentence so be sure to hit the links below!
Related reading

P — PHP

PHP is unequivocally the most popular server side language — it powers millions, possibly billions, of web pages and applications.
Even in the face of a number of newer, arguably better options to write web applications, PHP has not only survived but flourished. WordPress, Joomla, Drupal, MediaWiki all use PHP behind the scenes. One of the main reasons is the ease of deployment and the relative ease with which you can find hosts supporting PHP.
Related reading

Q — Query

A query, in our context, can refer to a number of things. A query language is used to interface with external systems to obtain information. SQL is a fine example which is used to obtain information from relational databases.
A query string, on the other hand, are chunks of information that is passed to web application as part of the URL. This data maybe anything from the page the user is trying to access to the authorization ID of a transaction. Query strings are formatted as key value pairs.
Related reading
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)