Now that we’re down to the end of 2009, what were some of the best web development and design tutorials and articles from the year? We’ll take a look at 120 of them!

January

How to Build a Login System for a Simple Website

In today’s video tutorial, we’ll be building a login system with PHP and MYSQL. Many, many features will be covered; including MySqli, Prepared Statements, jQuery, Classes, Sessions, Cookies, etc. I bit off more than I could chew for today’s screencast. So, I’ll be creating a Part 2 in the next couple of weeks in order to improve our system even further.

Run Your Own TinyURL Service With Phurl

Jan 13th, 2009 in Other by Thord Hedengren
URL shortening services are a must if microblogging services like Twitter are to work. In 140 characters, you don’t want the URL you’re linking to eating up 100 of them. Or worse, it might not even fit. Enter TinyURL, and a bunch of other services that give you a shorter custom URL pointing to the target site. But why not roll your own, using Phurl? Let’s do it!

Slice and Dice that PSD

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

The Definitive Guide to Creating a Practical jQuery Plugin

In this article weíre going to be building our very own jQuery plugin step-by-step from scratch; jQuery makes this task exceptionally easy for us, giving us a simple method of packaging up our scripts and exposing their functionality, and encouraging the use of scalable and reusable object-oriented techniques.

15+ Tips to Speed Up Your Website, and Optimize Your Code!

Once you’ve been coding for a while, you begin to take something for granted. You forget just how smart you really are. How many hundreds of keyboard shortcuts have we memorized? How many languages have we learned? How many frameworks? How many hacks? To say that web design/development is an extremely tough industry is putting it lightly. Next, add in the fact that much of what you know today will be considered obsolete in a few years.
Today, we’ll be looking at a crop of tips and tricks that will help beginners speed up their development time, and code more efficiently. You’ll see a mix of quick time savings tips, as well as specific coding tricks to increase your web application’s efficiency.

10 Killer WordPress Hacks

2008 was a very good year for the WordPress community. The software was updated numerous times, leading to the recent release of version 2.7, and many new blogs dedicated to WordPress were created. Of course, tons of new hacks were discovered, which helped lots of bloggers enhance their blogs.

In this article, weíll show you 10 new useful killer WordPress hacks to unleash the power of your favorite blogging engine. Each hack has an accompanying explanation, so youíll not only unleash the power of WordPress but also understand how it works.

PHP for Beginners: Building Your First Simple CMS

Itís safe to say that nearly every website thatís up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (WordPress, Drupal, etc.), it doesnít hurt to peek under the hood and get a feel for how these systems work.

Word Jumbling Experiment

Apparently it started back in 2003 but it only came to my attention about two years after that. Itís since been labelled as an internet meme which is interesting because the first time I saw it was on a poster at a train station near London, not on the internet! If youíre wondering what “it” is here you go.

Output Buffering for Web Developers, a Beginnerís Guide

If you’re not using PHP’s output buffering, you should be. And if you are, you may not be using it to its potential. In this article written specifically for web developers, I’ll make a case for output buffering and show you how to get started within seconds. This article is the beginning of a series in which I’ll share with you the awesome potential of output buffering.

Speed up your JavaScript, Part 1

In my last post, I talked about the conditions under which the dreaded long-running script dialog is displayed in browsers. Browsers will stop executing script either when theyíve executed too many statements (Internet Explorer) or when the JavaScript engine has been running for a specific amount of time (others). The problem, of course, isnít the way that the browser is detecting long-running scripts, itís that the script is taking too long to execute.

See part 2, part 3, and part 4 of this series.

February

JavaScript and the DOM Series: Lesson 1

Hello and welcome to the first part of what will hopefully be an extensive series covering core aspects of the JavaScript programming language and the DOM API.
While frameworks such as jQuery, Prototype and MooTools are great ways of suppressing browser bugs and speeding up development, itís important to know and understand the underlying technologies. This series intends to tell you what you need to know about JavaScript and the Document Object Model (DOM). Even if you swear by a particular library this will still benefit you ñ knowing how something works under the skin can only be a good thing!

Don’t forget to checkout part 2

Exactly How to Use CSS Sprites

Today, Andres will be teaching us how to use CSS sprites to improve load times and decrease the number of HTTP requests that are made. As always, feel free to ask any questions in the comments area.

Are You Making These 10 PHP Mistakes?

