The Right Web Developer Portfolio jQuery Plugins

Any good web developer or designer has a web presence of their own and whether you are applying for a full time position or a freelance gig, having an impressive website can close the deal. One important aspect is making sure the design of the site is up to presence web standards.  And that means taking advantage of some off the shelf jQuery that can enhance things.

Make your portfolio site stand out with these cool jQuery plugins.

Arctext.js 



Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.


CollagePlus



Every development or design portfolio needs a good looking gallery. CollagePlus arranges your images in a clean grid within a container. There are several different options for customizing image hover and load effects.


Swipebox



Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.


Adipoli 2.0 



Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.

Spectragram.js 



Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.

Interesting unknown facts about jQuery

Interesting unknown facts about jQuery
It's been 9 years since the first release of jQuery and since then it has come a long way. And in these years, jQuery has made an immense impact on website development. But it's always exciting to go back to history and find out how it started. Recently, John Resig (jQuery creator) annotated the first known copy of jQuery’s source code and shared his memories.

Below are some interesting unknown facts of jQuery, I came to know from reading Resig’s annotations.
  • jQuery was originally called "JSelect" (for selecting elements out of the page, plus it started with JS, which was nice). However the domain name jselect.com wasn’t available, thus jQuery it was.
  • There apparently was another project (a Java SQL library) named jQuery. But John Resig only found this out later after he was contacted by them about the name conflict!
  • The public announcement of jQuery was in January 14, 2006 at BarCamp NewYork.
  • jQuery was inspired by following open source projects.
  • The first release of jQuery didn’t include any Ajax functionality! jQuery 1.0 had Ajax built-in natively.
  • The first jQuery plugin was created by Michael Geary on January 25th, just 11 days after the first release of the library (even before this particular version of the file!): JSON for jQuery
  • The original version of jQuery supported IE 5. But this was dropped very soon and ""upgraded"" to IE 6.
  • There were no optional curly braces used in initial release of jQuery. You will find such code in first version of jQuery.
    if ( !b )
      for ( var j in a )
        this.style[j] = a[j];
    else
      this.style[a] = b;
    
  • jQuery had proper method chaining from the very beginning. The chaining in jQuery has gone on to influence a large number of other libraries, even in other languages, which is pretty cool. It even included new conventions like .end() which allowed you to “pop” off of the chain stack.
  • The first release also had a check to include jQuery library after the prototype library.
    setTimeout(function(){
       if ( typeof Prototype != "undefined" && $.g == null && $.clean == null )
         throw "Error: You are overwriting jQuery, please include jQuery last.";
     }, 1000);
    
You can find all the thoughts and memories around the release of the code at Genius put by John Resig. And you can also take a look at original version of the jQuery site

You may also like: Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery code to share content on whatsapp

In this short post, find jQuery code to share any content on whatsapp. The code first checks for mobile device and if it's a mobile device then it just creates whatsapp URL with user defined text and link to share and then just redirects it. That's it.

jQuery code to share content on whatsapp

$(document).ready(function () {
   $(document).on("click", '.whatsapp', function () {
      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        var sText = "Text to share"; 
        var sUrl = "Link to share";
        var sMsg = encodeURIComponent(sText) + " - " + encodeURIComponent(sUrl);
        var whatsapp_url = "whatsapp://send?text=" + sMsg;
        window.location.href = whatsapp_url;
     } 
     else {
        alert("Whatsapp client not available.");
     }
  });
});
You may also like:
Feel free to contact me for any help related to jQuery, I will gladly help you.

10 jQuery image crop plugins for your next project

In this post, find a compiled list of 10 best jQuery image crop or resize plugins. All these plugins present very useful and beautiful interface to crop the image. Some of these plugins also support responsive cropping, image uploading and drag and drop of selected area for cropping. Enjoy.

You may also like:

jQuery FocusPoint

FocusPoint is a jQuery plugin for responsive cropping. It dynamically crops images to fill available space. It makes sure your image looks great in any container, by ensuring the 'spare' parts of your image (negative space) are cropped out before the important parts.


picture cut

picture cut is a jquery plugin that handles images in a very friendly and simple way, with a beautiful interface based on bootstrap or jquery ui, has great features like ajax upload, drag image from explorer, image crop and others.


cropimg

Another cropping jQuery plugin.


