What I’m Reading – October 2016

The Winter Fortress: The Epic Mission to Sabotage Hitler’s Atomic Bomb by Neal Bascomb. So when I was a kid, Where Eagles Dare by Alistair MacLean was one of my favorite books (still is).  This is kind of like the real life version.  A commando team went into Norway during the War and took out the Nazi facilities that were racing to make their own Atomic bomb.  It doesn’t get more high-stakes than that and the fact that it’s all a true story makes it even more interesting.
25897720
Head First Mobile Web by Lyza Danger Gardner, Jason Grigsby.  I am continuing to work on my programming skills.  Mobile is an area I haven’t explored much so this is more of a way to let me see what’s involved.  It seems just figuring out what device the user has is tough, much less tailoring the experience for their specific needs!  Still, more people in the world have cell phones than working toilets, so mobile is the wave of the future.
19759436
The Rift: A New Africa Breaks Free by Alex Perry.  Speaking of those billions of cell phone users, Africa is one area where the usage of cell phones has exploeded due to the lack of infrastructure.  Most of what we see on the news is famine, war, and pestilence and yet, there is another Africa, wired and high-tech, out there.  This book tries to show both sides, using the Great Rift Valley as a metaphor of the two Africas.
30041310

Free Code Camp and Learning Express.js: What’s in Query

Next to last lesson! Note that we’re using routes here; these are very useful, and also we’ll be using them in the future quite a bit. Let’s get the Directions and Hints:

WHAT’S IN QUERY
Exercise 7 of 8

Write a route that extracts data from query string in the GET ‘/search’ URL route, e.g. ?results=recent&include_tabs=true and then outputs it back to the user in JSON format.

——————————————————————————-

## HINTS

In Express.js to extract query string parameters, we can use:

req.query.NAME

To output JSON we can use:

res.send(object)

So, we start by declaring our variables, as always:


var express = require('express');
var port = process.argv[2];
var app = express();

Next, we add the route, which is specified as “/search”. Also, we are using a get operation, per the directions. And of course, we need to listen on a port. Thus:


app.get('/search', function(req, res) {

});

app.listen(port);

In the last lesson, we used req.param.variableName to extract parameters. Here, the query string is where we want to get our parameters from. Now, I totally did it the hard way and parsed everything in my query string, then added it together and formatted it to get the answer. Oops. Anyway, to get the pieces of the query, I did this:


var results = req.query.results;
var type = req.query.type;
var page = req.query.page;

Then, using the send command in the hint, I outputted it like so:


res.send("{\"results\":\"" + results+ "\",\"type\":\"" + type +"\",\"page\":\"" + page +"\"}");

It works, and here is my final program.


var express = require('express');
var port = process.argv[2];
var app = express();

app.get('/search', function(req, res) {
var results = req.query.results;
var type = req.query.type;
var page = req.query.page;

res.send("{\"results\":\"" + results+ "\",\"type\":\"" + type +"\",\"page\":\"" + page +"\"}");
});

app.listen(port);

However, it turns out, as noted, that I did it the hard way. In the official solution, they merely retrieved the query string using


var query = req.query

And outputted it using


res.send(query)

Which is much more concise and simpler.

OFFICIAL SOLUTION:


var express = require('express')
var app = express()

app.get('/search', function(req, res){
var query = req.query
res.send(query)
})

app.listen(process.argv[2])

See you next time, for the final lesson!

Free Code Camp and Learning Express.js: Param Pam Pam

Moving right along!  We’re 3/4 of the way there now!

Let’s look at the Directions and Hints:

 PARAM PAM PAM
 Exercise 6 of 8
Create an Express.js server that processes PUT ‘/message/:id’ requests.
For instance:
    PUT /message/526aa677a8ceb64569c9d4fb
As a response to these requests, return the SHA1 hash of the current date
plus the sent ID:
    require(‘crypto’)
      .createHash(‘sha1’)
      .update(new Date().toDateString() + id)
      .digest(‘hex’)
——————————————————————————-
## HINTS
To handle PUT requests use:
    app.put(‘/path/:NAME’, function(req, res){…});
To extract parameters from within the request handlers, use:

    req.params.NAME

This one was pretty frustrating.  At one point, I had the correct answer and it didn’t work.  I ended up deleting everything and typing it all in again, and then it worked.  I figure there must have been a hidden character or something that was keeping it from working.  Who knows?  Anyway, here’s the explanation:

First, we declare the variables.  We require express, get the port from process.argv, and then set app to express() just like we have in the previous lessons in this tutorial:

var express = require('express');
var port = process.argv[2];
var app = express();

Next, we get the app.put function and set the port to listen:

var express = require('express');
var port = process.argv[2];
var app = express();


app.put('/message/:id', function(req, res){

});

app.listen(port);

 

Now, we turn to the rest of the hints, which aren’t that clear, like all the rest of the hints inall the node.js tutorials.

 