One of the best things about PHP is that it’s a great language to just “dive into”, thanks to its wide-ranging popularity. Anyone with the ability to hit “Search” on Google can quickly create a program. However, this also lends to a major criticism of PHP: it’s almost too easy to find and reproduce bad code.
Here are 10 PHP mistakes that any programmer, regardless of skill level, might make at any given time. Some of the mistakes are very basic, but trip up even the best PHP programmer. Other mistakes are hard to spot (even with strict error reporting). But all of these mistakes have one thing in common: They’re easy to avoid.

Intro to Django: Building a To-Do List

Django is a powerful web framework, created in Python, which follows the DRY (Don’t repeat yourself), and batteries included philosophies. It allows for rapid website development by providing a wide range of tools and shortcuts out of the box. Django is extremely fast and flexible – even faster than all of the PHP frameworks available. In this article, I’ll introduce you to Django by showing you how to build a simple to-do list.

Extending SimplePie to Parse Unique RSS Feeds

A few days ago, as I prepared our Create a Slick Flickr Gallery with SimplePie tutorial, it occurred to me that we haven’t posted many articles that covered SimplePie. Considering how fantastic a library it is, I think it’s time to take a closer look.
We’ll be looking at a more advanced feature that allows you to extend the built-in item class to allow for the parsing of complicated RSS feeds.

10 Web Typography Rules Every Designer Should Know

When someone visits a website youíve designed, the odds are that they donít care much about the colors, images or sounds, theyíre immediately looking at the text.
No matter how many bells and whistles youíve built into a website, everyone relies on text to accomplish whatever theyíre visiting the site to do.
That alone should make typography, the art of arranging type, a priority for any web designer.
In this article we take a look at 10 easy rules to keep in mind when designing your next web project.

Elegant Animated Weekly Timeline for Websites

Yesterday my friend Nick asked to me some suggestion to design an original weekly timeline for a web application which he is developing. I suggested to use the following animated timeline which I implemented reusing the code of my versatile slider and now I want to share with you.

11 Ways to Enhance a User Interface with MooTools

When creating a User Interface, itís important to make it engaging for the user not only from a visual standpoint, but also with interactivity. With so many JavaScript frameworks readily available, web designers and developers have many tools at their disposal to add slick effects to their UIís.

How to Make an Impressive Animated Landscape Header with jQuery

Content doesnít always have to stay visible. Sometimes it can hide in the most unexpected locations.

In this tutorial weíll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.

Vertical Centering with CSS

There are a few different ways to vertically centre objects with CSS, but it can be difficult to choose the right one. Iíll show you all the best ways Iíve seen and also how to create a nice little centered website.

March

The Easiest Way to Use Any Font You Wish

CSS 3 is on the horizon, and we’re all getting excited. Thanks to the latest browser updates, developers can begin working with time-saving new properties – such as @font-face. Unfortunately, the availability of these features is limited to a tiny fraction of our overall userbase. At least for the next year or so, we’ll need to continue utilizing the Flash and Javascript alternatives when embedding fonts.
Luckily, a new contender, CufÛn, has made the process unbelievably simple. What makes it different? Rather than Flash, it uses a mixture of canvas and VML to render the fonts. In just a few minutes, I’ll demonstrate how to use any font you wish in your web applications. Excited?

How to Add Variables to Your CSS Files

Let’s try something different on nettuts+ today. Any designer who has worked with large CSS files will agree that its major weakness is its inability to use variables. In this article, we will learn how to implement variables by using PHP and Apache’s URL rewrite mod.

Diving into PHP

As some of you might know, I’ve been running a weekly video series on the ThemeForest Blog that teaches new developers exactly how to work with PHP. Once or twice a week, I release a new “episode” that builds upon the previous days. To expand our viewership, I’ve decided to release “Day 13″ here. Be sure to subscribe to In the Woods to stay up to date on each new release.
Why do it this way? Because people don’t always have the time to watch sixty minute videos. By posting short ten minute episodes, beginners can easily digest each lesson, rather than become overwhelmed with more information than their minds are able to consume. If you’re new to PHP, and are not familiar with this series, I hope you’ll subscribe and become a new viewer.

Everything You Need to Get Started With MySQL

Developing web applications using a static data store where data must be updated, stored and manipulated frequently can be a cumbersome task. However this article will introduce you to the world of relational databases allowing you to maximise your data’s potential.

Professional Frontend Engineering

Last night, long after I should have fallen asleep, I came across a fantastic overview of ìfrontend engineering.î This is a must-watch video, presented by Nate Koechley. Many designers will get more from this video than an entire book. Nate covers everything from underused html tags, to doctypes, to proper naming conventions. I highly recommend watching it.

Build a Content Slider with jQuery

There are a ton of tutorials already out there about creating content sliders with jQuery.
So why bother writing another one? While I donít think that the existing tutorials are
incorrect, bad, or otherwise unacceptable, I havenít found one that met my needs.

