As almost any web designer worth their salt, and a large percentage of web developers will tell you, to be fully considered a web designer you have to have some background in code. Not to the depth that full on developers must, but it really is unfair to the rest of those working on a website with us if we do not have some knowledge in a handful of key areas. Which is where these web design tutorials come in.

In this post we have gathered a handful of useful tutorials from these various areas of code that designers should have their hands in. We have standard CSS and CSS3 tutorials, HTML5 and also Javascript tuts as well. A little something for all three of the main code branches that web designers need to always be improving their grasps on. We hope that you find these web design tutorials helpful in your next or current project!

CSS Tutorials

30 CSS Best Practices for Beginners – CSS is a language that is used by nearly every developer at some point. While it’s a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes.

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.

3 Easy and Fast CSS Techniques for Faux Image Cropping – This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS.

Build Multi-level Multi-column Multi Menus with pure CSS – works perfectly in most browsers, including IE 6, using absolutely no javascript

CSS Absolute Positioning: Create A Fancy Link Block – some tricks to create a fancy link block that make our links more attractive.

How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags.

CSS3 Tutorials

CSS3 Minimalistic Navigation Menu – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

CSS3 Tutorial: Sleek Card Pockets using CSS Only – learn how to create web card pockets using some great new CSS3 techniques.

CSS3 Animated Vignette Buttons – This tutorial uses a patterned background and places vignette-style .pngs over the top which are animated using transition.

CSS3 Music Player Menu – This tutorial maximizes power of CSS3 to create a CSS Music Player Menu with a Photoshop-like effect.

3D Animation Using Pure CSS3 – This tutorial uses the perspective property to create the 3d effect and transform and transition, to animate it.

Create a Swish CSS3 Folded Ribbon in 5 Minutes – Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes.

HTML5 Tutorials

HTML5 : The Basics – This tutorial introduces HTML5 and its basic features as well as explains the key differences from HTML 4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.

Have A Field Day With HTML5 Forms – Take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.

Preparing for HTML5 with Semantic Class Names – A brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements.

Drag and Drop – This tutorial will teach you how to create a HTML 5 page that uses the new drag and drop feature.

How to Make an HTML5 iPhone App – This tutorial will show you how to create an offline HTML5 iPhone application, specifically, a tetris game.

Create Vector Masks Using the HTML5 Canvas – This tutorial looks at how to use the canvas tag and clipping to create images that aren’t so rectangular.

Javascript Tutorials

Javascript – An easy introduction – Javascript is used to add interactivity and functionality to a site. It has many uses, from detecting the viewers web browser to validating form input.

Nested Arrays in Javascript – Like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays. In a nested array, the elements of one array are themselves arrays.

jQuery for Absolute Beginners – Fifteen video tutorials that teach you EXACTLY how to use the jQuery library. Start by downloading the library and eventually work up to creating an AJAX style-switcher.

iPhoto-like image resizing using Javascript – This tutorial uses the script.aculo.us slider control to capture input values, then converts those values into something useful.

Learn How To Detect Browser in Javascript – In this tutorial you will learn how to detect the browser in javascript so that you can then serve the suitable information.

Words Validation with Javascript – This tutorial will explain you how to filter out inappropriate words from being updated or sent from your website.

(rb)

  

Not that this is universally true, but some people look haphazardly into a field before deciding to dive in. We do the odd bit of research, investigating the ins and outs, slowly developing expectations about this new arena of work. Expectations are not necessarily bad to have; they can be a powerful motivator. But sometimes our expectations are shattered by a development that we never saw coming.

“Shatter” sounds a bit dramatic, but a situation can certainly get derailed. Regardless of whether this changes the course of your career, it can still knock the wind out of you. Perhaps worst of all, you can’t really prepare for something that you didn’t expect. That is where this post begins. What’s past is prologue, and many of you are bound to have reflections on how those twists and turns of yesterday can help guide your development today.

When we’re hit by something that wasn’t on our radar, our expectations can shatter. (Credit)

Once again, we turned to our social media friends and followers for examples of unforeseen changes in the design and development world that tripped them up. Hopefully, by going over some of these pitfalls, we can be better prepared for the next ones — or at least be prepared for their fallout. With the way communities are constantly developing, changes are bound to surprise us, but if we are aware of how quickly they can occur, we might just be better able to adapt to them.

A Better IE

“Did someone say ‘standards-compliance’? Well, it couldn’t have been Microsoft. Oh, it was?”

A chill ran over the World Wide Web as we heard the news — and saw the proof — that Internet Explorer was going to comply with the standards that the rest of the Web had been adhering to for a while. And it took only the ninth iteration of its browser for Microsoft to finally reach the shore from which the rest of us have been waving to them.

Years after setting sail on the cyberspace waters, IE finally lands on the shore we have been occupying for years. (Image credit)

Many in the design and development community have long given up on the Microsoft crew, and many had vowed to stop catering to the IE crowd by not adding the extra code and tweaks that previous versions of IE required. So, when Microsoft announced that IE9 was bound for the market, you can imagine that the community was waiting with less than baited breath. Then news filtered to the public about the bells and whistles it would have, and people became shocked at the prospect of IE becoming compliant.

Lesson Learned
So, what did we learn from this development that we never saw coming? With enough pressure and time, suckage can end. There was a time when Microsoft was setting the agenda and didn’t have to comply to anything. It was on top, and no one could challenge its grip on the market, so it saw no need to change. But all that is past. It is finally stepping up to the plate.

What our Friends and Followers Said

• IE9 is remotely good!
• Internet Explorer is supporting open standards.
• IE9 as we know it now.
• An excelling IE9.
• Internet Explorer becoming a fairly standards-compliant browser.
• IE9 being pretty awesome!
• IE to support recent fancy stuff like HTML5 canvas, video, audio, clean CSS3 and more to come with IE9.
• Microsoft’s commitment to Web standards in IE9.
• Internet Explorer actually getting better (IE9 looks promising… let’s just hope).
• Yes, IE9, and especially its download manager!!

