Home » Javascript
Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Free JavaScript & jQuery learning resources
, ,

Free JavaScript & jQuery learning resources

Read More
Free, online, open-source book on web performance - Book of Speed
, ,

Free, online, open-source book on web performance - Book of Speed

Stoyan Stefanov, a web performance expert, Facebook engineer, ex-Yahoo, smush.it creator & YSlow 2.0 architect, has released the draft of Book of Speed for free & public access. Currently 5 of the planned 9 chapters are online.

In his blog post announcing the release, he also mentions another free, online JavaScript resource by Marijn Haverbeke - Eloquent JavaScript. 


Read More
,

HOW TO study (or copy) code related to JavaScript effects from websites you envy


To build web apps with a great UI, its ok to draw inspiration from the best sites on the web. Sometimes the good-looking websites with great JavaScript effects may obfuscate their code knowingly or unknowingly or the code may be difficult to understand by just viewing the HTML source. 

Visual Events is a nifty bookmarklet that shows the events attached to each of the elements in a webpage. The keyboard & mouse events are represented as icons & when you mouse over any icon the source code related to it is shown. This is helpful because on JavaScript intensive sites you don't have to rummage through the entire source to find a small code block that you need.

For instance, when you mouse over a Tag button on the StackOverflow site, it shows a tooltip

If you call the Visual Event bookmarklet while this page is loaded, you will see this icon  over the javascript Tag button  indicating that there is a mouseover event attached to it. The complete mapping of icons & their corresponding events is listed on the Visual Event bookmarklet's homepage. When you hover your mouse pointer over the icon, the Visual Event bookmarklet scans through the source code & fetches just the code corresponding to the javascript Tag button's mouseover. The code window also informs that this particular StackOverflow webpage uses jQuery version 1.5.1 

Click image to enlarge 
This bookmarklet can detect event handler code that is written using one of these libraries -
  • DOM 0 events
  • jQuery 1.2.x +
  • YUI 2.6.x (2.x might work!)
  • MooTools 1.2.x
  • Prototype 1.6.x
  • JAK (Events 2.2)
  • Glow
Visual Event is beta grade software. It doesn't currently work in IE

Also see:

Read More
, , ,

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
, , ,

Add DOM Monster to your collection of Web Perf Analysis & Optimization tools

If you like web page performance analysis & optimization tools like YSlow, you will love DOM Monster (thanks @souders)

"DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health."

The good thing about this tool is that you wouldn't have to update it when a new version comes out as it is in the form of a bookmarklet.
DOM Monster suggestions for a ASP.NET Forums page (click to enlarge)
Read More
, ,

How Tynt Insight works

If you are looking for tips on a range of useful topics, head to Dummies.com (never mind the name). It is the website for the For Dummies series of plain English reference books. The site features interesting topics from it's books on varied & complex subjects.

If you copy & paste any content from there, it will add a link of the URL from where it was copied, at the end of the pasted content. This is achieved by a 12KB JavaScript utility library called Tynt Insight.

There is a nice explanation on StackOverflow about how Tynt Insight works -
  • the code activates on events like mouseup, mousedown, and copy (in the startListeningForTraces function)
  • if the user selected a range of text, then it:
    • creates the HTML for an attribution link, plus optional CC license URL
    • appends this HTML to the selection, placing it inside a zero-size <div> (to keep it invisible on-screen)
    • reports what was copied back to Tynt's servers
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
,

Using the jQuery Star Rating & Template plugin with dynamic data

With some help from the StackOverflow forum, I recently integrated the Star Rating jQuery Plugin on Github with jQuery Template plugin to make them work with dynamically generated data. Check out my code sample that's based on Stephen Walther's sample.

Among the jQuery Rating  plugins I tried, I found Chris Richards' Star Rating jQuery Plugin to be the most elegant.

Talking of Github, I share @themaninblue's sentiment about the lack of links to demos for JavaScript projects -

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
Google Labs Script Converter Bookmarklet
, ,

Google Labs Script Converter Bookmarklet

Script Converter is a Google Labs product that allows the user to read a web page in a script of their choice (currently 11 Indian languages, English, Greek, Nepali, Persian, Russian, Serbian are supported). For example, if the user can understand spoken Tamil but cannot read the script, they will be able to view Tamil web pages in English (Roman) script or one of the other supported languages.

The online tool does not translate any content but transforms the words on the page to its phonetic equivalent in the desired script. It also supports the conversion from non-Unicode encodings to Unicode, so that users can view pages without installing the custom font otherwise needed.

Any web-based service that takes its required parameters as a querystring is a good candidate for a bookmarklet. Here's the code for my attempt at building a bookmarklet for Google Labs Script Converter -
javascript:(function()
{
window.location.href='http://scriptconv.googlelabs.com/frame?sln=xx&tln=en&url='
+encodeURI(window.location.href);
})()

The value "xx" for sln indicates Script Converter will auto-detect the language on the web page that it has to transform while tln=en means the content will be shown in English.

You can deploy this bookmarklet yourself (after removing the newline characters) or drag the link below to your Bookmarks toolbar (or whatever it is called in your favorite browser)  -
>> Transliterate with Script Converter <<

To test this bookmarklet, you can open the BBC Hindi home page & then click on the above bookmarklet that you've added to view Hindi content in English.

Also see:
The Joy of Bookmarklets
How to read an online PDF file without installing a PDF Reader
HOW to continuously refresh any web-page in IE & Firefox
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
,

Think Mobile First

Summary of the advice from the "Rethinking the Mobile Web" presentation on developing for the mobile web -

1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries is in fact the first @media query...
4. progressively enhance using JavaScript and @media queries
5. adapt content (especially images) appropriately for each device
6. compress content where possible, and don’t include unnecessary data

This very creative presentation has floored even the inimitable PPK so much that he wants you to learn it by heart.

A slide from Bryan Rieger's presentation

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
My web pages work in browser X but fail in browser Y. What to do next?
, , ,

My web pages work in browser X but fail in browser Y. What to do next?

It doesn't take long for rookie Web developers to realize that the browser world is as unfair as the world we live in as browsers do not all comply with standards to the same degree. As a result, they are aghast when they find that their painstakingly-built web pages fail in some browsers that they test on towards the end. Being aware of HTML, CSS & JavaScript standards is a pre-condition to building cross-browser web pages but what if you skipped that step & now have to get a project out of the door?

Almost all of the new browsers come with developer tools to help locate & debug issues that could be preventing a web page from running as intended in that browser. A good first line of action would be review & resolve the errors & warnings displayed in the Console that is generally part of the browser's native developer tools.

In Firefox, there is an Error Console in the Tools menu.

IE 8 has a Script Console under the Script tab in Developer Tools which is accessible with keyboard shortcut F12.

Safari (on Windows) has the Show Error Console option in the Develop menu.

Opera's Error Console is a tab present in Developer Tools (also called Dragonfly) that is available from the Tools menu under Advanced option.

If this step doesn't help then review these links for tips on addressing specific issues -
.
Read More
,

Popular JavaScript apps dissected

A good way to be a better programmer is by studying & analyzing source code of others.

Here is a work-in-progress compilation of popular JavaScript apps or libraries dissected by generous folks -
Seen anymore articles dissecting popular JavaScript apps? Please share that by posting a comment & I will update this list.

(image by Sebastian Bergmann)
.
Read More
,

Google Font API offers free custom fonts

Did you know, Google's new Font API lets you display text on your web page with custom fonts served from their server farm? (Thanks Chris)

There are currently 19 fonts, some with multiple variations, in the Google Font Directory. Their site informs that all fonts in the directory are available for use on your website under an open source license and are served by Google servers. You can use CSS or JavaScript to embed them. There is a Font previewing tool to fine tune how the letters should look.

This program is in beta & it is supported mostly on newer versions of popular browsers.

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
The Joy of Bookmarklets
,

The Joy of Bookmarklets

A Bookmarklet is a small JavaScript program that can be hosted on the browser's bookmarks bar and used to simplify a multi-step or repetitive activity by automating it. For instance, upon clicking the Snipshot bookmarklet, it will extract all the images in a web page that you have opened, display them for you to select & open them directly with the Snipshot image editing site. This feature can be helpful when you want to quickly edit images you find online.

There are quite a lot of such bookmarklets that can enhance your browsing experience.

As they are cross-browser, they work in all popular browsers unlike Extensions (in Firefox & Chrome) and Accelerators & Web Slices (in IE8).

I've developed a fascination for Bookmarklets. My bookmarks bar is now full. To add new ones and view them all directly, I'll probably have to buy a bigger monitor.

After getting to know that commenting on "dofollow" blogs/sites can have some value, I wondered if there was an easy way of identifying such sites. I though writing a bookmarklet to highlight "nofollow" links could be one way. I was thrilled to find that such a bookmarklet has already been written a couple of years ago by a Googler. I tweaked it a little to make it work in IE8 as well.

Dear reader, what are the bookmarklets that you find useful?

Also see:
Bookmarklet to continuously refresh any web-page
Google Docs Viewer bookmarklet
HOW TO create your own IE8 Accelerator
180
Read More
Subscribe to: Posts (Atom)