Bootstrap Youtube Playlist Popup Player Plugin

In continuation to my previous Bootstrap YouTube Popup Player Plugin, which was only good for playing a single video, I've created another version which can work with a play-list of YouTube videos. It uses Bootstrap's Modal Popup to embed the YouTube Player and does not need any extra CSS at all.

Use the link below to view a demo or read the documentation on how to include this on your page. You can download the latest version of this plugin’s library from Github page.

Demo and Documentation: http://lab.abhinayrathore.com/bootstrap-youtube-playlist-popup/

Github: https://github.com/abhinayrathore/Bootstrap-Youtube-Playlist-Popup-Player-Plugin

Website Performance Optimization Checklist

Building high performance websites is very important because it helps in increasing the conversion rate on your website, especially eCommerce websites. There are many statistics on the web which proves that high speed websites retain more users and hence more revenue. You can checkout this nice info-graphic for a quick comparison. Even if you are not able to score a perfect 100 (not even Google.com) on the Google PageSpeed Testing Tool, at least try to stay above the 85% mark.

There is no single-bullet solution to making your site performing at top speed because every application or website is different in terms of it’s user base, data and interactivity on a multitude of devices. There are a lot of automated tools coming up like Google’s PageSpeed Module which will do most of the stuff for you or a plethora of automated build tools to perform optimizations at deploy time.

I myself was learning a lot of performance optimization techniques for my small sites but there isn’t once place where you can find links and tips to all the tools required. So, I thought of creating an exhaustive checklist of front-end performance tips and tricks. I am not a Guru in this field but this is my earnest effort to help other people like me who wants to do more fine grained optimization apart from using the automated tools.

Please visit this page and let me know if you know of any more ideas/tools/tricks which I might’ve missed:

http://lab.abhinayrathore.com/website-performance-optimization-checklist/

BTW, none of my websites will score 100% on Google PageSpeed Testing Tool because I simply don’t case that much optimization in favor of easy maintenance and ease of linking external libraries through CDN :)

jQuery Coding Standards and Best Practices

I’ve been using jQuery for the past couple of years and have seen a lot of bad practices and lack of standards knowledge between the developers. It’s always better to have standards defined around big teams so everyone’s on the same page. I took this effort to unify the coding standards and best practices around jQuery under one page so others can build upon it. Not all standards may apply to your application so feel free to use whatever works best for your application domain.

http://lab.abhinayrathore.com/jquery-standards/

If you find any mistakes, have any suggestions or comments, please feel free to drop a word below this post and I’ll try to address it as soon as possible.

Bootstrap YouTube Popup Player Plugin

If you liked my previous jQuery YouTube Popup Player Plugin, I've created a Bootstrap version which is very similar in use but uses Bootstrap's Modal Popup to embed the YouTube Player. This plugin will need the complete Bootstrap library or just the Modal component to run this plugin.

Use the link below to view a demo or read the documentation on how to include this on your page. You can download the latest version of this plugin’s library from Github.

 Demo and Documentation: http://lab.abhinayrathore.com/bootstrap-youtube/

 Github: https://github.com/abhinayrathore/Bootstrap-Youtube-Popup-Player-Plugin

jQuery Cheatsheet

The last and always up-to-date version of jQuery API Cheatsheet you’ll ever need. I use web-scraping to get the latest version of jQuery and then load the API information into a nicely printable cheat-sheet.

http://lab.abhinayrathore.com/jquery-cheatsheet/

jQuery and jQueryUI links for Google and Microsoft CDN's

The Google Libraries API and Microsoft Ajax Content Delivery Network (CDN) hosts the popular jQuery library and enables you to easily add them to your Web applications. For example, you can start using jQuery which is hosted on this CDN simply by adding a <script> tag to your page that points to a CDN link. These CDN's are very efficient and reliable as they have more replications to reduce latency. Browsers limit the number of concurrent connections (file downloads) to a single domain so using CDN's triggers parallel downloads leading to faster page loading. Here are some reasons to USE and NOT USE the CDN networks.

The versions of jQuery keeps getting updated every now and then and it's difficult to keep track of the latest releases. For that reason I've created a page that automatically pulls in the latest versions and links for the jQuery, jQueryUI and jQueryUI Theme libraries for both Google and Microsoft CDN's. Keep it bookmarked to stay up-to-date on jQuery releases.

http://lab.abhinayrathore.com/jquery_cdn/

Weather Geocoder with Google Maps and Google Weather API

I got tired of searching locations on weather reporting websites to get instant updates, so I thought of building an instant weather reporting application which would give me information for any location I click on the map. Google Maps API provides an inbuilt reverse-geocoding service which can geocode an IP Address to a place on the map. To get weather information, I’ve used the so called secret Weather API from Google which they use on the iGoogle page widget. Google has not officially published this API but we would love if they do so. The good thing about Google’s weather API is that it is easy to use and includes the weather icons, but there is no way as of now to get the data in other formats apart from XML:
http://www.google.com/ig/api?weather=Chicago.

Demo on my Labs page: http://lab.abhinayrathore.com/geocode_weather/

You can play around with the app on my labs page and view the source on the page to get the JavaScript code to build this tool on your own website. To convert the XML data from Google Weather API to JSONP, I’ve written a small PHP script you can download from the link below.

Click here to get the PHP Script for converting Google Weather API’s XML data to JSON/JSONP format.

You can style the Weather Information window according to your needs or you can use the one I’ve created: http://lab.abhinayrathore.com/geocode_weather/weather.css. You can freely modify the JavaScript code to suit your needs. If you find any bugs or see improvement opportunities, please do drop a comment below and I’ll look into it asap :)

del.icio.us Tags: Weather Geocoder,Google Weather API,Google Maps API,Google Maps Weather Geocoder