Mobile Web Explosion

“A Web you can take anywhere? Are you talking sci-fi?”

Not exactly, although we weren’t exactly prepared for this by Back to the Future 2. The mobile Web has been a game-changer for the design and development community, and it caught many of us by surprise. It doesn’t seem to be slowing down either. Quite the opposite: the market is growing by leaps and bounds. What some assumed to be a fad has forged an entirely new direction for the market.

For the longest time, the trend was to expand our viewable spaces. Designers planned for a larger Web, breaking out of the standard 960 grid, believing that the Internet would be grandiose and viewed on large screens. Things took a turn, and the Web was narrowed to much smaller mobile devices. The mobile Web exploded and seems to have created a virtual black hole that is pulling countless surfers in. People have fallen in love with the idea of taking the Web wherever they go, and they aren’t looking back.

Lesson Learned
While increasing the size of viewing areas is still a trend in its own right, few of us expected so many people to opt for a compact Web. Convenience outweighs presentation at times, and many want constant access to the Internet. Basic often beats bulk.

What our Friends and Followers Said

• A mobile revolution.
• The explosion in mobile Web and applications!
• Designing for browsing on mobile devices (cell phones mainly).
• Designing for cell phones! When I started in Web design, I’d never have guessed that.
• Web browsing on small (mobile) devices.
• I definitely didn’t see mobile browsing being at the level it is today (Thanks, Apple!).

Social Media Dominance

“Why would anyone care about a blogging platform that limits you to 140 characters?” “Who cares about social networking? We’re running a business, not a high school.”

I wonder how those words tasted when they were eaten? Social networking dominated the Web almost as soon as it hit the scene, and it continues to attract more users than most of us could have imagined. The many social media outlets and groups out there have brought us connectivity as well as insight into the communities that use them. Who saw that coming?

Dozens of social media networks are gaining traction, creating new avenues for marketing in the process. They are attracting not only veteran Web users, but also millions of people who previously saw little or no use for the Internet. No wonder these networks are dominating the market: they satisfy a need that so many didn’t realize they had.

Lesson Learned
What have we learned? That most people think in 140-character bursts of thought? Not exactly. Rather, we’re seeing the power of this connectivity and the way the Web can provide a global fabric of social communication. Many of us miscalculated the appeal of a socially interactive Internet, but now we see that it is unstoppable. You can’t stop the signal, as Joss said.

What our Friends and Followers Said

• Twitter! I thought micro-blogging and other social media arms would be a passing fad. Boy, was I wrong.
• The omnipotence of Facebook.
• More than half a billion people using a website (Facebook).
• Facebook advertising around the ground at Old Trafford against Liverpool on Sunday. Mad!
• Facebook addiction.
• Massive social media sharing on every pixel online.
• Social media overkill.
• With that, the herd of Social Media “experts.”
• Twitter proving to be popular/useful.
• Twitter. I still don’t see any redeeming value to it, even for reciprocal linking.
• Social media integration.
• Hundreds of thousands more people trying to earn XP and levelling up (Farmville).

Overall Market Stability & Growth

“You mean I can make this my job? What are you smoking?”

So many people never really saw the design and development fields growing so rapidly into a stable and secure job market. Thousands have committed to a career in a field that was once considered better suited to supplementary income or a lucrative hobby. The market now provides an endless supply of work opportunities and continues to evolve.

Everyone knew the Web would be big, but not everyone recognized the need for professional designers and developers to make the most out of people’s experience on it. This stability and growth came as a surprise, albeit a welcome one. The broad and helpful community that has populated this market might explain both the stability and growth. The community has built a solid foundation for the coming generations.

Lesson Learned
Is there a lesson here in our underestimation of the market — aside from what it tells us about our self-esteem (although that’s part of it)? As with the mobile Web and social media, perhaps the lesson here is not to dismiss an emerging market before considering its full implications and potential applications.

What our Friends and Followers Said

• Just about unlimited opportunities.
• Here in my country: the respect!
• Now it’s actually a real job!
• To actually earn my living with website development.
• The growth of the now enormous Web dev community and its amazing generosity. Couldn’t have become the designer I am today (being self-taught), and the better designer I hope to be in the future, without it.
• Well, I was going to say HTML5, but then when you really look at it as a whole, I guess you can infer that all of us never really saw a big market for virtual goods (in this case Web design and development). I was very surprised to see how it kept on growing to this day, and I have high hopes for the future.

Farewell XHTML — Hello HTML5

“What is this nonsense about the return of straight HTML? XML-based code is the wave of the future!”

Or so we thought. As we’re seeing, things don’t always work out the way we expect. When the coding standard went from HTML 4.01 to XHTML, many abandoned ship and cut down this x-citing new path. Some even called XHTML the future of HTML, doubting that HTML would have a significant version after 4.01. They believed the Web had gone the way of the X.

No one expected us to retreat from the path of XHTML. (Image credit)

After nearly a decade of XHTML ruling the Web, HTML5 promises to change all that. We might have to say farewell to the X after all these years. Cue the dropping jaws and shocked expressions. Evidently, XHTML had not taken as strong a hold as we had thought. The standard is now revisiting its roots.

Lesson Learned
Is the lesson here never to give up on the source mindset? Or that the original will persevere in the end? Or better yet, that we should learn to move forward without putting all our eggs in one basket? If we learn that, we will have learned something valuable from this detour.

What our Friends and Followers Said

• The end of XHTML.
• Leaving the XHTML path (HTML5).
• HTML5 form validation. Or rather HTML5 itself.

Bargain Bin

“No one goes bargain hunting for design and programming. Quality always wins out over cheap and quick… right?”

