Category Archives: Tutorials

Code of the Day: Javascript Auto-complete date format MMDDYYYY

/**
* This function helps to autocomplete the date format MMDDYYY
* Converts M to 0M and MMD to MM0D. Ex. `1/` to `01/`, `01/1/` to `01/01/`
* Adds slash for MM and MMDD Ex. `01` to `01/`, `01/02` to `01/02/`
* Converts YY to YYYY. Ex. `01/01/01` to `01/01/2001`
*
* @param {String} str
* @return {String}
*/
var autocompleteMMDDYYYYDateFormat = function (str) {
        str = str.trim();
        var matches, year,
                looksLike_MM_slash_DD = /^(\d\d\/)?\d\d$/,
                looksLike_MM_slash_D_slash = /^(\d\d\/)?(\d\/)$/,
                looksLike_MM_slash_DD_slash_DD = /^(\d\d\/\d\d\/)(\d\d)$/;
 
        if( looksLike_MM_slash_DD.test(str) ){
                str += "/";
        }else if( looksLike_MM_slash_D_slash.test(str) ){
                str = str.replace( looksLike_MM_slash_D_slash, "$10$2");
        }else if( looksLike_MM_slash_DD_slash_DD.test(str) ){
                matches = str.match( looksLike_MM_slash_DD_slash_DD );
                year = Number( matches[2] ) < 20 ? "20" : "19";
                str = String( matches[1] ) + year + String(matches[2]);
        }
        return str;
};

Demo

Larry Battle

I love to program, and discover new tech. Check out my stackoverflow and github accounts.

More Posts - Website

Follow Me:
Twitter

Tutorial – VIM in under 30 minutes

“Vim is a text editor written by Bram Moolenaar and first released publicly in 1991. Based on the vi editor common to Unix-like systems, Vim is designed for use both from a command line interface and as a standalone application in a graphical user interface.”

From: Wikipedia.org

The vi/vim editor – Lesson 1

The vi Editor – Lesson 2 – Navigation Commands

The vi Editor – Lesson 3 – Inserting Text

The vi Editor – Lesson 4 – Deleting Text

VI/VIM CheatSheet

Download VIM here

Larry Battle

I love to program, and discover new tech. Check out my stackoverflow and github accounts.

More Posts - Website

Follow Me:
Twitter

How to convert a repeating decimal to a fraction


Here are 4 simple steps to convert a repeating decimal to a fraction.

Step 1: Check to see if the number has a repeating decimal. Stop if it doesn’t and do normal conversion.

Step 2: Split the decimal into 3 parts; i, x, r. Such that the decimal equals `i.x(r)*`.

Step 3: Create a fraction in the form `a/b`.
a = ((ixr as int) – (ix as int))
b = ((10^x.length)*(10^r.length – 1))

Step 4: (optional) Reduce the fraction by dividing by the greatest common denominator.

Example:
4/3 = 1.333… which sets i = “1”, x = “”, r = “3”.
a = (13 – 1) = 12, b = ((10^0)*(10^1 – 1)) = 9
a/b = 12 / 9 = 4/3

Ratio.js does this for you when the `reduce` function is called.

Example using Ratio.js:

Ratio.parse( "1/3" ).reduce().toString() === "1/3";
Ratio.parse( 4/3 ).reduce().toString() === "4/3";
Ratio.parse( 0.123451234512345 ).reduce().toString() === "4115/33333";
Ratio.parse( 0.987987989798979897 ).reduce().toString() === "978108109901/990000000000";

DEMO

Larry Battle

I love to program, and discover new tech. Check out my stackoverflow and github accounts.

More Posts - Website

Follow Me:
Twitter

doT.js Tutorial part 1

doT.js Tutorial: Part 1 of 2

What’s dot.js?

It’s one of the fastest and concise javascript template engine for nodejs and web browsers, created by Laura Doktorova, the President & Co-Founder of Bebedo Inc.
Check out dot.js on Github.com.
dot.js works on both the client and server side. But for this tutorial, we’re only going to be focusing on the client-side.

Why use a template engine?

There are many reasons to use a template engine rather than printing your code in a given language. I think overall, the main reasons for this are code consistency and organization. If you have a good separation of your markup from your logic it becomes easier to debug your code, to share your code with collaborators, and allows for more rapid development by streamlining common methods for outputting your markup.

By: Bryce Hamrick

How to import doT.js

Just include “doT.js” using the script tag. Once included, “doT” will be added to the global namespace.

<script src="https://raw.github.com/olado/doT/master/doT.js"></script>

Steps for using doT.js

  1. Create an object literal to store your data. A JSON format is preferred.

    var data = { name: "David" };

  2. Create a template that creates the overall structure and tells where your data will be placed.

    var template = "Hey <b>{{=it.name}}</b>, you own me money.";

  3. Generate a template function from the template using doT.template().

    var templateFunction = doT.template( template );

  4. Generate HTML by providing data to the template function.

    var html = templateFunction( data );

Full source:

var data = { name: "David" };                                 // step 1
var template = "Hey <b>{{=it.name}}</b>, you own me money.";  // step 2
var templateFunction = doT.template( template );              // step 3
var html = templateFunction( data );                          // step 4
 
// result
html == "Hey &lt;b>David&lt;/b>, you own me money.";

Let’s now examine the function doT.template().

doT.template(template, settings, userDefinedDef);

Forming a template

The content of a template will remain the same, except for the sections that contain javascript encapulated sections (JES). JES look like this. "{{ }}".
Note that the data passed to the template function can be reference by the template using the namespace ‘it’.

Example:

// input
var data = { thatThingOverThere: "Bartman" };
var template = "Hey, look over there! It's {{=it.thatThingOverThere}}!";
var tempFunc = doT.template(template);
var html = tempFunc(data);
 
// output
html == "Hey, look over there! It's Bartman!";

To better understand what’s going on, let’s look at the generated source for the tempFunc.

// source for tempFunc
function anonymous(it) {
	var out = 'Hey, look over there! It\'s '+(it.thatThingOverThere)+'!';
	return out;
}

Type of JES

There two basic type of JES.
Type 1 requires a returned value.

var template = "{{=it.value}}";

Type 2 allows for javascript statements to be executed.

var template = "{{ var global = {}; }}";


Example:

var data = { team: "POWER RANGERS!"}
var template = '{{ var chant = "Go go"; }}{{= chant + " " + it.team}}';
var tempFunc = doT.template( template );
var html = tempFunc( data );
 
// result
html == "Go go POWER RANGERS!";
 
// source for tempFunc
function anonymous(it) {
	var out=''; 
	var chant = "Go go"; 
	out+=( chant + " " + it.team);
	return out;
}

End of part 1. Part 2 coming soon.

Larry Battle

I love to program, and discover new tech. Check out my stackoverflow and github accounts.

More Posts - Website

Follow Me:
Twitter