Posts tagged with javascript
Website or App? Yes! The hacky guide to building sites with Expo Router
One of the annoying little side quests of shipping an app is that Google occasionally forces you to become a website owner too. Back when I first wrote about Mu…
Sharing encrypted Laravel cookies with Next.js
I often have friends asking me, "Pablo, how do you manage to stay so calm and collected in the face of complex technical challenges?" Well, the truth is, I don'…
Tracking my working hours on personal projects using Node.js
illustration of how it feels to work with foss As a developer fully committed (pun intended, and not the only one) in FOSS side projects, I often lose track of…
Creating Instagram Reels coding tutorials automatically with OpenAI's GPT
After creating a Node.js script to automatically post Instagram Reels and one to automatically generate thumbnails for a Instagram Reels, what comes next? Autom…
How to automatically create thumbnails for your videos with Node.js
Just last week I posted about how to upload reels to Instagram using Node.js, and in the code it was possible to upload a cover image for the video too, but I d…
Posting Instagram Reels using Node.js and the art of overcoming limitations
Hey guys! It's hard to be a geek these days, so many events are exclusive to media people and influencers - even E3 was a trade-only show for many years. So let…
My blog now has Stories, and I'm not sure why
'Stories' are everywhere on social media these days, and I found myself thinking - does my blog really need Stories? The answer, of course, is a resounding 'fuc…
Using Google Fitness API to calculate my TDEE and more
If you want to lose some weight or build muscle, it's all about knowing how many calories you burn in a day, which is called your Total Daily Energy Expenditure…
Creating a Startup with GitHub Actions and Google Forms
The housing market in Amsterdam is crazy, so crazy that universities are telling students to not come to Amsterdam unless they already have a place to live here…
How to get the Redux State in a React 18 production build via the browser's console
A few months ago I wrote a blog post about how to get the Redux State in production, but with the recent release of React 18, that code doesn't work anymore. Le…
Adding a copy button to code snippets on Gatsby: The lazy way
I constantly write about code and share code snippets in my blog posts and copy-pasting code is an essential skill for software engineers, and since selecting a…
How Webpack handles dynamic imports with variable paths
Webpack is the most popular module bundler for JavaScript, it's a tool for bundling modules together into a single file and more. One thing that always bugged m…
Using Node.js and GitHub Action to find a house on Funda.nl
If you want to rent or buy a house in the Netherlands, you better brace yourself because it is no easy task, especially if you're looking in Amsterdam. Applying…
How to get the Redux State in production via the browser's console
EDIT: This only works for React 17 or lower, for React 18 check this blog post. Sometimes you want to debug the Redux State from your application on production,…
Create videos from code snippets with this Node.js script
When I was working on my Game Devlog videos, I wondered if there was any way to automatically transform my code snippets into a video, so I could add them to my…
How to load assets asynchronously with Phaser 3
On Phaser 3 you can pre-load your assets in a function called preload so they are ready to use when the function create starts. But what if you need to wait for…
How to import Gatsby posts into Medium with Gist code snippets
Medium is a great platform to share your blog posts with a wider audience, but it is a bit annoying that to have code snippets you need to create a GitHub Gist…
I made a top-down game version of my blog with Phaser and React
Yes, that's right, there is now a game version of this website. Tired of clicking around boring pages and reading stuff? What about dive into a journey of a top…
How to create a top-down RPG Maker like game with Phaser JS and React
My first experience in "programming" started in 2002, when I was making games with RPG Maker, when I learned what a variable, data persistence, and loops were.…
Creating a dialog box with React for a Phaser game
Phaser works by rendering pixels inside a canvas element in the DOM, and it's great, but one of the great features of web development is the power of the DOM an…
Automatically update the embedded Tileset for all your Tiled maps a Node.js script
Creating maps with Tiled is great, and you can use them in pretty much any game engine today, including Phaser JS. To load a map with Phaser JS is simple, first…
Creating a Matrix Source-Code effect background for my website with React
To celebrate the release of the Matrix 4 trailer, I want to add a Matrix Source-Code effect background to this website, which is already deployed, and you can t…
Creating a mobile build of my Phaser JS game - Game Devlog #23
Hey everyone, here we are again with another game devlog for Super Ollie, and since the game is being built with JavaScript, I can easily export it to pretty mu…
Creating moving platforms for my Phaser JS game - Game Devlog #22
Hello everyone, welcome to another game devlog for my game Super Ollie, and after almost a whole year of development I'm finally tackling something that every p…
Hiding parts of the map on Phaser JS - Game Devlog #21
For those of you that don't know, Metroidvania is probably my favorite game genre, so I decided to add a feature from Metroidvania games to Super Ollie, hidden…
Creating falling spikes with Phaser JS - Game Devlog #20
Hey everyone! Today I'm finally back with another game devlog for Super Ollie, and I'm going to implement a classic element of a 2D platformer, a falling spike.…
Automatically generate sprite sheet atlas files for your Phaser JS game with a Node.js script
In one of my first game devlogs, I explained how to automate the sprite sheet generation for Phaser 3 using Webpack, but I think it would be more helpful if I h…
Hanging on a monkey bar Phaser JS - Game Devlog #19
Hey everyone, today's devlog will be very similar to the previous one, but instead of climbing a ladder I'm going to implement a monkey bar that the hero can ha…
Creating ladders for platformer with Phaser JS - Game Devlog #18
Hey everyone, I'm back with another devlog for Super Ollie. Today I will explain how I added the ladder-climbing feature to the game. Climbing To make this poss…
How to create an offline search page with Gatsby
When making a JAMStack website, some compromises need to be made, but searching is not one of them, thanks to JavaScript libraries like flexsearch and lunr.js.…
Building a dynamic form from a JSON schema
Around 2 months ago, Gatsby v3 was released, and I was already super hyped to upgrade this blog to v3 and start using incremental builds, but "sadly" this blog…
Using GitHub Actions to deploy my blog into different domains
Today I decided to deploy my blog to my GitHub Pages address, blopa.github.io, in addition to my normal pablo.gg deploy, but how can I do that? First I created…
How to calculate the annual inflation in Brazil using JavaScript
Today I needed to know the accumulated inflation of the last year for Brazil for a project I am working on, information that can be easily accessed on the IBGE…
Creating a pogo-attack with Phaser JS - Game Devlog #17
Well, this is awkward... It's been four months since my last devlog on the skate platformer game, but you know life is complicated sometimes. Today I want to sh…
I pay $0.00 in hosting for this website
When I was in college, web development wasn't a major part of programming as it is these days, I didn't have a single class on the web, and now I work with it e…
Godammit Telegram!
Well isn't that something? Less than 7 days after failing to restore my messages backup on Whatsapp, Telegram announced that you can now import messages from ot…
Adding transition when entering a stage on Phaser JS - Game Devlog #16
Wassup everyone, I'm once again late with my "weekly" devlog, due to the holidays and stuff. But let's drop the small talk and cut to the chase. youtube: https:…
Creating a smarter and more performing AI on Phaser JS - Game Devlog #15
Alright, get comfortable because today's devlog is long, but it's worth it. I'm really happy I managed to do this devlog, after all Cyberpunk 2077 was released…
Creating custom weather on Phaser JS - Skate Platformer Game Devlog #14
Hey, y'all. This week I bring another tiny devlog due to being way too hooked in Hyrule Warriors... yeah yeah I know, but I finally beat the game on difficulty…
Creating a loading screen and adding translation on Phaser JS - Skate Platformer Game Devlog #13
Hey guys, in today's game devlog I'll add a loading screen showing the assets being loaded and also add the option to use translations in the game's texts. yout…
Saving player progress with checkpoints with Phaser JS - Skate Platformer Game Devlog #12
Hey guys! In today's video, I will show you how I created a checkpoint for the hero in my game in a very easy way. youtube: https://www.youtube.com/watch?v=KKsg…
Loading user-created Tiled stages on Phaser JS - Skate Platformer Game Devlog #11
Hey guys, in today's devlog I'm going to make something really cool - dynamically upload external Tiled map files created by the user. youtube: https://www.yout…
Creating hero HUD on Phaser JS - Skate Platformer Game Devlog #10
Hey guys, in today's game devlog I'll show you how I did to create the HUD with the hero's status. youtube: https://www.youtube.com/watch?v=JVeRYsaXxpg The firs…
Creating enemies artificial intelligence on Phaser JS - Skate Platformer Game Devlog #09
Hey guys! For today's game devlog I'm going to show more details of the enemies AI that I implemented. youtube: https://www.youtube.com/watch?v=9vocKXNKNjk I de…
Creating enemies and collectable items on Phaser JS - Skate Platformer Game Devlog #08
Hey guys, I'm back with another game devlog, it took me a while to make this one because there were a couple of things that I didn't know how to do (still don't…
Loading external tileset file on Phaser JS using Webpack - Skate Platformer Game Devlog #07
Super Ollie vs Pebble Corp. In today's Game Devlog I will show you how to load external tilesets into Phaser JS, but first let's take this out of the way: Forge…
Falling off platforms with Arcade Physics on Phaser JS - Skate Platformer Game Devlog #06
Hey guys! Today's Game Devlog is a bit long, 15 minutes, but bare with me because there are a lot of interesting things going on in the game. youtube: https://w…
Using a button to run with Phaser JS - Skate Platformer Game Devlog #05
Hey guys, in this week's Game Devlog I'll show you how I implemented the hero's skateboard movement, which is activated when you press the directional button tw…
Holding button to jump higher with Phaser JS - Skate Platformer Game Devlog #04
Hey, I'm back with another Game Devlog. In today's devlog we are going to see a simple way to make the hero jump higher if you hold the button longer. youtube:…
Creating precise custom colliders for Arcade Physics on Phaser JS - Skate Platformer Game Devlog #03
Hey guys, another game devlog of skate platformer, this time I added the hero's movement animation and created a helper function to create custom collisions str…
Improving sprite sheets generation for Phaser JS game with Webpack 4 - Skate Platformer Game Devlog #02
Hey guys, second post in less than a week, unbelievable. youtube: https://www.youtube.com/watch?v=XP-jFSSyH7k In the gameplay, we don't have a lot of news since…
Trying out Phaser JS Arcade Physics - Skate Platformer Game Devlog #01
Hey guys, quite some time since I don't post anything, right... like 4 years. Well, I'm back to bring you some good news, or so I hope. This year I decided to d…