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
- Checkout / ViewCart
- Checkout / Country Selected / USA
- Checkout / Details Provided
- 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.
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
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.
Many IDE's provide a function to find and replace across files in your project, of course VIM can do this too by using the "arg" commands, without switching to the terminal!
There are 2 steps to the task, first we provide a set of files for the replacement to happen on. The second part is telling VIM what to replace. Take a look at this example:
:args javascript/*
:argdo %s/foo/bar/g | update
Running these 2 commands in VIM will loop through all files in the "javascript" folder and replace all instances of "foo" with "bar".
In the absense of having any time/thing to write about in the last months, here's another quick tip.
iTerm 2 is a replacement application for the default terminal on OSX. It's highly popular due to allowing advanced features such as tabs, split panes, simpler theming and custom keyboard bindings.
If you find the need to enter the same commands into multiple panes at the same time, simply hit "⌘Command + ⇧Shift + I". You will recieve a small notification about sending input to all panes, the next text you type will physically begin typing into all open panes for your current tab and is executed once you hit "⏎ Return".
Pretty neat!
I find this extremley useful when I have 4+ panes open in a working state, I don't want to close them but I need to reload my bash profile because of some new changes, so I simply hit "Cmd + Shift + I", type "source ~/.bash_profile", hit "Return" and I'm done.
I've just attempted the programming challenge FizzBuzz in JavaScript. I'm glad this worked first time. http://www.codinghorror.com/blog/2007/02/why-cant-programmers-program.html
for(var i = 1; i <= 100; i++){
if ( i%3 === 0 && i%5 === 0 ) {
console.log( "FizzBuzz:", i );
} else if ( i%5 === 0 ) {
console.log( "Buzz:", i );
} else if ( i%3 === 0 ) {
console.log( "Fizz:", i );
} else {
console.log( i );
}
}
Look no further than the following article, every step works perfectly for me on OSX Lion: http://shiftcommathree.com/articles/how-to-install-mongodb-on-os-x/comments/15291
My only recommendation if using 32-bit OSX though is to pre-download the Mongobd distribution from the official website first. The guide is written to use a version of the 64 bit, which you should not download.
When ever you are trying to install a Ruby, package or anything else with RVM it is not that uncommon to run into strange issues. Just like when you first go to smashing the Ctrl + Alt + Delete keys on Windows, I have found through experience that the first port of call should be to take the following simple steps.
For an example, imagine you are trying to install Ruby 1.9.2. I recently had to use this approach to get version 1.9.2 installed on OSX Lion.
Note: On OSX, Make sure you have either the GCC libraries or XCode 4.2+ installed to work best with RVM
Steps
- rvm get head
- rvm reload
- rvm remove 1.9.2
- rvm install 1.9.2
First we update RVM, reload the environment (important) remove whatever broken ruby/package you are trying to get working. Finally, Install it fresh.
You would be suprised how often this resolves issues. Give it a try next time you are having issues.
It's really handy to be able to see the current git branch in your shell prompt along with the directory name. This for a start removes many "git branch" commands from your history.
To enable this feature, you have to edit your .bashrc file on Linux or the .bash_profile on Mac. These files usually exist in your home directory (The default directory when you open a shell) and are executed when the shell logs in. You can edit this file with any text editor such as Gedit or Textmate.
Add the following 2 lines after any existing SP1 variables and then save your file. Open a new shell to see the changes.
GIT_PS1_SHOWDIRTYSTATE=false
export PS1='\[\033[1;36m\]\u at\[\033[00m\] \[\033[34m\]\W\[\033[31m\]$("__git_ps1")\[\033[00m\] > '
Changing colours
If you would like to update the colours of the prompt, then visit this article to get a grasp of the basics and you can find much more on Google from there.
Simply run sudo a2enmod rewrite && sudo invoke-rc.d apache2 restart