1. Site Load Test

This one mainly works like a validator, but tells you more about each error you have. Although it has quite a few errors, 1stwebdesigner.com got a general loading time of 1.88 seconds, which is very good according to the standards, which say that a page should load within a maximum of four seconds.

Site Load Test will not do wonders for you, but will help you get rid of those tiny little errors you didn’t think about. It also helps you find errors regarding uploaded files, websites’ size and total objects to load, not only CSS and JavaScript mistakes you’ve made while coding. Note that this is not an application that will automatically remove the errors – you will have to do it yourself.

2. Packer

If you are a JavaScript developer or you want to use a JavaScript code in your webpage, Packer is what you need. It will not create the code for you, but it will compress it. This tools works very fast and very well. You only need to copy your original code into the top field and then click on “Pack”. Within a few seconds you will get the new code (which basically does the same as the original one), but in a different state. The compressed code will not generate errors and, as you all know, less code is less size and therefore faster loading time.

3. SquishIt 

SquishIt is a GitHub trademark and helps you a lot as well. When you have both CSS and JavaScript in your website (which is pretty much most of the time you code), this tool will “bundle” both of them into one file, making the number of files that need to load smaller. Although this tool might be a bit difficult to use due to the poor interface, once you play with it once or twice you will see it actually can be useful.

SquishIt can help with much more thanks to the Google Group and the discussion forum it features. You can talk about way more than CSS and JavaScript there, ask for advice and opinions and then code properly.

4. Minify 

Minify Logo and Description

This one is a PHP5 application that helps you with your CSS and JavaScript. What is does is that it combines several CSS and JavaScript files removing white space and comments and exports them with gzip encoding and optimal client-side cache headers.

Basically, if you have 5 JavaScript files, they will all become one after you use Minify. The app is easy to use, eliminates HTTP requests and reduces CSS/JavaScript bandwidth by 70%.

The app is integrated in other projects as well. If you run WordPress, there are two plugins which enjoy the same features: WP Minify and W3 Total Cache.

5. JSMin 

JavaScript Minifier works pretty much as Minify, only it does not combine multiple files together. The only thing it does is that it removes the white space and comments from a JavaScript page. The official website of the tool says the app helps reduce the file size by half and encourages a more expressive programming style. JavaScript Minifier does not modify anything else in your code and it will not ruin it, so that the script will run properly.

6. Google Closure Compiler

Google’s tool is another one that basically cleans your code to allow faster loading time. This tool, however, does efficiently correct and remove a wide range of common coding errors in JavaScript.

The Compiler includes a huge JavaScript library, tested on several browsers and computers, a style checker and fixer and a JS optimizer. Google’s tool is very powerful and works perfectly, tidying up each of your JavaScript pages until nothing else can be done to it.

7. YUI Compressor 

YUI Compressor Logo

Although Yahoo! has fallen behind lately, their developer network still does a bit of a good work. YUI Compressor is one of their products which, as the name says, compresses your files fast and safe. YUI works both with CSS and JavaScript and proclaims itself as being better than competitors such as Packer or JSMin (presented above). The goal of the application is to preserve the qualities of the code and to only modify what is not working properly.

With Yahoo’s tool we end the list of CSS/JavaScript compressors which help your page load faster. Most of them are very easy to use and you won’t even have to spend much time optimizing your page, but it is a good idea to do it before uploading the final version of the site. Don’t forget that loading time is very important for both you and the visitors and not being able to hold a high standard might not help you too much. Therefore you should try out each of these tools and see which one of them works better for you.

Further reading

Speed Up Your Page With Google Analytics on WebMonkey

5 Tools to Speed Up your Website on RackAid

Tools to Speed Up Your Site on SEO Gadget

jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This article presents 50 advanced, cutting-edge yet simple jQuery plugins that will enhance your web experience drastically.

1. jbar

jbar is a jQuery plugin that transforms an unordered list <ul> into a toolbar with dropdown menus.

2. e24TabMenu

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.

2.1. RoyalSlider – Touch-Enabled jQuery Image Gallery

RoyalSlider is easy to use jQuery image gallery with animated captions and touch support for mobile devices. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

View Demo

3. Simple jQuery Fluid Thumbnail Menu Bar

The idea of a fluid thumbnail bar is simple: create a list of thumbnails within a space where the overflow can be flipped through page by page.

4. Accordion Multilevel Menu

The plugin has a boolean initialization option accordion. If you set this value to “true” the menu behaves as an accordion menu. The irrelevant menu items are closed while the relevant slides open.

5. DropKick

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making the menu look good.

6. jQuery Resize And Crop

jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting a person to visually resize an image and place a crop. Then it is
possible to use the coordinates data for any purpose.

7. Cloud Zoom

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatibility across browsers.

8. Simple jQuery Image Hover Effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect.

9. Easy Image Zoom

Easy Image Zoom gives you the opportunity to see large details of the product while moving the cursor over a medium sized image.

10. ImageLens

Use this jQuery plug-in to add lens style zooming effect to an image,

11. ImageSelect

ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

12. jQuery Mapz

With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.

13. jQuery Image Gallery

Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.

14. JbhSlider

JbhSlider is a fully customizable slider. You can add/remove navigation or pagination. You can set the effect, the duration and the functions after/before.

15. jQuery.slideBanjo

jQuery.slideBanjo is a plugin, that shows pretty slides on your site. Supports background loading of pictures, simple to customize, full documentation. Compatible with IE7 and higher.

15.1. Estro – jQuery Ken Burns & swipe effect slider

This jQuery plugin uses unobtrusive javascript to transform a block of simple HTML markup into a gorgeous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimized, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

View Demo

16. Slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

17. jShowOff

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more.

18. Tiny Carousel

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

19. gSlider

gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.

20. Craftyslide

Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.

21. JQuery Wysiwym

JQuery-Wysiwym is a wysiwym (What You See Is What You Mean) editor. It is not meant to be used to output HTML, it simply helps with the desired markup syntax. Currently supported are Markdown, MediaWiki, and BBCode.

22. leanModal

A super simple modal window plugin that works with your CSS. Perfect for hidden page content. Uber light at just 780 bytes (minified). Flexible width & height, image free, supports multiple instances on one page. Great for login, sign up & alert panels, etc.

23. jQuery-preloader

This jQuery plugin preloads CSS, JS, HTML and images with visual loader, fast and very small (~2Kb).

24. Zebra_Dialog

Zebra_Dialog is a small (4KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+) and highly configurable dialog box plugin for jQuery, meant to replace JavaScript’s alert and confirmation dialog boxes and built using the jQuery Plugin Boilerplate.

25. Double Vision

A jQuery 1.6.1 plugin used for moving text from input’s to textarea.

26. Textarea Code Editor

This plugin transforms textareas into code editors with the following advantages: indentation with the Tab key, intelligent home key, auto indent on enter.

27. Easy Paginate

This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects.

28. Activity Indicator

Activity Indicator is a resolution independent indicator that works in any browser.

29. jQuery File Upload

jQuery File Upload is a jQuery based lightweight file uploader with multiple file upload and drag&drop support.

30. Color Animation

With jQuery’s animate function, you can animate all kinds of css-properties. What’s really missing from jQuery is animating colors. This plugin will add this feature.

30.1. Fancy Music Player V2.0

Player works like this  - first it detects if Flash Player 9 or higher is installed. If yes a hidden flash movie(swf) will be used, that communicates via javascript with the HTML user interface. If no Flash Player is installed, the new HTML5 audio engine will be used, which is supported by all iToys(iPhone, iPad etc.).

View Demo

31. jQuery Formwizard

The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.

32. jQuery Spinner Control

Converts the text input to a spinner control. This plugin works fine with ASP.net for the post backs.

33. jEscape

This extension captures all the keydown events faster and less time writing code, you’ll profit.

34. jPaginator

A plugin for animated pagination, with auto-acceleration, a slider, and highly customizable.

35. Snippet

Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.

36. HTML5 jQuery Music Player

A HTML5 music player that uses an awesome design created by Orman Clark and jPlayer.

37. jQuery Link Preview

jLinkPreview is a plug-in for jQuery Library which simply allows you to see a link’s preview image before you visit them by just hovering on it. Link preview will appear by your cursor when you hover.

38. My QR Code

This plugin generate QR code for mobile devices using Google Chart API with jQuery. By default, the plugin will generate the QR code for the URL of the page. You can also specify the text, encoding and size of the QR code.

39. jQuery TagBox

This is a jQuery plugin to help add tags like input in your forms.

40. jRumble

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.

41. MobilyMap

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

42. Grid Navigation

jQuery plugin for achieving some neat grid navigation effects.

43. Simple Overlay

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

44. diagonalFade

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away.

45. Smart Spin

Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.

46. jQuery Credit Card Validation

Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.

47. Ajax PayPal Cart

AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.

48. jQuery.folderPreview

jQuery.folderPreview is a jQuery plugin that takes a series of images and positions them so that they appear within a folder graphic. This enhances the attractiveness of a browsing UI system, allowing the user to visualize the contents of the folder.

49. jQuery Lifestream

Show a stream of your online activity with jQuery

50. QuoVolver

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

I’ll be featuring 61 great looking and really unusual navigation menus which are CSS-based design solutions, JavaScript-based menus and Flash-designs.

CSS – Based Navigation Menu

1. Loodo.com

Casino-like game or snakes and ladders with the touch of colorful menu.

2. Change.org

The calmness of the choice of color with the emboss feeling of the menu to reveal the submenus is a great choice for its advocacy change.

3. Acko.net

Steven Wittens gives us another perspective or view of this menu.

4. UXBooth.com

UX Booth uses stylish yet simple menu.

5. MacRabbit.com

MacRabbit uses a mac os or apple concept to its design.

6. Joyent.com

Joyent uses simple, business looking menu that offers their works.

7. Nopoko Graphics

Elegance and simplicity of this portfolio gives you.

8.  Icon Designer.com

Large images-based menu that will attract and will draw users attention. Not the usual menu that you see.

9. Designsensory.com

Drop down navigation that uses two colors that presents the active link to the passive one.

10. Smallstone.com

Small Stone recordings, a U.S. record label, uses a radio-like or  that so-called a the so-called Space Echo Roland SE-201 menu.

11. TNVacation

Feel of country or map-like that will let you travel to the whole website.

12. Clever Twist

Rounded, apple application-like menu that offers application for your iPhones.

13. Clear Left

Clearleft uses a calendar concept that makes a what-to-do stuff on a particular day feel.

14. Tulumarka

Pressed looking  to see the selected menu.

15. Ars Technica

Menu pressed reveals a submenu. Dark yet simple feel.

16. 45royale inc.

Nice hover effects  with this simple and clean menu.

17. CSS Beauty

The size of the letters are so cute and  not usual but that’s what will caught your attention.

18. Design Intellection

A good way to use a block navigation that shows an effective  hover effects.

19. Microformats

Leaf like plus the cool green color that suits into your eyes. From green to black that gives you on what menu you are.

20. ronnypries.de

One of the best concept is to use a floor plan to navigate your users to the entire website is what Ronny Pries did.

21. Jiri Tvrdek

Fruit bearing tree is one of the creative way to use a navigation menu.  It is like your harvesting a fruit and lead you to the taste or the content of the website.

22. Matt Dempsey

Brush strokes with the interchange of the colors over choosing a menu is what  Matt Dempsey did.

23. Cognigen

Presents a pressed and clear view of the navigation.

24. District Solutions

Vertical tab that looks like a folder that really works on this website.  Rarely use but really great to work with.

25. Jeff Sarmiento

Sloping Navigation that creates a creativity and a punk style looking menu that Jeff Sarmiento used.

26. Racket

It is like a hierarchy of menu up to its roots.  One of a kind navigation that added to the creativity of the website.

27. DFW

Icons gives emphasis on the interaction to the menu.

Flash based Navigation Menu

28. Iipvapi

Photo clipping navigation menu with touch of hover color effects used in a Photo Clipping path services.

29. Moodstream | Getty Image

It is designed to squeeze your creative juices by tweaking the mood sliders navigation.

.

30. Not Forgotten – The Movie

Devilish, freaky and rise to the dead theme of the navigations presented into  tarot-like cards.  The card will be put in fire if you clicked on it.

31.Waterlife

The fluid navigation menu that brings you to the motion of a lake.

32. Nick Jones

Nick Jones uses a simple yet dynamic navigation for his portfolio. It’s like pulling things up and down.

33. Marc Ecko

Marc Ecko presents an art gallery navigation that lets visitors to  tour for  art and philosophy.

34. HBO

HBO , a tv-movie network, creates an interactive selection of movies for its navigation.

35. Got Milk?

An interesting navigation in a ribbon with a simple hover effect. When an icon hovered, the content menu is presented.

36. AgencyNet

Stunning and amazing navigation design studio based in New York City, NY and Fort Lauderdale, FL.

37. 2Advanced Studios

Stylish neo ancient navigation design with a background mural that leads us to another world.

38. NickAD

Nick Ad uses a flexible but easy to use navigation. The stars that changes to a navigation when it clicks anywhere in the page.

39. Dave Werner

A creative person uses his own works to lead the users on his portfolio.

40. Section Seven Inc.

Section Seven has a colorful pamphlet like navigation with a sub menu written on it.

41. Cathy Beck

A navigation that open and close like a scroll when choosing a menu.

42. Beside

Beside uses a rainbow navigation that puts your colorful fantasies.

43. Christian Sparrow

A cardboard concept of its portfolio. The navigation hovers a pencil-like drawing.

44. Enila.fr

Small squares that put together that acts as the navigation and collaboration of works.

45. Havaianas

A colorful map that has the touch of the slipper texture that Havaianas proud about.

46. Square Circle

A table filled with stuffs that are related to the menu such as telephone for contact us, magazine for portfolio, newspaper for news and others. Real thing that use for navigation is a great thing.

47. TBWA\HAKUHODO

A great, artistic scenario use for navigation. Every element is a wonderful piece that gives life to the website. Rarely used but magnificent.

JavaScript – Based Navigation Menu

48. Agami Creative

Simple and eye pleasing of this navigation with the touch of  paint colors.

49. Dragon Interactive

It looks like the navigation is made up of Flash but it’s not.  Clean, cool and stylish navigation with a hover effects of colors that made this navigation really pretty.

50. The White House

White House really holds up a lot of information for the public. It is easily manage with this drop down menu to contain all the contents.

51. Eric Johansson

Eric Johansson uses a JavaScript sliding menu to travel on it’s website.

51. Helmy Bern

The navigation layout is in a grunge theme that also has a jQuery drop down effects.

52. Internet Dreams

The creative hover effect is not usual but it gives a distinguish look over what menu users choose in.

53. Panic -Coda

Familiar and popular icons were used to navigate users easily.

54. TapTapTap

Restaurant menu-like navigation is really great. I really love this navigation because of its simplicity yet creative design.

55. Kobe

This navigation uses a scroll to and scroll in plugin to create  an interesting transitions.

56. BlogHelpr

Floater design to use for navigation. It is the creative way to save the person in swimming into the website.

57. EyeDraw

EyeDraw uses an expanding images whenever you hover the mouse over the menu.

58. Andreas Hinkel

Andreas Hinkel uses Polaroid navigation for the animation effect.

59. Museu Gulbenkian

The drag dock  navigation in the bottom is a great way to reveal and hide the menu and submenus.

60. Sapphire Sound

The thumbnail used as a menu that has caption effect, custom scroll bar, and you also can see the fading, sliding animation.

61. Design Slicing

Transition effects is what  I really like on this navigation. The menu are set of questions that when hover are given answers.

These are few navigation menu design that you can work out on your website but be sure that you don’t want to get lost in the design and interactivity aspect of your navigation. Let your users be guided on the navigation you choose to deal with.

Classes

Before we learn how to implement classes into your code, let’s discuss what classes are and why you should bother learning/using them.

As stated in the Java documentation, “A class is the blueprint from which individual objects are created.” Consider an actual blueprint used in the process of making a house. The builders use the blueprint to evaluate what properties the house contains and what functions the house will execute. Classes are a convenient way to represent the properties of objects, be it a house, car, or person. Classes become especially useful when more than one of a given object exists.

As an example, let’s compare two real-life objects without the use of classes. This mirrors the procedural thought process as opposed to the object oriented thought process. We’ll describe a man named Rob and a baby girl named Emillee. We must assume we know nothing about the human body since we have no blueprint(class) to work from.

Rob:

1. Rob has two oval-like structures a few inches apart on the upper portion of his body. These oval like structures have a white background with a brown middle.
2. Rob has two structures that run relatively parallel to the floor that seem to indicate the most vertical portion of the body that’s still part of the body’s base.
3. Rob has two appendages that extend from another two appendages. These seem to be used to grab items. They seem relatively large.
4. Rob measures approximately 6 feet in height.
5. Rob involuntarily intakes oxygen and converts it into Carbon Dioxide.

Emilee:

1. Emillee has two oval-like structures a few inches apart on the upper portion of her body. These oval like structures have a white background with a blue middle.
2. Emillee has two structures that run relatively parallel to the floor that seem to indicate the most vertical portion of the body that’s still part of the body’s base.
3. Emillee has two appendages that extend from another two appendages. These seem to be used to grab items. They seem relatively small.
4. Emillee measures approximately 1.5 feet in height.
5. Emillee involuntarily intakes oxygen and converts it into Carbon Dioxide.

That was a LOT of work to just describe a human’s 1) Eyes, 2) Shoulders, 3) Hands, 4) Height, and 5) Act of Breathing. Notice we had to make almost the exact same observations both times since we had no blueprint to work from. While describing 2 people wasn’t too bad, what if we wanted to describe 100, 1000, a million? There certainly has to be a more efficient way of describing objects that have similar properties: This is where classes shine.

Let’s rethink the previous example using an object oriented mindset. Since we are describing a man and a baby girl, we know they are both humans. So let’s first create a simple blueprint for humans.

Humans:

1. Have two oval-like structures a few inches apart on the upper portion of his body. These oval like structures have a white background with a varying color in the middle. We call them eyes.
2. Have two structures that run relatively parallel to the floor that seem to indicate the most vertical portion of the body that’s still part of the body’s base. We call them shoulders.
3. Have two appendages that extend from another two appendages. These seem to be used to grab items. Their size varies. We call them hands.
4. Vary in height depending on age and other factors. We call this height.
5. Involuntarily intake oxygen and convert it into Carbon Dioxide. We call this breathing.

So we’ve stated that the properties of humans are that they have eyes, shoulders, hands, and a height. We’ve also stated that these properties may vary. Having defined the blueprint of a Human, and having declared that Rob and Emillee are human, we can apply what we already know about humans to Rob and Emillee.

Rob is a Human.

1. Rob has brown eyes
2. Rob has shoulders
3. Rob has large hands
4. Rob is 6 feet tall
5. Rob breathes

Emillee is a Human.

1. Emillee has blue eyes
2. Emillee has shoulders
3. Emillee has small hands
4. Emillee is 1.5 feet tall
5. Emillee breathes

By explicitly stating Rob and Emillee are Human, we take the properties and functions associated with being Human and apply them directly to Rob and Emillee. This lets us avoid redefining all the body parts while also letting us effectively describe the key differences between the two objects.

Here are a few examples of classes and their objects(known as instances of the class) so you understand the relationship between the two.

Class Student

• Properties: grades, age, date of birth, SSID
• Functions: calculate GPA, view absences, update conduct

Class Employee

• Properties: EIN, hourly wage, contact number, insurance
• Functions: set wage, view productivity, pull resume

Class Computer

• Properties: CPU, motherboard, monitor
• Functions: turn on, turn off, restart

So now that we understand the idea behind classes, let’s apply what we know to JavaScript. Unlike languages including PHP and C++, JavaScript does not have the class data type. However, using JavaScripts flexibility, we can easily mimic a class using functions.

Referring to one of our previous examples, let’s use a class to represent students.

When creating a class, there are two things you must do: You must know what properties/functions(also known as methods) the class will have, and you need to initialize the properties with a value.

	function Student(name, gender, age, grade, teacher)
	{
		this.name = name;
		this.gender = gender;
		this.age = age;
		this.grade = grade;
		this.teacher = teacher;
	}

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.age); //Outputs 15

	var susan = new Student("susan", "female", 10, 5, "Gresham");
	alert(susan.gender); //Outputs 'female'

From this example we can see that instances of the class are initiated using the new operator. Properties and methods of the class are accessed using the . (dot) operator. So to get the property age of the instance of the Student class named bob, we simply use bob.age. Similarly, we created an instance of the Student class and assigned that to susan. To get the gender of susan, we simply use susan.gender. The code readability benefits from classes are enormous: You can reason that bob.age is the age of bob without having any programming experience.

However, the previous example contains two detrimental (but easily fixable) flaws.
1) The class properties can be accessed by any statement
2) The arguments must be passed in a certain order

Keeping property values private

Note that in the previous example, we were able to get the value of bob.age by simply calling bob.age. Additionally, we could set bob.age to any value we feel like anywhere in the program.

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.age); //Outputs 15

	bob.age = 9;
	alert(bob.age); //Outputs 9;

Seems harmless, right? Well, consider this example.

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.age); //Outputs 15

	bob.age = -50;
	alert(bob.age); //Outputs -50;

We have age as a negative number: A logical inconsistency. We can prevent issues like this and preserve the integrity of our data by utilizing the concept of private variables. A private variable is a variable that can only be accessed within the class itself. While once again JavaScript does not have a reserve word for making a variable private, JavaScript gives us the tools to create the same effect.

	function Student(name, gender, age, grade, teacher)
	{
		var studentName = name;
		var studentGender = gender;
		var studentGrade = grade;
		var studentTeacher = teacher;
		var studentAge = age;

		this.getAge = function()
		{
			return studentAge;
		};

		this.setAge = function(val)
		{
			studentAge = Math.abs(val); //Keep age positive using absolute value
		};
	}

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.studentAge); //undefined, since age is privately protected in the class definition

	alert(bob.getAge()); //Outputs 15
	bob.setAge(-20);
	alert(bob.getAge()); //Outputs 20

By using variable declarations as opposed to attributing properties directly to the class, we have protected the integrity of our age data. Since JavaScript utilizes function scope, a variable declared within our class will not be made accessible outside of that class unless explicitly returned by a function within the class. The method this.getAge, which returns the student age to the calling environment, is known as an Accessor method. An Accessor method returns the value of a property so that the value can be used outside the class without affecting the value inside the class. Accessor methods are usually preceded with the word “get” by convention. The method this.setAge is known as a Mutation method. Its purpose is to alter the value of a property and preserve its integrity.

So we see the benefits of using Accessor and Mutation methods within a class to preserve the integrity of data. However, creating an Accessor method for each property creates extremely long-winded code.

	function Student(name, gender, age, grade, teacher)
	{
		var studentName = name;
		var studentGender = gender;
		var studentGrade = grade;
		var studentTeacher = teacher;
		var studentAge = age;

		this.getName = function()
		{
			return studentName;
		};

		this.getGender = function()
		{
			return studentGender;
		};

		this.getGrade = function()
		{
			return studentGrade;
		};

		this.getTeacher = function()
		{
			return studentTeacher;
		};

		this.getAge = function()
		{
			return studentAge;
		};

		this.setAge = function(val)
		{
			studentAge = Math.abs(val); //Keep age positive using absolute value
		};
	}

	var bob = new Student("bob", "male", 15, 10, "Marlow");
	alert(bob.studentGender); //undefined, since gender is privately protected in the class definition

	alert(bob.getGender()); //Outputs 'male'

My C++ Professor always said “If you find yourself typing the same code over and over, you’re doing it wrong.” Indeed there is a more efficient way to create Accessor methods for each property. Additionally, this mechanism also eliminates the need to call function arguments in a specific order.

Dynamically Generated Accessor methods

This demonstration is based off John Resig’s Pro JavaScript Techniques book (which I highly encourage you to read. The first 3 chapters alone are worth it).

	function Student( properties )
	{
		var $this = this;  //Store class scope into a variable named $this

		//Iterate through the properties of the object
		for ( var i in properties )
		{

			(function(i)
			{
				// Dynamically create an accessor method
				$this[ "get" + i ] = function()
				{
					return properties[i];
				};
			})(i);
		}
	}

	// Create a new user object instance and pass in an object of
	// properties to seed it with
	var student = new Student(
	{
		Name: "Bob",
		Age: 15,
		Gender: "male"
	});

	alert(student.name); //Undefined due to the property being private

	alert(student.getName()); //Outputs "Bob"
	alert(student.getAge()); //Outputs 15
	alert(student.getGender()); //Outputs "male"

By implementing this technique, not only do we keep our properties private, we avoid the need to specify our arguments in order. The following class instantiations are all equivalent

	var student = new Student(
	{
		Name: "Bob",
		Age: 15,
		Gender: "male"
	});

	var student = new Student(
	{
		Age: 15,
		Name: "Bob",
		Gender: "male"
	});

	var student = new Student(
	{
		Gender: "male",
		Age: 15,
		Name: "Bob"
	});

Inheritance

Recall that throughout this article I’ve used the term “class” extremely loosely. As stated before, JavaScript has no class entity, but the pattern of classes can still be followed. The main difference between JavaScript and other object oriented languages lies in their inheritance models. C++ and Java exhibit Class-based or “Classical” inheritance. JavaScript, on the other hand, exhibits Prototypal Inheritance. In other object oriented languages, class is an actual data type that represents the blueprint for creating objects. In JavaScript, although we can use Functions to simulate an object blueprint, they are just in fact objects themselves. These objects are then used as models (aka prototypes) for other objects.(See Article JavaScript Prototypal Inheritance).

Applying the concept of prototypal inheritance allows us to create “subclasses”, or objects that inherit the properties of another object. This becomes particularly useful when we want to use the methods of another object with some slight modifications.

Consider a class Employee. Let’s say we have two types of employees: wage-based and commission-based. These employee types will have many similar properties. For example, regardless of whether an employee receives income through commission or receives income through wages, an employee will have a name. However, the way the income for a commission-based employee and a wage-based employee is completely different. The following example captures this idea.

	function Worker()
	{
		this.getMethods = function(properties, scope)
		{
			var $this = scope;  //Store class scope into a variable named $this

			//Iterate through the properties of the object
			for ( var i in properties )
			{

				(function(i)
				{
					// Dynamically create an accessor method
					$this[ "get" + i ] = function()
					{
						return properties[i];
					};

				//Dynamically create a mutation method that parses for an integer and
				//Ensures it is positive.
				$this[ "set" + i ] = function(val)
				{
					if(isNaN(val))
					{
						properties[i] = val;
					}
					else
					{
						properties[i] = Math.abs(val);
					}
				};
				})(i);
			}
		};
	}

	//The CommissionWorker "subclass" and WageWorker "subclass"
	//inherit the properties and methods of Worker.
	CommissionWorker.prototype = new Worker();
	WageWorker.prototype = new Worker();

	function CommissionWorker(properties)
	{
		this.getMethods(properties, this);

		//Calculates income
		this.getIncome = function()
		{
			return properties.Sales * properties.Commission;
		}
	}

	//Expects the following properties: wage, hoursPerWeek, weeksPerYear
	function WageWorker(properties)
	{
		this.getMethods(properties, this);

		//Calculates income
		this.getIncome = function()
		{
			return properties.Wage * properties.HoursPerWeek * properties.WeeksPerYear;
		}
	}

	var worker = new WageWorker(
	{
		Name: "Bob",
		Wage: 10,
		HoursPerWeek: 40,
		WeeksPerYear: 48
	});

	alert(worker.wage); //Undefined. wage is a private property.

	worker.setWage(20);
	alert(worker.getName());   //Outputs "Bob"
	alert(worker.getIncome()); //Outputs 38,400 (20*40*48)

	var worker2 = new CommissionWorker(
	{
		Name: "Sue",
		Commission: .2,
		Sales: 40000
	});
	alert(worker2.getName());   //Outputs "Sue"
	alert(worker2.getIncome()); //Outputs 8000 (2% times 40,000)

The most important statements from the previous example are:

CommissionWorker.prototype = new Worker();
WageWorker.prototype = new Worker();

This states that for each instance of a new CommissionWorker or a new WageWorker object, the properties and methods of Worker will be passed down to those new objects. These methods and properties can be overwritten within the “subclass” definition if so desired.

Scope

JavaScript exhibits what is known as function scope. This means variables declared in a function are not initially accessible outside the function from which they originate. However, in blocks (such as coniditonal statements), variable declarations or alterations are made available to the calling environment.

	var car = "Toyota";

	if(car == "Toyota")
	{
		car = "Toyota - We never stop...and you won't either.";
	}

	alert(car); //Ouputs Toyota - We never stop...and you won't either.

	car = "Toyota"; //Reset car back to original value.

	function makeFord(car)
	{
		car = "Ford";
	}

	makeFord(car);
	alert(car); //Outputs "Toyota" because car was altered in the function scope.

However, if you want a function to alter the value, you can pass in an object as an argument and alter a property of the object.

	var car = new Object();
	car.brand = "Toyota"

	function makeFord(car)
	{
		car.brand = "Ford";
	}

	makeFord(car);

	alert(car.brand); //Outputs "Ford"

This is known as passing a value to a function “by reference”. I generally recommend passing by reference only if you are setting up methods within a class and you know what properties the object will contain.

You are now armed with the object oriented basics as applied to JavaScript. Use these principles to simplify your code for projects in the future.

1. jquery Thumbnail Scroller, Demo

2. JCoverflip, Demo

3. COIN SLIDER

4. loopedSlider, Demo

5. Nivo Slider

6. Automatic Image Slider w/ CSS & jQuery, Demo

7. Lof SiderNews, Demo

8. Advanced jQuery background image slideshow, Demo

9. jqFancyTransitions, Demo

10. jQuery Blinds Slideshow using CSS Sprites

11. Multiple Image Cross Fade, Demo

12. BarackSlideshow, Demo

13. Floom: Blinds-effect MooTools slideshow, Demo

14. Slide Thumbs, Demo

15. Animate Panning Slideshow with jQuery, Demo

16. Beautiful jQuery slider, Demo

17. jQuery Multimedia Portfolio, Demo

18. Coda-Slider, Demo

19. Slider Gallery, Demo

20. Ultimate JavaScript Slider and Scroller, Demo

21. Easy Slider, Demo

22. Pikachoose, Demo

23. Animated JavaScript Slideshow, Demo

24. Agile Carousel, Demo

25. noobSlide

26. SAG Content Scroller

27. s3Slider, Demo

28. Galleria, Demo

29. InnerFade

30. Content Slider with jQuery UI, Demo

31. GalleryView, Demo

32. SlideItMoo, Demo

33. jQuery Scrollable, Demo

34. Ultimate JavaScript Scroller and Slider, Demo

35. Moving Boxes, Demo

36. jCarousel, Demo

37. Slick Auto-Playing Featured Content Slider, Demo

38. YUI Carousel component, Demo

39. AnythingSlider, Demo

40. Start/Stop Slider, Demo

41. SmoothGallery

42. Slideshow 2

43. iTunes-esque slider with jQuery, Demo

44. Slick and Accessible Slideshow Using jQuery, Demo

45. A Beautiful Apple-style Slideshow Gallery, Demo

46. A Slick Content Slider, Demo

Let us know if we have missed some thing awesome and we will be happy to update the article.

What google maps features you’ll learn?

• Adding a map to your site
• Adding controls for the map and settings the options for the controls
• Responding to events
• Adding markers, settings options for markers and dynamically changing marker settings
• Geocoding a location
• Creating tabbed infowindows (using jquery, jquery ui and some sample code from google code)

Prerequisites

The application is built using html, php and javascript and also saves the locations in a mysql database. It would be best if you had some basic knowledge of these.

What are we going to build?

We’re going to build an interactive travel map. Everyone will be able to see the locations on the map and also add new ones easily. We’ll save some info about each location (coordinates, address, a description, a photo and data about the person who added the location). Users will be able to add locations by clicking on the map to find out the coordinates and address and by filling in the rest of the info. The users will also be able to view all the locations from the database. For viewing them easier, we’ll add a location list the user can browse and we will highlight a location on the map when the user goes with the mouse pointer over the location name.

You can view the app here! And also download the source code from here.

Creating the database table

First we have to create a table in our database to save the data about the locations on the map. We’ll save the following data about each location:

• A name
• A description
• A photo
• Coordinates: latitude and longitude
• Address
• Info about the user who added the location: name and location

Here’s how the code for creating the table looks like:

CREATE TABLE IF NOT EXISTS `locations` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`description` text NOT NULL,
`photo` text NOT NULL,
`latitude` double NOT NULL,
`longitude` double NOT NULL,
`address` text NOT NULL,
`user_name` text NOT NULL,
`user_location` text NOT NULL,
PRIMARY KEY (`id`));

Creating the layout for our app

We’ll use a simple layout. We’ll show a title and some info about our app at the top of the page. Below that we’ll add three columns, one for adding locations (with a form for adding new locations), one for the map (a div called ‘map_canvas’) and one for the locations list.

Since the code is pretty long I’ve decided not to post it here, but you can see it in the source code of the app.

Connecting to the database and getting the info about the locations

To get the data from the database we’ll first have to connect to it. We’ll create a small php script for this and save it in the ‘connect.php’ file. The script looks like this:

$server = "WRITE_SERVER_NAME_HERE";
$username = "WRITE_USERNAME_HERE";
$password = "WRITE_PASSWORD_HERE";
$database = "WRITE_DATABASE_NAME_HERE";
$connId = mysql_connect($server,$username,$password) or die("Cannot connect to server");
$selectDb = mysql_select_db($database,$connId) or die("Cannot connect to database");

Don’t forget to fill in your data!

We’ll include this script in our main file and the database connection is done! We’ll add the following lines at the beginning of our main file:

<?php
include "connect.php";
?>

Now we need to find out the number of locations and the information about all the locations in the database.

Here’s how:

$locations = mysql_query("select * from locations");
$nr_locations = mysql_num_rows($locations);

We have done a simple query to the database and retrieved the info about the locations in the $locations variable. We have also found out the total number of saved locations. We will print this in the text we’ll show on top of our page:

Click on the map to add a new location! Total locations added: <?php echo $nr_locations;?>

We also have to print the location list, like this:

<?php
// find locations from db
// save data for locations
$lats = "";          // string with latitude values
$lngs = "";          // string with longitude values
$addresses = "";     // string with address values
$names = "";         // string with names
$descrs = "";        // string with descriptions
$photos = "";        // string with photo names
$user_names = "";    // string with user names
$user_locs = "";     // string with user locations
$i=0;
// take the locations from the db one by one
while ($locat = mysql_fetch_array($locations))
{
  // add location data to info strings
  $lats .= $locat['latitude'].";;";
  $lngs .= $locat['longitude'].";;";
  $addresses .= $locat['address'].";;";
  $names .= $locat['name'].";;";
  $descrs .= $locat['description'].";;";
  $photos .= $locat['photo'].";;";
  $user_names .= $locat['user_name'].";;";
  $user_locs .= $locat['user_location'].";;";
  // show the location name in the right of the map with link that calls the highlightMarker function
?>
<a onmouseover="highlightMarker(<?php echo $i;?>)"><?php echo $locat['name'];?></a> <br/>
<?php
  $i++;
}
// hidden inputs for saving the info for all the locations in the db
?>
<input type="hidden" value="<?php echo $lats;?>" id="lats" name="lats"/>
<input type="hidden" value="<?php echo $lngs;?>" id="lngs" name="lngs"/>
<input type="hidden" value="<?php echo $addresses;?>" id="addresses" name="addresses"/>
<input type="hidden" value="<?php echo $names;?>" id="names" name="names"/>
<input type="hidden" value="<?php echo $descrs;?>" id="descrs" name="descrs"/>
<input type="hidden" value="<?php echo $photos;?>" id="photos" name="photos"/>
<input type="hidden" value="<?php echo $user_names;?>" id="user_names" name="user_names"/>
<input type="hidden" value="<?php echo $user_locs;?>" id="user_locs" name="user_locs"/>

We have shown the location names as links. When the user goes with the mouse over the links, the highlightMarker JavaScript function is called. We’ll take a look at it a bit later.

We have also saved the information about the locations in hidden input fields. We will use the info from the hidden fields to show the locations on the map.

Showing the map

To add the map we will first have to include the google maps api, like so:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Now, we’ll define a javascript function called initialize to show the map in the div created for it. We will call this function after the page is loaded.

Here’s how to call the function when the page loads:

<body onload="initialize();">

And here’s the function code:

<script>
var geocoder;
var map;
// initializing the map
function initialize()
{
  // define map center
  var latlng = new google.maps.LatLng(57.279043,29.355469);
  // define map options
  var myOptions =
  {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    scaleControl: true,
    navigationControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };
  // initialize map
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // add event listener for when a user clicks on the map
  google.maps.event.addListener(map, 'click', function(event) {
    findAddress(event.latLng);
  });
}
</script>

To create a map, we first have to define the options for showing the map. We have set the zoom level, the center of the map. Next, we have set the controls to show on the map: scale control, navigation and map type and we have defined some options for it. We have chosen to show a small navigation control and to show the map type control as a drop down menu. You can view all the options available for controls in the API reference.

Then, we initialize the map object and add an event for when the user clicks on the map. When this event is fired, the findAddress function will be called. The function takes as an argument the coordinates of the point where the user clicked on the map.

// finds the address for the given location
function findAddress(loc)
{
  geocoder = new google.maps.Geocoder();
  if (geocoder)
  {
  geocoder.geocode({'latLng': loc}, function(results, status)
  {
    if (status == google.maps.GeocoderStatus.OK)
    {
      if (results[0])
      {
        address = results[0].formatted_address;
        // fill in the results in the form
        document.getElementById('lat').value = loc.lat();
        document.getElementById('long').value = loc.lng();
        document.getElementById('address').value = address;
      }
  }
  else
  {
    alert("Geocoder failed due to: " + status);
  }
  });
  }
}

This function uses the geocoding service from google maps to find the address corresponding to the coordinates where the user clicked on the map. When the function get the results from google, it shows the results in our form:

// fill in the results in the form
document.getElementById('lat').value = loc.lat();
document.getElementById('long').value = loc.lng();
document.getElementById('address').value = address;

The user will just have to fill in the rest of the data to add a new location. I’ve not included here the php code to add the location to the database. You can see that in the source code!

Showing the markers

We will also have to show the locations on the map when it loads. We will call one more function when the page loads:

<body onload="initialize(); addMarkers()">

Let’s see how the function looks like:

// initialize the array of markers
var markers = new Array();
// the function that adds the markers to the map
function addMarkers()
{
  // get the values for the markers from the hidden elements in the form
  var lats = document.getElementById('lats').value;
  var lngs = document.getElementById('lngs').value;
  var addresses = document.getElementById('addresses').value;
  var names = document.getElementById('names').value;
  var descrs = document.getElementById('descrs').value;
  var photos = document.getElementById('photos').value;
  var user_names = document.getElementById('user_names').value;
  var user_locs = document.getElementById('user_locs').value;
  var las = lats.split(";;")
  var lgs = lngs.split(";;")
  var ads = addresses.split(";;")
  var nms = names.split(";;")
  var dss = descrs.split(";;")
  var phs = photos.split(";;")
  var usrn = user_names.split(";;")
  var usrl = user_locs.split(";;")
  // for every location, create a new marker and infowindow for it
  for (i=0; i<las.length; i++)
  {
  if (las[i] != "")
  {
    // add marker
    var loc = new google.maps.LatLng(las[i],lgs[i]);
    var marker = new google.maps.Marker({
      position: loc,
      map: window.map,
      title: nms[i]
    });
    markers[i] = marker;
    var contentString = [
      '<div>',
      '<ul>',
      '<li><a href="#tab-1"><span>photo</span></a></li>',
      '<li><a href="#tab-2"><span>description</span></a></li>',
      '<li><a href="#tab-3"><span>location</span></a></li>',
      '</ul>',
      '<div>',
      '<p><h1>'+nms[i]+'</h1></p>',
      '<p><img src="./photos/'+phs[i]+'"/></p>'+
      '</div>',
      '<div>',
      '<p><h1>'+nms[i]+'</h1></p>',
      '<p>Added by: '+usrn[i]+' from '+usrl[i]+'</p>'+
      '<p>'+dss[i]+'</p>'+
      '</div>',
      '<div>',
      '<p><h1>'+nms[i]+'</h1></p>',
      '<p>Address: '+ads[i]+'</p>'+
      '<p>Location: '+loc+'</p>'+
      '</div>',
      '</div>'
      ].join('');
    var infowindow = new google.maps.InfoWindow;
    bindInfoWindow(marker, window.map, infowindow, contentString);
  }
  }
}
// make conection between infowindow and marker (the infowindow shows up when the user goes with the mouse over the marker)
function bindInfoWindow(marker, map, infoWindow, contentString)
{
  google.maps.event.addListener(marker, 'mouseover', function() {
    map.setCenter(marker.getPosition());
    infoWindow.setContent(contentString);
    infoWindow.open(map, marker);
    $("#tabs").tabs();
  });
}

We will also save the markers in an array.

We will take the information about the locations from the hidden input fields we have created earlier. We will create a new marker for each of the locations. The title of the marker will be the location name. We’ll also create some infowindows to show when the user goes with the mouse over the markers. As you can see, we have used another function to bind each marker to its infowindow. We’ve also centered the map on the marker when the user goes with the mouse over it.

To show the information about the markers in the infowindow nicely, I have decided to use some sample code I found here. It uses jquery and jqueryui. We will also have to include these for the script to work:

<script src="jquery-1.4.2.min.js"></script>
<script src="jquery-ui-1.8rc3.custom.min.js"></script>
<link href="jquery-ui-1.8rc3.custom.css" rel="stylesheet" />

And we’re almost done!

All there’s left to do now is the highlightMarker function, the one called when the users goes with the mouse pointer over a location name in the location list. Let’s take a look at the function:

// highlighting a marker
// make the marker show on top of the others
// change the selected markers icon
function highlightMarker(index)
{
  // change zindex and icon
  for (i=0; i<markers.length; i++)
  {
    if (i == index)
    {
      markers[i].setZIndex(10);
      markers[i].setIcon('http://www.google.com/mapfiles/arrow.png');
    }
    else
    {
      markers[i].setZIndex(2);
      markers[i].setIcon('http://www.google.com/mapfiles/marker.png');
    }
  }
}

The function takes as an argument the index of the marker in the markers array we have created.  The highlightMarker function will make the selected marker show up on top of the other markers and change its icon. To make the marker on top of the others, we have to change the zIndex value of the marker.  The marker with the biggest value will show on top. We have set the selected markers value to 10 and the values of the rest of them to 2 (using the setZIndex function). We have also changed the icon of the marker with the setIcon function.

You might have noticed I also added a small javascript function to check if the user filled in all the information from the add form. The function is called when the form is submitted. It just checks the values filled in the form and if one of them is missing, it will show and error message and prevent the form from submitting.

And that’s it! We now have an interactive travel map!

What are we going to build?

We already have a distance finder, an app the uses the google maps api to find the distance and route between two locations. The results of the search can be shared on twitter. In this tutorial, I’ll show you how to share your results on Facebook!

You can check out the demo here, and also download the source code.

Prerequisites

To be able to use the Facebook JavaScript SDK, we will need an application ID. To get one, we have to register a new app. We can do this here. We will need to fill in the following info correctly to be able to use our new app:

• in the ‘website’ tab, at ‘site url’ we must write the url where the app will be stored
• in the ‘facebook integration’ tab, we must fill in ‘Canvas URL’, also our app’s url

A Facebook page will be generated for our app, here it is. We can personalize that by adding a description, a photo, etc.

When a user will post on his wall from an app, Facebook will write the name of the app which was used to post that message. When someone clicks on that link, they will be sent to the app’s page.

Our app’s page will also have a ‘Like’ button, if people click it, we will know who liked our app. I will also show you how to add a similar like button on the site, a button that will be connected to our app’s Facebook page.

Changes to the previous version of our app

In this tutorial I will only explain the Facebook related changes we made to our app. If you have questions regarding the rest of the code, check out the previous tutorials or drop me a message.

Including the script

To use the JavaScript Facebook SDK, we will first have to load the SDK in our site. We will do this asynchronously so it does not block loading other elements of our site. We have to add the following code after the tag:

<div id="fb-root"></div>
<script type="text/<span class="><!--mce:0--></script>
window.fbAsyncInit = function() {
   FB.init({appId: 'ADD_APP_ID_HERE', status: true, cookie: true, xfbml: true});
};
(function() {
   var e = document.createElement('script');
   e.type = 'text/javascript';
   e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
   e.async = true;
   document.getElementById('fb-root').appendChild(e);
}());
</script>

Don’t forget to fill in the API key!

What are we going to do with the script?

We are going to give our users to possibility to login to Facebook directly from our app and post their search results there.

We will first add a Facebook login button. Here’s the code from Facebook to add such a button:

<fb:login-button autologoutlink='true'  perms='email,user_birthday,status_update,publish_stream'></fb:login-button>

We will then have to register the login and logout events and also add a function to check if the user is logged in (when someone visits our site). We will add the following lines to the fbAsyncInit function:

FB.Event.subscribe('auth.login', function(response) {
   login();
});
FB.Event.subscribe('auth.logout', function(response) {
   logout();
});
FB.getLoginStatus(function(response) {
   if (response.session) {
      greet();
   }
});

We have added an event for when a user logs in the Facebook from our app, when they do, the login() function will be called.

When the user logs out, we’ll call the logout() function.

We’ve also added a function for checking the user status: getLoginStatus(). This will be called when the SDK is loaded, to check if the user is already logged in their Facebook account. The text on the Facebook button we added will change from “Login” to “Facebook logout” according to the user’s status. The greet() function will be called when the user is already logged in. Let’s see how the login (), logout() and greet() functions look like:

function login(){
   FB.api('/me', function(response) {
      alert('You have successfully logged in, '+response.name+"!");
   });
}
function logout(){
   alert('You have successfully logged out!');
}
function greet(){
   FB.api('/me', function(response) {
      alert('Welcome, '+response.name+"!");
   });
}

The login function saves the user’s name from the response it got from facebook and displays a message on the screen. The logout and greet button are also just used to show messages on the screen.

After adding these, our user will be able to log in to their facebook account directly from our app! If the user is logged in their facebook account when they visit our app, they will be greeted.

Now let’s see how to help them share their search results!

Adding the share box

We will add a comment box similar to the one added for twitter, next to that one.

In the continueShowRoute() function we will add some more code, to also add a facebook comment box to our ‘share’ div:

var twitter = "<div class='comments' style='display: inline-block;'></div>";
var facebook = "";
document.getElementById("share").innerHTML = twitter+" "+facebook;

As you remember, we used the share_twitter() function to create the link to share and show the comment box with the message. We will be adding there the code to also show the facebook box.

var code = "<span style="font-size: large;">Share with your facebook friends!</span>";
code += "

<input id="status" size="60" type="text" value=" My search on <span class=&quot;hiddenSpellError&quot; pre=&quot;on &quot;>distancefinder</span>: &quot;+response+&quot;" />";
code += "<br/><a href='#' onclick='setStatus(); return false;'>Share!</a>";
document.getElementById('facebook').innerHTML = code;

The facebook box will have an input field with the text and link to be shared and a ‘Share!’ link. As you can see, when the users click on the ‘Share!’ link, the setStatus() function will be called. Let’s see what it does:

function setStatus(){
   // check if user is logged in:
   FB.getLoginStatus(function(response) {
      if (response.session) {
         new_status = document.getElementById('status').value;
         FB.api(
         {
            method: 'status.set',
            status: new_status
         },
         function(response) {
            if (response == 0){
               alert('Your facebook status was not updated.');
            }
            else{
               alert('Your facebook status was updated');
            }
         }
     );
     } else {
        alert('please log in first :)');
     }
   });
}

It first checks if the user is logged in. For this, it uses the getLoginStatus() function from the javascript SDK. If the user is not logged in, we’ll show a message informing them that they must login in order to share the search results.

If the user is logged in, we get the message to share from the input field called ‘status’, and use the status.set method from the SDK to set the user’s status to the new value. After setting the status, we will show a message to the user.

And that’s it! Our users can now share their search results on facebook!

Adding the ‘Like’ box

You might have noticed there’s a like box in our app, below the map. It shows the users that have liked our facebook app. To add one of those, all you have to do is go to the app profile page, at the “get started” tab. There you will find a link to create a like box. You can choose some options for your box and facebook will generate the code for you. The code for the box from our app looks like this:

<fb:like-box profile_id="APP_ID_IS_HERE" stream="false" header="false"></fb:like-box>

It really simple, isn’t it?

I hope you enjoyed this tutorial and don’t hesitate to ask if you have any questions.

Warning

This might not work well with internet explorer. I’ve tested with chrome, firefox and opera and it works great on those!

Games

JavaScript is proving itself as an extremely powerful language with browser games, developers are able to make games using JavaScript that are on par with flash games.

Quake II GWT Port

HTML5 Chess Game

Akihabara CapMan

Akiba Hero

Minesweeper

User Interface

UI is probably what JavaScript is best known for, whether is adding Animation to a site, or Form Validation

Gmail

Everytime you check your inbox using the refresh button, you’re saving time not needing to fully reload the whole site. This is thanks to AJAX, which JavaScript plays a big part in.

Google Homepage

When Google’s homepage is first loaded, a clean minimalist design is loaded, showing nothing but the Google logo, and the search box. By using JavaScript Google has cleaned up their homepage even more than before. The Gmail links etc are displayed with a movement of the mouse.

Sexy sliding JavaScript side bar menu using mootools

Sliding Boxes and Captions with jQuery

Fancy Thumbnail Hover Effect

Swfir

swfIR (swf Image Replacement) uses a combination of JavaScript and Flash to apply an assortment of visual effects to any or all images on your website.

PlotKit – JavaScript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for JavaScript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page.

Form Validation

Login for Digg.com

Even as I uploaded the above image it was a pop up using JavaScript that the media upload was in! JavaScript was also used to dull away the rest of the Digg site, increasing the focus on the Login box.

Tracking

Google Analytics

Many of us more than likely use Google Analytics to keep tabs on our sites traffic, it uses JavaScript on your site to track your sites performance.

Facebook Social Plugins

Facebook’s new API allows web masters to check if visitors to their sites are logged into Facebook, and if they are to place more emphasis on their Facebook integration.

SocialHistory.js

By using the a:visited css bug in browsers Social History can check if your visitors have been to a certain website, Reddit for example, it can then show a share on Reddit link depending on the result. There is no real need to include 20 different sharing link now!

User Scripts

User scripts are simple JavaScript programmes that can be installed to your browser using an add-on.

For FireFox use:

for Chrome:

Internet Explorer:

Safari:

Minimalist Facebook

Removes the righthand side sidebar on Facebook, really de-cluttering the site.

Google Calendar Dynamic Icon

Changes the favicon on Google calendar to display the days date

Keep Tube: Download Youtube Videos (HD 1080p & 720p)

Adds the ability to download YouTube videos directly on YouTube.

Gmail Favicon Alerts 3

Changes Gmails favicon to alert you of new mail

@troynt’s Twitter Script

Firefox add ons

Better Gmail 2

Bookmarklets

Bookmarklets are tiny JavaScript programmes that are contained in a bookmark in your browser. They’re javascript: urls which you can drag to your bookmark toolbar, just like a normal bookmark. Though so small, and easy to install (you only need to drag them to your toolbar to install them)

Quix by Yoast

An introduction to Quix from Joost de Valk on Vimeo.

Spriteme

Sites that include several images in the design should consider using css sprites. Making sprites manually can be time-consuming, sprite me is an extremely useful bookmarklet that will add all selected images on any given site, and generate the required sprite and css.

After the deadline

Can add the after the deadline spell check to any page online, with just one click!

Evernote Web Clipper

This bookmarklet is extremely useful, and makes Evernote even quicker and easier to use.

Rollyo RollBar

With one click it adds a search box for any site, handy when you’re looking for a post on a site that you just cant seem to find again.

Readability

Readability is a great service that removes all the clutter for a website, leaving the article formatted in such a way that its allot easier to read.

As you can see the uses for JavaScript can greatly vary. Adding JavaScript to your list of known languages could greatly improve the quality and functionality of any site you work on. Something I am now learning myself after seeing these different examples.

Keep your code at minimum

Don’t rely on javascript. Don’t duplicate your scripts. Treat it like a candy-tool to make things more pretty. Don’t bloat your site with s**t-loads of javascript. Use it only when necessary. Only when it really improves user experience.

Minimize DOM access

Accessing DOM elements with JavaScript is easy, code is more readable, but it’s slow. Here are some tips: Limit your layout fixing with javascript, cache references to accessed elements. Sometimes when your site is depending so much on DOM modifications you should consider limiting your markup. It’s a good reason to switch to HTML5 and leave those old XHTML, HTML4 behind. You can check the number of your DOM elements by typing in Firebug’s console: document.getElementsByTagName('*').length

Compress your code

The most efficient way to serve compressed JavaScript is to first run your code through a JavaScript compressor that shrinks variable and argument names, and then serve the resulting code using gzip compression.

Well, I don’t compress my main.js, but check if you have any jQuery plugins that are not compressed, do it (remember to keep author’s notes). Below I listed some options for compression.

• YUI Compressor (my favorite, used by jQuery team), beginners guide, second guide and official site
• Dean Edwards Packer
• JSMin

GZip Compression: Idea behind this is to reduce time of transferring data between browser and server. When it’s done you get your file with Accept-Encoding: gzip,deflate header. It has some disadvantages though. It takes: CPU on both server-side and client side (to compress and uncompress) and disc space.

Avoid eval(): While sometimes it may bring some time efficiency, it’s definitely wrong practice. It makes your code look more dirty and it crashes out most of the compressors.

Tool to speed up javascript loading – Lab.js

There are many awesome tools that could speed up your javascript loading time. One is worth mentioning — Lab.js.

With LAB.js (Loading And Blocking JavaScript) you can load your javascript files in parallel, speeding up the total loading process. What is more you can also set up certain order for scripts to be loaded, so no dependencies are broken. Also, the developer declares a 2x speed improvement on his site.

Using proper CDN

Many webpages now use CDN (Content delivery network). It improves your caching, because everybody can use it. It can also save you some bandwidth. You can easy ping or firebug those servers to check from where you get data faster. Choose CDN by matching your readers localization. Remember to use public repositories when it’s possible.

Some CDN options for jQuery:

• http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js – Google Ajax, information about more libraries
• http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js – Microsoft’s CDN
• http://code.jquery.com/jquery-1.4.2.min.js – Edgecast (mt)

Load your javascript at the end of page

Very good practice if you care about user and him/her not leaving your page because of slow internet connection. Usability and user at first, javascript at the end. This may be painful, but you should be prepared for users with disabled javascript. You may put some javascript to be loaded in head section, but only if it’s loading asynchronously.

Load tracking asynchronously

This one is very important. Most of us are using Google Analytics for statistics. It’s good. Now look where you put your tracking code. Is it in head section? Is it using document.write? Then you should blame yourself for not using asynchronous tracking code for Google Analytics.

This is what asynchronous tracking code for Google Analytics looks like. We must acknowledge that it uses DOM instead of document.write, which may be better for you. It detects some of the events before page load which is very important. Now think of all the users closing your page before it even loaded. The cure of missing page views has been found.

	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();

Don’t using GA? It’s not a problem, most of today’s analytics providers will allow you to use asynchronous tracking.

Ajax Optimization

Ajax request have great impact on your site’s performance. Below I pointed some tips about ajax optimization.

Cache your ajax

Look at your code. Is your ajax cacheable? Well, it depends on data, but mostly your ajax requests should be cacheable. In jQuery your requests are cached by default, not including script and jsonp dataType.

Use GET for Ajax Requests

POST type requests takes two TCP packets to send (headers sent first, data next). GET type request takes only one packet to send (which may depend on your amount of cookies). So while your URL length is less than 2K and you want to request some data use GET.

Use ySlow

It’s both simple and extremely powerful when it comes to performance. It grades your website and shows you what you need to correct, what should be taken care of.

Bonus: Pack your javascript into PNG File

Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request.

I have recently found this. What is basically does it packs up your javascript/css data into PNG file. After that you can unpack it by using the canvas API’s getImageData(). What is more it’s very efficient. You can gain about 35% compression without minifying your data. Lossless compression! I must point out that for larger scripts you can feel “some” load time while image is pointed to canvas and pixels are read.

For more information about this one check out this article from 2008.

Final Thoughts

Hope you guys liked this article. If yes, remember to share it and to say hello to me on twitter. Stay in tune for some further posts about serious performance optimization.

What are we going to build?

The distance finder we created using the previous tutorials uses the google maps api to let you find the distance and route between two locations. In this tutorial, I’ll show you how to share your search results with your twitter followers. I’ll also show you how to add hovercards and linkify usernames.

You can view the demo here. And also download the source code.

Prerequisites

The first thing we need to do in order to use @Anywhere is to registered a new twitter application. We can do this here. Once we fill in that form, we will be given an APIkey to use in the app.

Next, we’ll have to include the @Anywhere script. We’ll add the following code to your <head>section:

<script src="http://platform.twitter.com/anywhere.js?id=ADD_YOUR_API_KEY_HERE&v=1"></script>

Don’t forget to fill in the api key!

As some of the options from @Anywhere require jquery, we will have to include that too:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>

Adding a comment box

Let’s see what we need to add to show a small comment box to help us share the search results with our friends.

We’ll have to add another div to the layout, where to show the comment box with the text to share with our friends.

<center><div style="width:100%; height:13%"></div></center>

In the javascript function that shows the route (called continueShowRoute) we will have to add some code to show the comment box.

//we have to create a div where @Anywhere will place the comment box; the div will be created inside the share div
var twitter = "<div class='comments'></div>";
document.getElementById("share").innerHTML = twitter;
// we’ll call the share_twitter function with the two addresses as parameters.
share_twitter(address1, address2);

The share_twitter function is used to create the link to share with our friends and show the comment box.

The code which uses @Anywhere to show the comment box is pretty simple. It looks like this:

twttr.anywhere(function(twitter) {
   twitter(".comments").tweetBox({
      label: 'Share with your twitter friends!',
      defaultContent: 'My search on distancefinder: '+url,
      height: 30
   });
});

It calls the anywhere function for the twttr object and passes the tweetBox function as a parameter.  The comment box will be shown in the div with the id given as parameter (“.comments”). We can set the following options for the comment box:

• Label: the text to be shown above the box
• DefaultContent: the content of the box
• Height, width: the boxes dimensions
• Counter: whether or not to show the counter for remaining characters
• OnTweet: a function to be called when the tweet button is pressed.

We will also have to share the link to the current page. We’ll also have to add the two address values to the url to be able to share a search result. This way, when the friend clicks on our link, they will be redirected to the application page with the addresses set and see our results. We will use PHP Get to pass the two addresses.

As the url might get too long for a tweet, we’ll have to shorten it. For this we can use tinyurl to obtain a shorter url address. To do this, we have to make a request to:

<a href="http://tinyurl.com/api-create.php?url=THE_LONG_URL">http://tinyurl.com/api-create.php?url=THE_LONG_URL</a>

We’ll make a php script that receives an url address, sends a request to tinyurl.com and returns the result.  We’ll store it in the file called getShortURL.php. The script looks like this:

<?php
$url = $_GET['url'];
echo file_get_contents("http://tinyurl.com/api-create.php?url=" . urlencode($url));
?>

We’ll have to call this script using ajax from our share_twitter function and, when we get the result from the script, show the comment box from @Anywhere.

Here’s how the code for this looks like:

var xmlhttp;
function share_twitter(a1, a2)
{
  var my_url = location.href;
  if (my_url.indexOf('?a1=') != -1)
  {
    my_url = my_url.substr(0, my_url.indexOf("?"));
  }
  my_url += "?a1="+a1+"&a2="+a2;

  xmlhttp=GetXmlHttpObject();
  if (xmlhttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }
  var url="getShortURL.php";
  url=url+"?url="+encodeURIComponent(my_url);

  xmlhttp.onreadystatechange=stateChanged;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
}

function stateChanged()
{
  if (xmlhttp.readyState==4)
  {
    twttr.anywhere(function(twitter) {
      twitter(".comments").tweetBox({
         label: 'Share with your twitter friends!',
         defaultContent: 'My search on distancefinder: '+xmlhttp.responseText,
         height: 30
      });
    });
  }
}

Here’s what the share_twitter function does. It first get the url of the current page:

var my_url = location.href;

If there are already some variables set in PHP GET it erases them and adds the new values (a1 and a2, the functions parameters)

if (my_url.indexOf('?a1=') != -1)
{
  my_url = my_url.substr(0, my_url.indexOf("?"));
}
my_url += "?a1="+a1+"&a2="+a2;

The rest of the code is a bit more complicated (also, I’ve not shown here the GetXmlHttpObject function; you can see it in the source code), but you don’t have to worry if you don’t get it! All you need to do is that it is used to make the request to the getShortURL.php script and receive the result. When it gets the result (if (xmlhttp.readyState==4)) it calls the @anywhere code to show the comment box and sets the url value to the short url it received.

We will also have to add a few lines of code to our app, to be able to load our friends search results. As I said, we have sent the a1 and a2 parameters (the two addresses) through GET. We will have to add a script to check if the variables are set and if they are, to show the correct map.

We will add this php code before the </body> tag:

<?php
if (isset($_GET['a1']) && isset($_GET['a2']))
{
   echo "<script>start('".$_GET['a1']."', '".$_GET['a2']."');</script>";
}
?>

As you can see, the script will call the start function if the two parameters are set. Let’s see how the start function looks like:

function start(a1, a2)
{
   document.getElementById("address1").value = a1;
   document.getElementById("address2").value = a2;
   initialize();
}

All it has to do is set the address values in the textboxes and to call to initialize() function, the one that shows the map.

And that’s it! We now have a comment box in our app. Of course, the users will have to be logged in their twitter accounts and allow your app to connect to their accounts. But all this is taken care of by @Anywhere!

Let’s check out other features of @Anywhere:

Linkifying twitter usernames

With only a few javascript lines added to the head section of your site, @Anywhere will convert all twitter usernames on your page in links to the proper twitter profiles.

Here’s the script we need to add:

twttr.anywhere(function (T) {
   T.linkifyUsers();
});

You just have to call the linkifyUsers() function. This code will turn all twitter usernames found in the <body> section to links. You can also chose to only linkify the usernames in a section of your site. To do this, you will only need to specify the id of the element which has the usernames you want linkified.

twttr.anywhere(function (T) {
   T("#ELEMENT_ID").linkifyUsers();
});

Hovercards

Hovercards are small tooltips that show some data about a particular Twitter user. These will show up if you go with the mouse over a twitter username on you site. To add this option, you will have to add this script:

twttr.anywhere(function (T) {
   T.hovercards();
});

You can also limit the scope when the hovercards appear, just like with linkifying usenames.

Let’s add a twitter username to the site and test these features:

<center><div style="width:100%; height:4%">Demo App by @anirib</div></center>

@Anywhere seems pretty cool, eh?