DEV Community: Benjamin Mock

VS Code Extensions to become a more productive Developer 🤓🤓🤓

Benjamin Mock — Mon, 12 Oct 2020 09:08:55 +0000

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/

These are some of the VS Code Extension that I'm using on a regular basis to make me a more productive developer. This is not a complete list, but these are some of my favorite extensions.

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colors, which comes super handy in almost every use case.
A lot of you might new the Bracket Pair Colorizer extension already because it's an essential extension of VS Code. But version two of the extension is even faster and more performant.

Import Cost

This extension will display the size of the imported package inline in your editor. Of course, you can also do that yourself using bundlephobia but using the Import Cost extension just saves you some time with every package.

Toggle Quotes

The Toggle Quotes extension comes in quite handy if you have to switch from one type of quotes to another. Let's say you start to delimit your string with double quotes (in JS), but then realize that your string actually contains a double quote. With just hitting cmd ' or ctrl ' on win/linux you can easily change the wrapping quotes of your string. It's of course also super handy to switch from double quotes to a JavaScript string literal.

Peacock

Are you working with multiple VS Code workspaces and multiple projects?
Peacock lets you change the color of your VS Code workspace. It's ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor and distinguish between multiple projects.

Polacode

If you want to create beautiful "screenshots" of your code, to share it for example on Twitter, this is the extension to use. Polacode let's you select the code, resize the resulting snippet and create a perfectly shareable screenshot of your code using your VS Code theme and font.

Better Comments

Better Comments is a cool extension to give different types of comments different colors. It helps you e.g. to easily differentiate between TODOs and "real" comments.

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that for example take the maximum line length into account and wrapping code when necessary. The times where you have to indent code, add trailing commas or discuss code style with your colleagues is over. Let prettier format your code automatically. Of course, you can also use your own rules for indentation, quotes, etc.

Indent Rainbow

Indent Rainbow colorizes the indentation in front of your text alternating four different colors on each step. It might be a bit too much if you're Bracket Pair Colorizer in combination, but if you're e.g. using Python where your indentation indicates a block of code, it can be very useful.

What about you?

What are your favorite VS Code extensions to make you a more productive developer? Please share them in the comments!

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

JS 🔥: Conditionally setting an object property

Benjamin Mock — Wed, 30 Sep 2020 16:36:14 +0000

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/

Let's assume we only want to add an object property if some condition is true. We can do this using an if-statement of course:

const someCondition = true;
const anotherCondition = false;
const myObject = {
  name: "codesnacks",
};

if(someCondition){
  myObject.author = "Ben";
}

if(anotherCondition){
  myObject.platform = "dev.to";
}

console.log(myObject); // {name: "codesnacks", author: "Ben"}

We can achieve the same using the object spread operator ( ...) in combination with the condition when creating the object. No additional if-statement is needed. This is especially elegant if an object has multiple conditional properties.

const someCondition = true;
const anotherCondition = false;
const myObject = {
  name: "codesnacks",
  ...(someCondition && { author: "Ben" }),
  ...(anotherCondition && { platform: "dev.to" }),
};

console.log(myObject); // {name: "codesnacks", author: "Ben"}

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

⚡ object destructuring in JS: renaming properties⚡

Benjamin Mock — Tue, 29 Sep 2020 12:11:44 +0000

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/

In the last part of this series, we learned how to destructure objects and access object properties. This time we will see, how to rename properties. Let's do a small recap:

const pastry = {
  name: "waffle",
  sweetness: 80,
  ingredients: ["flour", "butter", "eggs"],
  origin: {
    country: "Greece",
    name: "obelios",
    year: 1200,
  }
};

we can access properties via the dot notation

const name = pastry.name;
console.log(name); // "waffle"

or via destructuring

const { name } = pastry;
console.log(name); // "waffle"

But if we want to choose a name for our variable, we seem to be a bit limited with destructuring. For the dot notation it's easy:

const pastryName = pastry.name;
console.log(pastryName); // waffle

But also while restructuring objects it's possible to freely name the variables via a colon.

const { name: pastryName } = pastry;
console.log(pastryName); // waffle

As you can see there are two name properties: one in the top-level (waffle) and one in the nested origin object (obelios). When we want to destructure both of them, we have to rename at least one of them. Let's do this with the one in the nested origin object.

const { name, origin: { name: originName } } = pastry;
console.log(name); // waffle
console.log(originName); // obelios

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

⚡⚡ a short guide to object destructuring in JS ⚡

Benjamin Mock — Mon, 28 Sep 2020 23:01:00 +0000

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/

Destructuring in JS is used to access object properties in an elegant way.

Let's have a look at a JS object:

const pastry = {
  name: "waffle",
  sweetness: 80,
  ingredients: ["flour", "butter", "eggs"],
  origin: {
    country: "Greece",
    name: "obelios",
    year: 1200,
  }
};

To access its properties we could use the dot notation:

const name = pastry.name;
const sweetness = pastry.sweetness;
const country = pastry.origin.country;

