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, […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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.

continue reading »

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. […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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. […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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. […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »

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 […]

continue reading »