Travis Tidwell View RSS

Online Lodash Tester 30 Jun 2016 5:53 AM (9 years ago)

If there is one JavaScript library that could be classified as the Swiss Army Knives of JavaScript, it would have to be Lodash. Lodash is a tool that I use all the time in pretty much every single JavaScript project that I write, and I constantly find myself going to the website to read the documentation. If there is one thing that I wish I could do, however, it test my Lodash code within a JavaScript console before I place that within my code. It is this reason that I created an Online Lodash Tester within Codepen.

Enjoy!

See the Pen Online Lodash Tester by Travis Tidwell (@travist) on CodePen.

Building Serverless Apps with Form.io 16 Jun 2016 6:00 AM (9 years ago)

Since we released Form.io last year, we have come a long way to provide a revolutionary new tool that catapults developers to world of Serverless Applications. In this walkthrough tutorial, I show you how to build a Serverless Movie Management application where you can create Playlists of Movie Trailers from YouTube. We also talk about the concepts behind Serverless applications, and then end up revealing an amazing capability that allows developers to share, fork, and launch existing apps on Github. Enjoy!

Introducing Form.io: The combined Form and API platform for developers. 7 Oct 2015 11:32 AM (10 years ago)

I am very excited to talk to you about a new project that I have been working on called <form.io>. As a quick introduction, Form.io is the first combined Form and API platform built specifically for Developers. It provides them an easy to use drag-and-drop form builder interface that not only creates forms that can be embedded within their applications, but also automatically generates a RESTful API to support them. Take a look at this 2 minute video to get a better idea of this amazing technology, and enjoy Form.io!

How to build a M.E.A.N web application 20 Jan 2015 6:45 AM (10 years ago)

Lately I have been really getting into a new web application stack referred to as the M.E.A.N stack. To give you a very brief description, the M.E.A.N stack is a full web application stack where JavaScript is used at every layer. The acronym stands for the following:

• M: MongoDB – A NoSQL database powered by JavaScript.
• E: ExpressJS – A Node.js application framework.
• A: AngularJS – A front-end single-page javascript application framework.
• N: NodeJS – A server-side javascript application engine.

This stack has many benefits that caters itself to the new Web 3.0 movement where the Internet of Things is radically changing old paradigms on how web applications should be built. For example, the M.E.A.N stack requires a total separation between the Front end application and the Backend server via RESTful API’s. This provides the ability for multiple front end applications to be built on top of a single backend REST service.

When learning how to build a M.E.A.N web application, one thing that frustrated me was the lack of a complete walkthrough tutorials on how to build an app within this architecture. I was able to find plenty of documentation over the atomic pieces of M.E.A.N (such as plenty of documentation and videos over AngularJS), but it was really up to me to put all the pieces together to build an application. I created this presentation and video as a COMPLETE walkthrough on how to get your application started.

I hope you enjoy it.

Video

Presentation

http://travistidwell.com/presentations/meanapp

When to NOT use Drupal 20 Oct 2014 6:12 PM (11 years ago)

Today, I gave a presentation to the Drupal Dallas meetup over when to NOT use Drupal. This is in many ways a hard topic to discuss, since as a Drupal fan, I want Drupal to be the solution to many web problems. However, it just isn’t pragmatic in many cases, and the presentation I gave explores this topic.

In short, my challenge is for everyone to stop saying “Yeah, Drupal can do that!” and instead start saying “Yeah, Drupal SHOULD do that!” and mean it.

I hope you enjoy.

Slides

• http://travistidwell.com/presentations/notdrupal

Video

Coder Soundtrack Volume 4 17 Oct 2014 12:23 PM (11 years ago)

Listening to this makes software fly from my fingertips. Enjoy.

A nerds guide to a $100 DVD-less car movie experience 3 Jul 2014 11:15 AM (11 years ago)

For those out there with kids, you already know what a nightmare it is to go on a road trip with them. Don’t get me wrong, I love my kids… but driving in the car with them on a road trip makes me go batshit insane. That is why it is important for all parents out there to establish a road-trip strategy to keep your kids occupied. Movies are great, but that also opens the door for more frustration trying to deal with movies in the car… Things like…

• It’s expensive! (especially if you have more than one kid who don’t like to watch the same movies)
• Keeping track of DVD’s in the car is a nightmare
• Car DVD players have a tendency to trash your DVD’s
• You have to keep swapping out movies unless your kid is OK with watching the same one over and over…
• The list goes on.

So, for all those parents out there, who would like a good car movie experience for both the kids and you, here’s a nerds walkthrough on how you can make it happen.

Step 1: Get the stuff you need…

