Posted on October 19, 2015 by Chris Harrington
Tutorial: Build a Time Picker with React JS
I recently wrote a tutorial on how to build a date picker with React JS, so I figured I’d expand upon that and detail how to write a time picker, too. First things first: just like last time, I’ve put the code up on GitHub if you want to see the full monty. I’ve also made an npm package and a bower package for the time picker in case you want to use it on your site somewhere.
Note: The code is far from production ready, so use at your own risk.
If you’d just like to take a look at the time picker in action, I’ve also put together a (really simple) demo page. Take a look!
Posted on July 4, 2015 by Chris Harrington
Creating a Simple Application Using React JS and the Flux Architecture
I’m going to talk about how to create a simple todo application using React JS and the Flux architecture. React JS is making some waves in the community recently due to its alleged performance increases over other heavy favourites (like Angular JS), especially when it comes to writing out lists. I’m not so concerned with performance, but I am interested in how to write an application that’s easy for the user to use while at the same time being quick to get off the ground.
Posted on June 9, 2015 by Chris Harrington
Clean promise chains using a pipeline
A few months ago, I started working on a project with a friend of mine who turned me on to the idea of channeling various asynchronous tasks into a pipeline. The idea is that, instead of polluting your local function with a bunch of
.thens, you put each of them into a separate module, and then
require them into a unifying function that does all the heavy lifting for you. I’m going to walkthrough my implementation of just that right now in a quick Node JS application.
Posted on May 11, 2015 by Chris Harrington
Testing a React project with Karma and Webpack
Posted on May 7, 2015 by Chris Harrington
Webpack with LESS and React
I’ve recently been playing around with Webpack and I really like it. It has the benefits of Browserify in that you can specify an entry point that’ll pull in all of your
required modules into a single bundle with optional minification, while also letting you bundle your style together in your modules. For example, I can
require a style file for a particular module right from the module itself, which allows me to somewhat limit the global nature of CSS rules. On top of that, Webpack allows us to leverage LESS in these included style files, too, that get compiled down to CSS. I’m a huge fan of this, as it allows us to create less coupled modules in that each style file can be tied directly to a module, and only gets pulled in when its required. Webpack also utilizes what they call “loaders”, which are basically preprocessors that perform various tasks. For example, there’s a LESS loader to convert LESS into CSS, and a JSX loader to perform a similar conversion for React classes.
Posted on January 26, 2015 by Chris Harrington
Performance of AngularJS, ReactJS and KnockoutJS Compared
I’ve put together a quick page that allows you to see the rendering time difference between the three frameworks, plus the raw DOM manipulation. It’s what I’ve been using to figure out how long each framework takes to render large lists, as seen in the results table below. Take a look here.
Posted on January 21, 2015 by Chris Harrington
Testing a Browserify project with Jasmine and Grunt
The WordPress theme for this site has been built (read: over-engineered) with Browserify and React. Most of it is pretty straightforward, but the widgets on the right are a little more complicated. I’ve only just started working with Browserify in general, so I had a relatively difficult time setting up a workflow for testing some of my modules. If you’re unaware, Browserify works by bundling up all of your CommonJS modules and any modules in your node_modules folder for easy use throughout your application using
require. You provide the entry point to your application, and Browserify will step through all of the
grunt test from the command line and have all my specs run as per usual.
Posted on January 20, 2015 by Chris Harrington
Concurrent watches with Grunt
Posted on January 16, 2015 by Chris Harrington
Comparison: AngularJS vs ReactJS
I’m going to walk through how to create the typical coding example using each of the frameworks. Once I’ve done that, I’ll move on to some more complicated UI controls, building up our little app as we go.
Posted on December 13, 2014 by Chris Harrington
Angular JS calendar using Moment and LESS CSS
Today, I’m going to talk about how to create a calendar control using Angular JS, LESS CSS, Font Awesome and Moment. I’m going to assume you’re at least halfway familiar with these tools, but if you’re not, I suggest you take a look using the links above. The calendar itself will be an Angular JS directive that allows the user to select a date, which is set on a controller’s property. I’ve styled the calendar, and I’ll include that style in this tutorial, but you can obviously feel free to tweak how it looks to your heart’s content. If you’re the kind of reader that prefers to view a completed product and just check the source yourself, I’ve put together a demo page which shows off the calendar. You can see it here.
Posted on October 27, 2014 by Chris Harrington
Building a sliding modal dialog with Angular JS
The more I use Angular JS, the more I like it. I’ve been playing around with Facebook’s React recently, and I went back to Angular, primarily because I found React a little more restrictive with respect to two way bindings. I’ve built a modal dialog control in Angular which I figure you guys might find useful. The modal dialog itself is an Angular directive, and I’m using LESS for some of the slightly more complicated CSS rules. I’m going to assume you’re relatively proficient with both, but if you’re not, I highly recommend you check them out before plunging into this tutorial.
If you’re the sort of reader who just wants to see the whole thing in action, feel free to take a look at the demo page I’ve put together that shows off the whole thing. Viewing the source on that page should give you a pretty good overview of what’s going on.
Posted on September 29, 2014 by Chris Harrington
Animated rotate directive with Angular JS
I’ve recently been playing around with Angular JS and I like it, and so decided to spend a bunch of time converting Leaf from Knockout to Angular. It’s not that I think that Angular is substantially better than Knockout (that remains to be seen) but rather that I figure this is a good way for me to figure out the ins and outs of a new framework. One of the things I really like about Angular is building custom directives. I’ve only been tinkering for a week or two, but I already have dozens of custom directives for all sorts of situations and code snippets. They’re very, very handy.
So in that vein, one of the directives I’ve built revolves around rotating an element based on an Angular scope variable. My first use case for it was for expanding a sliding drop down. In the collapsed state, there’s a Font Awesome angle down icon that indicates to the user that it can be expanded, and after expansion, it changes to an angle up icon to indicate that the user can click again to collapse the panel. The following rotate directive is used to animate a rotation from up to down.
Posted on June 18, 2014 by Chris Harrington
Setting up a Node web server on an Amazon EC2 instance
Up until recently, I’d been hosting Leaf on Heroku. I had a pretty good experience with Heroku and would recommend it to anyone whole heartedly, especially if you’re just getting into the Node space and want to play around a little. It has a free sandbox plan, it’s really easy to get started. That said, however, when you’re getting a little more serious, the cost of Heroku’s offering is almost twice as much as what Amazon offers. Prices today sit at $34.50 for two “drones”, which are the equivalent of two EC2 instances, while the EC2 instances themselves can be purchased for as little as $9 a month (or $18 for two instances). On top of the price difference, EC2 instances have the benefit of being almost 100% configurable, so I can poke around and do however I please.
From here on out, I’ll assume the reader is familiar with Amazon Web Services and have already spun up an EC2 instance with SSH capabilities. I’m using an Amazon Linux instance, but any of the *nix based instances will do the trick.
Posted on by Chris Harrington
Shim to customize output strings for date inputs on mobile browsers
I’ve recently been playing around with the HTML 5 date input controls. They’re pretty robust, especially in the mobile space, as all of the major mobile players have excellent support for most HTML 5 tags. One of the downsides that I’ve come across, however, is that the date controls don’t support the placeholder tag, or any custom display strings. So if I want to show a date in a particular format, I’m out of luck, as I have to stick with the standard “yyyy-MM-dd” format that most browsers natively display the date in. For the most part, that’s ok, but I spent some time coming up with a solution that provides both placeholder and custom date format support to the input date control.
A note here: each browser handles the date controls a little differently. Chrome on the desktop, for example, shows a bunch of different options for setting the date, including typing the numbers for each of the year, month and date fields, while also providing an arrow which opens up a date picker. Mobile browsers all open up the date picker while tapping on the input, which is great for this solution. However, this solution won’t work for desktop browsers, as the date picker doesn’t show until the user clicks on the little arrow, which is invisible.
Posted on May 5, 2014 by Chris Harrington