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.
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
How to Make AJAX Requests With Raw Javascript
24 Best Practices for AJAX Implementations
Submit A Form Without Page Refresh using jQuery
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
13 Ways to Browser Test and Validate Your Work
Top 5 Ways to Browser-Test your Website
9 Most Common IE Bugs and How to Fix Them
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
The 30 CSS Selectors you Must Memorize
30 CSS Best Practices for Beginners
Understanding CSS Specificity
CSS: Noob to Ninja – The Complete Video Series
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
JavaScript and the DOM Series: Lesson 1
Javascript and the DOM: Lesson 2
The Dom is a Mess – Lecture by John Resig
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
JavaScript from Null: Chapter 5 – Events
JavaScript Events from the Ground Up
JavaScript from Null: Cross-Browser Event Binding
JavaScript Event Delegation in 4 Minutes
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
10 Reasons Why You Should Be Using Firebug
How to Theme any CMS Using Firebug
Firebug: White to Black Belt
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
A Detailed Look at the 960 CSS Framework
A Closer Look At the Blueprint CSS Framework
Crash Course: YUI Grids CSS
Mastering the 960 Grid System
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
"HTML5 and You" Course
30 HTML Best Practices for Beginners
28 HTML5 Features, Tips, and Techniques you Must Know
The 10 HTML Tags Beginners Aren't Using
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
The Things Internet Explorer Got Right
9 Most Common IE Bugs and How to Fix Them
Did Internet Explorer get the Box Model Right?
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
24 JavaScript Best Practices for Beginners
JavaScript from Null: Video Series
33 Developers you MUST Subscribe to as a JavaScript Junkie
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
The Only SEO Tools You'll Ever Need
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
How to Squeeze the Most out of LESS
You Need to Check out LESS.js
Never Type a Vendor Prefix Again
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
MVC for Noobs
Create your First Tiny MVC Boilerplate with PHP
ASP.NET from Scratch: MVC
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
Learning Server-Side JavaScript with Node.js
Node.JS Official Site
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
Object-Oriented PHP for Beginners
The Basics of Object-Oriented JavaScript
Wikipedia link
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
30+ PHP Best Practices for Beginners
Why You're a Bad PHP Programmer
9 Useful PHP Functions and Features You Need to Know
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
CodeIgniter from Scratch: Search Results without Query Strings
"Popular Posts By Comment Count" SQL Query in WordPress
R — Regular Expressions
Regular expressions provide a flexible way to match strings of text with specific patterns. It's written in a specifically language that's interpreted by a parser. All modern languages come with regular expression support.
Related reading
Regular Expressions for Dummies: Screencast Series
You Don't Know Anything About Regular Expressions: A Complete Guide
Advanced Regular Expression Tips and Techniques
S — Source Control
Source control is a term prevalent throughout the development community regardless of which aspect they're focused on — programmers working on everything from bare metal to cloud computing use source control.
But what is it? Simply put, source control lets a team of developers work on the same subset of files with changes made by each member trackable and identifiable. Each version of the code base can be compared, merged or even restored.
Related reading
Terminal, Git, and GitHub for the Rest of Us: Screencast
A Visual Introduction to Git
Easy Version Control with Git
Getting the Hang of GitHub
T — TDD
Again, one of the common elements among almost all developers. TDD stands for Test Driven Development and refers to the process where code and automated tests to test that code are written near simultaneously. This removes much of the tediousness of software testing and thus, encouraging developers to test more often.
Related reading
The Newbie's Guide to Test-Driven Development
Test-Driven JavaScript Development in Practice
How to Test your JavaScript Code with QUnit
U — Unit Testing
Unit testing is a subset of TFF where small units of the source code are tested to make sure they're production ready. While a unit often refers to a method in OOP, generally it refers to the smallest portion of an application that can be tested independently.
Related reading
How to Test your JavaScript Code with QUnit
V — VIM
Vim is a deeply polarizing text editor that the famously hip Nettuts editor, Jeffrey Way, uses. Vim is free, open source and supremely feature packed. On the flip side, the learning curve is almost intolerably steep and without the proper resources, you're going to be lost for a long time. Hit the links below to see whether it's worth the switch.
Related reading
25 Vim Tutorials, Screencasts, and Resources
Top 10 Pitfalls When Switching to Vim
Venturing into Vim
Editor's Note: The Nettuts+ team can neither confirm nor deny that the Nettuts+ editor is… "hip."
W — WordPress
WordPress started out as a minimal blogging system but in its current state is impressively extensible. It's extensible to the point that it's being used as everything from a CMS to an e-commerce system to everything in between.
It also has an almost cultish group of followers consisting of both developers and designers who swear by the platform making it a reliable platform on which to base your upcoming website.
Related reading
How to Create a WordPress Theme from Scratch
Essential Plugins for Every WordPress Installation
Scaling WordPress for High-Traffic
Top 50 WordPress Tutorials
X — XSS
XSS stands for Cross-site scripting. It's one among a number of possible security gotchas you could face when creating a web application.
XSS refers to the act of loading the vulnerable web site or application with malicious scripts in order to gain elevated privileges or sensitive information, often both.
Related reading
Can You Hack Your Own Site? A Look at Some Essential Security Considerations
CodeIgniter from Scratch: Security
5 Helpful Tips for Creating Secure PHP Applications
Y — YUI
Yahoo User Interface library is a JavaScript library that simplifies the process of creating interactive web applications. Like most modern libraries, it provides support for DOM manipulation and AJAX out of the box.
While not as well known as jQuery, YUI still has a non-trivial user base. and is actively developed.
Related reading
An Introduction to YUI
2010 Through the Lens of YUI Theater
Z — Z index
Z-Index is a CSS property that defines how an element is stacked on a page– it defines how close an element is to the top of the viewport. A higher number means it will appear on top of elements with a lower number.
While this property may be relatively specialized, this comes into play almost right away when you're building widgets or more complicated web designs.
Related reading
Understanding CSS z-index
The Z-Index CSS Property: A Comprehensive Look
That's a Wrap
And we're done. I hope you had as much reading this as I had putting this together. Thank you so much for reading!
About the Author
HTML5 For Dummies Quick Reference, by Andy Harris
[simpleaffiliate source="amazon" results="10"]html5 for dummies[/simpleaffiliate]
[simpleaffiliate source="cj" results="10"]html5 for dummies[/simpleaffiliate]
[simpleaffiliate source="clickbank" results="10"]html5 for dummies[/simpleaffiliate]
No comments:
Post a Comment