DEV Community: Maciej Modzelewski

Volta—simple and fast node version manager

Maciej Modzelewski — Wed, 18 May 2022 06:53:16 +0000

Volta is a small tool that helps you manage multiple versions of node and package managers like npm or yarn.

It is especially useful when you work on multiple projects—you can update your environments independently.

Installing a new node version with Volta is as easy as:

volta install node@16

That will set up node 16 as a default version.

If you want to have a different version for some project, just use:

volta pin node@14

It will create an entry in your package.json file, saving the version of node.

And the best thing of Volta—it's superfast!

If you would like to get started with Volta, head over to Volta—Getting Started.

Happy coding! 😀

First take on Cloud Firestore Security Rules

Maciej Modzelewski — Tue, 09 Mar 2021 17:20:15 +0000

Hi!

I'm currently working on a small POC project and I thought Firebase will be a good candidate for quick prototyping. In the project I am using Cloud Firestore and Authentication.

In this post I'd like to show you what I've learned about the Firestore Rules. Hopefully you'll find it useful. Let's dig in.

The first version of the Firestore schema looks like this:

{
  "clubs": {
    "<clubId>": {
      "name": "This is a public club",
      "ownerId": "<ownerId>",
      "visibility": "public",
      "members": {
        "<userId>": {
          "name": "My fancy nickname"
        }
      }
    }
  }
}

At the top level there is a collection of clubs. Each club has a name, owner and it can be either public or private.

Of course the club must have members, which is a nested Firestore collection. The keys in this collection are users' ids from the Firebase Authentication module. A member for now has only a name.

For the above collections schema I have created the following rules:

rules_version = '2';
service cloud.firestore {
 match /clubs/{club} {
        allow create: if request.resource.data.ownerId == request.auth.uid
      allow delete, update: if request.auth != null && request.auth.uid == resource.data.ownerId
      allow read: if request.auth != null && (resource.data.visibility == 'public' || isClubMember(club, request.auth.uid))
      match /members/{member} {
        allow read, write: if isClubOwner(club, request.auth.uid)
      }
    }    

    function isClubMember(clubId, userId) {
      return exists(/databases/$(database)/documents/clubs/$(clubId)/members/$(userId));
    }
    function isClubOwner(clubId, userId) {
        let club = get(/databases/$(database)/documents/clubs/$(clubId));
      return club != null && club.data.ownerId == userId;
    }
  }
}

Let's look at them one by one.

 match /clubs/{club} {

All rules within this block will refer to some club with id available under the club variable.

allow create: if request.resource.data.ownerId == request.auth.uid

Anyone can create a club as long as they set themselves as the owner of the club.

allow delete, update: if request.auth != null && request.auth.uid == resource.data.ownerId

Only the owner can delete or update the club.

allow read: if request.auth != null && (resource.data.visibility == 'public' || isClubMember(club, request.auth.uid))

Any authenticated user can see public clubs. Non public clubs can be seen by their members.

match /members/{member} {
    allow read, write: if isClubOwner(club, request.auth.uid)
}

Only the owner can see or modify members of the club.

In the last two rules I have used helper functions which are defined as follows:

function isClubMember(clubId, userId) {
  return exists(/databases/$(database)/documents/clubs/$(clubId)/members/$(userId));
}

This function queries the members collection for specified club to see if the user belongs to it.
Important note: this function will count towards the number of DB invocations and will influence billing.

function isClubOwner(clubId, userId) {
  let club = get(/databases/$(database)/documents/clubs/$(clubId));
  return club != null && club.data.ownerId == userId;
}

This function uses get instead of exists and checks the property of the club to see if the specified user is an owner.

This is what I've come up with on the first encounter with Firestore rules. It's not perfect but it's a good start.

At the moment I'm not sure what is the best place to keep the ownerId. With the current set up every user that can see the club can also see the id of the owner and that's far from perfect.

If you have any comments or suggestions on how this structure could be improved please let me know in the comments.

Happy coding! 🙂

Additional resources:
https://firebase.google.com/docs/rules
https://firebase.google.com/docs/firestore/security/rules-query

Scala 3 (aka Dotty) Context functions

Maciej Modzelewski — Tue, 16 Feb 2021 14:48:41 +0000

Recently I've watched an interesting presentation from Martin Odersky on Plain Functional Programming.

In his talk Martin introduced Context functions which let him achieve 2 things.

Pass context to functions without explicitly passing it through function's arguments
Make function signatures more descriptive - by introducing Possibly he gave the function ability to throw an error

I highly recommend the talk if you want to get familiar with the full reasoning behind Context functions. Also here's the link to docs about Context functions.

You can check out the sample code for Martin's presentation here.
I have updated the code to the current Scala syntax.

Happy coding 🙂

Improve *ngFor performance with trackBy

Maciej Modzelewski — Mon, 30 Nov 2020 15:01:17 +0000

Whenever you are using *ngFor in your Angular application consider setting trackBy function for it.

By default, Angular uses reference comparison for objects in the list. This might not be the optimal approach, especially when you update your list's data from the server.

Instead, you could be using some unique and stable identifier that your objects have. Thanks to comparing by the id, Angular won't need to rerender all elements every time you fetch an updated list from the server (object references will be changed but ids won't).

Less computations -> performance gain!

How to use the trackBy then?

