Advertisement
Web Roundups

The Best Tutorials and Freebies of 2008

by

It's hard to believe that 2008 has already come and gone. However, the year was not without some fantastic articles, tutorials, tips, and freebies spread throughout the Internet. Today, we will take some time to reflect on the most outstanding development related articles of 2008. So hurry up and review these before the Langoliers get them!

Articles

  • ScreenShot 5

    10 Usability Tips for Web Designers.

    While were on the topic of user interface design, The Web

    Designer Depot presents an article containing tips to keep in mind when designing a website.

    href="http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/">Visit Article

  • ScreenShot 1

    20

    Excellent AJAX Effects.

    Glen Stansberry brings us a round up of 20 great AJAX effects, techniques, and

    resources to use in your projects and websites.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img2.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img2.jpg" alt="ScreenShot 2" />

    Blurry Background

    Effect.

    Chris Coyier of CSS-Tricks.com shared a creative use of the backgrond-attatchment property in

    order to achieve a unique design result.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img3.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img3.jpg" alt="ScreenShot 3" />

    Converting a Design

    from PSD to HTML.

    Jeffrey, the site manager of NETTUTS and ThemeForest, recorded an excellent and very

    popular screencast and article on how to convert a design from a psd file to a/an html web page.

    href="http://net.tutsplus.com/videos/screencasts/converting-a-design-from-psd-to-html/">Visit Article

  • src="http://cdn.tutsplus.com/psd/uploads/legacy/001_WebDesignWeek/01_Intro%20to%20WDW/WDW_200.jpg" data-original-url="http://psdtuts.s3.amazonaws.com/001_WebDesignWeek/01_Intro%20to%20WDW/WDW_200.jpg" alt="ScreenShot 3" />

    Web Design Week!

    For as long as I can remember we've gotten requests for more web design posts here on PSDTUTS. Well web design fans, it's your lucky day because all this week we'll be bringing you articles and tutorials on just that topic.

    href="http://psdtuts.com/articles/web-design-week-on-psdtuts-you-can-now-sell-photoshop-templates-via-themeforest/">Visit Article

  • ScreenShot 4

    10 Principles of the UI Masters.

    NETTUTS interviewed 10 UI masters on what principles they use

    when working on a project or design. The result was an excellent article great for any web/UI designer.

    Visit Article

  • ScreenShot 6

    Golden Ratio in Modern CSS.

    A very interesting look at a mathematic approach to web design and

    css, using 62%/38% analogies.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img7.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img7.jpg" alt="ScreenShot 7" />

    Using Absolute

    Positioning to Create Equal Columns.

    Jeffrey shows us how to use absolute positioning instead of

    faux columns to achieve 2 or more columns of equal length, regardless of the amount of content.

    href="http://blog.themeforest.net/tutorials/use-absolute-positioning-to-create-equal-columns/">Visit Article

  • ScreenShot 9

    Huge

    Compilation of Wordpress Code.

    WPHacks collected a gigantic list of wordpress codes and "hacks" and

    put them all on one web page for your bookmarking convenience.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img10.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img10.jpg" alt="ScreenShot 10" />

    Cross Browser

    CSS Fixes, Tools, and Hacks .

    A long and well explained list of so common and not so common web

    browser hacks to achieve compatibility.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img11.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img11.jpg" alt="ScreenShot 11" />

    The Top 7

    Fonts used by Professional in Graphic Design.

    Designer Jacob Cass displays a list of the top 7 fonts

    use in graphic design. Sure to be helpful to anyone looking for some typography guidance.

    href="http://justcreativedesign.com/2008/09/23/top-7-fonts-used-by-professionals-in-graphic-design-2/">Visit

    Article

  • alt="ScreenShot 12" />

    How to Get Cross Browser Compatibility Every Time.

    A more

    in depth look at the cause and effect of browser bugs (mainly IE specific) and how you can go about fixing these

    issues.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img13.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img13.jpg" alt="ScreenShot 13" />

    Whatever

    Happened to UI Consistency?

    One of my all time favorite Internet heroes, Jeff Atwood makes some

    excellent points in his article pointing out the importance of consistency with UI design.

    href="http://www.codinghorror.com/blog/archives/001126.html">Visit Article

  • ScreenShot 14

    Creating Custom Write Panels in Wordpress.

    The guys at WeFunction always produce quality

    tutorials, so its no surprise that their recent tutorial on creating custom write panels in wordpress was a very popular

    one.

    Visit Article

