DEV Community: Ralf 💥🔥☄️

Building the worlds easiest to use game engine Devlog 1: The vision

Ralf 💥🔥☄️ — Tue, 06 Apr 2021 14:18:32 +0000

Building the worlds easiest to use game engine Devlog 1: The vision

Hey everybody I have a new mission I'm going to create the world's easiest to use game engine.

It can be used by kids, pupils or students that want to get started with programming and especially with making games.

There will be no project setup and no searching for assets. You can jump straight into creating games.

In this blog post I'm trying to explain my vision, basically how I image to create games with the engine.

The scene view

This is the basic to layout of the editor. There is a left sidebar and a right sidebar.
In the left sidebar you have a tree View of all the objects and Sprites you currently have in your scene and in the right sidebar you see all the properties of an object, if you have currently selected one.

The bottom panel is the asset Explorer. You have a lot, and I mean really a lot of sprites and game objects there that can be used in your games. So there is no searching for assets, cropping them, bringing them into the right size and all that annoying stuff.
Everything is prepared to get instantly used in your game.

If you want to add one of those assets to your game just click the little ADD button and the object appears in Your Scene. You can now move it around, scale it, rotated it and do whatever you want with it. You will see all properties that you change on your sprite change in the right sidebar.

The Code Block view

If you have all objects that you need for your game in your scene you can switch to the CODE BLOCK view by clicking that tab buttons up here.

All the game logic needed by your game is split up into blocks.
The engine will use a very simple scripting language to attach behaviour to your objects. This scripting language is heavily inspired by natural language so it's easy for kids to understand what's actually happening. Here is an example of it:

I prepared two code blocks that attach rotation behaviour to my spaceship that I added to the scene before.
You can see there is an event when the left arrow key is pressed. Then select all spaceships and add one to the rotation property.

That's all the logic needed for the first game. Now we can press the little preview button here and the gamepreview will open in a new tab.

In the new tab you can directly try what you created seconds before. We see our spaceship and we can rotate it with the arrow keys.

Of course this game is not created by the engine. It's just some random stuff I hacked together to show how I want it to behave in the future.

That's it for the first devlog. I hope you get what I'm trying to achieve here.
If you have any feedback or critique, just let me know. you can reach me on twitter. Just shoot me a DM if you have any questions. My twitter handle is RalliPi Twitter
My DMs are open if you have any feedback. I'm always up for a chat there.

This blog post is also available as a video on youtube if you would like to get more details about my plans:

https://www.youtube.com/watch?v=nJ0tUer7UNA

Build a complete realtime poll app with ionic, react, firebase and typescript (Part 2)

Ralf 💥🔥☄️ — Fri, 11 Sep 2020 13:56:58 +0000

Building a realtime polling app with ionic, react and firebase Part 2

In the last part (https://gymconsole.app/blog/ionic-firebase-poll-app) we mainly built the UI for our app with react and ionic. We also mocked the poll and
answer objects.
In this part we are finally going to add firebase and make the app fully functional.

The full source code of the application can be found here:
https://github.com/RalliPi/realtime-poll-app

And here is what our app will look like when we are done:
Poll app demo video

Before we can start coding, we need to set up a firebase project.

Head over to https://console.firebase.google.com and create a new project. Fill in all the required fields and wait till
your project got created.
Next, click on 'Cloud Firestore' and create a new cloud firestore database.
When the database got created, you will see something like that:

Let's add in our first poll. This article will not explain how to add new polls programmatically. We will enter the poll
by hand and users can vote for answers with our app. (Actually creating polls from our app could be another article in
the future).

Click 'Start collection' and enter 'polls' as collection id. This will be the collection where we store every single
poll the users can vote for. Click next.

Let's add in our first poll. Use 'poll1' as document id and add a field called text of type string.

Now we can add the possible answers to our poll. We will be using a subcollection here. A subcollection is basically a
collection inside of a single document. We will be using this feature to save as many answers to a poll as we want.
Every document in a subcollection belongs to its parent document.

Click 'Start collection' inside the newly created poll document. Call the subcollection 'answers' and create a new
document in it. The document should have a field called 'amount' (we will be using it to store the actual vote amount
the answer received) and a field called 'text' which is the text that we display in our app.

Now let's copy the connection settings of the firebase app. We will need it later. Go to your project settings by
clicking the small gear in the upper left corner. Scroll down and copy the config of your firebase web-app.
It will look something like that:

const firebaseConfig = {
  apiKey: "yourapikey",
  authDomain: "yourauthdomain",
  databaseURL: "yourdatabaseurl",
  projectId: "yourprojectid",
  storageBucket: "yourstoragebucket",
  messagingSenderId: "yourmessagingsenderid",
  appId: "yourappid"
};

Warning:
This tutorial assumes that you have no security rules setup on your firestore database. That means everybody can read and write to your database. This is highly dangerous and should not get deployed to production.
But this guide is not about security rules. So I will not discuss them here.

Ok, that's it on the firebase side. It's time to get coding. Open up the project of part 1 in your editor.

Before we can actually start writing code, we need to install a dependency first. Open your terminal, change to your app
directory and run the following command:

npm install firebase

This will add the firebase sdk to our project. We need it in order to communicate with the firestore database.

We will firstly configure the firestore database. In your src folder, create a new file called db.ts. It will hold our
firebase configuration.
Paste the following code:

import * as firebase from "firebase/app";
import "firebase/firestore";

var firebaseApp = firebase.initializeApp({
  apiKey: "yourapikey",
  authDomain: "yourauthdomain",
  databaseURL: "yourdatabaseurl",
  projectId: "yourprojectid",
  storageBucket: "yourstoragebucket",
  messagingSenderId: "yourmessagingsenderid",
  appId: "yourappid",
});

export const db = firebaseApp.firestore();

First we import firebase and firestore. Afterwards we're initializing firebase with the configuration we copied earlier. In
the last line we export the firestore object and call it db. This way we can access firestore easily from every file we
import db.ts.

Create hooks to easily access polls and answers

Remember the poll and answer objects we used directly in our page. We are going to swap them out with two hooks. Those
hooks will be responsible for loading and saving polls and poll answers.

Go to your page component and swap the content with the following:

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonCard,
  IonCardContent,
  IonList,
  IonItem,
  IonLabel,
} from "@ionic/react";
import React, { useState, useEffect } from "react";
import "./Home.css";
import { usePoll, usePollAnswers } from "../hooks/poll";