Designing Drop-Down Menus: Examples and Best Practices

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

12 Excellent Tools for Picking a Domain Name

Selecting the perfect domain name for your website is the most important, and oftentimes hardest, step in establishing a web presence. There are plenty of tools out there that can help you ease the burden of checking available domains and suggesting similar names that are related to your searches.

In this article, youíll read about 12 neat web tools that will lend you a hand in finding and choosing domain names. Youíll find a variety of search and suggestion tools that have an assortment of features so that, hopefully, youíll discover a few favorites.

11 Excellent Solutions for Creating Tooltips

Tooltips in web design are becoming more and more commonplace. Even though I donít think they are appropriate for every type of site, they can be a very useful addition when implemented correctly. If you are planning on using tooltips in your next project, the hardest part may be choosing the right solution.

Regular Expressions for Dummies

Welcome to my new video series, ìRegular Expressions for Dummiesî. Over the course of ten videos or so, Iím going to teach you how to use regular expressions in your Javascript and PHP applications. As always, Iíll assume you know absolutely zip. If you havenít already, subscribe to our RSS feed, or follow me on Twitter to stay up to date on new releases.

Also look at part 2, part 3, part 4, and part 5 in this series!

April

Design a Beautiful Website From Scratch

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

A Crash-Course in WordPress Plugin Development

Despite an extensive codex, many WordPress users remain unfamiliar with how to create their own custom plugins. In today’s screencast, we’ll start from scratch and build our first usable plugin. For this example, we’ll write a simple “tuts formatting” function that allows a blog editor to more easily format articles.

Building a jQuery Image Scroller

In this tutorial, weíre going to be building an image scroller, making use of jQueryís excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

404/403 Website Error Pages With PHP Auto-Mailer

Website error pages are perhaps one of the most overlooked pieces of a fully rounded website. Not only are they important but they give you the opportunity to have a little fun. Although many web developers rely on server logs to keep an eye out for hits on error pages, I’m going to take a different approach by using a PHP generated email. In addition, we will spice up the design a bit, add basic navigation and link to the website sitemap.

Add Power to Your PHP With Multi-Tiered Applications

As PHP applications become more and more complex, it can be easy to end up with a tangled mess of code that makes maintenance nearly impossible. Applying the concept of tiered applications can help to alleviate some of the difficulty in maintaining complex applications.

Bonus: Should You Attend University for Web Development?

We’re entering a unique age; an age where a simple Google search has the potential to replace professors. As students across the globe decide whether or not to spend massive sums of money – during a financial recession – to attend University this fall, they might find themselves asking, “Is it worth it?”

Especially in the web development world, it’s possible that the latest technologies and trends are being taught on blogs, rather than in the classroom. On a weekly basis, I receive emails from University students informing us that our “little ole’” blog has taught them more than their college professors. Considering the frequency at which these flattering emails occur, it does raise an interesting question: “Is University out-dated?”

PHP Arrays Unleashed

Understanding arrays is the first major milestone when learning how to code. An array is not an easy concept to grasp at first since an array has many values, or elements, and can be used in so many ways. Many functions return their results as an array. There is no way around it, if you want to learn how to code, be it in php, javascript or any other language, you will need to understand the array.

Progressive Enhancement: What It Is, And How To Use It?

Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience.

PE differs from Graceful Degradation (GD) in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover a greater range of potential issues as a baseline. PE is the whitelist to GDís blacklist.

38 Ways to Optimize and Speed up your WordPress Blog

WordPress blogs and sites can be notoriously slow. But fear not ñ here are ways to make your WordPress blog super speedy and fun for your visitors to view with a few tweaks, hacks and plugins. Be sure to check back because I will be updating this post as I discover new and wonderful ways to optimize and speed up WordPress blogs.

Use Custom Missing Image Graphics Using jQuery

Yesterday I posted an article about how you can use your own ìmissing imageî graphics when an image fails to load using MooTools. Hereís how to do the same using jQuery.

Ask JW: Self-Invoking Anonymous Function

Between Nettuts+ and ThemeForest, I receive dozens of question emails each week. Although I try my best, I simply donít have the time to research the answer to each one. Considering this, Iíve decided to sporadically post ìAsk JWî articles. This weekís question concerns Javascriptís self-invoking anonymous functions, and comes from Travis.

May

How to Set Up a Killer WordPress Testing Environment Locally

If you’re a heavy WordPress developer like me, you might find that you need to create a new installation for each site that requires a strange structure or specific posts, instead of using your uniform local test WordPress installation. Cue WordPress Mu. WordPress Multi User is a platform created by the geniuses at Automattic that is basically a WordPress installation that allows multiple blogs to run using the same software.

Create a Fun Tweet Counter With jQuery

In this tutorial, we will look at using jQuery to call Twitterís API and then use the results to create a widget for a blog or personal website that shows what hours during the day we tweet at the most.

30 HTML Best Practices for Beginners ñ Basix

The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won’t benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you’re being neglected. This site is for you, so speak up! With that said, today’s tutorial is specifically for those who are just diving into web development. If you’ve one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!
Without further ado, let’s review thirty best practices to observe when creating your markup.

The Ultimate Guide to .htaccess Files

Apache’s .htaccess configuration files have baffled countless developers. This tutorial aims to break through this confusion by focusing on examples and thorough descriptions. Among the benefits of learning .htaccess configuration is automatic gzipping of your content, providing friendlier URLs, preventing hotlinking, improving caching, and more. First, the basics.

How to Make AJAX Requests With Raw Javascript

Javascript frameworks have turned simple AJAX functions into one-liners. This is quite incredible, considering the fact that it would require more than twenty to accomplish the same thing with raw Javascript. Nevertheless, it’s important to learn what’s “under the hood”.

Don’t forget to check out part 2!

Getting Started with Ruby on Rails: Installation

This article will guide you through the process of installing Ruby on Rails, and any other software that is required to begin using it.

Check out part 2.

Fastest Way to Build an HTML String

You have a massive array of items that needs to be transformed into an HTML list without causing the user any grief. There are a couple common ways of doing this:

Create a Simple Input Sanitation Function With PHP

I don’t care what anybody tells me, PHP security is the number one thing I’m concerned about when writing a script. If you were to directly input data from $POST or $GET into a MySQL database, you could (and probably will) be in for a world of trouble. Today I’ll walk you through the steps of creating a very easy to use input sanitize function in PHP.

Computer Science in JavaScript: Bubble Sort

Sorting algorithms are one of the cornerstones of computer science education. The purpose isnít to teach you a dozens different ways to sort data when youíll never need to implement them by hand in your professional life. Instead, they are used as a tool to teach algorithm theory, to show you that there are multiple ways to solve a single problem. And so I begin doing the same with JavaScript and bubble sort.

Make an Animated Alphabet using Keypress Events in jQuery

The result here was the result of some random jQuery keypress event experiments over the past few days. I recommend that you use this tutorial as a proof of concept rather than final product.

Letís be real for a moment ó there are very few places where you would need the exact effect weíll be building. However, the logic behind it should be a much more useful in adapting to your own needs.

June

24 JavaScript Best Practices for Beginners ñ Basix

As a follow-up to “30 HTML and CSS Best Practices”, this week, we’ll review JavaScript! Once you’ve reviewed the list, be sure to let us know what little tips you’ve come across!

Secure Your Forms With Form Keys

Security is a hot topic. Ensuring that your websites are secure is extremely important for any web application. In fact, I spend 70% of my time securing my applications. One of the most important things we must secure are forms. Today, we are going to review a method to prevent XSS (Cross-site scripting) and Cross-site request forgery on forms.

10 Essential SQL Tips for Developers

SQL is yet another essential language for developers wishing to create data-driven websites. However, many developers are unfamiliar with various aspects of SQL; so in this article, we’ll analyze ten essential tips.

Building a Forum From Scratch with Ruby on Rails

Today, we will be building a simple forum using Ruby on Rails, and we will be working up from the basics covering things like authentication and more advanced database techniques.

Using jQuery To Manipulate and Filter Data

When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, I will go over four techniques: hover effects, zebra rows, filtering, and sorting.

The xmlrpc.php File and Site Security

Located in the header.php file of most WordPress themes, there is an important hook called wp_head(). This essential hook enables functions to output content to the browser in the area of the web document 1. In newer versions of WordPress, this hook enables WordPress to output the following three lines to your themeís section.

Ask Ben: Detecting When DOM Elements Have Been Removed With jQuery

I know that jQuery is great for event management, but I was wondering if you have come across a way to detect if a DOM element (say a row in a table) was removed? I have a table and I want to run an ajax request every time a tr was removed, but there are several ways that the tr could be removed.

Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, itís clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

Sending Nice HTML Email with PHP

This is going to be a continuation of the Website Change Request Form demo weíve been using around here for a while. If you need to catch up, first I talked about it, then I built it, then I screencasted it, then I secured it. Throughout all of this, the end result has been a boring text-only email that gets sent to a single email address.

