Like most web developers, I spend my days giving instructions to
computers. These instructions generally involve some input (a request
for a web page), some logic (get the right content from a database) and
some output (send the content to the requesting browser). This process
of telling a computer how to perform a task, such as generating a web
page, is what we commonly call “programming,” but it’s only a subset of programming: imperative programming.
There’s another type of programming, declarative programming, that
most web developers also use every day but don’t often recognize as
programming. With declarative programming, we tell a computer what, not how.
We describe the result we want, and the details of how to accomplish it
are left to the language interpreter. This subtle shift in approach to
programming has broad effects on how we build software, especially how
we build the future web.
So, let’s take a moment to investigate declarative programming and the web we can build with it.
Hidden In Plain Sight
Declarative languages tend to fade into the background of
programming, in part because they’re closer to how we naturally interact
with people. If you’re talking with a friend and you want a sandwich,
you don’t typically give your friend step-by-step instructions on how to
make the sandwich. If you did, it would feel like programming your
friend. Instead, you’re far more likely to talk about the result you
want, such as “Please make me a sandwich” (or, perhaps, “Sudo make me a sandwich”).
If your friend is willing and able to follow this instruction, then
they would translate the phrase “Make me a sandwich” into a series of
steps, such as finding a loaf of bread, removing two slices, applying
toppings, etc.
This type of result-focused instruction is how declarative programming works,
by leaving the logic of how to implement requests to the system that is
interpreting the language (for example, your friend). When we want an
image in an HTML document, for example, we simply include an <img>
tag, and then the system that interprets the HTML (typically, a
browser) would handle all of the steps needed to display that image,
such as fetching it from a server, determining where exactly to render
it, decoding the binary data, scaling the image and rendering it to the
screen. We don’t have to explain any of this, so we often forget that
it’s all happening and that someone programmed both how it happens and
how that complex process is derived from a simple <img>.
Another factor that makes declarative programming hard to see as
programming on the web is that it “just works.” A lot of work went into
making languages like HTML, CSS and SQL capable of providing enough
clarity on what needs to be accomplished that the steps required to
achieve a result can be determined without detailed instruction. But
most web developers began using these declarative languages long after
the hard work of building them was complete, so we just see them as normal and ordinary and just a natural part of the way the web works.
When web developers do get involved in declarative
programming before the interesting work is done, it’s typically while
developing an API for a website. Most APIs are implemented via declarative programming.
Rather than provide a way to give a website step-by-step instructions,
APIs usually have a simple language that can be used to express the
desired result. When we want to get some tweets from Twitter’s API, for
example, we give a description of the tweets we want, such as
“everything from @A_single_bear.” If the API is imperative, we would
instead describe the specific steps we want Twitter to implement on our
behalf, explaining how to load, format and return the tweets.
Thankfully, the API hides all of that logic behind a simple declarative language, so we only need to describe what we want, not how to get it.
Two Paths Forward
Once we realize how widespread declarative programming languages are
on the web, it’s hard to imagine the web without them. Hard, but not
impossible. As JavaScript has grown to be ubiquitous, the tools we would
need for an imperative-only web are easy to find. We could swap out
HTML and CSS for rendering directly in JavaScript. We could swap out SQL for a JavaScript-native database (or two). And we could swap out calls to declarative web APIs with imperative calls to JavaScript functions, even across the gap between client and server.
We could put all of this together and entirely stop using declarative
languages on the web, even before we get into more advanced
technologies heading in our direction, like asm.js.
We can, now, build the web equivalent of mainframes: large, powerful
systems built not as a collection of disparate parts but as a cohesive
whole. We can now JavaScript all the things.
We’ve tried this before, with technologies like Java and ActiveX. And
some organizations, such as AOL, have even had success building a less
messy web-like stack. The difference this time is that the technology
available to build these “mainframes” is part of the open web stack, so
that anyone can now make their own self-contained web-like stack.
An imperative-only JavaScript web is enticing if we understand the
web as open technologies and connected documents. But if we expand our
understanding of the web to include connected systems, then declarative programming is a key part of how we connect those systems.
With that understanding, we should be heading in another direction.
Rather building more complex systems by replacing declarative
programming languages with imperative programming, we should be wrapping
more and more of our imperative code in more and better declarative
languages, so that we can build future complex systems on top of our
current work. Rather than looking at JavaScript as the modern Java or
C++, we should be treating it as the modern shell script, a powerful
tool for connecting other tools.
By defining the implementation details in the language itself,
declarative programming allows imperative languages such as JavaScript,
PHP and Ruby to use the results as steps in more complex behaviors. This
has the advantage of making a behavior available to a variety of
languages, including languages that don’t exist yet, and it also gives
us a solid foundation on which to build higher. While we could
build our own document-rendering system in JavaScript or Python, we
don’t need to because HTML has already solved that problem. And we can
reuse that solution in any imperative language, freeing us to solve new,
larger problems. JavaScript can draw an image on a canvas and place it into a document with HTML. Your friend can make you a sandwich and
a fresh lemonade. But we’ll get to this future web only by valuing
declarative programming as an approach worth maintaining, now that it’s
no longer the only option.
Declarative First
When we start building a tool on the web, we often jump right into
making it do what we want it to do. A declarative-first approach would
instead start with defining a language to succinctly describe the
results we want. Before we build a new JavaScript library for building
sandwiches (or, of course, another), let’s consider how we might describe the results in a declarative programming language. One option would look something like {"bread": "rye", "cheese": "cheddar"}, while another would look more like <sandwich><cheddar /><rye /></sandwich>.
There are many choices to make when designing a declarative language,
from high-level format choices (JSON? XML? YAML?) to details of data
structure (is cheese an attribute of a sandwich entity or an entity in
the sandwich’s toppings list?). Making these decisions early could
improve the organization of your later imperative implementation. And in
the long run, the declarative language might prove to be more important
than the amazing sandwich-making implementation, because a declarative language can be used far beyond an individual implementation.
We can see some of the advantages of a declarative-first approach in
public projects that have taken both approaches. For example, three
years ago the Sunlight Foundation started working on a project to make
it easier for people to contact members of the US Congress. They began
with a Ruby app to automate the submission of contact forms, Formageddon. This year, they launched a new declarative-first effort toward the same goal, the Contact Congress project, starting with a declarative language that describes contact forms.
The activitygraphs
and timelines of the two projects make it clear which approach won out,
but the benefits of the declarative approach go beyond the direct
results. The YAML files produced by the declarative approach can be used
to build apps like Formageddon, but they can also be used for other
purposes, ones not even intended by their creators. For example, you
could build an app to analyze the descriptions of contact forms to see
which topics members of Congress expect to hear about from their
constituents.
Successful declarative programming is in some ways more challenging
than imperative programming. It requires clear descriptions, but also
requires knowing enough about imperative implementation to know what
needs describing. You can’t just tell an app where a form is and expect a
valid submission, nor can you say <greatwebsite> to a
browser and get what you want. But if you’re up for the challenge, the
rewards of a declarative-first approach are also greater. Declarative languages often outlive their imperative implementations.
Try starting your next web project with declarative programming. See
what languages you can find that already describe what you’re making,
and write your own simple languages when you can’t find anything. Once
you have a declarative definition of what you want to make, build it
with an interpreter of those languages. You’ll probably end up making
something more useful than you would have with an imperative-first
approach to the same problem, and you’ll improve your imperative
approach in the process.
jQuery is one of the most accepted JavaScript library that possesses an enormous collection of plugins which makes it even more powerful. On the other hand, there is a good deal of additional codes or modules, from simple alert functions to multifaceted galleries or form validation methods, that are hard-coded inside websites & not convinced to plugins.
Of course, not each code must become a plugin that would be worthless. However converting the ones to be re-utilized will save loads of improvement time & if shared with the community, will make the code itself better.
In this post, you will unearth some of the most excellent, interesting fresh and useful jQuery plugins and tutorials that were created in 2011. File Uploads with jQuery
( Demo | Download )
This plugin will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers. ComboGrid
( Demo | Download )
Combogrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigation support for selecting an item. MotionCAPTCHA
( Demo | Download )
MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form. Elastislide
( Demo | Download )
With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. Spin.js
( Demo | Download )
The spin method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered. Craftyslide
( Demo | Download )
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. Arbor.js
( Demo | Download )
Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. Recurly.js
( Demo | Download )
Recurly.js allows you to easily embed a PCI compliant order form within your website. Recurly.js is a Javascript library designed to be easily embedded and customized to match your website.
How to Block Adblock
( Demo | Download )
With this friendly jQuery plugin you can easily blog Block Adblock. Power PWChecker
( Demo | Download )
Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure. Power PWChecker also allows you to enforce password length policy by specifying minimum and maximum password length. It also matches password entries and provides visual alert in case of inconsistent passwords. Sisyphus
( Demo | Download )
Imagine you’re filling a complex form on site, or typing effervescent and extensive comment. And when you’re almost done with that browser is crashed, or you closed tab mistakenly, or electricity is turned off, or something else break your efforts. Disgusting, huh? With Sisyphus on site you just reopen page in your modern (with HTML5 support) browser and see all your changes at that forms. It’s lightweight (3.5 KB) jQuery plugin uses Local Storage to prevent your work being lost. Response Javascript
( Demo | Download )
Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties. Responsly.js
( Demo | Download )
Responsive designs are cool! Not only do they allow you to reach mobile and tablet users with minimal effort, they also make your context scale up for desktop users with larger screens. Fitvids.js
( Demo | Download )
A lightweight, easy-to-use jQuery plugin for fluid width video embeds. Isotope
( Demo | Download )
Isotope: An exquisite jQuery plugin for magical layouts Slidorion
( Demo | Download )
Slidorion is a combination of an image slider and an accordion; displaying beautiful content through various effects. Diapo
( Demo | Download )
With Diapo plugin you can creat a beautiufl slideshow. Minimit
( Demo | Download )
Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states. Circular Content Carousel
( Demo | Download )
The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position. HTML5 Music Player
( Demo | Download )
With this plugin you can create HTML5 Music Player. jQuery Mobile
( Demo | Download )
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Lettering.js
( Demo | Download )
A jQuery plugin for radical web typography. Multi Node Range Data Slider jQ Slider
( Demo | Download )
JQ Slider is a multi-node range and data slider that allows to provide easy-to-use user data selection and filter tool. It can be used in many ways. Xml Driven Vertical News Scroller Script Using jQuery vScroller
( Demo | Download )
Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space. It also allows you to add dynamic content to otherwise static web pages. jQuery Sliding Content Bar Plugin
( Demo | Download )
It is a smart and quick content bar that you can integrate easily in any website or web application. It is integrated seamlessly in your website and can be popped up whenever required. PushUp Content Bar is easy to customize and strong enough to rely upon. You can add your contact details, location map via Google Maps, and a simple contact form that visitors can use to make contact with you. Gmap3
( Demo | Download )
gmap3 is a jquery plugin which allows many manipulation of the google map API version 3. Skitter
With this plugin you can generate outstanding slideshows for your website. jFontSize
( Demo | Download )
The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content Wave Display Effect with jQuery
( Demo | Download )
How cool is it to sometimes just display content a little bit differently? This plugin let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content. Simple jQuery Fluid Thumbnail menu Bar
( Demo | Download )
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. Useful image hover slide effect with jQuery
( Demo | Download ) jQuery plugin: Easy Image Zoom
( Demo | Download )
This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image. ImageLens
( Demo | Download )
Use this jQuery plug-in to add lens style zooming effect to an image Slides
( Demo | Download )
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. jShowOff
( Demo | Download )
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. Easy Paginate
( Demo | Download )
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. It’s main purpose is to view certain number of list items at once, but it can also be set up to view one item by one. Responsive Image Gallery with Thumbnail Carousel
( Demo | Download )
Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard. PhotoSwipe
( Demo | Download )
Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard. Elycharts
( Demo | Download )
Elycharts is a pure javascript charting library, easy to use and completely customizable. Blueberry
( Demo | Download )
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts. GALLERIA
( Demo | Download )
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices. jQuery Image Gallery
( Demo | Download )
With this plugin you can create a beautiful jQuery Image Gallery. Shuffle Letters Effect
( Demo | Download )
This jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows. SmartGallery
( Demo | Download )
SmartGallery is an interactive image gallery that is specifically designed to support huge data. It is lightweight, lightening fast and fully customizable. Powered by jQuery, SmartGallery comes with twelve transition effects including some unique transition effect and thumbnail navigation. BxSlider
( Demo | Download )
BxSlider will allow you to create a beautiful Content Slider for your website. FitText
( Demo | Download )
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. jQuery Pagination revised
( Demo | Download )
The pagination plugin combines a varity of features. It can be used to divide long lists or areas of content into multiple seperate pages, load paged content with pre-calculated database offset-parameters via Ajax and anything with full control to adapt the style properly to your site-layout. Of course, creating simple links with no event triggering is possible as well. The plugin also offers the facility to “overlap” pages, which means you can show elements of previous pages on the subsequent sites in order to allow a straightforward flow of reading. E24TabMenu
( Demo | Download )
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly. Snippet
( Demo | Download )
Snippet provides a quick and easy way of highlighting source code passages in HTML documents. AJAX PAYPAL CART
( Demo | Download )
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.
jQuery is one of the most accepted JavaScript library that possesses an enormous collection of plugins which makes it even more powerful. On the other hand, there is a good deal of additional codes or modules, from simple alert functions to multifaceted galleries or form validation methods, that are hard-coded inside websites & not convinced to plugins.
Of course, not each code must become a plugin that would be worthless. However converting the ones to be re-utilized will save loads of improvement time & if shared with the community, will make the code itself better.
