DEV Community: Martin J

What is your Supabase workflow? - Beginner question

Martin J — Thu, 17 Feb 2022 14:27:55 +0000

I'm a beginner who just started using Supabase (and postgres). I love it and for my needs, it feels like a step up from Firebase.

How do you work on Supabase with bigger projects?

What external tools can you recommend?
What best are the best practices when it comes to Supabase development?

So many of the articles I find are just about simple authentication or adding one function with basic row level security, but not too many dig much deeper than that.

I am finding it difficult to keep track of my functions, row level security rules etc.

I just found this awesome EU Banking API for personal use

Martin J — Sat, 22 Jan 2022 12:59:43 +0000

Background

I was looking to get a grip on my finances this year, but after looking into it I didn't find any apps suitable to my needs. I live in Poland and most of the offerings seem to be very US centric. I like data visualization so I figured it can't be that hard to roll out my own solution. Here's where I first learned about the concept of Open Banking and how I found Nordigen.
Despite the looks of this post, I am not affiliated with Nordigen in any way, I'm just very excited to play with my own financial data and see what I can come up with 😁🤑

What is Open Banking?

Open banking, under European PSD2 regulation, aims to democratize the access to financial data, increase competition in financial sector and drive innovation. The tldr is that banks in European Economic Area are required to provide standardized, open access to financial data. From what I see it's a fairly new and exciting field. It fully went into effect on 31st of Dec 2020.
I don't feel knowledgeable enough about the subject yet to provide definitive answers, I recommend reading these:

Wikipedia article about European Payment Services Directive
Investopedia about Open Banking
Nordigen on PSD2

Ok, but what's the deal with Nordigen.

Nordigen allows you to connect multiple bank accounts to their service and use their simple API to query it. I've just done it myself and considering that it's banking that we're talking about it was super easy. Anyone could do it.

Nordigen boasts that it's available in 31 EEA countries and allows connection to 2197 banks.

You can connect your banks and get a feel for it before using the API

Nordigen has a simple, pretty barebones dashboard for account information. You can connect your bank accounts and View Transactions as JSON

What do you think about it? Can you recommend any other bank/financial APIs or services?

Physics based character controller with Rapier.rs and Pixi

Martin J — Mon, 15 Nov 2021 14:31:13 +0000

Following up on my recent 'discovery' of the Rapier.rs physics engine I make the first attempt at a character controller.

Links:

Rigid-body choices for a character controller in Rapier.rs

Except for Static all other body types seem viable to make a controller, namely:

KinematicPositionBased
KinematicVelocityBased
Dynamic

Kinematic bodies allow us to set their Position and Velocity, so at a first glance, it sounds like they'd make a good controller. Unfortunately, they come with a few caveats, making them harder to use than you'd think. The biggest drawback for a quick and easy character controller is the fact that they don't interact with static bodies out of the gate and will clip through them. Not great if we want our characters to stick to walls and platforms. Rapier provides us with a lot of options to handle this drawback. Scene queries and hooks are quite robust, allowing the user to implement custom collision logic, but it's not something I want to get into before learning a bit more about the engine.

The last remaining choice, Dynamic is a fully-fledged body that interacts with the entire world.

Setup

To not make this article unnecessarily long, I will skip the world and renderer setup and instead link the Github repo for the project. It should be easy enough to follow and you're always welcome to hit me up with any questions you might have.

Before proceeding with character controller I setup:

rapier.rs physics world with gravity {x: 0, y: 0} - for the topdown experience
add walls to browser window bounds
spawn Dynamic objects for our character to interact with later, in this case, 100 randomly sized balls
render walls and balls with simple pixi.js graphics

Step by step

Steps to implement a simple keyboard and point to click controller:

Player body setup

Create a player physics body and place it in the middle of the screen with setTranslation



const body = world.createRigidBody(
  RAPIER.RigidBodyDesc.newDynamic().setTranslation(
    window.innerWidth / 2,
    window.innerHeight / 2
  )
);