Apparently not. This is another of those dynamic and well populated fields that many people never expected to face. Lo and behold, as in almost every other business market out there nowadays, you will come across people who want bargain-bin pricing from their designers and developers. Some even expect bells and whistles with their bare-bones pricing.

When the economy nosedived a few years back, many people could no longer afford top-shelf design and development. This sad truth, coupled with the slice of the public that undervalues the contributions of these professionals, opened a segment of the market that not only tolerates this undercutting but practically encourages it. Bargain-bin services have cropped up all over the landscape to capitalize on a demographic that is in crisis and, for lack of a better word, cheap.

Lesson Learned
The lesson here is obvious, though perhaps not to those who were caught off guard by this trend. There will always be people who undervalue work that they themselves cannot do, either because they do not really understand what is involved in the process or because they are just dismissive. And there will always be those among us who are willing to satisfy these demands to turn a profit.

What our Friends and Followers Said

• That there are people out there willing to do it so cheaply.
• Those free downloadable templates! Now anybody can just get a nicely designed template, eliminating the need for a custom Web designer.
• Build-your-own-website-for-free website services. People will simply click, drag and add content, and they now have their own website!

Apple vs. Flash

“This idea of community will steer the market, and collaboration between the major players will be the way forward, right?”

Not if Apple has anything to say about it. Talk about shockwaves: many of us never saw Apple’s battle with Flash coming. Potentially deep-sixing a major player on the Web before its prime was a bold move. The field of battle has become anything but friendly as both houses make their play to shape the future of the Web.

Flash has long been a favorite of many designers and developers, while being disliked by just as many. So, it was inevitable that the day would come when we would have to choose whether to commit to or abandon this technology. That day came sooner than we expected; once Apple dominated the mobile Web and app market and turned on Adobe. Flash is not supported on the iPad or iPhone, to the chagrin of some critics, and Steve Jobs made some rather unflattering statements about Flash’s stability and usefulness in the wake of HTML5.

Lesson Learned
The market can change unexpectedly when its leaders suddenly decide to turn the tables. Expect the unexpected is particularly apt here. As one company gains dominance in a market segment, it can effectively twist and turn us however it likes.

What our Friends and Followers Said

• Flash going away.
• Apple’s failure to support Flash on iPhone/iPad.
• The death of Flash.
• Adobe and Apple hating each other!
• Apple not adopting Flash!
• Steve Jobs saying ‘No’ to Flash.

Jumping on JavaScript

“Oh, please. JavaScript is a flashy fad. Give it time; it’ll fade into the ether.”

A fad it is not. In fact, as pointed out by one of our social media friends quoted below, JavaScript has become so prominent in so many applications both on and off the Web that it has become a near necessity. For years, it has been enhancing the experience of millions of users, creating a more dynamic Web.

In the beginning, some designers and developers saw little use for this technology beyond a bit of dazzling. Others saw its raw potential and took the reigns, working hard to elevate our experience of the Web and beyond, and making JavaScript a go-to language for so many developers.

Lesson Learned
In discounting JavaScript so quickly, perhaps we should learn to be not so hasty in judging the usefulness of every new tool that comes along. We should instead devote adequate time to examining the technology and exploring its potential applications.

What our Friends and Followers Said

• JavaScript becoming essential. I ignored it for years, thinking it was just good for flashy effects.
• The rise of JavaScript.
• Server-side JavaScript.

The Persistence of jQuery

“JavaScript is a complicated language, and we just have to accept that in order to use it. There’s no getting around it.”

Well, that argument might have held up until 2006. But then one tool hit the scene to change all that. jQuery arrived and sent waves rippling through the community. Suddenly, this cross-browser JavaScript library was barreling through the ranks to become the most popular library.

jQuery didn’t take long to cement its status as number one. (Image credit)

In a matter of years, jQuery was created and used on nearly a third of the most trafficked websites. Clearly, there was no stopping it. Opening doors for developers in so many areas, jQuery became another one of those wonderful gifts to the community. Couple that with its open-source licensing, and it is easy to see how it has scaled such heights in so short a time.

Lesson Learned
Looking at the ingenuity of those responsible for the success of jQuery, we can draw a lesson about how we as a community can come together to build better access to popular languages, such as JavaScript. Never underestimate our desire to cut out as many steps from a process as possible and make life easier for ourselves — not to mention the momentum such efforts can generate.

What our Friends and Followers Said

• jQuery to an extent.
• The possibilities! Thanks to jQuery and the brilliant minds behind it.
• jQuery.

An Animated CSS

“CSS is impressive, to be sure, but it’s all about styling. Leave the animation to JavaScript!”

Well, not so much anymore. Since about 2007, Webkit devotees and others have been developing the means to enable elemental animations via CSS. And with CSS3, what many in the community thought would remain a dream is becoming a reality.

CSS is a powerful and popular language for styling websites, and no one ever doubted its adaptability, but the emergence of an animation module still surprised a few of us. Despite the crude animations generated in the early days of CSS, these more fluid JavaScript-like transitions are still quite an interesting development. Another shining example of the leaps and bounds by which the design and development community grows, ever moving forward.

Lesson Learned
Any new lessons we can learn from this? Not really, other than touching on some of the ideas already discussed. Here again, we see that we cannot underestimate the inventiveness of people in this industry. It it one of the main reasons for the dynamism and growth that have brought such stability and scope to the market.

What our Friends and Followers Said

• CSS3 animation.
• CSS transitions. But oh, what a joy they are!
• CSS3 animation!

More From our Friends and Followers

Before turning the discussion over to you in the comments section, we wanted to share a few more comments from our friends and followers about surprises that caught them off guard. Thanks again to all of those who participated in this dialogue and to all those about to contribute!

