Forem: Jakub Juszczak

End-to-end encryption in the browser Part 1

Jakub Juszczak — Mon, 04 Sep 2023 13:57:23 +0000

What a time to be alive. We are living in an era where AI is on the rise, huge data breaches occur on a weekly basis and ransomeware is a daily threat.

Each and every service and app requires us to provide tons of personal information, which quite often can be found in the darknet a few months later. Data protection is a key here.

I guess nearly everyone heard of for example PGP and encryption. But to be honest PGP is kinda weird to use and not for the average user.

So, we have cool algorithms like RSA, AES (in various forms) and newer ones like ChaChaPoly. So we have the ability to protect data. But why are so few apps using this?

From one end to the other

So let's introduce this weird thing called End-to-end encryption (E2EE).

If we take a look at wikipedia it describes E2EE:

End-to-end encryption (E2EE) is a private communication system in which only communicating users can participate. As such, no one, including the communication system provider, telecom providers, Internet providers or malicious actors, can access the cryptographic keys needed to converse

So it is rather a broad definition. I've looked at many apps that advertised E2EE and trust me, companies have a very broken definition on what E2EE really is.

For some people like me, it is if you encrypt your data so only the other person can decrypt and see it.

For other people SSL/TLS is also E2EE. 🤡

Web Crypto API

But let's assume you are like me. And want real encryption. There are many libs out there that can help you with that. We have encryption libraries for nearly all languages: PHP, Ruby, Python, C++ and so on.

If we are in the web, we have a challenge. If our PHP backend is encrypting the data, we still send it cleartext to the server. The server could be compromised (now or later). And how to we even manage all the keys?!

To be really secure, we should only rely on clientside encryption. Where all the data is encrypted on the device and send encrypted to the server. No middleman!

And we even have official browser APIs for this. The Web Crypto API

And don't be afraid of encryption. It is not that hard! I promise!

Symmetric Encryption

There are different systems that we can use. One is Symmetric-key Encryption

It is quite easy to understand. You have a shared key, that you and your buddy know. And you encrypt your message with that key. Your buddy can then decrypt the message with the key and read it.

AES-GCM

A quite common standard is AES. It has different modes and all have advantages and disadvantages, but we won't go too much into detail here.

We will focus on AES-GCM in this example. Because for our use case it will be the most secure.

The steps we have to take are simple.

Generate AES key
Encrypt our data
???
Safety!!

Lets start with the first step. Key generation:
(For the sake of sanity we will write some helper functions)

async generateAESKey (): Promise<CryptoKey> {
        return await window.crypto.subtle.generateKey(
            {
                name: 'AES-GCM',
                length: 256
            },
            true,
            ['encrypt', 'decrypt']
        )
    }

Check out the documentation of generateKey for more info.

But in short, we are saying that we are using AES-GCM, we can extract the key and the key will be used to encrypt and decrypt.

And then we need to encrypt our data.

export interface EcryptedData {
    iv: Uint8Array
    encrypted: ArrayBuffer
}

async encrypt (data: string, aesKey: CryptoKey): Promise<EcryptedData> {
        const encodedData = new TextEncoder().encode(data)
        const iv = window.crypto.getRandomValues(new Uint8Array(128))
        // Encrypt with AES key
        const encryptedData = await window.crypto.subtle.encrypt(
            { name: 'AES-GCM', iv: iv },
            aesKey,
            encodedData
        )

        return {
            iv: iv,
            encrypted: encryptedData
        }
    }

Well we have a bit more stuff going on here.
First we assume your data is a string like message. Ne need to convert it to a proper ArrayBuffer, which is needed for the encryption. We can use the TextEncoder for that.

Then, we need an IV (Initialization vector). It is important to note, that the IV should always be random!

To help us with real randomness (which is hard in computer systems), we have the getRandomValues function.

We are then passing our aesKey and encodedData to the function and crypto.subtle.encrypt will return us the encrypted data.

Note there, that we need to store the encrypted data and the IV!

const aesKey = await generateAESKey()
const wallet = await encrypt('Hello World', aesKey)

// wallet.encrypted => 🔒
// wallet.iv => [150, 142, 234, 218, 156, 112,...]

Sweet! Now we have military-grade encryption!

But, we also need to decrypt our message.
But first of all, lets think about how we can store our encrypted data. Like I said before, in the world of the web crypto api, we will work mostly with array buffers. However storing array buffers might not be the most elegant solution.

There are various ways of doing it, but for simplicity lets say we just convert the arraybuffer to base64.

To decrypt our secret message, we need our data, the AES key and the IV.

async decrypt (data: string, key: CryptoKey, iv: string): Promise<string> {
        const ivBytes = base64ToArrayBuffer(iv)
        const dataBytes = base64ToArrayBuffer(data)

        const decryptedData = await window.crypto.subtle.decrypt(
            { name: 'AES-GCM', iv: ivBytes },
            key,
            dataBytes
        )
        return new TextDecoder().decode(decryptedData)
    }

