JavaScript Kit- What's New?

JavaScript ES6 adds a slew of new features to the JavaScript language, some more groundbreaking and widely applicable than others. In this article I list the top 5 JavaScript ES6 features I find most indispensable.

A comprehensive introduction to CSS Variables, which is a new browser feature that lets you store and reuse CSS values in your CSS. Unlike variables in CSS Preprocessors, CSS variables are live, and accessible using JavaScript.

The trend for search boxes these days has been bigger and bolder. This tutorial shows how to create a slick, well engineered full screen search form that works beautifully across all modern browsers and devices.

CSS's venerable :hover pseudo class presents a bit of a conundrum on touch screen devices, where the :hover style stays with the element the user just tapped on until he/she taps again elsewhere in the document. This tutorial looks at 4 creative ways to deal with "sticky hover" effects on mobile devices.

In this tutorial, I'll go over the key elements that make up CSS Flexbox, plus show you some common Flexbox patterns to validate its usefulness. After this leisurely read you'll wonder how you ever went by so long without flexing.

In this tutorial, we'll see how to read the textual contents of a user selection, dynamically select some text on the page, and last but not least, copy whatever is selected to clipboard, all using just JavaScript. It's certified Flash free!

JavaScript Promises are a new addition to ECMAscript 6 that aims to provide a cleaner, more intuitive way to deal with the completion (or failure) of asynchronous tasks. In this tutorial we'll deliver the promise of JavaScript Promises to the uninitiated!

A hot trend in web design these days is the use of sticky
headers, where the header becomes temporarily fixed on the page whenever the
user starts to scroll past it, keeping the element in view. In this tutorial
we'll dissect the making of a well engineered sticky header using jQuery and CSS.

One of the exciting new additions to ECMAscript 6 is Arrow
Functions, a compact way to define anonymous functions that also simplifies the
handling of the "this" object inside it. In this tutorial we'll go
over all you need to know about the new function syntax before it supplants
anonymous functions everywhere.

A site's mobile usability will now play an important role in how well your site ranks on Google for mobile searches. In this quick start guide we show you how to quickly address the key mobile issues that result in a failing grade for Google, and also, tips on taking your site a step further to become fully responsive.

In this tutorial we'll see how some careful stacking of two images in CSS can make way for a quick "before" and "after" image effect, whereby moving the mouse over the image container peels back one image to reveal another.

Parallax scrolling is a visual technique where elements on the page move or animate at different speeds as the user scrolls the page, creating depth and visual intrigue. This tutorial walks you through how to create a simple parallax scrolling effect using CSS and JavaScript.

With today's challenge of building webpages that look right in the myriad of different devices comes CSS media queries, a nifty CSS feature that builds upon CSS Media types of CSS 2.1 to help you easily cater your page based on the aforementioned factor and more.

HTML5 introduces DOM Storage, a new way of storing data on the client side that overcomes the disk space limitations of JavaScript cookies. This tutorial looks at how to take advantage of DOM Storage in browsers today.

Most of us are familiar with using object detection or the Navigator object to check for backing for a given JavaScript object or method, but these techniques do not work well when the objective is to check whether the browser supports a particular HTML element, such as the <canvas> element. This is where document.createElement() can be very helpful.