• Photoshop CS5 Content Aware.
• The death of the Web.
• Chrome was a complete shock when it got released. Really don’t know how they kept it so quiet.
• Clients from hell.
• 1. Google doing Web fonts. 2. How easy they are to implement!
• Flash actually being used.
• The enjoyment I get from building shifty out-of-date-code HTML email campaigns. Seriously. A/B testing them and seeing an increase in conversions is awesome.
• Wait… you’re serious??
• Custom-colored scroll bars are not so hot anymore.
• In-browser location detection.
• The number of “professional” Web designers who can barely string together some HTML/CSS.
• Seeing websites in 2010 that are still being made with HTML tables… Argh!

Related Posts

• The Current State of Web Design: Trends 2010
  Offers a look at where we are in the field today.
• The Web Design Community Offers Advice to Beginners
  Another great post that looks at some tips from our friends and followers.

(al)(ik)

  

We are regularly collecting useful JavaScript and jQuery snippets, libraries, articles, tools and resources and present them in compact round-ups here, on Noupe. This time we are again covering some useful JavaScript and jQuery techniques, plugins and tools that may help you improve the user experience for your site.

Useful JavaScript and jQuery Techniques

Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Nivo Slider
The Most Awesome jQuery Image Slider

jQuery.Syntax
jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

jquery.timepickr.js
This is my humble attempt to enhence web time picking.

Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

Making a Mosaic Slideshow With jQuery & CSS
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements
Having full control of elements on a page and the order they are presented in can be quite useful. jQuery as always is a safe choice to go for. There are several good quality plugins to pick from. This post provides an overview of plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

Create an Impressive Content Editing System with jQuery and PHP
I’m going to show you how to use jQuery and PHP to build a content editing system that will allow you or your client to easily edit .html pages visually.

jQuery MegaMenu Plugin

Excellent JQuery Plugins To Enhance Form Validation
Simple jquery plugins can enhance and beautify HTML form elements, these simple jquery scripts turn a simple HTML website to a fantastic look and feel. These plugins can be enabled very easily. In this roundup I have gathered most beautiful Jquery plugins that are related to all kinds of form validation. This list also includes roundups of some blogs. Go ahead and enjoy

gameQuery – a javascript game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

A demo of AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

Create a Content Rich Tooltip with JSON and jQuery
Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

jQuery image zoom effect
So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text.

jQuery Roundabout Shapes
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

Extending jQuery’s selector capabilities

How to show/hide a hidden input form field using jQuery
This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an ‘other’ option. I wanted to allow users to select the ‘other’ option which then would show an input field so they can enter a specific description of what that ‘other’ item is. I didn’t want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

Useful JavaScript / jQuery Tools

JavaScriptMVC
JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

PEG.js – Parser Generator for JavaScript
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily bulid fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

PhoneGap
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

JavaScript Shell
A command-line interface for JavaScript and DOM.

WireIt – a Javascript Wiring Library
WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

JavaScript Programming Patterns
In this article I am trying to present some of the techniques out there that I have discovered. The patterns I would like to mention are the following:
- The Old-School Way
- Singleton
- Module Pattern
- Revealing Module Pattern
- Custom Objects
- Lazy Function Definition

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

How to Test your JavaScript Code with QUnit
QUnit, developed by the jQuery team, is a great framework for unit testing your JavaScript. In this tutorial, I’ll introduce what QUnit specifically is, and why you should care about rigorously testing your code.

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

Online javascript beautifier
This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