PHP

  • ScreenShot 15

    Learning PHP from Scratch.

    The first article of the "learning php from scratch" series, Jeffrey

    takes us through all the in's and out's of starting off with PHP.

    href="http://net.tutsplus.com/tutorials/php/learn-php-from-scratch-a-training-regimen/">Visit Article

  • ScreenShot 16

    Learning PHP from Scratch-Part 2.

    The second article of the "learning php from scratch" series

    dives right into all kinds of useful PHP functions, arrays, and loops.

    href="http://net.tutsplus.com/php/learn-php-from-scratch-part-2/">Visit Article

  • ScreenShot 16

    PHP Security

    This is the most comprehensive (video) security tutorial I've found on PHP. 45 minutes of secure goodness.

    href="http://videos.code2design.com/video/play/PHP/11">Visit Article

  • ScreenShot 17

    10

    Code Snippets for PHP Developers.

    There is no need to re-invent the wheel if great and free code already

    exists, this article covers 10 extremely useful snippets of PHP code, such as email validation and an accurate IP address

    tracker.

    Visit Article

  • ScreenShot</p>
<p>18

    TimThumb PHP Script Released!

    Using PHP to generate thumbnails of images got

    a whole lot easier when Darren Hoyt released TimThumb in early April 2008.

    href="http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/">Visit Article

  • ScreenShot 19

    Creating a Photo Admin Site Using PHP and jQuery.

    Absolutely one of the best PHP articles of

    2008, this video tutorial takes you through the steps of creating your own photography website much like photobucket.

    Visit Article

  • ScreenShot</p>
<p>20

    Seven Habits for Writing Secure PHP Applications.

    IBM collected a list

    of seven great ways to secure your php applications and protect against XSS.

    href="http://www.ibm.com/developerworks/opensource/library/os-php-secure-apps/index.html">Visit Article

  • ScreenShot 21

    Creating Custom Avatar Icons with PHP.

    This tutorial will not teach you how to become a php master,

    but it is just plain fun. Learn how to use php and the GD library to create custom avatar icons. Icons such as a drunk

    Brian Griffin.

    Visit Article

  • ScreenShot</p>
<p>22

    User Membership with PHP.

    If you've ever wondered how to build your own

    user login script from scratch, this tutorial is for you. It covers all the steps from setting up the database, to

    logging the user out when finished.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img23.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img23.jpg" alt="ScreenShot 23" />

    JPG to ASCII

    Converter with PHP.

    Lets face it, ASCII art is awesome. This fun script/tutorial shows you how to

    use PHP to turn a JPG into ASCII art, give it a try!

    href="http://phpsnips.com/snippet.php?id=29">Visit Article

