I always wanted to try out Vue. Now is the time!

Photo by Danka & Peter on Unsplash

I will try to create seven apps in 100 days using Vue.JS and write about it on Medium and Twitter. I dare you to take on the #100daysofcode challenge with me.

The challenge

Since I am already proficient with JavaScript and TypeScript, I will be using a TypeScript setup to build all of them. Furthermore, I will publish the codebases on GitHub.

  1. A simple todo app
  2. Voice recording app, to take notes
  3. A budgeting app to track spendings
  4. A running app
  5. A chess game
  6. A reverse recipe search — enter ingredients…

Implementing login with google for your AWS Amplify application

Photo by Rodion Kutsaev on Unsplash

Adding the “Login with Google” functionality to your application can be a sophisticated task. It requires you to have a basic understanding of the OAuth2.0 process.

AWS Amplify comes with a set of tools that abstracts most of the weird parts. I have created a simple step-by-step guide on how to implement AWS Amplify Auth (AWS Cognito) with further explanations about the OAuth2.0 process for your convenience.

Step 1: Create a Google API Project

We have to create a Google API Project to get a Client ID and Client Secret so that AWS Cognito can connect to the…

Migrating from API Gateway to API Gateway V2 using Typescript and the AWS CDK.

Photo by Jason Leung on Unsplash

Some months ago, it was not that easy to use ApiGatewayV2 in your CDK projects since it was in beta and not really ready to use. Parts of the V2 are still experimental — but you can use the most important bits now. See my post on Stackoverflow for a quick way of converting ApiGateway to ApiGatewayV2. I have also made a video on YouTube for migrating from V1 to V2 (links to SO and YouTube below).

Using the new API Gateway V2 is a 3-steps-process:

Day 1 of the #100daysOfCode challenge: Writing a simple todo app.

Photo by Anete Lūsiņa on Unsplash

Todo apps can be really boring. This is the “Hello World” of apps, after all. And who am I to break with tradition? But I still want to spice things up a little.

I will use the CAB learning strategy, which I explained in the last article. In short: I build on things I already know to expand my knowledge instead of just learning something new.

The Goals

Considering the small size of the app that I will be writing, these goals are the low-hanging fruits. The easy-to-achieve objectives. …

The first days of me contributing to Open Source.

Photo by Smartworks Coworking on Unsplash

I don’t have time for it. I have so much on my hands right now. I am not ready for it. I still have to learn to do it. I don’t understand any of it.

Those were some excuses I have made in the past to not contribute to Open Source. I still did not feel ready this year, but I finally found the courage to participate in Hacktoberfest 2020, and I wouldn’t want to miss it!

The projects

What I really liked about Hacktoberfest is the diversity of projects that you will…

What are TypedArrays, and why do we have them?

Photo by Serg Antonov on Unsplash

As opposed to Arrays, TypedArrays are just array-like constructs. They do not have many of the Array functions like push or pop. Their main use-case is working with raw binary data.


There are 11 different kinds of TypedArrays [1].

Int8Array             1 Byte
Uint8Array 1 Byte
Uint8ClampedArray 1 Byte
Int16Array 2 Byte
Uint16Array 2 Byte
Int32Array 4 Byte
Uint32Array 4 Byte
Float32Array 4 Byte
Float64Array 8 Byte
BigInt64Array 8 Byte
BigUint64Array 8 Byte

There is no general TypedArray constructor. TypedArrays are only accessible through the constructors mentioned above.

A simple example

If you do not…

Unleash the full power of JavaScript.

Photo by Donald Giannatti on Unsplash

Knowing about Arrays and their unique functions is crucial in JavaScript. It is especially important to learn how to handle immutability since it is an essential part of modern libraries. I will cover the following techniques and functions in this article:

  • Create an Array using the constructor, from, and of.
  • Add elements to an Array using push, concat, and the spread operator.
  • Get the length of an Array using length.
  • Get an element of an Array using pop and shift.
  • Find elements in an Array using find and indexOf.
  • Remove elements from an Array…

Two different concepts with the same syntax.

Photo by Daniel Cañibano on Unsplash

The Rest Parameter

A Rest Parameter is used as the last argument of a function declaration. It is enabling the user to specify any number of parameters.

A function can also have common parameters as long as the Rest Parameter is the last one.

Arguments is an Array-like Object; we cannot directly apply Array-functions to it. We have to make use of the Spread Operator to unfold the Arguments Object in an Array first. For instance: In the last example, we could apply the join method directly to our abilities parameter.

The Spread Operator

While syntactically…

What are Mixins and how to use them?

Photo by Lisheng Chang on Unsplash

Mixins are a way to extend an Object without using inheritance. Some of the features that I am going to show will require ES6 or even ESNext features (for instance: classes and decorators). To use them, you might need Typescript or another transpiler, like Babel.

Apply Mixins to Objects

Applying a Mixin is not object inheritance. In JavaScript, a Mixin means practically copying properties to an Objects prototype.

Apply Mixins to Classes

Classes are just syntactic sugar in JavaScript; hence everything I have just shown is equally working with Classes. …

About functions, their environments, and reusability in JavaScript.

Photo by Stephanie Harvey on Unsplash

The concepts of Closures, Partials, and Currying are similar. They are not exclusive to JavaScript. I will outline the three ideas in this article.


Closures are functions that remember the environment in which they have been created.

In the above example, we define sumWith10 by another function. We preset a parameter, and what we get is another function (that is returned by sum). The newly created sumWith10 remembers its context.

The above function can also be called with double brackets; you might have already seen this syntax.

Especially testing libraries…

Enrico Gruner

Web developer since 1999

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