Okay, if we look at the require(‘crypto’) statement up there, you’ll see that the line that begins update() has a “+ id” in it.  We’re also supposed to return, along with the date, the SHA1 hash of the plus the sent ID.  Finally, we are told that our server will “process PUT ‘/message/:id’ requests.”.  The request comes in the form “PUT /message/526aa677a8ceb64569c9d4fb”.  Putting the clues together tells is that “id” is equal to the long string of letters and numbers “526aa677a8ceb64569c9d4fb”.

We need to pull that string of letters and numbers out and we do that with the other hint they gave us, req.params.NAME, except that obviously NAME is id.  So, we’ll call the result of that id and we have:

      var id = req.params.id;

So, now we’ll finally use the crypto statement and set it equal to a variable:

      var str = require('crypto')
            .createHash('sha1')
            .update(new Date().toDateString() + id)
            .digest('hex');

 

We defined id, of course, so now we’re good.

We still need to return this new string we created, so we’ll do that with res.send().  And then, we pass!

Here’s the final program:

var express = require('express');
var port = process.argv[2];
var app = express();


app.put('/message/:id', function(req, res){
      var id = req.params.id;
      var str = require('crypto')
            .createHash('sha1')
            .update(new Date().toDateString() + id)
            .digest('hex');
      res.send(str);
});

app.listen(port);

 

See you next time!

Free Code Camp and Learning Express.js: Stylish CSS

So we’re coming up on the end of the FreeCodeCamp ExpressJS tutorial.  This one is simple, almost too easy!

 

Here’s the directions and hints:

STYLISH CSS
 Exercise 5 of 8
Style your HTML from previous example with some Stylus middleware.
Your solution must listen on the port number supplied by process.argv[2].
The path containing the HTML and Stylus files is provided in process.argv[3] (they are in the same directory). You can create your own folder and use these:
The main.styl file:
    p
      color red
The index.html file:
    <html>
      <head>
        <title>expressworks</title>
        <link rel=”stylesheet” type=”text/css” href=”/main.css”/>
      </head>
      <body>
        <p>I am red!</p>
      </body>
    </html>
——————————————————————————-
## HINTS
To plug-in stylus someone can use this middleware:
app.use(require(‘stylus’).middleware(__dirname + ‘/public’));
Remember that you need also to serve static files.
## NOTE
For your own projects, Stylus requires to be installed like any other dependency:

    npm install stylus

Okay, let’s start by installing the stylus package.

$ npm install stylus
npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
stylus@0.54.5 node_modules/stylus
├── css-parse@1.7.0
├── debug@2.2.0 (ms@0.7.1)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── sax@0.5.8
├── source-map@0.1.43 (amdefine@1.0.0)

└── glob@7.0.3 (path-is-absolute@1.0.0, inherits@2.0.1, inflight@1.0.5, once@1.3.3, minimatch@3.0.0)

We want to use this package to ‘style’ the HTML file we are serving.  Stylus is middleware, which I talked about here.  Let’s set up the outline of an express app:

var express = require('express');

var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.listen(port);

Remember that they gave us the port and the filePath in the hints.

We are going to need to access the HTML file, and the stylus file.  This is a static HTML file, and we’ll serve it using a command we’ve seen before:

app.use(express.static(filePath||path.join(__dirname, 'public')));


Note that since we're using path.join here, we'll need to add a require statement for it:
<div>
var path = require('path');

Next, we want to take the line they gave us in the hints to get the stylus file:

app.use(require('stylus').middleware(__dirname + '/public'));

And that's really it!  Here's our final program:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();
app.use(express.static(filePath||path.join(__dirname, 'public')));
app.use(require('stylus').middleware(__dirname + '/public'));
app.listen(port);

See you next time!

Free Code Camp and Learning Express.js: Good Old Form

Exercise number four of the FreeCodeCamp Express.js tutorial.  We’re flying right along!  Here’s the directions and hints they give us:

 GOOD OLD FORM
 Exercise 4 of 8
Write a route (‘/form’) that processes HTML form input (<form><input name=”str”/></form>) and prints backwards the str value.
——————————————————————————-
## HINTS
To handle POST request use the post() method which is used the same way as get():
    app.post(‘/path’, function(req, res){…})
Express.js uses middleware to provide extra functionality to your web server.
Simply put, a middleware is a function invoked by Express.js before your own request handler.
Middlewares provide a large variety of functionalities such as logging, serving static files and error handling.
A middleware is added by calling use() on the application and passing the middleware as a parameter.
To parse x-www-form-urlencoded request bodies Express.js can use urlencoded() middleware from the body-parser module.
    var bodyparser = require(‘body-parser’)
    app.use(bodyparser.urlencoded({extended: false}))
Read more about Connect middleware here:
The documentation of the body-parser module can be found here:
Here is how we can flip the characters:
    req.body.str.split(”).reverse().join(”)
——————————————————————————-
## NOTE
When creating your projects from scratch, install the body-parser dependency with npm by running:
    $ npm install body-parser
…in your terminal.

Again, the port to use is passed expressworks to the application as process.argv[2].

Okay, first we need to install the package as mentioned in the note.  Typing npm install body-parser at the $ prompt gives us:

npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
body-parser@1.15.1 node_modules/body-parser
├── content-type@1.0.2
├── bytes@2.3.0
├── depd@1.1.0
├── qs@6.1.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── raw-body@2.1.6 (unpipe@1.0.0)
├── http-errors@1.4.0 (inherits@2.0.1, statuses@1.3.0)
├── debug@2.2.0 (ms@0.7.1)
├── iconv-lite@0.4.13

└── type-is@1.6.13 (media-typer@0.3.0, mime-types@2.1.11)

This one is actually easier than it looks, because they give you everything, and I mean everything, you need to do it.

First we declare variables, noting that as usual they are supplying us the port in process.argv[2]:

var express = require("express");
var app = express();
var port = process.argv[2];
Next add the lines relevant to body-parser:
var bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}));

Add the line for the post request:

app.post('/path', function(req, res){...})

And inside the brackets goes the code for reversing the string:

     req.body.str.split('').reverse().join('');

Oh yeah….there IS one sneaky little it.  See up there in the directions where it says “Write a route (‘/form’)”?  And see how in the app.post() line it says ‘/path’?  Yeah, that gets changed.  Presto, we’ve done it!

And here’s the final program:

var express = require("express");
var app = express();
var port = process.argv[2];

var bodyparser = require('body-parser')
app.use(bodyparser.urlencoded({extended: false}))

app.post('/form', function(req, res) {
    console.log(res.send(req.body.str.split('').reverse().join('')));
});

app.listen(port);

See you next time!

Free Code Camp and Learning Express.js: Jade

Here’s the third lesson in the Express.js tutorial.  As always, there are a couple sneaky things, but overall, this isn’t that difficult.

 

NOTE:  I found this blog post to be quite helpful for this lesson:

http://webapplog.com/jade-handlebars-express/

Let’s start with the Directions and Hints:

JADE
 Exercise 3 of 8
Create an Express.js app with a home page rendered by Jade template engine.
The homepage should respond to /home.
The view should show the current date using toDateString.
——————————————————————————-
## HINTS
The Jade template file index.jade is already provided:
    h1 Hello World
    p Today is #{date}.
This is how to specify path in a typical Express.js app when the folder is ‘templates’:
    app.set(‘views’, path.join(__dirname, ‘templates’))
However, to use our index.jade, the path to index.jade will be provided as process.argv[3].  You are welcome to use your own jade file!
To tell Express.js app what template engine to use, apply this line to the Express.js configuration:
    app.set(‘view engine’, ‘jade’)
Instead of Hello World’s res.end(), the res.render() function accepts a template name and presenter data:
    res.render(‘index’, {date: new Date().toDateString()})
We use toDateString() to simply return the date in a human-readable format without the time.
——————————————————————————-
## NOTE
When creating your projects from scratch, install the jade dependency with npm.

Again, the port to use is passed by expressworks to the application as process.argv[2].

The second to last line tells us that Jade is a package and that we need to install it via the npm (Node Package Manager).  Here’s how we do that, and the ugly results we get back…

$ npm install jade
npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
jade@1.11.0 node_modules/jade
├── commander@2.6.0
├── character-parser@1.2.1
├── void-elements@2.0.1
├── jstransformer@0.0.2 (is-promise@2.1.0, promise@6.1.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── constantinople@3.0.2 (acorn@2.7.0)
├── with@4.0.3 (acorn@1.2.2, acorn-globals@1.0.9)
├── clean-css@3.4.13 (commander@2.8.1, source-map@0.4.4)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)

└── uglify-js@2.6.2 (uglify-to-browserify@1.0.2, source-map@0.5.6, yargs@3.10.0)

We’ll start with the variables.  Note that they tell us that, as before, the port and filePath will be supplied in process.argv.

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

 

We also know that we are going to listen on a port, and they give us two app.set() statements as well, giving us:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'jade');

app.listen(port);

Finally, we’re serving a page, so we need an app.get() function, inside of which will be the page we are “rendering”.  They give us this render statement, too, and so we have:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'jade');

app.get('/', function(req, res) {
  res.render('index', {date: new Date().toDateString()})
})

app.listen(port);

 

And………..it doesn’t work.  It keeps saying “cannot get /home”.  Yeah, I hate when I can’t get home too.  Okay, so I thought this would be an easy fix.  Remembering the first lesson, I changed the ‘/’ in the app.get statement to ‘/home’ and ran it again.

Still didn’t work.

I was a little frustrated now.  What had I missed?  I read and reread the instructions.  Then I caught it – I hadn’t used the filePath variable anywhere, so the program didn’t know where to look for the Jade file.  But the question was, where do I use it?

 

Well, see that app.set() with the path.join statement?  That looked awfully familiar from the Static exercise, where we used:

app.use(express.static(process.argv[3]||path.join(__dirname, 'public')));

 

So, I added “process.argv[3]||” to my app.use() statement and, lo and behold, the program passed!  Here’s the final program, for reference:

var express = require('express');
var path = require('path');
var port = process.argv[2];
var filePath = process.argv[3];

var app = express();

app.set('views', process.argv[3]||path.join(__dirname, 'templates'));
app.set('view engine', 'jade');

app.get('/home', function(req, res) {
  res.render('index', {date: new Date().toDateString()})
})

app.listen(port);

See you next time!