And again, we will get an array buffer out of crypto.subtle.decrypt so now we are using the TextDecoder to get our message back.

const aesKey = await generateAESKey()
const wallet = await encrypt('Hello World', aesKey)

// wallet.encrypted => 🔒
// wallet.iv => [150, 142, 234, 218, 156, 112,...]

const message = await decrypt(wallet.encrypted, aesKey, wallet.iv)

// message => 'Hello World'

We are done! We have now encryption in our application.
However in real applications we have other pain points than just the process of encryption.

How to we store the aes key?
We want maybe the user to define the key?
Use password as key?

PBKDF2

A common use case would be to use the users password to encrypt something. So we need a way to generate a solid crypto key from a string (password). PBKDF2 for the rescue!

With password based key derivation we can generate a secure high entropy key from low entropy input (password).

async getKeyFromPassword (password: string): Promise<CryptoKey> {
        const encoder = new TextEncoder()
        return await window.crypto.subtle.importKey(
            'raw',
            encoder.encode(password),
            'PBKDF2',
            false,
            ['deriveBits', 'deriveKey']
        )
    }

So we use crypto.subtle.importKey to get a CryptoKey off a password. Important here, is that we can deriveBits and deriveKey.

We can't directly use the CryptoKey for AES. For that, we need to derive the key.

 async getAESKeyFromPBKDF (
        key: CryptoKey,
        salt: BufferSource
    ): Promise<CryptoKey> {
        return await window.crypto.subtle.deriveKey(
            {
                name: 'PBKDF2',
                salt,
                iterations: 100000,
                hash: 'SHA-256'
            },
            key,
            { name: 'AES-GCM', length: 256 },
            true,
            ['encrypt', 'decrypt']
        )
    }

Now we can use a users password to generate an AES key.

const password = 'Please-use-proper-high-entropy-passphrases!'
const PBKDFSecret = await getKeyFromPassword(password)
const aesKey = await getAESKeyFromPBKDF(PBKDFSecret, salt)
const wallet = await encrypt('Hello World', aesKey)

// wallet.encrypted => 🔒
// wallet.iv => [150, 142, 234, 218, 156, 112,...]

const message = await decrypt(wallet.encrypted, aesKey, wallet.iv)

// message => 'Hello World'

And we are done again. Congratulations. You have encryption!
In Part 2, we will take a look at asymmetric key encryption with RSA and some best practices on storing secrets, keys and what I've learned while building a whistleblowing software with clientside end-to-end encryption.

How to build a load more button with Vue.js and GraphQL

Jakub Juszczak — Mon, 09 Apr 2018 14:52:03 +0000

While I was working on 🎨 Colour Hunt I had to implement pagination at some point. No one wants to load a ton of color palettes at once. However I really like the lazy load approach instead of a classic pagination.

💪 Preparation

Colour Hunt is build with Nuxt.js, Graph.cool and vue-apollo. The stack is a dream for rapid development as you don’t need to fiddle around with a backend. The idea behind Colour Hunt is, that people can create and share color palettes. However you can use this techniques for all kind of graphql nodes. Most examples are using the good old Blog example and posts.

So let’s take a look at our GraphQL query:

Lets say we have a simple query like this. Just query all palettes that are available and order them by a variable. And our vue component would look like this:

We simply load our query, and vue-apollo does all the magic behind the scenes. And we just iterate over our query results. And render the color-palette component.

📝 Pagination

We now need to add two arguments to our query. The skip argument which defines the offset where the query will start and the first argument which defines the limit or how many element you want to query. And we also need to know how many elements there are. So we utilize the _meta query. So our new query will look like this:

Now our GraphQL query is ready. And we need to update the Vue component. First we need to update our data. Because we added the totalCount to our query.

The totalCount is quite important, because we need it to check if there are more palettes to load. If we loaded all palettes, we should not fetch again. We simply add a computed property that will tell us, if we can fetch more. And we can use it, as a condition for our Load More button.

Now we need to update our vue-apollo query and add the missing variables. We should at first create a new variable which holds our number of items we want to fetch. For example PALETTES_PER_PAGE which I created as a local const variable. You could also use a separate file like constants.js where you save all this kind of constants. So you can change it in one place.

Now it becomes a bit tricky. Because vue-apollo automatically map your query result to your local data model. But we have two returned objects. First allPalettes and second totalCount . I guess you could also execute the query twice, but this seems to me like a code smell.

Instead we can use the result() method which comes with vue-apollo. We simply grab the totalCount and assign it to our local this.totalCount.

Now lets create our button which will fetch more entries. Simple as that we just add a render condition, which is our computed property.
And as we have our loading state, we can change the button text, depending on if it is loading or not.

And on a click we call our loadMore() method, which we will create in a second.