Make a collider description so the body has shape and size. It needs it to interact with the world. For this example, we're going with a simple circle. Translation in this step describes the collider's relative position to the body.



const colliderDesc = new RAPIER.ColliderDesc(
  new RAPIER.Ball(12)
).setTranslation(0, 0);

Create a collider, attach it to the body and add the whole thing to the world.



const collider = world.createCollider(colliderDesc, body.handle);

Keyboard WASD control bindings

In later steps, we will move the player's body based on the provided direction. To get that we're going to set up a basic WASD control scheme with listeners listening to keydown and keyup. They will manipulate a direction vector:



const direction = {
  x: 0,
  y: 0,
};

When the key is pressed down, player begins to move:



window.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "w": {
      direction.y = -1;
      break;
    }
    case "s": {
      direction.y = 1;
      break;
    }
    case "a": {
      direction.x = -1;
      break;
    }
    case "d": {
      direction.x = 1;
      break;
    }
  }
});

Then, when the key is released, the movement on that particular axis (x or y) is set to 0.



window.addEventListener("keyup", (e) => {
  switch (e.key) {
    case "w": {
      direction.y = 0;
      break;
    }
    case "s": {
      direction.y = 0;
      break;
    }
    case "a": {
      direction.x = 0;
      break;
    }
    case "d": {
      direction.x = 0;
      break;
    }
  }
});

Moving the body

Now that we've made a way for us to input where the player has to go, it's time to make it happen. We will create an updatePlayer function that will have to be called every frame.

The most basic approach is as simple as the snippet below, we simply set the body's velocity to the direction.



const updatePlayer = () => {
  body.setLinvel(direction, true);
};

You might notice though, that the body isn't moving much. That's because we only set the direction vector to go from -1 to 1, and that isn't very fast. To combat that and make the code more reusable we add a MOVE_SPEED variable and multiply the x and y of the direction.



const MOVE_SPEED = 80;

const updatePlayer = () => {
  body.setLinvel(
    { x: direction.x * MOVE_SPEED, y: direction.y * MOVE_SPEED },
    true
  );
};

That's more like it!

Bonus method: Applying force to move the body
When I was playing around and writing this article I found another cool way to make our player's body move. Instead of setting the velocity directly, we "push" the body to make it go in the desired direction at the desired speed. It gives a smoother, more natural feeling movement right out of the gate.

The whole thing is just these few lines of code but it's a little more complicated than the previous example.

The concept is simple. We apply impulse in order to make the body move, but what if it starts going too fast or we want to stop?

We check the body's current velocity with const velocity = body.linvel();.Then, to determine what impulse should be applied next, we take the difference of the desired and current velocity for both axis direction.x * MOVE_SPEED - velocity.x. If the body is moving too fast or in the wrong direction, a counteracting impulse is applied. We multiply it by ACCELERATION constant to.. drumroll - make the body accelerate faster or slower.



const MOVE_SPEED = 80;
const ACCELERATION = 40;

const velocity = body.linvel();

const impulse = {
  x: (direction.x * MOVE_SPEED - velocity.x) * ACCELERATION,
  y: (direction.y * MOVE_SPEED - velocity.y) * ACCELERATION,
};
body.applyImpulse(impulse, true);

You can achieve a similar effect by using the velocity method and applying some form of easing.

Note: For simplicity, I use VELOCITY and ACCELERATION in relation to one value of the vector. So velocity with the value of 2 would look like this: {x: 2, y: 2}, where in reality velocity is almost always the length of such vector - const velocity = Math.sqrt(2**2 + 2**2) resulting in velocity of ~2.83!. This means that if we used my implementation in a game, moving diagonally would be 40% faster than going up and down!
TLDR; Use correct velocity, calculated for example with Pythagorem's theorem.

If you made it this far, thank you so much for reading. Let me know if you have any questions or maybe would like to see other things implemented.

This little known javascript physics library blew my mind!

Martin J — Mon, 01 Nov 2021 16:48:37 +0000

In my previous game dev attempts with javascript I always struggled with physics engine performance. I always defaulted to matter.js - it's good documentation and plentiful examples outweighed the performance gains of other available libraries. I was very excited when I first learned about WASM and near-native performance it provides, but for the longest time Box2D was the only viable choice in that area and I truely hated using it. It had poor documentation and felt very archaic to use.

Now, it seems like my woes might be over. In comes a new contender - Rapier.rs.

Rapier home

Rapier.rs is a rust physics library compiled to WASM with javscript bindings and good documentation. I was able to set it up in around 30 minutes and it provided an massive, instant boost to app performance.

Rapier remained more stable and allowed me to add thousands of more active physics bodies to the world.

Links:

Example from my last article with Rapier.rs instead of matter +300% performance LIVE
Github repo

Active bodies	Matter FPS	Rapier FPS
4500	38	120
6000	21	79
7500	4	60
9000	0 - crashed	42
10000	0 - crashed	31
12000	0 - crashed	22
15000	0 - crashed	16

Why you need to consider Rapier for your js physics needs

1. Performance

Javascript can't compare to an optimized Rust library compiled to WASM
WASM is just this fast

2. Documentation

Rapier page provides a good overview of the key features, information how to get started and an in-depth API documentation. All of this for Rust, Rust+bevy and Javascript.

3. Modern developer experience

I found Rapier API very intuitive to work with, imho making it by far the best choice out of the few performant. It comes with typescript support. Resulting code is readable and easy to reason with.

import("@dimforge/rapier2d").then((RAPIER) => {
  // Use the RAPIER module here.
  let gravity = { x: 0.0, y: 9.81 };
  let world = new RAPIER.World(gravity);

  // Create the ground
  let groundColliderDesc = RAPIER.ColliderDesc.cuboid(10.0, 0.1);
  world.createCollider(groundColliderDesc);

  // Create a dynamic rigid-body.
  let rigidBodyDesc = RAPIER.RigidBodyDesc.newDynamic().setTranslation(
    0.0,
    1.0
  );
  let rigidBody = world.createRigidBody(rigidBodyDesc);

  // Create a cuboid collider attached to the dynamic rigidBody.
  let colliderDesc = RAPIER.ColliderDesc.cuboid(0.5, 0.5);
  let collider = world.createCollider(colliderDesc, rigidBody.handle);

  // Game loop. Replace by your own game loop system.
  let gameLoop = () => {
    // Step the simulation forward.
    world.step();

    // Get and print the rigid-body's position.
    let position = rigidBody.translation();
    console.log("Rigid-body position: ", position.x, position.y);

    setTimeout(gameLoop, 16);
  };

  gameLoop();
});

4. Cross-platform determinism & snapshotting

Running the same simulation, with the same initial conditions on different machines or distributions of Rapier (rust/bevy/js) will yield the same result.
Easy data saving and restoring. - It is possible to take a snapshot of the whole physics world with world.takeSnapshot. This results in a byte array of type Uint8Array that may be saved on the disk, sent through the network, etc. The snapshot can then be restored with let world = World.restoreSnapshot(snapshot);.

What's next?

I am excited to keep working with Rapier, but in the meanwhile I think a proper physics benchmark is in order. The ones I've found while doing research were a bit dated.

Other: Vite usage errors

I've ran into some issues adding Rapier to my Vite project, the solution can be found here: https://github.com/dimforge/rapier.js/issues/49

Running JS physics in a webworker - proof of concept

Martin J — Sun, 31 Oct 2021 01:25:46 +0000

series: Exploring Javascript physics world

Web workers are a great way of offloading compute intensive tasks from the main thread. I have been interested in using them for quite a while, but none of the projects I worked on really justified using them. Until now! In this short series I'm going to explore using webworkers, physics, pixi.js and others to create interactive web experiences and games.