Or with less code, we could use destructuring by specifying the properties, that we want to get.

So instead of

const name = pastry.name;

we can also use

const { name } = pastry;

which looks for the property name inside of the pastry object. It's basically the same as accessing it via pastry.name.

The cool thing is, that you can access multiple properties at once. Let's use the example from above where we accessed name and sweetness.

const { name, sweetness } = pastry;
console.log(name);
console.log(sweetness);

destructuring nested objects

Let's have a look at how to destructure e.g. the country from the origin property.

// const country = pastry.origin.country;
// or

const { origin: { country } } = pastry;
console.log(country); // Greece

You can of course also combine accessing nested and non-nested properties:

const { name, sweetness, origin: { country } } = pastry;
console.log(name);
console.log(sweetness);
console.log(country);

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

🧱🧱🧱 object destructuring in JS: setting default values

Benjamin Mock — Sun, 27 Sep 2020 23:15:26 +0000

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/

Learn how to set default values when destructuring objects in JavaScript.

Let's briefly see again how destructuring works:

const pastry = {
  name: "waffle"
};

const { name } = pastry;
console.log(name); // waffle

Let's see what happens when we try to access a property of the pastry object that doesn't exist:

const pastry = {
  name: "waffle"
};

const { sweetness } = pastry;
console.log(sweetness); // undefined

The destructuring mechanism lets us set a default value in the case when the property is undefined.

const { sweetness = 70 } = pastry;
console.log(sweetness); // 70

The default is only set if the property is actually undefined. So it will not set the default for other nullish values like false, null, or 0.

You can even combine defaults and renaming. Let's briefly see how renaming works.

const pastry = {
  name: "waffle",
  tastiness: 100,
};

// let's get the value of tastiness and store it in deliciousness
const { tastiness: deliciousness } = pastry;
console.log(deliciousness); // 100

// and now let's combine renaming and defaults

// tastiness is set, so no default will be used
const { tastiness: palatability = 75 } = pastry;
console.log(palatability); // 100

// sweetness is undefined; the default will be used
const { sweetnewss: sweet = 50 } = pastry;
console.log(sweet); // 50

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

🤔 How to create a MySQL connection and run queries with Python3

Benjamin Mock — Wed, 29 Jan 2020 22:25:25 +0000

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/

We will use pymysql to connect to MySQL in Python3. First, you have to install the module using pip or pip3:

pip install -U pymysql
pip3 install -U pymysql

Then you can use this code to connect to your database and do a simple query:

import pymysql

conn = pymysql.connect(host='127.0.0.1', unix_socket='/tmp/mysql.sock',
                       user='root', passwd="your_pw", db='your_db')
cur = conn.cursor()
cur.execute("SELECT * FROM your_table")
for r in cur:
    print(r)  # print whole row
    print(r[0])  # print first column of result

print(cur.description)  # gives a description of the table including all columns

cur.close()
conn.close()

If you don't want to access columns by index, but by name, you need to pass cursorclass=pymysql.cursors.DictCursor to the connection.

import pymysql

# add cursorclass to access columns by name
conn = pymysql.connect(host='127.0.0.1', unix_socket='/tmp/mysql.sock', user='root',
                       passwd="your_pw", db='your_db', cursorclass=pymysql.cursors.DictCursor)
cur = conn.cursor()
cur.execute("SELECT * from your_table")
for r in cur:
    print(r["id"]) # now you can access columns by name (assuming you have an id column)
print(cur.description)
cur.close()
conn.close()

JS - 💡 Merging multiple objects into one

Benjamin Mock — Sun, 26 Jan 2020 12:45:22 +0000

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at https://codesnacks.net/subscribe/

Let's say you have multiple objects that you want to merge. How can we accomplish this? Without using any libraries there are two ways to do this in JavaScript:

Object.assign
... - the object spread operator

Now let's see Object.assign in action:

const a = { x: "x", y: "y" }
const b = { z: "z" }

// create a new object and assign a & b
const c = Object.assign({}, a, b)
console.log(c) // {x: "x", y: "y", z: "z"}

The same works also with the object spread operator:

const a = { x: "x", y: "y" }
const b = { z: "z" }

// create a new object and spread a & b
const c = { ...a, ...b }
console.log(c) // {x: "x", y: "y", z: "z"}

Cool, so we can now merge multiple objects into one. You can of course also merge more than two.

But what happens when there are properties, that are named the same in both objects?

Let's see:

const a = { x: "x", y: "y", who: "I'm a" }
const b = { z: "z", who: "I'm b" }

const c = { ...a, ...b }
console.log(c) // {x: "x", y: "y", z: "z", who: "I'm b"}

So if two objects contain properties that are named the same, like the who property, the object that is used last will overwrite the properties of the former object. In our case who of a will be overwritten by who of b.

That because first, all the properties and values of a are put into the new object. Then the properties and values of b are put into the object, overwriting properties, that are already there.

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

