Practical Functional JavaScript: Why React and Redux? Video

This video series mirrors the blog post series on creating a functional application in JavaScript. This will map closely with the second post of that series. We will cover putting our functional backend together with the DOM. This is where the application becomes a useful item and not just a bunch of functions. In addition to this, we will cover fundamentally why React and Redux are awesome. While we do not use the actual React and Redux libraries, we use the same thinking behind our render functions and state management.

Watch and enjoy!

Node.js, Socket.io, and Redis: Intermediate Tutorial – Client side (Screencast)

Download the src(github)
View the demo

Blog Post Series

Screencast

Continue reading “Node.js, Socket.io, and Redis: Intermediate Tutorial – Client side (Screencast)”

Node.js, Socket.io, and Redis: Intermediate Tutorial – Server side

Download the src(github)
View the demo

Blog Post Series

This post has been a long time coming, about a year in fact. Although I have not been lazy. As you can probably tell from my other posts and the little blurb at the end of each post, is that I have written a book. It focuses on Node.js,Express, Passport, Socket.IO, Redis, RabbitMQ, React, Backbone, Grunt, and Ansible. All in one book! Which brings us to this post in a round about way.

One of my most popular posts is about using Node.js, Socket.IO, and Redis to build a small voting application. It is also my most forked repo on Github. After finishing the book I decided to revisit this codebase and see how it has held up over time. Unfortunately it needed some improvement. There is a law of programming that states any code that is more than three months old will be viewed as crap. Some of the improvements are upgrades to libraries (Express 4.2, Socket.IO 1.2) and React for client side rendering (I am currently working on the client side and should be ready soon). Other improvements are just better code. An example of this is using promises for data retrieval and much better testing.

You will not need to read the previous post as I will take you through the all of the code and explain what it all does. This is my longest post to date, but it does cover everything you will need to know about the server side of this project. Here is what we will cover:

  • Configuration and environment variables
  • Express 4.2+
  • Socket.IO 1.2+
  • Redis and building a Redis data structure
  • Repository pattern using dependency injection
  • Testing the repository
  • Testing Socket.IO

Let’s start at the beginning with the package.json.

package.json

The package.json file for a Node.js project is the best place to start. This defines the main file, dependencies, any scripts that can be run, and many other things. Here is the package.json for this project.  Continue reading “Node.js, Socket.io, and Redis: Intermediate Tutorial – Server side”

WebRTC – Using your Webcam for video in HTML Tutorial

Download the src(github)
View the demo

WebRTC is project to bring Real Time Communications to the browser. It is designed to allow video/voice chat with the browser without plugins. Because you technically have to have access to the webcam to do video chat, WebRTC gives you a javascript API to the webcam. This is what I am going to show you how to use. I am not going to go into the audio portion or how to create a real time communication link. WebRTC is still very much in beta and most browsers use a vendor prefix to get access to the webcam. I will show you what I did to create my webcam javascript abstraction library.

Create a Webcam Library

I created a small shim/abstraction library to make getting and using the webcam easier. I used what I learned from creating CreateMyPhotobooth (this is a small plug, but I am relaying what I learned from this). I have the project on github with a demo, grunt build info, and tests.

Use of the Library

When you include the library you will have access to the wcvj (WebCamVidJa) object. The first function is videoIsSupported. Continue reading “WebRTC – Using your Webcam for video in HTML Tutorial”

Facebook and FourSquare API checkin calls with SVG in HTML tutorial

Download the src(github)
View the demo

This has been an idea in my head for awhile now. The app will get your checkins from Facebook and FourSquare and will show you on a map which states you have been to. It is very similar to the other apps I have created. Although I do use a new skill, manipulating SVGs.

I want to give a quick thanks to Theshibboleth who created the SVG of the US. I downloaded it from Wikipedia.

The SVG

SVG stands for Scalable Vector Graphics. The simplest definition is that it is an XML file that describes how to build an image. If you would like to know more as always you can use Wikipedia or do a quick Google search. SVG has support in HTML5 for inline and loading. I am using inline SVG for this project. To do that all you have to do is copy out all the XML from the SVG file and paste it into your page. This lets you treat the SVG just like HTML. By that I mean that you can apply CSS classes to change the look and use javascript to attach event listeners and/or modify attributes on the fly. Continue reading “Facebook and FourSquare API checkin calls with SVG in HTML tutorial”

node.js, socket.io, and redis: Beginners Tutorial (Screencast)

Download the src(github)
View the demo

This project has been updated since this was published. The project now includes Express 4.2, Socket.IO 1.2, newer version of Redis, promises, and testing. It is all around better and more up to date. You can read the new post here.

node.js, socket.io, and redis: Beginners Tutorial – Client side

Download the src(github)
View the demo

This demo has been updated since this was written. The new version uses Express 4.2.0 and Socket.IO 1.1.0. Some of the statements may not match what is currently in github.

In the previous post I discussed the server side. This post will cover client side. The server side has a lot less code because it only worries about taking the requests and putting them into redis and then sending them back out. The client has the all the display logic. Let’s get started.

Socket.io

The great thing about socket.io is that the client side is just as easy as the server side. The same three basic actions are there, connect, on, and emit. The basic idea is that one side emits to the on event of the other side. Socket.io will keep track of the connection for you. On the the side that listens you get whatever you passed through the connection. Continue reading “node.js, socket.io, and redis: Beginners Tutorial – Client side”