JavaScript Beacon API Explained

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.

Fix "0.1 + 0.2 = 0.300000004" in JavaScript

Because JavaScript uses the IEEE 754 standard for Math, it makes use of 64-bit floating numbers. This causes precision errors when doing floating point (decimal) calculations, in short, due to computers working in Base 2 while decimal is Base 10.

0.1 + 0.2; // 0.300000004

A simple solution to this problem is:

+(0.1 + 0.2).toFixed(1); // 0.3

Here the numbers are added together, returning the erroneous floating number, it is then set using toFixed as a string "0.3". Finally the + symbol casts the string back to a valid Number so that it can be worked with again.

var x = 0.1,
  y = 0.2;

var z = +(x + y).toFixed(1);
z += 0.1; // z is now 0.4

Disable Telekom "Navigationshilfe" search pages

To disable the automatic "Navigationshilfe" search page when misspelling a domain name, it must be deactivated at the Telekom website.

Visit the following link, https://kundencenter.telekom.de/kundencenter/kundendaten/navigationshilfe/ and log in with your Telekom account information.

Simply choose the "Navigationshilfe aus" option and save using the "Speichern" button.

Telekom Navigationshilfe options

You must now restart the Telekom router for the changes to take affect. Either hold the restart button, or simply disconnect the power for a few seconds.

After the router restart, Navigationshilfe will no longer bother you.

Fixing the "You tried to define an association named transaction" Ruby on Rails Error

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
  has_one :transaction
end

"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 :transaction
  has_one :owner, foreign_key: "category_id", class_name: "Transaction"
end

Fastest alternative to Math.floor in JavaScript

Normally to floor a number in JavaScript we would use the built in Math.floor function. There are however other ways to round a number down in JavaScript, by using the bitwise operators to perform the rounding operation on a binary level.

The various methods are:

  • |
  • ~~
  • <<
  • >>
  • >>>

Which can be used, for example, like so:

var float = 367.9987;

~~float //367
float | 0 //367
float << 0 //367
float >> 0 //367
float >>> 0 //367

I have set up a test on the great JS Perf website to sample which of these methods is fastest in the various browsers, check out the result and run the tests for yourself here:

http://jsperf.com/math-floor-alternatives

So far, my result graph looks like so (for an interactive version please visit the link above):

Math.floor results in JavaScript (from Browserscope)

These results are very interesting. As you can see currently Chrome will handle all of these operations at almost the same speed. However, Internet Explorer handles Math.floor around 76% slower than a bitwise shift/or.

Surprisingly Safari 7 handles all versions in a slow manner, with the triple bitwise shift (>>>) being the fastest.

In FireFox Math.floor has actually been optimised to the fastest but the other methods are still very close behind.

Taking all of this into account, I would suggest using a regular bitwise shift >> as this is fast in all browsers, including Internet Explorer.

However, that being said the syntax for a bitwise not is more intuitive and looks more natural in the flow of code, for example:

var x = 345.768,
  y = 0;

// Confusing
y = (5 * x) << 0;

// Nicer
y = ~~(5 * x);

// Least confusing, but slower
y = Math.floor( 5 * x );

So ultimately you must make the choice of which operation to use based on your application, the audience you have and the actual routine you are implementing. Meaning, it's best not to confuse the next programmer who comes along so Math.floor is best in non performance critical code but (5 * x) << 0; might be a good idea in a performance bottleneck situation such as on an animated <canvas> which runs code in a loop many times per second.

Thanks for the programming challenge, Deutsche Telekom!

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.

I do not own a Web 'n' Walk stick, so I saw this as an obvious bug in the configuration web page. The page was submitting the wrong configuration form details, as both forms are in the same page, just shown/hidden via JavaScript.

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.

FTP to a local wordpress install on OSX

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.

Wordpress plugin install FTP prompt

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.

© Blake Simpson, 2012 – 2018