DEV Community: Mr. Linxed

Nexus - An analytics tool for Threads

Mr. Linxed — Fri, 16 Aug 2024 05:37:55 +0000

TL;DR: If you don't feel like reading all of this and just want to try out the app. Scroll to the end.

A couple of weeks ago I decided to try out Threads. Which in case you've been living under a rock, is Meta's attempt at making a competitor for Twitter/X.

And so far I am having a great time over there. The vibe seems to be much friendlier than on Twitter/X and there are actually interesting discussions going on.

However, when I joined there seemed to be missing a very important function and this function is; Analytics.

It was very hard to see how well my posts were doing. You could click on individual posts and see how many views they got. But that's about it.

Therefore I decided to make my own tool utilizing their API. I do have to mention here, that in recent days Threads has announced its own Analytics, or as they call it; insights. But this is at the moment not yet available for everyone. And since I was already quite far into building my tool, I still wanted to share it.

The stack

For this project, I chose a stack I am very comfortable with.

As my back-end/API, I am using ExpressJS with Typeorm and Zod on Node.
And for the front end, I use Vue with Pinia bundled with Vite.

Features

I've implemented a few features for now, but not everything I want to make eventually. It was important to me to get a test version out for people to use and provide me with some early feedback.

Basic insights

This was the first feature I implemented. It shows your username with followers. And below that, you'll find 5 important stats over your overall Threads account. Compared to the previous 7 days. It's nice to see how you're doing compared to past periods.

One thing I will still add to this is the option to select your own period instead of having it fixed to 7 days.

Activity Tracker

Inspired by GitHub's activity graph, I've implemented my own. This currently only counts your posts, not replies. This is because Threads seem to treat these as different things and you need to call 2 different endpoints to get this information.

I added a little disclaimer that it can be slow to load. Because this graph has to load in all your posts of last year. On my shortlist, I have written that I will improve this by saving into a DB the post counts into a DB. Usually, post counts don't change anymore for days in the past. This way I only have to check occasionally if something has changed, and this can be done asynchronous from user interaction

Demographics

Another useful feature is the ability to see who follows you. Other info that I'll add at a later date are the top 10 countries and top 10 cities.

Threads list

Last, but not least. A list of your own Threads sorted by most recent first. Where each post shows immediately how many views it has and the other common stats.

Dark mode

Initially, I made this application exclusively in light mode. But I kept being annoyed at it every time I was working on it during evenings. Switching from my dark editor to the light screen was frustrating. So I quickly added dark mode.

Luckily this was quite simple as my components are few and quite simple.

How to use it.

Right now, I will still need to manually add you to the list of testers. You need a Threads account for this. Drop your username in the comments, or ping me on Threads

After that, you'll need to accept the invite in your Threads App:
Settings > Account > Website Permissions > Invitations

After that, you can head towards https://nexus.mrlinxed.com/ and start using it!

I am aware it's a bit annoying however, Threads recommends having your app feature complete before submitting it and having it approved, as it might disapprove incomplete apps.

If you are willing to help me test it and provide feedback; thank you so much. I appreciate it a lot.

That's it for now, have a lovely day!

PixiJS Setup with Vite and TypeScript

Mr. Linxed ・ Apr 20

#webdev #javascript #beginners #tutorial

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

Don't forget to sign up for my newsletter to be the first to know about updates for Nexus and other future projects.

I added an RSS Feed – You Should Too!

Mr. Linxed — Thu, 01 Aug 2024 08:00:00 +0000

RSS feeds, aren't those like from 2005?

I hear you ask. And I guess in a way you are right! But hear me out okay!

Let's start with what an RSS feed is.

What is an RSS feed?

RSS stands for "Really Simple Syndication".. whatever that means. It's simply put, an XML feed with all your latest posts. And the user can use it to quickly and periodically check if you have new content on your website. You can almost compare it with a sitemap.

Even GitHub provides RSS feeds for repositories, so you can be updated on releases, commits or issues!

Why would you still use it?

There are still plenty of tools out there that utilize RSS feeds from various websites. Including a bunch of tools where a user can combine RSS feeds from multiple websites they want to follow and they'll get updates whenever there is a new post on any of them.

You could see it as a social media feed but with blog posts

Instead of following your favourite author on Threads or X, and having to deal with a bunch of junk, content that the platform thinks you like or ads. You can curate your feed and only receive what you care about. Quality blog posts.

Did you know that dev.to also provides an RSS feed for individual authors?

Is it worth my time to implement?

As with everything... it depends.

Depending on how complicated your system is, it could range from no effort to some effort.

If you have a blog on WordPress for example, it's no effort at all, you can add /feed/ at the end of your category, tags and author collections

I think, if it is little effort for you to add an RSS feed to your site, you should do it.

After all, it is another way of getting your content in front of more people.

For me, it took me under 45 minutes to implement it into my site. This is because my site is fully custom. I don't think I wasted this time adding this feature since it is useful, and fun to create and I learned something.

I hope this has inspired you to also add an RSS feed to your site if you haven't yet.

And if you're a person who uses RSS feeds, feel free to add mine!

Space Defender - part 5 - Game States

Mr. Linxed — Sat, 20 Jul 2024 14:25:00 +0000

In the previous post we've made use of the HUD and now our game is basically done, but it's missing a few things. We need to add a game over screen with a way to restart the game. We also want to add a screen when you just started the game, instead of just starting the game right away.

Game States

We're going to add a few game states to our game. We're going to have a gameState enum that will hold the different states of the game. We'll also have a variable that holds the current state of the game.

