ReverentGeek

Create PDFs with Node.js and Puppeteer

David Neal — Thu, 06 Feb 2020 18:33:51 GMT

I love to play music, especially in a band. There's something amazing about the synergy of multiple people harmonizing voices and instruments. However, for a band to be successful, everyone needs to be on the same page or it just sounds like a mess.

Come to think of it, I could make a lot of comparisons between a group of people that play well together in a band and a productive, highly-performing software team. But, I digress. Maybe another time!

One way a band to be on the same page is to follow sheet music or chord charts.

I recently updated a personal project named Charter that uses Node.js to convert ChordPro formatted text files into PDF chord charts. It was a lot of fun!

Now, you may be thinking,

"I'm not a musician or singer. Why do I care?"

Regardless of your personal need for chord charts, you might find the source code for this project useful. Here are a few things you might learn:

Create a CLI app using Node.js and Yargs
Load a text file and parse text
Use Jest to test Node.js code
Use handlebars to turn text into HTML
Use Puppeteer to convert HTML into a PDF

Regarding PDF rendering, I tried lots of solutions including wkhtmltopdf, electron-pdf, phantomjs, automating Chrome with command-line switches, and finally landed on using the latest version of Puppeteer. Puppeteer supports a ton of options for generating PDFs. There's a lot of untapped potential here for doing lots of cool things!

Save Any Web Page to PDF using Node.js

Assuming you already have Node.js installed, open your terminal or command line, create a new project folder, and initialize it.

mkdir pdf-test
cd pdf-test
npm init -y

Next, install Puppeteer as a dependency.

npm install puppeteer

Here is an example of how to use Puppeteer to turn the Google home page into a PDF. Create a new file named index.js and paste the following code.

"use strict";

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://google.com");
  await page.pdf({ path: "./google.pdf", format: "Letter" });
  await browser.close();
})();

Run the application using the following command.

node .

You can change URL to something else. However, keep in mind that some pages load dynamically with JavaScript, so without setting more options, the resulting PDF could appear incomplete.

Convert a Local HTML File to PDF

Puppeteer is not limited to loading web pages. You can also load local HTML files. This is how the Charter application creates a chord chart. The Charter app first parses a ChordPro text file, generates an HTML file, and then uses Puppeteer to render the HTML and save as a PDF.

Create a new file named sample.html and paste the following HTML.




  


  Hello World!
  Yay! My own PDF generator!

Create a new file named local.js and paste the following code.

"use strict";

const path = require("path");
const puppeteer = require("puppeteer");

(async () => {
  const htmlFile = path.resolve("./sample.html");
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("file://" + htmlFile);
  await page.pdf({ path: "./sample.pdf", format: "Letter" });
  await browser.close();
})();

Next, run the code from the command line.

node local.js

You should now have your very own "Hello World!" PDF in your project folder!

Create a Chord Chart with Charter

If you have Node.js 12.x or higher installed and want to take the CLI app for a spin, you can use npx to run the application directly. Of course, you will need a ChordPro text file to test. Here's an example, or you can find others on the Internet.

{title: Amazing Grace}
{artist: Words by: John Newton, John P. Rees}
{artist: Music by: William W. Walker, Edwin Othello Excell}
{key: G}  
{tempo: 90}
{time: 3/4 }

{comment: Verse 1}
A - [G]mazing [G/D]grace  [D7]how  [Em]sweet [C]the   [G]sound
That [G]saved a [G/D]wretch  [D/C]like    [G/B]me
I [G]once was [G/B]lost but [C]now am  [G]found
[G/B]Was   [Em]blind but [G/D]now    [D7]I    [G]see

npx will take a little while to download the first time, due to Puppeteer using Chromium.

npx chord-charter -f amazing-grace.chordpro

I hope you find the project useful! Get out there and be awesome!

My Most Embarrassing Mistakes as a Programmer

David Neal — Wed, 30 Oct 2019 20:12:25 GMT

My most embarrassing mistakes as a programmer, in no particular order:

I didn't ask for help
I was afraid of what others would think
I didn't follow through on a promise
I didn't step up and take responsibility
I avoided conflict
I didn't encourage others
I didn't publicly celebrate the success of others

My biggest mistakes had nothing to do with programming.

The most difficult parts of any job, and the most valuable activities of any job, have nothing at all to do with technology.

It's people. How we value ourselves. How we value others.

"Soft skills" is an awful term. The things we call "soft skills," such as listening, communication, team dynamics, empathy, ought to be given so much more priority in our workplaces. These are core skills that apply to anyone in any profession.

Here's the mindset I want.

To be the most effective member of any team, I must first strive to model integrity and work ethic. I need to be respectful, helpful, patient, gracious, trustworthy, and hardworking. I need to be transparent, such as asking for help, owning mistakes, and asking forgiveness, regardless of my fear of the outcome, because it's the right thing to do. When I see a failure in our system, not just in the work we create but also our system of work and treatment of people, I need to take responsibility, speak up, and see it through correction. I need to give people the benefit of the doubt, try to understand their perspective and circumstance, be slow to anger, and be quick to forgive. I need to encourage and lift others up and help them to see their career and life through a bigger lens.

I am a work in progress. I may not achieve these things every day, but that's my goal.

I hope this post gets you thinking of ways you can have a positive impact on the people you work with.

Remember, every day is a fresh start to be more awesome!

A Note of Encouragement

David Neal — Wed, 23 Oct 2019 18:51:03 GMT

Earlier this year, I set up a new computer for my son. In the process, I created an "Easter Egg" for him to find. I left a note on the desktop with some instructions on how to run a command-line interface (CLI) application I created.

> heybuddy

As I hoped, I'll sometimes walk by and see he has a terminal window open and has run the app several times 😊

The source code for this application is on GitHub. It's written in JavaScript and uses Node.js. There are instructions in the readme on how to customize the messages, change the name of the CLI app itself, and install it on someone's computer.

You can certainly take the idea and create your own customized encouragement CLI app, or take it further to create a web, desktop, or mobile application. Or, how about an encouragement robot!

Use the power of technology to make a positive impact on the people you care about! Let me know if there's anything I can do to help 🙂 Thanks for reading, and hope you have an awesome day!

