120 Tips, Tricks, and Tuts from 2009 Worth your Time
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!
Author: Andrew Burgess
This is a NETTUTS contributor who has published 13 tutorial(s) so far here. Their bio is coming soon!
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.
Jan 13th, 2009 in Other by Thord HedengrenURL 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!
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.
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.
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.
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.
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.
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.
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.
Don’t forget to checkout part 2
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 areincorrect, bad, or otherwise unacceptable, I havenít found one that met my needs.
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.
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.
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.
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!
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.
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.
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.
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.
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?”
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.
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.
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.
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.
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.
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.
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.
Don’t forget to check out part 2!
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
Continuing our review of htaccess files, today we’ll examine how to use mod_rewrite to create pretty URLs.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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!
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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. 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.
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?
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.
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.
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.
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.
This article is mostly aimed at people who are just starting to learn jQuery. I assume you know the following.