How to Implement a Launching Soon Page with PHP and jQuery

In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What’s a launching soon page? In general it’s a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line.

July

CodeIgniter from Scratch

After numerous requests, today we are launching a new screencast series on Nettuts+ that will focus exclusively on the CodeIgniter PHP framework. Over the course of about 10 videos, I’ll teach you exactly how to use this framework. Ultimately, we’ll work our way up to building a custom CMS. Without further ado, here’s day one!

And you have to check out part 2, part 3, part 4, part 5http://net.tutsplus.com/videos/screencasts/codeigniter-from-scratch-day-4-newsletter-signup/, part 6, part 7!

Create a Twitter-Like “Load More” Widget

Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

HTML 5 and CSS 3: The Techniques Youíll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

Using htaccess Files for Pretty URLS

Continuing our review of htaccess files, today we’ll examine how to use mod_rewrite to create pretty URLs.

How to Create A Simple Web-based Chat Application

In this tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website.

Easy Retweet Button

Ever since I saw the Bit.ly JavaScript API I’ve been wanting to build a simple script for tracking the number of people visiting a blog post from Twitter. This past weekend I built a little script for doing just that – and in a completely unobtrusive manner.

Text Rotation with CSS

Once again, after reading somebody else’s article, I felt inspired to put together an alternative example. In this case: Text Rotation.

Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It’s like the top fell off the pepper shaker and you’ve suddenly got a large pile of pepper on your food. It makes me want to sneeze.

10 Typography Tips to bring your Skills to the Next Level

An often overlooked aspect of web design, by those just starting out, is typography. In fact, web designers that have been around for a couple years even have a tendency to overlook and undervalue the power of typography. Donít be mistaken though, itís one of the most powerful tools web designers have.

Closures in JavaScript

A closure, in JavaScript, can simply be described as a retained scope; at least, this is how I think of it. The benefit of a closure is in the fact that it retains the scope (the ìscope chainî) of the outer (or ìparentî) execution context. This behaviour can be used in a number of different ways and has become a useful remedy for quite a few JavaScript gotchas; one of the most common being the ìlooping problemî.

An Introduction to Object Oriented PHP

This is a three part series introducing Object-Oriented PHP, a way to manage your code and keep different parts separate, all while being easily accessible. I hadnít really planned it this way, but my previous article works as a great precursor to this article, showing you how to get a PHP/MySQL Sandbox up and running, which is just what weíll be using for this tutorial as I believe a hands-on approach is the best way to learn things like this.

And then you should read part 2 and part 3.

August

A Crash-Course in Advanced CSS3 Effects

Webkit is one of the few – if only – browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged sword. We get to play with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc. – yet, we can’t truly implement them into our projects until more browsers provide support. With all of that said, it’s important to be on the cutting edge of what’s possible.

How to Create a Simple News Ticker

In this tutorial weíll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoothly scrolls its contents. Some news tickers are horizontal and some are vertical; the one that weíre going to create today will be vertical.

8 Regular Expressions You Should Know

Regular expressions are a language of their own. When you learn a new programming language, they’re this little sub-language that makes no sense at first glance. Many times you have to read another tutorial, article, or book just to understand the “simple” pattern described. Today, we’ll review eight regular expressions that you should know for your next coding project.

30+ PHP Best Practices for Beginners ñ Basix

PHP is the most widely-used language for programming on the web. Here are thirty best practices for beginners wanting to gain a firmer grasp of the fundamentals.

6 Ways To Improve Your Web Typography

Typography on the web is anything but simple, and for many, it is a troubling mystery. Today, we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

8 Web Usability and Best Practices for Beginners

As a web designer when you are coding and designing website, it is your job to make sure that the site is user intuitive, friendly and easy to navigate. Although these are basic work ethics for every web designer sometime you might miss out a little things here and there, that might get under front end user skin. Nevertheless, maybe you are starting your way into web design. Here are eight web usability and practical tips for beginner web designer.

Fundamentals of MySQL Query Validation

Web 2.0 is a fine thing. You can build whole websites, news systems, or picture galleries ñ just by using the power of content submitted by users.

But be careful! You can never trust every user when it comes to submitting data. There are always those who may try to compromise your website by submitting bad queries. Even if unintentional, it can be possible for users to destroy your databaseís consistency just by entering incorrect data.

JavaScript: Bad Practices

I’ve seen a lot of curious (bordering on horrific) code in my life; and Iíd say about half of it was written by me. If you donít attest to the fact that you once wrote bad code then youíre either a liar or perhaps, have omnipotent powers!

Top 10 UX Myths