I recently set my son up with a new computer. In the process, I created an "Easter Egg" for him to find. I left a note with some instructions on the desktop on how to run a CLI app I created. Whenever he types "heybuddy" he gets a random note of encouragement 🙂 pic.twitter.com/zjOVyfkWdK
— David Neal 🥓🥑 (@reverentgeek) July 12, 2019

Original Tweet

Sketchnote Challenge

David Neal — Sat, 31 Aug 2019 13:12:45 GMT

Sketchnotes are amazing. Check out just a few of the many benefits.

Helps you stay more engaged.
Connects both sides of your brain for supercharged learning.
Helps you to communicate more clearly.

When you look at your notes weeks, months, or years later, you'll be shocked how much detail you can remember!

Want to learn to draw sketchnotes? You can! Using simple shapes such as lines, arrows, circles, triangles, and rectangles, you can doodle all sorts of things!

There are some great books out there

I posted a "sketch note challenge" on Twitter, and lots of folks followed along. You can follow along with these images I posted, and use them to practice. You'll be doodling all over your notes before you know it!

Hey! Want to learn with me how to take better notes using visual elements such as icons, shapes, arrows, and such? Take the #sketchnotechallenge with me! pic.twitter.com/TVkUHWD2GQ
— David Neal 🥓🥑 (@reverentgeek) August 6, 2019

Day 1: Ideas!

Day 2: Problem and Warning Icons

Day 3: Boxes and Frames

Day 4: Questions

Day 5: Numbers

Day 6: Lists and Bullet Points

Day 7: Thought and Speech Bubbles

Day 8: Arrows

Day 9: Lettering

Day 10: Icons

Day 11: Stick Figures

Day 12: Faces

Day 13: Draw a Process

Day 14: Put it all together and sketch something!

Here's a link to a recording of Eva-Lotta's "5 Steps to Change Your Note Taking" talk.

Have fun sketching and learning!

Create Engaging Screen Shots with Snagit

David Neal — Fri, 12 Jul 2019 14:08:16 GMT

Throughout my career, writing documentation and tutorials has been a critical skill. In my experience, good visuals can vastly improve the quality of communication. Explaining a lengthy process with multiple steps, how to use a complex interface, and where to look for features are just a few examples where visuals may benefit the reader. "A picture is worth a thousand words" is certainly true for documentation, too!

Snagit has been my primary tool for taking screen shots for years. Out of the box, there are a number of useful elements I frequently use to annotate images, such as arrows, callouts, shapes, and text.

Use Snagit to add pizazz to your screen shots!

Here are a few examples of tutorials I've written that include screen shots annotated with Snagit.

Create Branded Screen Shots

One of my favorite features of Snagit is the ability to not only customize these elements, but also create a collection of elements as a "theme." Creating a theme helps to ensure all screen shots will have a consistent look, and my preferred elements are always there when I need them. I can also separate my "work" theme tailored for my company's style and colors from my personal theme!

Create a New Theme in Snagit

To create a new theme in Snagit:

Click on one of the theme-able tools at the top of the Snagit window, such as Arrow, Text, Callout, or Shape
On the right, under Quick Styles, click the gear icon
Click on New Theme...
Give your theme a name
Customize the color and optionally add more colors
Click Create

Steps to create a new Snagit theme

Add Custom Elements to a Theme

When you create a new theme, Snagit automatically creates all the default Quick Styles with your theme's color(s). That's a great start, but perhaps you want to remove some of those and add your own.

For example, as you may have noticed, I have custom callout (speech bubble) that is orange with white text and uses a comic-style font named Bangers. To add this element to your theme, follow these steps:

Click on Callout in the toolbar (your toolbar may look slightly different, and Callout may be under More).
Under Quick Styles, click on the desired Callout to modify.
Under Tool Properties, select a new font, change the color to white, and adjust the font size to 36pt.
To save the modified element to your theme (currently grayed out surrounded by a dashed line), click the Plus (+).

Steps to customize a Snagit element

Note: To remove any element from your theme's Quick Styles, click the (X) in the top-left corner of the element.

When you click the gear icon next to your theme, you'll see there are options to import and export themes. This is a great way to make sure everyone you work with has your awesome custom Snagit theme and will create consistent-looking screen shots!

Get Out There and Be Awesome!

Contributing to documentation and tutorials is an extremely valuable way to give back to the open source community, to support the people you work with, and to help "future you" be more awesome!

Get out there and be awesome!

How to be a Superhuman Communicator

David Neal — Fri, 12 Apr 2019 13:51:40 GMT

People learn in a variety of ways, such as watching videos, listening to podcasts, reading books and articles, and exploring hands-on. For everyone fortunate to have good vision, visuals such as pictures, illustrations, or diagrams, are a universal and powerful way to learn and understand information.

Your brain is a supercharged visual processing machine. At one glance, your brain can interpret incredible amounts of information. The old saying, "a picture is worth a thousand words," is a vast understatement.

My Story

In 2011, I finally got up the courage to give my first talk at a user group meeting. Since then, I've been on a journey of encouraging and motivating folks in technology to be more awesome, through speaking at events, writing, and creating videos.

By 2015, I had accomplished a lot. I had written numerous articles and spoken at dozens of conferences, including an International conference. With practice, I had improved all of my skills. But, I felt like something was missing. It didn't seem like I was having much impact on my readers and audiences.

In my desperate search for a cure, I came across a video of Dan Roam describing how simplified hand-drawn illustrations can make a significant impact on presentations. I was hooked.

I had a brand new talk to give at Orlando Code Camp 2015, and I made it my goal to draw a few of the slides. Once I got started, a few slides quickly escalated. I couldn't stop.

When I gave that talk, I instantly knew it was a game changer. Those drawings made me a more comfortable speaker. I was able to tell my story exactly the way I wanted. The audience was far more engaged. The feedback was amazing, and was exponentially better than any of the talks I had given in the past.

Illustrations have been an integral part of everything I've done since. Not just for presentations, but for articles, videos, and any other type of communication. Drawing "sketch notes" has also become a great way to take notes and is a powerful way to learn and retain new information!

