Monthly Archives: May 2018

Weekly Node.js Update - #21 - 05.25, 2018

By Tamas Kadlecsik

Weekly Node.js Update - #21 - 05.25, 2018

Below you can find RisingStack‘s collection of the most important Node.js news, updates, projects & tutorials from this week:

Node v10.2.1 (Current) Released

This is a follow up release to fix two regressions that were introduced in v10.2.0.

  • http:
    • fix res emit close before user finish (Robert Nagy)
  • src:
    • re-integrate headers into node.h (Anna Henningsen)
  • test:
    • mark test-zlib.zlib-binding.deflate as flaky (Matheus Marchini)

How to Make Up Your Mind Between Node.js and Python

Are you thinking about how to build the backend of your web application? Read on for a comparison of Node.js and Python to decide which one is a better fit for you.

Training: Designing Microservice Architectures – Berlin

If you’d like to learn how to break down a monolith into microservices, join us at our 2-days Designing Microservice Architectures training in Berlin, on June 14th-15th.

A Sneak Peek into the JS Interactive Schedule

JS Interactive conference is an expansion of Node.js Interactive bringing the wider Node.js and JavaScript communities together to collaborate, network, and learn. It will take place in Vancouver, between October 10-12. Get a sneak peek into the program here.

How to Make a Real-Time Sports Application Using Node.js

By reading this post, you can learn how to make a web application to display live game scores from, say, the NHL. The scores will update automatically as the games progress.

Weekly Node.js Update - #21 - 05.25, 2018

Build Secure Node Authentication with Passport.js and OpenID Connect

This article walks you through the steps of using identity provider of choice (Okta) with the generic passport-openidconnect package to build secure Node authentication and user management!

How to Watch for Files Changes in Node.js

In this article, you’ll learn how to watch for file changes in Node.js using a real IoT project as a learning context. Explore a few techniques for watching files and ultimately arrive at the best solution.
Weekly Node.js Update - #21 - 05.25, 2018

Getting Started With Ripple (XRP) and Node.js

Learn using the ripple-lib package from this article, to transfer XRP between two accounts on Ripple’s XRP Test Net.

Quickstart: How to use Azure Redis Cache with Node.js

This tutorial helps you to get started with Azure Redis Cache using Node.js with this article.

Weekly Node.js Update - #21 - 05.25, 2018

Previously Node.js Updates:

In the previous Weekly Node.js Update, we collected great articles, like

  • Node v8.11.2 (LTS) is released;
  • Creating a chat with Node.js from scratch;
  • An SQLite Tutorial with Node.js;
  • Node.js Docker workflow;

& more…

We help you to stay up-to-date with Node.js on a daily basis too. Check out our Node.js news page and its Twitter feed!

Source:: risingstack.com

Build Native Modals Using the Dialog Element

By Samuel Oloruntoba

With release of HTML 5.2 comes the dialog element. The dialog element has been around for a while now but was an experimental technology.

Previously, if we wanted to build a modal or a dialog box of any sort, we needed to arrange our markup in a way where we have a backdrop, a close button, keep events trapped within the dialog, find a way to pass message out of the dialog… It was really complicated. The dialog element solves all the problems above and more.

Heads up: I’m going to interchange between modal and dialog a lot.

Quick comparison between bootstrap modal and the new dialog element

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The markup above is for bootstrap, compare that to this

<!-- Trigger the modal with a button -->
<button type="button" class="btn">Open Modal</button>

<!-- Modal -->
<dialog open>
  Native dialog box!
</dialog>

Getting started

We’ve seen the simplest markup for a dialog element, there are some basic operations you’ll need to understand to get it to work.

You may have noticed the open attribute on the dialog above. Adding that attribute to the element will force the dialog to show, removing it will do otherwise. The dialog will also be absolutely positioned on the page.

Default dialog styling

The dialog element exposes some methods that we can use to manipulate its behavior.

const modal = document.querySelector('dialog')
const openBtn = document.querySelector('.open-modal')
const closeBtn = document.querySelector('.close-modal')

// showModal() makes modal visible (adds `open` attribute)
openBtn.addEventListener('click', () => modal.showModal())

// close() hides modal (removes `open` attribute)
closeBtn.addEventListener('click', () => modal.close())

As you can see from the pen above, the dialog element exposes the showModal() and close() methods. We use these methods to show and hide the modal respectively.

Sending data out of the modal

We can use modal.returnValue to send data out of the modal. This way, we have native control over what we transmit out of the modal.

