JavaScript Tip: Console.log

In JavaScript development, a very useful method for finding out the details about a JavaScript item (variable, object, property, etc) you have, is the console.log() method. This allows you to place things in the console rather than somewhere on your page (like using an alert() method).

Browser Support

  •   Chrome, Safari, Opera: native console.log()
  •   Firefox: native console.log() with Firebug
  •   IE9: native console.log(), but it needs Develop Tools to be turned on first.
  •   IE8: Do not bother, use Firebug Lite instead.

Most Popular jQuery Plugins for 2013

  1. jQuery Migrate – version 1.9 of jQuery deprecated or removed a number of methods that had long since been on the chopping block. Because these changes could potentially break existing web sites, the team introduced the jQuery Migrate plug-in, which works to restore this functionality
  2. Cycle 2 – a versatile slideshow plug-in that is super easy to setup and customize. It supports all browsers and is declarative and responsive.
  3. FitVids.js – allows for fluid-width video embedding, while maintaining the original aspect ratio. This plugin takes out the tedious CSS hacking that is required when working with video hosts such as YouTube and Vimeo.
  4. TypeAhead – is a fully documented, well-built and fast autocomplete library. You just provide a dataset, optionally set a template that will be used for the dropdown menu, and that’s it.
  5. Nested – is a beautiful multi-column grid plug-in that allows for creating dynamic, gap-free layouts. It accomplishes this by creating a matrix of all applicable elements.

Website Transition Checklist

When redesigning a website (static or CMS) for a new client, it normally will include moving the site to a different webhost. This can be a little tricky depending on certain conditions, so I always try to have a checklist to make sure I do not forget things before going live on the new webhost.

Here are some common tasks to perform before launching a new site on a new webhost (where applicable) in no particular order:

  • Backup old site files
  • Test on all current browsers
  • DNS switch to new hosting
  • Test all submission forms and email received
  • Change all email POP accounts
  • Test intra-site search
  • Update robots.txt and .htaccess
  • 301 redirects
  • Update XML sitemap
  • Update Google Analytics
  • Test 404 page
  • Test for broken links
  • Check loading speed and performance
  • Re-install and test SSL certificate

JavaScript Tip: Event Registration

JavaScript normally runs code sequentially, which means in the order that the browser reads it from your file, but we can write JavaScript code that will run only when something happens in the browser. That’s because browsers can trigger events, when things happen to elements on your page.

When the page loads in a browser, when the user moves the mouse over a link, when a video has finished loading, or when a form is submitted are events. So if you want to take care of a task when something happens you have to capture that event, and that’s done through a process called event registration.

This means telling the browser that you want to do something when an event takes place, and there’s several ways of doing that. Some are more compatible with older browsers than others.

The first (but legacy) way of doing this is by using tag attributes, and this works pretty simply.

Read more ›

What is Information Architecture?

Imagine your local supermarket/grocery store has just been renovated. The owners have expanded it to include more items, and improved the layout so you can move around more easily. And you’re seeing it all for the first time.

You walk in craving chocolate, head to where it’s usually kept and realize that, wow, everything has been moved. How can you quickly make sense of it and find the chocolate? After all, you don’t want to check every item on every shelf. You look at the signs, but they all point to where stuff used to be. No help there.

Why was this relatively easy, even though they’d moved everything around? Read more ›

JavaScript Tip: Rendering Engines

A rendering engine in a browser creates what you see on a screen. There are different ones for each browser.

Firefox Gecko Gecko
Internet Explorer Trident
Chrome Webkit
Safari Webkit
Opera Webkit

When you talk about code working differently in different browsers (modern browsers), you are generally referring to the rendering engine. That’s why you have very few differences in support between Chrome and Safari; they are both built on the same open source rendering engine, Webkit.

Some rendering engines are faster than others, but this also extends to the JavaScript engine in each browser. Just as some rendering engines are better than others, the same can be said about JavaScript engines that are built into the browser. The speeds of these JavaScript engines vary greatly, and this is generally why JavaScript is so slow to execute when compared to other technologies, like CSS.

HTML5 Geolocation

One of the most exciting and challenging changes to the web has come about the proliferation of smart mobile devices, phones and tablets in the past few years.  Where it used to be the case that web access meant being tied to a desk, increasingly it’s just as likely that your website will be viewed on a mobile device as a traditional computer.

This change in usage and consumption heralds a huge opportunity to redefine how we present content; it prompts us to consider the user and their requirements in ways we’ve never needed to before. Nowhere is this more significant than in the growing market for location-aware applications, where content is specifically oriented towards both the user and their current position.

These apps take advantage of a hardware enhancement common to most modern smartphones running software from Apple, Google and Microsoft – the GPS chip. The opportunities this innovation offers aren’t limited to native apps, however; HTML5 offers us the ability to query the user’s location and tailor our web content accordingly.

The geolocation element of HTML5 is made available through an API, accessible with JavaScript. The location isn’t dependent upon the device accessing the page having a GPS chip, so any HTML5-capabile browser with support for the geolocation API will attempt to locate the visitor using available means (including known Wi-Fi networks, Bluetooth, RFID, etc.).

geolocation

The user has to explicitly choose to share their location through the API before any results are returned to the browser, so typically  a user will see a pop-up inviting them to consent to sharing their location with your website.
Read more ›



Page 11 of 18« First...101112...Last »