How to Start Your Journey

I firmly believe you can take advantage of the power of drawing, too! There's no such thing as "bad" art. Whatever you create, even if it's very poorly drawn stick figures, people will love it! I promise.

Drawing is something you can do right now! Grab some paper and a pencil, pen, or marker, and start doodling ideas!

Drawing well is a skill you can learn. It will take practice and learning techniques to get better.

Some techniques you can learn or your own through experimentation. Study illustrations you like and figure out how you might reproduce the same look in your own drawings.

Watch others draw on YouTube. Some of it will look like magic. That "magic" is a combination of lots of practice and a collection of techniques. You can learn magic, too!

You can buy excellent courses on Udemy for as little as $10 when there's a sale. That's less than two drinks from Starbucks!

To get your drawings on to a computer, I recommend using a scanner app such as Google PhotoScan (iOS/Android) or Scanner Pro (iOS).

Digital Drawing and Software

These days, I rarely draw on paper. I use an iPad and Apple Pencil. My favorite app for drawing illustrations for presentations and articles is Sketches Pro by Tayasui. I also use Adobe Draw or Affinity Designer for specific types of illustration or design work. In my opinion, the apps available for the iPad are the highest quality and easiest to use.

Tayasui Sketches (iOS, Mac, and Android)
Adobe Draw (iOS and Android)
Sketchable (Windows) - I've used this a few times, and it appears to be the best drawing app currently available for Windows
Affinity Designer (Mac, Windows, iOS)

Books

"Visual Thinking" by Williemien Brand
"Show and Tell" by Dan Roam
"The Sketchnote Handbook: the illustrated guide to visual note taking" by Mike Rohde

People to Follow

Brad Colbow: Website | Twitter | YouTube | Udemy Courses
Dan Roam: Website | Twitter

Slides

These are the slides from my talk on this subject, "Drawing: How to be a Superhuman Communicator."

You Don't Need Permission to be Awesome

You may not realize it yet, but you are awesome. I believe you can make a significant, positive impact in your workplace, community, and the world, through the power of technology. Share your knowledge and experience with others! Use your own hand-drawn illustrations to make it fun and memorable!

Respect: The Most Fundamental Principle

David Neal — Wed, 13 Mar 2019 15:44:57 GMT

Much has been said about "lean" and "agile" approaches to work. Reflecting over more than ten years of personal experience, I have come to this conclusion: Respect for people is the most fundamental principle. When respect is the lens and filter through which decisions are made, there is a much higher chance for success.

Having respect for people:

requires listening, empathy, and deeper understanding
prioritizes health, family, and well-being
promotes connections and relationships
fosters community, commitment, and loyalty
empowers employees to make positive changes

When respect is modeled top-down, leadership is motivated to maximize focus and alignment, minimize wasteful activities, and reduce friction. Leadership is obligated to make better decisions for the sustainability of the company, because its people deserve stability, work-life balance, and personal/professional development.

Employees are motivated to do their best work. Mutual respect helps individuals come together as a team, investing in one another, and fighting for each other's success.

When conflicts arise, respect allows people to focus on solving the issue rather than attacking individuals.

People are people. They are not your best "assets." They are not fungible resources.

The "Golden Rule" is still the golden rule.

Build a Secure Node.js Application with JavaScript Async Await Using Hapi

David Neal — Fri, 18 Jan 2019 21:02:55 GMT

At the core of the JavaScript language is its asynchronous programming model. Unfortunately, dealing with callback functions has long been a source of frustration for many developers. JavaScript Promises helped make writing complex asynchronous code more manageable, but brought its own set of challenges. With the introduction of async functions in ES2017 (and the async and await keywords), writing asynchronous JavaScript is now much easier.

Hapi is one of many frameworks available for Node.js designed for building scalable web application and services. With the release of version 17, hapi has been completely overhauled to use JavaScript async functions. The result is a modern framework for Node.js that is a pleasure to use.

Most Node.js tutorials available today were written for older versions of Node.js using older ES5 syntax. In this tutorial, you will learn the basics of creating a Node.js web application with hapi using more modern JavaScript.

Create Your First hapi Web Server

Open up a terminal (Mac/Linux) or a command prompt (Windows) and type the following command:

node --version

If you get an error, or the version of Node.js you have is less than version 8, you'll need to install Node.js. On Mac or Linux, I recommend you first install nvm and use nvm to install Node.js. On Windows, I recommend you use Chocolatey.

After ensuring you have a recent version of Node.js installed, create a folder for your project.

mkdir learning-hapi
cd learning-hapi

A package.json file is required for your Node.js project and includes things like project information, scripts, and project dependencies. Use the npm command to create a package.json file in the project folder.

npm init -y

Next, install hapi as a dependency.

npm install hapi

Now open the project in your editor of choice.

If you don't already have a favorite code editor, I recommend installing Visual Studio Code. VS Code has exceptional support for JavaScript and Node.js, such as smart code completion and debugging. There's also a vast library of free extensions contributed by the community.

Next, create a folder named src. In this folder, add a new file named index.js. Open the file and add the following JavaScript.

"use strict";

const Hapi = require( "hapi" );

const port = 8080;
const server = Hapi.server( { port } );

// Define a route for the URL http://localhost:8080/
server.route( {
    method: "GET",
    path: "/",
    handler: () => {
        // a handler can return text, HTML, JSON,
        // a file, or just about anything
        return "My first hapi server!";
    }
} );

const start = async () => {
    try {
        // start the server
        await server.start();
        console.log( `Server running at http://localhost:${ port }` );
    } catch ( err ) {
        console.log( err );
        process.exit( 1 );
    }
};

start();