For this step, you will need to spend some money… but it is not much. I too was on a tight budget, so here is what I found that works out great.

• A DVD Player that supports SD/USB Cards – The SD/USB is the most important part here. That is what is going to free us from using DVD’s (which I will get to later). Here is the one that my wife picked out, and what I used for this blog post. It has good reviews and is cheap so we went with it.

  
  Sylvania SDVD7027-C, 7-Inch Portable DVD Player with Car Bag/Kit, Swivel Screen, USB/SD Card Reader (Black)
   

• A USB Drive or SD Card – Next you will need to get a USB Drive or an SD Card to hold all of your movies. Here is what I recommend.

  
  Transcend 32 GB Class 10 SDHC Flash Memory Card (TS32GSDHC10E)
   

• Kids Headphones – Since you may have more than one in the car, your kids will probably each need their own set of kids headphones. These will limit the output volume so that it doesn’t harm the ears of your kids.

  
  Kidz Gear Wired Headphones For Kids – Blue
   

• TOTAL: Only $95.38!!!

Step 2: Convert your DVD to digital files (mp4)

This step, you will need to download a piece of software that will help you rip your DVD’s into media files. I am on a Mac, so the software that I used was called Handbrake. The best way to do this step is really to just follow some already fantastic tutorials on how to rip your DVD. Here is a really good one that seems to be complete. – http://www.macworld.com/article/1157590/how_to_rip_dvd_handbrake.html

Step 3: Install Transcoding Software

Now that you have a video file of your DVD, you will still need to transcode that video into a format that your DVD player can understand. Some of the more expensive players, you don’t need to worry about this, but since I was on a budget, I had to convert the videos that I had into a lower resolution AVI format. To do this, you will need FFMPEG.

• Start by installing Homebrew – The easiest way to install FFMPEG on a Mac is to do it using Homebrew. The installation does require you to use your Terminal, which may scare some people, but what it will really amount to is you just copying and pasting what I provide you into the shell and press enter. So, open up Terminal on your Mac (you will find it in your Utilities), and then type the following.

1

  ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

• Check the Homebrew installation – Now that we have homebrew installed, the next thing we should do is just make sure that everything is installed correctly. We can do that by typing the following.

1

  brew doctor

• Install FFMPEG – The next task is to install FFMPEG. We can find all the available options by running the following.

1

  brew info ffmpeg

• With this information, we can then construct the installation command which will install pretty much everything available. Install FFMPEG by typing the following in your command prompt.

1

  brew install ffmpeg --with-fdk-aac --with-libvo-aacenc --with-libvorbis --with-libvpx --with-opencore-amr --with-openjpeg --with-opus --with-rtmpdump --with-schroedinger --with-speex --with-theora --with-tools --with-x265

Step 4: Transcode your videos

We are now ready to start transcoding! To transcode any of your vidoes, simply navigate to the directory that contains your video and then type the following command.

1

  ffmpeg -i Ratatouille.mp4 -c:v mpeg4 -vtag xvid -qscale:v 2 -c:a libmp3lame -qscale:a 6 -vf scale=480:-1 Ratatouille.avi

