Recent Articles
I wanted to share my awesome hapi-react-hot-loader-example and my typescript-hapi-react-hot-loader-example . Please check out my example universal application demonstrating react-hot-loader-3 with webpack-3, react and friends, and hapi.js for server-side rendering. I think it is a very clean and simple example that many can understand. I a very proud of my one webpack.config file that handles dev, production, […]
TypeScript ES6 Modules Boilerplate
January 5, 20163 Comments
Update: I’ve officially switched over to Gulp and created a boilerplate generator to make things easier. Check out Slush Project Boilerplate Generator. —- I’ve been playing with TypeScript off and on since 2012 (version 0.8) and using ES6 modules seems to be the perfect way to do TypeScript/JavaScript. In this post I will give you […]
How To Write JavaScript Classes
October 9, 2014No Comments
Example files for this article. Today I want to show you how I think JavaScript Classes should be structured. I’ve written classes many different ways over the years (Prototypal Inheritance, Object Literal Notation, Mootools, Base2js, Sencha Touch, Backbone and TypeScript). The following is a condensed example of the current format I use to structure my […]
Templates Snippets in your IDE
October 9, 2014No Comments
In this article I am going to talk about how you can speed up your development by using templates in Sublime Text and JetBrains IDE’s (WebStorm, PhpStorm, etc). Below you can see the snippets in action. Just hit the Tab key to fill in the next predefined input area. Creating a Property Creating a Method […]
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. Full credit for this article goes to Peter Elst. I took a really old article of his and modified it to talk about TypeScript. What is OOP In object-oriented programming, developers often use the term “architecting an application.” This analogy is […]
TypeScript AMD with RequireJS Tutorial
March 9, 20146 Comments
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. In this TypeScript RequireJS tutorial I will show you how to setup AMD classes, setup your config file and how to use RequireJS plugins with TypeScript. TypeScript AMD Classes Below is how we setup a AMD class that we can use […]
TypeScript Internal and External Modules
March 8, 20144 Comments
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. Final I figured out how to do both TypeScript AMD & CommonJS external modules and TypeScript Internal module classes. Hopefully you can get started right away with my examples below. TypeScript External Modules Classes Below is how to setup TypeScript AMD/CommonJS […]
jQuery event Listener plugin
February 24, 2014No Comments
When creating JavaScript classes you will run into an issue where you cannot remove event listeners once you’ve added them. To get this to work you typically need to assign your bind function call(s) to a property on the class. You can see this in the Example 1 below in the setupHandlers method. The jQuery […]
TypeScript Cheat Sheet
January 5, 2014No Comments
I just wanted to share a few good TypeScript links I have found. TypeScript Cheat Sheet The Definitive TypeScript Guide TypeScript Handbook TypeScript Wiki Also checkout my TypeScript Tutorials.
My TypeScript Workflow Example
December 24, 20136 Comments
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. Being a former ActionScript developer, TypeScript is the next best thing and I wanted to share my TypeScript workflow. This is not a TypeScript workflow for Visual Studio. My IDE of choice is WebStorm/PhpStorm and they both have great TypeScript support. […]
TypeScript Source Maps After Uglify
November 15, 2013No Comments
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. I am going to take my first TypeScript Source Maps Example a step future. I am going to take our compiled TypeScript code and then use UglifyJS to minify it. UglifyJS will also create a new source map for the minified […]
TypeScript Source Maps Example
November 14, 2013No Comments
I put together a fast TypeScript Source Maps example. Currently it only works in Google Chrome but first you need to enable source maps. Open the “Developer Tools” panel and then click on the “gear” icon (bottom right). Then go to Settings > General and check “Enable JS source maps”. In the code I created […]
Compile JSON files into Javascript Tutorial
July 17, 2013No Comments
Just a quick tutorial on how to compile JSON files into a single JavaScript file. This is very easy with GruntJS and the grunt-json plugin. Grunt JS Setup If you have never used GruntJS before you probably need to checkout my Install Grunt JS on a Mac Tutorial or Install Grunt JS on Windows Tutorial. […]
Generate Documentation for TypeScript
July 17, 20133 Comments
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. In this TypeScript tutorial I will go over how to generate code documents from your TypeScript files. We will be using YUIDoc’s and GruntJS. Grunt JS Setup If you have never used GruntJS before you will need to checkout my Install […]
PhpStorm/WebStorm Typescript Class Template
June 28, 20131 Comment
I just love PhpStorm/WebStorm support for Typescript. In this simple tutorial I will show you how to create a Class template for TypeScript to make your development a little faster. Here is the template. Notice the ${Name} placeholder. That will place the name of the file you typed in. To create a new file template […]
TypeScript Error TS2172
June 26, 2013No Comments
I just updated to TypeScript version 0.9.0 and stuff was breaking. I know they said stuff is going to break and I can handle that but I couldn’t get anything to work with jQuery. I even tried the office TypeScript sample example and it breaks. Here was my issue: error TS2172: All named properties must […]
Single Page JavaScript Application Workflow
June 23, 20134 Comments
I started playing around with creating a workflow for creating single page applications with JavaScript. The big player in this workflow is GruntJS. In this Single Page JavaScript Application Workflow Tutorial I will explain how to setup a build process for your development and production environment. We will be using several GruntJS plugins to help […]
Wow, I am totally impressed with
GreenSock TweenMax/TweenLite was there for me when I did ActionScript development. Now that Flash is almost dead GreenSock TweenMax/TweenLite JS is there for me doing JavaScript development. I am doing more and more JavaScript and I want to create nice JavaScript documents for my code but I am having a hard time finding a nice […]
In this tutorial I will show you how to Precompile JavaScript Underscore Templates with GruntJS. I will be using the GruntJS JST Plugin. Grunt JS Setup If you have never used GruntJS before you will need to checkout my Install Grunt JS on a Mac Tutorial or Install Grunt JS on Windows Tutorial. Now download […]
What is TypeScript
May 5, 20131 Comment
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript which primarily provides static typing, classes and interfaces. Basically you are writing JavaScript with a few conventions that helps you writing cleaner code which will compile into normal JavaScript. One of the big benefits is to enable IDEs to provide code completion, spotting […]
EaselJS with GreenSock Tweenlite TweenMax
April 27, 20132 Comments
I just started looking at EaselJS “A Javascript library that makes working with the HTML5 Canvas element easy”. I am a be fan of GreenSock’s tweening and easing library so I wanted to see how I could get TweenLite working with EaselJS. In this JavaScript tutorial I will show a very simple example how you […]
In this tutorial I will show you how to compile sass files into a single css file. The technique is great for working in teams where others may not have an EDI that supports compiling sass files. Install Ruby and Sass First thing we need to is get Ruby and Sass installed on our computer. […]
Learn Chrome Developer Tools Tutorials
March 25, 2013No Comments
Google and CodeSchool announced a new course that helps people use Chrome Developer Tools. There appears to be a lot of great video tutorials for beginners and intermediate users of the Developer Tools. Here are the links to check it out: Chrome Developer Tools Video Tutorials http://discover-devtools.codeschool.com Google Blog Post http://blog.chromium.org/2013/03/discover-chrome-devtools-our-new.html Discover DevTools Companion Extention […]
Install Grunt JS on Windows – Tutorial
March 22, 201323 Comments
Before you install Grunt.js you will need to have node.js installed. For this tutorial I have node.js v0.10.0 installed. I will be installing Grunt.js v0.4.1. WARNING if you have Grunt.j 0.3.x or less you will need to uninstall it first. Grunt’s command line interface (CLI) To get grunt.js installed we need to first install Grunt’s […]
Install Grunt JS on a Mac – Tutorial
March 14, 201311 Comments
Before you install Grunt.js you will need to have node.js installed. For this tutorial I have node.js v0.10.0 installed. I will be installing Grunt.js v0.4.1. WARNING if you have Grunt.j 0.3.x or less you will need to uninstall it first. Grunt’s command line interface (CLI) To get grunt.js installed we need to first install Grunt’s […]
TypeScript Singleton Pattern
February 16, 201316 Comments
I am working on a BulkLoader class to load different types of files and wanted to use the Singleton pattern for it. This way I can load files from my main application class and retrieve the loaded files easily from other classes. Below is a simple example how you can make a score manager for […]
TypeScript Getters Setters with TypeScript Accessor Tutorial
December 16, 2012No Comments
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. In this TypeScript tutorial I will be going over TypeScript Getters and Setters which are called TypeScript Accessor. To get TypeScript Accessor’s working we need to let the compiler know we want to export the code as ECMAScript 5 compliant. Below […]
TypeScript Arrow Function Tutorial
December 15, 20125 Comments
Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out. So I’ve playing around with the TypeScript Arrow Function Expression. In this TypeScript tutorial I will show you a couple of examples using Arrow Functions. Below you will see some normal JavaScript where we create an Image Object. We pass in […]
Hello, my name is Robert and I am an interactive developer at