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

Image for post
Image for post
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

  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…


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

Image for post
Image for post
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.

Image for post
Image for post
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


The first days of me contributing to Open Source.

Image for post
Image for post
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 are TypedArrays, and why do we have them?

Image for post
Image for post
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.

TypedArrays

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


Unleash the full power of JavaScript.

Image for post
Image for post
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.

Image for post
Image for post
Photo by Daniel Cañibano on Unsplash

The Rest Parameter

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

Rest Parameter vs. Arguments

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


What are Mixins and how to use them?

Image for post
Image for post
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

Apply Mixins to Classes


About functions, their environments, and reusability in JavaScript.

Image for post
Image for post
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

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.

Double bracket syntax in JavaScript

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

Return named functions

Especially testing libraries…


I used to be a developer like you, then I took an arrow-function in the knee.

Image for post
Image for post
Photo by Zoltan Tasi on Unsplash

Arrow-Functions are a great addition to the existing anonymous and named functions.

In this article, I will give a short overview of the syntax of Arrow-Functions and the most important differences between Arrow-Functions and regular ones.

Syntax of Arrow-Functions explained

It can be a confusing syntax at first. The main reason for this is that the example above represents a shorthand syntax. So let us take a look at some rules regarding Arrow-Functions.

The default Arrow-Function might be easier to understand because everything that is different from an anonymous function is that we…

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