const Home: React.FC = () => {
  var poll = usePoll("poll1");
  var { answers, vote } = usePollAnswers("poll1");

  const onVote = (
    e: React.MouseEvent<HTMLIonItemElement, MouseEvent>,
    id: string
  ) => {
    e.preventDefault();
    let answer = answers.find((a) => a.id === id);
    vote(answer!.id);
  };

  const answerList = () => {
    return answers.map((answer) => (
      <IonItem onClick={(e) => onVote(e, answer.id)} key={answer.id}>
        <IonLabel>{answer.text}</IonLabel>
        <IonLabel>{answer.amount}</IonLabel>
      </IonItem>
    ));
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blanks</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardContent>
            {poll != null ? poll.text : "loading poll..."}
          </IonCardContent>
        </IonCard>
        <IonList>{answerList()}</IonList>
      </IonContent>
    </IonPage>
  );
};

export default Home;

The component almost looks identical to the old version. We only swaped the useState hooks with two custom hooks caled
usePoll and usePollAnswers. We pass the id of the poll we want to use and the hooks handle the rest.
usePoll just returns the poll object from the firestore database and usePollAnswers returns a list of answers that
belong to a poll and additionally a method called vote which can be used to vote for a poll answer.

Let's get to work and implement these hooks:

Create a new directory in your src dir called hooks and create a .ts file called poll.ts in it.

Put the following content in:

import { useState, useEffect } from "react";
import { db } from "../db";
import { Poll } from "../model/poll";
import { PollAnswer } from "../model/pollAnswer";
import { firestore } from "firebase";

export const usePoll = (pollId: string) => {
  const [poll, setPoll] = useState<Poll | null>(null);

  useEffect(() => {
    //load current poll
    db.collection("polls")
      .doc(pollId)
      .get()
      .then((poll: firestore.DocumentSnapshot<firestore.DocumentData>) => {
        if (poll.exists) {
          setPoll({
            id: poll.id,
            text: poll.data()!.text,
          });
        } else {
          console.log("couldn't find poll");
        }
      })
      .catch((error) => {
        console.log("error loading poll: " + error);
      });
  }, []);

  return poll;
};

export const usePollAnswers = (pollId: string) => {
  const [answers, setAnswers] = useState<PollAnswer[]>([]);

  //setup data listeners
  useEffect(() => {
    //load all possible answers
    var removeAnswersSnapshot = db
      .collection("polls")
      .doc(pollId)
      .collection("answers")
      .onSnapshot((snapshot) => {
        var answerObjects: PollAnswer[] = [];
        snapshot.docs.forEach((doc) => {
          answerObjects.push({
            id: doc.id,
            text: doc.data().text,
            amount: doc.data().amount,
          });
          setAnswers(answerObjects);
        });
      });
    return () => {
      removeAnswersSnapshot();
    };
  }, []);

  const vote = (id: string) => {
    var newAnswers = [...answers];
    var answer = newAnswers.find((a) => a.id === id);

    db.collection("polls")
      .doc(pollId)
      .collection("answers")
      .doc(answer!.id)
      .set(
        {
          amount: answer!.amount + 1,
        },
        { merge: true }
      );
  };

  return { answers, vote };
};

As you can see we're exporting two functions/hooks which both take a pollId as a parameter.

Let's see how the usePoll hook works:
We declare a local state object of type Poll with the help of the useState hook here. That's basically what we
previously did directly in our page component.
We're doing the actual databasecall in a useEffect hook. The useEffect hook always gets executed when any of the values
in the second parameter changes. As we're passing an empty list as the second parameter, the hook runs when the
component gets mounted.
So we're loading the poll just after the user hits the home page.

db.collection("polls").doc(pollId).get();

