Image for post
Image for post

Working for some time with JSON Web Signature (JWS) I came to the conclusion that many developers do not understand what it is and how it works.

JSON Web Signature (JWS) represents content secured with digital signatures or Message Authentication Codes (MACs) using JSON-based data structures.

There are two defined serializations for JWSs: a compact (described in this article) and a JSON.

The compact serialised JWS is a string containing three parts (in order) joined with a dot (“.”):

  • Payload,
  • Signature.

Example of the compact serialised JWS string: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjIyMTgyMzkwMjIsIm5hbWUiOiJUb21hc3ogWndpZXJ6Y2hvxYQifQ.t3VhQ7QsILDuV_HNFSMI-Fb2FoT7fuzalpS5AH8A9c0
Each part is BASE64URL encoded.

The Header describe the digital signature or message authentication code (MAC) applied to the the Payload and optionally additional properties of the JWS.

Header part before encoding is a JSON structure (example…


Image for post
Image for post

It is easy with node-jose library when you know how to do it.
It took me some time to learn, because this information is missing in the documentation. Luckily it was in tests.

The missing example (creates a JWT with an embedded ‘jwk’):

// {input} is a String
// {key} is from jwk keystore
jose.JWS.createSign(
{
fields: {
typ: 'JWT',
},
format: 'compact',
opts: { protect: false },
},
{
key,
reference: 'jwk', // MISSING in documentation
},
).update(input, 'utf-8')
.final()
.then((result) => {
// {result} is a JSON object -- JWT using the JSON General Serialization
});

I hope I saved you some time.


Image for post
Image for post

Today I would like to share small hint about how to get licenses from all packages, used in your javascript project. It’s very useful to make Bill Of Materials for your legal department.

Assuming you are using yarn (if no — start right now), go to your project directory and paste this command:

yarn licenses list

To get only licensees use (for yarn 1.7.x):

yarn licenses list | awk '/^├─/ {$1=""; print $0}'

That’s all folks. I hope you will find it handy.


In one of our projects we’ve decided to use Socket.io to handle webscockets and to use a Jest to write BDD/TDD tests. Simply because on frontend we are using Jest too. And we wanted to use one test framework in all project.

This has proven to be a challenge. We cannot find any working example. Documentation did not cover our use case.

So for all of you with this problem I’ve created a boilerplate. I hope it will save you a couple of hours.


Image for post
Image for post

In the part #3 of my guide we were discovering Sets. Now it’s time for maps.

Maps are ordered lists of key-value pairs. The key and the value can have any type. This is the main difference between objects keys and maps.

Try this code:

const log = x => console.log(x);
const objectMap = Object.create(null);
objectMap[123] = 'abc';
log(objectMap['123']);
log(objectMap[123]);
const map = new Map();
map.set(123, 'abc');
map.set('123', 'cba');
log(map.get(123));
log(map.get('123'));

We can even use objects as a keys:

const log = x => console.log(x);
const object1 = {};
const map = new Map();
map.set(object1, 'some value');
log(map.get(object1));

We can use it to store addtional data in objects without a need of a jQuery data…


Image for post
Image for post

In the previous post we’ve met magic three dots „…” alias spread operator. Those dots are worth exploring before we will go to maps.

Main objective of the spread operator is to spread the elements of an array or an iterable object.

Try this code:

const log = x => console.log(x);
const myFunction = (a, b, c) => {
log(`a: ${a}, b: ${b}, c: ${c}`)
};
const myArr1 = [1, 2, 3];
myFunction(...myArr1);

As you can see each element in the array is passed as the argument to the function. But we can do more! A few examples below.

Any argument in the list can use spread…


Image for post
Image for post

I’ve discovered that many of us JavasScript programers haven’t noticed that ECMAScript6 introduced two new types of collections: sets and maps.

Let’s start today with a set. What is it, you may ask? The set is a collection of unique elements.

Try this code:

const log = x => console.log(x);const mySet = new Set();
mySet.add(123);
mySet.add('123');
mySet.add(123);
log(mySet);

As you can see, we have only 2 elements in our set, as expected.

We can initialize our set using an array:

const log = x => console.log(x);const mySecondSet = new Set([123,"123",123]);
mySecondSet.add("123");
log(mySecondSet);

And convert it to an array (with a little help from a spread…


Image for post
Image for post

I think everybody has seen many „=>” in JavaScript these days. The Arrow Function itself. In many cases it solves problems with „this”. It’s shorter. I really like it.

But we need to remember that Arrow Functions are a little different from traditional JavaScript functions — that’s what makes them special and useful for us.

Let’s examine differences which you can stumble upon:

This code will not work:

const Constructor = () => {
console.log("Mr. Watson, Come Here");
};
let myObject = new Constructor();

Try it by yourself.

It’s because Arrow Functions do not have Construct method. …


Image for post
Image for post

I found that many programmers are not using for loop properly. I think everybody saw code like this:

const arr = [1, 2, 3, 4];
for (let i=0; i < arr.length; i++ ) {
console.log (arr[i]);
}

What is wrong with that? On every loop we are calculating arr length. And this length is not changing, so reading the same information X times is a waste of resources.

Second approach we can see is improved version of previous one:

const arr = [1, 2, 3, 4];
const arrLength = arr.length;
/*
* Some superb comment about what is happening
* in this very loop
*/
for (let i=0; i < arrLength; i++ ) {
console.log …

About

Tomasz Zwierzchoń

IT Architect. FrontEnd Team Lead. #JavaScript on #IoT #UX #Vue.js Fan. I miss having free time, especially for dancing Tango.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store