Archive for the ‘JavaScript Resources’ Category

SQL Fiddle – Online SQL Database Testing Tool

Many of you might have heard the name of JSFiddle for testing JavaScript code and using different JavaScript libraries like jQuery, MooTools, Protoype, YUI, ExtJS, KnockoutJS, AngularJS, Dojo etc.

It basically gives one an editor each for writing HTML, JavaScript and CSS code. One can also view the output right there in a separate section. One may even choose to validate the JavaScript code using JSHint to check JavaScript code quality with JSLint validation.

Now there is also a SQL counterpart named SQL Fiddle. It is basically a tool for easy online testing and sharing of database problems and their solutions.

Using the tool one can build database schema and run SQL within the tool to check the output. Isn’t it wonderful to have such tools in a developer’s arsenal? Enjoy!

Fixing the back button for Ajax apps to enable bookmarking into history – jQuery, ASP.NET Ajax, YUI & other ways

Most of you might already be aware of the paradigm shift problem in ajax apps in terms of the browser back button not working out of the box.

The problem and some of the generic solutions to it is described in more detail in the following articles. Suffice is to say that by integrating ergonomic display features such as back and forward navigation, we can make it simpler and more intuitive for the end user to immerse into the richer internet applications (RIA) that we can now create:

Fixing the Back Button and Enabling Bookmarking for AJAX Apps

AJAX: How to Handle Bookmarks and Back Buttons, Advanced Example

Fixing the back button that AJAX broke

AJAX: How to Handle Bookmarks and Back Buttons

How to build a cross-browser history management system

Now here’s Microsoft’s effort in solving the problem with the help of ASP.NET AJAX library:

Enable Back button support in ASP.NET AJAX web sites – This is a server-centric solution that gets translated into client side history management code.

Managing browser history from client script

ASP.NET AJAX History Part 2: Client-Side

AJAX History and ASP.NET AJAX Preview 3

Client History Points in ASP.NET 3.5 Extensions

The link below is a Yahoo Developer Network effort in attending the issue:

YUI 2: Browser History Manager

Now onto the implementations by my most favorite JavaScript library (I would love to call it a Framework someday soon!) jQuery. There are tons of jQuery plugins that do this. All but one of them below uses address mangling technique in the form of page.aspx#5 to solve the problem. There are pros and cons for both the techniques as explicitly assigning mangled address like that helps in bookmarking. Whereas, if you don’t want to show the values you want to store in the history to the user, then hidden iframe technique below comes in handy:

jQuery BBQ: Back Button & Query Library

History/Remote – jQuery plugin solution for hijaxing links and enabling history

Restoring conventional page navigation to your javascript application with jQuery history plugin

jQuery History Plugin – Uses hidden iframe technique so that the address is not mangled with hash.

jQuery Address – Deep linking plugin – Supports Deep linking

History plugin

jHistory plugin

 

 

Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

I have been looking for the ultimate collection of the most useful and common jQuery code snippets for JavaScript over the web for quite some time now. But the world’s not a perfect place and I haven’t come across ‘the’ place where one would get all the information regarding jQuery be it for DOM manipulation and traversal functions, selectors, cheat sheets or performance improvement for JavaScript code which are written through jQuery. Hence this is my small endeavor to put together the most popular and talked about jQuery link collections across the web.

Here you would find links which are related to improve web site performance for your jQuery driven sites as well as helpful guides & tutorials with jQuery code snippets in them which you can basically copy-paste onto your web applications. The main goal was to focus on links which provide enough examples with jQuery code for the most common web development cases.

While this is not the ultimate collection for the most popular jQuery plugins, I have included the most re-tweeted ones through my twitter account search section. Please feel free to add links related to this particular category as well in the comments. I am sure it would be useful to the readers.

Here goes the compilation in no particular order:

Improve your jQuery – 25 excellent tips

jQuery Tips and Tricks– Stack Overflow

jQuery Tips and Tricks

jQuery Useful and Handy Tips and Tricks

jQuery Tips and Tricks Part 2

20 Top jQuery tips & tricks for jQuery programmers

jQuery Tips and Tricks

Tutorials:5 Quick jQuery Tips

5 easy tips on how to improve code performance with huge data sets in jQuery

50+ Amazing Jquery Examples- Part1

8 Fantastic jQuery Tutorials for Designers

jQuery Tutorials for Designers

Top 3 jQuery Tips for Beginners

7 Really Useful Tips For Better jQuery Code

jQuery Tips, Tricks, and Miscellaneous

A Couple of Quick jQuery Tips: Alternating Gray Rows in a Table, Highlight Table Row Mouseover

10 Tips for Writing Better jQuery Code

6 fast jQuery Tips: More basic Snippets

6 more jQuery Tips: Text Searching, Page Load Time and Others

6 quick jQuery tips: Text manipulation, timers and elements

8 awesome JQuery tips and tricks

Useful and Handy jQuery Tips and Tricks

jQuery Tips and Tricks II

10 Advance jQuery Scripts to take Your Website to the Next Level

jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!

20 jQuery Tutorials And Plugins To Impress Your Friends

25+ jQuery Plugins that enhance and beautify HTML form elements

6 jQuery snippets you can use to manipulate select inputs

40 Exceptional jQuery Interface Techniques and Tutorials

Clever jQuery Selectors

95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets

10 Really Helpful Traversing Functions in jQuery

jQuery CSS3 Selectors Sandbox

jQuery Selectors Cheet Sheet

55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

38 jQuery And CSS Drop Down Multi Level Menu Solutions

51 Form Element Resources and Tutorials Using CSS And Javascript

37 More Shocking jQuery Plugins

10 incredible JQuery navigation menus

jQuery Visual Cheat Sheet


Updated on October 12, 2009:


Starting With jQuery – Validation Plug-in

bassistance.de » jQuery plugin: Validation

A jQuery inline form validation, because validation is a mess

Regex Selector for jQuery

Parsing Strings With jQuery

jQuery plugin to style scrollbars (cross-browser compatible)

jScrollPane: cross-browser jQuery plugin to replace browsers default vertical scrollbars

Jquery Vertical Slide (Dropdown) Navigation

Animated Scrolling with jQuery 1.2

jQuery Patch: Animate CSS Rotation and Scale

Special Events

Scrolling with jQuery

jQuery – Loading Partial Content

jQuery – Using Slider as a Scrollbar

Animated Page Scroll with jQuery

jQuery’s Passes Itself As An Argument To The “Ready” Event Callback

Viewing jQuery DOM Event Bindings With FireBug

jQuery’s Filter() Method Can Take A Callback Function For Advanced Filtering

A Graphical Explanation Of Javascript Closures In A jQuery Context

jquery-aop: Aspect Oriented Extensions for jQuery to add advices (Before, After, Around & Introdcution)

Load Content While Scrolling With jQuery

Implementing infinite scrolling with jQuery

jQuery Smooth Div Scroll by Thomas Kahn

Up and Down slider using JQuery

10 best jQuery gallery and slider plugins

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin

jQuery Looped Slider Tutorial

Making a Content Slider with jQuery UI

Accessible News Slider

Learning jQuery: Revealing Photo Slider

Create Featured Content Slider Using jQuery UI

Update: jQuery UI 1.7 Slider from a Select Element

Build a Content Slider with jQuery

Easy Slider Plugin from jQuery UI

Coda Slider Effect

13 Super Useful jQuery Content Slider Scripts and Tutorials

Making A Slick Content Slider

Master CheckBox in GridView header

jQuery TOOLS / Scrollable – Scroll your HTML with eye candy

CSS/JS Hack – Vertical Scrollbars. On the… left.

jqPrint: jQuery Plugin to print only contents of a specified element using jPrintArea plugin

Introduction to jQuery in ASP.Net and 10 Advantages to Choose jQuery

45+ Fresh Out of the oven jQuery Plugins

List of Useful jQuery Plugins


Updated on December 01, 2009:

jQuery based Modal Popups / Windows / Dialogs:

jqModal- Minimalist Modaling with jQuery

SimpleModal Plugin by Eric Martin

jQuery UI Dialog Plugin

NyroModal :: jQuery Plugin

boxy – Facebook-like dialog/overlay, with frills

jQuery Impromptu

jQuery AJAX Validation Contact Form with Modal + Slide-in Transition | The Blog of Joren Rapini

jQuery Plugin: choose component

Facebox v1.2

jQuery – Modal Dialog

jQuery SuperBox!

More =>

15+ jQuery Popup Modal Dialog Plugins and Tutorials

jQuery Popup Dialog And Gallery Plugin Reviews

Simple jQuery Modal Window Tutorial

Modal Scripts | Modal Window | Modal Dialog | Modal Popup – DownloadJavascripts.com

jQuery modal box round up

Top 5 jQuery Modal Plugins

19 jQuery Modal Boxes to improve your UI

How to create a stunning and smooth popup using jQuery

Building modal panels with jQuery

JQuery: Die 22 besten Modal – Fenster Plugins [German site but still has useful links]

 

Please do keep in mind that this can’t, in no way, be the perfect and most complete collection for all things related to jQuery. Despite the title of the article, it simply can’t be without your efforts. Hence, I would most sincerely urge my valued readers to feel free to post their favorite ones through the comment section. With a little bit of help from you mates, I am sure we can build ‘the ultimate collection’ which we have set forth on achieving. After all, in order to achieve big we need to dream big as well, no? So, please do contribute even if that means posting a single link which adds value to this collection of jQuery links. Only then will this post no longer be a misnomer. Keep this growing to infinity folks!

Top UX Design Pattern and Interaction Design Resources

I was surfing through the internet (i.e. Google) for Progress Indicator Pattern as part of the UX or User Experience Design Patterns in Ajax Patterns and was merrily reading on the Quince and JS Patterns Progress Indicator Pattern articles when I stumbled upon this idea that I should blog about the UI Design Patterns or UX Design Patterns as they are more popularly known.

Going by the UX Zeitgeist, the following resources are pre-eminent:

Design Pattern Library from Yahoo! Developer Network
Designing Interfaces
Flickr: UIPatternFactory.com
The UI Pattern Factory
Quince: UX Patterns Explorer
User Interface Design Pattern Library
Designing Social Interfaces
UI Patterns and Techniques
Blog about Interaction Design and Usability
Interaction Design (IxD)
Interaction Design Pattern Library
10 UI Design Patterns You Should Be Paying Attention To
The Interaction Design Patterns Page
The Five Competencies of User Experience Design
Design Patterns – Fluid Project Wiki
Blog site on Designing Web Interfaces for Principles and Patterns for Rich Interaction
Design Patterns at a glance >> The Design of Sites
40+ Helpful Resources On User Interface Design Patterns

Mix 2009 presentation with video titled Advance Your Design with UX Design Patterns

Quite literally, UX Zeitgeist is a new tool to track the books, people, trends, and topics in the User Experience (UX) community.

If you folks could think of any top ones that I missed out on, please feel free to suggest. Just remember we are compiling the ‘top’ ones here not just few to make a list.

Advanced JavaScript Resources

JavaScript, being so simple to learn & use is one programming language which is not always given its proper due. I think the main reason for this is that most people who tries to undermine the language are greatly fooled by it’s simplicity. Although, it has its fare share of shortcomings but the kind of things it can accomplish is pretty amazing.  If you have any doubts, check Can Your Programming Language Do This? at Joel on Software.

There are raging and never ending debates as to whether JavaScript is even a true programming language or whether it is an object-oriented language at all but that’s beside the point.

IMHO, JavaScript does indeed exhibit object-oriented programming language features. As per Yahoo! Answers, there are two models of object orientation. One is based on classes as the templates from which to create objects (instances of classes), and the other relies on prototypes that are already objects and which can be cloned to create new instances. JavaScript (and others) takes the prototype approach.

In any case, today I am here to guide you towards few sources which should go a long way in giving you a good idea about what JavaScript is and what it isn’t. Statutory warning – most of them are of advanced nature :). So, here you go, look at these sources which might quench your thirst for advance level JavaScript:

JavaScript Execution Context, Closure, Eval and “this” Keyword

Javascript Closures

The Magic Eval

Quirksmode JavaScript Tutorials

Scope in JavaScript

Variable Scope for New Programmers

Code Conventions for the JavaScript Programming Language

The JavaScript Programming Language

Douglas Crockford: JavaScript Doesn’t Suck

JavaScript as a Functional Language

Functional JavaScript – Harnessing the power of the Function Object

Yahoo! User Interface Blog has these excellent resources:

Douglas Crockford, a senior JavaScript Architect at Yahoo! and introducer of JavaScript Object Notation (JSON) to the world, whose  JavaScript: The World’s Most Misunderstood Programming Language is a must read, had a go at clearing the common JavaScript misgivings for you folks out there:

YUI Theater: Douglas Crockford, The JavaScript Programming Language

Video: Douglas Crockford, “An Inconvenient API: The Theory of the Dom”

Video: Douglas Crockford, “Advanced JavaScript”

Learning JavaScript Programming Language through Video Lectures

Weekly Link Roundup – 2

Links published on May 04, 2009:

Math world, simple mental calculations or what’s going on with education?

Most interesting math blog post I have read for a long time. Have a read guys and tell me how you find it.

Programmer Competency Matrix:

http://www.indiangeek.net/programmer-competency-matrix/

Panoramic Image & Viewer related resources:

http://krolik.net/PIV/
http://flashpanoramas.com/player/
http://www.mojavelinux.com/cooker/demos/panojs/
http://www.eurofresh.se/test/shockwpanos.htm
http://www.michielpost.nl/panorama/

File conversion utility for panoramic photos:

http://www.outerspace-software.com/bixorama.html

Automatic image stitching:

http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html

Panoramic Image App (Commercial):

http://www.autopano.net/

Panorama Gallery:

http://www.cs.ubc.ca/~mbrown/panogallery/panogallery.html

Panoramic Viewer:

http://s3.envato.com/files/4810/index.html

TDD Links:

http://codebetter.com/blogs/darrell.norton/articles/50337.aspx
A Conversation with Martin Fowler
Mocks Aren’t Stubs
Learn about .NET Unit Testing with Typemock

Old Version Downloads:

http://www.oldapps.com/

10 Youtube URL Tricks You Should Know About

http://www.makeuseof.com/tag/10-youtube-url-tricks-you-should-know-about/

100 Best JavaScript Resources

http://www.spoonfeddesign.com/100-best-javascript-resources

Performance killer: Disk I/O

http://nathanaeljones.com/11061_Performance_killer_Disk_I_O

Top 20 Best Agile Development Books, Ever

http://www.noop.nl/2008/06/top-20-best-agile-development-books-ever.html

Top 100 Best Software Engineering Books, Ever

http://www.noop.nl/2008/06/top-100-best-software-engineering-books-ever.html

Top 20 Programming Books

http://yaneshtyagi.blogspot.com/2008/04/top-20-programming-books.html

Top 10 Concepts That Every Software Engineer Should Know

http://blog.csdn.net/andylin02/archive/2008/07/26/2716304.aspx

Securing ASP.NET Applications

http://www.novologies.com/post/2009/04/08/Securing-ASPNET-Applications.aspx

The ADO.NET Entity Framework must read:

Introducing the Entity Framework [MSDN]
The ADO.NET Entity Framework Overview
ADO.NET Tech Preview: Entity Data Model

Introduction to the Entity Framework [Code Project]

Windows Communication Foundation must read:

Fundamental Windows Communication Foundation Concepts
What Is Windows Communication Foundation?

A Guide to Designing and Building RESTful Web Services with WCF 3.5

Howto Dynamically Insert Javascript And CSS:

This is a short and sweet little tutorial to show you how to dynamically insert a new Javascript (or style sheet) into your web pages, and explores how you can exploit cross-domain includes in your applications.

As JSON and DHTML start to get pushed more and more to the forefront of web-based applications, the web designer is faced with a new problem: how to dynamically insert a script element into an existing web page. It won’t take long to figure out that ajax loads and innerHTML injections won’t work.

http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Yahoo! Pipes and JQuery : Goodbye Same Origin Policy

http://www.badlydrawntoy.com/2008/07/08/yahoo-pipes-and-jquery-same-origin-policy/

URL Shorteners:

http://is.gd/
http://tr.im/
http://ow.ly/url/shorten-url
http://bit.ly
http://tinyurl.com

Interview Tips:

http://interviewtips.org/

LINQ to Entities:

http://www.linqdev.com/PublicPortal/publicportal/linq-to-entities.aspx

LINQ Learning Guide: LINQ to Entities

http://searchwindevelopment.techtarget.com/generic/0,295582,sid8_gci1299600,00.html

The ADO.NET Entity Framework Overview:

http://msdn.microsoft.com/en-us/library/aa697427(VS.80).aspx

Parallelism Videos Galore

http://blogs.msdn.com/pfxteam/

Writing LINQ Queries with the Entity Framework:

http://www.informit.com/articles/article.aspx?p=1237071

ASP.NET Dynamic Data Overview

http://msdn.microsoft.com/en-us/library/cc488546.aspx

Inheritance and Associations with Entity Framework Part 1

http://mosesofegypt.net/post/Inheritance-and-Associations-with-Entity-Framework-Part-1.aspx

Model Domain Objects with the Entity Framework

http://visualstudiomagazine.com/features/article.aspx?editorialsid=2425

Lambda the Ultimate : Programming Languages Weblog

http://lambda-the-ultimate.org/

Introduction to Domain Specific Languages

http://www.infoq.com/presentations/domain-specific-languages

Good blog site on Patterns:

http://blogs.msdn.com/erwinvandervalk/default.aspx

Pattern site on Hexagonal architecture

http://alistair.cockburn.us/Hexagonal+architecture

JSINQ – LINQ to Objects for JavaScript

http://www.codeplex.com/jsinq

JSINQ: LINQ style access for JavaScript objects

http://ajaxian.com/archives/jsinq-linq-for-javascript

LINQ to SQL: SQL-CLR Type Mismatches (LINQ to SQL)

http://msdn.microsoft.com/en-us/library/bb386909.aspx

LINQ to SQL : Object Identity (LINQ to SQL)

http://msdn.microsoft.com/en-us/library/bb399376.aspx

Most interesting math blog post I have read for a long time. Have a read guys and tell me how you find it.