Top 10 Popular Javascript Frameworks and Libraries

With the rise of the Web 2.0 era of computing, JavaScript became increasingly popular for the development of user interfaces for applications, both web-based and desktop-based. With the expanded demands for JavaScript, an easier means for programmers to develop such dynamic interfaces was needed. Thus the concept of javascript libraries or frameworks developed. Lots of Javascript framework are available for you to choose. Here is the list of top 10 most popular Javascript frameworks.

  • jQuery
    jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

    jQuery
  • Prototype
    Prototype takes the complexity out of client-side web programming. Built to solve real-world problems, it adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.

    Prototype
  • mootools
    MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

    mootools
  • Dojo Toolkit
    Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications. From simple websites to large packaged enterprise applications whether desktop or mobile, Dojo will meet your needs.

    dojo toolkit
  • ExtJS
    Sencha Ext JS is the industry’s most powerful desktop application development platform with unparalleled cross-browser compatibility, advanced MVC architecture, plugin-free charting, and modern UI widgets.

    Ext JS
  • Yahoo! User Interface Library
    YUI is a free, open source JavaScript and CSS library for building richly interactive web applications. YUI’s lightweight core and modular architecture make it scalable, fast, and robust.

    YUI (Yahoo! User Interface Library)
  • script.aculo.us
    script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. Its an addon to the Prototype framework.

    script.aculo.us
  • Zepto.JS
    Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. The goal of Zepto is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting stuff done. It is open source software and is released under the developer and business-friendly MIT license.
    zepto.JS
  • Qooxdoo
    Qooxdoo is a visual interface library written in JavaScript that provides a large set of controls allowing the creation of rich clients in your browser, and compatibility with various browsers on various platforms, usually in AJAX applications. It takes advantage of the object-oriented features of JavaScript, a powerful hierarchy of classes.
    Qooxdoo
  • SnackJS
    SnackJS is a small and elegant framework in JavaScript that provides only the functionality that most small websites need (and with only 3 KB!), such as work more easily with arrays; efficiently retrieve and modify classes and attributes of CSS elements; Add, remove and dismiss event handlers easily; and run and manage results of basic requests of AJAX/JSON/JSONP.
    Snack.js

Date Widget : Show Today’s Nepali Date in your website

Notice: This widget has been deprecated. This post is only kept for historical purpose. You can checkout code in Github if your want to implement it yourself.

Overview

DateJS (Date Widget) is a simple javascript widget to display today’s Nepali date in your site. If you want to display date in Bikram Sambat (BS) dynamically, then its easy now. This widget will do that job. You can either show date in English language or in Nepali unicode. It can be configuration easily. Different date formats are available. See Settings section for available date formats. It is not necessary to include any javascript library for using this widget.

Features

  • Simple and easy to install
  • Customizable
  • Supports display language; English or Nepali
  • Various date formats
  • Supports time also
  • Time may be in 24hr or 12hr format
  • Supports multiple instance in single page

How To

Intalling this widget is very easy. You just need to copy given code and after customizing it, paste it to your web page. If you are using any CMS or blogging service then paste it in Text/Html widget.
Basic Installation

Advanced Installation

Example

To see demo, check sidebar of this blog. 🙂

Settings

Property Default Description
dateLanguage ‘np’ Language to display date. Either ‘en’ or ‘np’.
Example :
np : १९ साउन २०६९, शुक्रबार
en : 19 Shrawan 2069, Friday
dateFormat 6 Integer value assigned for various date formats.
Example:
1 : १९ ०४ २०६९
2 : २०६९ १९ ०४
3 : २०६९ ०४ १९
4 : १९ साउन २०६९
5 : २०६९ साउन १९
6 : १९ साउन २०६९, शुक्रबार
7 : शुक्रबार, १९ साउन २०६९
8 : २०६९ साउन १९, शुक्रबार
9 : शुक्रबार, २०६९ साउन १९
widgetId ‘mywidget’ ID of the widget. If you are using single widget in a page then no need to set this option.
For multiple widgets, assign different name to each script’s ID and pass that in this parameter.
dateSeparator ‘ ‘ (space) Date separator. Default is space. You may use ‘-‘, ”, ‘/’.
showTime true Option to whether display time or not. Enter false to disable
militaryTime false true will show time in 24 HOUR format. false for 12 HOUR format
showTimeBeforeDate false Show time after date if false. Use true if you want to display time before date.
multiLine false Set to true if you want to display date and time in separate line.
showPoweredBy true Enable of disable the banner display below the date. Setting false will disable it. [ I would appreciate if you enable banner 😛 ]

Thanks to Jonathan Julian for his example_javascript_widget using which I was able to make this widget. And also kudos to codeartsnepal for Nepali-English Date conversion PHP class.

How to parse hashtag, mention and URL in a tweet

How to parse hashtag, mention and URL in a twit

I was trying to make a simple twitter application. Using jQuery and AJAX, grabbing twits was not that hard. But twitter returns twit in just simple characters. I needed to show the correct link for the mentions and hashtags and also needed to parse the URLs. So, after little search I came up with some Regex to grab it and then I made a simple function to parse twit. I needed such function in javascript as well as PHP. I just want to share that function here.

DEMO

Simple regular expressions are used here. But you can use more robust and advanced regular expressions also.
For URL

For Mention

For Hashtag

Same output can also be obtained from PHP in server side.

PHP function preg_match_all matches the regular expression globally and it is similar to /g modifier. All the matches and to be replaced values are saved in the array. After parsing all, those findings are replaced at once by str_replace function.
Img src : hughlashbrooke

URI.js – javascript library for working with URLs

URL is the address of World Wide Web page. A URL is a formatted text string used by Web browsers, email clients and other software to identify a network resource on the Internet. Network resources are files that can be plain Web pages, other text documents, graphics, or programs. URI and URL are sometimes used as synonyms but there is little difference between them. URL is technically a type of URI. For example: http://www.example.com/index.php is a URL. URL consists of scheme (or protocol), authority, path and query string. There may also fragment in the URL which the string after # sign in the URL.

We may sometime need to manipulate the url in our site. We can manipulate the URL string from the Javascript side also. Using pure javascript to manipulate is not impossible but very tedious. URI.js is the Javascript library for working with URLs. It offers a “jQuery-style” API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().

URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths. While URI.js provides a jQuery plugin. URI.js itself does not rely on jQuery. You don’t need jQuery to use URI.js.


How to use it?
First you need to include the javascript library in your page. You can download it from here. You can find URI.js file in the src folder. Now you are ready to use the awesome feature of this javascript library.
Lets take an example of manipulating URL string in ‘jQuery style’.

If you want to add ‘username’ in the URL string the use username() function and the library will place the name in the correct place and you dont need to worry a bit. Lots of API functions are available in the library like directory(), suffix(), hash(), fragment(), search(), tld(), hostname(), port(), domain(), subdomain(), etc. This plugin surely makes our life easy in manipulation of URL. relativeTo() and absoluteTo() functions are there to calculate the relative and absolute paths. Also you can easily normalize and clean the URL.

Want to compare two URLs. Dont worry! equals() function will check the URLs and return output as true or false. Moreover parsing URN will also be piece of cake using this library. In the latest version, it also offers jQuery integration. For the plugin to work, you need to regularly loadURI.js, as well as jquery.URI.js. URI.js does not depend on jQuery unless you want to use the URI.js jQuery Plugin.

We must appreciate the author of the library Rodney Rehm for the creation of such useful library.

You can find whole API documentation here [API Documentation]. If you want to understand more about the URL, visit this link [Understanding URIs].

There are some alternatives of URL manipulation library, if you dont like this URI.js.