This returns a promise containing a firebase documentsnapshot. The contained data of this snapshot is actaully the same
as our Poll type. But we can't just cast it. We need to construct a new Poll object by grabbing each property from the
documentsnapshot:

setPoll({
  id: poll.id,
  text: poll.data()!.text,
});

So now our local state object poll holds the data that we just loaded from the server.
By returning the local poll object from our hook we can get access to this piece of state from outside of the function.
The cool part is, that whenever the local state inside of the hook changes (ie the data got loaded), the returned object
also 'changes' (It doesn't change but it holds the newly set data then).

We abstracted away the actual database loading logic from our page component. We can load polls now from everywhere in
our application by just calling

var myNewPoll = usePoll("myPollId");

Let's get to the usePollAnswers function. It's a little more complicated but if you understood how the usePoll function
works you will not have any problems with the usePollAnswers hook.

We're using local state again. But this time we need to save a list of PollAnswers instead of a single poll. We're
calling the db in a useEffect hook again.
This time we not just get the values we want once, but we're setting up a realtime listener.

var removeAnswersSnapshot = db
  .collection("polls")
  .doc(pollId)
  .collection("answers")
  .onSnapshot(callback);

This will set up a listener on a subcollection of a poll document in our db. A subcollection is basically another
collection that just exists for one single document in our database. Every single poll in the database will have it's
own subcollection of answers that only belong to this particular poll. The callback method will get called everytime a
document in our valueset changes (everytime any answerobject of the poll gets changed).

.onSnapshot(snapshot => {
  var answerObjects: PollAnswer[] = [];
  snapshot.docs.forEach(doc => {
    answerObjects.push({
      id: doc.id,
      text: doc.data().text,
      amount: doc.data().amount,
    });
    setAnswers(answerObjects);
  });
})

In the callback we're looping over every document and construct a new array of PollAnsers. Finally we're saving
the newly constructed array in our local state object.
This time the function we're running inside useEffect returns a function. This is useEffect functionality. Every code in
this function gets called when the component did unmount. We're calling

removeAnswersSnapshot();

there. This is a method that gets returned by the onSnapshot method provided by firestore. Calling this method will
remove the listener from the db. So we're no longer getting updates about database changes as soon as the page
component unmounts.

The last thing we need in order to make our poll app functional is voting functionality.

const vote = (id: string) => {
  var newAnswers = [...answers];
  var answer = newAnswers.find((a) => a.id === id);

  db.collection("polls")
    .doc(pollId)
    .collection("answers")
    .doc(answer!.id)
    .set(
      {
        amount: answer!.amount + 1,
      },
      { merge: true }
    );
};

The vote method takes the id of a PollAnswer as its only parameter. It then looks for the answer in the local state
object by comparing the id. Then it perfoms a write to the firestore database by calling the set method. we just need to
update the amount field of the object. The merge parameter we're passing tells firestore to merge the old object
it currently has stored with the new values we provide. That's all we need to write to the database.

The cool part is, that when we increment the amount field on a poll. Our snapshot listener for the pollAnsers
immediately triggers and updates our UI accordingly. We don't have to do any manual work here.

With this changes done. Open your project path in your terminal and type

npm run start

This will start a development server and you should be able to test the poll app. Open the app in a few browser windows
to see that it syncs in realtime and saves its state.

That's it. We built a fully working realtime poll app with just a few lines of code with the help of react, ionic and
firestore.

If you enjoy this type of content, visit https://gymconsole.app/blog to get more tutorials or connect with me on twitter
@RalliPi.
I'm happy to talk to you or help you with your projects

Fitness as a developer before and after Covid-19 (Indie vacation #2)

Ralf 💥🔥☄️ — Sun, 16 Aug 2020 08:32:56 +0000

Issue number 2 is all about getting fat while being a developer and sitting a lot in front of monitors and what to do about it.
I was pretty fit all my life. Then Covid-19 hit hard and I gained some kilos. Enough to gain as much belly fat that you will not recognize me as fit anymore. What a shitty feeling. This needs to change as soon as possible. But how? I tried to gain weight all my life. My butrition was always set up so that I had to eat more than I wanted. So when I want to loose weight now, I'm in a position that I didn't encounter ever before. But do I really want to loose weight? Not really. I'm comfortable with my current body weight. More mass means more force in general. And I really feel stronger (but my 1rep maxes are the lowest ever). So what I really want is keeping my weight and loosing all my belly fat while getting stronger at my key lifts. That's basically what everybody wants. Some say it's not possible others say it is. I will finally find out!

Here is the plan:

Intermittent fasting with a rough look at calories. Not really counting, just eyeballing. Adjust fasting frame until completely dialed in.
Heavy weights with low volume. I want to get strong as fuck. Focus on key lifts(bench press, overhead press, deadlifts, squats, weighted pullups). Sprinkle in some isolation exercises with high volume.
One or two cardio sessions per week. Those will mostly be playing football with friends or some runs. Perhaps a little freeletics workout here and there too see how my general fitness improves. Nothing too fancy and nothing too demanding.

Everything I do will be tracked with with gymConsole, a workout tracker/life optimizer I'm currently building that can measure any kind of metric. So I will be tracking a lot of other metrics like alcohol consumption and perhaps sleep. This will allow me to see where I'm sabotaging my progress and how I could possibly fix it.

I will post regular updates about my fitness level and what helped me increase it. If you are into fitness too, I'd love to connect. My DMs on twitter are always open. https://twitter.com/RalliPi

Indie Vacation

Ralf 💥🔥☄️ — Wed, 12 Aug 2020 17:55:56 +0000

Finally vacations. I really needed this. I was very energy less the last couple of weeks. I even think I was almost burned out. Naturally indie hacking and my sideprojects were the first things that I stopped doing. But now the time has come that I'm on vacation. My batteries are slowly recharging and I'm thinking about my side hustles again. I even have my macbook with me, but I'm not sure if it's a good idea to power it on during my holidays. But let's see.

I had some nice days on the beach and a lot of time to think. Here are some of the things that I came up with:

Ruby

I want to get fucking good at ruby and rails. I looked at some job offers lately and all the jobs that really interested me had been ruby positions. And I was interested in ruby for a long time but never really took it seriously because I was more productive with different stacks (of course, because I never really took the time to dig deep into ruby/rails). But that is going to change now.

My wip shopify app

I'm going to port it to ruby on rails. Its current tech stack is nexjs-koa-knex-postgresql. Nextjs and koa are the recommended tools by shopify to build apps but I was never really satisfied with the dev experience. Let's see how it's going with rails.
I'm also probably going to shift the product a little bit. I originally planned an affiliate app. But I'm currently thinking to make it kind of a recimmendation app. But I have to think about this and do some research first.

Zero to sold

I'm currently reading zero to sold by arvid kahl. It's fantastic. I'm just at the beginning if the book but it already made me think so much. I'm currently thinking hard about niches I could build a product for. At the moment teachers and hobby tournament plannersare my favourites.

Rails learning projects

As I already said I'm going to get really really good at rails. So I need some learning projects. As Indon't have a proper internet connection here at the beach on a campsite, I can't really work on my shopify app. In case that I will open up my macbook, I will start a fresh rails project just for fun and learning purposes. Perhaps I will start a prototype of the tournament planning software I have in mind. But this will be a very big project so I'm not sure if it's suited as a learning project. I have to think a little more about it..

That's it for part one of my indie hacking vacation.
I'm pretty active on twitter and my DMs are always open. So feel free to connect with me on twitter https://twitter.com/RalliPi.

Generic parameters in typescript for beginners

Ralf 💥🔥☄️ — Sat, 06 Jun 2020 10:16:40 +0000

Generic parameters are a very powerful concept. But they are not easy to understand for beginners. In this article I'm going to explain them in a beginner friendly way.

This article was originally published on https://kissdev.io/blog. You can find a lot of similar content there.

The article will have the following progressions:

Non generic class
See limitations of non generic class
Add generic parameter to class
"Realworld" example

Let's start with a simple non generic class to see its limitations:

class Transformer{
    private transformMethod : ((values : string[]) => string[]);
    private values : string[];

    constructor(transformMethod : ((values : string[]) => string[])){
        this.values = [];
        this.transformMethod = transformMethod;
    }

    public add(value : string) : void{
        this.values.push(value)
    }

    public transform() : string[] {
        return this.transformMethod(this.values);
    }
}

The Transformer class can hold any number of strings. You can add new strings to it by calling the 'add' method. When creating a new instance of the class, you can pass a method that transforms all strings that were previously added and returns a new list of strings that contains all transformed strings previously added. This is basically the js map method reimplemented (of course with a lot of functionality missing).

Here is a use case for our transformer class:

var makeUpper = (values: string[]) : string[] => {
    return values.map(v => v.toUpperCase());
}
var upperTransformer = new Transformer(makeUpper);
upperTransformer.Add("i'm all lowercase")
upperTransformer.Add("really sad")
var allUpper = upperTransformer.Transform();

The method makeUpper takes a list of strings and returns a new list of strings with every element uppercased.
We then create a new instance of our Transformer class and pass in the makeUpper method.
We now add some strings and call the transform method. This will give us a new list of strings with all elements uppercased.

Let's have a look at another example:

//This will not work
var addFive = (values: number[]) : number[] => {
    return values.map(v => {return v + 5});
}
var addFiveTransformer = new Transformer(addFive);
addFiveTransformer.Add(1)
addFiveTransformer.Add(2)
var allFiveAdded = addFiveTransformer.Transform();

This time we defined a method that adds 5 to every number in a list and returns a new list with the modified numbers.
This will give us typescript errors because our Transformer class expects to work with strings.

What do we have to do to make our Transformer class work with every datatype?

A generic parameter:

class GenericTransformer<T>{
    private transformMethod : ((values : T[]) => T[]);
    private values : T[];

    constructor(transformMethod : ((values : T[]) => T[])){
        this.values = [];
        this.transformMethod = transformMethod;
    }

    public Add(value : T) : void{
        this.values.push(value)
    }

    public Transform() : T[] {
        return this.transformMethod(this.values);
    }
}

You see the difference?
We removed every occurrence of the type string from the class and replaced it with a so called generic type. We called the generic type T, but we could have called it whatever we want.
T is a placeholder for the type that we specify when we create an instance of the class.
Let's do that now:

var addFive = (values: number[]) : number[] => {
    return values.map(v => {return v + 5});
}
var addFiveTransformer = new GenericTransformer<number>(addFive);
addFiveTransformer.Add(1)
addFiveTransformer.Add(2)
var allFiveAdded = addFiveTransformer.Transform();

You see that we now say that the generic type of our class instance should be of type number. Now typescript knows how to handle the generic parameter. Every occurrence of 'T' will now be an instance of type number.
This time our code compiles. And it will compile for every other datatype too.

Of course this simple example is pretty much useless.

Let's have a look at an example that could be used in a real life application:

class DbConnection{
    public Save(data:any): void{
        //save to db
    }
}

class Repository<T>{
    private dbConnection: DbConnection;

    private data:T[]

    constructor(){
        this.data = [];
        this.dbConnection = new DbConnection()
    }

    public Add(data: T): void{
        this.dbConnection.Save(data);
        this.data.push(data);
    }

    public Get(): T[]{
        return this.data;
    }
}

class Todo{
    public task:string;
    public done:boolean;
}
class Bookmark{
    public url:string;
}

class MyApp{
    private todoRepository: Repository<Todo>;
    private bookmarkRepository: Repository<Bookmark>;

    constructor(){
        this.todoRepository = new Repository<Todo>();
        this.bookmarkRepository = new Repository<Bookmark>();

        var myTodo = new Todo();
        var myBookmark = new Bookmark();

        this.todoRepository.Add(myTodo);
        this.bookmarkRepository.Add(myBookmark);

        var allTodos : Todo[] = this.todoRepository.Get();
        var allBookmarks : Bookmark[] = this.bookmarkRepository.Get();
    }
}

What we're trying to achieve here is creating a Repository that holds data objects and can save data objects to a database. And it has to work with any kind of data object.

First we define a class called DbConnection. It doesn't do anything and just exists to show what a real world repository could use to communicate with a real database.

The Repository class is where the 'magic' happens. But once you understood the concept, it's a pretty simple class isn't it?
It creates a mocked database connection in its constructor and has a method to add new data and a method to return all data. The trick is that the class doesn't care at all about the type of the data. It stores them regardless.

Finally the MyApp class shows how to use the repository class. We create two repositories. One holds data of type Todo and the other of Type Bookmark.
Now both repositories have the same functionality but only work with their respective data type. You can not accidentally add a Bookmark object to the TodoRepository. The typescript compiler will complain about it.

And that's it. We created a fully generic Repository class that can store any kind of data. Pretty cool.

Here is why generic types are so important for kissjs (the javascript framework I'm working on):

A fundamental part of kissjs are so called Business Logic blocs(bloc). These are classes that contain all the business logic your app consists of and are accessible from everywhere in your application.
And there are special kinds of blocs which are responsible to handle data objects. Pretty similar to our Repository example. These DataBlocs can create, read, update and delete data out of the box. They work in the same way as the repository above. When a DataBloc gets created, it gets the type of its data passed as a generic parameter and you as the developer never have to worry about passing wrong data to it.

Kissjs is a javascript framework that makes it very easy to create mobile apps very quickly. If you want to learn more about it, check it out at https://kissdev.io.

And if you are interested in this kind of topics, I share a lot about it on twitter. So make sure to follow me there @RalliPi.

Adding scripts to every page of a docusaurus project

Ralf 💥🔥☄️ — Fri, 29 May 2020 19:44:09 +0000

If you aren't familiar with docusaurus (v2), it's an open source static site generator. It's mostly used for documentation, but it can also be used for blogs or any other static site.

I used it to build a very basic info page for kiss.js https://kissdev.io and I wanted to add simpleanalytics to it. This requires me to add a little js script to every site that should be tracked.

Docusaurus doesn't expose it's index.html like eg create-react-app, so it's not trivial to find a place to paste your tracking script.

Here is how I did it:

run in you project folder:

npm run swizzle @docusaurus/theme-classic Footer

(of course the command changes if your project is not based on theme-classic)

This command will download the code of the default Footer used on every page and copy it into your project directory.

You can now make changes to the footer component. Just paste your scripts right before the closing tag.

Adding multi tenancy to a feathers.js app

Ralf 💥🔥☄️ — Sat, 23 May 2020 18:06:26 +0000

Yesterday I started a live coding thread on twitter. I implemented multi tenancy into a feathers app. Live coding thread basically means tweeting every step of the proccess and explaining it in a twitter thread. I like this concept a lot and will be doing more of them soon. If you like this concept too, make sure to connect on twitter.

What does multi tenancy mean?

In software development multi tenancy often means that a single application is hosted on one server but serves different tenants. Tenant can mean different things eg a tenant can be a company, an app or a team. Each tenant will use the application as if it's using it alone. It is not connected to other tenants in any way.

What I built

I'm currently building the backend as a service for kiss.js (see my other articles) which is called kisscloud. A single kisscloud instance can host multiple applications. A classic multi tenancy use case.
Kisscloud uses feathers.js under the hood. So what I'm actually doing is adding multi tenancy to a feathers.js app.

What needs to be done?

Kisscloud will update everything in realtime. So it uses websockets. In order to add multi tenancy to a websocket based app the follwing steps need to be done:

I will hook into the socket handshake and add the kissjs appId to the socket connection.
I will overwrite the default feathersjs authentication to use the appId when requesting session tokens and creating new users.
And finally I will also add the appId restrictions to every data resource

Adding the appId to the socket connection

Adding the appId to the socket connection is actually pretty easy.
On the client I just had to pass it when the socketio connection got configured.
And on the server I could register a very simple middleware that gets executed for every incoming websocket.

const socket = io(options.endpoint, {
  query: {
    appId: options.appId
  }
});

this.feathers = feathers();

// Setup the transport (Rest, Socket, etc.) here
this.feathers.configure(socketio(socket));

This is a basic feathers setup. The only thing that happened here is adding the appId to the socket handshake by adding it to the query object.

On the server it's even simpler. This little middleware gets executed for every incoming socket connection. It reads the appId from the handshake and saves it for later use.

app.configure(socketio(function (io) {
    io.use(function (socket: any, next) {
        socket.feathers.appId = socket.handshake.query.appId;
        console.log("received appId: " + socket.handshake.query.appId);
        next();
    });
}
));

The cool part is the feathers attribute on the socket object.
It's handled by feathersjs and is made available to almost everything you can imagine. This will come in handy when we try to get access to the appId later.

Access control for data

Access control is very easy with feathersjs. I created 2 hooks, the first adds the appId(already saved to connection after socket init) to every saved resource.

import { Hook, HookContext } from '@feathersjs/feathers';

export default (options = {}): Hook => {
  return async (context: HookContext) => {

    context.data = {
      ...context.data,
      app_id: context.params.appId
    }
    return context;
  };
}

And the second one forces to query for the given appId whenever a query is made for any resource.

import { Hook, HookContext } from '@feathersjs/feathers';

export default (options = {}): Hook => {
  return async (context: HookContext) => {
    context.params.query = {
      app_id: context.params.appId
    }
    return context;
  };
}

That's basically it to ensure that only resources belonging to an app can get loaded and saved.

Now the tricky part:

Authentication

When signing in, I need to ensure that I query for the username based on the appId. This is pretty easy with feathers. i can extend the local authentication strategy used by feathers and also query for the appId. This way I always load the correct user based on username and on appId:

import { LocalStrategy } from '@feathersjs/authentication-local';
import { Params, Query } from '@feathersjs/feathers';


export class MultiTenantLocalStrategy extends LocalStrategy {
    async getEntityQuery(query: Query, params: Params) {
        // Query for appId, too
        return {
            ...query,
            app_id: params.appId,
            $limit: 1
        }
    }
}

The heaviest part of all this was creating a new user. The problem is that feathersjs handles the uniqueness of usernames/emails on the database layer. I want to stay database independent with kissjs. So I had to bypass this...
First I removed the uniqueness index from the db. At this point there could be unlimited registered users with the same username. What I want is unlimited users with the same username, but each with a different appId.
I created another hook for this that gets executed every time a user gets created or updated.

import { Hook, HookContext } from '@feathersjs/feathers';

export default (options = {}): Hook => {
  return async (context: HookContext) => {
    var appId = context.data.app_id;
    var username = context.data.username;
    try {
      var duplicate = await context.app.service("users").find({
        query: {
          app_id: appId,
          username: username
        }
      })
      if (duplicate.data.length !== 0) {
        throw new Error("username already taken")
      }
    } catch (e) {
      console.log("error: " + e)
      throw e;
    }
    return context;
  };
}

This hook loads a user based on the given username and adds the appId to the query. If a username already exists, the signup flow gets interrupted here. This is not optimal of course, but I think I can live with this solution for now. I can always easily switch back to the database layer when I use a database that can handle unique constraints based on several attributes.

And that's it. With this small changes to the codebase I have complete multi tenancy support.

If you have any additional questions or want to build something similar and need help, just let me know.

I share as much stuff as possible about the progress on kissjs on twitter. If you're interested in how to build a javascript framework and corresponding backend as a service, you might want to follow me there.

Building sideprojects as a dad with a fulltime job

Ralf 💥🔥☄️ — Tue, 19 May 2020 16:22:42 +0000

4 years ago I was a university student, didn't have children and no fulltime job. I had a lot of free time. I have been building sideprojects since I was 15 years old. I started making little browsergames back then. Nothing big and without the intention of making money with them . It was just for learning purposes and for having fun.
In university this changed a little bit. I really had the intention of making money with my projects. But as I had basically as much time as I wanted. I was procrastinating all day long. I started countless projects and finished absolutely none of them. Interests were changing way too fast and I started a new one as soon as the basic setup for the last one was complete.
But I didn't care. I didn't have any pressure to complete anything and I didn't need the money.

Fast forward 4 years:

I have a 3 year old daughter and a full time job. The time I can dedicate to sideprojects is very rare because I have other hobbies too and I have to keep myself away from computer screens sometimes in order to not burn out.
I often felt kind of a pressure to work on my side projects when I had free time because I knew that this is the only time I have and if I let it pass, it's gone.
This got worse and worse until I finally had kind of a mind switch. I told myself that I don't have to work on stuff when I'm not feeling like it and that it's absolutely no problem to take some days off if I feel stressed.
Slow progress is still progress. I still want to work on my projects regularly but without any pressure.
And this was when it ticked for me. I set priorities for the work I wanted to get done on my sideprojects and used the time I spend on them more efficiently. I stopped switching frameworks like crazy and settled with what I already knew. I noticed pretty quickly that this really made me more productive and that my projects progressed quicker. Which motivated me even more to work on them.

So I ended up being more productive with less time spend on the projects. I finished 4 (small) sideprojects in 2019, which is more than I ever released before.
I'm currently working on a bigger project again but I'm following the same principles plus I share what I'm working on publicly which is a huge motivation boost too.

I know there a lot of parents working on sideprojects that don't feel the pain I felt, but I also know that there are a lot of indie hacker parents out there that are struggling for the exact same reasons. I know that this isn't the ultimate formula that works for everybody. But taking everything a little more relaxed and not stressing out about progress is something that will not hurt anybody. Perhaps it even increases productivity.

I'm currently sharing a lot of insights about me building a pretty big project (a javascript framework with integrated backend) on twitter. If you want to connect, just let me know.

Kissjs first look: Building a todo app in 4 minutes

Ralf 💥🔥☄️ — Fri, 15 May 2020 12:05:10 +0000

This is a first look on how you will be building mobile apps with kissjs.

In this video I build a fully working todo app with data syncing between devices in 4 minutes.

I will explain the project structure and how kissjs works in the next videos. So make sure you follow me on twitter to not miss any of them.

CRUD and Authentication is annoying and time consuming (kiss.js to the rescue)

Ralf 💥🔥☄️ — Mon, 11 May 2020 17:03:03 +0000

You have this great idea for a cool new mobile app and you immediately want to start building it.
You have everything laid out in your head already: You need some CRUD models with authentication and you need some custom logic that gets executed in response to crud operations.

When you are planning this kind of applications, you normally just think about your business logic and how to do it. Because crud is just crud and authentication is just authentication. Nothing to really think about.

But let's face it: Till you can start developing your app, you have to spend days or weeks on building really basic authentication stuff and all the required CRUD operations plus corresponding views. Then you need form validations and the list gets bigger and bigger...

This takes so much time that you lose your motivation and abandon the project. You start your next project and it all begins again... Repeat.

But imagine you could start a new project and authentication is already fully working. A dream! And now imagine you could create all CRUD operations and views for the model with one simple cli command ala ruby on rails. Perfect.

This basically means you can start working on your app shortly after creating it. You can deep dive into your business logic straight after starting. That's the world you ever dreamed of!

Entering kiss.js:

Kiss.js is a javascript framework created to build mobile applications.
Developing a mobile application with kissjs removes all this pain from development.
You start a new kissjs project which comes with authentication built in. That means you get Signin and Signup Pages hooked up to a datastore. And a mechanism to restrict any route you want to require an authenticated user.

Additionally the kiss cli gives you a scaffold command to generate the complete crud boilerplate for any kind of model. Think of it like the famous ruby on rails scaffold command.

After you generated the crud stuff for your models you can fully concentrate on your business logic.
Kissjs already created Business Logic components for your crud pages which makes it easy to add any kind of logic to your crud boilerplate.

Kissjs makes mobile app development fun and fast again. You will get your app shipped in no time.

Im posting updates about the development of kiss on twitter. Follow me there to stay up to date with kiss.js and be one of the first to try it out.

Happy coding!

Build a mobile chat layout with tailwindcss

Ralf 💥🔥☄️ — Wed, 06 May 2020 13:44:26 +0000

This will be a very quick tutorial today. I will show you how easy it is and with how little effort you can build a mobile chat layout like whatsapp or telegram with just html and tailwindcss.

Let's get started.

We will build the basic html structure first. I commented the different parts of the layout, so it should be pretty clear what each section does.

<html>
  <header>
    <title>Mobile Chat Layout</title>
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.0.5/dist/tailwind.min.css" />
  </header>
  <body>
    <div>

      <!-- HEADING -->
      <div
      >
        <!-- back button -->
        <a href="#">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path
              d="M9.41 11H17a1 1 0 0 1 0 2H9.41l2.3 2.3a1 1 0 1 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L9.4 11z"
            />
          </svg>
        </a>
        <div>@rallipi</div>
        <!-- 3 dots -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            d="M12 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
          />
        </svg>
      </div>

      <!-- MESSAGES -->
      <div>

        <!-- SINGLE MESSAGE -->
        <div>
          <div
          >this is a basic mobile chat layout, build with tailwind css</div>
        </div>

        <!-- SINGLE MESSAGE 2 -->
        <div>
          <div>It will be used for a full tutorial about building a chat app with vue, tailwind and firebase.</div>
        </div>

        <!-- SINGLE MESSAGE 3 -->
        <div>
          <div>check my twitter to see when it will be released.</div>
        </div>
      </div>
    </div>

    <!-- MESSAGE INPUT AREA -->
    <div >
      <textarea
        rows="1"
        placeholder="Message..."
      ></textarea>
      <button >
        <svg
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="paper-plane"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            fill="currentColor"
            d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"
          />
        </svg>
      </button>
    </div>
  </body>
</html>

As you can see, I already inluded the tailwind styles in the header. We will use its classes later.
Then we define the heading area with a back button, a title and a menu button.
Right after the heading we create the area for messages with 3 hardcoded messages in it.

And at the bottom we create the message input area with a textarea and a button to send the message.

It will look something like that now:

Let's add styling now:

<html>
  <header>
    <title>Mobile Chat Layout</title>
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.0.5/dist/tailwind.min.css" />
  </header>
  <body>
    <div style="overscroll-behavior: none;">

      <!-- HEADING -->
      <div
        class="fixed w-full bg-green-400 h-16 pt-2 text-white flex justify-between shadow-md"
        style="top:0px; overscroll-behavior: none;"
      >
        <!-- back button -->
        <a href="#">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            class="w-12 h-12 my-1 text-green-100 ml-2"
          >
            <path
              class="text-green-100 fill-current"
              d="M9.41 11H17a1 1 0 0 1 0 2H9.41l2.3 2.3a1 1 0 1 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L9.4 11z"
            />
          </svg>
        </a>
        <div class="my-3 text-green-100 font-bold text-lg tracking-wide">@rallipi</div>
        <!-- 3 dots -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          class="icon-dots-vertical w-8 h-8 mt-2 mr-2"
        >
          <path
            class="text-green-100 fill-current"
            fill-rule="evenodd"
            d="M12 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
          />
        </svg>
      </div>

      <!-- MESSAGES -->
      <div class="mt-20 mb-16">

        <!-- SINGLE MESSAGE -->
        <div class="clearfix">
          <div
            class="bg-gray-300 w-3/4 mx-4 my-2 p-2 rounded-lg"
          >this is a basic mobile chat layout, build with tailwind css</div>
        </div>

        <!-- SINGLE MESSAGE 2 -->
        <div class="clearfix">
          <div
            class="bg-gray-300 w-3/4 mx-4 my-2 p-2 rounded-lg clearfix"
          >It will be used for a full tutorial about building a chat app with vue, tailwind and firebase.</div>
        </div>

        <!-- SINGLE MESSAGE 3 -->
        <div class="clearfix">
          <div
            class="bg-green-300 float-right w-3/4 mx-4 my-2 p-2 rounded-lg clearfix"
          >check my twitter to see when it will be released.</div>
        </div>
      </div>
    </div>

    <!-- MESSAGE INPUT AREA -->
    <div class="fixed w-full flex justify-between bg-green-100" style="bottom: 0px;">
      <textarea
        class="flex-grow m-2 py-2 px-4 mr-1 rounded-full border border-gray-300 bg-gray-200 resize-none"
        rows="1"
        placeholder="Message..."
        style="outline: none;"
      ></textarea>
      <button class="m-2" style="outline: none;">
        <svg
          class="svg-inline--fa text-green-400 fa-paper-plane fa-w-16 w-12 h-12 py-2 mr-2"
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="paper-plane"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            fill="currentColor"
            d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"
          />
        </svg>
      </button>
    </div>
  </body>
</html>

It should look like this now:

Not too muched changed. We just added some classes and it looks beautiful now :-)

Let's go through it:

The heading uses the full width, is fixed to the top, and is a flex container which positions its children with the same space between every element. It backgroundcolor is set to green and it has a little shadow.
For the buttons we're setting the size, some margin and the color.

The messages area only gets some top and bottom margin.

Every single message item is wrapped with the clearfix class. We need that to reset the float-right that we want to apply to some messages. We also set the background color, the width, some margin and padding and the border radius of each message element.

The input area is fixed to the bottom, uses the full width and distributes its children the same way as the heading does.
The textarea gets some padding, a background and text color and rounded borders.
The button, like the buttons in the header get a fixed size, a color and some padding.

That's it.

If you want to see it in action, here is a Codepen with the finished layout.

I think tailwindcss makes styling web pages a lot easier. I really like the philosophy behind it.

If you like this kind of quick tutorials, check out my twitter. I share more stuff like that there.

One VS code extension you should use when building and testing apis

Ralf 💥🔥☄️ — Tue, 05 May 2020 14:46:51 +0000

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

This simple extension made testing and building apis a lot easier for me. Before I found it, I was using Postman to test my apis. I wasn't very satisfied with the workflow...

Rest Client improved my worklflow significantly:

No more context switch. Easily test your api endpoints inside of vs code.
Define all your testable endpoints in one file No more searching and configuring of endpoints
check your rest api endpoints config into git You can check the file that contains your api endpoints into git. So every other developer that checks out the repository has instant access. No more sharing of postman config files.

Easily define your endpoints like this and hit "send request". Done.

POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}

That's it for today.
I share more quick tips about web development on twitter. So make sure to follow me there to stay up to date.