🤫How to handle 🗝️ secrets 🗝️ in Node.js (Video Tutorial)

Benjamin Mock — Thu, 23 Jan 2020 23:13:18 +0000

Please drop me a line in the comments if you're interested in more video tutorials like this one!

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

💡 How to dynamically create and access properties on JavaScript objects

Benjamin Mock — Wed, 22 Jan 2020 22:15:42 +0000

Today we'll learn how to dynamically create and access properties on JS objects.

There are two ways to set and access properties on objects:

the do notation
the bracket notation

Let's see these in action:

// create an empty object
const pastry = {}

// set a name property on the object using the dot notation
pastry.name = "waffle"

// set a deliciousness property on the object using the bracket notation
pastry["deliciousness"] = 11

// you can also use both notations to access properties again
console.log(pastry.deliciousness) // 11
console.log(pastry["name"]) // waffle

But how would we dynamically set and read these properties? Let's say we would have the name of the property in a variable?

An example could be a get or a set method in which you can pass an object and a property. The set would of course also take a value.

Let's see these functions:

function get(obj, prop) {
  // return prop on obj
}

function set(obj, prop, value) {
  // set value for prop on obj
}

// create an empty object
const pastry = {};

// use set
set(pastry, "name", "waffle")

// use get
console.log(get(pastry, "name")

So how would it work? We can use the bracket notation to dynamically set and get properties.

function get(obj, prop) {
  // return prop on obj
  return obj[prop]
}

function set(obj, prop, value) {
  // set value for prop on obj
  obj[prop] = value
}

// create an empty object
const pastry = {};

// use set
set(pastry, "name", "waffle")

// use get
console.log(get(pastry, "name")) // waffle

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

💡 How to check if a variable is undefined in JS

Benjamin Mock — Wed, 22 Jan 2020 11:18:58 +0000

How do I check if a variable is undefined in JavaScript?

tldr

typeof xyz === "undefined"
// ==> true

You might be tempted to check a variable with something like

if(!xyz) {
    // this will NOT WORK! It crashes because xyz is not defined
    console.log("not defined");
}

Doing so will lead to an error like the following:

Uncaught ReferenceError: xyz is not defined

So the solution is, as already mentioned to use the typeof operator

💡 IIFE - Immediately Invoked Function Expressions in JavaScript

Benjamin Mock — Tue, 21 Jan 2020 22:59:45 +0000

You might have heard of IIFEs or you might already have seen some syntax like this:

(function() {
  // do some stuff
})()

or as an arrow function like this

(() => {
  // do some stuff
})()

These are immediately invoked function expressions. But what are they good for?

They're basically used to encapsulate code. Variables that are declared within an IIFE are isolated and neither the function itself nor the variables inside of it will pollute the global object, even if you use var which has function scope.

Let's have a closer look at the syntax.

// we basically create a function with brackets, which makes it an expression and call it immediately
(/* some function */)()

All the variable declarations are completely encapsulated. There's no way to access a variable from the outside. The following snippet will log the variable x, but x is not accessible from outside the IIFE.

(() => {
  const x = "dev"
  console.log(x)
})()

console.log(x) // undefined

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

🚀 Get better at web development: CodeSnacks 🍫🍪🍩 Tutorial Tuesday Newsletter + one sweet JS hack!

Benjamin Mock — Sun, 19 Jan 2020 23:02:52 +0000

tldr: 🚀🚀🚀subscribe to my web development newsletter and let's grow our skills as developers together!

13 is my lucky number. And this is my 13th article in my codesnacks series. So I hope I'm lucky and you forgive me for some self-promotion.

I write a couple of tutorials each week - mostly about JavaScript but also about web development in general.

Currently, it's mostly vanilla JS content but it will also be about React, Vue, Node.js, Svelte, or other topics. Primarily I write snackable content.

I try to communicate one specific idea or one trick I learned in less than 5 minutes, hence the name codesnacks.

If you'd like to receive a small newsletter every week with my tutorials and other stuff I liked, then please subscribe to my Tutorial Tuesday newsletter.

It will contain stuff like this:

💡 Dealing with command line arguments in Node.js
Learn how to read command-line arguments in Node.js.

Coercion in JavaScript - 🤔 do you know what it is?
Learn about coercion - implicit and explicit. Which methods use coercion and what the implications are.

const 📦, seal 🤐, freeze ❄️ & immutability 🤓 in JS
Learn about the Object.seal and Object.freeze method, their limitations and what distinguishes them from immutability

As a small thank-you I'd like to share one little hack with you to access the last element of an array:

So instead of doing it like this

const arr = [1, 2, 3]
const lastElement = arr[arr.length - 1]

You can also use slice and pop.

const arr = [1, 2, 3]
const lastElement = arr.slice(-1).pop()

You might ask why you want to use this syntax. Well, you don't need to save your array to a variable this way.

Let's say we want to get the last link of a webpage. You could do it like this, without saving the list of links into an additional array:

Array.from(document.querySelectorAll("a")).slice(-1).pop()

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter