JavaScript & jQuery

JavaScript & jQuery Tutorials

What is JSON? An Introduction and Guide for Beginners

What is JSON? An Introduction and Guide for BeginnersIf you’re new to web development and have some basic knowledge of HTML, CSS, and possibly a little bit of JavaScript, a practical area in which to expand your front-end skills is JSON.

But even if you already have a basic understanding of what JSON is and have used it in some of your projects, there might be a few things you weren’t aware of. So in this JSON tutorial and guide, I’m attempting to provide a fairly comprehensive discussion of JSON, its history, and its usefulness. I’ll close with a list of some practical JSON tools that might come in handy in future projects.

npm for Beginners: A Guide for Front-end Developers

npm for BeginnersUnless you’ve been under a transpiler-sized rock for the past five years or you’re an absolute beginner to front-end coding, then you’ve probably heard of npm.

Maybe you’ve clicked through to the GitHub repo of a tool of some kind, and you noticed the installation instructions had a couple of different possibilities, including something like this:

Animating from “display: block” to “display: none”

Animating display: block to display: noneAs you might already know, CSS3 transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the display property.

It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.

HTML5 History API: A Syntax Primer

History WheelAs most of us probably are aware, a significant part of the HTML5 spec is the expansion of the History API.

This post will not be a super extensive discussion of this subject, especially since it’s something that I’m only now just getting into understanding better. But I thought I would put down the main components of the API, for my own quick reference, and I hope it will prove useful to my readers and those searching via Google.

thatsNotYoChild.js — Fixing Parent-Child Opacity

Parent/Child signOne of the posts on this website that consistently gets a significant amount of traffic (5000+ page views this month alone) is a ridiculous article I wrote that discusses how to make a child element not inherit the opacity setting of its parent.

As we all know, opacity property can be annoying in this area.

Basically, if a parent element has an opacity value set at, say, 0.5, all of its children will inherit that opacity setting, and there’s no way to reverse that opacity on the child elements.

JavaScript ‘this’ in Different Contexts

JavaScript thisJavaScript has a reserved keyword called this that references something different depending on where you are in a JavaScript program.

In this post I’m going to summarize, by example, some different contexts and discuss what “this” would represent in each case. Note that all of these examples assume you’re developing client-side JavaScript in a browser.

My Current JavaScript Design Pattern

My Current JavaScript Design PatternWith every major JavaScript project, I’ve tried something new, improving on what I’ve written before. Currently, whenever I build something from scratch, I use a variation of what Addy Osmani and others commonly refer to as the module pattern.

Here is my version below, which assumes jQuery, and then I’ll provide some explanation of what’s going on here and how I use it:

JavaScript Array Methods Reference

JavaScript Array Methods ReferenceBack in July I wrote a post called JavaScript String Methods Reference, outlining many of the ways strings can be manipulated in JavaScript.

Another area where JavaScript has a number of different methods available for use is Array manipulation, which I’ll cover in this post. As usual, I’ll do my best to keep it simple and accurate, but if I’ve erred or if you think I’ve omitted anything important, please comment.

Loading a Different jQuery Version for IE6-8

Loading a Different jQuery Version for IE6-8If you haven’t heard yet, last week the jQuery team announced on their blog that jQuery 2.0, which is scheduled for an early 2013 release “removes support for IE 6/7/8 oddities such as borked event model, IE7 ‘attroperties’, HTML5 shims, etc.”

In this post, I’m just briefly showing everyone a simple solution for serving a different version of jQuery (or really, any script) to Internet Explorer versions 6-8.