Forem: Lioness100

Adding URL Search Parameters to Imports!

Lioness100 — Fri, 29 Apr 2022 00:54:34 +0000

Here's an interesting bit of knowledge: did you know that you can create and interpret relative file URLs like... actual URLs?

All content covered in this post will only work with ESM

Now, it might be hard to find a practical use for this, but it is undoubtedly very cool 😎. Enough talk; let's look at some code.



// In your first file:
import './example.js?abc=123';



// In your second file, example.js:
const url = new URL(import.meta.url);
const searchParam = url.searchParams.get('abc');

console.log(searchParam); // → '123'

Here, import.meta.url is used to display the full URL used to import the module. In this case, for example, it might be:



file:///C:/Some/Folder/Path/example.js?abc=123

From here, we can create an instance of a URL, which will make it super easy to parse search parameters.

How could this be used?

I have no idea 😂! Maybe it could be used as a shortcut for very primitive module configuration? For example, using the very popular utility package dotenv.

motdotla / dotenv

Loads environment variables from .env for nodejs projects.

🎉 announcing dotenvx. run anywhere, multi-environment, encrypted envs

^{Dotenv is supported by the community.}

^{Special thanks to:}

Warp is a blazingly fast, Rust-based terminal reimagined to work like a modern app.

^{Get more done in the CLI with real text editing, block-based output, and AI command search.}

Your App, Enterprise Ready.

^{Add Single Sign-On, Multi-Factor Auth, and more, in minutes instead of months.}

dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

🌱 Install

# install locally (recommended)
npm install dotenv --save

Or installing with yarn? yarn add dotenv

🏗️ Usage

Create a .env file in the root of your project (if using a…

View on GitHub

Instead of:



import dotenv from 'dotenv';
dotenv.config({ debug: true });

You could do this! 🦄



import 'dotenv/config?debug=true';

I'd love to know your thoughts 😆

You're Integrating Typescript and Mongoose Wrong!

Lioness100 — Sun, 24 Oct 2021 04:00:09 +0000

The Problem

Typescript and mongoose is a headache I'm sure many of us has encountered. This is for one major reason - it severely goes against the principle of DRY (Don't Repeat Yourself). To illustrate my point, please look at the following example given by the official mongoose docs

import { Schema, model } from 'mongoose';

// 1. Create an interface representing a document in MongoDB.
interface User {
  name: string;
  email: string;
  avatar?: string;
}

// 2. Create a Schema corresponding to the document interface.
const schema = new Schema<User>({
  name: { type: String, required: true },
  email: { type: String, required: true },
  avatar: String
});

// 3. Create a Model.
const UserModel = model<User>('User', schema);

As you can see above, you're literally repeating the structure of the User schema twice: once with typescript types and once with mongoose types. The added verbosity only grows as the complexity of your schema does, and soon enough it's a living nightmare 💀.

The Solution

Don't despair; there's still hope! Introducing typegoose. This library uses classes and typescript decorators to achieve what mongoose tries to do in twice as little code.

Keep in mind that typegoose doesn't actually modify any mongoose functionality. At the end of the day, you'll get a native mongoose Model to do whatever you want with.

How?

At it's most basic usage, typegoose revolves around:

A class
A class property decorator
A class transforming function

Since we're using decorators, we'll first have to add the following to our tsconfig.json:

{
  "compilerOptions": {
    // ...
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Also, be sure to install mongoose and @typegoose/typegoose with the package manager of your choice.

Now, here's the same example given from the mongoose docs, but better. 😎

import { getModelForClass, prop } from '@typegoose/typegoose';

class User {
  @prop()
  name!: string;

  @prop()
  email!: string;

  @prop()
  avatar?: string;
}

const UserModel = getModelForClass(User);

Shorter, more readable, has nothing repeated, and returns the exact same thing!

Unless you override the type manually (through an option in the prop decorator), typegoose will automatically infer the type of each property using reflect-metadata. Super cool, right? (Note that this gets a bit fuzzy around arrays).

There's so many more cool features and utilities with typegoose, such as creating static and instance methods directly inside of the class, that I would advise you to check out at the official docs!

Typescript Static Class Blocks

Lioness100 — Sun, 24 Oct 2021 02:57:26 +0000

Class static blocks came to Typescript in v4.4, and is on the roadmap for becoming an official ECMAScript feature as well! It's used to contain any initialization for the class. The reason this feature is so helpful is because it can access all private internals of the class it's in, as well!

class Unicorn {
  static #isShiny = false;
  static #shinyLevel = 0;

  static {
    const { hasRainbowHorn, hasRainbowTail } = getData(Unicorn);
    if (hasRainbowHorn || hasRainbowTail) {
      // access and modify internals!
      this.#isShiny = true;
      this.#shinyLevel = Math.random();
    }
  }
}

You can create multiple static blocks in a class, which will be executed in sequential order.

This feature is definitely small - but I thought it was cool and wanted to share it with you all. However, since this post would be so short, I though I should add a...

Half Related Tip ✨

While we're talking about static classes: do you know the best way to make a class unconstructable? This might come in handy for a utility class with only static methods. The most popular method is:

class Util {
  public constructor() {
    throw new Error('Do not initialize this class!');
  }
}

However, you can shorten it by just extending null:

class Util extends null {}

new Util(); // TypeError!

💖

One command to remove gigabytes of unused `node_modules` data

Lioness100 — Fri, 15 Oct 2021 13:40:34 +0000

Programming is just one big cycle. Create or download a project, install your dependencies, build something amazing, and move on to the next one. However, with node.js projects, there's a glaring problem.

Every time you move on to another project, you leave incredible amounts of data in the node_modules folder that you may never use again. This can add up... quite quickly.

Don't despair! There's an easy fix, and it's called npkill.

voidcosmos / npkill

List any node_modules 📦 dir in your system and how heavy they are. You can then select which ones you want to erase to free up space 🧹

Easily find and remove old and heavy node_modules folders ✨

This tool allows you to list any node_modules directories in your system, as well as the space they take up. You can then select which ones you want to erase to free up space. Yay!

i18n

We're making an effort to internationalize the Npkill docs. Here's a list of the available translations:

Español

✔️ Features

Clear space: Get rid of old and dusty node_modules cluttering up your machine.
Last Workspace Usage: Check when was the last time you modified a file in the workspace (indicated in the last_mod column).
Very fast: NPKILL is written in TypeScript, but searches are performed at a low level, improving performance greatly.
Easy to use: Say goodbye to lengthy commands. Using npkill is as…

View on GitHub

It's an easy CLI that provides a user friendly interface to scroll through all of your node_modules folders, and, if necessary, delete some at the click of the button.

Personally, I think it's an incredibly cool and useful tool, and I'm sure you will too! To get started, just type:

npx npkill

And start freeing space!

The obscure `Function#length` property!

Lioness100 — Fri, 15 Oct 2021 02:33:22 +0000

Today I found out about another super cool Javascript feature that I'll never use in my life, and I'm here to share it with you! Introducing Function.prototype.length.

// there are 2 expected arguments
function foo(bar, baz) {
  // ...
}

foo.length; // so 2 is outputted

It's as simple as that! The length property exposes the amount of arguments expected by the function in question.

Specifications

Rest parameters are not included in the final count!

function foo(bar, ...baz) {
  // ...
}

foo.length; // 1 - rest parameters are not counted

Also, only parameters before a parameter with a default value are counted.

function foo(bar, baz = true, foobar) {
  // ...
}

foo.length; // 1 - only parameters before one with a default value

What's the difference between `arguments.length` and `Function#length`?

As I described above, Function#length will show how many parameters are expected in a function. However, arguments.length (when used inside the function) will show how many were actually passed, regardless of whether they were expected.

function foo(bar, baz) {
  return arguments.length;
}

foo.length; // 2 - expects `bar` and `baz`
foo(1, 2, 3, 4, 5); // 5 - five arguments were actually passed

Use Cases

You tell me! I have no idea 🤣

I hope you learned a bit about the Function#length property! If you have any questions, corrections, or addons, I would love to hear them. Peace ✌

Introducing Typescript `override` keyword

Lioness100 — Wed, 13 Oct 2021 12:40:25 +0000

When a method [on a child class] is marked with override, TypeScript will always make sure that a method with the same name exists in a the base class.

Typescript Handbook

The override keyword has been a long running feature of languages such as Java and C++, and since version 4.3, is now implemented in Typescript! 🎉

How Does it Work?

As the top quote explains, the override keyword will assert that the function it describes is present in the parent class. This will help cut down on typos, and can give you a heads up if you were not aware that a function was changed/removed in the parent class.

abstract class Animal {
  public sleep() {
    // some default logic
  }

  public eat() {
    // some default logic
  }
}

class Unicorn extends Animal {
  public override sleep() {
    // some new logic
  }

  // Error! The method `eats` does not
  // exist in the parent class!
  public override eats() {
    // some new logic
  }
}

This is an example of implementing the wrong function due to a typo, and Typescript catching it for you before runtime!

If you'd like to make marking overridden methods with override required, you can enable the noImplicitOverride options in your tsconfig.json.

{
  "compilerOptions": {
    // ...
    "noImplicitOverride": true
  }
}

Now, Typescript will throw an error if an overridden method does not include the override keyword.

I hope you learned a bit about the override keyword! If you have any questions, corrections, or addons, I would love to hear them. Peace ✌

The forgotten `with` statement — and why you shouldn't use it

Lioness100 — Tue, 12 Oct 2021 22:52:00 +0000

The with statement extends the scope chain for a statement.

- MDN Web Docs

The with statement was originally implemented to reduce verbosity and when dealing with long object references. If the object is particularly expensive performance-wise, it will also save the compiler from having to parse it multiple times.

You could do this:

const name = authors[0].ref.data[0].data.name;
const lastName = authors[0].ref.data[0].data.lastName;
const age = authors[0].ref.data[0].data.age;

console.log(name, lastName, age);

Or, you could just do this!

with (authors[0].ref.data[0].data) {
  // every property of the given object
  // is transported to the top of the scope
  // and can be referenced directly
  console.log(name, lastName, age);
}

Here's a more practical example that you might find a use for in everyday work:

with(document) {
  with(documentElement) {
    insertBefore(
      createElement("script"),
      firstChild
    )
    .text = "alert(1)"
  }
}

I personally only found out about this keyword a week a go; probably because it has been excluded from almost all modern code. In ES5, it's even forbidden in strict mode 🤯

Why?

Primarily, it's confusing and can easily lead to bugs. Consider the code below:

const foo = 'bar';
with ({ foo: 'baz' }) {
  console.log(foo);
}

Do you think 'bar' will be logged, or do you think 'baz' will be logged? As you can see, this can lead to readability issues. Consider another segment of code below:

// whether we should show the answer of a riddle
const hidden = true;

with (document) {
  const riddleDisplay = getElementById('riddle');
  const [question, answer] = riddleDisplay.children;

  if (hidden) {
    answer.style.display = 'none';
  }

  // ...
}

Pretty easy to understand, right? Nope! Actually, unbeknownst to both the reader and the writer, hidden would be referencing document.hidden.

Maybe you're paying close attention, are well versed in the Document object, and knew this would happen. But what if you didn't know every property of an object? Maybe it's from an external library, or you missed as a property was assigned to it higher in the file.

If you can't read a program and be confident that you know what it is going to do, you can't have confidence that it is going to work correctly. For this reason, the with statement should be avoided...

- Mr. Crockford

Substitutions

Instead of using the with statement, you could assign the reference to a variable, or use array destructuring!

const author = authors[0].ref.data[0].data;
console.log(author.name, author.lastName, author.age);

Or:

const { name, lastName, age } = authors[0].ref.data[0].data;
console.log(name, lastName, age);

Simple, readable, and without any uncertain implications.

Fun Fact

In my previous blog post, I talked about static Symbol properties and how they can be combined with classes.

Javascript Symbols + Classes = 💖

Lioness100 ・ Oct 11 '21

#javascript #programming #tutorial

One property I didn't mention is Symbol.unscopables, which specify any properties that should not be transported to the highest scope.

const foo = {
  bar: 'baz',
};

object[Symbol.unscopables] = {
  bar: true,
};

with (foo) {
  console.log(bar); // Error - bar is not defined
}

I hope you learned a bit about the with statement! If you have any questions, corrections, or addons, I would love to hear them. Peace ✌

Javascript Symbols + Classes = 💖

Lioness100 — Mon, 11 Oct 2021 21:38:48 +0000

Symbol is a built-in object whose constructor returns a symbol primitive — also called a Symbol value or just a Symbol — that’s guaranteed to be unique. Symbols are often used to add unique property keys to an object that won’t collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object.

- MDN Web Docs

In Javascript, Symbols are incredible resources for all sorts of use cases. However, I think many of the possibilities show their true colors when combined with classes. There are very many static Symbol properties that can be used with classes, although I'll only be going through a few of the most important. Check the rest out at the MDN page linked!

All of the below will work with any object, not just classes. I think classes simply demonstrate their usefulness the best

How to use static `Symbol` properties

As described in the top quote, symbols are unique. That means, if you create a symbol and attach it to an object as a property key (using bracket notation property accessors), the assigned value will only be accessible when using the same exact instance of that symbol.



const mySymbol = Symbol('foo');

const obj = {
  [mySymbol]: 'bar',
};

// undefined - 'foo' is only a descriptor
// and doesn't actually do anything
obj.foo;

// undefined - all symbols are unique
obj[Symbol('foo')]; 

// 'bar' - 🎉
obj[mySymbol];

With this mechanic, static Symbol properties were created (for mostly internal use) so that classes and objects can be more configurable without taking up any property names that you could use otherwise.

1. `Symbol.iterator` and `Symbol.asyncIterator`

Learn about iterators

This one's a biggie. Symbol.iterator and Symbol.asyncIterator will most notably specify the behavior of a class in for...of and for await...of loops respectively. Here's an example of it in action:



// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

In this example, we are using Symbol.iterator to create an iterator that will be used to iterate through every book on the "bookshelf". I hard coded the values, but it a more realistic example, you'd probably want to dynamically yield every value in a predefined array (i.e. this.books).



class Bookshelf {
  // ...
}

const bookshelf = new Bookshelf();
for (const book of bookshelf) {
  console.log(book);
}

The above will log the following:



'Harry Potter'
'The Tempest'
'The Lion King'

It's like magic! The same can be used for Symbol.asyncIterator with for await...of

2. `Symbol.toStringTag`

This symbol is much less confusing than the above, but still very cool. Ever wondered why Object#toString() returns '[object Object]', Map#toString() returns '[object Map]', etc?

Your first guess might be that it uses constructor.name. However, we can debunk that because the following doesn't work:



class Book {}

// '[object Object]' - not '[object Book]'
new Book().toString();

Instead, they use Symbol.toStringTag to specify what tag they want to be attached.



class Book {
  get [Symbol.toStringTag]() {
    return 'Book';
  }
}

// '[object Book]'
new Book().toString();

Note that if you want your class to return something special when converted to a string that doesn't fit that format, you can simply overwrite the toString() method itself.

I'm sure there are many use cases for this, but I think it's best used for debugging (especially if you're creating a library and want to make it easy for the end user to troubleshoot). If you try to print some text and you find [object Object], it might be hard to find out what's causing it

However, if you get [object Boolean], [object Null], or a custom [object SomeClassName], I bet you it will be a lot easier.

3. `Symbol.hasInstance`

This symbol defines the behavior of instanceof when used with your class.



'hello world' instanceof string; // true
100 instanceof string; // false

String[Symbol.hasInstance]('hello world'); // true
String[Symbol.hasInstance](100); // false

Here's an example of implementing it yourself:



class Book {
  constructor(name, author) {
    this.name = name;
    this.author = author;
  }

  // `instance` is what's being compared
  static [Symbol.hasInstance](instance) {
    // `instance` is a `Book` if
    // it has a name and author
    return book.name && book.author;
  }
}

// these are the fields we need
const name = 'Harry Potter';
const author = 'J.K. Rowling';

new Book(name, author) instanceof Book; // true
{ name, author } instance of Book; // true

4. `Symbol.species`

This one's hard to wrap your head around. Symbol.species is most notably used internally for arrays and maps (although you can use it in your custom classes as well) to find what subclass should be created from methods that create new classes out of themselves... or something.

Here's an example:



class CustomArray extends Array {}
const arr = new CustomArray(1, 2, 3);

// true - even though `Array#map` creates a *new* array,
// it will dynamically access the constructor through `this.constructor`,
// meaning it can automatically create derived classes when needed
console.log(arr.map((num) => num * 2) instanceof CustomArray);

But, maybe you want to override that:



class CustomArray extnds Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const arr = new CustomArray(1, 2, 3);

// false - this will now always create `Array`s
console.log(arr.map((num) => num * 2) instanceof CustomArray);

Internally, arrays are deciding what class to construct like so:



new (this.constructor[Symbol.species] || this.constructor)(/* ... */);

First it accesses Symbol.species to see if you have an override set up, then it falls back to the current constructor.

I hope you learned one or more new way to use the Symbol! If you have any questions, corrections, or addons, I would love to hear them. Peace ✌

Forem: Lioness100

Adding URL Search Parameters to Imports!

How could this be used?

motdotla / dotenv

Loads environment variables from .env for nodejs projects.

dotenv

🌱 Install

🏗️ Usage

You're Integrating Typescript and Mongoose Wrong!

The Problem

The Solution

How?

Typescript Static Class Blocks

Half Related Tip ✨

One command to remove gigabytes of unused `node_modules` data

voidcosmos / npkill

List any node_modules 📦 dir in your system and how heavy they are. You can then select which ones you want to erase to free up space 🧹

Easily find and remove old and heavy node_modules folders ✨

i18n

Table of Contents

✔️ Features

The obscure `Function#length` property!

Specifications

What's the difference between arguments.length and Function#length?

Use Cases

Introducing Typescript `override` keyword

How Does it Work?

The forgotten `with` statement — and why you shouldn't use it

Why?

Substitutions

Fun Fact

Javascript Symbols + Classes = 💖

Lioness100 ・ Oct 11 '21

Javascript Symbols + Classes = 💖

How to use static Symbol properties

1. Symbol.iterator and Symbol.asyncIterator

2. Symbol.toStringTag

3. Symbol.hasInstance

4. Symbol.species

What's the difference between `arguments.length` and `Function#length`?

How to use static `Symbol` properties

1. `Symbol.iterator` and `Symbol.asyncIterator`

2. `Symbol.toStringTag`

3. `Symbol.hasInstance`

4. `Symbol.species`