CropBox

Cropbox is a lightweight and simple jQuery plugin to crop your avatar.


Cropit

A jQuery plugin for image cropping and zooming. It loads images locally via FileReader, and does cropping using canvas.

jCrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.


croppic

croppic is an image cropping jquery plugin that will satisfy your needs and much more.


Image Cropper

A simple jQuery image cropping plugin.



Fakecrop

jQuery-Fakecrop Plugin takes a collection of images and automatically scale them to fit a custom-defined bounding box. This creates a "fake" cropping effect on those images; which produces convincing thumbnails.


CropZoom

CropZoom is a jQuery plugin to crop, zoom and rotate images.

12 Best Tutorials To Learn AngularJS

Are you thinking about learning AngularJS and don't know where to start? Recently, I had posted about 4 Free ebooks to learn AngularJS and if you don't want to read those long books to start, here is a complied list of 12 best AngularJS learning tutorials and sources. These tutorials are interactive and covers all the core concepts of AngularJS which is enough to kick start Angular. Enjoy!!!


1. AngularJS: A Comprehensive Guide

The title AngularJS Tutorial: A Comprehensive 10,000 Word Guide says it all. Written by Google Developer Expert (GDE) Todd Motto, this Angular tutorial serves as an ultimate resource for learning AngularJS. This comprehensive guide talks through all core concepts of AngularJS to start with in great detail and information.


2. Thinkster.Io

This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Their desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them.


You may also like:

3. ng-newsletter

ng-newsletter website provide free, weekly newsletter of the best AngularJS content on the web. They have 7 articles series which helps you to become expert from beginner in AngularJS. They also have a seperate post about How to Learn AngularJS - Your AngularJS Sherpa which is like your personal guide of how to learn AngularJS.


4. AngularJS In 60 Minutes

This is a video tutorial in which you'll learn how to get started with the AngularJS SPA framework. First you'll be introduced to what a SPA is and AngularJS features that simplify building SPAs. From there you'll see how to use directives, filters and data binding techniques. Next up is views, controllers and scope and the role they play followed by a discussion of modules, routes and factories/services. At the end a sample application built using AngularJS is shown. This was made using Angular 1.2 and some features were updated in Angular 1.3.


5. Egghead

Egghead is another one of the best AngularJS learning centers. It provides 190+ free AngularJS videos for learning Angular in a straight and easy way.


6. Learn AngularJS in one day

Another great article by Todd Motto, on learning AngularJS. It covers all the primary parts of AngularJS: Controllers, Data Binding, Factories, Expression, Routes, Services, Directives and more.


7. Shaping up with AngularJS

Shaping up with AngularJS is a free interactive course which is an amazing kick start to AngularJS. This course provides just the right mixture of basic coding knowledge and structure to get a new Angular programmer up to speed. It has 5 levels which have about 12 videos and 27 challenges.


8. Tutorials Point

This tutorial is designed for software professionals who want to learn the basics of AngularJS and its programming concepts in simple and easy steps. It describes the components of AngularJS with suitable examples. This well structured tutorial covers all the core features of AngularJS. In the end, it also has Quick Guide to summarize things.


9. Thinkful Tutorial

This tutorial helps you to learn core AngularJS concept along with building a simple email application. By the end of this tutorial you'll be able to see (fake) emails, search by subject line, and read / delete emails. This tutorial covers Single page applications (SPA), Client-side MVC patterns, Two way data-binding, Routing with templates, AngularJS building blocks: Directives, Factories, & Controllers and many more.


10. Year Of Moo

This article briefly outlines what Angular can be used for and the basics of how it works. The article covers controllers and scope, services, models, templates, directives, filters, modules and configurations. This article also explains how angular can be used with MooTools and JQuery in harmony.


11. AngularJS Official Website

The AngularJS official website also has good tutorial which explains AngularJS concepts and walks you through the construction of an AngularJS web app. Though the official documentation is not up to the mark but its still worth to read and not to miss out.


12. Learn Angular (Beta)

Learn Angular helps you to learn AngularJS through interactive lesson. The great thing about this website is that along with reading articles, it also has code editor which allows you to write AngularJS code and then test code output in browser.


Hope you find this list useful. Please comment if you have anything else to add to this list.
Feel free to contact me for any help related to jQuery, I will gladly help you.