Al Gore invented the Internet. Drinking alcohol keeps your body warm. You wonít get pregnant if you stand on your head after Ö well, you get the idea. Myths are those hard-and-fast rules that often start as a plausible idea or once-off observation that grow and distill into ëcommon knowledgeí as they virtually spread. I know Iíve believed a few of these. Iíve also asked my UX expert Twitter friends for their UX Myths ñ and they have many!

Build an Elastic Textarea with Ext JS

Since it was first featured on Facebook, elastic textareas ñ <textarea> elements that automatically expand or shrink depending on how much text the user inputs ñ has become one of the coolest functional UI effects on the web. In this article, I will guide you through the re-creation of this astonishing effect using Ext JS, and I bet you that you will be surprised to see how easy it is to do it.

September

Getting Clean With PHP

Data security is important and often undervalued by designers, developers, and clients alike. Since PHP 5.2.0, data sanitization and validation has been made significantly easier with the introduction of data filtering. Today, we’re going to take a closer look at these filters, how to use them, and build a few custom functions.

A Deeper Look at mod_rewrite for Apache

When people think of .htaccess configuration the first thing that pops into most people’s minds is URL manipulation with modrewrite. People typically get frustrated with modrewrite’s complexity. This tutorial will walk you through everything you need to know for the most common mod_rewrite tasks.

20+ HTML Forms Best Practices for Beginners ñ Basix

Working with XHTML forms can be somewhat daunting; they not only use some niche HTML elements, but also blur the line between static content and user interaction. Let’s review some things to remember when creating your next form.

The Only SEO Tools Youíll Ever Need

Search Engine Optimization is a rather complex and never ending process. You have to analyze a lot of things including what keywords people are searching for, the density of those keywords in your sites, how many sites link back to you, how popular your links are and so on. Doing all this manually can be a huge pain.

With that in mind, regardless of whether you’re an SEO guru or a beginner, these twenty tools are guaranteed to make your life easier.

5 Lesser Known JavaScript Libraries that Make Web Design Easier

In this round-up weíll be looking at 5 JavaScript libraries that can really ease the development of modern, attractive web sites. The libraries that weíll be looking at arenít libraries in the same sense as something like jQuery or the YUI; theyíre much smaller and much more specialized. But theyíre the best at what they do and provide unique functionality.

The Z-Index CSS Property: A Comprehensive Look

Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results ó as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances.

The Principles of Good Web Design

Good web design doesnít just appear out of nowhere, there are many aspects of design that come together to achieve this. The first one that weíll be looking in this 4-part-series is layout.

You’ll want to read part 2, part 3, and part 4.

Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list:

Easy Custom Feeds in WordPress

Now that we have seen how to setup Tumblr-style posts, it would be nice to be able to segregate the Tumblr-posts category from the main feed into its own, separate feed. This would enable readers to subscribe exclusively to the Tumblr-posts feed and maybe display it in their sidebar or something. While weíre at it, it would also be cool to be able to provide readers with a full menu of feed choices, including the following.

@font-face and 15 Free Fonts You Can Use Today

Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like CufÛn, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.

October

Simple Techniques to Lock Down your Website

One crucial part of PHP development practice is always keeping in mind that security is not something you can simply buy off the shelf at your local convenient store. Ensuring the security of your web applications is a process, which over time, needs to be constantly evaluated, monitored, and hardened.

Easy Version Control with Git

Have you ever worked on a project that was so unwieldy, you were scared to update a file or add a feature? Maybe the problem was that you weren’t using a version control system. In today’s tutorial, we’ll learn the basics of what might possibly be the best VCS in the world: Git.

Drag to Share

Weíve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. Itís brilliant and intuitive, and in this article Iím going to show you how we can replicate this behavior with jQuery and jQuery UI.

Feeds 101

Feeds. RSS. Atom. Syndication. Subscribers. These are some of the keywords floating around the web and have gained notorious prominence over the years. In this guide, we’ll take a look at a number of things including what feeds are, why you need to have a feed for your site, how to set up one and then publish it.

How to Build a Simple Content Slider jQuery Plugin

I was recently asked by a reader to recommend a helpful content slider plugin. No doubt, there are a bunch of excellent options available — some which are, perhaps, too excellent! With so much flexibility comes extra weight; especially when sometimes you only need a simple slide or fade transition.

So I figured, why not build a simple custom plugin that will get the job done?

Data URIs Explained

One of the most frequently requested browser features in recent memory is data URI support. Thereís been a fair amount written about data URIs recently: my colleague Stoyan Stefanov has written a couple of posts about data URIs, and my former colleague Hedger Wang also penned a post about how to use data URIs in IE. Surprisingly, thereís still a lot of misunderstanding and confusion about data URIs, what they are, how they work, and why youíd ever want to use one.