As you can see in the previous code, the line const start = async () => { declares an asynchronous function named start using the arrow function syntax. server.start() is itself an asynchronous function, which requires the await keyword. The await keyword instructs the application to pause execution until the async function completes before moving on to the next line of code.

Dealing with errors in asynchronous code before async/await was tricky at best. Another advantage of using async/await is the ability to use straight-forward try/catch blocks to catch any errors that may occur.

Next, edit the package.json file and change the "main" property value to "src/index.js". This property points Node to a file to execute when the application starts.

  "main": "src/index.js",

Now you can start the application. Go back to the terminal window and type in the following command.

node .

You should see the message Server running at http://localhost:8080. Open your browser and navigate to http://localhost:8080. Your browser should display something like the following.

Success! You are on your way to hapi-ness!

Hapi Project Structure

As a Node.js project grows beyond a simple "hello world" example, it's essential to set up a good project structure. There are countless opinions on how you might organize a project, but a good starting point for a web application might look something like the following.

├── package.json
├── client
│   ├── index.html
│   ├── css
│   └── js
├── src
│   ├── app.js
│   ├── index.js
│   ├── plugins
│   │   └── index.js
│   ├── routes
│   │   └── index.js
│   └── views
└── test
    └── index.js

Hapi can serve static files, such as HTML, CSS, and front-end JavaScript, using the inert plugin (more on plugins later). The client folder is where you might store these static assets. Of course, the contents and structure inside the client folder may differ depending on your front-end framework of choice.

Under the src folder, you might organize your server-side code into the following files and folders:

app.js to configure the hapi server,
index.js to start the server,
plugins for registering external and custom hapi plugins,
routes for defining the resources, or URIs, of your application,
and views for any back-end dynamically-rendered content.

Hapi can render server-side content using the vision plugin combined with a template engine such as ejs, handlebars, or pug. It is up to you whether you want your application to serve static content using inert, server-rendered content using vision, or a mixture of both.

Note: If you are building an application that only acts as a service or only exposes an API, you may not have a need for the inert and vision plugins, or a need to have folders for client and views.

Refactor the Hapi Project

Before continuing further, refactor your project with the following steps.

Create a folder under src named plugins. Create a new file under src/plugins named index.js. Add the following code to this file.

"use strict";

module.exports.register = async server => {
    // more to come later
};

Create a new folder under src named routes. Create a new file under src/routes named index.js. Add the following code to this file.

"use strict";

module.exports.register = async server => {
    server.route( {
        method: "GET",
        path: "/",
        handler: () => {
            // a handler can return text, HTML, JSON,
            // a file, or just about anything
            return "My first hapi server!";
        }
    } );
};

Create a new file under src named app.js. Add the following code to this file.

"use strict";

const Hapi = require( "hapi" );
const plugins = require( "./plugins" );
const routes = require( "./routes" );

module.exports.createServer = async config => {
    const server = Hapi.server( config );
    // register plugins
    await plugins.register( server );

    // register routes
    await routes.register( server );

    return server;
};

Last, modify src/index.js to match the following code.

"use strict";

const app = require( "./app" );

const port = 8080;
const config = { port };

const start = async () => {
    try {
        // create the server
        const server = await app.createServer( config );

        // start the server
        await server.start();

        console.log( `Server running at  http://localhost:${ port }` );
    } catch ( err ) {
        console.log( err );
        process.exit( 1 );
    }
}

start();

Extend Hapi with Plugins and Libraries

By design, the core hapi service focuses on basic server functionality. Plugins add additional features and capabilities to hapi. Your application may use a mix of official plugins, third-party plugins, and custom plugins you write. Here are just a sample of the more commonly used plugins.

Plugin	Description
inert	Use to serve static files and directories.
vision	Render templates.
blipp	Displays all the defined routes on startup.
hapi-pino	Fast application logger that logs information in JSON format.
bell	Third-party authentication.

Here are a few useful libraries commonly found in hapi projects.

Library	Description
joi	JSON object schema validation.
boom	Use to generate and return HTTP error messages.
bounce	Selectively catch and rethrow errors.
wreck	Collection of HTTP client utilities.
lab	Testing framework with code coverage analysis.
code	Test assertion library to use with `lab`.

Install and Register hapi Plugins

In this next step, install two hapi plugins and configure them. From the command line, install blipp and hapi-pino.

npm install blipp hapi-pino

Next, modify src/plugins/index.js and replace the contents of this file with the following code.

"use strict";

const blipp = require( "blipp" );
const pino = require( "hapi-pino" );

const isDev = process.env.NODE_ENV !== "production";

module.exports.register = async server => {
    await server.register( [ blipp, {
        plugin: pino,
        options: {
            prettyPrint: isDev,
            logEvents: [ "response", "onPostStart" ]
        }
    } ] );
};

server.register() can take a single plugin or an array of plugins. A plugin can be registered using an instance of the plugin itself, such as the case with registering blipp. A plugin can also be registered using the plugin configuration object syntax, demonstrated by registering hapi-pino with its configuration options.

Create a Custom hapi Plugin

You can create your custom plugins for hapi to do all sorts of things, such as modify server configuration, add routes, or listen for server events. In this step, create a plugin that listens for when a server starts and logs a message.

Create a new file under src/plugins named serverStart.js. In this file, add the following code.

"use strict";

module.exports = {
    name: "serverStart",
    version: "1.0.0",
    register: async ( server, { message } ) => {
        server.events.on( "start", () => {
            const msg = message || `Server running at ${ server.info.uri }`;
            server.log( [ "info", "server" ], msg );
        } );
    }
};

A hapi plugin is a JavaScript object with a name property, a version property, and a register function with two arguments: server and options. Your serverStart plugin has an asynchronous register function that takes a server argument and uses object destructuring to take a message passed in the options. If the code does not specify a message, the plugin generates a default message.

To use this new plugin, modify src/plugins/index.js with the following code.

"use strict";

const Blipp = require( "blipp" );
const HapiPino = require( "hapi-pino" );
const serverStart = require( "./serverStart" );

const isDev = process.env.NODE_ENV !== "production";

module.exports.register = async server => {
    await server.register( [ Blipp, {
        plugin: HapiPino,
        options: {
            prettyPrint: isDev,
            logEvents: [ "response" ]
        }
    }, {
        plugin: serverStart,
        options: {
            message: `My hapi server is running at ${ server.info.uri }`
        }
    } ] );
};

Now run your application using:

node .

Your console output should look similar to the following.

method  path                          description
------  ----------------------------  -----------
GET     /

[1544478627595] INFO  (7408 on mycomputer):
    tags: [
      "info",
      "server"
    ]
    data: "My hapi server is running at http://mycomputer:8080"

Add Server Rendered Templates for a Better UI

So far the application has only returned plain text. A hapi application can respond to requests with text, static files, content dynamically generated from templates, or other types of media, such as JSON. In this step, add support for Embedded JavaScript templates, or EJS.

First, install the required dependencies using npm.

npm install vision ejs

Create a new file in the src/views folder named layout.ejs. Add the following HTML to this file.




    
    
    <%= title %>
    
    
    


    <%- content %>

Create a new file in the src/views folder named index.ejs. Add the following HTML to this file.


    <%= title %>
    <%= message %>

Next, update src/app.js to configure the vision plugin and ejs template engine.

"use strict";

const Hapi = require( "hapi" );
const vision = require( "vision" );
const ejs = require( "ejs" );
const plugins = require( "./plugins" );
const routes = require( "./routes" );

module.exports.createServer = async config => {
    const server = Hapi.server( config );

    // add the vision plugin and 
    // register EJS template view support
    await server.register( vision );
    server.views( {
        engines: { ejs },
        relativeTo: __dirname,
        path: "views",
        layout: true
    } );

    // register plugins
    await plugins.register( server );

    // register routes
    await routes.register( server );

    return server;
};

Now, update src/routes/index.js to return the rendered view instead of text.

"use strict";

module.exports.register = async server => {
    server.route( {
        method: "GET",
        path: "/",
        handler: async ( request, h ) => {
            try {
                const message = "My first hapi server!";
                return h.view( "index", {
                    title: "Home",
                    message
                } );
            } catch ( err ) {
                server.log( [ "error", "home" ], err );
            }
        }
    } );
};

Note: In the previous handler function, the request contains information about the incoming request, and h is the response toolkit that includes properties and utilities for creating responses.

Secure Your hapi Server with Bell and Okta

Unless you are building a static website, chances are your application needs a way to allow visitors to register for an account, log in, reset their password, and so forth. Add to the mix the ever-changing landscape of security concerns, and you can easily see implementing and maintaining a sound security strategy is far from a trivial task.

The good news is Okta's developer platform, built on the latest open security standards, makes this step very easy.

To begin, create a free developer account with Okta at developer.okta.com. Click the Create Free Account button, or click the Sign Up button.

After creating your account, click the Applications link at the top, and then click Add Application.

Next, choose a Web Application and click Next.

Enter a name for your application, such as My Hapi Server. Verify the port number is the same as configured for your local web application. Then, click Done to finish creating the application.

Enable self-service registration

One of the great features of Okta is allowing users of your application to sign up for an account. By default, this feature is disabled, but you can easily enable it. First, click on the Users menu and select Registration.

Click on the Edit button.
Change Self-service registration to Enabled.
Click the Save button at the bottom of the form.

Manage Configuration with DotEnv

Node.js applications typically use environment variables for configuration. However, managing environment variables can be a chore. A popular module for managing application configuration data is dotenv.

Install dotenv as a project dependency.

npm install dotenv

Create a file named .env in the root folder of the project, and add the following configuration.

Note: When using a source control system such as git, do not add the .env file to source control. Each environment requires a custom .env file. It is recommended you document the values expected in the .env file in the project README or a separate .env.sample file.

# Server configuration
NODE_ENV=production
PORT=8080
HOST_URL=http://localhost:8080
COOKIE_ENCRYPT_PWD=superAwesomePasswordStringThatIsAtLeast32CharactersLong!

# Okta configuration
OKTA_ORG_URL=https://{yourOktaDomain}
OKTA_CLIENT_ID={yourClientId}
OKTA_CLIENT_SECRET={yourClientSecret}

Now, update src/index.js to use the dotenv module.

"use strict";

// Load in environment configuration
require( "dotenv" ).config();
const app = require( "./app" );

const DEFAULT_PORT = 8080;
const port = process.env.PORT || DEFAULT_PORT;
const config = { port };

const start = async () => {
    try {
        // create the server
        const server = await app.createServer( config );

        // start the server
        await server.start();
    } catch ( err ) {
        console.log( err );
        process.exit( 1 );
    }
};

start();

Go to your Okta account and click on the Dashboard link. On the right side of the page, you should find your Org URL. Copy and paste this value into your .env file to replace the value for OKTA_ORG_URL.

Click on the Applications link, and then click on the name of your new application. Click on the General tab, and find near the bottom of the page a section titled Client Credentials. Copy the Client ID and Client secret values and paste them into your .env file to replace {yourClientId} and {yourClientSecret}, respectively.

Create A Secure Web Application

First, install the bell and hapi-auth-cookie plugins. Bell is an authentication plugin, and hapi-auth-cookie is for cookie-based session management.

npm install bell hapi-auth-cookie

Under src/plugins create a new file named auth.js and add the following code.

"use strict";

const bell = require( "bell" );
const authCookie = require( "hapi-auth-cookie" );

const isSecure = process.env.NODE_ENV === "production";

module.exports.register = async server => {
    // register plugins
    await server.register( [ authCookie, bell ] );

    // configure cookie authorization strategy
    server.auth.strategy( "session", "cookie", {
        password: process.env.COOKIE_ENCRYPT_PWD,
        redirectTo: "/authorization-code/callback", // If there is no session, redirect here
        isSecure // Should be set to true (which is the default) in production
    } );

    // configure bell to use your Okta authorization server
    server.auth.strategy( "okta", "bell", {
        provider: "okta",
        config: { uri: process.env.OKTA_ORG_URL },
        password: process.env.COOKIE_ENCRYPT_PWD,
        isSecure,
        location: process.env.HOST_URL,
        clientId: process.env.OKTA_CLIENT_ID,
        clientSecret: process.env.OKTA_CLIENT_SECRET
    } );
};

Next, update src/plugins/index.js to register the new module.

"use strict";

const blipp = require( "blipp" );
const pino = require( "hapi-pino" );
const serverStart = require( "./serverStart" );
const auth = require( "./auth" );

const isDev = process.env.NODE_ENV !== "production";

module.exports.register = async server => {
    await server.register( [ blipp, {
        plugin: pino,
        options: {
            prettyPrint: isDev,
            logEvents: [ "response" ]
        }
    }, {
        plugin: serverStart,
        options: {
            message: `My hapi server is running at ${ server.info.uri }`
        }
    } ] );
    await auth.register( server );
};

Now, modify src/routes/index.js to the following code.

"use strict";

const boom = require( "boom" );

module.exports.register = async server => {
    server.route( {
        method: "GET",
        path: "/",
        config: {
            auth: {
                strategy: "session",
                mode: "optional"
            }
        },
        handler: async ( request, h ) => {
            try {
                const message = request.auth.isAuthenticated ? `Hello, ${ request.auth.credentials.profile.firstName }!` : "My first hapi server!";
                return h.view( "index", {
                    title: "Home",
                    message,
                    isAuthenticated: request.auth.isAuthenticated
                } );
            } catch ( err ) {
                server.log( [ "error", "home" ], err );
            }
        }
    } );

    server.route( {
        method: "GET",
        path: "/login",
        options: {
            auth: "session",
            handler: async request => {
                return `Hello, ${ request.auth.credentials.profile.email }!`;
            }
        }
    } );

    server.route( {
        method: "GET",
        path: "/authorization-code/callback",
        options: {
            auth: "okta",
            handler: ( request, h ) => {
                if ( !request.auth.isAuthenticated ) {
                    throw boom.unauthorized( `Authentication failed: ${ request.auth.error.message }` );
                }
                request.cookieAuth.set( request.auth.credentials );
                return h.redirect( "/" );
            }
        }
    } );

    server.route( {
        method: "GET",
        path: "/logout",
        options: {
            auth: {
                strategy: "session",
                mode: "try"
            },
            handler: ( request, h ) => {
                try {
                    if ( request.auth.isAuthenticated ) {
                        // clear the local session
                        request.cookieAuth.clear();
                    }

                    return h.redirect( "/" );
                } catch ( err ) {
                    request.log( [ "error", "logout" ], err );
                }
            }
        }
    } );
};

Create a new folder under src/views named partials. Create a new file in the partials folder named navigation.ejs. Add the following HTML to this file.


    
    <% if ( isAuthenticated ) { %>
    Logout
    <% } else { %> 
    Login
    <% } %>

Update src/views/layout.ejs to include the navigation.ejs file when it renders.




    
    
    <%= title %>
    
    
    


    <% include partials/navigation %>
    <%- content %>

Now, you are ready to start your application again.

node .

In your browser, navigate to http://localhost:8080/. Click on the Login button at the top. You should see a prompt to log in to your Okta account.

Note: To verify authentication is working as expected, you may need to open a new browser or use a private/incognito browser window.

After logging in, you should be redirected back to the home page and see something like the following.

After authentication, the following profile information is available on every request as part of request.auth.

// request.auth (Example)
{
    "isAuthenticated": true,
    "credentials": {
        "provider": "okta",
        "token": "...",
        "expiresIn": 3600,
        "profile": {
            "id": "0012345",
            "username": "john.henry@company.com",
            "firstName": "John",
            "lastName": "Henry",
            "email": "john.henry@company.com",
            "raw": {
                "sub": "0012345",
                "name": "John Henry",
                "locale": "en-US",
                "email": "john.henry@company.com",
                "preferred_username": "john.henry@company.com",
                "given_name": "John",
                "family_name": "Henry",
                "zoneinfo": "America/Los_Angeles",
                "updated_at": 1544212558,
                "email_verified": true
            }
        }
    }
}

Add Tests to Your Hapi Project

A hapi project would not be complete without tests. Lab and code are the preferred test libraries for hapi projects. TestDouble is also a handy utility for replacing, mocking dependencies, and verifying behavior.

From the command line, install the following developer dependencies required for testing.

npm install --save-dev code lab testdouble

Create a new folder in the root of the project named test. Add a file to this folder named app.js. In this file, add the following code.

"use strict";

const td = require( "testdouble" );
td.replace( "hapi-pino" );
require( "dotenv" ).config();
const { expect } = require( "code" );
const Lab = require( "lab" );

const app = require( "../src/app" );

const lab = exports.lab = Lab.script();
const { describe, it } = lab;

describe( "App", () => {
    it( "home page returns valid response", async () => {
        const server = await app.createServer( { port: 12345 } );
        await server.initialize();
        const res = await server.inject( {
            url: "/",
            method: "GET"
        } );
        expect( res.statusCode ).to.equal( 200 );
        expect( res.result ).to.exist();
        expect( res.result ).to.contain( "My first hapi server!" );
    } );
} );

Modify your package.json file, and change the test scripts property to the following.

    "test": "lab -c"

Now, run the test from the command line using the following command.

npm run test

The output from this first test should look similar to the following.

  .

1 tests complete
Test duration: 67 ms
No global variable leaks detected
Coverage: 88.73% (16/142)
src/plugins/serverStart.js missing coverage on line(s): 8, 9
src/routes/index.js missing coverage on line(s): 17, 24, 35, 46-50, 64, 65, 69, 75, 77, 78

One of the great features of lab is the ability to analyze your tests for code coverage. The code analysis report includes lines of your source code currently missing test coverage.

Go Get Hapi!

In this tutorial, you have learned the basics of creating a modern web application with hapi and some of the tools that are part of the hapi ecosystem. Below are more resources to explore.

Add Authentication to Any Web Page in 10 Minutes
Simple Node Authentication
Use TypeScript to Build a Node API
What the Heck is OAuth?
Why You Should Consider hapi by Eran Hammer, principal creator of hapi

You can find the complete project source code on GitHub.

Thanks for reading, and happy... er... hapi coding!

Hey, Okta! Where's the Bacon?

David Neal — Thu, 06 Sep 2018 21:51:50 GMT

I am so excited to announce I have joined Okta's developer relations team as a Senior Developer Advocate! My focus is on all the JavaScripts: Node.js, Vue, React, and a bazillion other things!

Why Okta?

Have you ever secured an application? It's not a trivial task! Even more, it's a critical component of every application you can't afford to get wrong!

Okta is a trusted leader in single sign-on, multi-factor authentication, and user management. Okta's developer products provide a painless solution for implementing a great security experience for customers. Their products also provide the peace of mind your applications remain secure as new threats emerge.

However, my decision to join Okta is not only about believing in their products. My team is a fantastic group of folks who are genuinely passionate about the developer community. I am so excited to be serving the developer community with them!

First week == mind blown

Okta has an amazing process to ensure that every new hire is successful in starting their adventure as an Okta employee. Day one is full of training and orientation, and designed not only to inform and equip new employees, but to get them excited about the products and culture.

Okta SWAG!

Okta is a company that participates in the Pledge 1% to support nonprofits, called Okta for Good. On Day 2, new hires volunteered at Family House, Inc., a home for families of a child undergoing cancer treatment. I did a lot of vacuuming! Others helped serve breakfast or with fun arts & crafts projects. It was a fantastic, eye-opening experience.

Messages left by families blessed by Family House

How can I help you be more awesome?

Over the last five years, I have resolved to make it my mission to give back to the developer community. I want to encourage folks to see the world through a bigger lens. All of us have incredible potential to impact our workplace, family, community, and the entire world, using the technology within our grasp.

If there's anything I can do for you, please let me know! Contact me on Twitter at @reverentgeek. You can also follow my silly drawings on Instagram, check out my GitHub, see my slides on SpeakerDeck, and connect with me LinkedIn!

Makin' Bacon with Node.js, Hapi, and Vue

David Neal — Wed, 18 Jul 2018 16:37:17 GMT

I recently created a new demo for my Node.js Crash Course talk that I've given at several conferences. This application is a "bacon ipsum" generator using Node.js, Hapi, and Vue. I know I'm not the first to come up with the idea of a "bacon ipsum" generator, but I thought it'd be a fun project to create one in Node.js.

API Requirements:

Using a list of bacon names and other associated words...
Return a specified number of paragraphs, maximum of 25
Paragraphs should consist of between 3 to 6 sentences
Each sentence should be capitalized
A sentence should end with random punctuation, weighted towards more frequent use of periods
A sentence should consist of between 4 to 12 unique words

UI Requirements:

Customer can choose to generate 1 to 21 "pounds" of bacon
Customer can easily copy the generated text to their clipboard

See it in action!

When you click on the "Make the Bacon!" button, the Vue application uses Axios to call the API for bacon. When the API call returns, the Vue app updates its state with the array of paragraphs. This triggers re-rendering the UI to list the paragraphs and show the "Copy to the clipboard!" button.

makeTheBacon: function() {
  return axios
    .get( "/api/bacon/" + this.numberOfPounds )
    .then( res => ( this.paragraphs = res.data.paragraphs ) )
},

Vue computed properties

The Vue app uses a computed property, hazBacon, to show/hide the "Copy to the clipboard!" button based on there being any paragraphs of bacon text to display.

When copying text to the clipboard, the Vue app uses another computed property, paragraphText, to join the array of paragraphs together into a single string.

computed: {
  paragraphText: function() {
    return this.paragraphs.join( "\n\n" );
  },
  hazBacon: function() {
    return this.paragraphs.length > 0;
  },
  poundText: function() {
    return this.numberOfPounds == 1 ? "pound" : "pounds";
  }
},

Other dependencies

In addition to Node.js, Hapi, and Vue, here are the dependencies and plugins used by the project. Some of these are my current favorites for building Node.js applications.

Vue-Clipboard2 - Vue component used to copy text to the clipboard
Axios - HTTP client for browsers or Node.js
fs-extra - Promise-based file system module
Joi - Object schema validation plugin for Hapi
ESLint - JavaScript linting
Nodemon - Developer tool that automatically restarts the application when any change is made to source code
Boom - Hapi plugin for returning errors
hapi-pino - Pino logging plugin for Hapi
Inert - Static resource plugin for Hapi
Lab and Code - Test and assertion utilities for Hapi

github.com/reverentgeek/node-bacon-generator

Happy computering!

Choose Your Own Framework: The Curse of JavaScript Fatigue

David Neal — Wed, 13 Jun 2018 17:15:35 GMT

How will your project die? Choose from 2,147,483,647 possible endings!

The MONSTER at the end of this Book

David Neal — Fri, 25 May 2018 22:34:45 GMT

The Monster at the end of this book...

Not All Heroes Wear Capes

David Neal — Tue, 06 Mar 2018 16:03:06 GMT

On the morning of November 25, 1982, we all piled in our car and made the 2-hour trip to my Aunt and Uncle’s house near Atlanta, GA. It’s Thanksgiving. As was tradition on my mother’s side of the family, we joined hands, gave thanks for our blessings, and enjoyed a meal together.

This particularly momentous Thanksgiving Day, I discovered the TRS-80.

I don’t remember if I spent the entire day at that keyboard. What I do know is, I must have made an impression on my Uncle.

An amazing act of kindness

Some time after that Thanksgiving, we made another trip to my Aunt and Uncle’s house. Waiting for me there was a big cardboard box. Inside was the TRS-80, a cassette drive, a floppy drive, a dot matrix printer, cables, and a book titled, “Getting Started With Color BASIC.”

This one very kind and generous act launched me on a journey of computers and programming. I am forever grateful, and in their debt, for helping me to discover something that has not only been my career, but a source of learning, passion, and delight.

You can make an impact!

You have an amazing opportunity to impact your own family and community in powerful, and far-reaching ways! Even one simple act of kindness, encouragement, or investment of your time could be the catalyst that launches a young person’s life-long journey of exploration and livelihood.

Here are just a few ways you can invest in someone:

Take your family to an event like THAT Conference or CodeMash. Not only is there a water park, there is an entire schedule of science and technology sessions specifically for kids and young adults.
Submit to give a Family session at THAT Conference!
Encourage the young women in your family or community to connect to a local Girls Who Code group, and volunteer!
Consider gifting a Kano Computer Kit, a Piper Computer Kit, an Ozobot, Lego Mindstorms, or countless other learning kits.
Get involved in a local makerspace or maker meetup.
Reach out to your local schools and ask how you can get involved.

Thank you

I can’t thank my Aunt and Uncle enough for the impact they have made in my life. I continue to be inspired by their example of investing not only in their family, but the lives of countless others.

Thank you, to all of you who are making an impact, and all of you who will make an impact, in your families and communities.

Go, and be awesome!

Confront Your Inner Critic

David Neal — Fri, 02 Mar 2018 13:37:27 GMT

Have you ever felt inadequate? Like a fraud? Like you don't belong where you are? That someone is going to expose you for who you really are?

Maybe you're experiencing impostor syndrome.

I would wager you do awesome things. Maybe you just don't realize it. Because your inner critic keeps cutting you down.

You're not alone

I sometimes struggle with this, too. Most people have experienced, or are currently fighting with impostor syndrome right now.

Really successful people.

I put on pants today. I consider that a win.

Don't fall into the comparison trap

There’s no need to compare yourself to others. You aren’t them. They aren’t you. Focusing on someone else’s accomplishments and using their success to beat yourself up is a terrible waste of time and only leads to despair.

Let others inspire you. But, don't let their successes fuel your inner critic.

There's nothing wrong with being a beginner

Regardless of how long you've been doing your thing, there will be times when you are a beginner.

Are you learning a new technology or skill? Have you joined a new team or company?

You will have legitimate feelings of inadequacy and anxiety. This is totally normal! You're going to stink at it for a while. Keep moving forward and getting better!

It's okay to speak up, and ask others for help!

Surround yourself with awesome people

Find people who will not only encourage you, but who are transparent about their own struggles. It helps to know you're not alone.

When someone gives you positive feedback, don't dismiss it! Write it down. Collect these moments to silence your inner critic.

Keep a record of what you've done

Day to day, or week by week, it may feel like you're not making any progress. However, if you look back over a longer period of time, such as six months or a year, you can start to see just how far you've come.

In software development, some teams have regular retrospectives to identify successes and things to improve.

Have a personal retrospective. No, this is not where you beat yourself up and have a pity party. Make a list of the things you've accomplished, no matter how small. Make a list of actionable goals and things you can improve.

Share your knowledge or time

Teach others what you know. You may have this feeling the things you know are obvious and simple. It might surprise you to discover there are a lot of people who would love to possess the knowledge you already have.

For me, giving talks and writing blog posts have been things that have caused me the most anxiety and feelings of impostor syndrome. At the same time, hearing stories of the positive impact I’ve made on people has been one of the key strategies to combating my inner critic.

Not ready to teach? How about volunteering to help a local non-profit? It doesn't take a lot of time, or usually any special skill.

Whether you teach or volunteer, you can have an amazing impact on others. The dividends are huge.

Be brave, and seek a mentor!

I am very grateful to have a dear friend in my life who has been my cheerleader for many years. He has the gift of encouragement. He knows how to listen to my struggles, and always seems to uncover the gold in what only looks like a trash heap to me.

Be a mentor!

Invest in someone. Encourage them. Help them to see their potential, and to believe. When they accomplish great things, you can know you played a part.

Be you!

Give yourself freedom to fail. Celebrate your successes. Keep challenging yourself.

You got this.

Go, and be awesome!

Here's an episode on Impostor Syndrome I recorded with the Script & Style Web technology podcast. Check it out!

5 Essential Ingredients for an Awesome Tech Talk

David Neal — Mon, 01 Jan 2018 20:12:13 GMT

I believe one of the big reasons people are afraid of public speaking (or writing) is impostor syndrome. You may think...

“I’m not an expert! I barely know anything! Everyone will know I’m a fraud!”

Psst... here’s a secret: You don’t have to be an expert!

In fact, you have something no one else in the entire world has. Your experience.

Here’s a recipe for turning your experience into an awesome presentation!

1. Why did you choose this technology?

People can argue semantics, “best practices,” architecture, speed, or “Technology A” vs. “Technology B” all day long. But, no one can dispute your experience. Tell people your story. What was your motivation for choosing this technology, or for replacing “Technology A” with “Technology B?” What problems were you trying to solve? Chances are, your reasons “why” will resonate with other people in similar situations.

2. What does this technology do?

Do some research and put together a short list of highlights, features, and capabilities. This is your opportunity to geek out and dive a little deeper into this technology beyond your particular use case. Seek to find other scenarios where this technology is a good fit. This information can help bridge gaps for your audience.

3. How did you make it work?

Give your audience more of your story. They want to hear about the challenges and issues you faced along the way. Most of all, they want your insights! You learned the hard way what worked and what didn’t work, so share the good stuff! Including…

What mistakes did you make?

“No way! I already feel like an impostor, and now you want me to remove any doubt?!”

You might think admitting your mistakes will harm your reputation or credibility. Nope! Being transparent about your mistakes and what you learned from them adds to your credibility! I don’t know about you, but I make mistakes all the time. I want to hear from real humans doing real work -- people I can relate to.

If you were to do it all over, what would you do differently? Turn your challenges and mistakes into key takeaways for your audience!

Demo, if you must

A good demo can be the final puzzle piece needed to convince someone to try this technology. A working demo is great, but so are screen shots or a recorded video!

For the love of all that is holy, don’t do any live coding unless you are specifically demoing features of an IDE!

Your demo should only exist to reinforce your “why” for choosing this technology. Make it short and to the point, and show them something awesome! Don’t waste your audience’s time showing “how.” They can easily find that information for themselves on the Internet later. Your job is to convince them to go try it!

In my opinion, no demo is better than a bad one.

4. Where to get started?

You did the research. You made it work. Give your audience links to put them on the fast track! Better yet, give them one link where they can go to get your slides, your contact information, and a list of all the resources you recommend.

5. Drop the mic*

Wrap it up. Send them off with a call to action and high-fives!

Bake in the oven at 350 for 45 minutes

Imagine yourself in the future. You just finished giving a talk covering these five essential ingredients. Guess what?

BOOM.

You just gave an awesome talk. Your audience is now walking away with valuable information they could not have found anywhere else.

Now, go make it happen!

*Metaphorically speaking. Real microphones are fragile, and expensive. Just ask Kyle Welch.