Make VS Code better by editing and updating some settings

Jacob Cofman — Fri, 18 Mar 2022 21:53:24 +0000

This article describes five tips on how to make
VS Code development experience a bit better (at least for my kind
of use cases -> Frontend Development) by enabling and editing some settings which are not set by default. You can go to your
settings and enable each one of these by either opening it up via the command palette

CMD + ⌘ + P
Type in settings
- 3. Select Open Workspace Settings (JSON)

or with the shortcut (CMD + ,) and click on the icon Open Settings (JSON) on the upper right corner.

Here are the five 🔥 things I add to improve my development environment.

1. Enable bracket colorization

Using bracket colorization makes it easier to see where code blocks start and end.

// settings.json

// 1. enables vscode native bracket colorization
 "editor.bracketPairColorization.enabled": true

2. Enable bracket pair guides

Besides using bracket colorization, I love to add bracket pair guides.

// settings.json

// 2. enables vscode pair guides
"editor.guides.bracketPairs": true,

3. Highlight modified Tab

I like to make it more clear which file I work on.

// settings.json

// 3. highlight active tab
"workbench.editor.highlightModifiedTabs": true,

4. Using Font Ligatures

It makes it easier to distinguish comparisons between code lines.

// settings.json

// use a font with font ligatures
"editor.fontFamily": "Jetbrains Mono, Menlo, Monaco, 'Courier New', monospace",
// 4. enable font ligature
"editor.fontLigatures": true,

5. Enabling Inlay hints

It can help you see what properties need to get passed into functions. without having to hover over the function call.

// settings.json

// 5. enable parameter hints
"typescript.inlayHints.parameterNames.enabled": "all",

Datastructure Stacks in JS

Jacob Cofman — Sun, 06 Jun 2021 11:07:28 +0000

TLDR;

A stack in terms of computer science is a data structure to store a collection of elements
There are two core functionalities for stacks
- You can ➕ add an element on top 🔝
- And also ➖ remove an element pop from the top (the most recently added element)

What is a Stack

In real-life situations, stacks can be found everywhere. In your kitchen where your plates are stacked on top of each other, you can see a perfectly working stack. If you have a clean plate you put it on top of the stack and if you want to get a fresh one you typically just take them from the top of the stack. There are literally thousands of memes about stacks.

Stacks in JavaScript

In JavaScript, stacks can be used to implement do and undo functionality.

The JavaScript language itself uses a call stack to figure out which function to call next. There is an awesome talk about how this works by Phillip Roberts and you can find a detailed explanation on MDN

You can implement a stack using an array. The following example shows an implementation using functions with a function
constructor.

/**
 * Represents a stack.
 * @constructor
 * @param {array} items - the array to store elements in the stack
 */
const Stack = (items = []) => {
  let _storage = items;
  /**
   * Returns and removes the top element of the stack.
   * @return {*} the most recently added element of the stack
   */
  const pop = () => {
    return _storage.pop();
  };

  /**
   * Adds a new element at then end (on top) of the stack.
   * @param {*} element which should be put on top of the stack
   */
  const push = (element) => {
    _storage.push(element);
  };

  /**
   * Returns the current size (length) of the stack
   * @return {number} current size of the stack
   */
  const size = () => {
    return _storage.length;
  };

  /**
   * Returns the value at the end of the stack without removing it
   * @return {*} the last and newest value in the stack
   */
  const peek = () => {
    return _storage[size() - 1];
  };

  /*
   * @return {*} wheter no values are stored in stack
   */
  const isEmpty = () => {
    return _storage.length === 0;
  };

  /**
   * Empties the stack
   */
  const reset = () => {
    _storage = [];
  };

  return {
    pop,
    push,
    peek,
    size,
    reset,
    isEmpty,
  };
};

On Visaulgo you can also find awesome visual representations of a stack.

They used a list to implement the Stack instead of an array.

Real-world usage and Problems

Some real-world use cases and questions where you can make use of a stack data structure.

Try it yourself maybe you can also find problems on https://adventofcode.com/ where you can make use of a Stack.

DEV Community: Jacob Cofman