Add the following code right at the beginning of your main.ts file:



enum gameStates {
    "PLAYING",
    "PAUSED",
    "GAME_OVER"
}
let gameState = gameStates.PAUSED;

This code creates an enum called gameStates that holds the different states of the game. We then create a variable called gameState that holds the current state of the game. We set the initial state to PAUSED.

Before we do anything with these states, we need a reset function. This function will be called right before we start the game. Add the following code to the bottom of your main.ts file:



function resetGame() {
    lives = 3;
    level = 1;
    score = 0;
    setHudValue("gameLives", lives);
    setHudValue("gameLevel", level);
    setHudValue("gameScore", score);
    Player.x = app.screen.width / 2 - Player.width / 2;
    Player.y = app.screen.height - 50;
    bullets.forEach(bullet => app.stage.removeChild(bullet));
    enemies.forEach(enemy => app.stage.removeChild(enemy));
    bullets.length = 0;
    enemies.length = 0;
    setEnemySpawnInterval();
    spawnEnemy();
}

This will set all the values to their initial starting values, clear the bullets and enemies from the stage and the arrays, reset the player's position, and set the enemy spawn interval. Then start the game by spawning an enemy.

Now that that's set, let's add a way to start the game.

Starting the game

We're going to add a new KeyHandler for that. Add the following code right after where we defined the KeyHandler for the left and right arrow keys:



KeyHandler(
    "Enter",
    () => {
        if(gameState !== gameStates.PLAYING) {
            if(gameState === gameStates.GAME_OVER) {
                resetGame();
            }
            gameState = gameStates.PLAYING;
            togglePauseText();
        }
    }
);

This code will start the game when the player presses the Enter key. If the game is not in the PLAYING state, it will set the game state to PLAYING. If the game is in the GAME_OVER state, it will reset the game and then set the game state to PLAYING.

But the player wouldn't know this, so we need some text to tell the player what to do. Add the following code right after where we defined the KeyHandlers



// A simple text style, 24px white text
const textsStyle = {
    fontSize: 24,
    fill: 0xFFFFFF
};

let startGameText = new PIXI.Text({
    text: 'Press enter to start the game',
    style: textsStyle
});

startGameText.y = 250;

function togglePauseText() {
    if(gameState === gameStates.PAUSED || gameState === gameStates.GAME_OVER) {
        // Since the text can change, we need to reposition it.
        startGameText.x = app.screen.width / 2 - startGameText.width / 2;
        app.stage.addChild(startGameText);
    } else {
        app.stage.removeChild(startGameText);
    }
}
togglePauseText();

This code creates a new text object that says "Press enter to start the game" and positions it in the middle of the screen. It then creates a function called togglePauseText that will show or hide the text based on the current game state. It then calls this function to show the text when the game is paused or over.

Now, we would also like to pause the game.

Pausing the game

Add the following code right after where we defined the KeyHandler for the left and right arrow keys:



KeyHandler(
    "Escape",
    () => {
        if(gameState !== gameStates.PAUSED) {
            gameState = gameStates.PAUSED;
            startGameText.text = 'Press enter to resume the game';
            togglePauseText();
        }
    }
);

In this code we'll set the gameState to PAUSED when the player presses the Escape key. We'll also reuse the startGameText object and set the text to "Press enter to resume the game".

Using the game states

Great, now that we can toggle between PLAYING and PAUSED states, let's actually use these states, and have the game act accordingly.

If we're not in the PLAYING state, we don't want to set the playerSpeed when the player presses the left or right arrow keys. Add the following code into the KeyHandlers where we set the playerSpeedX to 500 or -500 for the left and right arrow keys:



if (gameState !== gameStates.PLAYING) {
    return;
}

Also add the above code into the handler for the spacebar KeyHandler, so that the player can't shoot when the game is paused or over.

Next, update the if statement in the spawnEnemy function to look like this:



if(!document.hasFocus() || gameState !== gameStates.PLAYING) {
    return;
}

And finally, the whole game loop doesn't need to fire if we're paused, add the following code right at the beginning of the game loop:



if(gameState !== gameStates.PLAYING) {
    return;
}

Game Over

Now that we have a way to start and pause the game, let's add a game over screen.

Where now we have a console.log("Game Over"), we want to set the game state to GAME_OVER and show a game over text. Replace the console.log with the following code:



gameState = gameStates.GAME_OVER;
startGameText.text = 'Press enter to restart the game';
scoreText.text = `Score: ${score}`;
scoreText.x = app.screen.width / 2 - scoreText.width / 2;
app.stage.addChild(gameOverText);
togglePauseText();
app.stage.addChild(scoreText);

This code is using two more text objects that we haven't created that yet, lets do that.

Right after where we created the startGameText object, add the following code:



let gameOverText = new PIXI.Text({
    text: 'GAME OVER',
    style: textsStyle
});

gameOverText.x = app.screen.width / 2 - gameOverText.width / 2;
gameOverText.y = 200;

let scoreText = new PIXI.Text({
    text: 'Score: 0',
    style: textsStyle
});

scoreText.y = 300;

Now, we should be able to play the game, pause it, and restart it when we lose.

Conclusion

And that's it! You can now play the game, pause it, and restart it when you lose.

I am aware that this last part might have been a bit overwhelming, but I hope you managed to follow along and understand everything, don't forget you can always check out the full source code. If you have any questions or feedback, feel free to reach out to me on X or leave a comment below