Live
Github

Webworkers tldr;

scripts that run in background threads
they communicate with the main thread by sending and receiving messages

In depth info, better than I could ever explain:

Why?

The benefits of using webworkers are undeniable. Most importantly it keeps main thread responsive. Frozen webpages and slow UI make for terrible user experience. In my case, even if the physics simulation slows down to 20-30 fps, mainthread renderer still runs at a constant 144 fps. It helps keep animations nice and juicy and the page responsive to user inputs.

I am guilty of making very CPU intensive terrain generation in the past, it would freeze a user's browser for 2-3 seconds and it was terrible.

Proof of concept implementation:

This is not a step by step tutorial, I wanted to keep this article more conceptual and code-light. You should be able to follow my Spaghetti code in the project repo.

1. Vite bundler

I decided against using any framework to avoid unnecessary complexity. For my bundler I decided to use Vite since I was familiar with it and the provided vanilla Typescript template. It provides an easy way to import webworkers and their dependencies even from Typescript files.

2. Pixi.js renderer

Pixi.js is a fairly easy to use WebGL renderer. It will show what we're doing on screen. Everything I'm doing can be replicated by copying one of the examples. All you need is to:

setup the renderer
load texture and make sprites
update sprite position and angle in the ticker

3. Finally, making the worker!

make a file with a worker, like physicsWorker.ts. Code gets executed on worker load.
import and initialize the worker in the main thread - vite docs
from now on you can setup listeners and send messages between main thread and the worker

4. Physics engine in the worker.

Matter.js is a 2D physics engine I've decided to use. It's far from being the most performant, but it's user friendly and helps keep code complexity down.

Engine, World and a 'gameloop' get created when web worker is loaded. Gameloop is a function that continuously runs and calls Engine.update(physics.engine, delta);

5. Communication & command pattern

Like I mentioned before, worker and the thread communicate with messages. I found this to be a natural fit for a command pattern.

Actor (either main or worker thread) sends an object that has all information required to perform an action by the subject. I decided to structure my commands like below.

const command = {
  type: "ADD_BODY",
  data: {
    x: 0,
    y: 0,
    width: 10,
    height: 10,
    options: {
      restitution: 0,
    },
  },
};

To send the above command, main thread calls worker.postMessage(command);. For a worker to receive it, we need to set up a listener.

// Worker has to call 'self' to send and receive
self.addEventListener("message", (e) => {
  const message = e.data || e;

  // Worker receives a command to ADD_BODY
  if (message.type == "ADD_BODY") {
    // it does stuff
    const { x, y, width, height, options } = message.data;
    const body = physics.addBody(x, y, width, height, options);

    // Worker sends a command to main thread (BODY_CREATED)
    // it will be used to spawn a sprite
    self.postMessage({
      type: "BODY_CREATED",
      data: {
        id: body.id,
        x,
        y,
        width,
        height,
        angle: 0,
        sprite: undefined,
      },
    });
  }
});

Here's a general overview of how this example works

6. Features explained

Create body

Main thread sends a command ADD_BODY with position, width, height and physics options
When worker thread receives an ADD_BODY it adds the body with given parameters to the world
After body is added, worker sends BODY_CREATED command back to main thread. The most important part of this message is the id. This is how technically unrelated javascript objects (body in worker and sprite in main) will sync. It also sends width, height, position, angle
When main thread receives BODY_CREATED position it creates an object containing the data received as well as a PIXI.Sprite it assigns to it.

Synchronising object position between physics engine and renderer

each frame physics engine sends command BODY_SYNC, it contains position and angle of every body in the physics world. It's stored in the hashmap format, with body id being the key.

const data: any = {};

for (const body of world.bodies) {
  data[body] = {
    x: body.position.x,
    y: body.position.y,
    angle: body.angle,
  };
}
self.postMessage({
  type: "BODY_SYNC",
  data,
});

