Introduction to JSON

With JavaScript we typically manage, store and pass around data via objects. However, there comes a time when you need to use data outside of JavaScript, either by sending (or retrieving) it from a web service, or perhaps by storing it locally in the browser.

Where XML is notoriously difficult to parse in some cases, using JSON (JavaScript Object Notation) to store our JavaScript objects in the form of a string, it makes it lots easier to read and parse data.

Taking a simple JS object (in literal expression notation):

we can easily stuff it into a string:

You will notice JSON is broken down into a key/value pair wrapped in quotes. The data types can only be strings, numbers, objects, arrays Booleans or null. Continue reading

CSS Preprocessors

CSS has no memory or intelligence, meaning you’ll have to write certain style declarations again and again. Plus if you have to change something, you’ll have to find those places again and hand-edit them (even with using Object Oriented CSS).

CSS_preprocessorsPreprocessors take some ideas from hardcore computing programming and puts them back into CSS. The benefits include reusing the same code across multiple projects, change an entire site’s styling with a few edits, completely separating styling from content mechanics.

But since no direct browser supports preprocessed CSS you must either compile your pre-CSS on your development machine and upload the standard CSS that is generated or can setup your server to work with the raw pre-CSS files generating the CSS on the fly.

There are three main CSS preprocessors used right now: Continue reading

Git Overview

Git is version control software that keeps track of changes that you make to files and directories, and it is especially good in keeping track of text changes that you make.

guthubGit thinks of its data like a set of snapshots of a mini-filesystem. Every time you commit, or save the state of your project in Git, it basically takes a picture of what all your files look like at that moment and stores a reference to that snapshot.

Everything in Git is check-summed before it is stored and is then referred to by that checksum. This means it’s impossible to change the contents of any file or directory without Git knowing about it.

Git is most useful for people who are not afraid of command-line tools. There are graphical user interfaces that can be used with Git, but it is first and foremost a command-line tool which is part of why it stays so popular with programmers and developers who aren’t afraid of those command-line tools. Continue reading

CSS Tip: Reset Methods

The browser will give elements such as the body, headings, paragraphs and lists certain margins, line heights and padding by default. If we don’t reset any of the default CSS parameters, the browser will use its own default parameters instead.

Since different browsers have different default CSS, a site layout can end up looking inconsistent, depending on which browsers you use. That’s why it’s usually good practice to use a CSS reset, because it gives us a good baseline for laying out pages by completely removing certain browser style inconsistencies such as margins, padding, line height, and heading font sizes.

There are two common CSS reset methods used today, Eric Meyers’ reset CSS and normalize.css.
Continue reading

Convert Click to Touch Events

Have you ever noticed the delay that occurs between the time you tap your screen and page activity?

On touchscreen devices, the onclick event doesn’t fire immediately. Instead, the device waits up to a half a second. This provides the user with an opportunity to initiate some other gesture instead of a click.

Use the touchend event instead, which fired immediately when the user taps the screen. You may still want to handle the onclick event to ensure that the browser changes the appearance of the button to show a clicked state, and to support browsers that don’t handle touch events.

To prevent duplicate code of execution when both touched and onclick code fire, add a click event handler that calls preventDefault and stopPropagation if the click was the result of a user tap already handled by touchend.

Note: A jQuery plugin alternative would jquery.tap or touché.

Responsive Retrofit Mobile

Responsive retrofitting has been defined as as finding the fastest and lowest-risk approach to creating a better experience for users of any screen size.

An issue with this is when a site has such complex styles it would be very difficult to undo for smaller layouts. In this type of situation, you may want to serve mobile first styles to viewport widths leading up to the current site’s fixed with resolution.

The goal with this approach is to have zero impact on the original CSS for larger viewport widths, but to use a mobile-first CSS structure leading up to that resolution without having to undo overly complex styles from the original CSS.

We’re using yepnope.js and Modernizr media query test to check if the UA supports media queries (and has JS enabled). Where it does, we serve the responsive CSS. In the cases where it doesn’t, or when we don’t have JS enabled, we serve the original CSS.