Beacons are a new API that is being experimentally introduced by browser vendors that will allow an XHR call to be made to a server when a webpage unloads without blocking the thread in order to create a better user experience. Quoting the W3C Beacon Specification.
"analytics and diagnostics code will typically make a synchronous XMLHttpRequest in an unload or beforeunload handler to submit the data. The synchronous XMLHttpRequest forces the User Agent to delay unloading the document, and makes the next navigation appear to be slower. There is nothing the next page can do to avoid this perception of poor page load performance."
This specification will prevent developers from having to use tricks and hacks to bend the rules of the browser, creating a better experience for everyone.
I recently encountered an error in Rails where I was trying to connect a
Category model to a
Transaction model. I had a
has_one associtation and encountered the following error:
class Category < ActiveRecord::Base
"You tried to define an association named transaction on the model Category, but this will conflict with a method transaction already defined by Active Record. Please choose a different association name."
This is caused by ActiveRecord already using a method named "transactions". To handle this issue, choose an appropriate alternative name for the association and specify the model class and foreign key manually.
has_one :association_name, :foreign_key: "key_name", class_name: "ModelClass"
In my case this was implement as:
class Category < ActiveRecord::Base
has_one :owner, foreign_key: "category_id", class_name: "Transaction"
A guide on how to fix the Speedport W 723V "web 'n' walk" configuration error that occurs when trying to run the setup.
Recently the W 723V Speedport router that I rent from Deutsche Telekom automatically pulled an update for new software. This update put my router into an unresponsive mode, meaning I had to reset the device and re-enter my login / configuration data through the internal configuration utility (A.K.A https://speedport.ip/).
The Speedport provides a configuration page where I would normally enter my Deutsche Telekom details and the setup would run. After this update however, the setup tells me that my "Web 'n' Walk Stick" has not been properly configured.
After calling Deutsche Telekom, they were clueless, had no help to give and promised to call back when an engineer was available. This is where I took the task upon myself to inspect the router software and see if I could fix this problem myself. The game was afoot, a programming challenge lay ahead. After around an hour absorbed in convoluted code, ignoring the temptation to let the Deutsche Telekom get away with this, I focused in on the problem, the following is the description of the solution.
If you have the problem when working on a local wordpress installation where you need to do an upgrade or install a plugin, you may be presented with the following screen asking for FTP details to the server.
Lets assume you need to install a plugin. One option would be to manually download the plugin and move it into the wordpress plugins directory, but this is frustrating and slow. The better way is to let wordpress handle everything for you.
Testing a static website can be done simply by opening the HTML files in a web browser, but for some functionality to perform correctly, such as local AJAX calls, the files need to be served from a web server.
Alternatively, you may want to check out some static files on your mobile device. You can do this easily by starting a simple web server for the project and navigate to your computers IP address with the given server port.
The easiest way to do this on UNIX based systems is to use the Python Simple HTTP Server, like so:
python -m SimpleHTTPServer 8080
Run this command in the same directory as your project from the terminal, then point your browser to
This is a great way to get a server running in seconds, for basic testing, but I have found that as the number of files in the project increases, the stability of the server decreases. Often files will not be passed to the client and 404 errors are encountered. For these reasons I have investigated a stronger solution that is still simple to setup. This leads me to Node.JS.
Node.JS is no stranger to web servers, in fact this is often the primary task of a Node application.
"Connect" is a Node.JS middleware application that makes the creation of simple web servers trivial.
To get Connect running, first install it via
npm install -g connect
Here is a web server that can be used, simply paste the code into a file called "server.js" in your project's root directory.
var connect = require( 'connect' ),
http = require( 'http' );
app = connect()
.use( connect.logger( 'dev' ) )
.use( connect.static( __dirname ) );
http.createServer( app ).listen( 8080 );
Finally run the server from the terminal like so:
If no error was received, the server is running and files can be viewed by browsing
http://localhost:8080, just like in the Python example.
I have not had any trouble with the Connect version of my server and it comes built with a nice development logger, showing what files were requested and with what status. This output can be viewed live in the terminal window as requests come in.
Answer found from Superuser: http://superuser.com/questions/571003/how-to-convert-gif-files-to-png-or-jpeg-in-os-x-with-command-line
sips command, almost any image format can be converted into another, like so:
sips -s format png ./*.gif --out pngs
This will create new images with a png extension in the
pngs subfolder to match the gif version.
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.
- Label (optional)
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.
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:
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
// Import settings
// Import libraries
@include "libs/reset.css"; // Notice the .CSS extension
// Import global modules
// Import views
Although the syntax is in LESS, this will also work with SASS using the
A preprocessor allows additional leverage over CSS by providing additional syntax that delivers the following advantages:
Ability to define variables
Ability to define mixins
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:
:argdo %s/foo/bar/g | update