Category Archives: JavaScript

jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released

There are actually two releases here. First is jQuery 3.0, which supports modern browsers and environments from IE9 forward. Second is jQuery Compat 3.0, which includes support for IE8. As an added bonus, both jQuery and jQuery Compat will include support for Yandex.Browser, a freeware browser released in 2012. You can get the files from the jQuery CDN, or link to them directly.

Source: jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released | Official jQuery Blog

A Quick Guide to Using LiveReload with Gulp 

Tired of having to refresh your browser every single time you make changes to your LESS/SASS/CSS files? This article will take you step-by-step to getting LiveReload integrated in your development environment so you no longer have to reload your browser to see changes.

Source: A Quick Guide to Using LiveReload with Gulp | Scotch

Resource – Intro to Grunt by Chris Coyier on 24 Ways

Grunt.js

Link:

http://24ways.org/2013/grunt-is-not-weird-and-hard/

Description:

Fantastic resource on getting started with Grunt.js. Practical implementations of script concats, minimizing, and automation. Recommend as a simple resource and starting template for many common web site tasks.

Notes:

JavaScript Bookmarklet: Outline/Border all Elements of Site for Quick Development & Debugging

Need to outline all HTML elements on an open web page? I’m sure there has been a time when you’ve used something like this to do so:

 * { border:1px solid red; } 

Which gives you a quick visual look at all elements on the page and how they align. It’s simple and by all means works just fine.

To make things even more convenient, here’s a quick and handy little JavaScript bookmarklet for you web developers to save. Full credit and thanks go to “beaver82” in the following /r/webdev/ thread. I’ve edited one of his/her original scripts to include a border instead of outline,  in case you do want to affect the box size.

Demo of the Outline Elements JavaScript Snippet

Demo of the Outline Elements JavaScript Snippet

Snippets:

The border/outline scripts are distinguished by the file names listed above.

Usage

  • Drag or save the JavaScript snippet desired (either js_border_elems.jsjs_outline_elems.js, or both) to your browsers bookmarks bar.
  • Name it something useful, such as “Outline * Elements
  • Click on the snippet to outline/border elements on the current page. Click again to remove the outlines/borders.

Enjoy! If you have any similar useful snippets, please do share them in the comments section.