Hello World!

Is there a way to build a fully functioning frontend that consumes APIs but doesn't break when there's no connection or the server is down?

Or maybe you want to run automated tests for your frontend while keeping it completely decoupled from any backend?

I've spent countless hours trying all kinds of solutions and while I’ve already achieved this through other means, I’ve found that the hardest part is always generating the data because most of the time, data from one API call is tightly coupled with data from others, so you end up needing logic to maintain those relationships.

As an exercise, I built a request recorder tool that acts as a transparent proxy between the frontend and backend APIs. It can record actual fetch requests, store them in IndexedDB, and then replay them from storage when running in "fake" mode.

This could be extended further, for example, the request interceptor could fake (faker.js?) specific properties (not implemented yet).

The recordings can be exported/imported as JSON files.

Link to source code and example:

request-recorder

See it in action:

Basic React.js app using the Pokemon API

https://pokeapi.co

A quick and effective way to understand the structure of a database is by examining its Entity-Relationship (ER) Diagram.

I use DBeaver and I find this feature, within it, very useful.

When designing a database, being able to visualize its structure makes the process a lot easier. In the beginning it's like sketching for a painting: add or delete columns, countless name changes, deciding on the data types, create foreign keys and set up indexes. Visualizing all these components in a diagram greatly simplifies the process, and the ability to export the structure as SQL is a pretty cool trick.

While such tools already exist, I wanted to create my own version as a personal exercise.

The result is the DB Diagram tool, developed using React, Typescript, and, most importantly, React Flow.

Link to source code:

https://github.com/irosgrim/db-diagram

In action:

db-diagram

Sokoban is one of the first games I had installed on my first PC and I remember having lots of fun playing it. In tribute to this classic puzzle game, I've developed my own version.

Creating maps by hand was a painful process, so it made sense to built a level editor as well.

I used this mini game as an opportunity to experiment with:

• event bus architecture
• scaling canvas
• working with sprites
• input control

Link to source code:

sokoban

In action:

There's no reason to avoid using just HTML, CSS, and JS. In fact, most of the time, these are the only tools required to create websites. That's why I decided against using any front-end framework for this site. Instead, I opted to create all the posts as Markdown files, which will be parsed upon pushing to the repository using GitHub Actions.

Link to source code:

irosgrim.github.io

As a child, one of the toys I had was a sliding-numbers puzzle. It consisted of a simple plastic frame containing 8 numbered squares that could move one spot at a time. To solve the puzzle, you had to slide each square, one by one, into the free space until all the numbers were in order:

1 2 3 
4 5 6 
7 8  

Link to source code:

sliding-numbers-puzzle

In action but with 15 numbers instead:

I wanted to see how easy/hard is to do a state manager that would work with React.js. There is no reason for this to not work equally well with any other front-end library. Is this an adequate solution? I don't know but I successfully used it in some of React.js experiments and had no noticeable issues. The code is pretty straight forward and the idea is based on the Observer Pattern.

Check the source code for more details

Link to source code:

react-state-manager

I decided to make it into a npm package.

Link to package:

NPM react-state-manager

In action:

I frequently turn to Codepen or browser dev tools to swiftly test out a new idea.

My requirements are straightforward:

• I want to draft JavaScript code quickly.
• I want immediate visibility of the output.
• I want to share my concept effortlessly.
• I don't want to rely on specialized tools.
• I want to embed it on any desired page.
• I want the flexibility to embed a code snippet and also edit it.
• It have to be super simple.

Since I also wanted some basic syntax highlighting, indentation, themes, etc, I used Codemirror but the playground works equally well just with a textarea element.

Link to source code:

js-playground

In action:

Just a tic-tac-toe game experiment.

Link to source code:

tic-tac-toe

In action:

While creating small, simple games in Vanilla JavaScript and without dependencies, I started to realize that mobile control is close to impossible. Here is a mobile virtual joystick experiment.

The only game i'm using this code in is my Snek game for now but soon I will use it in more.

Link to source code:

virtual joystick

In action:

NOTE: only working on mobile devices.

One of the first games I played on a mobile phone was The snake. It was on Nokia phone, long time ago. Here is an exercise where I wanted to apply a few ideas:

• having obstacles generated from .png files:
• being able to destroy obstacles. You get "bullets" by eating specific type of food

Of course, like most of the stuff on this page, unpolished, unfinished.

Link to source code:

snek

In action:

Refreshing the page will generate new obstacles.

Shoot by pressing Space key.

A popular initial programming exercise often recommended in schools is to build a calculator.

Building a calculator is a pretty fun experience; you have the flexibility to make it as basic or intricate as you want.

In JavaScript, many (including me), are tempted to use the eval function, given its direct approach to evaluating arithmetic expressions. However, a better alternative exists in the form of the shunting yard algorithm.

Link to source code:

calculator using shunting yard algorithm

In action:

Yet another small experiment. A partial clone of the Space Invaders.

Link to source code:

invaders

In action:

NOTE: at the time I built this game, I did not take in consideration touch control so it only works with a keyboard.

A simple date range picker component, made with Vue.js. Inspired by Airbnb date picker.

Link to source code:

date-picker

In action: