Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

A new JavaScript Reference to bookmark

For years, the JavaScript section at W3Schools.com has been a indispensable source of reference for me. It will now not be my only source. After going through Stephen Walther's JavaScript Reference built with HTML5 & jQuery, I'm impressed with all the useful & up-to-date information that it contains.

Unlike W3Schools which shows what browsers support (or don't support) a particular method or property, without explicitly specifying the version...


...this new Reference shows which browsers support each of the Objects, Functions, Properties, Statements, Operators, Comments, Directives. Only the latest versions of popular browsers are taken into account & surprisingly Opera is excluded.


The complete source (15.2MB) of this HTML5 JavaScript Reference application is available for download & review.

Update(14/Jan/11): If you work with JavaScript, also get this bookmarklet - Steve Souders has created a meta-bookmarklet that includes DOM Monster & a few other performance analysis tools available as bookmarklets. His meta-bookmarklet works with mobile & desktop browsers.
Read More

HOW TO implement alphabetic paging on dynamic data with jQuery

A few weeks ago, I discovered how jQuery plugins make it easy to implement numeric paging & rating of dynamic data. Amazingly, there are jQuery plugins that can almost mimic any server-side slicing & dicing of dynamic data.

Continuing my experiments with the jQuery Template plugin, I implemented alphabetic paging on dynamic data fetched in JSON format using the Geonames.org webservice.

Check the sample showing cities of India fetched through the GeoNames Search Webservice with alphabetic paging & its source.

Read More

How the Internet thing works


20 Things I Learned about Browsers and the Web”  is an online illustrated guide from Google aimed at casual users. You can browse though it to catch up on the buzz-words or pass it to friends & relatives who want to know about the Internet thing. It is also available in PDF format for offline reading.

It covers the following topics in a lighthearted, non-techincal way -
  • What is the Internet?
  • Cloud Computing
  • Web Apps
  • HTML, JavaScript, CSS and more
  • HTML5
  • 3D in the Browser
  • A Browser Madrigal
  • Plug-ins
  • Browser Extensions
  • Synchronizing the Browser
  • Browser Cookies
  • Browsers and Privacy
  • Malware, Phishing, and Security Risks
  • How Modern Browsers Help Protect You From Malware and Phishing
  • Using Web Addresses to Stay Safe
  • IP Addresses and DNS
  • Validating Identities Online
  • Evolving to a Faster Web
  • Open Source and Browsers
As it is built using HTML5, JavaScript and CSS3, it is best viewed with a HTML5-compliant browser.

A user named Nephron reports (in the comments section of this post) that the source is about 3500 lines of code & utilizes jQuery. Google plans to open source the entire code soon. The code for this web book is now open sourced on Google Code (2-June-2011)
Read More

HOW TO move items between Lists with jQuery

Moving items between list-boxes is a common UI pattern in Windows applications.

To simulate that in web applications with jQuery, check my no-frills code sample which uses an Unordered List instead of list-boxes. When items are moved back to the original List, the sequential order is maintained. This sample can be extended to have multiple Child Lists whose items can be moved to a single Master List.

When an item is moved from the parent List, it is only hidden & its clone is added to the second List. When the same item is deleted in the second List, that element is removed explicitly & the corresponding hidden item is shown in the List where it originated from.
Read More

Client-side paging of dynamically generated records with jQuery Template & Pagination Plugins

I'm amazed at the sheer number of jQuery plugins that developers worldwide painstakingly build & voluntarily share. There is a vibrant, responsive jQuery community online that offers feedback & support to those seeking it. This community is one big reason which makes jQuery special when compared to other JavaScript libraries.

To display dynamically generated records with client-side paging, I recently tried out Microsoft's jQuery Template plugin (minified version: ~6KB) alongwith G Birke's jQuery Pagination plugin (minified version: ~3KB) . I've shared my code sample on JSBin (see source).

This sample is an adaption of Stephen Walther's Templates plugin example & a Pagination plugin example by StackOverflow member brianpeiris. The help I recieved from the StackOverflow forum has been invaluable.

Some of the things I learnt from working with jQuery plugins are -
  • Note which version of a  jQuery plugin you are using & if it needs a specific version of the jQuery library & any other dependent files.
  • Pick Plugins which have good documentation & demos. If you pick a popular one, the chances of getting quick help from online forums will be higher.
  • Find out if the license policy for that Plugin suits your needs. Plugins hosted on Github generally have liberal licensing.
  • Rate Plugins on the jQuery Plugins site so that it can help the author & potential users (requires login)
Read More
jQuery videos for ASP.NET developers

jQuery videos for ASP.NET developers

As a convert to jQuery, I'm glad to see the support that Microsoft is lending it. Today, I went through possibly the first video tutorial exclusively on jQuery on the official ASP.NET website's training video series. Video content is sometimes easier to absorb than flipping through books or reading online articles. I plan to list all the good jQuery videos I find -

(work in progress...)
Read More

jQuery on CDN - Usage Stats

Dave Ward has done an informal study on the top 200,000 sites identified by Alexa to find which of those sites use a public jQuery CDN. His findings:
  • 47 of the Alexa top 1,000 include a Google CDN reference.
  • 99 of the Alexa top 2,000 reference jQuery on the Google CDN.
  • 6,953 of the top 200,000 sites include a script reference to some version of jQuery hosted on Google’s CDN.
  • 989 of the Alexa top 200,000 sites reference jQuery UI on the Google CDN.
Dave recommends keeping your site’s CDN reference updated to the latest compatible version of jQuery for more performance gains. This is because popular sites generally upgrade to the latest stable version & sites must reference exactly the same CDN URL in order to obtain the cross-site caching benefit.

Google CDN hosts:

Microsoft Ajax CDN hosts:

(details as of Sep, 2010)

As per the BuiltWith.com website (which tracks technology usage trends), nearly 37% of the top 10,000 sites currently use jQuery in any form (not just from the CDN)


Also see:
jQuery Tips, Tricks, Trivia
Web apps in less than 10 KB
Popular JavaScript apps dissected
Read More
Web apps in less than 10 KB

Web apps in less than 10 KB

There have been over 350+ submissions to the 10K Apart contest conducted by Microsoft & Event Apart that has a prize money of over $10K.

The important rule was that participants should build a web app whose total file size including images, scripts & markup, shouldn’t be over 10K. All code must run client-side although 3rd-party Web services & JavaScript libraries like jQuery, Prototype & Typekit are allowed. The code must be standards compliant & usage of HTML5 is encouraged.

The submissions are good learning material for developers who value speed & standards. They are listed on the home page. Sort on the Highest Rating & Most Comments options (generally good indicators of popularity) in the dropdown box there, to get started with viewing the apps & their source.

Update (14-Sep-2010) - Hakim El Hattab's game measuring a measly 6.9KB has won him the grand prize of $3000 & other goodies. The entries of the other 3 Runners-Up are addictive games that you better not check if you don't want to waste time.

Related:
Get ready for HTML5
HTML5 features emerging in popular web apps
Read More

Free eBook - jQuery: Novice to Ninja

The SitePoint website has been running a promotion celebrating the Football World Cup. Each country that entered the quarter finals has been assigned a SitePoint book. The price of each book was determined by the outcome of real soccer games. The book mapped to the team winning the Cup is being given out free.

Spain was mapped to jQuery: Novice to Ninja & this ebook is available for free if you download it before the next 24 hours.

20
Read More

Book Review: Learning jQuery 1.3

In a brief span of four years, jQuery has become one of the most popular JavaScript Frameworks. Among the many websites & organizations that have adopted it is Microsoft and we are going to see a lot more of jQuery being used in ASP.NET websites than earlier. I've been using jQuery on & off for more than a year now. I more than agree with jQuery's motto that you will start writing less code & doing more with this nifty JavaScript Framework. What's more, it's all cross-browser code!

The book Learning jQuery 1.3 is written by Jonathan Chaffer and Karl Swedberg. Both are members of the core jQuery team and John Resig, the creator of jQuery speaks glowingly about them in the foreword of the book. This book builds on the earlier edition which was one of the first books on jQuery. I've benefited from reading this book & recommend it to everyone working or starting to work with jQuery.

This book is a comprehensive guide for beginners & a handy reference for experienced developers. Web developers & designers with a fair knowledge of HTML, CSS & JavaScript can sink their teeth into this 400+ paged book & start coding in jQuery confidently after finishing the book.  Spread across 11 chapters, the book covers the basics of jQuery in the introductory chapters, goes progressively into complex topics and concludes with a chapter on developing your own Plug-ins. Like I keep doing, you will probably refer to the Appendices multiple times. The code is download-able from the book's homepage. There are a lot of tips, tricks & best practices in the book and learning about them is sure to make you the jQuery expert at office. Sample this -
..when we plan to use a jQuery object more than once, it's generally  a good idea to cache the selector by storing the resulting jQuery object in a variable as well.

Written in plain-English, the style is conversational & friendly. The book has numerous practical examples (like those for implementing pull quotes, headline rotator, image carousel, table sorting, filtering & pagination) that can be directly used at work. While elaborately explaining how a particular client-side feature can be built, the authors show where something could go wrong and this helps in understanding a concept better.

The authors provide sufficient background & context while getting into topics that may be intimidating to beginners. For instance, this explanation of the hide() and show() methods impressed me -
The .hide() method sets the inline style attribute of the matched set of elements to display:none. The smart part here is that it remembers the value of the display property—typically block or inline—before it was changed to none. Conversely, the .show() method restores the matched set of elements to whatever visible display property they had before display:none was applied.

One place where I remember missing the background though was in a snippet that used the rel attribute. I learnt from W3Schools that the rel attribute of the anchor tag is not really supported by any major browsers and it can take over a dozen possible values. This is a minor detail though & I'm probably nit-picking.

I wish the key features of jQuery 1.3 as well as critical differences from the older versions were highlighted. While it's no doubt good to use the latest version of jQuery, it would have been beneficial to those who have already used older versions to know how breaking changes can impact their code. For example, some folks may miss the fact that if you upgrade jQuery from 1.2 to 1.3, you also have to upgrade the jQuery UI Plugin suite that they may also be using from version 1.6 to 1.7. At a minimum, the Quick Reference at the end of the book could have briefly mentioned when something not in the original jQuery API was introduced or modified. I'm glad however that there is a Quick Reference as I had wished for while reading the first edition.

There is a sample chapter available online(PDF) that you can check to see if the book suits your tastes.

This review is based on the ebook version that I received from a PacktPub representative.

Also see:
My favorite jQuery plugins
180
Read More

jQuery is now on W3Schools

Whether you are getting started with Web development or need a good reference, W3Schools is a great online resource you can turn to. In over a decade of it's existence, the Norwegian family-owned company Refsnes Data that runs W3Schools has meticulously created tutorials on close to 50 Web development topics. The tutorials are in plain-English, thorough and to the point. I was glad to see today that jQuery has been added to that growing list of topics.  Also included is a tutorial on HTML5, the next generation of HTML.

W3Schools has been a dependable companion to me for much of my web development career. Just yesterday, I learnt that the rel attribute of the anchor tag is not really supported by any major browsers and it can take over a dozen possible values. rel="nofollow" is used by search engines to let search spiders know they should not follow a link which contains that attribute.

W3Schools is currently ranked 341 on Alexa & enjoys over 103+ million monthly page views (March 2010).

Also see:
Free .NET 4 & VS 2010 Learning Resources
HOW TO block IFRAME based ads
60
Read More

jQuery, Cloud Computing, Sharepoint 2010 sessions at MUGH Meet

Microsoft User Group, Hyderabad (MUGH) was formed in 2003. It has members from many of the 100+ software companies in Hyderabad. Since being at the very first UG meeting, I've made many friends over the last 7 years at these meets.

For long, I've been a member of the audience but last Saturday on May 15th, I delivered a session on jQuery. I had a kind & patient audience who sat attentively for more than an hour while I went on with all the jQuery tips, tricks and trivia that I've picked up during the past year. I also showed some simple code samples & explained about Plugins.

Accomplished MVP & author, Arun Ganesh presented an engaging session on Cloud Computing with Azure. It included a demo on Visual Studio 2010 & Windows 7.

Phani of Brainscale showed what's new with SharePoint 2010 from a developer's perspective. He made an interesting observation that SharePoint 2010 works best with the 32-bit version of Office 2010, because quite a few features of Sharepoint don’t work with 64-bit version of Office 2010.  This Technet article has more on browser support -

Some of the features in SharePoint Server 2010 use ActiveX controls. In secure environments, these controls must be able to work on the client computer before their features will function. Some ActiveX controls, such as those included in Microsoft Office 2010, do not work with 64-bit browser versions.

Also see:
MS MVP Authors from India
 60
Read More

Collaborative JavaScript debugging tools - jsFiddle & JS Bin

Stuck with a JavaScript issue & need help debugging it? jsFiddle & JS Bin are online Web editors that save your samples & generate a random URL for it so that you can share it on a forum or with those who can help you with it.

Though both are not ready for prime-time, jsFiddle currently appears to have more options than JS Bin. It can format code to make it more readable. Both of them help you build quick & dirty code samples using Frameworks like jQuery, while you are experimenting or building a prototype. Without having to sign-up, you can save your code & generate a public link for it. You can then send this link to others anywhere across the world to review or seek help with debugging.

(JS Bin - click on the image to view enlarged screen-shot)
.60
Read More

Screen scrape with jQuery, AJAX, JSONP & YQL

Since reading this excellent article about scraping content from a Wikipedia page using Yahoo! Query Language (YQL) as a proxy for cross-domain Ajax, I'm hooked to YQL. YQL helps in circumventing the same-origin policy that prevents a script loaded from one domain from getting or manipulating properties of a document from another domain.  YQL has been around for about 2 years now & last year Yahoo introduced the capability to execute the tables of data built through YQL using JavaScript.

Ajax, jQuery, JSONP (JSON with Padding) & YQL make a heady combination - check Christian Heilmann's code samples.

Some facts about YQL from around the Web (work in progress) -
* YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you.
* It only returns the body content of the HTML - so no styling (other than inline styles) will get through.
* ...it treats the info on the web as a virtual table that developers can manipulate in a standardized way, regardless of the API that data came from.
* YQL understands and supports data sources like RSS, Atom, JSON, XML, CSV, HTML, Flickr, Yahoo! Finance, Weather, and so on.
* ...makes client-side mashups possible without using server-side proxies.
* Usage Limits:
Per application limit (identified by your Access Key): 100,000 calls per day
Per IP limits: /v1/public/*: 1,000 calls per hour; /v1/yql/*: 10,000 calls per hour


Also see:
HOW TO prevent screen scraping 
Google Spreadsheets functions for scraping external data
77
Read More

My favorite jQuery plugins

jQuery, John Resig's brain-child, has an irresistible charm that attracts legions of followers. Many of these followers selflessly share plugins they create for free. So if you have seen a clever, dazzling, intriguing, laborsaving, mind-blowing, {add your favorite adjectives} client-side feature on some site, the odds are high that there is already a jQuery plugin for it.

For long I have smirked at folks who post their compilation of favorite jQuery plugins with attention grabbing titles like  "37 More Shocking jQuery Plugins", "37 Phenomenal jQuery Plugins..", "75+ Top jQuery Plugins.." but now I know how hard it is know to about some amazing plugin & keep it to yourself. I wouldn't want to forget the beautiful ones that I've benefited from, so here goes my list of favorites (work in progress) -
  1. JCrop - to crop images programmatically
  2. SearchHighlight - Highlights matched words on a search results page
  3. jQuery-gestures - adds mouse gestures to a webpage
  4. imgAreaSelect - select a rectangular area of an image to crop or annotate
  5. Image Annotation plugin - to add an annotation at a desired position on an image
  6. AutoComplete - "autocomplete" an input field to enable to users quickly find and select some value
  7. Multiple File Upload - upload multiple files at once
  8. quickSearch - for searching through tables, lists, etc quickly
  9. jGrowl - to show fading & sticky message boxes
  10. Pagination - ~5KB plugin to add paging to result-sets

The official jQuery Plugins site accepts plugins from contributors & publishes details in a standard format. The good thing is they come with a demo that you can try out.

I feel the best way in which developers making use of the plugins can help this effort is by rating submissions & reporting issues for the common good.
Read More
HOW TO access a HTML Label tag's text programmatically

HOW TO access a HTML Label tag's text programmatically

On a technical Forum that I frequent, there was a question on how to get the Label tag's text associated with a radio button (or for that matter any other control). The easiest way I found is to use jQuery -
alert($("label[for='radio1']").text()); //radio1 is the ID of a radio button

You would need to throw in a reference to the jQuery library when you run that statement. The better way is to link to the online copy here - http://code.jquery.com/jquery-latest.js

Is the label tag important anyway? I didn't think so until I read this in W3Schools -
The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

The for attribute of the label tag should be equal to the id attribute of the related element to bind them together.

Did you know an ASP.NET radiobutton control renders as an INPUT tag with type "Radio" and the radio button's text is rendered with a LABEL tag? So clicking on the radiobutton's text would be as good as clicking it.

Also see: The optgroup tag
Read More