Using Templates from Custom Locations in Ruby on Rails

Most Rails developers are used to loading ERB or Haml templates from the filesystem. You throw your templates into app/views/* and everything works great. There are some situations where you might want to load your templates from other locations. You can load templates from wherever you want as long as you implement the correct API that Rails requires. Continue reading “Using Templates from Custom Locations in Ruby on Rails”

Procs and Lambdas Are Very Different in Ruby. Don’t Use Them Interchangeably.

In Ruby, a Proc allows you to turn a block into an object that can be called later. You can create a Proc in a few different ways. You can use Proc.new, you can pass a block into a method and catch it with the & operator and you can use a lambda. In all cases, the result is that you get a Proc object. Unfortunately, Procs created from Proc.new and the & operator do not always behave the same as Procs created from a lambda. Continue reading “Procs and Lambdas Are Very Different in Ruby. Don’t Use Them Interchangeably.”

Stop Using for…in Loops to Iterate JavaScript Arrays

The best way to iterate a JavaScript array is using the trusty old for loop. Anything else is inefficient and prone to bugs. Some might recommend the for...in loop. Read on for the specific reasoning behind this.

Why is the for…in loop error prone?

What do you expect the value of sum to be? If you guessed 60 you’d be wrong. This script has a bug. for...in iterates over the arrays keys and not the values. So inside of each iteration the value of num is the key and not the value. To make matters worse, JavaScript uses strings for the indexes even with arrays! This means that sum will not be a number and instead a concatenated string with the value of 102030.

Just use a regular for loop when iterating over JavaScript arrays.

This example would be much less prone to errors with the use of the simple for loop.

You can also make a small micro-optimization here by caching the call to numbers.length by adding something like this:

With this method you no longer have the potential to incorrectly use the index as a value and you have the index as an integer, which is more versatile.

Handling Unicode Code Points in JavaScript

JavaScript strings are implemented in Unicode. Unfortunately, soon after JavaScript was created the Unicode developers realized that they implemented their vision incorrectly and revised their standard. By that time, Unicode was already so engrained in JavaScript that they feared changing anything would cause more harm than good. This means that in some situations the built in string functions of JavaScript will return erroneous data when dealing with some Unicode characters. This is because JavaScript strings are made up of 16-bit code units, while Unicode is based on code points. More on this coming up.

JavaScript/Unicode code units? Code points?

The original Unicode team miscalculated how many code points they would be able to fit into 2^16. They believed that they would be able to fit everything they wanted into this number. They were hoping that there would be a 1:1 mapping between the code unit that represented the element of their encoding and the code point, which is the unique integer that Unicode assigns every single unit of text. This means that every single unit of text from every single Unicode supported language is given a unique integer that represents it.

As is pertains to JavaScript, this meant that at the time each character in a JavaScript string could be mapped to a single Unicode code point because each character was a 16-bit value that fit inside of 2^16. Unfortunately, their miscalculation caused a lot of issues. While 2^16 is a massive number they soon discovered that they were outgrowing the original system. The Unicode standard was eventually expanded to support 2^20 code points, which is where it remains to this day. With this update, the current system was obsolete and they needed to introduce a system for representing numbers 2^16 or greater.

In come surrogate pairs.

To represent these new numbers, surrogate pairs were introduced. Two code units in the 2^16 range were now being mapped to a single code point greater than 2^16. This can cause a serious issue with strings in JavaScript. Multiple characters in a string (the code units) are now mapped to a single Unicode code point. This means that you can no longer believe that your JavaScript UTF-16 encoded strings length will match up with the number of characters in the string. The string may have a length of 10 based on string.length, but it may only have 9 actual Unicode code points in it because two of the code units in the string are being combined to represent a single Unicode code point.

Too late

JavaScript was already too entangled with the original Unicode 2^16 size to bother switching to the new method of handling strings that Unicode developed, thus the main string methods that we use everyday were never updated to handle the encodings outside of the 2^16 range. Some of these methods include length, charCodeAt and charAt.

Here we have a single code unit that maps directly to a single code point. This code point maps to: ☯. The length of this string is 1 as we might expect.

This is where it gets a little bit more complicated. Here we have multiple code units that map to a single code point. The length of this string is 2, even though we are only representing a single Unicode code point. This code point maps to: ?. The issues outlined here for length are also present for other string methods and even regular expressions. There are some standard libraries that are aware of code points directly, such as the URI libraries, which include encodeURI and decodeURI.

Remember this

To summarize, you should know that JavaScript operates on code units, while the Unicode standard operates on code points. Some code points need to be represented by multiple code units. JavaScript string methods do not understand this. When two code units are used to represent a single code point they are called surrogate pairs.

Triggering DataTables to search only on enter key press

By default DataTables will search whenever the user types something. If you’re using Ajax to search this might trigger a bunch of unnecessary calls to your server. Use this to only trigger the search when the enter key is pressed. You can also customize it to search every few letters or once a specific length is reached in the search box.

Notice the initComplete key. We wait until DataTables is initialized and then we remove the default handler, which is set to search on each keyup and we bind our own handler that searches only when the enter key is pressed.

Adding a Trim Box to a PDF Using TCPDF in PHP

When creating pages in your PDF using TCPDF you need to pass the trim data into the AddPage method.

ll stands for lower-left and ur stands for upper-right. You need to use the width and height of the pdf page and calculate how large your want the trim box to be. In my example self::$pageHeight and self::$pageWidth are the dimensions of my pdf document page. Using those I can tell TCPDF how large to make the trim box.

In this example the trim box will be 0.0625 inches from each border. Essentially giving the PDF a padding of 0.0625 inches all around. When I created my PDF I used this:

In the first AddPage example above you’ll notice that I’m passing the $pageWidth and $pageHeight again when I create the page. This is essential or else TCPDF will reset the size of the page and it will no longer be set to what you created the PDF document with when you instantiated TCPDF().

This same method can be used to add bleed and crop boxes to the PDF. In the first example you’ll see the TrimBox key. You can add other keys, such as CropBox , BleedBox and ArtBox. You can combine them or use them separately like we are using TrimBox in the example. They all take the same arguments llx, lly, urx, and ury. So you would just adjust the amount you wanted to pad them with from 0.0625 to whatever you want to use.

How to Flip a Glyphicon in CSS (Bootstrap)

Bootstrap has a small set of Glyphicons, but they don’t have a clockwise and counterclockwise rotation icons. They do have a refresh icon, which looks just like a clockwise rotation icon, so I wanted to use that and just flip it for use in both situations. This snippet will allow you to mirror the icon. I’m using Bootstrap 3 with the stock Glyphicons.

Just add the .flip-glyphicon class to your Bootstrap button.