You need to create a function that matches TrackByFunction interface.

interface TrackByFunction<T> {
  (index: number, item: T): any;
}

// might be something like this
function trackByTransaction(index: number, item: Transaction): string {
  return item.id;
}

And use it in the template:

<div *ngFor="let transaction of transactions; trackBy: trackByTransaction">
  <!--  transaction view  -->
</div>

That's it! Now go and optimise your lists :)

Happy coding! 😀

A short note on TypeScript Mixins

Maciej Modzelewski — Mon, 23 Nov 2020 06:00:10 +0000

Hi there, so what are the TS Mixins?

In short, mixins are another way to extend your objects with common behaviours.

Let's assume that in a calendar app you can display list of users and list of meetings.
Regardless of the list type you can select an element of the list.

Let's look at the code to see how we could model this problem with mixins.

// We need a base type that can be extnended by any other type 
type Constructor<T = {}> = new (...args: any[]) => T;

// Here we create our mixin function. It can take any base type
// and extend it with one private propery and 3 methods.
function mixinSelectable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    private _selected = false;

    select() {
      this._selected = true;
    }

    unselect() {
      this._selected = false;
    }

    get selected(): boolean {
      return this._selected;
    }
  };
}

class User {
  constructor(public firstName: string, public lastName: string) {}
}

class Meeting {
  constructor(public subject: string) {}
}

// This is how we create a new extended types 
const SelectableUser = mixinSelectable(User);
const SelectableMeeting = mixinSelectable(Meeting);

// Usage of new classes
const user = new SelectableUser('John', 'Locke');
user.select();
user.unselect();
user.selected;

const meeting = new SelectableMeeting('Learn Mixins');
meeting.select();
meeting.unselect();
meeting.selected;

Mixins seem like a nice addition to OO features of TypeScript. They can help with managing a utility logic and nicely separate it from the business logic in our apps.

Hope you've learned something new today!

Happy coding! 😀

Why should I try Elm?

Maciej Modzelewski — Mon, 13 Jul 2020 06:00:10 +0000

Hi there!

In the last post I've shared a few resources that are worth checking out when you want to start discovering Elm.

The question comes up: why would I try Elm?
The answer that first pops into my mind is: For its safety!

In my opinion, the number one feature of Elm is its compiler. It will protect you from different sorts of bugs, and you will have more time to focus on the core value of your app.

Let's look at some examples where Elm's compiler comes in handy.

We have an add function and two function calls.
First, a snippet in JavaScript.

function add(a, b) { return a + b }

add(1, 2) // 3
add(1, "hello") // "1hello"

Both function calls will work out just fine, but the result of the second one might be surprising. This one is quite obvious, but imagine that you're passing variables instead of literals. You'll know about this strange behaviour only after executing the code.

The same example in Elm.

add a b = a + b

add 1 2 -- 3
add 1 "ok"

The first function call looks ok, but the second one won't even compile.
The compiler will give us this nice, descriptive error:

The 2nd argument to `add` is not what I expect:

4|   add 1 "ok"
           ^^^^
This argument is a string of type:

    String

But `add` needs the 2nd argument to be:

    number

Hint: I always figure out the argument types from left to right. If an argument is acceptable, I assume it is “correct” and move on. So the problem may actually be in one of the previous arguments!

Hint: Try using String.toInt to convert it to an integer?

Thanks, compiler!

That's just a very simple example but with more complex data structures the benefits are even higher.

The same level of security you're getting with properties names.
If you were to reference a property that does not exist in the object, the compiler will let you know that something's wrong.

type alias User =
    { firstName : String
    , lastName : String
    }

fullName : User -> String
fullName user =
    user.firstNme ++ user.lastName

In this example, we have a User record and function that concatenates first and last names.
If we try to compile that, we will get an error:

This `user` record does not have a `firstNme` field:

10|       user.firstNme ++ user.lastName
               ^^^^^^^^
This is usually a typo. Here are the `user` fields that are most similar:

    { firstName : String
    , lastName : String
    }

So maybe firstNme should be firstName?

The compiler saved us hours, again!

Of course, the compiler won't help in case of logic errors, but that's the only concern left on your mind.

Some may say that all statically typed languages have these advantages. Agreed, but static typing is not that common in the frontend world where JS is the king. Even with TypeScript, there is the any type where you can just throw anything and all the type checking goes bananas.

To sum up, I think that Elm might be an interesting alternative for writing frontend apps as it will make you more secure. Besides the compiler features Elm offers immutable data structures and pure functions which will help you create a straightforward and honest code

At the end I would like to recommend watching an interesting presentation from Richard Feldman about his journey towards Elm.

Happy coding! 😀

Have you met Elm?

Maciej Modzelewski — Mon, 06 Jul 2020 17:05:35 +0000

Elm is a statically typed, purely functional language. It is intended for use on the frontend instead of or in conjunction with JavaScript. Elm caught my attention as I've wanted to get more familiar with functional programming. It seems as a quite easy to start with, and it has a nice tutorial which guides you through writing apps with Elm step by step.

If you would like to see Elm in action and play with it a bit, there's an online editor with a couple of simple examples prepared.

Here are also 3 repositories with bigger Elm projects worth checking out:

In the next posts we'll take a closer look at Elm, its features and benefits it brings.

Happy coding! 😀