120 Tips, Tricks, and Tuts from 2009 Worth your Time
Dec 28th, 2009 in Web Roundups by Andrew Burgess
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!
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 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!
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 areincorrect, 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
aaaa
Kategorien
120 Tips, Tricks, and Tuts from 2009 Worth your Time | Nettuts+
120 Tips, Tricks, and Tuts from 2009 Worth your Time Dec 28th, 2009 in Web Roundups by Andrew BurgessNow 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 l…
2 Antworten auf „120 Tips, Tricks, and Tuts from 2009 Worth your Time | Nettuts+“
I don’t like tinyURL’s because I can’t see where I am going. It would be cool if when you hovered over the tinyURL it would display the full url in the bottom left of the browser window…If anybody knows how to view the full url let me know???… thx.
Just install Greasemonkey and install this script <br><a href="http://userscripts.org/scripts/show/12048">http://userscripts.org/scripts/show/12048</a>