Total results: 26

Install Node.JS on Debian Wheezy

Official Method

The official Node.JS install guide recommends manually downloading and building the Node.JS package for Debian. This can be done using the following set of commands:

sudo apt-get install python g++ make checkinstall
mkdir ~/node_js_src && cd $_
wget -N http://nodejs.org/dist/node-latest.tar.gz
tar xzvf node-latest.tar.gz && cd node-v*
./configure
checkinstall
sudo dpkg -i node_*

This install method should work fine but will take a long time to complete on the Raspberry Pi's hardware. For this reason I experimented a little and found a quicker install method that doesn't require a manual compile, by using the Ubuntu package.

Ubuntu Method

This install method will be much faster than the official method but is not designed for Debian Wheezy, so use at your own risk! Personally I have not had any trouble with my node install yet but I cannot guarantee this will be the case for anyone else.

sudo apt-get update
sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js

At this point the file with the new repository details must be edited. Open the file: /etc/apt/sources.list.d/chris-lea-node_js-wheezy.list with a text editor like vim and change the word "wheezy" to "lucid". Thanks to Ken Yap for this hint.

Now, go on and finish installing Node.

sudo apt-get update
sudo apt-get install -y nodejs

A JavaScript Google Analytics event tracking plugin

In todays online world it is common for web developers to improve their websites by enabling a large amount of interactive functionality. Often this takes the form of JavaScript applications that no longer adhere to the simple page-by-page model but instead act more like a desktop program (Gmail, YouTube and Twitter for example).

If many interactions are happening in a single page without the URL changing, this experience is great for the user but can prove problematic when tracking for analytics. Traditionally analytics software such as Google Analytics is included in every web page of a site and each time a page is downloaded it is tracked back to Google. Obviously if the visitor never leaves that URL, this causes the aforementioned issue.

Google have a solution called "Events" that allow a developer to programmatically track an interaction via JavaScript. Events breakdown into the following components:

  • Category
  • Action
  • Label (optional)

For example, to track a customer checking out of an online store through a JavaScript form interface the following events may be used:

Format: Category / Action / Label

  1. Checkout / ViewCart
  2. Checkout / Country Selected / USA
  3. Checkout / Details Provided
  4. Checkout / Order Confirmed

From these tracked events, reports can be generated or funnels (called "Goals" by Google) setup to track conversion rates.

The method that Google provides to programmatically track an event looks as follows:

_gaq.push(['_trackEvent', 'Checkout', 'Country Selected', 'USA']);

This is simple enough, however, it is not wise to litter application code with calls to _gaq. If the Analytics script does not load due to a network issue this variable will be undefined and cause a potentially serious error. Also, if you someday remove Google Analytics it may be problematic to remove all occurrences of this throughout your code base.

For this reason I have created the following wrapper around the tracking code with a simple API and multiple advantages that can be plugged into any JavaScript application.

An effective LESS.js file include pattern

In the previous article I gave an introduction to CSS preprocessors and explained the potential advantages of using this technology. One of the mentioned examples was the ability to break down your stylesheet into multiple files and join them together to create a single final CSS file. This method provides a clean hierarchy for managing stylesheets.

My preferred pattern for the architecture of a preprocessed stylesheet is as follows:

  • Settings
  • Libraries
  • Modules
  • Views

First include the settings for my project (colours, fonts etc. in variables).

Secondly library code you have, for example, reset.css should be included.

Next I include my global styles and separate them into manageable modules. e.g. Links, Forms, Tables.

Finally I include my view related code for specific web pages and any overrides that are required. For example, a "view" could be the website home page as it usually differs from the rest of the website.

Example LESS.js Stylesheet

# screen.less

// Import settings
@include "settings/global.less";

// Import libraries
@include "libs/reset.css"; // Notice the .CSS extension

// Import global modules
@include "modules/core.less";
@include "modules/links.less";
@include "modules/forms.less";
@include "modules/site_header.less";
@include "modules/site_footer.less";

// Import views
@include "views/home.less";
@include "views/contact.less";
@include "views/admin.less";

Although the syntax is in LESS, this will also work with SASS using the import command

LESS/SASS: The Advantages of CSS Preprocessing Explained

CSS has a very powerful syntax but can easily become very verbose when working on non-trivial projects. In recent years the need to solve this problem has brought to life the concept of the CSS preprocessors such as SASS/SCSS and LESS.js. The former is written for the Ruby programming language whilst LESS is compiled using JavaScript.

A preprocessor allows additional leverage over CSS by providing additional syntax that delivers the following advantages:

  • Nested syntax

  • Ability to define variables

  • Ability to define mixins

  • Mathematical functions

  • Operational functions (such as “lighten” and “darken”)

  • Joining of multiple files

SCSS and LESS have very similar syntaxes, with SASS being a slight variant on SCSS. The similarities between them allows a developer to switch seamlessly if need be. In the following demonstration I will focus on the LESS syntax but all of the concepts can be transferred to the Ruby world.

Detect if page is within Facebook iframe or not: Javascript

Make sure to check the update at the end of the article. 

There is a handy piece of Javascript which you can use to tell if the current page is within the Facebook canvas iframe, or if it is being viewed normally in the browser.

The Facebook canvas gives its window a special "name" attribute. In most cases unless you generated the browsing window, it will have no name so we can use the piece of code below.

  if(window.name != "") {
    //We are on Facebook
  } 
  else
  {
    //We are just in the normal browser window
  }

However, if you changed your window name through Javascript, change the IF statement to match.

With this information, we can hide, add or manipulate our HTML in any way that is required to highlight the difference between your Facebook app and the regular web app.

 

Update Feb 2016:

As noted by Kilian in the comment section, an imporved way to detect the Facebook iframe is:

if(window.name.indexOf('iframe_canvas_fb') > -1)

Detect if HTML 5 Geolocation is Enabled

If you want to check whether a browser has HTML 5 geolocation support enabled and display a warning message to the user if it is not, then this function should help you out.

function display_nosupport_message()
{
	if(!navigator.geolocation)
	{
		$('#map_canvas’).text('Your browser does not support HTML 5 geolocation. ');
	}
}

In this example I check to see if the navigator.geolocation method is available. If not then I use a jQuery command to update the div that would normally house the Google Map by adding warning text for the user.

Easy Javascript crossfading with jQuery

In today’s World Wide Web many websites are featuring projects or artwork on their homepage via a crossfading gallery. In the past this was normally done by an Adobe Flash movie but these days it is usually much easier to implement with Javascript.

A Javascript solution provides many benefits such as cross browser support, no plugins required and highly improved performance. There are many different ways to implement a crossfade in Javascript, many of them very complex, so today I will be showing you how this effect can be achieved with the jQuery framework, Cycle plugin and only a few lines of code.

First of all you must include the jQuery JavaScript by either downloading it from jQuery or including it right from their website.

Next we must download the Cycle plugin and include it from your computer.

Next step is to define your slideshow files in HTML. Simply write your img tags into a slideshow div tag.

Finally all you have to do is include an inline Javascript function to initiate the cycler. Remember to match up the class name of the slideshow div with the class name in the function.

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

That's it, a Javascript crossfading gallery in minutes. To see examples and additional effects that the cycle plugin can perform, please see the cycle plugin website.

© Blake Simpson, 2012 – 2017