In this article, I’ll be introducing and laying the groundwork for advanced JavaScript development with one of the most popular JavaScript libraries available: jQuery.

Although there are many beginning tutorials online that can provide a great starting point for jQuery development, in this article I’m hoping to go beyond just quick-start syntax and instead provide a solid overview of jQuery and discuss the benefits of using such a library. Of course, much of this information–outside of the syntax and other jQuery-specific details–will be applicable to any JavaScript library.

Why a JavaScript library?

To quote the official jQuery slogan: “Write less, do more.” The role of a web developer is to create code that determines what will result from a user’s interaction with a web page. Web developers should not have to spend hours debugging browser quirks. Instead, they should be free to deal solely with the actions and the results. This is where a JavaScript library comes into play.

Overcoming browser differences

Different browsers handle DOM manipulation, transparency effects, and animation in different ways, requiring, in some cases, reams of code just to create a simple effect. Using a JavaScript library allows you to completely bypass all of those challenges, giving you access to an API (Application Programming Interface) that deals directly with the tasks you actually want to accomplish. All the challenges and issues common to JavaScript are dealt with behind the scenes, allowing you to integrate functionality without wondering whether or not it will work in a particular browser.

Unobtrusive JavaScript

Another impelling reason to use a JavaScript library is that all libraries allow you to include JavaScript in your pages unobtrusively, thus keeping your behavior layer (the JavaScript) separate from the content and presentation layers (the XHTML and CSS).

Accomplishing complex tasks with ease

Finally, a very powerful feature of any JavaScript library is its ability to manipulate any element or set of elements on a web page with just one line of code. Take, for example, the following HTML:

Text Here
Text Here
Text Here
Text Here
Text Here

Let’s say you wanted to use JavaScript to change the background color of the first list item element (

var myListCollection = document.getElementsByTagName("ul");
  for (var i = 0; i < myListCollection.length; i++) {
    if (myListCollection[i].className === "list") {
      myListCollection[i].childNodes[0].style.backgroundColor = "blue";
    }
  }

$("ul.list li:first-child").css("background-color, "blue");

$("li a");

jQuery("li a");

$("li a").fadeOut();

tags. If we want to fade the anchors back in again, we just use the fadeIn() method:

$("li a").fadeIn();

Chaining commands

jQuery also allows developers to chain commands, stringing one after another. So, we could combine the previous two examples, as follows:

$("li a").fadeOut().fadeIn();

The above code will fade out all anchor tags nested within list items, then immediately fade them back in. The number of chained items is infinite (or within reasonably set limits), allowing for numerous commands to work on the same group of elements, each happening in succession.

That’s just a small sampling of what’s possible with jQuery, and how easy it is to accomplish tasks that would normally take many lines of code, and a lot of browser testing. Although you’ll still do browser testing when running jQuery code, the results will virtually always be the same: cross-browser, unobtrusive JavaScript that’s easy to write and easy to maintain.

Running code when the DOM is ready

Earlier we touched on the concept of unobtrusive JavaScript, and how jQuery is written to allow your scripts to remain separate from content and presentation. So far, the code examples we’ve discussed would run fine as long as they were included at the bottom of an HTML page. If, on the other hand, they were included in the head of the document, they would fail to work because, at that point, the document tree has not yet rendered.

jQuery allows us to run our code only when the DOM is ready. This is done by means of the $(document).ready handler. The beauty of this handler is that it doesn’t make the code wait until the entire page finishes loading, as would be the case with a typical window.onload event. With the (document).ready handler, your code will run as soon as the DOM tree is finished rendering, before all images and other media have finished loading, thus minimizing load time.

Let’s try running our previous code example when the DOM is ready:

$(document).ready(function(){
  $("li a").fadeOut().fadeIn();
});

The above code tells jQuery to run an anonymous function when the document tree is done rendering. The anonymous function contains the code we saw previously, which faded our anchors out, then immediately faded them back in again. This code could be included in the of the document, near the bottom of the page, or anywhere else, and it would run exactly the same way.

The “ready” event is just one of the many events available through jQuery’s API. Others include click, dblclick, load, blur, keydown, submit, and more.

Further reading

• jQuery Documentation
• Event-Related Functions in the jQuery API
• The jQuery Ready Event

Conclusion

jQuery is capable of so much more, and I’ve only just begun demonstrating its power and simplicity. But I think this suffices to provide a good overview, with some syntax basics, thus preparing beginning jQuery developers for easy-to-write and practical JavaScript code.

Further reading

• jQuery General Tutorials
• 51+ jQuery Tutorials
• 30 jQuery Tutorials for Complete Beginners

Related Content

• Create a Slick and Accessible Slideshow Using jQuery
• 14 jQuery Plugins for Working with Images
• 40 Exceptional jQuery Interface Techniques and Tutorials
• Related categories: JavaScript and Web Development

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. Follow Louis on Twitter or contact him through this form.

Read more here:
Getting Started with jQuery

A pixel is a single point in a raster image. Computer displays are capable of showing millions of these at a time. So how can one lone pixel have an impact on a web design? It probably can’t. However, if you extend that pixel in one direction, it becomes a line, and in the hands of a masterful designer with an attention for subtle detail, the 1px line is a powerful design element. It can be used in many different ways, but in this article we’re going to take a look at how pixel perfect line work can add depth to a design.

The Light from Above

To effectively create depth, one must understand light sources. A light source creates two things: highlights and shadows. The combination of these two things can make something appear as if it’s coming off the page, since lighter elements appear closer and darker elements appear further away.

A light source can come from any direction, but normally light comes from above. Our brains are even wired to expect this. That’s why it’s a typical practice in web design to use a 1px highlight on the top of an element to make it pop, and a darker 1px line on the bottom as a shadow.

Lines that Make Edges Pop

Icon Dock is a great example of how to effectively use subtle 1px lines to achieve depth. Nick La, the designer and owner of Icon Dock, uses 1px lines all over the place to make various design elements pop. Notice the 1px highlight that runs across the top of the main banner area. This pushes the top away from the background and gives the edge a slightly raised look.

Also notice the 1px highlight lining the bottom of the nav bar. This is a nice touch and amazing attention to detail. It gives the illusion of a slightly reflected highlight, but more importantly it helps separate the dark color of the nav bar from the shadow below. If the line was not there the bottom edge of the bar would blend with the shadow and be lost.

If we look at the bottom of the Icon Dock design we will see that the highlight/shadow combination is completed with the use of a dark 1px shadow that runs along the bottom edge of the content box.

UXBooth uses the same technique to give the green bar separating the header form the content a slightly three dimensional look. Notice the light green line on top and the dark green line along the bottom.

Make Buttons Stand Out

Buttons are another element where this technique can work wonders. Since buttons are meant to be clicked, it helps if they look as if they are raised off the page a bit. The buttons on NOSOTROS use a slightly lighter color than the background that brings it closer to the eye, but it is the 1px border around the buttons that completes the effect and makes the buttons look very clickable.

Michael Dick’s portfolio also uses pixel perfect lines to highlight the edges of the main navigation buttons. What I really love about these lines is the fact that they are broken and worn looking to match the grungy style of the over all design. Whether he did or not, it appears that Michael painstakingly erased random portions of the lines to give it this tattered look. It’s this kind of attention to detail that sets some designs apart from the rest.

1px Lines Can Be Very Groovy

Another technique for creating depth with 1px lines is pairing one light and one dark line right next to one another. This creates the illusion of an inset groove, but the key is the placement of each. As mentioned earlier, our brains are wired to assume the light source is coming from above or the top. Notice here that the dark line on top is representing the shadow cast by the top edge of the groove. The light line represents the highlight created by the bottom edge.

If we reverse the positions of the two lines, we loose our groove. Now it appears to be more of a lip that is casting a shadow.

Now let’s get our groove back and take a look at some sites that use this technique to perfection. Atebits uses grooves to separate content and uses the same technique on the main navigation bar to separate the links. This type of line work looks as if it was laser etched into the surface of the design, which is a perfect fit for the over all style of the site.

Tim Van Damme’s portfolio has grooves everywhere. Along with some gradients, the 1px lines here that make up the grooves give this design lots of depth and makes the big buttons look very clickable.

View post:
Adding Depth with Pixel Perfect Line Work

If you’re one of many web designers suffering from an icon collecting addiction, you should probably skip over this article. It might be too much for you to handle. However, if you’re addiction is under control, read on. In this article, we’ve rounded up over 200 icons that are big, beautiful and have lots of detail – and with such a wide variety of subject matter in these icons, you shouldn’t have trouble finding some that you will want to use or add to your icon library.

Cemagraphics Dock Icons (17 icons)

Gentle Romantic icons (5 icons)

Lovely website icons (8 icons)

Designer’s tools icon

Shopping bag icon

Leica Camera Icon

iMod (146 icons)

Moleskine Helvetica Icon

Magic tablet (2 icons)

Outdated icons (8 icons)

Red Moleskine

Lightroom or Aperture

Playground icons (9 icons)

Canon 400D + lens 17-85mm (2 icons)

Moleskine Helvetica Icon

Massive Media Icons (3 icons)

Archigraphs Collection Icons (10 icons)

Hrvoje Bielen Icon Set (9 icons)

Moleskine Icons (8 icons)

Archigraphs Cars Icons (7 icons)

See original here:
200+ Big and Beautiful Highly Detailed Icons

By Louis Lazaris

Not many of us will have the opportunity to attend or participate in a live web-related event, conference, or presentation. But that doesn’t mean we can’t benefit from the information exchanged at such events. Many of the sites associated with those events provide supplementary information, summaries, presentation slides, plus audio and video footage from the presentations given.

In this article I’ve assembled a short but diverse list of presentations related to design and development that I think everyone will find both informative and entertaining. I’ve included a brief description of each presentation, along with some notable quotes and related links. The final presentation in this list is a tongue-in-cheek performance that is a must-see for anyone involved in web development for the past 5 or 6 years.

CSS Frameworks: Make the Right Choice

Speaker: Kevin Yank

This presentation was recorded on October 9, 2009, at Web Directions South in Sydney, Australia.

Kevin Yank of SitePoint discusses what CSS frameworks do, how to choose a CSS framework, along with some of the pros and cons of four types of CSS frameworks: CSS resets, grid-based frameworks, “pre-fab” frameworks, and frameworks that use CSS abstraction.

Notable Quote:

“By the end of this session, you might just decide that the right framework for you is no framework at all.”

Further Information:

• Presentation Slides and Session Description

JavaScript: The Good Parts

Speaker: Douglas Crockford

This talk took place on February 27, 2009 as part of the Google Tech Talks Web Exponents series.

The presentation is based on Crockford’s book and reveals the good and bad parts of JavaScript, along with an audience Q&A.

Notable Quote:

“JavaScript is the only language that I’m aware of that people feel they don’t need to learn before they start using it.”

Further Information:

• JavaScript: The Good Parts on Google Code Blog

Search User Interfaces

Speaker: Professor Marti Hearst

This talk took place on November 23, 2009 as part of the Google Tech Talks series, and is based on Professor Hearst’s book Search User Interfaces.

The discussion covers specific chapters in the book and presents “the state of the art of search interface design, based on both academic research and deployment in commercial systems.”

Notable Quote:

“The paradox of web search: Why is designing a search interface difficult? Why is it easy?”

Further Information:

• Read the book Search User Interfaces online

Design Inspiration

Speaker: Fabio Sasso

This presentation by the owner of Abduzeedo, took place at Front End Design Conference on July 31, 2009.

Sasso discusses his personal sources of design inspiration and includes some interesting comments on the challenges facing Brazilian designers in today’s market.

Notable Quote:

“For me, the only way to come up with a good design is to try.”

Further Information:

• Front End Design Conference on Abduzeedo
• Interview with Fabio Sasso of Abduzeedo

Panel Discussion from FOWD Conference

Speakers: Andy Clarke, Josh Williams & Jeffrey Zeldman

An older presentation from Future of Web Design 2007.

A very funny, and thought-provoking panel discussion covering a number of topics including the recent trend of developers working more on personal projects, plus some thoughts on web standards, web design education, dealing with clients, and more.

Notable Quotes:

“If you say you’re going to talk about web design, reporters aren’t interested. It’s web, so it’s kind of bad design, isn’t it? My kid can do it.”

“We have bad clients who say ‘Is that three pixels wide? Shouldn’t it be four pixels wide?’ They’re clients, so ‘Where did you go to art school?’ is not an approriate answer. So you say ‘That’s interesting, four pixels. We hadn’t thought about that.’

Further Information:

• Future of Web Design NYC 2007 Recap

A More Tangled Web

Speaker: Eric Meyer

This presentation by Eric Meyer took place on November 5, 2009 at Build Conference.

Meyer discusses universal uses for HTML and CSS, the death of the browser plugin, and shares an interesting viewpoint on the proposed completion date of 2022 for HTML 5.

Notable Quotes:

“The advancement of CSS is really a lot like a marathon, complete with the staggering dehydrated people at the end of the 26 miles, that you just want the medics to pull them off the course, and they keep waving them off, and it’s really sort of sad and pathetic. This is kind of what CSS development is like now.”

“The really big shift that is happening… is the shift to the web becoming a client-side computing platform.” (Tim Berners-Lee)

Further Information:

• Speakers and Summaries from Build Conference 2009

How to Bluff Your Way in Web 2.0

Speakers: Andy Budd & Jeremy Keith

This presentation took place in March 2007 at SXSW Interactive.

This is an absolutely hilarious and well-prepared presentation by two of the most notable names in web development. A must-see video covering web 2.0 buzzwords, design, fonts, web 2.0 bingo, and more. The hour closes with a serious summary of the impact of web 2.0, what it really means, and what direction it should go in.

Notable Quotes:

“Web 2.0 is a state of mind. It’s a zen thing. The sound of one hand clapping.”

“In this design, what’s important are the reflections; lots and lots of reflections. Everything’s wet in web 2.0 — wet floor, wet ceiling. So this is a great example of the web 2.0 design style.”

“And remember, Ajax is more than sliding, moving, and fading stuff. It’s an acronym, and that acronym stands for Accessibility Just Ain’t Xciting.”

“It’s all about community. Because none of us are as dumb as all of us.”

Further Information:

• Slides from the presentation

Related Resources

• 17 Hours of JavaScript From the Masters
• Voices That Matter Conference Podcasts
• Google Tech Talks YouTube Channel
• Web Conferences Roundup: Events From Around the Globe
• Front-End Design Conference ‘09 Wrap-up

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him through his website.

More:
7 Must-See Web Design Videos and Presentations

By Paul Andrew

Using AJAX on websites and applications is pretty much taken for granted nowadays. Users expect it. They want to be able to edit a page in-place, they want search queries to be auto-suggested, and they want to be able to submit a form without refreshing the page. Why? Because those things make browsing quicker, easier and, more importantly, enjoyable.

As great as AJAX is, though, it is not for every website or application. Part of the developer’s job is to know exactly where AJAX (or any technology for that matter) is needed. Too little can lead to user frustration. Too much causes misunderstanding. A balance and some restraints are always needed.

In this round-up, we have collected 30 fresh AJAX tutorials and techniques, covering almost every aspect of AJAX development: forms, applications, polls, editing, parsing, visual effects and much more.

AJAX Tutorials And Techniques

An AJAX-Based Shopping Cart with PHP, CSS and jQuery
In this tutorial, you will create an AJAX-driven shopping cart and store all of the products in a MySQL database, using PHP to process the data. jQuery will deliver the AJAX on the page, and with help of the simpletip plug-in, you will be able to deliver a high-end interactive check-out process.
View the demo.

Creating an AJAX Web App Using the Bit.ly API
Using Twitter’s URL shortener, bit.ly, and the jQuery library, you will be taken through the process of building an AJAX Web app. This is a great beginner tutorial, giving a detailed introduction to APIs and the basics of PHP and jQuery.
View the demo.

A Twitter List AJAX-Powered Fan Page
Twitter recently launched its new “lists” feature, which allows you to compile a list of your followers and organize them into categories. Using the newly expanded API (with list-management functionality added), you will learn how to create a widget that flips lists the other way round: this fan widget that goes in the sidebar allows visitors to fill in their Twitter name and join a special fan list from your Twitter account.
View the demo.

Learn How to AJAXify Comment Forms
Learn how to take a simple boring contact form and add some simple animation with an AJAX post request to submit the form to your MySQL database asynchronously.

A Simple AJAX Website with jQuery
Using jQuery, PHP and CSS, you will go through the process of creating a basic AJAX website. The finished product will load pages through AJAX from the PHP back-end and even completely support the browser history (something that is normally difficult to achieve with any AJAX or Flash website).
View the demo.

Create a Twitter-Like “Load More” Widget
In this tut, you will learn the technique—used by both Twitter and the Apple App Store—for loading more information. Simply by clicking the link or button, more content will appear, as if by magic. You will use AJAX, CSS, Javascript, JSON, PHP and HTML to build this widget. This tutorial features both the jQuery and the MooTools versions of the script.
View the demo.

A Simple Twitter App with Ruby on Rails
In this three-part tutorial series, you will set up a simple messaging model that holds posted messages. You will also learn how to post a message asynchronously.
View the demo.

AJAX Multiple-File-Upload Form Using jQuery
With this article, you will learn to develop an AJAXified multiple-file-upload form that uses much less server-side code and has a nice user interface. Thanks to the power of jQuery, the time spent on actual development is substantially reduced.
View the demo.

How to Send Facebook-Style Mail with PHP, AJAX and jQuery
The Facebook website is choc full of unique features, especially the system for sending mail and messages. Using PHP, AJAX and jQuery, you can recreate this technique using this step-by-step tutorial.
View the demo.

How to Create Your Own Stats Program (JavaScript, AJAX, PHP)
Chances are, you use an analytics programs such as Google Analytics, Get Clicky or Urchin to track every move and twitch on your website. They all track page views, visits, unique visitors, browsers, IP addresses and much more. But how exactly is this accomplished? Follow this tutorial and learn how to create your own basic Web statistics program using PHP, JavaScript, AJAX and SQLite.
View the demo.

AJAX Post Pagination in MooTools
Patiently browsing through the archive of posts on your WordPress website can be frustrating. A fix for this problem would be to use MooTools and AJAX to do the loading.

jQuery AJAX delete
Being able to remove content with Ajax is useful for any Web designer. Using a few lines of jQuery, you can remove both a DIV and a record from the database with AJAX. In this demo, you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment’s DIV, and the slide-up animation allows you to remove the DIV.
View the demo.

Voting System with jQuery, AJAX and PHP
Dzone offers users the chance to vote up or down on any particular link, giving an indication of how well an article has been received. In this tutorial, you learn how to recreate this unique voting system using jQuery, AJAX and PHP.
View the demo.

Creating a Dynamic Poll with jQuery and PHP
When you combine the neat functionality of PHP and the cleverness of jQuery, you can produce some pretty cool results. In this tutorial, you will create a poll using PHP and XHTML, then use some jQuery AJAX effects to eliminate the need for page refreshing and to give it a nice touch of animation.
View the demo.

AJAXify WordPress Comment Posting
Many WordPress plug-ins will AJAXify comments, but how do they do it? In this step-by-step tutorial, you will learn how to enable AJAXed comments with client-side JavaScript comment-form validation for any WordPress blog.
View the demo.

Create a Dynamic Scrolling Content Box Using AJAX
If you use Google Reader, then you may have noticed how it shows feed items. After you click on a feed, it loads a few items first, and as you scroll down to view more items, it adds more items dynamically to the list. This tutorial shows you how to create a similar content box that loads content dynamically as the user scrolls to the bottom of the box.
View the demo.

Create an In-Place Editing System
Making users click through multiple pages just to edit a single field is annoying. This tutorial shows you how to create an in-place editing system, as found on popular websites such as Flickr and then take things further with AJAX.
View the demo.

Submit A Form Without Page Refresh using jQuery
This article outlines a great way to use jQuery and AJAX to enhance the user experience, not just by validating the form but by submitting the contact form without having to refresh the page.
View the demo.

How To Parse XML Using jQuery and Ajax
In this tutorial you will learn how to parse or process an XML document and display the data on a page in HTML. This process can be used to filter raw RSS feeds, set up a cool site map on your blog or even lay the groundwork for your own auto-complete search.
View the demo.

Caching AJAX Results in Javascript
AJAX requests are usually faster than regular page loads and allow for a wealth of dynamism within the page. Unfortunately, many people do not properly cache request information when they can. The author shows you his improved method for caching AJAX requests.

How to Create an AJAX File Uploader
The application you will build in this tut uses jQuery’s versatility to allow multiple file uploads without a page refresh or redirection, complete with front- and back-end validation to prevent unwanted files from being uploaded to your server.
View the demo.

How to Create a Simple Web-Based Chat Application
The multiple-user Web-based chat application that you will build in this tutorial includes a log-in and log-out system, with AJAX-style features. The finished product would be perfect for a live support system for your website, as seen on the Vodafone and T-Mobile websites.

Facebook-like Auto-Suggestion with jQuery, AJAX and PHP
This article shows you how to recreate the unique auto-suggestion search feature of Facebook using jQuery, PHP and, of course, AJAX.
View the demo.

20 More Excellent AJAX Effects You Should Know
This article rounds up 20 relatively easy AJAX effects and techniques that can be used to spice up any page.

Record Text Selections Using MooTools or jQuery AJAX
This post demonstrates a useful technique for keeping track of what text users are highlighting and copying on a given Web page. It is helpful because it gives you an indication of what visitors really want from your website.

Automatically Update a Web Page with Dynamic Elements
You may know how to hide and display optional JavaServer Faces (JSF) components using JavaScript and CSS. To do this, you would first identify all JSF components and write them into JSF pages. But that is impossible when you are developing a Web page that contains dynamic elements that are unknown until runtime. With this article, learn how you can clear old UI components while automatically updating the dynamic elements of a Web page, as well as use Java code to add new elements and put them in their proper spot on a Web page. You’ll also learn how to bind different event handlers to different dynamic elements of a Web page, how to register a listener listening to changes of server-side data to invoke a page refresh, and how to use AJAX techniques to refresh only the dynamic parts of the Web page.

Build a Web Presentation Application using AJAX
How does Google Docs have such amazing functionality? It leverages Web 2.0 technologies, which provide robust functionality with relatively simple code. In this article, learn how to build a Web application to create slideshow presentations using AJAX.

Calendar Eightysix
Calendar Eightysix is an unobtrusive, developer-friendly JavaScript calendar and date-picker that offers a better user experience for date-related functionality. It is highly customizable and offers unique and quick navigation by jumping back and forth between months, years and decades without drop-down boxes.
View the demo.

jCart: AJAX/PHP Shopping Cart
jCart is a customizable jQuery plug-in that offers a simple e-commerce solution by handling visitor input without reloading the page.

AJAX Fancy Captcha
The Fancy Captcha jQuery plug-in is an intuitive and fresh way to complete those “verify humanity” tasks, offering reasonable protection against unwanted guests, namely bots and spammers. It works by asking you to verify yourself simply by dragging and dropping an item into a circle.

About the Author

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(al)

Here is the original post:
30 Fresh AJAX Tutorials And Techniques