⚡️ Updating the query

Now comes the fun part. We need to update our query and fetch more. Vue-apollo comes with a build-in method for that. In our loadMore() method we just need to call

this.$apollo.queries.allPalettes.fetchMore({
  variables: {
    skip: this.allPalettes.length
  }
})

So you remember what the skip argument is doing? Right, it is setting an offset. In our initial query we set skip: 0 and first to PALETTES_PER_PAGE which equals 10. So we are not skipping anything, and loading the first 10 palettes. Now we fetchMore and skip the first 10 palettes. Because this.allPalettes.length is now 10.

However this is not enough. We also have to update our query in the cache. Which is quite simple: We are checking if there are fetchMoreResults if not, we are returning the previousResults. Otherwise we append the new palette results to the old one with Object.assign() and the spread operator. If you have trouble following, it is always helpful to check out the structure of the apollo cache with the apollo chrome plugin

🎉 Final Result

And thats actually it! We implemented lazy loading of palettes in just a few lines of code. And here is the final result:

Shining Gif

I am building Colour Hunt in public and you can follow the progress on WIP. I am also live streaming the development from time to time.

Let’s Build a Web App with Vue, Chart.js and an API Part II

Jakub Juszczak — Sun, 30 Apr 2017 11:56:29 +0000

In case you missed the first part, you can find it here. First of all, wow! Thanks for all the feedback and twitter messages! ðŸ’ I never imagined to reach such a wide audience. But enough of that. Let's get to work ðŸ’ª.

âš¡ Quickstart

So, we are building npm-stats.org. A small web application build with Vue.js, vue-chartjs and the npm API, to grab the download statistics of packages and generate charts based on them.

What we have done so far

A small recap of what we have build in Part 1:

âœ… Create a vue.js application with vue-init
âœ… Install dependencies and setup the vue-router
âœ… Create a Line Chart component with vue-chartjs
âœ… Make an API call to npm and render the daily downloads statistics of the last-month

This is quite a lot. In the end we had our app running. However there is always space for improvement!

What we will do today:

âš™ Add settings to change the start and end period
ðŸ“† Integrate an external datepicker component
ðŸ“ˆ Mutate our data to add a yearly statistics chart
ðŸ”¨ Refactor our methods and DRY out a bit so we can easily add more charts

âš™ Settings

Right now our default period is set to last-month but it would be awesome if we could set the startPeriod and endPeriod. This way we could inspect the statistics for a whole year or more.

For this purpose we need to add two additional input fields and data models. But for a better user experience we will pull in an external datepicker component. We don't have to reinvent the wheel right? ðŸ‘¨”ðŸ”¬ And to format our date properly we will also pull in moment.js

ðŸ“† Install dependencies

yarn add vuejs-datepicker moment

Todos for our Start.vue:

Import the datepicker
Add two datepicker fields for the start and end period
Add two data models

// Start.vue

<template>

...

<datepicker placeholder="Start Date" v-model="periodStart" name="start-date"></datepicker>
<datepicker placeholder="Start Date" v-model="periodStart" name="start-date"></datepicker>

...

</template>

<script>
  import axios from 'axios'
  import Datepicker from 'vuejs-datepicker'
  import LineChart from '@/components/LineChart'

  export default {
    components: {
      LineChart,
      Datepicker
    },
    data () {
      return {
        package: null,
        packageName: '',
        loaded: false,
        downloads: [],
        labels: [],
        showError: false,
        errorMessage: 'Please enter a package name',
        periodStart: '',
        periodEnd: new Date()
      }
    },

    .....
}

</script>

We also removed our old period data model which was set to last-month. As the period will now be composed of periodStart and periodEnd. We also set the periodEnd to the current day. As most of the time you will only change the start date.

We need a format like this: 2017-04-18:2017-04-30. However if we now select a date we get something like this: 2017-04-17T22:00:00.000Z. A Date() with the time attributes, which we don't need. This is a nice job for moment.js.

Computing the period

For this case we have computed properties which are a pleasure to work with. To keep things a bit cleaner, we will create three properties. A formatted startDate, a formatted endDate and the composed period.

computed: {
  _endDate () {
    return moment(this.periodEnd).format('YYYY-MM-DD')
  },
  _startDate () {
    return moment(this.periodStart).format('YYYY-MM-DD')
  },
  period () {
    return this.periodStart ? `${this._startDate}:${this._endDate}` : 'last-month'
  }
},

As we want to persist the default behaviour of fetching data of the last month if no start date is set, we add our condition to the period property.

And thats it! We don't need to change our request, as we simply replaced the content of period which we are using in our request. You can check the code on github in this feature branch

ðŸ“ˆ More charts

Well, the chart with the daily statistics is great. But we can generate more! We have all data we need for that. We will not transform and group our data, so we can pass it to another line chart for yearly statistics. And we will refactor a bit our code.