You will need to change your command to take the name of your video (For me that was Ratatouille.mp4), and then also provide the name of the video that will be converted (For me that was Ratatouille.avi. This bit of code actually takes the original video and then scales it to the size of the DVD player screen as well as converts it to a format that you video player understands.

Step 5: Write a script to transcode all your videos!

Now, lets say that you already have a folder filled with videos that you wish to transcode. It may be painful to wait for each and every one of them to finish before doing the next one. You can solve this problem by writing a script that will iterate through all the videos within a folder and convert them and put them in an “encoded” folder. To do this, create a new script called encode.sh and then place it inside of the directory with your videos. The contents of this file will be as follows.

encode.sh

1
2
3
4
5
6
7
8
9
10

#!/bin/bash
mkdir encoded
for FILE in *.*; do
  if [[ "${FILE}" != *encode* ]]; then
    echo "Converting ${FILE}"
    OUTPUT=$(basename "$FILE")
    OUTPUT="./encoded/${OUTPUT%.*}.avi"
    ffmpeg -y -i "${FILE}" -c:v mpeg4 -vtag xvid -qscale:v 2 -c:a libmp3lame -qscale:a 6 -vf scale=480:-1 "${OUTPUT}"
  fi
done

You will now need to make sure this file is executable by typing the following.

1

  chmod +x encode.sh

You can now execute this file by typing the following in terminal…

1

  ./encode.sh

This will now create all of the videos and place them in an encoded folder.

Step 6: Put all these files in on your SD Card.

You are now ready to copy all the encoded files directly onto your SD Card, and then put this inside of your DVD Player. You should be able to get about 30 DVD’s worth of videos onto a single card!!

Happy Traveling!!!

Fun with GIT and AWK 11 Jun 2014 6:53 PM (11 years ago)

For those of you who use GIT, you have probably noticed that while it is an incredibly powerful tool, one area that it could use some help is reporting. For example, Let’s say that I want to determine all changes to a file provided a date range… how would you do that? While there are many plugin utilities out there that provide reporting to GIT, very rarely will you find a utility that is able to generate the report you need at all times.

One thing that many people do not realize is that within GIT you can easily pipe the log to another application and quite literally build your own reports from within the command line. One of the more powerful applications that you can utilize is AWK, which allows you to write some code that parses through a log to generate a report to your needs.

Here are a few that I created to give you an idea of what you can do with this technique.

Determine how productive your team has been using git history.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

git log --shortstat --since="1 year ago" --until="now" \
  | grep "files changed\|Author\|Merge:" \
  | awk '{ \
    if ($1 == "Author:") {\
      currentUser = $2;\
    }\
    if ($2 == "files") {\
      files[currentUser]+=$1;\
      inserted[currentUser]+=$4;\
      deleted[currentUser]+=$6;\
    }\
  } END {\
    for (i in files) {\
      print i ":", "files changed:", files[i], "lines inserted:", inserted[i], "lines deleted:", deleted[i];\
    }\
  }'

Determine all changes to a file provided a date range in GIT.

1
2
3
4
5
6
7
8
9
10

git log --shortstat --since="3 weeks ago" --until="now" \
  | grep "Merge pull request" -B 5\
  | awk '{\
    if ($1=="commit") {\
      output = system("git diff " $2 "^ " $2 " {YOUR FILE HERE}");\
      if (output) {\
        print output;\
      }\
    }\
  }'

Determine the diff provided a Pivotal Tracker Story ID.

1
2
3
4
5
6
7

git log\
  | grep "Merge pull request.*{INSERT STORY ID HERE}" -B 5\
  | awk '{\
    if ($1=="commit") {\
      print system("git diff " $2 "^ " $2);\
    }\
  }'

Determine all commits for a developer given a time range.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

git log --shortstat --since="2011-9-1" --until="2011-11-15" \
  | grep "commit\|Author\|Merge:" \
  | awk '{\
    if ($1 == "Merge:") {\
      merge = 1;\
    }\
    if ($1 == "commit") {\
      merge = 0;\
      commit = $2;\
    }\
    if ($1 == "Author:" && tolower($2) == tolower("Travis")) {\
      if (!merge) {\
        merge = 0;\
        print system("git diff " commit "^ " commit);\
      }\
    }\
  }'

I hope everyone finds this useful. Now use the comments to share your own GIT with AWK magic!

Working with Seamless iFrames 11 Apr 2014 7:31 PM (11 years ago)

As a web developer, one of the things that I have learned is that old conventions should NOT apply to modern practices. iFrames is a great example of a wonderful web technology that is shunned today based on old impressions and existing bad practices. But, when it comes to iframes, you should not base your impressions off of the applications of that technology, but off of the technology itself. And as it turns out, iFrames are amazing if used correctly.

So, what is it about iFrames that people have a sour opinion? Well, for one thing, they can be abused, and unfortunately people LOVE to abuse iframes. My rule of thumb is this… Do not use an iframe to encapsulate an iterface that changes context. What I mean by this is you should not use an iframe if the page you are iframing has the capability of navigating a person away from a single purpose (like iframing all of https://youtube.com vs. just iframing a single video in YouTube).

Another problem with iframes is that they are kind of hard to work with… As it turns out, trying to create an iframe that appears to your visitor as a single seamless interface is not an easy thing to do. For this reason, I decided to create a single library that does all of the hard work for you. It is called Seamless.js and I hope you like it.

Click on these links to check out Seamless.js:

http://www.travistidwell.com/seamless.js/index.html (Seamless.js Website) https://github.com/travist/seamless.js (Github Project Page)

Coder Soundtrack Volume 3 26 Mar 2014 5:56 PM (11 years ago)

It has been a while since I released my last Coder Soundtrack, and due to such a great response from the previous soundtrack, I have decided to bring you my latest. I hope you enjoy…

An online RSA public and private key generator 6 Sep 2013 6:22 PM (12 years ago)

I was recently in a meeting where a person needed to generate a private and public key for RSA encryption, but they were using a PC (Windows). This is something that is easily done via a terminal using ssh-keygen on Mac and Linux, however on Windows… this tool is not easily accessible to the non-technical person.

It then occurred to me (and a head slapped followed), that I have fairly recently published a library for Javascript RSA encryption which includes private and public key generation for RSA encryption. Not only that, but this is all available online.

So, if anyone needs an online RSA key generator, look no further than http://travistidwell.com/jsencrypt/demo.

This directly maps to the Open Source GitHub repository found at https://github.com/travist/jsencrypt, so anyone can modify this website to make it better.

And here is an iframe of the RSA key generation tool.

sudo make me a sandwich... Literally! 1 Sep 2013 6:57 PM (12 years ago)

So, I have been preparing for my presentation that I will be giving to the jQuery Conference, where I will be talking about automating and testing the web using a combination of jQuery, Node.js, and Phantom.js. This presentation will primarily go over a new library that I wrote called jQuery.go.js, which takes the jQuery interface and brings it into Node.js for the sole purpose of web automation and testing using the Phantom.js headless browser. It is a project that I am very happy with so when you get a chance, check it out and give me your feedback…

But what REALLY excites me about this presentation is the project I came up with that demonstrates the power of these three JavaScript technologies combined. What I basically created was a command line application that allows you to order a sandwich from Jimmy John’s website. This should strike a chord with many geeks out there, since there is a legendary XKCD comic which I basically made real with this project…

So, without further adieu, I give you MakeMeASandwich.js!

I provide some instructions on how to install and use this library on the project page…

Also, I purposefully left my favorite sandwich and work address in the config.json if anyone decides they would like to say thanks… ;)

Ping me in IRC @ #drupal-dallas (travist) before you do it though…

Enjoy!

Coder Soundtrack volume 2 16 Jul 2013 6:57 PM (12 years ago)

As most of you already know, I am a big fan of music and am a firm believer that a good coder listens to music while they code. For that reason, I am releasing my Coder Soundtrack volume 2 which is the latest of the music that I am listing to while I code. I hope you enjoy…

Using Phantom.js with Node.js 5 Jul 2013 11:40 AM (12 years ago)

Recently, I have had much interest in building web automation and testing tools using Node.js. The challenge, however, is when using Node.js for building tests and automation, your options are pretty slim when picking your headless browser. While Zombie.js is a decent browser, it uses JSDOM for its layout engine, whereas most of the web is ran on (or based off of) WebKit. This creates problems when trying to formulate accurate tests as well as benefit from the ongoing development into the WebKit engine. What really peaked my interest was the project called Phantom.js which is basically a headless WebKit browser that exposes a JavaScript API to interact with the browser.

Here is the problem… Phantom.js is not compatible with Node.js. However, there is a project that does expose the Phantom.js browser within the Node.js environment. This project is called Node Phantom, which does a great job at bringing PhantomJS to NodeJS. But, there is still another issue where the API to this library is not easy to use like Zombie.js.

That is why I built a library which leverages the Node-Phantom library, but brings in the Zombie.js API for ease of use. This library is called Zombie Phantom and I hope you enjoy it.

Also, please read the project description to get an idea of the differences between this library and the Zombie API before using.

Here is an example of how to use this library.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var Browser = require('zombie-phantom');

var browser = new Browser({
  site: 'http://localhost:8888',
  addJQuery: false  // This page already has jQuery installed so use it...
});

browser.visit('/user/login', function() {
  browser.fill('#edit-name', 'admin', function() {
    browser.fill('#edit-pass', '123password', function() {
      browser.pressButton('#edit-submit', function() {
        console.log('You are logged in!');
        browser.close();
      });
    });
  });
});

Enjoy…

Mobile Drupal with Sencha Touch 18 Jun 2013 11:36 AM (12 years ago)

Yesterday, I gave a presentation to the Drupal Dallas Group over a technology that I have been really interested in lately called Sencha Touch. Basically, this technology allows you to create a mobile application using an MVC web application framework based off of ExtJS. What is even more exciting is when you pair this technology with the Drupal CMS as a backend service for this mobile framework. The result is something very exciting.

Presentation Slides

• http://travistidwell.com/presentations/drupal-sencha
• https://github.com/travist/presentations/tree/master/drupal-sencha

My new blog using Octopress 2 May 2013 11:36 AM (12 years ago)

Today I am launching my website using a new technology that REALLY excites me. For starters, this blog is built using the Jekyll system, which is basically a static website generator but allows you to install plugins, create layouts, as well as many other features that keep you from repeating yourself when building a website (DRY).

In addition to Jekyll, this blog is built using a technology that sits on top of Jekyll called Octopress, which simply provides a framework for building technology blogs… or in other words, it is a blogging engine for Nerds. Amazing stuff and I hope this enables me to easily add my thoughts from the past and the future.

And then finally, I cannot forget Github Pages. I am in love with Github and when they introduced this capability, it just solidified my allegiance to this company. If you haven’t had a chance to see this technology, then I highly recommend checking it out.

drupal.go.js: A node.js package to automate and test Drupal using Zombie.js. 14 Apr 2013 12:45 PM (12 years ago)

When I gave my presentation yesterday regarding Automating and Testing Drupal with Zombie.js, I also introduced a new project that I created which makes it super simple to automate anything within the Drupal UI using Zombie.js (which is a completely headless browser implemented in Node.js). This project is called drupal.go.js and I am very excited about it.

Here are the details about this project…

Introduction

This node.js package provides an easy way to automate and test Drupal using the Zombie.js framework. It provides some helpers that make working with Drupal within Zombie.js easy and fun.

Installation & Usage

Step 1

Install node.js by going to http://nodejs.org

Step 2

On OS X install the OSX GCC installer. On Windows you’ll need Cygwin to get access to GCC, Python, etc. Read this for detailed instructions and troubleshooting.

Step 3

Since this tool requires 0.8 of node.js or earlier, you will need to install the NVM. Go to https://github.com/creationix/nvm and follow the installation section.

Step 4

You can now install this library using NPM.

nvm use 0.8
npm install drupalgo

Configuration

The configuration for your automation and testing should be placed within a configuration file in *.json form. This file contains your configurations for your Drupal installation as well as other configurations that you would like to include in your automation and testing, such as content creation, etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "host": "http://drupal.local/",
  "user": "admin",
  "nodes": [
    {
      "type": "article",
      "title": "Hello There",
      "body": "This is very cool!"
    },
    {
      "type": "article",
      "title": "This is another node",
      "body": "Nice!"
    }
  ]
}

Example

You can now include this library in your test application and then do stuff using the simple drupal.go command. Since this library uses Zombie.js for its core browser, you can pass along any Zombie.js command from it’s Zombie.js API to the drupal.go command like so…

1

drupal.go('pushButton', '#edit-submit')

This function returns a Promise to be used with the popular Async.js library making it very simple to build intuitive tests without falling into callback hell.

Here is an example of how simple it is to write some automation with this library…

Login, then create some nodes….

1
2
3
4
5
6
7
8
9
10
11
12
13

var async =     require('async');
var drupal =    require('drupalgo');

// Load the config.json file... as seen above.
var browser = drupal.load('config.json');

// Login, then create some content...
async.series([
  drupal.go('login'),
  drupal.go('createMultipleContent', drupal.config.get('nodes'))
], function() {
  console.log('We are done!');
});

Extending

This library is super easy to extend and create your own Drupal processes. You can do so by simply attaching them to the Drupal object and then they can be utilized with drupal.go like other processes. Here is an example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var async =     require('async');
var drupal =    require('drupalgo');

// Add a new task to edit the node.
drupal.editNode = function(done) {
  async.series([
    this.go('visit', 'node/1234/edit'),
    this.go('fill', '#edit-title', 'Something else!'),
    this.go('pressButton', '#edit-submit')
  ], done);
};

// Load the config.json file... as seen above.
var browser = drupal.load('config.json');

// Login, then create some content, then EDIT A NODE!...
async.series([
  drupal.go('login'),
  drupal.go('createMultipleContent', drupal.config.get('nodes')),
  drupal.go('editNode')
], function() {
  console.log('We are done!');
});

Happy Automating….

Automating and Testing Drupal with Zombie.js 13 Apr 2013 11:18 AM (12 years ago)

Today I gave a presentation over Automating and Testing Drupal with Zombie.js at the Drupal Dallas Days Conference. I had a blast putting this presentation together and I think just as much fun giving it. I also used the incredible library Reveal.js for the first time which is an amazing way to build a presentation. I hope you enjoy it…

Presentation Video

Presentation Slides

• http://travistidwell.com/drupal-zombie
• http://github.com/travist/drupal-zombie

Overview

The Bite

It all begins with the bite… Let’s say you need to automate something repetitive that you always do within the Drupal UI. Or, maybe you would like to write automated tests for Drupal, but do not want to mess with the nasty installation and runtime of Selenium IDE. Enter Zombie.js… a lightweight, insanely fast, headless browser for testing and automation within a single Node.js package. No browser required. You have just been bitten.

The Infection

Installation is simple. Because it is a Node.js package, installation is as simple as installing node.js on your local computer (http://nodejs.org), and then run

npm install zombie

You have just been infected.

Walking

You realize that writing simple tests and automation tools is simple. You select elements on the page using tools you know such as jQuery Selectors (Sizzle). The API is easy and intuitive. You are now walking.

Hunting and Feeding

You now cannot get enough… You are automating every mundane taks that you do within the UI. You now have a powerful command line application at your fingertips and realize that you do not need to build custom Services endpoints or custom Drush commands to do what you want. You hunger for more… welcome to the hunting phase.

Believing

You are now a believer. Zombie.js is amazing and will make your life easier.

A better library for JavaScript Asymmetrical RSA Encryption 15 Feb 2013 7:57 PM (12 years ago)

I am a firm believer that JavaScript will eventually be the ubiquitous coding language of the future. Although there are many objections to this statement, I don’t think anyone can argue that it is the best poised for ubiquity considering it is now used in both server side (node.js) and obviously client side open web standards. And considering that this language did start out as a ‘toy’ language, I am often amazing at how far it has come in maturity in recent years. There is an area where I am most amazed at its progression, and that is with Encryption. For years, this area was pretty much dominated by the C and C++ languages (to which I am also a seasoned developer in), but now that JavaScript has made its way to the server, it is becoming recognized as a potential contender to this domination.

Much of this recognition should be directed toward the fantastic work of Tom Wu of Standford. It was his work with the JSBN library that really opened peoples eyes to the effectiveness of JavaScript in the field of encryption. However, there was just minor drawback to his work… The only real way to utilize his library is to have a full understanding behind the equations of encryption, which comes at as a huge hurtle considering the industry has been spoiled with the ease of use of the OpenSSL library generation of standardized keys used in the encryption. In this system, there is really only two things to worry about… The Public Key and the Private Key, used for encryption and decryption respectively. But in order to use Tom Wu’s library, you must learn how to utilize eight different variables to the encryption equations! I recognized this as a perfect opportunity to create a simple wrapper library around his library that simply speaks in terms of the Public and Private keys everyone is familiar with. Of course I found other libraries out there that claim to do the same, but what I couldn’t find in these libraries was a simple wrapper around this library that basically uses Tom’s library practically untouched, but simply adds a wrapper to provide parsing of actual Private and Public key-pairs generated with OpenSSL. Enter JSEncrypt.

Download

Go to https://github.com/travist/jsencrypt to download this library.

Website & Demo

http://travistidwell.com/jsencrypt

How to use this library.

This library should work hand-in-hand with openssl. With that said, here is how to use this library.

• Within your terminal (Unix based OS) type the following.

openssl genrsa -out rsa_1024_priv.pem 1024

• This generates a private key, which you can see by doing the following…

cat rsa_1024_priv.pem

• You can then copy and paste this in the Private Key section of within index.html.
• Next, you can then get the public key by executing the following command.

openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem

• You can see the public key by typing…

cat rsa_1024_pub.pem

• Now copy and paste this in the Public key within the index.html.
• Now you can then convert to and from encrypted text by doing the following in code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!doctype html>
<html>
  <head>
    <title>JavaScript RSA Encryption</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="bin/jsencrypt.min.js"></script>
    <script type="text/javascript">

      // Call this code when the page is done loading.
      $(function() {

        // Run a quick encryption/decryption when they click.
        $('#testme').click(function() {

          // Encrypt with the public key...
          var encrypt = new JSEncrypt();
          encrypt.setPublicKey($('#pubkey').val());
          var encrypted = encrypt.encrypt($('#input').val());

          // Decrypt with the private key...
          var decrypt = new JSEncrypt();
          decrypt.setPrivateKey($('#privkey').val());
          var uncrypted = decrypt.decrypt(encrypted);

          // Now a simple check to see if the round-trip worked.
          if (uncrypted == $('#input').val()) {
            alert('It works!!!');
          }
          else {
            alert('Something went wrong....');
          }
        });
      });
    </script>
  </head>
  <body>
    <label for="privkey">Private Key</label><br/>
    <textarea id="privkey" rows="15" cols="65">-----BEGIN RSA PRIVATE KEY-----
MIICXQIBAAKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQ
WMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNR
aY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB
AoGAfY9LpnuWK5Bs50UVep5c93SJdUi82u7yMx4iHFMc/Z2hfenfYEzu+57fI4fv
xTQ//5DbzRR/XKb8ulNv6+CHyPF31xk7YOBfkGI8qjLoq06V+FyBfDSwL8KbLyeH
m7KUZnLNQbk8yGLzB3iYKkRHlmUanQGaNMIJziWOkN+N9dECQQD0ONYRNZeuM8zd
8XJTSdcIX4a3gy3GGCJxOzv16XHxD03GW6UNLmfPwenKu+cdrQeaqEixrCejXdAF
z/7+BSMpAkEA8EaSOeP5Xr3ZrbiKzi6TGMwHMvC7HdJxaBJbVRfApFrE0/mPwmP5
rN7QwjrMY+0+AbXcm8mRQyQ1+IGEembsdwJBAN6az8Rv7QnD/YBvi52POIlRSSIM
V7SwWvSK4WSMnGb1ZBbhgdg57DXaspcwHsFV7hByQ5BvMtIduHcT14ECfcECQATe
aTgjFnqE/lQ22Rk0eGaYO80cc643BXVGafNfd9fcvwBMnk0iGX0XRsOozVt5Azil
psLBYuApa66NcVHJpCECQQDTjI2AQhFc1yRnCU/YgDnSpJVm1nASoRUnU8Jfm3Oz
uku7JUXcVpt08DFSceCEX9unCuMcT72rAQlLpdZir876
-----END RSA PRIVATE KEY-----</textarea><br/>
    <label for="pubkey">Public Key</label><br/>
    <textarea id="pubkey" rows="15" cols="65">-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDlOJu6TyygqxfWT7eLtGDwajtN
FOb9I5XRb6khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76
xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4
gwQco1KRMDSmXSMkDwIDAQAB
-----END PUBLIC KEY-----</textarea><br/>
    <label for="input">Text to encrypt:</label><br/>
    <textarea id="input" name="input" type="text" rows=4 cols=70>This is a test!</textarea><br/>
    <input id="testme" type="button" value="Test Me!!!" /><br/>
  </body>
</html>

Here is a demo… http://travistidwell.com/jsencrypt/demo/index.html

Other Information

This library heavily utilizes the wonderful work of Tom Wu found at http://www-cs-students.stanford.edu/~tjw/jsbn.

This jsbn library was written using the raw variables to perform encryption. This is great for encryption, but most private keys use a Private Key in the PEM format seen below.

1024 bit RSA Private Key in Base64 Format

-----BEGIN RSA PRIVATE KEY-----
MIICXgIBAAKBgQDHikastc8+I81zCg/qWW8dMr8mqvXQ3qbPAmu0RjxoZVI47tvs
kYlFAXOf0sPrhO2nUuooJngnHV0639iTTEYG1vckNaW2R6U5QTdQ5Rq5u+uV3pMk
7w7Vs4n3urQ6jnqt2rTXbC1DNa/PFeAZatbf7ffBBy0IGO0zc128IshYcwIDAQAB
AoGBALTNl2JxTvq4SDW/3VH0fZkQXWH1MM10oeMbB2qO5beWb11FGaOO77nGKfWc
bYgfp5Ogrql4yhBvLAXnxH8bcqqwORtFhlyV68U1y4R+8WxDNh0aevxH8hRS/1X5
031DJm1JlU0E+vStiktN0tC3ebH5hE+1OxbIHSZ+WOWLYX7JAkEA5uigRgKp8ScG
auUijvdOLZIhHWq7y5Wz+nOHUuDw8P7wOTKU34QJAoWEe771p9Pf/GTA/kr0BQnP
QvWUDxGzJwJBAN05C6krwPeryFKrKtjOGJIniIoY72wRnoNcdEEs3HDRhf48YWFo
riRbZylzzzNFy/gmzT6XJQTfktGqq+FZD9UCQGIJaGrxHJgfmpDuAhMzGsUsYtTr
iRox0D1Iqa7dhE693t5aBG010OF6MLqdZA1CXrn5SRtuVVaCSLZEL/2J5UcCQQDA
d3MXucNnN4NPuS/L9HMYJWD7lPoosaORcgyK77bSSNgk+u9WSjbH1uYIAIPSffUZ
bti+jc1dUg5wb+aeZlgJAkEAurrpmpqj5vg087ZngKfFGR5rozDiTsK5DceTV97K
a3Y+Nzl+XWTxDBWk4YPh2ZlKv402hZEfWBYxUDn5ZkH/bw==
-----END RSA PRIVATE KEY-----

This library simply takes keys in the following format, and translates it to those variables needed to perform the encryptions used in Tom Wu’s library.

Here are some good resources to investigate further.

• http://etherhack.co.uk/asymmetric/docs/rsa_key_breakdown.html
• http://www.di-mgt.com.au/rsa_alg.html
• https://polarssl.org/kb/cryptography/asn1-key-structures-in-der-and-pem

With this information, we can translate a private key format to the variables required with the jsbn library from Tom Wu by using the following mappings.

modulus => n
public exponent => e
private exponent => d
prime1 => p
prime2 => q
exponent1 => dmp1
exponent2 => dmq1
coefficient => coeff

Authenticating Flatiron.js with Passport.js 28 Sep 2012 4:13 PM (13 years ago)

So, I have fallen in love with Flatiron.js. For those who are not familiar with this framework, it is basically an application framework for Node.js. Obviously, it isn’t the only framework out there, but I would like to argue that it is THE ONLY framework doing things right with JavaScript on the server side. My reasons for this statement are backed by how it utilizes RVP instead of MVC considering the isomorphic nature of Server-side to Client-side libraries. For more foundation to this statement, please read Scaling Isomorphic Javascript Code; it is a fantastic read.

Regardless, one of my major complaints with Flatiron.js was that it lacks in OAuth. Looking around the Node.js community, there is a clear winner when it comes to OAuth, which is Passport.js. But, there is a problem… Passport.js was built on top of the Express.js applicaton framework and not Flatiron.js. Although, Express.js libraries are Connect.js compatible, and Flatiron.js is also Connect.js compatible, this isn’t enough to provide a clean integration between Passport.js and Flatiron.js. So, to solve this issue, I created a library that takes care of the integration work for you. It is called Flatiron Passport, and I would love for you to check it out…

Here is the readme from this library…

Passport.js integration for FlatIron web framework.

This package allows Flatiron.js applications to easily use the Passport.js authentication framework.

There are only two things that are different between using this API and using the regular Passport API.

1.) Instead of calling…

1
2
3
4
5
6

var express = require('express');
var passport = require('passport');
var app = express();
// ... BOILERPLATE SETUP CODE GOES HERE ...
app.use(passport.initialize());
app.use(passport.session());

You simply need to call…

1
2
3
4
5

var flatiron =      require('flatiron');
var fipassport =    require('flatiron-passport');
var app =           flatiron.app;
// ... BOILERPLATE SETUP CODE GOES HERE ...
app.use(fipassport);

2.) Now anywhere you would use the variable passport, you replace that with fipassport in your app, like so…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

passport.use(new LocalStrategy(function(username, password, done) {
  ...
  ...
});

passport.serializeUser(function(user, done) {
  ...
  ...
});

passport.deserializeUser(function(id, done) {
  ...
  ...
});

passport.authenticate(.....)

You simply call this instead…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

fipassport.use(new LocalStrategy(function(username, password, done) {
  ...
  ...
});

fipassport.serializeUser(function(user, done) {
  ...
  ...
});

fipassport.deserializeUser(function(id, done) {
  ...
  ...
});

fipassport.authenticate(.....)

Please refer to the included example to get a better idea….

Install

npm install flatiron-passport

Example: From the example folder…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

var fs =            require('fs')
var flatiron =      require('flatiron');
var LocalStrategy = require('passport-local').Strategy
var fipassport =    require('flatiron-passport');
var app =           flatiron.app;

// You would not usually have these lines...
// This is just to store the username in memory.
var global_user = '';
var global_pass = '';

// Use the passport strategy.
fipassport.use(new LocalStrategy(function(username, password, done) {

  // You would not normally have these lines...
  // This is just to store it in memory for use later.
  global_user = username;
  global_pass = password;

  // Use this as you normally would in Passport.js.
  // But for now just
  // hard-code the user object.
  done(null, {
    id: 1234,
    username: username,
    password: password
  });
}));

// Serialize based on the user ID.
fipassport.serializeUser(function(user, done) {

  // @todo: Save your user to the database using the ID as a key.
  done(null, user.id);
});

// Load the user and return it to passport.
fipassport.deserializeUser(function(id, done) {

  // @todo:  Load your user here based off of the ID, and call done with
  // that user object.
  done(null, {
    id:id,
    username:global_user,
    password:global_pass
  });
});

// Use http and flatiron-passport.
app.use(flatiron.plugins.http);
app.use(fipassport);

// Get the front page.
app.router.get('/', function() {
  if (this.req.isAuthenticated()) {
    this.res.end('Hello ' + this.req.user.username);
  }
  else {
    fs.readFile('index.html', (function(self) {
      return function(err, data) {
        if(err) {
          self.res.writeHead(404);
          self.res.end();
          return;
        }
        self.res.writeHead(200, {'Content-Type': 'text/html'});
        self.res.end(data);
      };
    })(this));
  }
});

/**
 * Here the API to fipassport.authenticate is the exact same as it would
 * be fore passport.authenticate.  It is just a simple wrapper around that
 * function.
 */
app.router.post('/login', fipassport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/login'
}));

// Start our server at port 3000.
app.start(3000, function(){
  console.log('HTTP Server started on port 3000');
});

Happy Authenticating…