Javascript/jQuery

  • ScreenShot 24

    jQuery for Absolute Beginners: Video Series

    "So everywhere you look, you see “jQuery this” and “jQuery that”. For the last year or so, this library has been the darling of the Javascript world. But do you feel that you just can’t seem to learn the dang thing? Do you hate how the existing tutorials assume that you know WAY more than you actually do? If this rings true for you, I can help. "

    Visit Article

  • ScreenShot 24

    Visual jQuery.

    I'm not sure if this existed before 2008, and if it did please forgive me. However, I think you'll agree that visual jQuery is one of the most helpful and quick go to guides for jQuery documentation.

    Visit Article

  • ScreenShot 24

    Extending jQuery’s Selector Capabilities

    "I’m sure you all know that it’s possible to create plugins and extend various aspects of the jQuery JavaScript library but did you know you could also extend the capabilities of it’s selector engine?"

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img25.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img25.jpg" alt="ScreenShot 25" />

    15 Resources

    to Get You Started With jQuery From Scratch.

    This article is more than just a list of resources,

    it's a complete walkthrough and introduction into the jQuery framework.

    href="http://net.tutsplus.com/tutorials/javascript-ajax/15-resources-to-get-you-started-with-jquery-from-scratch/">Visit

    Article

  • ScreenShot 27

    25

    Excellent Tips to Improve your jQuery Skills.

    A collection of 25 excellent and thorough tips to

    improve your jQuery skills and abilities.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img28.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img28.jpg" alt="ScreenShot 28" />

    jQuery Link

    Nudging.

    David Walsh showed us an extremely simple jQuery script to give links a nice 'nudge'

    animation. This effect is now being used on many popular websites, such as CSS-Tricks.com

    href="http://davidwalsh.name/jquery-link-nudging">Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img29.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img29.jpg" alt="ScreenShot 29" />

    10 Essential

    Principles of the Javascript Masters.

    Take advantage of this excellent article and series of

    interviews and learn from the Javascript experts.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img30.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img30.jpg" alt="ScreenShot 30" />

    A Lesson in

    Accessibility and Progressive Enhancement.

    An excellent and in-depth view on how to make sure your web

    pages degrade gracefully in the case that Javascript is disabled.

    Visit Article

  • src="http://cdn.tutsplus.com/net/uploads/legacy/168_bestOf08/img31.jpg" data-original-url="http://nettuts.s3.amazonaws.com/168_bestOf08/img31.jpg" alt="ScreenShot 31" />

    jQuery

    Tutorial for Designers.

    WebDesignerWall always seems to deliver quality content and this article is no

    exception. Step by step, this tutorial aimed at web designers teaches you many popular jQuery practices.

    Visit Article

  • ScreenShot 32

    The jSkinny on jQuery.

    A fun and practical look at the ever popular Javascript framework that is

    jQuery.

    Visit Article

  • ScreenShot 33

    Developing a jQuery Plugin.

    Another one of my Internet heroes (I have a list), Jonathan Snook

    gives us an excellent article on how to develop your own jQuery plugin.

    href="http://snook.ca/archives/javascript/jquery_plugin/">Visit Article

Freebies

class="webroundup">

  • alt="ScreenShot 34" />

    Fresh Finance Icons.

    Icon Eden was nice enough to give out

    this stunning finance icon pack for free, complete with 59 raster and vector icons.

    href="http://net.tutsplus.com/freebies/icons-freebies/fresh-finance-icons/">Visit Article

  • ScreenShot 35

    Stunning Free Character Icon Pack.

    WeFunction recently released this fun character free for you

    to use in any way you wish.

    Visit

    Article

  • alt="ScreenShot 36" />

    Twitter Birds-Icons and Illustrations.

    Another great set of

    icons released by WeFunction, this time with a focus on twitter.

    href="http://wefunction.com/2008/07/freebie-twitter-icons-illustration/">Visit Article

  • ScreenShot 37

    VanillA Cream Icon Set.

    A clean and modern looking free icon set found via DeviantArt.

    Visit Article

  • ScreenShot 38

    Icon Set by MannMitDerTarnjacke.

    Quite a mouthful to pronounce but it is certainly a lovely and

    clean icon set, free to download.

    Visit Article

  • That will do it for now, please add your favorite links and tutorials of

    2008 in the comments section below. I also would like to wish all of you a Happy New Year and a wonderful 2009!

    Related Posts
    • Code
      Theme Development
      The Beginner's Guide to Icon Fonts in WordPressIcon fonts
      I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
    • Web Design
      Case Studies
      How They Did It: Typekit's New HomepageTypekit retina
      Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
    • Code
      PHP
      Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
      Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
    • Code
      Android SDK
      Android SDK: QuizAndroid preview@2x
      In the Android from Scratch series, we learned the basic concepts of Android that you need to know about in order to start creating applications for the platform. Along the way, we covered various aspects of Android development, including Java development, using XML, user interface design, project structure, data storage, and the publication process. Find out how much you've managed to retain about what we covered in the series by taking a quiz.Read More…
    • Code
      Theme Development
      Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPressCreating wordpress theme from html 400
      In the first two parts of this series, you learned how to prepare static HTML for WordPress and to split your HTML file into a set of template files. You now have the beginnings of a theme, but unfortunately your files won't work as a theme just yet. For any theme to work, you need to tell WordPress about the theme, and you do this in the stylesheet. In this tutorial, you'll do that. Next, you'll upload your new theme to a WordPress installation and test it. Additionally, you'll create a screenshot of your theme so it's easier to work with in the WordPress admin.Read More…
    • Code
      PhoneGap
      PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
      Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…