And this is the final part of this small series, I hope you enjoyed it and learned something new. A small thing I'd like to point out while leaving you with this, is that this is a very basic game, and there are many ways to improve it. You could add more enemies, power-ups, different levels, and so on. I encourage you to experiment and try new things, that's how you learn and grow as a developer.

Also, the way this game is structured is not the best way to structure a game, but for the purpose of this tutorial, I wanted to keep it simple and in one file. In a future tutorial, I might show you how to structure a game in a more scalable way.

Thank you for reading all the way through this tutorial!

PixiJS Setup with Vite and TypeScript

Mr. Linxed ・ Apr 20

#webdev #javascript #beginners #tutorial

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.

Space Defender - part 4 - Adding a HUD

Mr. Linxed — Sat, 20 Jul 2024 14:20:00 +0000

In the previous part we created the enemies and shot them down. In this part we'll add a HUD (Heads Up Display) to show the player's lives, level, and score.

Adding a HUD

We're going to add a HUD to the game. This will show the player's lives, level, and score. We'll use a simple HTML structure for this, and some CSS to make it look nice.
In bigger games the HUD is usually part of the game canvas, but for this tutorial we'll keep it separate to keep things simple.

In part 1 we already added all the HTML and CSS. So we don't need to do that again. Now we'll just need to update the values in the HUD.

Creating the update function

To do this we'll create a new helper function that we'll use to write out values to the HUD. Add the following code to the bottom of your main.ts file:



function setHudValue(targetId: string, value: number) {
    const target = document.getElementById(targetId);
    if(target) {
        target.innerText = value.toString();
    }
}

This function takes two arguments, the id of the element we want to update and the value we want to set it to. It then finds the element by id and sets the inner text to the value.

Starting values

We also need to set the starting values for the player's lives, level, and score. Add the following code right after where you defined the bullets array:



let lives = 3;
let level = 1;
let score = 0;

setHudValue("gameLives", lives);
setHudValue("gameLevel", level);
setHudValue("gameScore", score);

This code sets the starting values for the player's lives, level, and score. It then updates the HUD with these values.

Updating our lives

Now we'll update the lives value when the player fails to shoot down the enemy and the enemy reaches the bottom of the screen.
In our gameloop, where we check if the enemy is off the screen, update the code to look like this:



if(enemy.y > app.screen.height + 50) {
    app.stage.removeChild(enemy);
    enemies.splice(i, 1);
    // New code
    lives--;
    setHudValue("gameLives", lives);
    // End new code
}

And at the end of the gameloop we'll add this piece of code as a placeholder for when we have a proper game over state



if(lives <= 0) {
    console.log("Game Over");
}

Right now the game doesn't actually end when we run out of lives, but we'll fix that in the next part.

Updating the score

We're going to give the player 100 points for every enemy they shoot down. In the part where we check if a bullet hits an enemy, update the code to look like this:



if(
    bullet.x > enemy.x &&
    bullet.x < enemy.x + 50 &&
    bullet.y > enemy.y &&
    bullet.y < enemy.y + 25
) {
    app.stage.removeChild(bullet);
    app.stage.removeChild(enemy);
    bullets.splice(i, 1);
    enemies.splice(j, 1);
    // New code
    score += 90 + (level * 10); // Starts at 100
    setHudValue("gameScore", score);
    // End new code
}

This code will give the player 100 points for every enemy they shoot down. The score is then updated and the HUD is updated with the new score.
This also includes a bit of logic that when the level goes up, the player gets more points for shooting down an enemy.

Updating the level

The level goes up every time the player reaches a certain score. The level is also what makes the game harder over time. Add the following code to the end of the gameloop:



// The score requirement gets higher every level
if(score >= (level * 1000) + (level * 100) - 100) {
    level++;
    setHudValue("gameLevel", level);
    setEnemySpawnInterval();
}

The first level requires 1000 points to reach. Every level after that requires 100 more points than the previous level.
To make the game actually harder as the levels go up, we'll also call a method called setEnemySpawnInterval that we'll create in a bit.

Find the follow line of code: setInterval(spawnEnemy, enemySpawnInterval);
And replace it with this:



function setEnemySpawnInterval() {
    spawnInterval && clearInterval(spawnInterval);
    // Starts at 1 enemy every 2.5 seconds
    spawnInterval = setInterval(spawnEnemy, enemySpawnInterval - (level * 100) + 100);
}
setEnemySpawnInterval();

This code will clear the current interval and set a new one with a shorter interval every time the level goes up. This will make the game harder over time.
Because of this the game will be impossible at a certain point as enemies will spawn too fast. But that's okay for this game.

And that's it! You now have a game where you can move left and right, shoot bullets, and shoot down enemies. And you have a HUD that shows the player's lives, level, and score.

In the next part we're going to add some state to the game and make it so that the game actually ends when the player runs out of lives.

PixiJS Setup with Vite and TypeScript

Mr. Linxed ・ Apr 20

#webdev #javascript #beginners #tutorial

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.

Space Defender - part 3 - the enemies

Mr. Linxed — Sat, 20 Jul 2024 14:15:00 +0000

In the last part we created the player's ship and made it move. In this part we'll create the enemies and make them move. And then we'll shoot them down!

Creating the enemies

We're going to do something similar as when we created the bullets. We're going to create a template enemy that we'll clone every time we want to create a new enemy. We also need to keep track of the enemies via an array because there can be more than one at the same time.

But first, we'll create the method that creates the enemy. Add the following code after the createBullet method:



let enemyTemplate: PIXI.Graphics | undefined = undefined;
function createEnemy() {
    if(!enemyTemplate) {
        enemyTemplate = new Graphics();
        enemyTemplate
            .poly([
                0, 0,
                50, 0,
                25, 25,
            ])
            .fill(0xFF6666);
    }

    const enemy = enemyTemplate.clone();
    enemy.x = 25 + (Math.random() * 480) - 50;
    enemy.y = -50;

    return enemy;
}

As you can see, it's pretty similar to the createBullet method. We create a template enemy that we clone every time we want to create a new enemy. We then position the enemy at a random x position at the top of the screen. The enemy has the same shape as the player's ship, but it's red and upside down.

We specify the spawn location of the enemy by setting the x and y properties. The x property is set to a random value between 25 and 480 - 50, so that the enemy is always within the game screen. The y property is set to -50, so that the enemy is just outside the screen, and will move into it.

Next up, we need to call this method to create a new enemy every few seconds.

Spawning enemies

We'll use the setInterval method for this. Add the following code right after where we defined the bullets array:



const enemies: PIXI.Graphics[] = [];

const enemySpawnInterval = 2500;
function spawnEnemy() {
    if(!document.hasFocus()) {
        return;
    }
    const enemy = createEnemy();
    enemies.push(enemy);
    app.stage.addChild(enemy);
}

setInterval(spawnEnemy, enemySpawnInterval);
spawnEnemy();

We create a new array called enemies to keep track of all the enemies. We then create a new variable called enemySpawnInterval that specifies how often we want to spawn a new enemy. We then create a new method called spawnEnemy that creates a new enemy and adds it to the enemies array and the stage. We then call this method every enemySpawnInterval milliseconds using the setInterval method.

Cool, now we have enemies spawning at the top of the screen every 2.5 seconds. But they're not moving yet, and we don't see them because they're out of the screen. Let's fix that.

Moving the enemies

We need to update the enemies' position in the game loop. Add the following code to your game loop, right under where we update the bullets' position:



for(let i = 0; i < enemies.length; i++) {
    const enemy = enemies[i];
    enemy.y += 2.5;

    if(enemy.y > app.screen.height + 50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

This part of the code will loop over all the enemies, update their position by moving them down 2.5 pixels and check if they are out of bounds. If they are, we remove them from the stage and the enemies array.

Nice! if you run your game now you'll see enemies spawning at the top of the screen and moving down.

Now it's time to shoot them down!

Shooting the enemies

Add the following code to your game loop, right under where we update the enemies position:



for(let i = 0; i < bullets.length; i++) {
    const bullet = bullets[i];
    for(let j = 0; j < enemies.length; j++) {
        const enemy = enemies[j];
        if(
            bullet.x > enemy.x &&
            bullet.x < enemy.x + 50 &&
            bullet.y > enemy.y &&
            bullet.y < enemy.y + 25
        ) {
            app.stage.removeChild(bullet);
            app.stage.removeChild(enemy);
            bullets.splice(i, 1);
            enemies.splice(j, 1);
        }
    }
}

This part of the code will loop over all the bullets and all the enemies and check if a bullet hits an enemy. If it does, we remove both the bullet and the enemy from the stage and their respective arrays.

You could optimize this code by breaking out of the inner loop when a bullet hits an enemy, but for now, this is fine. You could also combine the bullet position update loop with the bullet hit check loop, but I like to keep them separate for clarity of this tutorial.

And that's it! You now have a game where you can move left and right, shoot bullets, and shoot down enemies. In the next part, we're going to add some HUD elements to the game and keep track of the player's score, level and lives.

PixiJS Setup with Vite and TypeScript

Mr. Linxed ・ Apr 20

#webdev #javascript #beginners #tutorial

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.

Space Defender - part 2 - the player

Mr. Linxed — Sat, 20 Jul 2024 14:10:00 +0000

In the previous part we created the basic structure for our game. In this part we'll start creating the player's ship and make it move and shoot.

The final source code can be found in my GitHub repository
And if you want to play the game, you can find it here

Setting up the keyboard

Before we start setting up our player, we need a way to handle keyboard events. For this I've used the keyboard controller found on a PixiJS tutorial from kittykatattack and adapted it to TypeScript.
You can find it on my GitHub repository.

We won't go in-depth into how it works, because that is out of the scope of this project, but what it does is listen for keydown and keyup events and sets a boolean value for each key that is pressed or released. This way we can check in our game loop if a key is pressed or let go, and update our players behavior accordingly.

To use the keyboard controller, download the keyboard.ts file from the commit above and place it in the src/helpers folder of your project.

Creating the player

Now that we have a way to handle keyboard events, we can start creating our player. In a future tutorial we'll make a more complex game and split up our project in multiple files. For now, we'll stick to one file.

Right after where you've initialized your PixiJS application await app.init({ in the main.ts file, add the following code:



const Player = new Graphics();

Player
    .poly([
        0, 0,
        50, 0,
        25, -25,
    ])
    .fill(0x66CCFF);

Player.x = app.screen.width / 2 - Player.width / 2;
Player.y = app.screen.height - 50;

What this will do is create a new Graphics object, draw a triangle with the poly method, fill it with a light blue color and position it at the bottom of the screen.

If you start your game now you'll see a small triangle at the bottom of the screen. But we want to be able to move it around. To do this we need to update the player's position based on the keyboard input.

Moving the player

First we'll need to capture the keyboard input. Add the following code right after where we created our player:



let playerSpeedX = 0;

const arrowLeftHandler = KeyHandler(
    "ArrowLeft",
    () => playerSpeedX = -500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowRightHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

const arrowRightHandler = KeyHandler(
    "ArrowRight",
    () => playerSpeedX = 500,
    () => {
        // To prevent player from stopping moving if the other arrow key is pressed
        if(!arrowLeftHandler.isDown) {
            playerSpeedX = 0;
        }
    }
);

What this code does is create two KeyHandlers, one for the left arrow key and one for the right arrow key. When the key is pressed, the player's speed on the x-axis is set to -500 or 500. When the key is released, the player's speed is set to 0. This way we can move the player left and right.

This on it's own wont move the player, we need to update the player's position in the game loop. Replace the app.ticker.add call with the following code:



app.ticker.add((ticker) => {
    const delta = ticker.deltaTime / 100;
    Player.x += playerSpeedX * delta;
});

If you didn't have the app.ticker.add call in your code, you can just add it right after where you defined the KeyHandlers.

Now if you start your game you'll be able to move the player left and right. Great! Let's make it shoot.

Shooting

There are three things we need to think about when we want to make the player shoot:

When the player presses the spacebar, we want to create a new bullet.
We want to update the bullet's position in the game loop.
We want to remove the bullet when it goes out of bounds.

So we need a method that creates a bullet, add it to an array of bullets, updates the bullets position via the game loop and then remove it if it's out of bounds.

Let's start with a method that creates the bullet, add the following code at the bottom of your main.ts file:



let bulletTemplate: PIXI.Graphics | undefined = undefined;
function createBullet(source: PIXI.Graphics) {
    if(!bulletTemplate) {
        bulletTemplate = new Graphics();
        bulletTemplate
            .circle(0, 0, 5)
            .fill(0xFFCC66);
    }

    const bullet = bulletTemplate.clone();
    bullet.x = source.x + 25;
    bullet.y = source.y - 20;
    return bullet;
}

Creating a new Graphics object every time we want to create a bullet is expensive, so we create a template bullet that we clone every time we want to create a new bullet. Cloning is cheaper than creating a new object every time.

We then use the source (who shot the bullet) to position the bullet at the right place, and then return the graphics object.

Okay, so currently, this method isn't being used and nothing is being drawn to the screen. Let's fix that.

We're going to make it so that the player can shoot by pressing space bar, we'll use the KeyHandler for this again. To tell the KeyHandler to use the spacebar, we'll have to give it " " as the key.

Add the following code right after where we defined the KeyHandlers for the left and right arrow keys:



KeyHandler(
    " ",
    () => {
        const bullet = createBullet(Player);
        bullets.push(bullet);
        app.stage.addChild(bullet);
    }
);

This code will create a new bullet when the spacebar is pressed, add it to an array of bullets and add it to the stage, so that we'll see it.

We didn't have the bullets array yet, so let's add that right after where we defined the Player object:



const bullets: PIXI.Graphics[] = [];

Now if you start your game you'll be able to move the player left and right and shoot bullets. But the bullets will stay on the screen forever. Let's fix that.
In the gameloop we'll update the bullets position and remove them if they go out of bounds. Add the following code to your game loop, right under where we update the player's position:



for(let i = 0; i < bullets.length; i++) {
    const bullet = bullets[i];
    bullet.y -= 10;

    if(bullet.y < -20) {
        app.stage.removeChild(bullet);
        bullets.splice(i, 1);
    }
}

This part of the code will loop over all the bullets, update their position by moving them up 10 pixels and check if they are out of bounds. If they are, we remove them from the stage and the bullets array.

And that's it! You now have a player that can move left and right and shoot bullets. In the next part we'll create enemies and shoot them down!

PixiJS Setup with Vite and TypeScript

Mr. Linxed ・ Apr 20

#webdev #javascript #beginners #tutorial

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.

Space Defender - part 1 - setting up the project

Mr. Linxed — Sat, 20 Jul 2024 14:05:00 +0000

In a previous post I showed you how to set up a PixiJS project with Vite and TypeScript. In this post, we will create a simple space defender game building on top of that setup.

For this project I assume you have a basic knowledge of how to program in TypeScript/JavaScript. And because we're focusing on PixiJS I won't focus too much on the HTML/CSS side of things.

The final source code can be found in my GitHub repository and if you want to play the game, you can find it here.

Setting up the project

If you haven't set up a PixiJS project with Vite and TypeScript yet, I recommend you to read my previous post first in which I explain how to set it up and get it to run.

Let's quickly setup the index.html file with the content that we need for this project. Replace the content of the <div id="app"></div> element with the following:



<div id="app">
    <div id="gameHud">
        <div>
            Lives: <span id="gameLives"></span>
        </div>
        <div>
            Level: <span id="gameLevel"></span>
        </div>
        <div>
            Score: <span id="gameScore"></span>
        </div>
    </div>
    <div id="game">

    </div>
</div>

This will be the structure of our game, we have a HUD (Heads Up Display) that will show the player's lives, level, and score. And a game container where we will render the game. In part 4 we'll start making use of this.

Next up, we need to apply some CSS to this so that it's nicely displayed on the screen. Navigation to the stylesheet called styles.css in the src folder and add the following content:



body {
    margin: 0;
    background-color: darkgrey;
}

#app {
    height: 100vh;
    width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameHud {
    display: flex;
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;

    > div {
        flex: 1;
    }
}

Preparing the game screen

Great! Now that we have the basic structure in place, let's start by creating the game screen. We need to have a variable that holds the game container element so that the game knows where to insert the game canvas into the DOM.




(async () => {
    let gameContainer = document.getElementById("app");

    // ....
});

After that we need to update our app size to match the game size we want, in our case we want a game that is 480 wide and 720 high. So we need to update the app.init call to match that size.



await app.init({
    width: 480,
    height: 720,
});

And then replace



document.body.appendChild(app.canvas);

with



gameContainer.appendChild(app.canvas);

We now have a game screen that is 480x720 pixels in size and is displayed in the center of the screen.

In the next part we'll start creating the player's ship and make it move and shoot.

PixiJS Setup with Vite and TypeScript

Mr. Linxed ・ Apr 20

#webdev #javascript #beginners #tutorial

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.

PixiJS Setup with Vite and TypeScript

Mr. Linxed — Sat, 20 Apr 2024 18:53:34 +0000

While trying to get started with PixiJS I noticed there was no great guide to setup PixiJS with a bundler. So after a bit of fiddling, I came up with a nice setup. It uses Vite as the bundler. Let me share it with you.

Quick note: This is just a bare minimum basic setup, and might not be the best fit for your project. But I still think it will provide a good starting point for your next PixiJS project.

Setting up Vite

You might know Vite as the bundler for Vue, but that's not the only thing you can use it for. In this case, we'll use it with PixiJS.

Run the following command:



npm create vite@latest

If you've never run it before it will prompt you if you want to install Vite, say yes. Then you pick the following options



> project name: <your-project-name>
> Framework: Vanilla
> Variant: TypeScript (if you want typescript)

You can also do all of this in one command:



npm create vite@latest <your-project-name> -- --template vanilla-ts

After which you can run the following two commands to install the required packages and start the dev server



npm install && npm run dev

After this, you can go to http://localhost:5173/ to see your Vite project running.

Setting up PixiJS

Now that Vite is up and running it's time to get PixiJS running.

First, we'll install PixiJS with npm:



npm install pixi.js

Navigate to src/main.ts and replace the contents with the following:



import * as PIXI from 'pixi.js';

(async () => {
    const app = new PIXI.Application();
    await app.init({
        width: 640,
        height: 360
    });

    document.body.appendChild(app.canvas);
})();

If you have your dev server still running it should automatically reload your app, otherwise restart the server with npm run dev.

In the browser, you'll see a white page with a black rectangle. This black rectangle is a <canvas> element that PixiJS created for you.

You are now ready to develop your PixiJS app! Good luck.

If you're running into issues, drop a comment down below. Alternatively, you can also look at my repository on GitHub that has this code (plus a bit more) to get you started.

That's it for now, have a lovely day!

if you're looking for a way to host your PixiJS app for free, check out my article about hosting web apps on Cloudflare for free.

Host your web app for free on Cloudflare Pages

Mr. Linxed ・ Feb 9

#webdev #tutorial #beginners #frontend

Code for Change: How Your Coding Skills Can Make a Real Difference in the World

Mr. Linxed — Sun, 03 Mar 2024 10:51:32 +0000

"Learning to code is useful no matter what your career ambitions are." - Arianna Huffington

No matter what age you are, or how you identify as, you should learn to code. If you're unsure why you should learn to code, or if you're already into coding but need some new motivation, read on!

A creative outlet

One of the biggest things it can do for you is to be a creative outlet. You might think, how can staring at a screen typing strange-looking documents can be a creative outlet? And that'd be a valid question, it's not the same as drawing or painting. But writing code requires a lot of creativity and problem-solving skills.

Coding is a way of expressing yourself, it's an art. As an experienced coder, I can tell you that it's a pleasure to look at well-written and well-functioning code. It takes serious creative effort to do this.

Become a better thinker

If something takes effort you'll automatically become a better person. As with everything, the more you do it, the better you get at it. Coding is incredible at tickling your brain and making it work a bit harder. This in turn has the added benefit of making you a better thinker.

First of all, you'll become an expert at solving problems. The way you have to use your brain to tackle certain coding problems can also be applied to solving other real-world problems.

Second, since writing code is all about logic your logical thinking and reasoning will improve massively. You'll start seeing life in a bunch of "if else's".

Last but not least, your critical thinking will improve.

Understand the world around you a bit better

Becoming a better thinker will help you understand the world around you better. You'll start asking more questions about why things are the way they are. Because you're so used to thinking deeper than just the surface level.

But even if we just think about the technology in this world. Learning how to code will help you understand technology better. If you're coding a website, you'll learn how the internet works, you might learn how websites are tracking you, and you can learn how to protect yourself and the people around you from it. If you're developing a game, you'll gain some new respect for the games out there right now, the tech behind it, and the people who made it.

Change the world

You have likely had dreams and goals related to changing the world. With coding, you can make a lasting impact on other people's lives even from the comfort of your own home. Maybe you develop a small tool that someone needs. Maybe you'll develop a fun little game that brightens someone's day. Or maybe you'll work on something bigger, like the next breakthrough in artificial intelligence usage for detecting early stages of cancer development. You could save someone's life.

No matter how big or small your projects are, they can and will help someone out eventually.

Upgrade your career

It doesn't matter what career you are in, learning how to code has enormous effects on it because it changes the way you think. You might be able to utilize your new coding skills to automate certain processes, leaving you time to do other things. Either more free time for yourself or more free time to work on other things and make you a better employee. This could lead to bigger pay or a new promotion. Or if you want, switch jobs together in the world of tech.

Overall, you'll find that learning to code will have enormous effects on your life and everything you do. It doesn't matter what you do, where you're from or what you look like, if you can find a bit of time every day or every other day to learn to code you'll find that it will benefit you in the long term.

I hope this post has inspired you to pick up coding as a hobby, or if you're already into coding to double down on it.

That's it now, have a lovely day!

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

How to write better code and become a teamplayer

Mr. Linxed ・ Feb 23

#programming #beginners #productivity #discuss

How to write better code and become a teamplayer

Mr. Linxed — Fri, 23 Feb 2024 11:45:40 +0000

A bit of a pet peeve I have is code that is just written to "impress", but what it just does is confuse the person trying to understand what the code does. Believe it or not, this person is most of the time yourself, but a month later.

So, have your future self thank you and let's learn what it takes to write readable code. It's really not that hard. Let's get started.

Making code readable

If you can understand what a piece of code does with just a glance, you got it. If you have to ask yourself, is this readable? you don't got it.

Some simple ideas you can implement:

Descriptive variable names

Make sure identifiers are descriptive enough so that you immediately understand what they are and do.

I am sure you agree with me that



calculateTotalPrice(itemPrice, quantity, discountPercentage);

Is much better than if we used



cTP(iP, q, dP);

On a similar note, you should hint in a variable name what kind of type it is. Especially in languages where you don't need to specify types. A boolean should be isOpen or hasItem and not open or item

Format your code the same way as the rest of the file

If you work alone you won't run into this problem as much since you probably have developed your own programming style.

But if you're working in a team you should make sure your code looks the same as the rest of the file/project, this makes it for everyone much easier to understand what's going on. If code is suddenly formatted differently, you have to do some context switching in your brain, this could throw you out of your train of thought.

Use the proper amount of comments

I am sure you have seen this one around plenty of times. Use comments! But it's not just that you need to use comments, it's that you need to use the appropriate amount of comments.

This is a useless comment:



// Check if the number is negative
if (number < 0) {
    ...some other code here
}

Good comments explain complex pieces of code that are not immediately clear. Which will still happen sometimes.

But the best comments are for when you (for example) experience a weird edge case bug in production and you need to implement an extra if statement in which it's not obvious why you added this piece of code.

The benefits of readable code

Okay, so now that we've looked at some simple examples of what makes for good code, let's see why we should write good code.

Maintainability

This is probably the biggest reason. Code that's easy to read is easy to maintain and improve upon. What a waste of time it is to spend 2 hours trying to figure out how a piece of code works before you're able to implement a new feature or fix a bug that would've only taken you 15 minutes otherwise.

Cooperation

If you're working in a team, it's important that the team works together well. When everyone in your team writes readable code it doesn't matter who's working on what part of the system. They understand what's going on.

Luckily, in a lot of bigger teams, there are guidelines for how they write code in their company. And you might not even get your pull requests accepted if you fail to follow them.

Growing your company

You might be working alone or for a small company right now. But eventually, you might hire someone or your company will grow. These new developers need to get up to speed as fast as possible, clean and readable code helps with that a lot.

If the new guy understands your code and can provide value right away, you've done a good job.

The exceptions

And I can hear you say, "But Mr Linxed, in the real world it isn't as easy as you make it sound like here in this article", and you're right. Let's look at some exceptions.

Performance

If you're working on a critical piece of software you might need to put performance over anything else. And that's all right because let's face it, readable and clean code is not always the fastest code out there.

But most of the time, the differences are so small that you'll never notice that you've used an extra variable in your code.

If you're worried about the bundle size of your code because of the larger file size due to longer variable names and more code. Utilize minifiers in your build process. They'll probably do a better job at minifying your code than you'd be able to do manually.

Legacy code

I am sorry to hear that you're working with legacy code. Especially if it's badly maintained and not written in a clean and readable way. But here is the thing, you don't have to fix it. But you should always make sure that what you add or edit is up to standards.

Here is some wisdom I try to apply to all the areas in my life: Leave a place a bit better than you found it.

This can also apply to your legacy code base.

Accomplish more with the "Cult of Done"

Mr. Linxed ・ Feb 18

#productivity #beginners #discuss #motivation

Or if you're looking for a way to host your site for free, check out my article on that

Host your web app for free on Cloudflare Pages

Mr. Linxed ・ Feb 9

#webdev #tutorial #beginners #frontend

Accomplish more with the "Cult of Done"

Mr. Linxed — Sun, 18 Feb 2024 10:28:01 +0000

Not so long ago I ran into a video about the "cult of done" and it helped me a lot with actually getting things done and stopping procrastinating my work.

In this post, I'd like to unpack the manifesto and see how this can apply to our work as software developers. Keep in mind that these points can also apply to other fields in your life.

What is the Cult of Done Manifesto?

Created by Bre Pettis & Kio Stark back in 2009. So it has been going around for quite a while. And to quote Bre Pettis:

The Cult of Done Manifesto is a special document. Written from bed with Kio Stark in our first few months of dating. It was one of those magic writing moments where I had the laptop open and our ideas flew onto the page. For me, it is a map of my 2009 heart. Getting it on paper was a cathartic documentation of my life, my soul, and my passion for unbridled creativity.

The manifesto

All right, let's dive right into unpacking this manifesto and my interpretation of each item.

1. There are three states of being. Not knowing, action and completion.

Ever tried the learn something new and felt completely overwhelmed and unsure where to start? This is the not knowing.

So what do we do? We take action. We dive deep into the problem and just try things. There doesn't need to be an end goal. Just doing. And after 30 minutes you're done. You're complete. You've learned something, you've become more wise than 30 minutes ago. And then repeat this cycle.

2. Accept that everything is a draft. It helps to get it done.

Oh, did I mention that this article is a draft, it's been typed up within 30 minutes, with minimal editing (to get the obvious errors out) and published for you to read.

Does this mean you should be sloppy? No not at all, you should give it your best. But accept that it isn't perfect. Because honestly, after this article I can write another article that'll be a bit better. Remember this, prototypes end up in production all the time.

3. Pretending you know what you’re doing is almost the same as knowing what you are doing, so just accept that you know what you’re doing even if you don’t and do it.

Basically "fake it till you make it". All though I am not fully a fan of this attitude it can help you in certain situations. Like when your client asks you to solve a tricky bug in a piece of software you've never lied your eyes on. You have no clue what's going on, but the client doesn't need to know this. You'll figure it out, I know you will.

4. Banish procrastination. If you wait more than a week to get an idea done, abandon it.

Got this awesome project idea you want to create, but you just can't get yourself to start? Put it away, don't bother. Do something else. The point is to get something done. If you don't start you will never get something done. Your brain is probably full of ideas, so you can work on something else. Maybe you'll visit this project again in the future, but for now, put it away. You have better things to do than to waste your time procrastinating.

5. The point of being done is not the finish but to get other things done.

Admit it, you'll never finish your website. And that's okay. But finishing is not the same as being done. Your website can be done without actually being finished. A website can be a collection of smaller parts that you've done. Over time you'll create a fully-fledged website. One that's never finished, because you'll think of new things to add to it.

6. Once you're done you can throw it away.

Yes, when you've done something, you can put it aside, throw it away, or forget about it. No need to keep coming back to the same project. You've done it. Now go do something else. Either something new or a better iteration.

7. Laugh at perfection. It’s boring and keeps you from being done.

You'll never be done if you keep trying to make it better. At some point, it's good enough and you should probably call it done. It doesn't help if you burn yourself out on the same boring task. Because you won't get it done, and it doesn't help you on your future projects because you're burned out.

8. People without dirty hands are wrong. Doing something makes you right.

If the people criticising your work aren't doing the same or similar work, their criticism is null and void. Don't listen or laugh it off.

9. Failure counts as done. So do mistakes.

Sometimes you fail. Sometimes you make mistakes. And that's all right. Because you've done something. You've learned and grown. Consider your task done. Even if the result wasn't what you've aimed at. Next time you'll do better with your new knowledge.

10. Destruction is a variant of done.

Crazy to think about. How can destroying something mean you're done? Sometimes it's as easy as deleting all your old code because either you found a better way to do it. Or found a library that could do it better. Either way, the code you wrote is done.

11. If you have an idea and publish it on the internet, that counts as a ghost of done.

Ever had a good idea and for whatever reason you can't or won't execute this idea? Why not share it on the internet? Maybe someone out there will work on it. And if it's something you want to use yourself too, you help yourself as well. Consider it done. You could combine this with point 4, if you're procrastinating the idea maybe let someone else do it.

12. Done is the engine of more.

Ever wondered why some people seem to be so productive? Because they get things done. It creates momentum. One done thing leads to two done things. It's addictive.

And that's it. What do you think? Do you think this manifesto might help you accomplish more? Remember that not everything needs to be followed to the tee, you can adapt things so that they will fit your life better.

Now, go work on that project and get it done.

That's it for now, have a lovely day!

Host your web app for free on Cloudflare Pages

Mr. Linxed ・ Feb 9

#webdev #tutorial #beginners #frontend

Host your web app for free on Cloudflare Pages

Mr. Linxed — Fri, 09 Feb 2024 12:26:18 +0000

If you have a Vue / React / Angular or even a simple site that's just an index.html like mine, you can host it using Cloudflare pages, absolutely free.

Let me show you.

Using GitHub / GitLab

A nice feature of Cloudflare pages is that you can deploy your site using GitHub or GitLab. This way, every time you push to your production branch your site will automatically be updated.

1. Create an application

After signing up and logging in to Cloudflare, navigate to workers & Pages using the sidebar and click on _Create application

2. Navigate to pages

Cloudflare seems to hide this feature a bit, so once you've reached the page you see on the image below, you have to click on the tab Pages which is located next to the tab Workers

3. Pick how you want to deploy

Next, you'll see a screen that gives you 2 options for deploying your application, one via GitHub / GitLab and the other via direct file upload. We'll handle file upload later in this post. So press on Connect to Git

4. Connect your account and select your repository

Depending on if you want to use GitHub or GitLab, you'll have to select the correct tab. We're using GitHub. If you haven't connected your GitHub account, do this here as well. Afterwards, you can select the repository you want to be deploying to Cloudflare Pages

5. Save & deploy

After you select the correct repository, you'll have some options. And depending on what kind of projects you use you have different configurations here. Make sure you select the correct production branch, which is probably master or main.

If you're using NPM or Yarn you may want to add a build command. But you can leave this empty.

Once you're done, you click on save & deploy. You're page will be up in just a few seconds.

Using the direct upload method

Direct upload is also very easy, all you have to do is fill in a project name & upload the files you need.

The downside is of course, that if you want to update your site, you'll have to do this manually every time.

What's next

It's good to keep in mind that the free plan has a daily limit of 100.000 requests. But that should be plenty if you're just starting or hosting a portfolio site that doesn't get many hits. For more information look at the pricing page.

If you currently don't have a site yet and want to get something up fast. Check out the template I've made which I also use on my site.

I've written about my site in another post:

Finally got around to making a website for myself

Mr. Linxed ・ Feb 6

#webdev #showdev #html #css

That's it for now, have a lovely day!