10 Tips on Writing Hero-worthy Error Messages

Another forehead-smack-worthy curse-laden moment: Iíve filled out a lengthy online form and hit the submit button only to find myself staring back at an empty form peppered with red errors. Has this happened to you? Of course it has.

Design a Minimal and Modern Portfolio Layout with Photoshop

In this Photoshop web design tutorial, weíre going to create a mock-up of a clean and modern-looking website. This is Part 1 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

20 Do’s and Don’ts of Effective Web Design

When you are creating a website (or hiring a web/blog designer to create one for you), there are specific items you need to be aware of. Things that normally wouldnít cross your mind. For the average person who wants a website or blog for their business, they are after one very important thing ñ sales. Now, they may tell you that they want the big flashy logos, or the overdone textures/gradients, but it is the job of a well skilled web designer to steer their clients in the right direction.

7 Things I Wish I had Known About jQuery

This article is mostly aimed at people who are just starting to learn jQuery. I assume you know the following.

November

You Don’t Know Anything About Regular Expressions: A Complete Guide

Regular expressions can be scary…really scary. Fortunately, once you memorize what each symbol represents, the fear quickly subsides. If you fit the title of this article, there’s much to learn! Let’s get started.

Top 20+ MySQL Best Practices

Database operations often tend to be the main bottleneck for most web applications today. It’s not only the DBA’s (database administrators) that have to worry about these performance issues. We as programmers need to do our part by structuring tables properly, writing optimized queries and better code. Here are some MySQL optimization techniques for programmers.

17 Hours of JavaScript from the Masters

Douglas Crockford. John Resig. Peter-Paul Koch. Nicolas C. Zakas. If you recognize these names, you probably know what they all have in common: they’re amazingly talented JavaScript Developers. Today, you’ll hear from all of them, in this roundup of JavaScript presentations. Be ready to stretch your brain!

ASP.NET from Scratch: Lesson 1

Nettuts+ is primarily a PHP haven; however, I’m sure we can all agree that there are many fantastic, and technically more powerful languages and frameworks at our disposal. Jeremy McPeak, author of Professional AJAX, and Beginning JavaScript: 4th Edition, will teach you how to build ASP.NET applications from scratch over the course of the next several video tutorials. Enjoy!

And Part 2.

The Basics of Object-Oriented JavaScript

Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet.
While in the past it was a common argument that JavaScript was a basic language and was very ’slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

8 Things Programmers Should Know About UI Design

In an ideal world, each big subject from the software development process would be handed to a specialized professional: UI designers, programmers, architects, database administrators etc. Unfortunately, this is not the case most of times. There a plenty of cases out there where projects suffer from lack of proper expertise and well trained people. Thatís not to say we should know everything, nor that we should refuse doing work we are not sufficiently prepared for. From freelancers to big companies, we are sometime facing the need of wearing someone elseís hat. In those cases we have no other option but to simply get ourselves wet and just do it.

Ask JW: A Plugin to Make Important Announcements

Todayís Q&A comes courtesy of Frederico Gonzalez, from Twitter. He asked if there was an easy way to add announcement bars to the top of his site, much like the one on ActiveDen right now (assuming youíre not logged in). Luckily, as youíll find, itís quite simple to whip up a jQuery plugin that will make these announcements a cinch to add.

Creating a Web App From Scratch

Today we begin Part 1 of an 8-Part series on building a web application from absolute scratch to a complete product. I am going to kick things off by introducing the idea, and then I will be handling the design, UI, and general front-end stuff. We are going to be going back and forth from here over to my friend Jason Lengstorfís blog Ennui Design. Jason will be handling the back-end stuff like application planning and database stuff. At the end of the week, weíll unleash the actual working application for you.

You’ll have to read part 2, part 3, part 4, part 5, part 6, part 7, and part 8.

How To Create Your First AJAX and PHP Contact Form

You’ve been to websites that use them, a nice little AJAX contact form. AJAX is a great way to submit data without a page refresh and is a great tool for certain elements of a website, such as a contact form. So how do we go about doing so? Today, we will take it step by step and build your first AJAX and PHP contact form. We’ll be using jQuery and the popular email validation code found on google code (originally by AddedBytes) to help us out.

How to Build a Site With Keyboard Navigation: PSD to HTML

Today weíll be looking at how to add keyboard navigation to a website using a few simple lines of JavaScript. First weíll create a simple site theme in Photoshop and then transform it into a working website that uses keyboard functions to switch pages.