CSS & Javascript Character Entity Calculator
Enter your HTML Entity Character number (such as &#2335 or just 2335 – ?) to get the CSS and JS values for that entity.

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

Showdown – Markdown in JavaScript
Showdown – a JavaScript port of Markdown

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

fLABjs
fLABjs is a special API wrapper around LABjs which adapts the code to work properly in a file:// local filesystem environment. There are a number of things with core LABjs does which are not appropriate for local filesystems, such as XHR, special path handling rules, etc.

jQuery LazyLoad Ad : Delays loading of advertising
jQuery LazyLoad Ad is a jQuery plugin that takes advantage of LazyLoad delaying ads loading.

qTip – The jQuery tooltip plugin
qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

jQuery Collapsing and Expanding Table Rows

Improving Search Boxes with jQuery
This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

jQuery Grid Plugin

Pines Notify jQuery Plugin
Pines Notify’s features include:
- Timed hiding with visual effects.
- Sticky (no automatic hiding) notices.
- Optional hide button.
- Supports dynamically updating text, title, icon, type…
- Stacks allow notice sets to stack independently.
- Control stack direction and push to top or bottom.

jQuery Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.

  

Web designers are a special breed – we’re one of a small group of professionals that actively seeks out to improve ourselves and our craft through any means possible. This generally means on our own, from each other, and through an awful lot of ‘guess, test and revise.’ Web design isn’t for the faint of heart or those with any fear of failure.

The most daunting ‘learning experience’ for developing developers is to make the jump from the HTMLs and the CSSs of the world to web scripting. It looks good from the outside – all that added interactivity and animation and cool effects and features – oh my. But for some designers, it proves to be a difficult lesson to learn, as scripting can require more focus, logic, and organization than the coding that you are used to.

Getting on Your Feet Fast

Let’s take a look at bulletproof ways to ease into Javascript at an accelerated pace. Javascript is the perfect place to start to learn scripting because it is generally less complex than other scripting languages, and is client-side – meaning that you will be able to test your scripts on your computer as you script it, in real time, without setting up servers or putting forth any more effort than you really need to. However you code pages now is great – don’t do anything differently to accommodate Javascript – she’s easy to get along with.

The first place I start when looking to learn anything new is on the web – makes sense to learn the web from the web, right? Yeah, books are nice, and they can make you look intelligent, but the truth of the matter is that you’ll find most (if not all) of that same information out on the web, and, out on the web, you can find the most updated tutorials. If books suit you, there are a plethora of books out there on Javascript – feel free to help yourself to any of them.

Websites That Teach Javascript

Something to remember about Javascript websites as you scour the web for help – there are essentially two types of Javascript websites; those that are focused on scripts, and those that are focused on teaching Javascript. I say this because I’ve worked with a lot of students that have stumbled across script websites, started reading scripts on those pages as if they were tutorials and then got confused and discouraged when they couldn’t follow the code – this would be akin to trying to read Braille by shouting at it.

Javascript learning sites spend more time on simple logic and processes. Stuff you will never really do on a website (as you’ll see below) but it will get you into the scripting mindset and help you ease into the building blocks that will creep into every script you work with.

Let’s take a look at two ‘learning’ Javascript sites.

Tizag.com

I don’t know where this site came from or remember how I found it, but I constantly reference Tizag for many of their tutorials. They are straightforward and direct, but move through the topic in a way that makes it easy to understand. Their lessons aren’t too long, giving you just enough to take out and test before returning for the next lesson.

W3schools.com

This site is a step up from the rest in teaching you Javascript (or anything for that matter) and there’s one really simple reason why – they let you try it for yourself right there in the tutorial. A lot of people don’t like learning from books because you can’t try it for yourself; that is unless, of course, you find some ridiculous way to prop the book up against your monitor, so you can read it without holding it open and type all at once, but that’s not very conducive to being able to focus on the script at hand.

About.Com

About.com offers premium advice and tutorials on just about anything for free. It’s pretty much to a multi-information oriented site. Fortunately, here you’ll be able to find a variety of tutorials and workshops focused on begginer to advanced JavaScript users.

Academic Tutorials

The Academic Tutorials site is very similar to the W3 schools learning center. It provides extensive and well organized facts on JavaScript. You will also find yourself with more hands-on experience than you thought, since almost every tutorial has various examples.

Learn-JavaScript-Tutorial.com

This site contains front-line examples and begginer JavaScript experiences for the novice of users. Tutorials showcase several useful scripts and images that aid you in the advancement of your skills as a designer.

Walk Before You Can Run

Let’s try it ourselves! In Javascript, the word ‘document’ refers to the current page. The word ‘write’ allows me to write text on the page. In the majority of cases, your scripts will be included in a script tag – this is how the browser identifies that you’ve switched gears. It’s just like the style tag, but it happens whenever you need javascript (even in the body tag) and uses a type of text/javascript instead of the more familiar text/css. So, if I wanted to build a script to put my name on the screen it would look like this…

document.write(“My name is Matt”);

It’s that simple – as you learn more, you’ll do more impressive things, but, hey, we all have to start somewhere, right? Consider ‘document.write’ like the fast food job you had in high school. It’s probably not something you will impress your friends with, but once you’re an investment banker, you’ll look back on it with nostalgia.

Head out to w3schools.com, get into their Javascript tutorial, and choose the first example – use this and build your first script for yourself! Replace the text with whatever text you want, or add additional ‘document.write’ commands to put more text in your page.

Subtleties of JS

Keep in mind that Javascript is like an oompa loompa in your web factory – its not building the page, its helping you build the code. So, when you put text on the screen, the script you wrote is not putting text directly on the screen… its putting text in the code, and the browser is displaying it as it normally would. Don’t believe me? Try this:

Add a second ‘document.write’ command. You should notice that the two pieces of text follow directly after one another on your webpage.

Now, between the “quotes” where your text is, add HTML tags. Add a paragraph tag on each command. You should have something like this:

document.write("<p>My name is Matt</p>");
document.write("<p>This is my first script</p>");

Because the Javascript will write this directly into the code, you can use things like HTML tags because the browser will be able to interpret and display them!

As you get to more and more complicated topics, the value of being able to code alongside the tutorials on w3schools.com will be invaluable to your ability to learn Javascript fast and feel comfortable doing so.

Put It to Use

The best way to motivate yourself is to see what you could do if you put the time into learning Javascript. While there are a ton of ways to enhance your HTML, I’ve included some tutorials and demos below that will show you how Javascript can play nice with your CSS to create some pretty impressive results, relying a lot on your current skill to help enhance the Javascript you are learning.

Suckerfish Dropdowns

As you learn Javascript, you should know about suckerfish dropdowns. Essentially, these dropdowns use a lightweight combination of both CSS and Javascript to create accessible menus that can be used to add additional links to your navigation.

What’s interesting about this is that the Javascript is literally adding a class to the elements – so, think about it like this – you’ve set up a class that determines a specific look and feel… but Javascript plays the role in ‘invoking’ that class – creative uses of such a trick like this could yield some very interesting results. Here it is being used to apply hover effects to specific elements, but the application of this technique could be limitless.

Switching Stylesheets

You probably already know that you can use alternate style sheets on a page, but didn’t know how to switch them on the fly – Javascript will help you do this. If you had different colored themes that you wanted your users to be able to customize, you could use Javascript to switch between the two. You could even get creative – create a different theme for different times of day (morning, day, night) and display a stylesheet based on the user’s local time.

Improved Current Field Highlighting

This tutorial from CSS-Tricks shows us a way that we can use Javascript to change the way we are highlighting active fields in forms. So, generally, the cursor blinks in that form field, and some browsers have taken it upon themselves to do something a little different, but this tutorial takes a look at how we can use Javascript and jQuery to improve the highlighting with a little style.

JavaScript Folder Collapser for Dynamic Content

This tutorial will show you how to create a group of collapsible folders using JavaScript and some elements of JQuery. The code will be featured in a way that allows for ease of implementation into a dynamic page — in this situation, the number of folders may be unknown.

JavaScript Progress Bar

Within this tutorial you’ll be able to walk through the configuration and structuring of a javascript based progress bar that can be triggered by a variety of things. For example, you could have it triggered by the progress of a sign-up sheet, or even by the amount of checkboxes that are checked.

Password Verification and Strength Checker

This tutorial will aid you in creating a registration form that includes a password strength checker to tell the user how strong (security wise) their password is. This form will also include several boxes for password use and other vital information.

The End of Our Road – Javascript Frameworks

jQuery is what is called a ‘Framework’. Frameworks contain sets of pre-written controls which make it easier and more efficient for you to develop your scripts. Instead of rewriting the same basic scripts over and over, or managing your own library, javascript frameworks such as jQuery, prototype, script.aculo.us, mootools, and others exist to save you the time. In most cases, these frameworks are extended in ways that add more functionality.

Unfortunately, a complete discussion on Javascript frameworks comparing the functions included in each is a discussion for another time, but its something to know is out there.

Check it out for Yourself: jQuery for Designers

And the Best Way of All to Learn Javascript…

Go do it. No really, go do it.

  

When creating a website, one main goal is to attract visitors. Traffic generation is a necessity for monetary purposes, showing off your work, or just expressing your thoughts. There are many ways to create traffic for your website. Search engines, social bookmarking, and word of mouth are just a few examples. But how do you know whether this traffic is genuine? How do you know if your visitors are coming back for a second time?

These questions have raised the concept of web statistics. Often times, webmasters use certain programs, such as Google Analytics or Awstats, to complete this job for them. These programs obtain a wide variety of information about visitors to a site. They find page views, visits, unique visitors, browsers, IP addresses, and much more. But how exactly is this accomplished? Follow along as we present a tutorial on how to create your own web statistics program using PHP, JavaScript, AJAX, and SQLite.

View Demo of your Own Stats Program

To begin, let’s start with some simple HTML markup that will act as the page we are tracking:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Web Statistics</title>
</head>
<body>

<h2 id="complete"></h2>

</body>
</html>

The h2#complete element will be filled dynamically with JavaScript once the page view has successfully been tracked by our web statistics. To initiate this tracking, we can use jQuery and an AJAX request:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
	// Set the data text
	var dataText = 'page=<?php echo $_SERVER['REQUEST_URI']; ?>&referrer=<?php echo $_SERVER['HTTP_REFERER']; ?>';

	// Create the AJAX request
	$.ajax({
		type: "POST",                    // Using the POST method
		url: "/process.php",             // The file to call
		data: dataText,                  // Our data to pass
		success: function() {            // What to do on success
			$('#complete').html( 'Your page view has been added to the statistics!' );
		}
	});
});
</script> 

Consider the above code step by step:

• When the DOM is ready, we first set our dataText. This text is in query string format and will be sent as data to process.php, which will track this page view.
• We then create an AJAX request that uses the POST method to send form data.
• Our form data (dataText) is then sent to process.php in the root of our server.
• Once this request is completed, the h2#complete element is filled with a successful notice

Our next job is to write process.php. Its main goal is to obtain information about the web statistics and store it in a database. Since our database has not yet been made, we must create a simple file, install.php, which will do this for us:

<?php
	# Open the database
	$handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'stats.db', 0666, $sqliteError ) or die(  $sqliteError  );

	# Set the command to create a table
	$sqlCreateTable = "CREATE TABLE stats(page text UNIQUE, ip text, views UNSIGNED int DEFAULT 0, referrer text DEFAULT '')";

	# Execute it
	sqlite_exec( $handle, $sqlCreateTable );

	# Print that we are done
	echo 'Finished!';
?>

This code is mostly straightforward. It opens up a database (stats.db) in the root of the server and creates a database for it. The string inside $sqlCreateTable is a SQLite command that makes our statistics table. This table contains four colums: Page, IP Address, Views, and Referrer:

• Page is a String that contains the page being viewed as a relative link (i.e. /index.php).
• IP Address is also a String that contains a list of IP Addresses that visited this page. It is in the format of numVisits1(IP Address1) numVisits2(IP Address2) numVisits3(IP Address3) etc. For example, if we obtained 10 visits from 74.35.286.15 and 5 visits from 86.31.23.78 (hypothetical ip addresses), this String would be "10(74.25.286.15) 5(86.31.23.78)".
• Views is an integer containing the number of times the page has been viewed.
• Referrer is a String in the same format as IP Address. It contains all referrers to this page and how many referrals have been made.

And now onto process.php:

# Connect to the database
$handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'/stats.db', 0666, $sqliteError ) or die( $sqliteError );

# Use the same-origin policy to prevent cross-site scripting (XSS) attacks
# Remember to replace http://yourdomain.com/ with your actual domain
if( strpos( $_SERVER['HTTP_REFERER'], 'http://yourdomain.com/' ) !== 0 ) {
     die( "Do not call this script manually or from an external source." );
}

# Obtain the necessary information, strip HTML tags, and escape the string for backup proetection
$page = sqlite_escape_string( strip_tags( $_POST['page'] ) );
$referrer = sqlite_escape_string( strip_tags( $_POST['referrer'] ) );
$ip = sqlite_escape_string( strip_tags( $_SERVER['REMOTE_ADDR'] ) );

# Query the database so we can update old information
$sqlGet = 'SELECT * FROM stats WHERE page = \''.$page.'\'';
$result = sqlite_query( $handle, $sqlGet );

This first snippet connects to our stats database and gets the information we need for the current visit. It also queries the database and obtains any information previously stored. We use this information to create an updated table.

The next job is to find old information:

# Set up a few variables to hold old information
$views = 0;
$ips = '';
$referrers = '';

# Check if old information exists
if( $result && ( $info = sqlite_fetch_array( $result ) ) ) {
	# Get this information
	$views = $info['views'];
	$ips = $info['ip'].' ';
	if( $info['referrer'] )
		$referrers = $info['referrer'].' ';

	# Set a flag to state that old information was found
	$flag = true;
}

The above code finds all previous information in our table. This is vital, as we need to update the number of views (increase it by one), IP addresses, and referrers.

# Create arrays for all referrers and ip addresses
$ref_num = array();
$ip_num = array();

# Find each referrer
$values = split( ' ', $referrers );

# Set a regular expression string to parse the referrer
$regex = '%(\d+)\((.*?)\)%';

# Loop through each referrer
foreach( $values as $value ) {
	# Find the number of referrals and the URL of the referrer
	preg_match( $regex, $value, $matches );

	# If the two exist
	if( $matches[1] && $matches[2] )
		# Set the corresponding value in the array ( referrer link -> number of referrals )
		$ref_num[$matches[2]] = intval( $matches[1] );
}

# If there is a referrer on this visit
if( $referrer )
	# Add it to the array
	$ref_num[$referrer]++;

# Get the IPs
$values = split( ' ', $ips );

# Repeat the same process as above
foreach( $values as $value ) {
	# Find the information
	preg_match( $regex, $value, $matches );

	# Make sure it exists
	if( $matches[1] && $matches[2] )
		# Add it to the array
		$ip_num[$matches[2]] = intval( $matches[1] );
}

# Update the array with the current IP.
$ip_num[$ip]++;

The above two loops are very similar. They take in the information from the database and parse it with regular expressions. Once this information is parsed, it is stored in an array. Each array is then updated with the information from the current visit. This information can then be used to create the final String:

# Reset the $ips string
$ips = '';

# Loop through all the information
foreach( $ip_num as $key => $val ) {
	# Append it to the string (separated by a space)
	$ips .= $val.'('.$key.') ';
}

# Trim the String
$ips = trim( $ips );

# Reset the $referrers string
$referrers = '';

# Loop through all the information
foreach( $ref_num as $key => $val ) {
	# Append it
	$referrers .= $val.'('.$key.') ';
}

# Trim the string
$referrers = trim( $referrers );

The final strings are now created. IPs and Referrers are in the form: “numVisits1(IP/Referrer1) numVisits2(IP/Referrer2) etc.” For example, the following could be the referrer String:

5(http://www.noupe.com) 10(http://css-tricks.com)

It means that 5 referrals came from http://www.noupe.com and 10 came from http://css-tricks.com. This format saves space and is easy to parse as web statistics.

Now for the final few lines:

# Update the number of views
$views++;

# If we did obtain information from the database
# (the database already contains some information about this page)
if( $flag )
	# Update it
	$sqlCmd = 'UPDATE stats SET ip=\''.$ips.'\', views=\''.$views.'\', referrer=\''.$referrers.'\' WHERE page=\''.$page.'\'';

# Otherwise
else
	# Insert a new value into it
	$sqlCmd = 'INSERT INTO stats(page, ip, views, referrer) VALUES (\''.$page.'\', \''.$ips.'\',\''.$views.'\',\''.$referrers.'\')';

# Execute the commands
sqlite_exec( $handle, $sqlCmd );

That’s all there is to it for process.php. As a review, it finds the IP Address and Referrer of the visitor, uses the values to create two Strings, increases the number of views of the page by one, and places all of these values into the database.

There is now only one task left. We have to display the web statistics. Let’s call the following file display.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Web Statistics Display</title>
</head>
<body>

<?php
	# Open up the database
	$handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'/stats.db', 0666, $sqliteError ) or die( $sqliteError );

	# Get all the statistics
	$sqlGet = 'SELECT * FROM stats';
	$result = sqlite_query( $handle, $sqlGet );

	# Create an unordered list
	echo "<ul>\n";

	# If there are results
	if( $result ) {
		$page_views = 0;
		$unique_visitors = 0;

		# Fetch them
		while( ($info = sqlite_fetch_array( $result ) ) ) {
			# Get the page, views, IPs, and referrers
			$page = $info['page'];
			$views = $info['views'];
			$ips = $info['ip'];
			$referrers = $info['referrer'];

			# Print out a list element with the $page/$views information
			if( $views == 1 )
				echo "\t<li>\n\t\t<p>$page was viewed $views time:</p>\n";
			else
				echo "\t<li>\n\t\t<p>$page was viewed $views times:</p>\n";

			# Update the number of page views
			$page_views += $views;

			# Parse the data of IPs and Referrers using process.php's code
			preg_match_all( '%(\d+)\((.*?)\)%', $ips, $matches );

			# Find the size of the data
			$size = count( $matches[1] );

			# Create a sub list
			echo "\t\t<ul>\n";

			# Loop through all the IPs
			for( $i = 0; $i < $size; $i++ ) {
				# Find the number of visits
				$num = $matches[1][$i];

				# Find the IP address
				$ip = $matches[2][$i];

				# Print the info in a list element
				if( $num == 1 )
					echo "\t\t\t<li>$num time by $ip</li>\n";
				else
					echo "\t\t\t<li>$num times by $ip</li>\n";

				# Update the number of unique visitors
				$unique_visitors++;
			}

			# Repeat the whole process for referrers
			preg_match_all( '%(\d+)\((.*?)\)%', $referrers, $matches );
			$size = count( $matches[1] );

			# Loop through each one
			for( $i = 0; $i < $size; $i++ ) {
				$num = $matches[1][$i];
				$referrer = $matches[2][$i];

				# Print out the info
				if( $num == 1 )
					echo "\t\t\t<li>$num referral by $referrer</li>\n";
				else
					echo "\t\t\t<li>$num referrals by $referrer</li>\n";
			}

			# End the sub-list
			echo "\t\t</ul>\n";

			# End the list element
			echo "\t</li>\n";
		}

		echo "\t<li>Total unique visitors: $unique_visitors</li>\n";
		echo "\t<li>Total page views: $page_views</li>\n";
	}

	# End the unordered list
	echo "</ul>\n";

	# Close the database
	sqlite_close($handle);
?>

</body>
</html>

It may seem daunting, but it is very similar to process.php. It parses the page, views, ip addresses, and referrers from the database. It then continues to output these in an unordered list format.

The final output is as follows:

View Demo of your Own Stats Program

Thank you for reading and good luck!

  

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 11 smart javascript techniques you should always have handy when creating your next layout design.

“Page Sliders”, “Hiding Content”, “Image or Content Sliders”, “Animated Slideshows”, “Carousels”, “Tabbed content” as well as “resizable, draggable & slidable” & “lightboxes” modules that you can use for effective presentations of your content (text or images).

1. jQuery pageSlide

jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.

• The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
• Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.

Check OUt the Demo Here

2. Create a simple ul list with a nice slide-out effect for <li> elements

We want to obtain this effect: when an user clicks on a link ("Hide"), the related <li> element disappear with a nice animated slide out effect. A simple way to implement an animated "disappear" effect using MooTools slideOut() for an element of a list when an user clicks on a link contained into a <li> element of that list. This tutorial explains how to implement that using “five” lines of JavaScript code.

First we need to implement a simple list of products with ID="myList" and some <li> elements with a progressive ID: l1, l2, l3, l5, l5 and add a link “Hide”:

<ul id="myList">
<li id="l1">Playstation | <a href="#">Hide</a></li>
<li id="l2">iPod Touch | <a href="#">Hide</a></li>
<li id="l3">XBOX 360 | <a href="#">Hide</a></li>
<li id="l4">Nokia N97| <a href="#">Hide</a></li>
<li id="l5">Dell Inspiron | <a href="#">Hide</a></li>
</ul>

Here is the javascript code to enable slideOut() effect:

<script>
window.addEvent('domready', function() {
/* From the list with ID myList, for each li element of the list...: */
$('myList').getElements('li').each(function(e){
/* ...get the ID of the selected item */
e.getElement('a').addEvent('click', function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});
});
</script>

Check it out here

3. Portfolio Layout Idea Using jQuery

Let’s say you want to create a portfolio layout with different thumbnails of your projects and have a middle panel to show the details and a picture of the selected project. Benjamin Sterling created an interesting portfolio layout and added a nice easing method to the main content panel using easeOutQuad and easeInQuad using jQuery easing plugin.

Check it out here

4. Creating a Slick Auto-Playing Featured Content Slider

Niall Doherty’s Coda Slider inspired lot of designers and got them started quickly designing around it. Chris Coyier created a Slick Auto-Playing Featured Content Slider using Coda Slider plugin pretty much “out of the box” and added the following features to it’s functionality:

• Different types of custom content in the panels. We can already put whatever we want in the panels, but to make it easier on ourselves, there will be a couple of different formats ready to go. The main one being an image the size of the entire panel, but featuring a text-overlay.
• Auto-play. You can still click the thumbnails to jump to any panel, but left onto itself, the slider will slowly cycle through the panels.
• Arrow indicator. To serve as a visual indication of which panel you are currently viewing, a small arrow will display above the thumbnail pointing into the panel.

In essence, to achieve the “auto-play” effect, Chris triggered a click event on the next thumbnail in line every 3 seconds and handled a manual click event for the thumbnails to be fired when the DOM is ready.

Check out the Demo Here

5. Easy Image or Content Slider

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css. The appearance is totally editable with css so all of you afraid of getting their hands dirty with JS code can easily use this.

Content should be wrapped inside a div containing an ordered list where each list item represents one slide. You can add text content or an image inside each list item. Script automatically adds “previous” and “next” buttons just after the content element that calculates the current “position” and makes a one step in requested direction. So, the slider jumps from one slide to another.

Here are some blank, non styled demos. Check out the script in action:

• Default non-styled image slider
• Non-styled vertical image slider
• Non-styled vertical content slider

6. mooSlide

mooSlide is nice replacement of the common “lightbox” module. It has some interesting options to influence the look and behaviour of the sliding box. You can also have more than one box on your page! In addition you can now define, from where the box should fly in: from top or from bottom. Furthermore it allows you to load content from other pages that you define, or to execute a function when the slider disappears.

Check out the demo here

7. jQuery.SerialScroll

jQuery.SerialScroll allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. This plugin can be used for navigation purposes.

Features include:

• You can use horizontal or vertical scroll, also combined.
• You can decide how many to show at a time with CSS.
• The items don’t need to be aligned, you can spread them as much as you want, it will always find them.
• You can use it as text scroller, news ticker or slideshows.

Check out the demo here

8. Agile Carousel

Agile Carousel allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

It can be used with or without jQuery UI for more effects to provides full control.

Options include:

• transition_easing: enter easing type
• transition_duration: enter length in milliseconds for all slide transition
• slide_captions: enter list of slide captions
• number_slides_visible: enter the number of slides that should be visible on the stage
• water_mark: enter text that will appear in the carousel and not be affected by transitions.

Check out the demo here

9. Animated JavaScript Slideshow

This extremely lightweight JavaScript animated slideshow script includes a number of cool features to to style your content: description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. The markup is pretty simple:

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>

Each “li” above represents an image. The “h3” content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. You can set different parameters like image speed, opacity, required color for letterbox on portrait images, set slideshow to auto or not, etc…

Check out the demo here

10. Sexy Lightbox 2

Sexy Lightbox 2 is a sexier and lighter clone of the classic Lightbox. Supports displaying images and HTML elements. Sexy Lightbox is compatible with HTML, means that you can display items, pages, videos, and all you want to display within the lightbox. Large Images automatically adjusted to the size of the browser window. Requires Mootools framework.

Check out the demo here

11. UI.Layout

Was was inspired by the extJS border-layout. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Features include:

• unlimited layout capabilities: up to 5 regions per layout – unlimited regions using nesting
• total CSS control: dozens of auto-generated classes let you recreate ANY UI look
• use any elements: use divs, iframes or any elements you want as ‘panes’
• collapsable: each pane can be closed, using any UI animation you want
• resizable, hidable & slidable

Check out the demos here