First, let’s send data out of the dialog. We do that by passing the data we want to send through the close() method.

 // close() hides modal (removes `open` attribute and send data out the modal)
closeBtn.addEventListener('click', () => modal.close('Lorem ipsum'))

We can capture the data sent out of the modal by calling the modal.returnValue

 closeBtn.addEventListener('click', () => {
  modal.close('lorem')

  alert(`modal says: ${modal.returnValue}`)
})

Styling the modal

We would style a dialog just as we would any CSS element… almost any CSS element πŸ˜‰

In Conclusion

The dialog component is not yet supported by every browser there is. All current variations of Chrome (desktop or mobile) does, but other browsers are lacking.

To remedy this, we need to polyfill the dialog. Fortunately for us, the team behind Chrome has built one for us. It’s called dialog polyfill.

Source:: scotch.io

Realtime Exchange Rates With Currencylayer

By Chimezie Enyinnaya

Ever wanted an accurate and reliable currency data that can be easily integrated into your business; be it CRM, ERP, accounting applications etc., built in any programming languages? Then say hello to currencylayer.

In this article, I will show you how to use two of currencylayer’s services: live exchange rates and historical exchange rates.

What is currencylayer?

Currencylayer provides a reliable exchange rates and currency conversion for your business. It does these by providing an easy to integrate REST API with real-time and historical exchange rates for 168 world currencies and precious metals, delivered in universally usable and easily parseable JSON format, and compatible with any application.

The universal real-time exchange rate data solution

In addition to providing update to date real-time exchange rates, currencylayer also provides historical exchange rates for all of their supported 168 world currencies. They provide historical exchange rates for way back as the past 16 years.

So what makes currencylayer perfect for your business? Well, here are some reasons:

  • Reliable forex rates
  • Easy-to-integrate API
  • 256-bit HTTPS
  • Advanced data coverage
  • Real-time updates
  • Extended usage statistics
  • Easy on your budget
  • Interactive documentation

Did I mention that you can use most of these services completely for free? Sure you can! currencylayer has a free plan. With the free plan, you can make update to 1,000 API requests and the data are updated every hour.

Getting started

To start using the services provided by currencylayer, you need to first create an account with them. So head over to the subscription plans page and signup for a free plan.

Once you have signed up, you will be presented with a 3-step quickstart guide. Step 1 contains your Access Key, which you will use to interact with ****the currencylayer API. In step 2, you are presented with the base URL of the currencylayer API:


http://apilayer.net/api/

Take note of your access key and the base URL as we’ll be using them in the next section.

Fetching live exchange rates

To get live exchange rates, we need to make request to the live endpoint of the currencylayer API. That is:


http://apilayer.net/api/live

We need to pass our access key to the above URL.

The sample code in this article will be in Node.js and using Axios as the HTTP client:

const axios = require('axios')

const ACCESS_KEY = 'YOUR_ACCESS_KEY'

axios.get(`http://apilayer.net/api/live?access_key=${ACCESS_KEY}&currencies=USD,EUR,GBP,AUD,NGN`).then(response => {
    console.log(response.data)
})

Here, we specify we want to get the exchange rates for five currencies: USD, EUR, GBP, AUD, and NGN. By default, USD will be used as the source. That is, the currency to which all exchange rates are relative. We can as well specify as different source:


http://apilayer.net/api/live?access_key=YOUR_ACCESS_KEY&source=GBP

Below is the response gotten from the above request:

{
  "success": true,
  "terms": 'https://currencylayer.com/terms',
  "privacy": 'https://currencylayer.com/privacy',
  "timestamp": 1526743687,
  "source": 'USD',
  "quotes": {
     "USDUSD": 1,
     "USDEUR": 0.849404,
     "USDGBP": 0.74245,
     "USDAUD": 1.331041,
     "USDNGN": 358.000344
  }
}

The response is pretty straightforward. The exchange rates are inside the quotes object.

Fetching historical exchange rates

We have seen how to get live exchange rates. Now, let’s see how to fetch exchange rates from the past. For this, we make request to the historical of the currencylayer API, passing in our access key and a date in the past:

const axios = require('axios')

const ACCESS_KEY = 'YOUR_ACCESS_KEY'

axios.get(`http://apilayer.net/api/historical?access_key=${ACCESS_KEY}&date=2010-05-19&currencies=USD,EUR,GBP,AUD,NGN`).then(response => {
    console.log(response.data)
})