All this data

So, our data we get from the npm api looks like this:

data: [
{day: "2017-04-18", downloads: 16280},
{day: "2017-04-19", downloads: 14280},
{day: "2017-04-20", downloads: 17280}
]

But to pass it to our chart we need two arrays, one which the labels (day) and one with the data (downloads). For the daily statistics, it was pretty easy. As we could simply use map() to get the data and labels. However now we need to do more.

Format our day key to a year.
For the labels, remove the duplicates so we have only the unique years
Sum all the downloads in the same year.

â˜ But first, it is a good time to refactor some bits of our code. We see that step 1 is to format our date to a year. And later if we want monthly statistics we need to format it to a month format and so on. So it is a good time to introduce a helper method and extract the logic from the Start.vue file.

So we create src/utils/dateFormatter.js which will help us to format our date.

  import moment from 'moment'

  export const dateToYear = date => moment(date).format('YYYY')
  export const dateToMonth = date => moment(date).format('MMM YYYY')
  export const dateToWeek = date => moment(date).format('GGGG-[W]WW')
  export const dateToDay = date => moment(date).format('YYYY-MM-DD')
  export const dateBeautify = date => moment(date).format('Do MMMM YYYY')

And in our Start.vue we can now remove the moment import and import our helper modules and replace the moment statements with them. (In our _startPeriod and _endPeriod. And we add a new computed property to which will replace the period in our chart container.

  import { dateToYear, dateToDay, dateBeautify } from '../utils/dateFormatter'

  computed: {
    _endDate () {
      return dateToDay(this.periodEnd)
    },
    _startDate () {
       return dateToDay(this.periodStart)
    },
    period () {
      return this.periodStart ? 
             `${this._startDate}:${this._endDate}` : 
             'last-month'
    },
    formattedPeriod () {
      return this.periodStart ? 
      `${dateBeautify(this._startDate)} - 
       ${dateBeautify(this._endDate)}` : 
      'last-month'
    }
  },

Time to transform

Now we create three new data models rawData which will hold our downloads data we get from the api call, downloadsYear: [] and labelsYear: []. And we create a new method called formatYear() .

In our axios request promise we then assign the data.downloads to rawData and call formatYear().

 axios.get(`https://api.npmjs.org/downloads/range/${this.period}/${this.package}`)
    .then(response => {
      this.rawData = response.data.downloads // ðŸ†•
      this.downloads = response.data.downloads.map(entry => entry.downloads)
      this.labels = response.data.downloads.map(entry => entry.day)
      this.packageName = response.data.package
      this.formatYear() // ðŸ†•
      this.setURL()
      this.loaded = true

    })

Now we will create two additional helper methods. Because we want different data transformations in the future. Like weekly stats and monthly. And to keep our component clean we extract those into a separate file.

So we create our src/utils/downloadFormatter.js which will contain two methods:

removeDuplicate (a, b) {..}
getDownloadsPerYear(data) {...}

In our Start.vue we import both modules and now we can use them in our formatYear() method.

formatYear () {
  this.labelsYear = this.rawData
    .map(entry => dateToYear(entry.day))
    .reduce(removeDuplicate, [])
  this.downloadsYear = getDownloadsPerYear(this.rawData)
},

Now thats a bit tricky now. Normally I write down my methods and clean then up later. However I hope you can follow me here.

First we need to get the years, right? So we use again map() to get the day key like we did in the request for our daily statistics. But now we format it with our dateToYear() helper. So now our data will look like this:

data: [
{day: "2017", downloads: 16280},
{day: "2017", downloads: 14280},
{day: "2017", downloads: 17280}
]

And now we will use reduce() to remove the duplicated years. Because our labels array will have only unique years. And as we may use this more then once, we extracted it into our downloadFormatter.js

In our downloadFormatter.js we now finish our removeDuplicate function.

 export function removeDuplicate (a, b) {
    if (a.indexOf(b) < 0) {
      a.push(b)
    }
    return a
  }

Now our this.labelYear array will contain only unique years. And it's time to group and transform our data. For this we will again use map() and reduce() and filter().

The rawData looks like this:

data: [
{day: "2017-04-18", downloads: 16280},
{day: "2017-04-19", downloads: 14280},
{day: "2017-04-20", downloads: 17280}
]

So first we need to find the unique dates again. Which we do with reduce() then we chain a map() to it and return an object with the date and the downloads which are in that date. Thats why we use filter() there and our dateToYear() helper.

However our data will look now like this:

But as we don't need the date now, we map it to only the downloads and then use reduce() to sum it up. Now our object will contain the sum of all downloads of the year. However it is nested and we still have the date key.

But a last map() will fix this.

 export const getDownloadsPerYear = (data) => {
    // Find unique dates
    return data.reduce((date, current) => {
      if (date.indexOf(dateToYear(current.day)) < 0) {
        date.push(dateToYear(current.day))
      }
      return date
    }, [])
      .map((date) => {
        return {
          date: date,
          downloads: data.filter(el => dateToYear(el.day) === date)
            .map(el => el.downloads)
            .reduce((total, download) => total + download)
        }
      })
      .map(element => element.downloads)
  }

Chart time

Now we have our transformation done and can copy the template for our first chart and pass in the downloadsYear props.

You can check the source up to this point at this feature branch

ðŸ”¨ Refactor and more charts

As we now finished our data transformer it is pretty easy to add new charts. Like weekly statistics and monthly. We could duplicate our getDownloadsPerYear() method and change our dateToYear() helper to dateToMonth(). But, this is not very DRY. Because we end up with multiple methods which are doing pretty much the same.

So let's refactor our specific getDownloadsPerYear() method to a more general one. The only thing, that would change it our dateFormatter helper. So we should make it an argument you can pass to our method.

Rename our method to something more general like groupData
Add a second argument which will be our helper function
???
Profit!

export const groupData = (data, dateFormatter) => {
  return data.reduce((date, current) => {
    if (date.indexOf(dateFormatter(current.day)) < 0) {
      date.push(dateFormatter(current.day))
    }
    return date
  }, [])
    .map((date) => {
      return {
        date: date,
        downloads: data.filter(el => dateFormatter(el.day) === date)
          .map(el => el.downloads)
          .reduce((total, download) => total + download)
      }
    })
    .map(element => element.downloads)
}

In our Start.vue we now need to pass our helper function.

this.downloadsYear = groupData(this.rawData, dateToYear)

Now we can do this for our monthly and weekly data too, with only swapping out the dateToYear

You can find the source up to this point in this feature branch with some additions like a loading indicator and a new fetch of the data if the datepicker value changed, which I did not covered here.

I hope you enjoyed it and learned something. Feel free to leave me feedback! âœŒ You can follow me on twitter and github

Let’s Build a Web App with Vue, Chart.js and an API

Jakub Juszczak — Wed, 19 Apr 2017 17:05:20 +0000

Data is beautiful. And with modern technologies it is crazy easy to visualize your data and create great experiences. In this quick how to, we cover how to interact with the npm ðŸ’˜ API to get download statistics of a package and generate a chart from this data with Chart.js

âš¡ Quickstart

We will build npm-stats.org and will be using following tools:

Vue.js with vue-router
Chart.js
vue-chartjs
vue-cli
axios

With Vue.js we will build the basic interface of the app and and routing with vue-router. And we scaffold our project with vue-cli which creates our basic project structure. For the chart generation we will be using Chart.js and as a wrapper for Vue, vue-chartjs. As we need to interact with an API, we’re using axios to make the http requests. However feel free to swap that one out with any other lib.

ðŸ”§ Install & Setup

At first we need to install vue-cli to scaffold our project. I hope you have a current version of node and npm already installed! ðŸ™ Even better if you have yarn installed! If not, you really should! If you don’t want, just swap out the yarn commands with the npm equivalents.

$ npm install -g vue-cli

Then we can scaffold our project with vue-cli. If you want to can enable the unit and e2e tests, however we will not cover them.ðŸ”¥ But you need to check vue-router!

$ vue init webpack npm-stats

Then we cd in our project folder and install the dependencies with cd npm-stats && yarn install. So our basic project dependencies are installed. Now we need to add the one for our app.

$ yarn add vue-chartjs chart.js axios

Just a quick check if everything is running with yarn run dev. Now we should see the boilerplate page of vue.

Aaaand we’re done! ðŸ‘

ðŸ’ª Time to build

Just a small disclaimer here, I will not focus on the styling. I guess you’re able to make the site look good by your own ðŸ’… so we only cover the javascript related code.
And another disclaimer, this is rather a small MVP then super clean code right now. I will refactor some of it in later stages. Like in the real world.

Components

Let’s think about what components we need. As we’re looking at the screenshot we see an input field for the package name you’re looking for and a button. Maybe a header and footer and the chart itself.

You totally could make the button and input field a component however as we don’t build a complex app, why bother? Make it simple. Make it work!

So I ended up with following components:

components/Footer.vue
components/Header.vue
components/LineChart.vue
pages/Start.vue

I will skip the Header and Footer as they only contain the logo and some links. Nothing special here. The LineChart and Start page are the important ones.

LineChart

The LineChart component will be our chart.js instance which renders the chart. We need to import the Line component and extend it. We create two props for now. One for the data which is the number of downloads and the labels which are for example the days, weeks, years.

props: {
 chartData: {
   type: Array,
   required: false
 },
 chartLabels: {
   type: Array,
   required: true
 }
},

As we want all our charts to look the same, we define some of the Chart.js styling options in a data model which get passed as options to the renderChart() method.

And as we will have only one dataset for now, we can just build up the dataset array and bind the labels and data.

<script>
  import { Line } from 'vue-chartjs'
  export default Line.extend({
    props: {
      chartData: {
        type: Array | Object,
        required: false
      },
      chartLabels: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [ {
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: false
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted () {
      this.renderChart({
        labels: this.chartLabels,
        datasets: [
          {
            label: 'downloads',
            borderColor: '#249EBF',
            pointBackgroundColor: 'white',
            borderWidth: 1,
            pointBorderColor: '#249EBF',
            backgroundColor: 'transparent',
            data: this.chartData
          }
        ]
      }, this.options)
    }
  })
</script>

ðŸ“º Our start page

As we have our LineChart component up and working. It’s time to build the rest. We need an input field and button to submit the package name. Then request the data and pass the data to our chart component.

So, let’s first think about what data we need and what states / data models. First of all we need a package data model, which we will use with v-model in our input field. We also want to display the name of the package as a headline. So packageName would be good. Then our two arrays for the requested data downloads and labels and as we’re requesting a time period we need to set the period. But, maybe the request goes wrong so we need errorMessage and showError. And last but not least loaded as we want to show the chart only after the request is made.

npm API

There are various endpoints to get the downloads of a package. One is for example

GET https://api.npmjs.org/downloads/point/{period}[/{package}]

However this one gets only a point value. So the total downloads. But to draw our cool chart, we need more data. So we need the range endpoint.

GET https://api.npmjs.org/downloads/range/{period}[/{package}]

The period can be defined as for example last-day or last-month or a specific date range 2017-01-01:2017-04-19 But to keep it simple we set the default value to last-month. Later in Part II we can then add some date input fields so the user can set a date range.

So our data models are looking like this:

data () {
 return {
  package: null,
  packageName: â€˜’,
  period: â€˜last-month’,
  loaded: false,
  downloads: [],
  labels: [],
  showError: false,
  errorMessage: â€˜Please enter a package name’
 }
},

ðŸ’… Template

Now it’s time to build up the template. We need 5 things:

Input field
Button to trigger the search
Error message output
Headline with the package name
Our chart.

<input
 class=”Search__input”
 @keyup.enter=”requestData”
 placeholder=”npm package name”
 type=”search” name=”search”
 v-model=”package”
 >
<button class=”Search__button” @click=”requestData”>Find</button>
<div class="error-message" v-if="showError">
  {{ errorMessage }}
</div>
<h1 class="title" v-if="loaded">{{ packageName }}</h1>
<line-chart v-if="loaded" :chart-data="downloads" :chart-labels="labels"></line-chart>

Just ignore the css classes for now. We have our Input Field which has an keyup event on enter. So if you press enter you trigger the requestData() method. And we bind v-model to package

For the potential error we have a condition, only if showError is true we show the message. There are two types or errors that can occur. The one is, someone try to search for a package without entering any name or he’s entering a name that does not exist.

For the first case, we have our default errorMessage, for the second case we will grab the error message that comes from the request.

So our full template will look like this:

<template>
  <div class="content">
    <div class="container">
      <div class="Search__container">
        <input
          class="Search__input"
          @keyup.enter="requestData"
          placeholder="npm package name"
          type="search" name="search"
          v-model="package"
        >
        <button class="Search__button" @click="requestData">Find</button>
      </div>
      <div class="error-message" v-if="showError">
       {{ errorMessage }}
      </div>
      <hr>
      <h1 class="title" v-if="loaded">{{ packageName }}</h1>
      <div class="Chart__container" v-if="loaded">
        <div class="Chart__title">
          Downloads per Day <span>{{ period }}</span>
          <hr>
        </div>
        <div class="Chart__content">
          <line-chart v-if="loaded" :chart-data="downloads" :chart-labels="labels"></line-chart>
        </div>
      </div>
    </div>
  </div>
</template>

ðŸ¤– Javascript

Now it’s time for the coding. First we will do our requestData() method. It is rather simple. We need to make a request to our endpoint and then map the data that comes in. In our response.data we have some information about the package:

Like the start data, end date, the package name and then the downloads array. However the structure for the downloads array is something like this:

downloads: [
 {day: â€˜2017–03–20’, downloads: â€˜3’},
 {day: â€˜2017–03–21’, downloads: â€˜2’},
 {day: â€˜2017–03–22’, downloads: â€˜10’},
]

But we need to separate the downloads and days, because for chart.js we need one array only with the data (downloads) and one array with the labels (day). This is an easy job for map.

requestData () {
 axios.get(`https://api.npmjs.org/downloads/range/${this.period}/${this.package}`)
 .then(response => {
   this.downloads = response.data.downloads.map(download => download.downloads)
   this.labels = response.data.downloads.map(download => download.day)
   this.packageName = response.data.package
   this.loaded = true
 })
 .catch(err => {
   this.errorMessage = err.response.data.error
   this.showError = true
 })
}

Now if we enter a package name, like vue and hit enter, the request is made, the data mapped and the chart rendered! But, wait. You don’t see anything. Because we need to tell vue-router to set the index to our start page.

Under router/index.js we import or page and tell the router to use it

import Vue from â€˜vue’
import Router from â€˜vue-router’
import StartPage from â€˜@/pages/Start’
Vue.use(Router)
export default new Router({
 routes: [
   {
     path: â€˜/’,
     name: â€˜Start’,
     component: StartPage
   },
 ]
})

ðŸ’Ž Polish

But, we are not done yet. We have some issues, right? First our app breaks if we don’t enter any name. And we have problems if you enter a new package and hit enter. And after an error the message does not disappear.

Well, it’s time to clean up a bit. First let’s create a new method to reset our state.

resetState () {
 this.loaded = false
 this.showError = false
},

Which we call in our requestData() method before the axios api call. And we need a check for the package name.

if (this.package === null 
    || this.package === â€˜’ 
    || this.package === â€˜undefined’) {
  this.showError = true
  return
}

Now if we try to search an empty package name, we get or default errorMessage.

I know, we covered a lot, but let’s add another small cool feature. We have vue-router, but not really using it. At our root / we see the starting page with the input field. And after a search we stay at our root page. But it would be cool if we could share our link with the stats, wouldn’t it be?

So after a valid search, we add the package name to our url.

npm-stats.org/#/vue-chartjs

And if we click on that link, we need to grab the package name and use it to request our data.
Let’s create a new method to set our url

setURL () {
 history.pushState({ info: `npm-stats ${this.package}`}, this.package, `/#/${this.package}`)
 }

We need to call this.setURL() in our response promise. Now after the request is made, we add the package name to our URL. But, if we open a new browser tab and call it, nothing happens. Because we need to tell vue-router that everything after our / will also point to the start page and define the string as a query param. Which is super easy.

In our router/index.js we just need to set another path in the routes array. We call the param package.

{
  path: â€˜/:package’,
  component: StartPage
}

Now if you go to localhost:8080/#/react-vr you will get the start page. But without a chart. Because we need to grab the param and do our request with it.

Back in our Start.vue we grab the param in the mounted hook.

mounted () {
 if (this.$route.params.package) {
   this.package = this.$route.params.package
   this.requestData()
 }
},

And thats it! Complete file:

 import axios from 'axios'
  import LineChart from '@/components/LineChart'
  export default {
    components: {
      LineChart
    },
    props: {},
    data () {
      return {
        package: null,
        packageName: '',
        period: 'last-month',
        loaded: false,
        downloads: [],
        labels: [],
        showError: false,
        errorMessage: 'Please enter a package name'
      }
    },
    mounted () {
      if (this.$route.params.package) {
        this.package = this.$route.params.package
        this.requestData()
      }
    },
    methods: {
      resetState () {
        this.loaded = false
        this.showError = false
      },
      requestData () {
        if (this.package === null || this.package === '' || this.package === 'undefined') {
          this.showError = true
          return
        }
        this.resetState()
        axios.get(`https://api.npmjs.org/downloads/range/${this.period}/${this.package}`)
          .then(response => {
            console.log(response.data)
            this.downloads = response.data.downloads.map(download => download.downloads)
            this.labels = response.data.downloads.map(download => download.day)
            this.packageName = response.data.package
            this.setURL()
            this.loaded = true
          })
          .catch(err => {
            this.errorMessage = err.response.data.error
            this.showError = true
          })
      },
      setURL () {
        history.pushState({ info: `npm-stats ${this.package}` }, this.package, `/#/${this.package}`)
      }
    }
  }

You can check out the full source at GitHub and view the demo page at ðŸ“º npm-stats.org

Improvements

But hey, there is still room for improvements. We could add more charts. Like monthly statistics, yearly statistics and add date fields to set the period and many more things. I will cover some of them in Part II ! So stay tuned!

📦 How to publish your package on npm

Jakub Juszczak — Sat, 08 Apr 2017 14:42:09 +0000

Creating stunning charts with Vue.js and Chart.js

Jakub Juszczak — Thu, 02 Mar 2017 10:18:01 +0000

Dive into the options of chart.js to create stunning charts.

Interactive charts can provide a cool way to visualize your data.
However most out of the box solutions are not as beautiful as they could be, with default options.

I will show you how to customize your chart.js options to make some cool charts!

âš¡ Quick Start

What we will use:

We use vue-cli to create a basic structure. So I hope you got it installed already. And we use vue-chartjs as a wrapper for chart.js.

vue init webpack awesome-charts

Then we go into our project folder and install our dependencies.

cd awesome-charts && yarn install

And we add vue-chartjs :

yarn add vue-chartjs -S

Our first chart

So, let's create our first line chart.

touch src/components/LineChart.js && subl .

Now we need to import the Line BaseChart from vue-chartjs and create our component.

In the mount() function we need to call the renderChart() method with our data and options.

import {Line} from 'vue-chartjs'

export default Line.extend({
  mounted () {

    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#FC2525',
          data: [40, 39, 10, 40, 39, 80, 40]
        },{
          label: 'Data Two',
          backgroundColor: '#05CBE1',
          data: [60, 55, 32, 10, 2, 12, 53]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
})

We pass in a basic chart.js data object with some sample data and in the option parameter, we pass responsive: true. So the chart will grow based on our outer container.

â˜ We can call the method renderChart() because we extended the BaseChart, were this method and some props are defined.

Mount & Test it

Now we delete the Hello.vue component from our App.vue and import our chart.

<template>
  <div id="app">
    <div class="container">
      <div class="Chart__list">
        <div class="Chart">
          <h2>Linechart</h2>
          <line-example></line-example>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineExample from './components/LineChart.js'
export default {
  name: 'app',
  components: {
    LineExample
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container {
  max-width: 800px;
  margin:  0 auto;
}
</style>

And after we run the dev script in our terminal, we should see our chart.

yarn run dev

ðŸ’„ Make me beautiful

Okay, now it is time for some beautification ðŸ’…. There are a few cool tricks in chart.js. We can pass a color hex value to backgroundColor; But we can also pass a rgba() value. So we can make our color transparent.
And as chart.js is using html canvas to draw, we can utilize createLinearGradient().

This is where the fun starts. ðŸŽ¢ But to use it we need the canvas object. But this is not a big deal, as vue-chartjs holds a reference to it. We can access it over this.$refs.canvas

So in our LineChart.js we create two variables to store a gradient. Because we have to datasets.

Then we create two gradients:

this.gradient = this.$refs.canvas
 .getContext('2d')
 .createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas
 .getContext('2d')
 .createLinearGradient(0, 0, 0, 450)

There is another cool function we can use: addColorStop()

We create three colorStops for each gradient. For 0%, 50% and 100%.

this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');

this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');
this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');

Now we can pass this.gradient to backgroundColor. And we have a very nice gradient. To get a nicer effect we also set the borderColor to the individual color with an alpha of 1. (or we use the hex value) And set the borderWidth to 1 and last but not least the pointColor.

borderColor: '#FC2525', 
pointBackgroundColor: 'white', 
borderWidth: 1, 
pointBorderColor: 'white',

import {Line} from 'vue-chartjs'

export default Line.extend({
  data () {
    return {
      gradient: null,
      gradient2: null
    }
  },
  mounted () {
    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradient2 = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)

    this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
    this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
    this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');

    this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
    this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');
    this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');


    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          borderColor: '#FC2525',
          pointBackgroundColor: 'white',
          borderWidth: 1,
          pointBorderColor: 'white',
          backgroundColor: this.gradient,
          data: [40, 39, 10, 40, 39, 80, 40]
        },{
          label: 'Data Two',
          borderColor: '#05CBE1',
          pointBackgroundColor: 'white',
          pointBorderColor: 'white',
          borderWidth: 1,
          backgroundColor: this.gradient2,
          data: [60, 55, 32, 10, 2, 12, 53]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
})

Presentation

Last step is to add some styling to the container in our App.vue

.Chart {
  background: #212733;
  border-radius: 15px;
  box-shadow: 0px 2px 15px rgba(25, 25, 25, 0.27);
  margin:  25px 0;
}

.Chart h2 {
  margin-top: 0;
  padding: 15px 0;
  color:  rgba(255, 0,0, 0.5);
  border-bottom: 1px solid #323d54;
}

Forem: Jakub Juszczak

End-to-end encryption in the browser Part 1

From one end to the other

Web Crypto API

Symmetric Encryption

AES-GCM

PBKDF2

How to build a load more button with Vue.js and GraphQL

💪 Preparation

📝 Pagination

⚡️ Updating the query

🎉 Final Result

Let’s Build a Web App with Vue, Chart.js and an API Part II

âš¡ Quickstart

What we have done so far

What we will do today:

âš™ Settings

Computing the period

ðŸ“ˆ More charts

All this data

Time to transform

Chart time

ðŸ”¨ Refactor and more charts

Let’s Build a Web App with Vue, Chart.js and an API

âš¡ Quickstart

ðŸ”§ Install & Setup

ðŸ’ª Time to build

Components

LineChart

ðŸ“º Our start page

npm API

ðŸ’… Template

ðŸ¤– Javascript

ðŸ’Ž Polish

Improvements

📦 How to publish your package on npm

Creating stunning charts with Vue.js and Chart.js

âš¡ Quick Start

Our first chart

Mount & Test it

ðŸ’„ Make me beautiful

Presentation

ðŸ‘ Final Result

ðŸ‘ Final Result