Decemeber

JavaScript from Null: Video Series

Thanks to the wide adoption of libraries like jQuery and Mootools, JavaScript’s popularity has skyrocketed in the last few years. However, in the process, an interesting thing occurred: many newer developers are learning these libraries without taking the time to actually learn about raw JavaScript techniques. What percentage of jQuery users don’t know how to fade out an element with only raw JS? My guess is that it’s much higher than many would think.

If you want to truly understand the library you’re working with, and improve your skill-set, it’s vital that you learn the fundamentals of raw JavaScript.

This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.

Don’t forget to watch part 2 and part 3.

SQL for Beginners

Most modern web applications today interact with databases, usually with a language called SQL. Lucky for us, this language is quite easy to learn. In this article, we are going to start with some basic SQL queries and use them to interact with a MySQL database.

And here’s part 2.

Custom Events, and the Special Events API in jQuery

Web pages, for the most part, are event-driven. Libraries such as jQuery have provided helper methods to make this functionality much easier to grasp. In this tutorial, we’ll look at expanding upon these methods to create your own custom namespaced events.

HTTP Headers for Dummies

Whether you’re a programmer or not, you have seen it everywhere on the web. At this moment your browsers address bar shows something that starts with “http://”. Even your first Hello World script sent HTTP headers without you realizing it. In this article we are going to learn about the basics of HTTP headers and how we can use them in our web applications.

How to Build a Shopping Cart using CodeIgniter and jQuery

CodeIgniter is an open source PHP web application framework with a lot of features. Recently, thanks to the latest update, a new feature was added to this framework, called the Cart Class. In this tutorial, we’re going to take advantage of this new class, and write a shopping cart system, with a touch of jQuery added in.

My Fundamental Misunderstanding Of The jQuery Event Object

Typically, when I deal with event binding in jQuery, I use it in a very one-off kind of way. Meaning, I rarely have multiple event handlers bound to the same element and I rarely use event bubbling in which an event is utilized at more than one level of the DOM tree. As such, I never needed more than a superficial understanding of the jQuery event object. This morning, however, as I was further exploring custom event types in jQuery, it quickly became apparent that my understanding of the event object was, in reality, a critical misunderstanding.

Stronger, Better, Faster Design with CSS3

In our last article about CSS3, ìPushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons.

In this second article weíre going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat coder ó a lot of the CSS properties weíre going to use have limited support, if any, in IE6/7 and probably 8. Firefox 3.5+ and Safari 4 are your best bet right now to see all the cool stuff going on in CSS right now (Chrome does a pretty good job, too).

CSS Techniques I Wish I Knew When I Started Designing Websites

CSS is the best thing to happen to the web since Tim Berners-Lee. Itís simple, powerful, and easy to use. But even with all its simplicity, it hides some important capabilities. Ask any designer, and theyíll tell you that the majority of their code headaches are caused and ultimately solved by CSS.

Writing Maintainable Code

Three years ago, I gave my first talk at Yahoo! entitled, Maintainable JavaScript (slides). The point of the talk was to encourage people to use more rigor in their JavaScript coding. A lot of people who write JavaScript for a living began as hobbyists and hackers, including myself. All of the best front end engineers are self-taught, of course, because this stuff hasnít been taught in colleges and universities. I took the opportunity to simply point out that the same coding practices that are taught in traditional software engineering programs can also be applied to JavaScript. And of course, I threw in some of my own personal findings gathered through years of web development.

Display Gravatar & Autofill Fields for Previous Commenter

When someone comments on your site, cookies with the information the entered are saved to their computers. WordPress makes it easy to access that information. In fact, in your comments.php template they are ready-to-go PHP variables you can spit out anywhere youíd like. Letís take a look.

Bonus: 24 Ways and A List Apart

I haven’t included any articles from 24 Ways, because you should read them all! (If you aren’t aware, 24 Ways published 24 articles each year, from December 1 – 24.) There aren’t any articles from A List Apart, for the same reason.

A Mini-Rant

Collecting all these tips, tuts, and articles was an interesting experience (ever tried to work with 30+ tabs at once?). As I did, I noticed—certainly not for the first time—a disturbing trend in the web dev community: so many sites had post after post entitled something like this: “number adjective subject.” While some list posts are great (guess what you’ve just read?), nothing beats really content. Nettut+ is amazing at cooking up great tutorials, appropriately seasoning it with the occasional list post. Here’s hoping 2010 shows more web dev/design blogs following this pattern!

And Yours?

We all have our favourites; what article from 2009 helped you the most?

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

Go to Source