mainthread receives the body BODY_SYNC. It loops over every body previously added and updates it.

if (e.data.type == "BODY_SYNC") {
  const physData = e.data.data;

  bodySyncDelta = e.data.delta;

  for (const obj of physicsObjects) {
    const { x, y, angle } = physData[obj.id];
    if (!obj.sprite) return;
    obj.sprite.position.x = x;
    obj.sprite.position.y = y;
    obj.sprite.rotation = angle;
  }
}

It works!

What went wrong:

Physics performance is lacking, but there are a lot of good areas for improvement.
Sometimes objects got out of bounds and kept flying into x,y coords of 10000+, causing slowdown and eventual crash. I quickly dealt with it by freezing any object whose coordinate is more than 3000, it's not a perfect solution and something to look out for in the future.
Simple command pattern worked fine here but it could get very complex in some use cases

Future improvement considerations

1. Matter.js is slow

According to this outdated benchmark matter.js is one of the slowest available javascript physics engines. It's performance has improved since then, but there are other alternatives. I am especially interested in WASM libraries with js binding, like

box2dwasm - an old, still maintained C++ library compiled to WASM. The documentation is lacking and developer experience seems poor.
rapier.rs - modern physics library written in Rust. It looks good and performant, at a first glance dev experience is a lot better than box2d. Documentation gives me hope!

In general, chosing a WASM engine over JS one should yield large performance gain.

2. Webworker messages

Sending large amounts of data at high frequency (gameloop) between worker and mainthread with messages can cause large performance drops.

In depth dive into the issue: "Is postmessage slow?" - surma.dev

Approaches to consider:

JSON.stringify then JSON.parse of the data (this doesn't seem to boost performance for my usecase)
Using ArrayBuffer and transfering ownership between worker and main
Using SharedArrayBuffer so the origin retains ownership and both threads can access the data with Atomics

I guess it's time for my own benchmark!

3. Using a webworker library instead of vanilla implementation

I can imagine that communication with vanilla webworkers could get very complex. Comlink is something that's been on my list for a while and I'd like to try it out.

From the Comlink Github page:

Comlink makes WebWorkers enjoyable. Comlink is a tiny library (1.1kB), that removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers.

At a more abstract level it is an RPC implementation for postMessage and ES6 Proxies.

4. Renderer interpolation

If the use case doesn't call for more, I could keep the physics engine locked at 30 or 60 fps. The issue with this, is that the movement will look 'choppy'.
I could use interpolation and use available position and velocity data to 'predict' object movement and generate the frames up to say 144fps for smooth animations.

The end.

This turned out much longer than I expected. More to come?

Part 1 - Making a portfolio with SvelteKit - the beginning 1/100DaysOfCode

Martin J — Sat, 19 Jun 2021 18:35:57 +0000

Part 1 of a journey to making my portfolio. This post will be boring as hell, but hopefully it's a beginning of a fairly interesting series.

Finally getting it together and making a portfolio with my work.

I have been learning and playing with webdev for close to three years, but I never took it to another level. I have been (and as of the time of publishing this, still am) working a stable, boring office job.
Working remote for over a year helped me gain some clarity and look inwards. My personal goals and plans don't align with my current employment, and it's relative safety has placated my hunger for pursuit of what I want, and what I want is TECH. I love modern technologies and am very passionate, nay - have an insatiable hunger for learning new things and solving puzzles.

SvelteKit 😍

At the current stage it's a very barebones page with no real content, but I have already learned so much:

Basics of SvelteKit- I have already been quite familiar with Svelte so it was quite easy to jump in. So far I'm really enjoying the framework and would strongly recommend for anyone to check it out.
Very simple CI wiith Netlify
setting up a domain through Porkbun

Other than showcasing my work and writings, I am going to keep myself accountable and attempt to keep as close to 100 lighthouse score as possible and follow best practices.

It's live on (https://jerzakm.com)

Roadmap - next up:

reviving a few of the projects from my project graveyard (AKA my github account)
figuring out what content management system I want to use and hooking it up
Accessibility. I can't wait to read more about it and start applying what I learned. InHuOffficial's A11y rants are awesome.

.ltag__user__id__551686 .follow-action-button { background-color: #c62aa4 !important; color: #131111 !important; border-color: #c62aa4 !important; }

InHuOfficialFollow

Specialising in accessibility and website load speed / performance. If you have a question about [accessibility] or [page-speed-insights] ask away and I will help any way I can!

100 Days of Code

This post also marks my entry and first day of progress for #100DaysOfCode

Changes to project dependencies

Martin J — Wed, 20 May 2020 16:03:35 +0000

What do you do when your project requires you to make changes to code of one of the dependencies?

I'm a beginner developer and I've come across an issue in one of the packages I'm using. It was a pretty straightforward fix but it had lead me to wonder how to make the change clear and lasting. How do you deal with situations like this and what is the 'correct' way of going about it?

Two most common solutions I found were:

fork it
patch-package

I disliked forking the required dependency and building it myself. My github is already a mess and I feel like I don't need any more repos floating around, so I went with the other solution - patch-package. it 'lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.'

It's very simple to use:

in package.json add a script: "postinstall": "patch-package"
npm i patch-package
make changes to the package
run npx patch-package package-name
Et voilà! You're done.

So what happened?

It created a patches directory and inside of it you can find a diff like file. You can now commit these changes and apply the small patch with a npm script.

Illustrated journey of what happened.

Oh no, big error

Sherlock mode activated 🕵️‍♂️

I found the issue (https://github.com/sveltejs/svelte/issues/2086). Some of my dynamically creating and swapping around components that also had a a few reactive, dynamically created components inside of them.

I added a simple if statement to check if node.parentNode exists and that was it.

 function detach(node) {
    if (node.parentNode) {
        node.parentNode.removeChild(node);
    } else {
        console.warn('Error: patch-package: svelte detach failed')
    }
 }

Later I revisited this small tweak and added a console.warn to see when the error occurs in case it causes other issues down the line.

Now my first portfolio project is very close to being finished.

I'm working on a webapp that applies shader filters to images. WebGL + Svelte 🥰

Making pixel art with shaders is the most fun I've had with it. Here's the Giant's Causeway

And here it is after applying Color Palette limtier, Pixelate and Bloom shaders. FullRez Link

What do you use for prototyping data structures?

Martin J — Mon, 13 Jan 2020 13:45:42 +0000

So far I've mostly used pen&paper. Tools for designing the data structure or graphing felt either a bit clunky or way too complex for my needs.

What about you?

Recently, since I picked up typescript I found using interfaces just for this purpose to be quite useful.


interface User {
    id: string
    email: string
    location: Location
    avatar: string
    name: string
    geoBin: string //uber h3?
    friends: string[] //friend user id array
}

/**
 * Can even use jsdoc for stuff
 */
interface Location {
    longitude: number
    latitude: number
}

interface Listing {
    owner: string //userId
    created: number //ts
    updated: number //ts
    geoBin: Location
    system: string[] //array or string, array for more
    online: boolean
    description: string //markdown
}

Estimating user's GPU performance capabilities

Martin J — Sat, 21 Dec 2019 15:12:48 +0000

I slowly started making my portfolio site and I want to use Three.js and shaders. I feel like I should have some sort of a fallback for mobile and low-end PCs..

How do you adjust your web content to match client machine's performance?

Currently for the sake of testing I put a pretty compute heavy shader that works fine on my home PC, but completely chunks down my mobile and office PCs:
https://www.jerzakm.com/

Option 1: WEBGL_debug_renderer_info

Webgl context allows us to accurately (In most cases) get user's GPU. Sounds great but from a first glance it has two disadvantages:

User privacy. Knowing precise GPU model allows for ad targeting and unnecessary data mining.
Keeping it up to date. New GPUs come out all the time, and it would become necessary to update GPU list and benchmarks.

There are libraries already available that do precisely that, but I'm not 100% happy with any of them.
detect-gpu

Option 2: Rendering a few first frames off-screen and checking performance before deciding how to proceed

This takes care of privacy issues, but requires loading potentially unnecessary libraries and causing a browser freeze on first load.

Impostor to a poster. Prologue to a career change.

Martin J — Sun, 08 Dec 2019 12:20:45 +0000

Unnecessarily long background intro.

Scroll if you like images more

I've been a geek and the 'computer guy' of the family for pretty much my whole life. Everyone thought I'm going to study Computer Science, Engineering, Robotics or something similar, but that never happened. Throughout my late teens and early 20s, a mix of bad decisions and life kicking me in the butt has successfully kept me in dead-end low paying jobs.

I caught a break when I started working for an online store. I began as an intern but rose up in the ranks quickly to become a sales executive responsible for a solid chunk of change. It's a relatively small company, so I get to influence product design, liaison with manufacturers from China, acquire new international clients and oversee general sales strategy for my products.

Unlike in my previous jobs, I don't have a set of responsibilities assigned for every waking minute of my workday. I get to assign my own goals and work at my own pace. Quite quickly I noticed how inefficient our office runs, and how massive the tech debt has gotten at this point. I started doing some Java tutorials during my work hours and not long after I parsed CSVs and built data visualizations like there was no tomorrow. That was a little over two years ago. Since then I expanded and used my newfound coding skills countless of times and by now saved hundreds of manhours.

Over time, as my tasks at work have become more repetitive. I love discovering new things and reaching my goals, but hardly anything new ever happens here. It must have been about a year ago that I've decided to shape up my coding skills and go through with a career change.

Without a shadow of a doubt, I have greatly improved since then. I touched on just about every buzzword out there and I can hold my own in a tech conversation, yet I still didn't apply for a single position. My cushy job is holding me back. I live in a small town and I'd likely have to relocate for any tech job. I don't particularly mind moving. At the same time though, the prospect of having to move and the fact that it would be a while until I'd get equal or larger salary than that of my sales exec job has successfully dissuaded me from trying to apply.

What if I'm not good enough? Maybe if I just learn one more library or a framework it will be enough. The impostor syndrome was real. That's when I read some stories from dev.to community and watched youtube videos about when one could get a first coding job and..

I should have applied a long time ago.

I think I'll hate myself If I'm still in sales in a few years. I love solving problems, discovering new things and I think quick on my feet. Anything mundane and commonplace bores me, it sucks the soul out of me. When I solve problems with coding sparks fly and unicorns gallop across the rainbow-filled sky.

Imo, this looks like a GitHub of a person who shouldn't be afraid to apply.

A few weeks ago I took part in a Ludum Dare game jam, and I have gotten a lot of great feedback. What I lacked in skill, I made up for with cheap humour and it turned out a lot better than I could have imagined. I made a Ludum Dare Simulator, a card game about people making games for the LD gamejam. So. Meta.

What I lacked in skill, I made up for with cheap humour.

Writing code for myself and never showing it to the world was a mistake.

I'm oddly proud of this one. Don't open if you're an orc right activist. Why is it cool? Pixi.js webgl renderer, orc bodies splinter dynamically based on where the arrow hits them, arrow & orc physics with matter.js, custom blood emitter. It's not hosted anywhere right now, I broke it a little but it's high on my TODO list.

My GitHub is a mess and I don't have a working portfolio as of yet, but I decided to get it all sorted out throughout this year's holiday season and start applying right after new years.

I plan to share my experience, post tutorials and stuff about cool things I encounter on my journey.

Next stop - portfolio to show off my skills.