Forem: Alex Kluew

Learn Node.js - Free JavaScript Book

Alex Kluew — Tue, 28 Jul 2020 14:29:02 +0000

Hello friends 👋

I just want to announce my new project 👉 https://learnnodejs.dev

Are you looking to dive into JavaScript and Node.js? Learn Node.js may be a perfect fit for you AND it is FREE!

Learn Node.js is a free book that contains everything you need to build full-stack applications written using modern JavaScript. Get familiar and master Node.js, and friends (Express.js, Sequelize.js, Handlebars.js, and PostgreSQL).

If you like what I am doing or if you would like to support my work, then please feel free to share this resource.

Thank you,
Alex

Self-publishing a technical book

Alex Kluew — Tue, 21 Apr 2020 20:25:35 +0000

I began to write my Learn Node.js (working title) book last month. It is a self-published book project. The aim of the book is to help developers, switching to javascript and node.js, to hit the ground running by building and uploading a functional project. By going through the book you will be able to build features that modern javascript applications require.

My current plan is to self publish and I will be doing that using gumroad; then I will upload a copy on iBooks store; and checkout amazon's self publishing via kindle. In all three scenarios, a pdf output of the book is perfect. So, the final version of my book will be available for purchase in at least the pdf format. Asciidoc documents are perfectly converted to pdf format using asciidoctor-pdf.

I began writing my book using iBooks Author authoring tool with the intention of publishing the book on the iBooks store. However, as I progressed in my writing process, I realized that my book contained quite a bit of code blocks. I wrote about this earlier but I ended up fully re-doing my work and switching away from iBooks Author authoring tool.

Quite honestly, lack of beautiful code blocks (once converted to pdf) is why I switched my writing into asciidoc format. For images, so far I have been fortunate to use a combination of screenshots and adobe photoshop software.

For more involved diagrams, I opted out to use plantuml for diagram creation. It works pretty good and allows you to maintain your images in plain text format for backups or quick adjustments.

I spent a few hours killing time by working on the book cover marketing material. I found https://www.freepik.com/ to have many wonderful book cover mockups for free. There are also paid alternatives. Point is... finding a beautiful cover may take some time =)

To summarize:

write using asciidoc using vs code or asciidocfx
convert asciidoc to pdf using something like asciidoctor-pdf or asciidocfx
To publish the pdf book on gumroad one just needs to make an account.
To publish the pdf book to iBooks, one needs to connect your iCloud, in iTunes Connect, to Apple Books like so. And then you need to download iTunes Producer to upload your book to their store.
To publish the pdf book to Amazon, one needs an amazon account and then head over to the kindle direct publishing

Oh yes, leanpub is another option if you would like to stick to markdown and not interested in learning the power of asciidoc.

Happy writing!

Generate your social share images automatically in expressjs.

Alex Kluew — Mon, 30 Mar 2020 20:26:50 +0000

I wanted to do exactly as my cover image shows. I wanted to add an image to my social media cards and I wanted this image to be generated on the fly. I used twitter's card preview feature to test my implementation.

In my express.js app I wanted to see if I could generate images of a web page. So, I went with the idea of taking web page screenshot and, then, using this screenshot as my social media card. This is done by setting the two image properties in my meta tags (just as I show you below).

The two SEO image tags that I needed to be dynamic were : "og:image" and "twitter:image". I adjusted the express.js project by going into my handlebarsjs layout template and adding an if statement.

The if statement simply looks for the presence of page_image variable as one of the attributes passed on to the template. If the variable exists, then simply populate its content wherever we need it. Or, in other words :

 {{#if page_image}}
  <meta name="og:image" content="{{page_image}}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{page_image}}">
  {{else}}
  <meta name="twitter:card" content="summary">
  {{/if}}

From above, page_image variable holds just a simple string that show the location to my dynamic image generation function. The string is a combination of simply taking a residence slug and adding /image to it.

So, if we are rendering the following page https://12313200.ngrok.io/residences/elim-village-british-columbia-reviews, then the image url will be https://12313200.ngrok.io/residences/elim-village-british-columbia-reviews/image. This string is just passed on as data to the template.

For example, the following code


...

res.render(`template`,{
page_image : `https://12313200.ngrok.io/residences/elim-village-british-columbia-reviews/image`
});

...

would translate to the if statement above evaluating to true, in the handlebarsjs template, and the attached html code of the block was :

<meta name="og:image" content="https://12313200.ngrok.io/residences/elim-village-british-columbia-reviews/image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://12313200.ngrok.io/residences/elim-village-british-columbia-reviews/image">

Perfect, now our routes are dynamic just like I wanted. Now, I needed to implement the actual router.get('/image') function. We go to our terminal and type in the following to install puppeteer and add it to our project

npm install puppeteer --save

then we just code the end point that we want above. Mine looked like this :

// ./routes/residences.js
const express = require('express');
const puppeteer = require('puppeteer');

const router = express.Router();

...

// equivalent to :
// https://12313200.ngrok.io/residences/:slug/image
router.get('/:slug/image', async (req, res, next) => {
  const { slug } = req.params; 
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`https://12313200.ngrok.io/residences/${slug}`);
  const screenshot = await page.screenshot({
    type: 'png',
    encoding: 'binary'
  });
  await browser.close();
  res.send(screenshot);
});

...

module.exports = router;

Woot! Added a new get /image route that sends a dynamic screenshot image of the webpage. Just as the cover image shows, the newly created dynamic image adds a bit more value to the existing social cards. Your cards now show to the user exactly what the page looks like before they think of clicking on the social card to view it. If they click on the card and go to the actual page, then they view a familiar UI that was presented to them in the social card.

There you have it. Have you tried something similar? Do you have suggestions or improvements to my code? Please let me know =)

Thanks,
Alex

PS: I used ngrok for this experiment so don't try to actually access the url 🤣

How to install Sequelize in ExpressJS app with SQLite

Alex Kluew — Thu, 19 Mar 2020 13:54:47 +0000

Our goal for this project is to see this folder structure :

Start a brand new nodejs project by making the src folder :

cd dev/nodejs
mkdir LeAppWriteup
cd LeAppWriteup
npm init

Begin by installing the basic dependencies for this tutorial : express, sequelize, and sqlite.

npm install --save express
npm install --save sequelize
npm install --save sqlite3

I wanted to configure the database connection first, so I made a folder called config and a file for database db.js. In the file I wrote the following :

// config/db.js
const Sequelize = require("sequelize");

const db = new Sequelize({
  dialect: "sqlite",
  storage: "leappwriteup.sqlite3"
});

module.exports = db;

The configuration above basically follows the readme of the sequelize project. We are injecting the sequelize project, then we are instantiating a sequelize object that will use sqlite as its database. My database will be called leappwriteup.sqlite3 and this file does not exist as of yet.

After this code, I was ready to test the connections. All of the basic building blocks are there. The server, the database, and the connector. We test all three by running the following code in the index.js file (our start file) :

// index.js
const express = require("express");
const router = express.Router();
const db = require("./config/db");

// start db
db.authenticate()
  .then(result => {
    console.log("Connection established.");
  })
  .catch(error => {
    console.log("Unable to connect to db: ", error);
  });

// start app
const app = express();

module.exports = app;

In the code above we are first injecting the dependent packages : express and database, the code for which is from our text above. We then call the database to establish a connection. If everything works as expected I will see Connection established. message. Otherwise, I will see the error for why it did not connect to the db. Finally, the express server is started and the entire app is exported for use elsewhere in the code.

node index.js

Run node index.js and see your progress. You should see the successful message. Congratulations, you have connected your server to the database and created an empty leappwriteup.sqlite3 database file. Otherwise, review your steps or send me a shout ;)

This part is totally optional. To interact with the database, we better start off with modeling our data as per sequelize documents. I did it by creating the following file in the folder models :

mkdir models
cd models && touch user.js

I then created the following code in the user.js file :

// models/user.js
const sequelize = require("../config/db");
const { DataTypes } = require("sequelize");

const User = sequelize.define("User", {
  email: {
    type: DataTypes.STRING,
    allowNull: false
  },
  password: {
    type: DataTypes.TEXT,
    allowNull: false
  },
  username: {
    type: DataTypes.TEXT,
    allowNull: false
  },
  token: {
    type: DataTypes.TEXT,
    allowNull: false
  }
});

module.exports = User;

Finally, test all of the code together by interacting with the database. I will do so by creating a seed file and running it.

touch ../config/db.seed.js

In the seed file I want to connect to the database and add one user to the database and save it. After doing that, I want to run my project again to ensure that the connection to the database is established.

// config/db.seed.js
const db = require("./db");
const User = require("../models/user");

const seed = async () => {
  await db.sync({ force: true });

  const password = 'M<gC4[`Dqv}G``X"Tg4XDbRrmWR46/ca';
  const username = "getaclue";
  const email = "info@getaclue.me";
  const token = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwibmFtZSI6ImluZm9AZ2V0YWNsdWUubWUiLCJpYXQiOjE1MTYyMzkwMjJ9._lImbjluzsOJSy-hlDzEOasZRSd8YuQ_9hBmmCvSvp0`;

  User.create({
    password: password,
    email: email,
    username: username,
    token: token
  })
    .then(user => {
      console.log("seeded user", user);

      User.findOne({ where: { email: `${user.email}` } })
        .then(user => {
          console.log("found in db after adding");
          db.close();
        })
        .catch(error => {
          console.error("error looking for new user in db: ", error);
          db.close();
        });
    })
    .catch(error => {
      console.error("failed to seed, ", error);
      db.close();
    });
};

seed();

Once everything is typed out, you can feel free to test everything once again. I ran the following commands and made sure everything worked as expected.

node config/db.seed.js
node index.js

So there you have it!

I have installed Sequelize and SQLite in my ExpressJS project; established the connection between ExpressJS and SQLite via Sequelize; created User's table, added some data, and queried that data. From here on, steps like building out the api; authentication; and authorization can proceed.