Here, we specify we want to get the exchange rates for a particular date (2010-05-19) in the past.

Below is the response gotten:

{
  "success": true,
  "terms": "https://currencylayer.com/terms",
  "privacy": "https://currencylayer.com/privacy",
  "historical": true,
  "date": "2010-05-19",
  "timestamp": 1274313599,
  "source": "USD",
  "quotes": {
    "USDUSD": 1,
    "USDEUR": 0.809694,
    "USDGBP": 0.69632,
    "USDAUD": 1.184999,
    "USDNGN": 152.073107
  }
}

In addition to the standard result sets, an historical API response contains an historical key with a value of true and the specified date.

Conclusion

In this article, we have seen what currencylayer is, the service it provides and some reasons to use it in your business. Though, we only looked at two of the services currencylayer provides. In addition to live and historical exchange rates, currencylayer can also handle currency conversion and lot more.

For more information about currencylayer, do check out their website and their easy to understand documentation.

Source:: scotch.io

Introduction To Koa - The Future of Express

By Olayinka Omole

Express is one of the most popular Node.js frameworks out there. With about about 4+ million weekly downloads, Express has clearly made its mark in the world of Node.js and JavaScript.

Koa is a newly popular web framework created by the team behind Express. It aims to be a modern and more minimalist version of Express. Some of its popular characteristics are its support and reliance on new JavaScript features such as generators and async/await. Koa also does not ship with any middleware though it can easily be extended using custom and existing plugins.

In this article, we will examine the Koa framework and build a simple app to get familiar with its functionality and philosophy.

Requirements

To follow along with this tutorial, you would need the following installed:

You also need to have a working knowledge of JavaScript and ES6 syntax.

Setup and Configuration

Let us get started by setting up our project. First, we will create a new directory for our project. This can be done by copying and running the command below in you terminal:

$ mkdir koala

⚠️ Note: You can give your project any name, but in this article we’ll be using koala as our project name and directory.

At this point, we have created our project directory koala. Next, we will initialise our node project from inside the directory. You can do so by running the commands below:

$ cd koala
$ npm init koala 

After running the npm init command, follow the prompts and fill in the details of your project. At the end of this, you will have a package.json file with the information you enetered while prompted.

πŸ’‘ Tip: You can run npm init -y to create a package.json file with default values.

Next, we will run this command to install Koa:

$ npm install koa --save

πŸ’‘ Tip: Depending on the version of Node you have running you may not need to add the --save flag. This flag tells older versions of Node to add the installed library (in this case Koa) to the dependencies list in our package.json file. On newer Node versions, you can simply run npm i koa to install Koa.

Building Out Our App

Creating a Koa Server

During the initialisation of our project, we were prompted to enter the entry point of our application. In this article, we will use index.js which was the default value as our entry point.

First, we will create the index.js file, this can be done in several ways. For MacOS and Linux users, this can be done by running the below command in your terminal:

$ touch index.js

Using your code/text editor of choice, we will open our project and copy the below snippet into the index.js file:

 // index.js

'use strict';

const koa = require('koa')
const app = new koa()

app.use(function *(){
  this.body = "Hello World !!!";
});

app.listen(1234)

In the snippet above, we have created a koa application that runs on port 1234. You can run the application using the command:

$ node index.js

And visiting the application on http://localhost:1234.

Routing In Koa.js

As mentioned earlier, Koa.js does not ship with any contained middleware and unlike its predecessor, Express, it does not handle routing by default.

In order to implement routes in our Koa app, we will install a middleware library for routing in Koa, Koa Router. We’ll install it by running:

$ npm install koa-router --save 

To make use of the router in our application, we will amend our index.js file:

// index.js

'use strict';
const koa = require('koa')
const koaRouter = require('koa-router')

const app = new koa()
const router = new koaRouter()

router.get('koala', '/', (ctx) => {
  ctx.body = "Welcome! To the Koala Book of Everything!"
})

app.use(router.routes())
  .use(router.allowedMethods())

app.listen(1234, () => console.log('running on port 1234'))

Above, we have defined a route on the base url of our application (http://localhost:1234) and registered this route to our Koa application.

πŸ’‘ For more information on route definition in Koa.js applications, visit the Koa Router library documentation here.

Templating In Koa.js

As already established, Koa comes as a very minimalistic framework, therefore, to implement view rendering with a template engine we will have to install a middleware library. There are several libraries to choose from but in this article we will use koa-ejs.

To do so, we will first install the library using:

$ npm install koa-ejs --save

Next, we will ammend our index.js file to register our templating with the snippet below:

// index.js

'use strict';
const koa = require('koa')
const path = require('path')
const render = require('koa-ejs')
const koaRouter = require('koa-router')

const app = new koa()
const router = new koaRouter()

render(app, {
  root: path.join(__dirname, 'views'),
  layout: 'layout',
  viewExt: 'html',
  cache: false,
  debug: true
})

router.get('koala', '/', (ctx) => {
  ctx.body = "Welcome! To the Koala Book of Everything!"
})

app.use(router.routes())
  .use(router.allowedMethods())

app.listen(1234, () => console.log('running on port 1234'))

As seen above, in our template registering, we tell our application the root directory of our view files, the extension of the view files and the base view file (which other views extend).

Now that we have registered our template middleware, we will amend our route definition to render a template file:

// index.js

...

router.get('koala', '/', (ctx) => {
  let koala_attributes = [];
  koala_attributes.push({
    meta_name: 'Color',
    meta_value: 'Black and white'
  })
  koala_attributes.push({
    meta_name: 'Native Country',
    meta_value: 'Australia'
  })
  koala_attributes.push({
    meta_name: 'Animal Classification',
    meta_value: 'Mammal'
  })
  koala_attributes.push({
    meta_name: 'Life Span',
    meta_value: '13 - 18 years'
  })
  koala_attributes.push({
    meta_name: 'Are they bears?',
    meta_value: 'no!'
  })
  return ctx.render('index', {
    attributes: koala_attributes
  })
})

...

Above, our base route renders the index.html file found in the views directory. Our index.html file contains some basic HTML to display our koala attributes. See below:

<!-- views/index.html -->

<h2>Koala - a directory Koala of attributes</h2>
<ul class="list-group">
  <% attributes.forEach( function(attribute) { %>
    <li class="list-group-item">
      <%= attribute.meta_name %> - <%= attribute.meta_value %>
    </li>
  <% }); %>
</ul>

πŸ’‘ Tip: For more options with using the koa-ejs template middleware, view the library documentation here.

Handling Errors and Responses

Error Handling

Koa handles errors by defining an error middleware early in our entrypoint file. The error middleware must be defined early because only errors from middleware defined after the error middleware will be caught. Using our index.js file as an example, we’ll adjust it to include:

// index.js

'use strict';
const koa = require('koa')
const render = require('koa-ejs')
const koaRouter = require('koa-router')

const app = new koa()
const router = new koaRouter()

app.use( async (ctx, next) => {
  try {
    await next()
  } catch(err) {
    console.log(err.status)
    ctx.status = err.status || 500;
    ctx.body = err.message;
  }
})

...

The above block catches any error thrown during the execution of our application. We’ll test this by throwing an error in the function body of the route we defined:

// index.js

...

router.get('koala', '/', (ctx) => {
  ctx.throw('Test Error Message', 500)
}) 
...

Handling Responses

The Koa response object is usually embedded in its context object. Using our route definition, we will show an example of setting responses:

// index.js

'use strict';
const koa = require('koa')
const koaRouter = require('koa-router')

const app = new koa()
const router = new koaRouter()

app.use( async (ctx, next) => {
  try {
    await next()
  } catch(err) {
    console.log(err.status)
    ctx.status = err.status || 500;
    ctx.body = err.message;
  }
})

router.get('koala', '/', (ctx) => {
  ctx.status = 200
  ctx.body   = "Well this is the response body"
})

Conclusion

In this article, we had a brief introduction to Koa and how to implement some common functionalities in a Koa project. Koa is a minimalist and designed-to-be-flexible framework that can be extended to more functionality than this article has shown. Because of its futuristic approach and similarity to Express, some have even described it as Express 5.0 in spirit.

The entire code from this article is available on Github, and the repository contains some additional concepts not treated here, as they are beyond the scope of the intro. We’d love to hear about what you’ve done with Koa.js. Please share in the comments below!

Source:: scotch.io

Functional-Light JavaScript By Kyle Simpson

Ben Nadel reviews Functional-Light JavaScript by Kyle Simpson. Kyle has an effortless writing style and a knack for breaking down complex concepts into bite-sized pieces which he can then use to construct an increasingly-sophisticated and multi-faceted mental model in the mind of the reader. It is with this measured approach that Kyle introduces us to the world of Functional Programming (FP)….

Source:: bennadel.com