DEV Community: David Morais

How Vibe Coding Changed my Development Workflow

David Morais — Fri, 28 Nov 2025 12:37:05 +0000

Intro

In this article, I walk through the process of building Phantom Pulse, highlighting how I used AI tools for planning and development. I share insights from exploring the LLM landscape, as well as the mistakes I made along the way. At the end of the article, I provide feedback and links to each tool I used, along with a brief explanation of my classification.

Why build Phantom Pulse (with AI?)

After being unexpectedly fired for the first time, I went to a remote location in Portugal's interior to relax for a bit and decide what I was going to do next. I was at a crossroads I had never been before—unemployed, with no immediate projects on my plate, and with no general sense of what lay ahead. Instead of dwelling on setbacks, I decided to make the most of my unexpected free time by experimenting with AI tools and exploring new workflows.

#VibeCoding was THE BUZZWORD during this time and, after all, my last two employers were becoming very AI-oriented, and while I was an early-access tester of GitHub Copilot, I never fully entrusted my workflow to our new AI overlords. So during this very offline vacation, I turned to Perplexity on my phone and asked it for a few project ideas using the Spotify API, which was something I had interest in working with in the past.

I skimmed through a few of its suggestions and one of them piqued my interest: A music visualizer. I often have friends over and my TV acts as the speaker, however it usually only shows the album artwork of whatever is playing in the background. If I could make a visualizer that would respond to whatever was playing in the background, I could make these trippy colorful effects and add a bit of ambiance to my own living room. I was excited - a bit too much as it would eventually turn out - so I asked Perplexity how I would approach building this and the approach made sense to me, so I asked it to break the project into tasks that I would then put into Linear. This spontaneous experiment marked the beginning of a fascinating journey into AI-driven development, blending planning, coding, and automation in ways I hadn't fully imagined before.

Armed with what seemed to be a doable project, I asked Perplexity for some branding elements like a logo and a color palette, and I was set on starting to work on it as soon as I grabbed a computer.

When hallucinations meet constraints

I got back home and I pulled the project conversation from Perplexity and started adding issues to Linear. Surely there must be a way to do this from an LLM, I thought. With the Linear MCP installed, I tried pasting the tasks to GitHub Copilot and to Cursor and hoped one of them would then automatically add the tasks to Linear. They were not able to complete the task—judging from the error messages—because Linear's MCP couldn't match my emoji-prefixed project title when I omitted the emoji in the prompt.

So I added all tasks manually to Linear, which did not take me a long time, but as a developer, alt+tabbing and copy/pasting over and over just feels dirty.

I remember Google I/O had just been around that time and they had released Stitch recently, so I gave it a prompt of what I wanted to build and it provided me with a nice-looking prototype, thus avoiding any kind of “dev design” one so often has to do.

So I started working at it: I set up the project with Vite, shadcn/ui, Tailwind, and Biome. I built most of the UI components and added all the contexts I would need for future state management. I implemented Spotify authentication with Supabase and, at the end of a few weeks, I had what can be described as a basic music player: I could listen to music, see what was being played, and pause/stop tracks. Time to connect what was being played to my React UI—and this is where it goes south.

When I was planning for this project—or rather, when I asked Perplexity to plan this project—I was not concerned at all with the visualizer reacting to whatever was being played in the background, as I had already heard of the audio-features API. I was planning on using it to pass some initial parameters to the visualizer, such as track tempo and energy. It turns out this endpoint had been deprecated in late 2024 and Spotify was not allowing any new applications to use it. I assume this was due to the increase of developers using it to train LLMs and other AI-related shenanigans. Despite the fact that there was an active marketplace scene selling API keys for apps with access to this endpoint, I tried another approach.

I tried to use a Web API for screen sharing that would allow me to share only audio; however, there was support for this only in Firefox. Before giving up on the idea of a Spotify Music Visualizer, I also considered making a desktop client (with Electron), but I would have to mess with OS-specific libraries to have it pick up any sound from the user's desktop.

In each of these approaches, I would turn to Perplexity or Gemini, which correctly told me that none of them would work. Still, I had been fooled before, so I verified my findings the old-fashioned way (Stack Overflow & GitHub comments) and decided to shift to something else—and this is how Phantom Pulse became a music quiz game. I did, however, use Warp terminal's agent mode and Gemini CLI, which did okay. Warp is my main terminal and I use it across all platforms; its recently launched Code editor is awesome for short edits, but as a non-CLI user, using these felt a bit clunky, especially Gemini CLI.

Implementation: Tools that powered the process.

So for actually building the thing I went out to experiment and, like all the cool kids, VIBE CODE!

The concept still feels wildly wrong for me, so I did not want to turn 100% to AI tools. Like I wrote above, the whole setup was made by me. I could have provided a screenshot of the prototype Stitch spat out, but I didn't. I built the skeleton and the router that would power the app.

I started by using Cursor when I wanted to create some React contexts for relevant parts of the application. I was not surprised by Cursor practically one-shotting this—after all, there’s plenty of documentation and examples out there on how to implement these. However, when I asked it to build a custom wrapper with react-query for my Spotify music player and authentication, it started providing code that simply would not work and was so bloated that I stopped using it altogether. ⚠️ For reference, I was using the free plan.

It was around this time that I received an email with an invite to the early access of Kiro. I installed it on my Arch-based machine and, to my surprise, the desktop icon was showing correctly (unlike Cursor 🙃). I read through their website to see exactly what it was capable of and decided to put it to the test by asking it to build the Playlist Selection component. This component would fetch the user's playlists from the API or react-query's cache. So before doing anything, it wrote three documents: a product definition, a tech document with the stack and basic commands, and a structure file that provided guidelines on where to store new files.

After Kiro understood everything about my project, including product details and tech specifications, it went to town on the feature I had just assigned it. Again, before starting any code, Kiro wrote a definition for the feature and asked me to validate multiple aspects of it. My friends, I felt like a PM and wondered if this is what they actually do with their time. As for the feature itself, it worked very nicely and, apart from a few tweaks and improvements, it did the job wonderfully, with the added value of having created some actual documentation for the app.

Because I was on the Early Access, I had a ton of tokens, and to my surprise, this ordeal had only burnt 30% of my tokens. However, this was still far more than the free plan and, given my current status, I decided not to commit to the Pro plan (like Cursor, priced at 20 USD/month).

The Power of Copilot Agents

It was at this point that I turned to GitHub Copilot again, as it was a familiar tool that I had been using ever since it came out. I sometimes tell the story of having it activated during a morning at work without knowing (early access would roll out to random users) and feeling like it was magic. I know how powerful it is, having used it before to create entire test suites, and I had been following the news and updates in the space to know that it is one of the best tools out there. The decision was made easier by the fact that the Pro plan was half of the other options out there. So I started my free trial with the intention of keeping the subscription afterwards.

Knowing Copilot, I am also aware of its limitations, so my usage of it consisted mainly of small tasks and code improvements while I did most of the heavy lifting—and it did pretty well at it. However, eventually, I found out about Copilot Agents and this was the game-changer. Agents allow me, from GitHub's dashboard (or now from the VSCode sidebar), to specify what I want built while I follow the process, which eventually culminates in a PR.

This effectively meant that I could work on something else while delegating other tasks to Copilot. Whereas up until this point I would stop doing whatever I was doing and let the AI tool take over, this tool just does its own thing while I do mine. Copilot had become my junior developer.

The new workflow - #copilot🤖

So for the next round of tasks, I decided to get back to the once-lost #VIBECODING spirit a little bit and when planning what I was going to tackle from Linear, I decided that I would delegate a few issues that I considered easy-but-boring to Copilot, and thus, the #copilot🤖 label was born.

Copilot did extremely well in these small tasks and bugs, sometimes even providing a screenshot when opening up a PR. It did show a little difficulty with Supabase-related tasks because I hadn't set up any environment variables or a mock environment for working on authentication-related issues.

I found myself doing actual code reviews and asking for changes from Copilot. Sometimes, if the change was too mundane, I would check out the branch and make the change myself in hopes of saving a few tokens, but I felt I could rely on Copilot to do most of what I asked.

One thing I found somewhat off-putting was that, despite the instructions specified in my AGENTS.md file, Copilot would generate tests even when I didn't request them. It would also sometimes add dependencies to some useEffect instances to satisfy the linter—despite having an ignore comment with an explanation above—which would lead to infinite loops. This behavior went away after I instructed it to ignore the exhaustive-deps linter warning. However, I still found myself checking out branches and running development servers to check if everything was working fine, making some changes, and merging Copilot's branch with master.

Before rating the tools and concluding this article, I think it is important to highlight how integrating these AI tools fundamentally changed our approach to software development. My little experiment showed that if you combine human creativity, planning, and care, you can speed up the workflow, reduce boring and repetitive tasks, and improve the final product. This synergy between human and machine not only optimized my workflows but also allowed me to be more creative and focus on the product.

Tools Used

Perplexity - 3/5

Usage: For search and planning, and for creating branding elements like logo, name, and color palette.

In the end, it either hallucinated browser capabilities or assumed I was using a deprecated API endpoint, forcing me to shift to a whole different end product. I'll take some blame for this, as I could not verify the information I was provided at the time and I did not double-check it when creating the Linear tasks. However, for searching the web for answers it is a great alternative to other tools like ChatGPT, Gemini, or even Google.

Linear MCP - 1/5

Usage: Tried to create project issues from a prompt.

Linear's MCP could not bulk-create the tasks from Perplexity, I'm assuming because it could not identify my emoji-titled projects from the prompts.

Stitch - 3/5

Usage: Prototyping the application.

While it did a good job with the prototype, I needed to repeat myself sometimes when prompting it. Also, the lack of any UI (at the time) to delete unused screens made the whole prototype very bloated.

Warp Terminal - 4/5

Usage: Main terminal + Warp Agent

It is an awesome terminal for those who prefer GUI-oriented software. It's got free, built-in AI features that I use daily as fast alternatives to looking up commands and system locations in Google, but for developing features it felt like it was not there yet. Plus, the paid plans are a bit too much for what a terminal tool should cost, in my opinion.

Gemini CLI - 3/5

Usage: CLI-based assistant

It worked fine for quick experiments, but as a non-CLI user it felt clunky compared to editor-integrated tools.

Cursor - 3/5

Usage: Developing

It took too many attempts to build basic features for the price. Also, the Arch-based build does not display the desktop icons correctly. I know their recent update features an Agents UI and it's an awesome tool, but for now I will stick with Copilot.

GitHub Copilot - 5/5

Usage: Developing

It's effectively the first of its kind and feeds on the world’s largest codebase. The Agents feature is a game-changer. Despite the fact that other tools are starting to have this feature too, this one seems the most cost-effective.

Kiro - 4/5

Usage: Planning & Developing

I only had a sneak peek of Kiro before I switched to test another tool, but I loved how it provided me with the entire app documentation and asked me a bunch of questions about the feature it was implementing. This feature in particular was a bit complex and Kiro delivered it with almost no issues.

Conclusions

In reflecting on the journey of building Phantom Pulse, it’s clear that the integration of AI tools has fundamentally transformed the way I approach software development. From initial ideation—fueled by AI-driven planning and brainstorming—to designing prototypes and automating repetitive tasks, each step was enhanced by the assistance of advanced tools like Kiro, Copilot, and others. These tools didn't replace my creativity or decision-making—they amplified them, allowing for faster iteration, better documentation, and even a touch of fun during what could have been tedious workflows.

However, this journey also highlighted the importance of human oversight. While AI can streamline tasks and generate impressive outputs, it’s essential to verify, adapt, and iterate on its suggestions to ensure alignment with your vision. Mistakes like encountering deprecated APIs or hallucinations serve as reminders that these tools are aids, not infallible sources of truth.

Ultimately, the Phantom Pulse project exemplifies a new era in development—one where human ingenuity is complemented seamlessly by AI collaboration. As these tools continue to evolve, expect even more streamlined, creative, and efficient workflows that empower developers to focus on what truly matters: building innovative, meaningful technology. The future of development is here, and it’s deeply human plus totally AI-enabled.

I got a new job - and I was fired after 45 days

David Morais — Mon, 10 Nov 2025 12:00:37 +0000

Intro

You can find these and more articles in my website

Back in May of 2025, I quit my job of 3 and a half years to pursue new challenges. I had landed a new role and was genuinely excited about it. However, just 45 days into the job, I was unexpectedly let go. This article shares my experience and reflections on that period, and most importantly, what I learned.

The (New) Beginning 🌱

The decision to leave my previous job was actually a combination of two very important factors:

Back in 2024 the company was scaling up and adopted new coding practices that did not align with what was discussed during my hiring process, which at the time was a deal breaker for me. I understand that as the company grew, changes were inevitable, but I felt that the new direction was not in line with my professional values and goals.
- When these changes were announced by the higher ups I went to a handful of interviews, but ultimately decided to stay as I had a good relationship with my team and manager. In the end, I ended up learning a lot from staying and adopting some of the new practices.
After a year of working under the new practices, I felt that my growth was stagnating. And the feeling was mutual; I was placed under a Performance Improvement Program (PIP), and on the same day I started working on personal projects and a few articles in order to resurrecting my LinkedIn profile from under the dust bin of the algorithm.
- As we proceeded with the PIP, I got to a point which I realized that no matter what I did, the outcome would not favor me. I would not go as far as to say that they were trying to push me out, but on one moment I was receiving feedback to be more communicative and in the other, I was being bombarded on Slack that I was over-sharing stuff with the team. It was a confusing time to say the least.

So not long after I started re-surfacing on LinkedIn and other platforms, I got a message from this recruiter, let's call him H, who had found my profile and was interested in discussing a new opportunity. H was from a company that was working on the productivity space, something I quite enjoy. I had actually used the product from H's company before. I underwent the interview process, which was fairly standard with a take-home exercise, a technical interview, and a cultural fit interview. In the end, I got the offer and decided to take it.

I remember my biggest motivations were the fact that I would be working with a product I would use myself - as opposed to the localized accounting software I was working at the time. I had grown saturated of building tables or lists and sidepanels over and over again for the past 3 and a half years. So the fact that the product had been around for a while and the fact that they mentioned wanting to improve the codebase and developer experience, had me genuinely excited over what was ahead for me.

So I gave my notice at my previous job, and started preparing for the new role.

Onboarding ✈️

In June, I headed out to Vienna to meet the team and the company and although I was received warmly by everyone, I also started to spot some early signs of what would become some serious red flags. I do not want to write anything that would get me in trouble from a legal point of view, so I will just say that there some decisions that were taken that clearly did not reflect what it was presented. There were two main things I observed that I consider to be the biggest red flags:

The codebase relied heavily on a custom built solution for, well, everything. This alone was not a red flag, I mean, this could be something really powerful that made obsolete some really powerful libraries that are used for any project - I'm talking about state management, style preprocessing, type safety and schema validation, that thing had it all - it seemed really useful. However, the feedback I got from 99% of the devs I interacted to, was that we were dealing with this legacy solution everywhere and everything was entangled in it. This made it so that they had been building on top of it. Something that everyone acknowledged was getting in the way of the developer experience at the company, but also everyone was building their own stuff on top of it.
The second red flag came in the form of Google Drive access and some pretty heavy to digest previous presentations that reflected the company's growth had stagnated for a LONG time.

Still, I tried to be optimistic for a change and actually thought that I had arrived to enact some much needed change and ideas. The feedback I got from everyone is that the company itself was pivoting and looking to bring in some fresh ideas to the table. And I came back home with the idea that in the end, this was going to work out perfectly.

My Tenure In A Nutshell 🚀

I remember the setup process being really painful; there were no clear guidelines, and the instructions were either outdated or plainly wrong. The concept of having README.md in their repos was close to non-existent 🚨. So my first PR was precisely updating a bit the old instructions and the second was adding a README.md to the repo.

I remember that my onboarding came a bit at a bad time since my onboarding week had a lot of people away on vacation and my second week was the company retreat, so I was basically alone, except for one or two colleagues who would reply to my enquiries at least once a day. Additionally, most of my squad mates were backend focused, so they were not very familiar with how the front end setup was done.

My manager was actually a beacon of hope in the middle of everything. He was pretty knowledgeable about the product, he knew what everyone in the squad was doing and he knew the blockers each of us were facing, and most importantly, he knew the hardships the company and the product were facing and the poor developer experience repo he was onboarding me onto. Still, I felt motivated each time I spoke with my manager regarding the hardships I was facing and the improvements I saw that could be made, and I was always incentivized to open a PR or to open a discussion with the relevant people on Slack.

My first tasks were simple enough: Fix a copy issue here, remove a button there, update a few links to the cookies to the new domain. And I was tackling these simple issues with a certain degree of respect that I normally would not: I was writing tests for components that only displayed links - because they had no unit tests and no framework for developers to write them. Each PR had an extensive description, copy-paste commands to run the newly-added specs and screenshots of the changes - I had picked this habit from my Pennylane tenure, and again, I was trying to show a bit of what we could be doing, opposed to PRs with only a title and lacking any description. The feedback I was getting from my manager was positive and, I cannot stress this enough, I was motivated. And I felt like I was being a part of a positive change in the air.

My First Big Issue 🐞

During my onboarding week I was presented with an issue the application had for quite some time and that was about to breach some SLAs if not fixed. This was an extremely edge case issue that broke a core part of the application for some select users: drag and drop. There were hundreds of customer service tickets for this (not so many from the tech side), however it was an issue that no one in the company had managed to reproduce. There was company lore that said a colleague started working on this before taking a medical leave, and I did find a PR where a colleague did start to replace all drag and drop functionality. After digging and asking a series of questions around I learned that some months ago they replaced their bundling engine and after doing so they started receiving reports of users with a broken scroll. So they attempted a fix and while the scroll was indeed fixed for normal interactions, however when you interacted with an element, for example, a card, you lost all scroll capabilities when dragging it. This was already something a bit edge-casy, now add that to the fact that only certain users, in remote desktop, were reporting the issue, and again, no one in the company had manage to reproduce at that point and it was poorly documented.

TLDR 👉️ old, edge case issue that no one could reproduce. i had to investigate and dig around a lot to learn the actual issue and come up with a plan.

So I wrote a battle plan, shared it with my superiors who eventually gave me the green light to go ahead with it. Before trying anything, it took me some time, but I finally had a way to reproduce the issue with an old company computer !

My first approach was to go on the engine - that everyone was so adamant was the reason for this - and add any polyfills that may have been missing. This was a fast solution. If it worked, great. If not, we weren't wasting much time with it. It did not work. So I remember drafting a PR with a few improvements and dependency updates and I got back to my battle plan.

Now I thought about doing what my colleague started, but I did not want to go as far as replacing this whole core functionality, so I tried creating a sandboxed context for the drag and drop features that required scroll, but that was not good because of the existing outer context which relied heavily on that old custom-built-solution-for-everything.

So I ended up doing a frankenstein of sorts and managed to use new components for the UI and their librarie's events for the rest. I'd guess a monster with about 75% of my code and the 25% using their library with a sanitized wrapper.

TLDR 👉️Tried some quick fixes, didn’t work, so I mixed my own code with bits of the old library—it’s a Frankenstein solution, but it works!

In the end, I managed to fix the issue that was caused by their fix and the original issue too. My manager was happy, my manager's manager was happy. And the plan was to actually replace the remaining features with this solution and implement it app-wide. We just needed to work out some quirks, here and there, and we would proceed.

I remember already having a POC (proof of concept) on Monday and my manager telling me to present a battle plan to the team, like the last time, before starting to write code, and I agreed. I was already writing a document, just needed some time to polish it and present it to the team for any questions or clarifications there may be. So that's what I did.

At the end of the day the document was all polished up and I had this somewhat implemented in one of the features that had my new solution. I do not remember how presentable the code was, nor do I recall if I ended up posting my plan in Slack.

The Next Morning 🌄

It was about 9h30 when I woke up the next morning - I had no meetings, my work was ahead of schedule and I had received some great feedback the day before. So I look at the phone and I remember an onboarding session I had with the security department in which they demo'd a few phishing emails. I thought I had just received one of those. Still, it said "Termination Notice", I had to open it. So I did, and I quickly confirmed this was indeed from the company's domain. And I jumped out of the room to grab my computed and check Slack. What the hell was happening ? Everything was going good, everyone was happy with my work. My head was filled with questions at this point, but I still was not entirely certain this was happening. How could it ? This was probably a mistake.

I reached out to my manager as soon as Slack loaded. He was at an appointment so did not fully know what was going on, but I learned two very serious things from him: There was a company-wide announcement and he had also received an email similar to mine. This is the first time it settled in for me that this was real. I had been fired. "Not for performance reasons," the email said, which made it a tougher pill to swallow. I read the email again. It had my name, it had a few 'custom' words that seemed specifically aimed at me, such as "our short time together".

I started digging through Slack's channels and quickly came across a message from the CEO, whom I never met, summoning everyone for an all-hands meeting with a 15-30 minutes notice. The meeting would start at 8:00 for my timezone. Nothing else. Around this time a portuguese colleague reached out asking if I had been affected by the 'restructuring'. I had. But I still had no idea what was going on, so I directly replied to the CEO's message and checked the "Send to #general" box and asked if someone could have the decency to explain what had happened, for those who may be on a different time zone, at the doctors or in vacation (it was July), to know exactly was going on.

Before I got a reply on that, my colleague explained that 30% of the company had been fired. Just like that. I asked for a few names I retained during my short time there, and most of them were gone. In the other channel, I got a reply from some HR person that also confirmed this scenario, and a few minutes after this, the CEO himself apologized for how the news was given and a bunch of other stuff that I could not care less and explained the situation. This was two hours after calling a company-wide meeting to lay off 30% of the workforce. The email was sent 15 minutes after the meeting started.

In the end I received a not-so-big compensation package, on the account of being in my experimental period, and just had to come to terms that for the first time in my life, I had been fired. And I have been avoiding discussing this publicly, maybe feeling a bit of that sweet imposter syndrome. Still life goes on.

What I Learned From All Of This ? 🤓

While I had a while to digest this and have no ill-will towards the company, I like to think that as a developer, I learn A LOT, whenever I switch jobs. In this case, the learnings were not much on the technical side of things, however, here are some takeaways from this experience:

RED FLAGS MATTER 🚨
- I will be paying alot more attention to what I consider to be red flags - poor documentation, inconsistent information, legacy systems no one wants to maintain , and most importantly, hints at stagnation in company growth. I saw and validated these with colleagues and they were indeed meaningful signals.
CULTURE FIT AND LEADERSHIP TRANSPARENCY 🪞
- Companies are always excited to welcome everyone. It's always a big moment of joy and celebration, like if the CEO had birthed himself another team of employees. This was the first company that I joined that the CEO was not a founder and that he did not bother to introduce himself during my time in Vienna. I did not think much of it at the time, but this lack of tact also helps explain how the whole layoff was handled.
STABILITY IS NOT GUARANTEED - EVEN FOR GOOD PERFORMERS 🏓
- I am not over myself when I say that everyone was happy with my performance. I know I'm not being arrogant when I say that I was having a positive impact on the product. I know this because I was told, repeatedly by my manager, my team-mates, my manager's manager and even on the termination email. And sadly, that does not equal stability, as I learned. It's not personal either. I reckon that in a cost-saving scenario it's easier to fire those in the experimental period.
ALWAYS HAVE A BACKUP PLAN 🤫
- I think this was also one of my biggest mistakes. I saw what a shit-show the code was, I saw the status of the company growth, I saw how much everyone had stopped trying to improve the codebase. If I had a backup, I probably would jump out after Vienna. If I had a backup lined up, I would probably have just say my goodbyes and start working full time in the next month. I did not.
GROWTH IS NOT LINEAR 📈
- I was told this on my second job, right after I managed to get a pay rise with the agency. My career will include setbacks, unexpected turns and periods of uncertainty. I am grateful enough to have had eight great years of growth and continuous employment. I do not expect that my next job will be better than what I had, both in terms of salary and in terms of tech stack.

Conclusions

So, here’s the short version: I quit my comfy old job, jumped into a shiny new one, and—plot twist—got laid off just 45 days later. (Turns out, “trial period” isn’t just for apps!) The red flags started waving early: the codebase was basically a spaghetti monster nobody wanted to touch, documentation was a unicorn, and the company vibe felt... well, stale. But I powered through, fixed a legendary bug, even wrote real documentation (gasp!), and got a bunch of kudos—right before getting the boot with a “not your fault” email. Classic.

What did I learn? Trust your gut when something smells fishy; company culture isn’t always as advertised; sometimes even doing a great job won’t save you from a company “restructuring”; and for the love of all that is caffeinated, always have a backup plan. Oh, and growth is messy—sometimes it looks a lot like falling on your face. But hey, at least there’s a good story (and some fresh LinkedIn content) at the end of it.

You can read these and more posts in my website

My top (lesser known) VS Code extensions

David Morais — Mon, 22 Sep 2025 08:00:00 +0000

Intro

Are you tired of “best VS Code extensions” lists recycling the same handful of crowd favorites? Me too. That’s why I’ve dug through my own collection and surfaced some underrated gems that have genuinely improved my day-to-day coding workflow. In this post, you’ll find a curated selection of lesser-known (but highly useful) VS Code extensions—each with a quick explanation of what they do and why I keep them around. Whether you’re looking for ways to streamline navigation, personalize your setup, or just add a bit of fun to your coding environment, there’s probably something here you haven’t seen before.

Before I jump in, a quick note: none of these extensions are sponsored. They’re simply tools that I’ve incorporated into my own workflow and found genuinely helpful. I’ll provide a brief description of each, along with a few thoughts on why they stand out for me.

Hopefully, you'll discover something that sparks your interest or addresses a pain point you didn’t even realize you had. With that out of the way, let’s dive into the list.

Line Surfer 🔗

Never lose track of your curent line of code

First thing anyone reading this list will understand is that I like to test how many icons, emojis and colors I can put in my VS Code setup without losing too much focus 😓 Line Surfer helps with both these. The GIF below illustrates exactly what it does.

So I basically have my configured colors (⚠️ with opacity) and whenever I lose track of my cursor, I can easily identify where it is due to what LineSurfer does. It highlights your focused line and a few other above/below it. All of this is configurable.

Squarl Bookmarks 🔗

A bookmark manager for your codebase

This powerful bookmark extension makes it easy to save files within large codebases, and is especially useful even when dealing with files that have identical names or complex, confusing paths. You can have your own personal bookmarks or you can store a configuration in .vscode/settings.json, where you can include essential bookmarks and helpful links to simplify onboarding for new team members. The extension also lets you organize your bookmarks into groups or categories for easier navigation and management.

HSL Color Preview 🔗

Preview hsl colors in your editor

This one is pretty straightforward in its purpose. I don't exactly remember why or when, but clearly I needed to see which how an hsl color looked like in VS Code and this extension does exactly that.

VSCode Git Commit Message 🔗

Add a set of emojis and prefix your commit titles with them

This is by far the extension I’ve had installed the longest. As mentioned earlier, I’m a big fan of (over)using emojis. So when I discovered the gitmoji and emoji log trend, I started using that standard for about 90% of my personal commits.

However, I prefer to customize my setup, and the existing extensions usually follow a strict standard, often tailored to the developer’s preferences. So I wanted an extension that not only allowed me to use whatever set of emojis I wanted, I also wanted to be able to customize other prefixes/sufixes and this extension does just that.So I wanted an extension that not only allowed me to use whatever set of emojis I wanted, I also wanted to be able to customize other prefixes/sufixes and this extension does just that.

So after I stage the files, I have a keyboard shortcut that triggers a commit and the commit message prompts. The first one is the image above and I use the following configuration for the following prompts


      "action": [
        {
          "label": "",
          "detail": "Empty"
        },
        {
          "label": "⚒️ part of",
          "detail": "A commit that progresses a task or an epic"
        },
        {
          "label": "✅ closes",
          "detail": "A commit that marks the finish of a task or an epic"
        },
        {
          "label": "💀 deprecates",
          "detail": "A commit that deprecates something"
        }
      ],
      "scope": [
        {
          "label": "🕹️game",
          "detail": "Game related changes"
        },
        {
          "label": "📦assets",
          "detail": "Adds/Moves assets in the codebase"
        },
        {
          "label": "🛠️tools",
          "detail": "Tooling related changes"
        },
        {
          "label": "📐ui",
          "detail": "Changes related to the UI"
        }
      ],
    "vscodeGitCommit.template": [
      "{prefix}: {message}",
      "  {scope}",
      "    {action} {taskCode}",
      "    by David Morais <david@davidmorais.com>"
    ],

The task code is a custom field and the third/fourth prompt (depending on whether I comment the scope out on a specific project that does not call for it) and I end up with a commit message like the one described in the vscodeGitCommit.template config field.

Theming 🎨

Unless I'm working under heavy sunlight and I need to switch to a light theme, this is how usually VS Code looks like to me.

Coincidentally, all of these theming extensions are at the bottom of my extensions list, when sorted by installs 🎯 So let me tell you a bit about them.

Carbon Product Icons 🔗

It took me some time to realize that the icons for "Explorer," "Source Control," "Debug," and similar features can be customized. So I searched for "Product Icons" extensions and this is the set of icons I liked the most.

Vira Theme🔗

A fairly recent change I made in my icons was to use the nice icons provided by this theme package, which also adds a few more themes to choose from. I liked the fact they had customized icons for alot of libraries. I'm using the Vira Teal Icons variant.

Dark Magic Themes 🔗

Time for a shameless self plug here. I created these a few years ago because I wanted something along the lines of Tokyo Night or Dracula but with a teal accent. This package includes 2 personal themes (Dark Magic + Night Variant) with my personal synthax color scheme. Then I also added a Nord, Dracula, Tokyo and a Frankenstein (green-ish) variants with custom syntax colors. A light variant is in the works and will be out soon ™️.

Million Lint🔗

a linter for your React components' performance.

This is an extension I've used in some personal projects to a moderate extent. This extension essentially plugs and listens to your development server and not only points out performance issues, but can also suggest some fixes or improvements. It can be useful to have it on as it does not take much resources to run in dev mode, just install the npm package and initialize it and Million Lint will start to point out all those unecessary re-renders in your apps' components.

⚠️ I think this one is about to be sunset due to the removal of their extension README and their website.

Vitest Runner🔗

fastest way to run specs directly in VS Code

This extension does exactly what its name suggests: it adds "Run" and "Debug" buttons to all my spec files. This saves me from having to manually copy the file path and type the corresponding vitest command each time. That’s pretty much it. While there are similar extensions for Jest, as well as many that add a test explorer UI to the sidebar, I prefer the simplicity of having just a few extra buttons in my code over additional UI elements.

Total Typescript🔗

translates Typescript errors to human language

I've had this extension installed for a while, pretty much since I added Typescript to my stack some 3 or 4 years ago. Total Typescript helps with those sometimes cryptical Typescript error messages and translates them into something a ~~sort of~~ human, like a developer, can read. It's an extension I totally recomend if you're getting into TS as it can make the learning curve a bit less steep and save you some hours in debugging those initial TS errors.

FrontMatter CMS 🔗

turns VS Code into a CMS

This is a true gem 💎 and what I use to manage the posts on my website. It gives VS Code magic CMS powers, giving it a nice UI where you can manage your content. You can have custom fields, you can have it read directly from your markdown files' YAML properties and it even gives you SEO improvement suggestions for your content.

I highly recommend this extension; however, I have to admit that I usually disable it when working on projects that don't involve a CMS or markdown files.

Gistpad 🔗

helps you access your gists from VS Code

GistPad is my favorite way to work with GitHub gists. It adds a product icon to your sidebar (personally, I keep all non-local tools like Copilot and GistPad on the secondary sidebar), letting you access both your public and private gists right from within VS Code. My main use for this is storing configuration files—like zsh, PowerShell scripts, custom themes, and more. Whenever I encounter software that uses plain text for its configuration (which is common with many developer tools), I save the config file as a private gist. Then, whenever I need to set up that software on a new machine, I simply open the config file in VS Code, click the GistPad icon, find the relevant gist, and copy-paste the content where I need it.

If you don’t use gists or already have a preferred method for managing configuration files, GistPad might not offer much value for you.

However, if you ever find yourself juggling different configs across machines, or just want a lightweight way to sync snippets and templates, GistPad is worth a look. The extension also supports more than just text files—you can organize markdown notes, code samples, and even small datasets, all conveniently searchable within the same interface. Plus, thanks to its seamless GitHub integration, any edits you make in VS Code are instantly saved back to your gists, ensuring you never lose track of important tweaks or updates. Overall, it’s a simple but surprisingly powerful addition to any developer’s toolkit.

Summary

That wraps up my tour of lesser-known—but genuinely useful—VS Code extensions that make my coding life a little better every day. While it’s easy to stick with the tried-and-true plugins everyone talks about, sometimes it’s these hidden gems that solve problems you didn’t even realize you had. I hope you found at least one new extension to try, or a tweak that gives your setup a fresh spark of inspiration. If you’ve got any underrated favorites of your own, let me know—I’m always looking to test out new tools. Happy coding!

Updating my website's tech stack in 2025

David Morais — Thu, 27 Feb 2025 19:55:50 +0000

Intro 🤓

The world of front end development is always changing and in order to keep up-to-date with the latest technologies I like to take on personal projects on my free time. My website/blog is one of these projects that I have built, and despite the semi-neglect it has seen over the past few years, I have always been proud of having it and showcasing it to people.

As one can infer from my post history, stuff happened in my personal life that has left me with little to no time for writing tech articles or even work on my side projects. I gave up on finishing Epoch Rift about 1 year and a half ago after realizing I was way too optimistic with the initial scope of the project and my pixel art making skills, and since then I have only started local repositories that eventually were lost when my old computer was bricked.

So in an effort to keep up to date and also to give my website a much needed tech update, along with a visual overhaul. In this post, I will detail as much as possible what hardships I faced, decisions I took and the final result.

How it was 🦕

My website's previous iteration was built in 2021. It was bootstrapped using (the now deprecated) Create React App and it took approximately 2 months to build. The home page included a bunch of photos that I had taken myself of my desk and keyboard as background for several sections and it included most of the information on the website. In the middle of the page I put the SkillsTerminal (which also features in the current version), which provided visitors with a familiar and mobile-ready UI which included my tech skills, aswell as a bit of information on my work and project history.

The other page was a list of my blog posts that were posted in Hashnode, fetched using Graph QL using Hashnode's API. The posts would then be shown when the user navigated to /post/<slug> , after triggering another request to Hashnode's API. I also built my own solution for i18n and theming and relied on styled-components to do most of the CSS heavy lifting and customization.

Javascript to Typescript ✨️

Very early on when planning this update I was decided on making the whole thing in Typescript as the previous itteration of the website was one of the last projects I built entirely using only Javascript.

I could have spent some weeks migrating some components I previously used, but along with the decision to migrate to Typescript, I also came to the conclusion that I was better off building the UI from scratch.

The only code I felt I could migrate to Typescript was my data/configuration files. For example, for my resume, I wrote a .ts file with a single exported variable that contained my work history information. My resume, contacts and the data in the SkillsTerminal (I will get to it 🙏) was all that I felt I had to actually write some interfaces for.

Styled Components to TailwindCSS 🌬️

So, along with the decision to use Typescript and start a codebase from scratch, I also decided that for once I was going to save some time and use one of those shiny new primitive libraries. I did not really want a complete set of UI components, but rather some primitives that worked out of the box but were also easily customizeable. In my last React Native project, I had worked with Tamagui and I loved it, I also really like the components provided in Hero UI (formerly known as Next UI), so I was going for something with the same visual style, but lighter.

shadcn/ui 🧩

shadcn/ui is definetly the new cool kid on the block as far as UI libraries are concerned, despite the fact that they clearly state in their documentation "This is not a component library. It is how you build your component library". This was exactly what I needed.

This library does not provide developers with the usual npm i shadcn/ui + import Component from "shadcn/ui" workflow. Instead, they give the code to the actual component so that you use and import it in your codebase. Whereas the usual paradigm means importing a file from deep inside node_modules and having a wrapper around it, be it for style or functional purposes, I am now finding myself not only using only what I need from a component library, but also being able to customize my own components much easier as I am either dealing with plain HTML elements or Radix primitives.

Setting it up was not hard at all, I just followed the documentation for a manual installation and went with it. The only minor caveat I did find is that I had to add @plugin "tailwindcss-animate"; to the top of my global.css file since tailwindcss-animate doesn't support the latest version of Tailwind.

Goodbye `styled-components` 👋

One of the fads that I have never indulged in for the past few years was the Tailwind CSS fever. To me, this was just another Bootstrap waiting to be replaced by a more modern, more complete and lighter version of itself. And over the years, I've noticed that some component libraries would often indicate in their documentation that they recently migrated away from styled-components. Looking into it, I soon discovered that I would be facing the same decision.

You see, styled-components and other CSS-in-JS has a huge impact on performance and size for the website as it includes more styles that it needs to (and this can be optimized to a point, but I wanted a simpler approach) and the styles are applied at runtime, adding overhead for the browser to parse and apply the styles.

I did try to make it work with Tailwind and styled-components, but ultimately I was seeing some performance issues and weird flickers that were clearly coming from these two conflicting engines and I decided to ditch styled-components all together, after some 5 years of being my go-to CSS solution, it's time to say goodbye and welcome more modern, complete and lighter version of it 🤡

Ditching API based articles 🖊️

Another decision I had taken previously to starting working on this, was to stop fetching the posts on the client side. This is terrible for SEO and makes me have to rely on a thirdparty API to keep the posts available. And in my experience, there were breaking changes to the Hashnode API a few years ago that made it so that my posts were unreachable for quite some time until I finally noticed they were not working when I happened to visit the website.

Besides adding error monitoring to the website, I also decided that the way to go was to render the markdown articles on the server. In doing so I gave Astro a spin, but after being unable to get the Tailwind CSS working, I decided to settle on Next.JS. It is a familiar framework, but I still had to learn how to use the relatively new App Router, which was new to me.

Next.js' App Router 🛣️

Next is shifting towards what they're calling App Router. The previous itteration, known as Pages Router is not compatible with those shiny new React Server Components I mentioned earlier. The main difference to me was using simple fetch and async/await syntax to fetch the server side props. In this case, I had a node script that relied on fs to retrieve the markdown files and a library called gray-matter to retrieve their YAML metadata properties. Then all I had to do was transform my [slug] page into an async function and call the function that fetched the posts from the filesystem.

The other main difference is that instead of relying on a file per page, this allows me to make hierarchical routes, creating nested layouts of components that may need to wait for server data much easier.

Conclusion 🚀

Revamping my website proved to be a rewarding journey filled with both challenges and learning experiences. Transitioning from JavaScript to TypeScript not only improved the robustness of my code but also enhanced the maintainability and scalability of the project. The move from styled-components to Tailwind CSS streamlined the styling process, resulting in cleaner code and better performance, while embracing the component-first approach with shadcn/ui brought more customization flexibility.

Furthermore, switching from an API-based article system to server-rendered markdown posts was a win for SEO and reliability, allowing me to present my content more efficiently and without external dependencies. With Next.js' App Router and the integration of React server components, I was able to reinforce structure and enhance performance, thoroughly modernizing the tech stack of my site.

Reflecting on these updates, it's clear that the landscape of web development is ever-evolving, pushing us to adapt and iterate continuously. This project not only rejuvenated my personal website but also rekindled my passion for front-end development, reminding me that keeping pace with new technologies is both imperative and invigorating. As I move forward, I am excited to explore more innovative tools and techniques that can further elevate my web development projects.

Testing Phaser Games with Vitest

David Morais — Sat, 10 Sep 2022 22:21:21 +0000

Introduction

As you may know, I am currently developing my own solo indie game, it's called Epoch Rift and it consists on a 2D roguelike platformer in which you can only play as spell casters. It is being built using one of the most well-known JavaScript gaming frameworks: PhaserJS. I picked this framework because while I am familiar with JavaScript, I am not too familiar with the game development scene and how everything works.

In this article, I will let you know how I have built a test driven environment for some of my game logic.
So far, I have been focusing on building the essential systems and logic, basically laying down the groundwork so that in the near future I can start incrementing on it with new game content. As I have learned recently, this is commonly referred to as 'pre-production' stage whereas the next stage consists on re-using the basis I've built so far to add new stuff, like monsters, spells and levels.

Game Logic

One of these systems which was particularly hard to implement is what I call the Portal System. This system was responsible for picking up the Portal tiles from Tiled and randomly assign destinations based on a set of conditions.
Now is the time when I must come clean and let everyone know I am not the best at cracking algorithms. So, the initial implementation of this system was a mess, the resulting code was big, filled with comments to remind myself what was happening.

After a few tweaks and itterations on this, I was ready to refactor the whole thing from scratch, however, this time I was ready to give Test Driven Development a chance.

Test Driven Development (TDD)

If a recruiter reaches out to me with a Job Description that points towards heavy usage of TDD, I tend to discard it.
This is probably because, as a front end developer, I have been traumatized by TDD zealots in the past who insisted that absolutely everything must be tested, going to the extreme of testing the browser's API to check if a button's onClick is fired, for example.

In my opinion, if you take TDD too seriously, it becomes counter-productive and a waste of everyone's time. I should not need to test if regular HTML <button> is working properly, for two reasons: 1- The HTML spec is not going to deprecate such a central element anytime soon and 2- In the highly unlikely chance that regular HTML <button> elements stop working on a certain browser overnight, I am powerless to fix them. The same can be said for game development, I do not want to test something that is already provided by the framework/tool I rely on.

You can probably tell by now I am quite negligent when it comes to writing tests. I prefer to start writing code and test later, and then I test manually, like a tech-illiterate monkey 🐒 However, for these complex systems, I figured I could reverse my usual process and start by writing a few conditions that my system should satisfy, create a simple function that receives parameters and returns an output and then adjust the code of that function until my assertions would pass.

My first proof-of-concept was a CodeSandbox in which I copy-pasted a tiled map json and tested a few conditions with the obscure console.assert method. It was fine for a PoC, but for the game itself I needed something more robust. For example, my humble PoC was only testing one static tiled map, I needed to test all maps and I needed to ensure my function would still work if the maps were updated. It was settled, I had to bring testing to my Phaser game.

Vitest

In the past I have worked with several JavaScript testing frameworks, mainly Jest, Enzyme and react-testing-library, however I only used these when testing React applications and the biggest hardship I always faced was setting up the tests. Usually we need to mock most of the stuff required by our React application, be it request calls, functions, or request responses. I did not want to do that. By this time, I was fairly inclined to go with Jest due to my familiarity with it, however...

When I was doing this, I had recently moved the codebase from Webpack to Vite, with amazing results in terms of speed. I totally intend to write an article on this migration, but the point is that the same guys behind Vite had also this testing framework, called Vitest, which was supposed to be better than all frameworks out there while offering compatibility with the Jest API and plugins. What sold it to me was the fact that since I already have Vite configured, Vitest was fairly easy to set-up, whereas had I gone with Jest, I would have spent hours configurating the thing and added a ton of dev-dependencies to transpile my Typescript code.

Vitest vs Jest

If I were to summarize it, I would say that Vitest is Jest built on top of Vite. It is compatible with the widely used Jest API and offers support for Jest Plugins. The difference is that I don't need to add another configuration file for my alias and I don't need to transpile my TypeScript code, because Vitest relies on the same configuration as Vite. Actually setting it up is quite simple.
If you want to compare Vitest with other popular testing frameworks, you can read more on that on their Comparisons page.

Setting Up

First we need to add the package to our dev dependencies. Run any of the following commands, depending on your package manager:

npm install vitest --save-dev
yarn add vitest -D
pnpm add vitest -D

After we have the package, we need to do is install the package and add are a few lines in my vite.config.js file:

/// <reference types="vitest" />
// ➕ We need to add this for TypeScript support. If you aren't, you don't need this

export default defineConfig({
  // ... rest of my config
  test: { globals: true, }, // ➕ I'm using globals.If you aren't, you don't need this.
});

You may also want to add a script to our package.json to run vitest .
Now we are ready to create our first spec file. Which can be placed anywhere and simply needs to follow the <file>.spec.ts naming convention.

Testing Game Logic

So let's go back to my game's Portal system. As you've guessed, it eventually evolved from CodeSandbox and was introduced to my Portals class. For context, this class is responsible for picking up a Tiled layer, rendering the portal sprites on their correct location and what happens when a player interacts with it. As you have probably guessed by now, my big ugly algorithm was part of the player interaction.

Testing this whole thing would require me to create a whole environment for importing Phaser and actually rendering the sprite on <canvas>. This was not good. Not that it should be hard to setup Phaser in an headless environment, but what good would it do knowing that my sprite was rendering properly, if all I wanted to test was the result of a function that runs inside the sprite class.

Back when I was looking for the best tool to tackle this problem, I stumbeld upon this comment on a Phaser forum. It suggests running the game logic in a webWorker and only using Phaser to display stuff. I already have some of the game logic isolated in a procs folder, so I moved the logic into a single function which would split the entire portal destination assignment logic to a single function which would output an object and the sprite would then use that object to deal with the interaction of actually teleporting the player to its destination.

To avoid having to mock anything, I replaced my Phaser.Math usage with hand made functions since I would have to write them anyway to mock them.

Example

I've been writing about this Portal system for a while now and I still haven't explained what exactly it does.

In Epoch Rift, each level has a certain number of rooms. The player spawns in the same room. Each room has two portals, one origin portal from which the player arrives and a departure portal, which teleports the player to a random origin portal.

My function basically takes all the portals and creates a rooms object that is later used for reference whenever a player comes interacts with the portal.

Simple, right ?

Let's start by writing fairly simple test cases. Let's assume that assignRoomsLogic is my function:
⚠ This code is only an example improved for readability. I did not use the real Tiled layers nor the real function result to save space and to make it easier to understand what's going on.

import { describe, it, expect } from "vitest";
import Map from "./map.json";
import { assignRoomsLogic } from "./Portals";

describe("Logic for assigning rooms to portals", () => {
    const portals = getPortalsFromMap(Map);
    const rooms = assignRoomsLogic(portals);
    it(`${Map.name} 📌 has one spawn point`, () => {
      expect(
        portals.filter((portal) => portal.isSpawn).length
      ).toBe(1);
    });
    it(`${mapName} 📌 has the same amount of origin & departure portals`, () => {
      const originPortals = portals.filter((portal) =>
        portal.origin
      );
      const departurePortals = portals.filter(
        (portal) => !portal.origin
      );
      expect(originPortals.length).toBe(departurePortals.length);
    });
});

If you have worked with Jest, this should look familiar. Inside a describe I am basically creating my test case, I get all the portals from the map and create the resulting rooms. At this point, I am just ensuring that I did not fuck up when creating the Tiled map.

In the first case I check that only one of the layer tiles has the isSpawn property. On the second case checking we have the same number of origin and non-origin (departure) portals. Let's proceed with testing the assignRoomsLogic functionality:

    it(`${mapName} 📌 has the same amount of rooms as the portals`, () => {
      const uniqRoomsInPortals = [
        ...new Set(
          portals
            .filter((p) => p.room.id)
        ),
      ];
      expect(Object.keys(rooms).length).toBe(uniqRoomsInPortals.length);
    });
    it(`${mapName} 📌 has all portals leading to a room`, () => {
      expect(
        Object.values(rooms).filter((r: PortalRoom) => Boolean(r.departure))
          .length
      ).toBe(Object.keys(rooms).length);
    });
    it(`${mapName} 📌 has the spawn portal as the last destination`, () => {
      const gotoPortalIfNotSpawn = (room: PortalRoom) => {
        ...
        return room.id;
      };
      const spawnRoom: PortalRoom = Object.values(rooms).find(
        (r: PortalRoom) => r.isSpawn
      );
      if (spawnRoom) {
        const lastRoom = gotoPortalIfNotSpawn(spawnRoom);
        expect(lastRoom).toBe(spawnRoom.id);
      }
    });
    it(`${mapName} 📌 does not have any repeated destination`, () => {
      const destinations = Object.values(rooms)
        .map((r: PortalRoom) => r?.destination)
        .filter((n) => Boolean(n));
      expect(new Set(destinations).size).toBe(Object.keys(rooms).length);
    });
  });

In this snippet, the first test case creates a Set with unique room ids and ensures that there are not any un-reachable rooms. On the second, I confirm that the number of departure portals is the same number of rooms and therefore all of them lead to a room. The third thest case runs a recursive gotoPortalIfNotSpawn function to go to the next room and stop at the spawn (ie, back at the beginning). And last I assert again with Set that the unique number of destinations is the same as the rooms.

After this, the I wrapped this in a describe.each, loaded multiple maps and ran the same test cases for all maps:

const LEVEL_MAPS = [...];

describe("Logic for assigning rooms to portals", () => {
  describe.each(LEVEL_MAPS)("for each map", (map) => {
    const mapName: string = map?.editorsettings?.export?.target;
    const portals = getPortalsFromMap(map);
    const rooms = assignRoomsLogic(portals);
    ... // Code from above, using mapName for the output
  }
}

Vitest UI

There are a couple of VS Code Extensions for Vitest, which has helped during this process. But I'd say the main feature that made me enjoy working with TDD was Vitest UI.

Like Vitest, this is also a breeze to set up. Simply run yarn add -D @vitest/ui and add a script to your package.json to run vitest --ui (or just do it from the CLI, I am not your father).

The result is a dev server with hot reload that watches over your .spec files and runs the suites whenever you update something.

To the TDD zealots, I have to concede, when all of those go green for the first time, it is quite the pleasing sensation ✨

Other Use Cases

After I was done with this I have already used this approach to refactor some code and will also apply it in some upcoming features for the game.

Another good example, albeit a bit more straightforward to test is the player state logic. I wrote some basic conditions that test, for example, that a player can't shoot a spell if he's jumping.

I also intend to test the monster's aggro logic to ensure they're properly interacting when in proximity with the player, and ensure that the loot table generation algorithm is giving out correct results.

Every game is a bit different and will have different systems and different game logic requirements. Board and puzzle games may want to ensure their initial board is correctly initialized and meets certain conditions, for example, or enemy and difficulty algorithms for a different number of game genres.

The important thing is that we isolate what we want to test and what should be handled by the framework/engine.

Conclusion

This is a no-bullshit, no-time-wasting approach to testing logic and systems in your JavaScript games. The experience so far has been really smooth and intuitive. Vitest is a great tool, fast and compatibility with the widely known Jest framework, and if you are already using Vite to build your project, I cannot really recomend anything else. If you are like me and like to develop with HMR, Vitest UI is also a great tool to work with tests.

I hope this was a fun and informative read. If you want to read and learn more about me, be sure to check out my website with my past posts. If you want to learn more about Epoch Rift, checkout its official website and follow us on Twitter.
Do you use a different approach to to game development testing ? Do you know any other alternatives to Vitest/Jest ? Feel free to share your thoughts in the comments 💪

My Path to Front End Development - 5 Years Later

David Morais — Thu, 21 Apr 2022 00:29:04 +0000

Intro

Hello friends 👋

I would like to share my path towards becoming a front end developer using free resources in hopes that this post clears any doubts some of you may have regarding switching careers. This is going to be a a long one, so you can skip to the bottom if you want to see a summarized timeline of my adventures in the IT world 🚀

April 20th, 2017, was my first day at Frames News. It was my first professional experience as a software developer, age 24.
Before that, I was working remotely as an Apple advisor (ie: glorified call center operator), picking up calls for eight hours straight from people who had mostly had forgotten their Apple ID and couldn't be bothered to use Google to find that password recovery page. And before that, I went to college for four amazing years where I met really great people and got my languages degree.

Alot of the developers I have met ever since I got into this area, also had changed careers in pursuit of a better life and other ambitions, so if you too are reading this and considering jumping to this area, I hope this post will help you in making this decision as I will share how I became the software developer I am today and some of the accomplishments I had ever since I decided that I wanted to turn my life around, all without spending any money.

In a past life

I completed my languages degree in May 2016. By then I only had two previous work experiences:

I worked as a 'tour guide' for a short time in the summer of 2015. And by 'tour guide' I mean, my job was more delivering brochures in downtown Lisbon, in hopes that tourists would book day-long tours for the next day. The problem was that for the two weeks I worked there, we were a team of four guides that only had one tour group schedule a tour. I was lucky enough to volunteer to be the first 'tour guide' and actually did the tour while my colleagues were delivering brochures all day. They 'fired' half the team when they realized they were not making any money, luckily I was let go.
In 2016 I worked at a support call center contractor with a marketing company as a client. As I'm a native english speaker, this was good pay, and having heard the stories my college colleagues would tell about working in a sales or outbound call center, I considered myself lucky I was only calling people to check why on earth they weren't scanning all their shopping with our fancy bar code scanner. And by fancy, I mean, outdated piece of crap that had alot of problems and was not to be replaced by the available new models unless the clients complained about some specific issues.

Needless to say, I did not enjoy any of these experiences. At the call center I met all sorts of people who gave me an insight of what the future held for me:

Guys who actually got into the client's bar code scanner thingy and actually PAID from their own pocket to buy the client's swag online, which they would proudly wear to work.
Old folks who clearly were there just to pass the time and make a little extra money.
People who I can only politely describe as mentally challenged who managed to get fired for being inefficient at reading a script (I am not 100% sure to which degree on purpose).
Some had been at the company with the same client, doing the same thing and reading the same scripts for a time that I do not consider to be within sanity, I'm talking 15 years of asking people why they were not scanning their shopping every god forsaken day.

In the following year I was set to finish college and get a job as a languages teacher and while I did finish college with good grades and got my degree, I only managed to get an interview for a teaching job, a part time offer at a private school nearby that said they were only waiting to settle a few details and they would for sure call me back. They never did.

I found a job as an Apple remote advisor which was like having a call center in my room. It paid better than average jobs and they did send me an iMac to allow me to work from home. I started in September 2016, was making about 900 euros per month, and during the first few months, since I had to connect the internet cable to the iMac, I was constantly playing Football Manager on my own computer while taking calls.

The fact that I was working from home did very little to improve my opinion of this kind of work. I will always remember kindly the phone call I received while in the middle of going number two because I was 1 minute late on my break, the endless wave of calls, 75% of which about the same issue, that went on for eight straight hours and the weekly rotating schedule which could have me working from 8h-17h on a week and 12h-21h the next one. After a few months I was basically looking for a way out.

The realization that if I did nothing my life would go on like this and in twenty years I would be just like one of the fellows I met on my first experience, was my first step towards becoming a software developer. There, I realized two things: I would have to dedicate alot of extra time to it and the sooner I started, the sooner I would be able to leave my current job .

Jack of All Trades, Master of None

By the time I was looking into alternatives, I already had a few options, all of them based on my personal hobbies and all of them with alot of competetion. I remember thinking: "I can play guitar and piano and I also love playing video games, so for sure, a YouTube career is within my grasp" and who knows...

Around this time, a very close friend from high-school came to visit and we had one of the most important conversations in my life, first because it introduced me to FreeCodeCamp, second because that's when I learned the expression "Jack of All Trades, Master of None". Imagine a game of roulette, spending a few years pursing a gamer/musician career would be the equivalent of randomly betting on numbers 23 and 8.

I had already 'coded' some games while in high-school with a very specific game engine (that still exists), but I knew nothing of any real programing language. My friend knew this, in fact, we actually worked on a senior year project which involved creating a website. In this conversation, my friend recomended I checked out FCC and painted me a picture of what he heard about the IT scene:

Crazy wages. Get a Tesla in 2 years.
Anyone can become the next Steve Jobs.
Party during work hours. Drink during work hours.
No extra hours. If extra hours were required, pizza for everyone.
Huge demand for anything IT related. You can fix printers ? Here's 100k/yr !

All of this sounded great (and not even close to reality in most cases), there was just this small problem that I had no idea how to actually develop software and, like I said above, already knew how to play guitar and video games 🙃. I had previously tried to learn how to develop by watching some Udemy or Coursera videos, but that did not work so I checked out FreeCodeCamp and read some articles on people who managed to use this to turn their life around.

Becoming a Developer

FreeCodeCamp is a website that offers you a complete course in Web Development, for free. At the time, the curriculum was slightly different and was split into Front-End, Backend and Full-stack certifications, now its less condensed, feel free to check it out on their website. To me, I really liked how they introduced new lessons and asked you to do an exercise on it.

In a few weeks I had stopped playing Football Manager on my computer and managed to do some lessons while taking calls. I felt the HTML and CSS modules were really easy. My first project was a simple Bob Dylan tribute page using only HTML, Bootstrap and CSS. I started to feel some difficulty when I started with the JavaScript lessons.

However, the thought of waking up knowing I would have to face eight hours a day of talking to pissed off Apple customers who either forgot their password or bought a bricked phone, pushed me forward. During this time I was fully commited to getting my life on track and I had also decided that I would quit my job when I finished the Front End Development Program.

I think what really worked for me is that FCC lessons did not provide the full picture and instead encouraged me to go and search out how to accomplish something and actually understanding what was happening.

So I continued learning JavaScript and eventually jQuery , did a Pomodoro Timer and a Simon Game on CodePen and my final project was making my own GitHub Profile page. I got my certificate for the Front End Development Program on January 16th, 2017 and I would quit my job soon after. With this certificate I started sending CV's and applying for every Junior Developer role.

Job Hunting

One of the first and most important things I did, advised by FCC, was to properly write my LinkedIn profile to something more resembling IT career. I was hesitant to do some steps, but I followed every single orientation and article and for the first time in my life, someone messaged me on LinkedIn 🤩 it was a recruiter who just wanted to become part of my 'network' and for some reason sent me a message 😢

My friends, I am fully aware that this certificate and 'online course' is not the best answer when they ask you about your education on interviews. Still, I managed to go to get a few interviews on well known consultancy companies, suited up (yeah, I know 😅) and most of the times I received the typical, "We will reach out to you", some actually did, just to let me know that the final client was looking for a more experienced candidate.

In one consultancy, I had a brief tech interview with the CTO and actually got an internship at that company, but the state denied to fund said internship and they were not willing to pay my full salary. The other occasion I came to getting my first job came in mid February 2017 when I got through a technical interview and was supposed to deliver my first take home assignment.

They wanted me to build a table from the JSON, and I read somewhere in the documentation that they used some sort of HTML templating solution. The process of cloning a repo, the whole git workflow and the HTML template were entirely new to me. I remember I did most of it using Handlebars and CSS. Rejection came a few days later.

During March I got some interviews in some consultancies and some start ups which kind of kept me going, however, nearly 2 months of rejection were starting to take a toll. I remember that I even sent my new 'developer' CV to some call centers and temp work agencies, but not even they were calling me back. I also started to get more selective in my job search and sent CVs only to start ups, who were more likely to look at my little portfolio and the effort I put into it.

We were now in April and I was worried I made a terrible mistake by leaving my job. I had nothing to show for myself except for a few CodePen projects, an empty GitHub profile, and a PDF that says I did some coding exercises that you can just Google the answer for. And my parents were happy to point this out to me.

And then, the guys from the code project I delivered in mid February called me and asked me if I was still available.

I AM DEVELOPER ! (sort of)

The guy who was initially hired left for some reason, and I was more than happy to take the chance. I realize this bit of sheer luck has possibly enabled everything that came after, but I will be forever thankful to whoever poached that guy from the startup I was about to start working on.

And so, April 20, 2017, was my first day at Frames. My job would be to make charts using the D3 library (which was also a part of the Free Code Camp curriculum) and vanilla Javascript. The company was quite small, there was a journalist who would use a backoffice to input data on chart templates, a senior developer to create and maintain the backoffice functionality and me, who would create and maintain the chart templates. Regarding the salary, I accepted the fact that I wouldn't be as productive as someone that graduated from a bootcamp or college so I was happy to take the 700 euro per month pay check.

The first few weeks were tough, I rembember being asked to read the entire You Don't Know JS book with the implied threat of losing my job. FreeCodeCamp did give me the basic knowledge, but now I needed to learn about the foundations of the language I would be using for the next years. If you are a self taught developer, I totally recomend you read through this and other books that go in depth into the language features.

While my senior developer made me feel dumb multiple times a day, I felt I was evolving as a developer and actually learning alot during my work day. The work environment was also something I had never witnessed before. I remember them laughing at me when I my memory's muscle memory warned everyone I was going to take a leak.

This experience was also invaluable because I had a walking fountain of knowledge sitting next to me and was really cool about answering my questions and pointing out all code style errors in countless PR reviews. I cannot count the amount of times he had to explain me the whole rebase workflow. What really helped me improve my Git knowledge was GitKraken and other similar tools.

I eventually started to learn React and even started to lend a hand on the backoffice while my colleague would focus more on the backend and devops component, however, the company decided to stop development in the summer of 2018. The service and the templates I developed were active until the company stopped its service in March 2021.

Milestones & Timeline

For someone who's considering changing careers into IT, I would like to point out that by the time my boss announced he was closing I was already receiving interview requests on a semi-daily basis and had little trouble in finding my next job, which doubled my salary and took me to travelling to the Netherlands for the first time in my life. I have never needed to apply for a job ever since.

I am currently on my fourth job in IT, working for Pennylane, a french company with big plans for the Accounting area, in the meantime I have done a few open source projects and am currently developing a game with Typescript and React, Epoch Rift, among other side projects.

Here is a timeline of some of what I consider achievements ever since I started the FreeCodeCamp course

2016
- September
  - Started FreeCodeCamp Front End Development Program
2017
- January
  - Completed the Front End Development Program
  - Quit my job
- April
  - Got my first job at Frames as a junior front end developer
- June
  - Completed SoloLearn JavaScript course
  - Started learning React
2018
- March
  - Started developing MDyna, an open source markdown notes app with React and Electron
- August
  - Completed SoloLearn Python course
- September
  - Joined Intrasurance as a React Engineer via a consultancy
  - Started learning Typescript
2019
- November
  - Went to Websummit via MDyna and Github's Open Source Program
2020
- January
  - Joined Gaspard+Bruno as a React & React Native developer
- March
  - Completed SoloLearn Ruby course
  - Stopped working on MDyna
2021
- May
  - Started working on Epoch Rift, a roguelike game with Typescript and React
2022
- December
  - Joined Pennylane as a Front End Developer
  - Started working on Kuro a Microsoft To-Do desktop client for linux
- April
  - Released React Bifrost my first NPM package

For any questions you can reach me on my website and follow me on Twitter, you can also drop a coment below. I will do my best to try and clarify and doubts you may have regarding switching careers or what path to take.

Git Worktrees - git's old hidden feature you never knew

David Morais — Wed, 13 Apr 2022 18:09:15 +0000

Hello fellow developer 👋

Have you ever been in one of the following situations ?

You are developing a feature and your PM just had his dose of 'cool ideas' at lunch and really wants you to drop everything and work on his new brain child ?
Your ~~young padawan~~ junior cannot, for his paycheck's sake, discover how to make something work and after a 2 hours call you just ask him to push his code so you can quickly take over ?
You push to production, treat yourself a cake for a job well done, and start working on something else when the CI/CD starts screaming alerts on 3 different devices and you need to drop everything and put out a fire ?

For times like this, most people either do git stash or a git commit -m "wip" in order to save what they were doing so they can tend to other priorities.

Quickly changing your` mindset to deal with another problem requires you to re-align your focus and get your bearings, now, depending on many factors changing branches may involve setting up a whole dev environment, like running migrations or installing dependencies, and that takes time.

I was quite happy with following either one of the above mentioned methods during the entirity of my short career. That is, until I started working in a project with a huge number of developers, which translates in having to 'refresh' alot of stuff everytime you switch branches. Luckily, recently I came across a git feature that seems to have been introduced way back in 2015, with the release of Git 2.5.

What are Git Worktrees ?

Git Worktrees allow you to quickly switch between branches without having to re-initialize your whole dev environment. When you do git worktree add you create what is called a "linked worktree" . This is the worktree equivalent of doing a git checkout -b as it creates both the worktree and the branch.

`bash
~/dev/kuro master
❯ git worktree add ../.worktrees/kuro-fix-css -b fix-css
Preparing worktree (new branch 'fix-css')
HEAD is now at 9652578 kuro@8.0.4

~/dev/kuro master
❯ cd ../.worktrees/kuro-fix-css

~/dev/.worktrees/kuro-fix-css fix-css
❯ git status
On branch fix-css
nothing to commit, working tree clean
`

You can read the documentation for more details, but let me breakdown what I did.

I was in my master branch with the latest changes
I added a linked working tree called fix-css which is coming from one directory up with in the .worktrees folder. The -b flag creates and checks out a new branch starting at the HEAD when I run the command.
- Opposed to linked working trees we have the main working tree which is the main repository directory.
I switch to my worktree directory.
I'm now working on a newly created branch from master called fix-css

I can then commit to this branch, but if for some reason I need to create another worktree from this my master branch I can just do this:
`bash
~/dev/.worktrees/kuro-fix-css fix-css*
❯ git commit -m "some changes"
[fix-css d04039b] some changes
1 file changed, 12 insertions(+), 12 deletions(-)

~/dev/.worktrees/kuro-fix-css fix-css
❯ git worktree add ../kuro-from-master master -b new-branch
Preparing worktree (new branch 'new-branch')
HEAD is now at 9652578 kuro@8.0.4

~/dev/.worktrees/kuro-fix-css fix-css
❯ cd ../kuro-from-master
`

Breaking down the worktree add command, we're adding a worktree in ../kuro-from-master pointing at our master branch, and again the -b flag creates and checks out the new branch in the worktree.
At this point, if we change directory to any of the worktrees, or the original worktree (called main working tree) and we run git branch --list we can see that we have 1 branch per worktree and all our regular branches.

Behind the Scenes

As I'm sure you have realized by now, we are basically creating a full copy of everything that's not targeted by our .gitignore rules. Admitedly this is not ideal if you are working in a VM or in a more limited machine. The codebase may not be that big, but remember you will most likely need to install dependencies everytime you initialize a worktree, unless you don't have your depencies listed in .gitignore, and if you do, please stop and take a moment to think about what you're doing with your life.

There are two reasons we don't track our dependency folders with git

They can get pretty big, pretty fast.
Everytime you update a dependency, you commit the compiled dependency changes.

That's why we have those fancy install scripts.

So for each worktree we're maintaining we have to allocate disk space for the project and all the dependencies. For a simple Javascript project, this goes to 400-600MB per worktree, so we should be mindful of deleting old worktrees with the git worktree remove <worktree_path> command.

Pros & Cons

Let's quickly go over some pros & cons of the vanilla worktree feature that comes out of the box when you install git compared to the workflow we all know and love

Cons 👎

You need to install all dependencies everytime you initialize a worktree
- With stash & checkout you already have a dependency folder and only install the necessary updates.
If not controlled, can take up alot of disk space.
- With stash & checkout you only have on working directory.
Unable to create/checkout branches checked out in worktrees
- If you have a worktree pointing to a branch, you will not be able to checkout that branch in the main working tree
Easier to write checkout <branch> than cd <path_to_worktree>
- Yes. Read the following section where I introduce some tools that deal with this.

Pros 👍

You ONLY need to install dependencies whern you intialize a worktree.
- Unless you're constantly pulling changes from other branches, you only need to install dependencies once.
You only need to run your environment scripts once.
- If you work with databases, you need to reset or run migrations/backfills everytime you switch branches.
Worktrees allow you to just save your file and move contexts.
- You avoid WIP commits & endless stashes in your history
You can run two instances of your code editor in different branches.
- You can easily cd into your worktree directories and open your code editor.
- To my knowledge, there's no way to do this with only the main working tree

From this list, you can see that the main downside to have in consideration is to mind how many worktrees exist at the same time in your machine because of the space they can take.

Tools & Suggested Workflow

My main issue with worktrees was always how different the command structure was from the all the git checkout I was used to doing. If I was using it to create worktrees from the CLI, my first move would be to create two functions to ensure I had one centralized .worktrees directory and that I could easily change into that directory.

bash gwt () { branch=${1} git worktree add ~/dev/.worktrees/$branch -b $branch } gwtc () { branch=${1} cd ~/dev/.worktrees/$branch }

If you're looking for simplicity and you don't have a big number of projects in your machine, this script will suffice for your CLI needs, however, I have been using two tools that make this process way more straightfoward while dealing with multiple projects.

GitLens

GitLens is a well known VSCode extension and the reason I stumbled across this feature. They have recently released their take on bringing worktrees to VSCode and it makes creating worktrees and checking out respective branches really easy. You can select where you want the worktree stored (by default it uses the ../<project_name>.worktrees directory) and allows you to easily Open VSCode on and from any of the repo's worktrees.

Git Worktree Switcher ⚡

For the terminal, another great tool I've found is a little bit less main stream, is Git worktree switcher! ⚡ . This little script can be installed quite easily and provides a nice way to switch between worktrees with fuzzy find support. In the example above, I can just do wt fix-css and the script takes me to the fix-css worktree directory, and I can also jump back to the main working tree with wt - . This also renders my second function completely useless.

Workflow

Regarding my workflow, I have the rule of only creating worktrees for either branches that are ready but are waiting for something (like a PR review or another feature being merged), to lend a hand to a colleague in another branch, or if I'm in the middle of something and a new bug required my immediate attention. Remember that for each worktree you create, you will take up disk space for the dependencies.
When the need for a worktree arises I usually do the following:

I checkout the latest commit from the main branch
In VS Code, I use GitLens to create the worktree (and the branch if it doesn't exist already, from the Source Control sidepanel

I open the worktree with VSCode
- GitLens allows you to open the worktree while keeping your main working tree window.
On the CLI I do wt <branch_name> and install the project dependencies.
- In this workflow, the branch name and the worktree directory will be the same.
If I need to switch back to the main worktree I can do wt - on the comand line and open the code editor through GitLens (or by doing code . on the CLI)
Once I'm done and push my changes, I usually leave the worktree until the branch is merged.
When I no longer need the worktree, I can remove it in VSCode on the Source Control sidepanel.

And this is pretty much it. By doing this, I have saved alot of time by not having to re-install depdencies or run migrations everytime I switch branches

Conclusion

Hope you found this article interesting. I have been using worktrees for a very short time, so I bet there are way more integrations and tools for this amazing and hidden git feature. If you're aware of any other tools and hacks realted to worktrees, please leave a comment.

Check out my website to learn about my most recent projects and follow me on Twitter 🤙

Devlog - Zero to First Trailer

David Morais — Thu, 03 Feb 2022 18:29:29 +0000

A few months ago, I wrote a post sharing the project I have been working on and the tools I am using while making Epoch Rift come to life.
On that same post I have written something resembling a roadmap that I was guiding myself through. Today I want to share the progress I've made since aswel as share some of the diagrams that I've made back in May when I was thinking about starting to develop a game.

Game Design Document

Core Mechanics

So back in May, when I decided to embark on this journey, one of the most difficult tasks I had was to create something resembling a Game Design Document. Unline some of my previous projects, I wanted to have clear goals of I wanted to accomplish and limit my scope to what I had to do to make a basic game.

I started by deciding the core mechaniccs. I have always loved platformers, in fact, one of the first games I have played was Prince of Persia for MS-DOS. Platformers can also be considered 'easy' to develop from a technical point of view, so I decided that my game would be a platformer ✅ What else ?

Well, the last few years we've seen a re-surgence in 2D platformers, but with roguelike features, and I have been spent way too much time playing them. This left me with a whole lot of ideas for new mechanics and new ways to randomize the experience. I wanted that ✅.

So we have a 2D platformer that would provide an unique player experience it would be played, by randomizing some elements in between runs.
At this point, I honestly felt this was too 'vain' and needed to add something to keep the players playing and making them want to return to the game. I have always hated grinds, but easily fall prey to the feeling of reward of leveling up your character and gaining that +1 HP. I needed to have some sort of progression ✅.

This is when I decided to find a good and free diagraming and whiteboard application. Let's have the decency to reach the common understanding that having limits on how many boards/documents can be created is not free. Flustered by my attempt, I picked ~~better Photoshop~~ Affinity Photo and started to paste screenshots of some of the games I remembered that, one way or the other, checked the marks for what I wanted to accomplish. One of the games that featured alot was Hocus Pocus, released in 1994, and one of the games I played during my childhood with my father. The mechanics were pretty rudimentar. You had the Arrow Keys for movement and looking up. Alt for shooting little thunderbolts and Ctrl to jump. That was it. This is where I took most inspiration from (look at the screenshots if it's pretty obvious).

Epoch Rift is a 2D Platformer with roguelike features with a very simple mechanic. You can only play as spellcasters. No meleee attacks or abilities. You can play as multiple characters and learn a plethora of spells depending on the level you are on. You can play as multiple characters by first unlocking them, then buying them with some kind of in-game currency. To beat a level you need to find all the spheres in that level.
Based on that, I drew up a diagram of some mechanics that I could implement, some randomizers I could introduce between levels or runs. This was my initial 'wishlist' 👇

In the meantime I have dropped some mechanics, as I've quickly realized I'm working with Javascript on an engine with technical limitations and not that much documentation out there.
Also featured on this document is this Game Flow I had in mind and unlike the previous, this diagram is still valid for the most part.

I have decied to merge the Character Selection Screen and the Portal Room into a single Player Hub in which you can upgrade your character, select your character for the run and select the Epoch you want to play.
For future reference, an Epoch is a set of 3 levels + 1 Playable Boss, which becomes unlockable after you defeat it.
This model also has the advantage of being scaleable. I can release content in sets of 3 levels + 1 boss or extra playable characters.

Branding & Name

I feel like I have been neglecting this part of the process for quite a while. Let's start with the name:
This project's name has been evolving until I actually started creating social media accounts and registering the domain.
This projected started as Project Brass-Lizard, then for a brief period of time, I thought about calling it Magus Rift.
It was a game of wizards jumping through portals in time, so it sounded pretty intuitive. However, during the time I tried to go with this name, it always felt something was off.
I landed in Epoch Rift, as the wizards are jumping through rifts in time, with the different ages of humanity being used as level settings.

So this was the first branding itteration I had with Epoch Rift. It was the first 'official' logo with the lettering.

Maybe I have a dirty mind, but that portal always looked wrong, so for the time being, I've settled with this as the logo, which is the same sprite of the portal animation, upscaled.

I do admit I should consult with a graphic designer as this is something that can and should really be improved. Any suggestions or feedback are welcome.

Process

Since my last post I did not make much progress in terms of actual game content. I switched jobs in December and am still adjusting. It's a new codebase, new colleagues, new technologies and new routines. Add that to having to do house chores every day, and I admit that somedays I just do nothing.
Since September, I added a new playable character, Morgana, with two new spells and the first status effect to the game, after you hit a monster with a Fireball, the monster will be burned.
I have added the first map for the hub area where the player will respawn after a run.

I also discovered the amazing BoscaCeoil software and produced a few songs I think are good enough to be in the game.
This all culminated in the trailer which was released and is feauturing in the landing page.

You can check out the trailer here

There was also some progress on the marketing side. I designed and released the landing page with a mailing list (which has just recently changed their pricing plans and I have to make the change).
I have also created a branding repository centralize and keep track of graphical assets. So if I need something I can just do a git pull and have the latest assets.

The biggest addition to the game was the portal system. In the trailer you still see the free level.
Above, I wrote that I wanted to randomize certain elements every run. A procedurally generated level, ideally, however let us be realistic, a pathfinding algorithm compatible with the toolset I'm using is not something I can do at my current skill, at least in the time I want to spend doing this. So here's how I'm making each run unique:

The levels now have rooms with walls blocking the way forward.
Every rooms has two portals, one to go back and one to go to the next room.
The portals are connected randomly each run and can lead you to a room with one or two spheres, monsters or rewareds.

The first level was not designed with the portal system in mind, so it only has 10 rooms, but the next level, which is already being developed should have many more rooms to provide a different experience every run.

To sum up, here's what we currently have:

2 playable characters
2 maps (1st level & player hub)
5 spells
2 monsters
Portals System
Landing Page
Trailer

I have already finishing designing the tileset for the next level and am at the level design stage and since I have created sort of 'templates' for new scenes, I expect the next level to be revealed within the next couple of weeks.

Next Steps

The demo release on itch.io is overdue, mostly because I did not account for the time it would take to work on the trailer and the landing page. So in the next few months I will be working on the following:

2nd & 3rd level
- Visceral Hills & Great Pyramid of Nektanebo are the next two levels of the first Epoch.
- Visceral Hills on the insides of an ancient being. Meat and flehs are your surroundings.
- Great Pyramid of Nektanebo takes place inside a pyramid with an egyptian theme.
1 boss encounter
- To finish the first Epoch you must defeat the boss.
- After defeating the boss, it becomes an unlockable playable character.
React UI
- My current UI is messy and ugly. And due to its <canvas> based nature, Phaser is also not the best option to create UI.
- I intend to create some sort of bridge between the Phaser game and a React overlay application which will be responsible for rendering the UI parts.
  - This includes dialogue, character upgrades, Game Over & Title Screens.
Steam Page Launch
- For marketing purposes, before releasing the demo on itch, I really want to start gathering wishlist requests.
Wiki Launch
- I'm currently using Obsidian to keep track of spells, characters & enemy documentation. I intend to create an engine to render my Obsidian vault as a Wiki website.
Release on itch.io
- When all of the above is done, I need to create all the design assets inherent and copy content for an itch.io release. ## Future Projects In the near future, I wish to create some open-source projects and distribute them to other indie game developers. This is also great to gain some visibility among the indie game developer scene.
React UI Bridge
- I still have not decided how I should call this, but this is basically a way to allow developers to use JSX to develop the UI of their phaser games.
Dialogue Manager
- I want to have dialogue based a player's progress with a character. So if a player speaks twice to the same NPC, he will get diffent dialogues and advance in the game story.
- To simplify this, process I want to create a graphical interface to generate a json that will be consumed by the React UI Bridge
Obsidian to Wiki
- As said above, I intend to create a static website based on my markdown notes in my Obsidian vault. I have thought about using a CMS for this or even a Notion page. But there's nothing like this in the open source scene, so it should be an interesting project to gain some visibility in an area more outside of the indie game dev circle.

Tools

I have pretty much detailed the tools I'm using for this solo-development project in my previous post, still before we start I'm gonna share the updated list of my current stack.

Graphics
- Pixel Art
  - Tiled
  - Aseprite
- Other
  - Affinity Photo
  - Figma
Code
- VsCode
  - Phaser
  - Typescript
- Hosting & Source Control
  - Netlify
  - Gitkraken
  - Github
Music Production
- Bosca Ceoil
Project Management & Documentation
- Excalidraw
- Obsidian
- Ora

Conclusion

I know I still need to invest in my branding efforts and improve on that front, but for now I really feel like I have spent enough time on this.
I expect the next few months to be more smooth and provide much more in-game content, and hopefully, the next devlog will be to tell you about our demo release 🚀
Hope you liked to learn more about my project, Epoch Rift. Do you have any questions or suggestions ? Feel free to drop a coment or contact me via my website.

Follow Epoch Rift
Follow David Morais

My 2022 Productivity Suite

David Morais — Thu, 13 Jan 2022 20:47:57 +0000

Introduction

Some of you may have read my article from last year about my Productivity Apps for 2021. It's always a good read, especially if you're like me, looking for a new applications all the time. That list is slightly outdated as I have dropped some of the applications there and have found better options for them. In this post, besides listing the new applications I am using, I will also talk a little bit my daily workflow and how I combine the ~~perhaps too~~ many apps I am using.

Let's start with the apps that have replaced last year's picks.

Apps

Before we head into the list itself, a disclaimer: These apps are supposed to help you be more productive. None of the following will do your work on its own, you must make use of them. Therefore, allow me to explain the factors that will make me actually want to use an app:

Cross Platform Compatibility 💻
- I use Windows, Linux, Chrome OS and Android, so being able to use the same app across all my devices is a MUST.
Offline Support 📵
- I did not think I needed it, until I did.
Dark Theme 🕶️
- Because I do not like wear sunglasses when looking at my screens.
Desktop Client 📦
- For the desktop apps, I prefer to have them as a separate window instead of something attached to my browser.
Price 💸
- Because I spend too much money on crypto without any meaningful return.

Password Manager

Bitwarden

💻 Linux, Chrome OS, Browser, Windows, macOS & iOS
📵Offline Support
🕶️ Grey/Nord Theme
📦 Desktop Client & Browser Extension
💸 Free

Bitwarden is not new to me. I have used it before switching to MYKI last year. However, MYKI broke completely on my PopOS machine and after speaking with the devs via Reddit, I was not getting anywhere and kind of needed my credentials.
Looking at the Free options in the Password Management department, there aren't many options out there. Bitwarden is safe, open source, and cross platform.
I decided to give it another try and I must say I was positively surprised with the improvements I have found since I used the app for the last time.
One of my biggest complaints, was that unlike MYKI, Bitwarden didn't prompt you to Save passwords unless you had the client open & unlocked, and I honestly don't know if they already had the Vault Timeout setting back then, but by setting my Vault to lock on my computer restart solved that issue.
Two great additions to Bitwarden were the dark/nord theme which I can't remember being there back when I first tried it.
The UI is not the prettiest, in my opinion, but it is very intuitive and fast.
Overall, it does everything you'd expect from a password manager: you can save passwords, credit cards, tokens, just about anything really... Also has this neat feature that allows you to send self-destructible notes to your friends and colleagues. Specially useful if you want to onboard someone on a project.
Another cool addition was the Windows Hello integration which I'm 99% sure was not there in the past.

Project Management

Ora.pm

💻 Linux, Browser, Windows, Android & macOS
📵Offline Support
🕶️ One of the most beautiful apps on the list
📦 Desktop Client
💸 Free/Premium

Like the application above, Ora.pm is not new to me. In fact, I have used it pretty much throughout the whole development of MDyna.
Last year, I gave YouTrack a try and it does a solid job as a JIRA alternative. I'd use it as a JIRA alternative. But that's not what I'm looking for, now is it ? Besides only having a browser version, no offline support and a terrible theme, I wan't something a little lighter to manage my side projects. So after building my webside using YouTrack, I decided it was time to look for an alternative. And oh boy... did I look.
I think this is one of the thoughest applications of my stack because of the crazy amount of PM apps birthed every day, each with 5 or so different pricing plans.
I wanted an application which filled the above criteria, but also something that would not limit me according to their pricing plans. I did a comparison chart of a few select PM tools, combining price with the features * I valued*, and Ora.pm came up second, after YouTrack. And that is because YouTrack is 100% free, so their price/feature is always going to be 0.
Ora.pm is prehaps the lesser known application on this whole list, unfairly so. It's feature rich, affordable, and their themes are stunning.
Full disclosure, there are a few issues with it, for example, I've found that the GCal integration is better left unused if you like to move deadlines around in a Gantt Chart.
However, you get Sprints, Burndown Charts, Unlimited Tasks, Custom Fields & Milestones for free. I ended up paying for a plan because developing I wanted tasks relationships for developing Epoch Rift and it's totally worth my 6$/month.

Notes

Obsidian

💻 Linux, Windows, Android, macOS, iOS
📵Offline Support
🕶️ Plenty of themes to choose from, super easy to customize them with CSS
📦 It's a desktop app
💸 Free (but...)

The first debutant in this list.
Obsidian has been one of the most pleasant surprises I came across last year. For those who don't know, it's a Markdown notes application and replaces Notion on this category. Last year I went on vacation to a rural area and my connection was either painfully slow or non-existant at all, and since I don't keep Notion open all the time, I had no way to access it.
If the best part of Obsidian are the Plugins which you can install right out of the client, and there are 2 or 3 I would consider 'core' to make your overall experience better. The second best part is that it works offline across your devices, with a minor caveat... Sync is premium (and a bit pricey in my opinion). There are workarounds like using a cloud provider like OneDrive or Dropbox, I'm using the git plugin which basically backs up my vault to a Github private repo. While it's not practical to use on mobile, I will go into detail later how I deal with it.
If you don't know Obsidian I suggest you check it out, I've migrated everything from Notion and despite the fact that it took me about 4 hours to do so, I regret nothing. The writing experience is pleasant, there are hundreds of themes, which can be easily customizable if you know basic CSS, and all the data is private and owned by you, unlike other alternatives. The downside is missing the sync on mobile, but there are apps which may force your cloud folders to update on Android (and I believe in iOS aswel).

Browser

Brave

💻 Linux, Windows, Android, macOS & iOS
🕶️ Chrome Theme Store
💸 Free

So, it seems I have spent a year without changing browsers 🎉
Brave is the first app that returns to this list, the privacy-focused browser is still my main (and in most cases, only) browser.
I think it is closely tied with Edge as the fastest browser I have used on macOS, Windows and Android. The last time I checked Edge, it still did not support account Sync, so I ditched it for Brave and haven't looked back since.
Ads are blocked by default and it’s easy to make changes to the shields when they inadvertently block things that you want to see. Brave’s privacy focus is a huge selling point especially for people who follow tech and have noticed just how creepy the predictive algorithms are getting.
And the best part is that you can actually earn Brave Attention Tokens -BAT- from watching ads, which on its own has valued around 300% during the last year. We are still at the begining of what Brave promises to be a revolution in the way online advertising works, competing directly with Google and Facebook's model.

Code Editor

Our Lord and Savior

💻 Linux, Windows, macOS & Browser (preview)
🕶️ I'm using this theme
📦 Electron Based 😔
💸 Free I have been using VSCode since 2018, when I started working as a front end developer. Back then, I was using Atom and when I made the switch, the powerful extension ecosystem had me hooked to it from the start. Over the last year they've added the Settings Sync with your Github account, which makes me rely on one less extension. I've also gotten into the Github Copilot beta and I completely recommend anyone who's reading this to do so aswell as the experience at first feels like your machine is under a dark voodoo magic spell. I've written a post with my settings & best extensions a while ago, I recommend giving it a read if you're looking to customize or improve your VSCode experience

To-Do Lists

Google Keep

💻 Browser, Android & iOS
📵Offline Support
🕶️ Broken dark theme
📦 No desktop client, only mobile apps
💸 Free

In my opinion, this is one of the most neglected apps, with great potential in the Google Cloud ecosystem.
There are no desktop clients for this and the API is enterprise-only.
The dark theme looks like they just added filter: invert(-1) on the <body> of the HTML.
There aren't many reasons to check out Google Keep in 2022, however I still use it, mostly on my phone, for two reasons:

Acts as inbox for quick notes & lists or for when Obsidian isn't synced on my Android device
Google Assistant integration for my shopping list, which I share with my girlfriend's Gmail account

Microsoft ToDo

💻 Browser, macOS, Windows, Android & iOS
📵Offline Support
🕶️ Beautiful theme, except for the browser.
📦 Linux users are limited to the browser version
💸 Free

This is one beautiful application, if you run it on Windows, macOS or on your mobile. It's the result of Microsoft absorbing Wunderlist and I use it for all my non virtual ToDos. For free, you get lists, repeatable tasks and reminders. Its main feature is the 'My Day' list which suggests you task to plan your day.
The only downsides are the fact that you need a Microsoft account, the lack of integration with the Google Assistant (which would make me ditch Keep) and the fact that there's no Linux application.
There's a browser app in your outlook panel, and I could live with that, but unfortunately, there is no dark theme on the browser app.

Charts & Whiteboards

Excalidraw

💻 Browser
📵Offline Support
🕶️ Night Mode works well
📦 Browser, but I'm using the Obsidian Plugin
💸 Free + Premium

I had the need of a charts app when I was developing a small prototype for a code challenge and wanted to present a diagram of what I was going to do.
Like project management tools, diagrams apps seem to be all the rage these days, and they spawn like rabbits in the spring.
The biggest issues with most of them is that they actually charge you for having more than n boards. Which I understand, but sucks. I won't use a whiteboarding tool that often, however, I don't want to limit the boards I can have saved. Excalidraw also does this as a monetizing strategy. However, they allow you to export your charts. I can save all my diagrams in my drive and open them later.
I won't like and tell you that Excalidraw was my first choice, however, they have an Obsidian plugin which integrates seamlessly and keeps my diagrams in my Obsidian repo for later.
They also have a huge shapes library which I totally recomend digging upon.

Git GUI

Gitkraken

💻 Windows, Linux, macOS
🕶️ Beautiful theme, except for the browser.
💸 Free + Premium (4.95€/mo for private repos)

Like VSCode, Gitkraken has been with my for the best part of my career.
In my first job, I had no git knowledge besides checkout, push, pull & commit, and was working with a senior developer who insisted on using a rebase workflow. For some time, I actually became known as 'rebases' on the co-working space due to the (admittedly too many) times my senior would re-explain the rebase workflow to me. Then I found GitKraken and really got the hang of wtf was going on in a git repository. Now I can do almost anything with a git repo. I don't buy into that CLI vs GUI war. CLI is fast, and knowing the commands will save you a shit load of time and may prevent you from looking like a fool in conversations, but when you have a complicated git workflow/large teams/branch-palooza 🎉, actually looking at the branches state in a clean neat way will save you hours.
They've just launched their CLI which allows you to control Gitkraken from the comand line while watching everything happening in the branch interfance.

Bonus

Anytype.io

Anytype is built on web3 and is an open source Notion alternative. I got a chance to get in the Early Alpha, and I honestly thought it was not polished enough to replace Obsidian. However, I have high hopes for this one.
It's 100% free, works on all platforms and syncs your data across devices. Theming is not the best, but it has a dark theme.
It's like Notion but not quite, in the sense that everyone is can have a different type (not just notes/databases) and each type has different properties. Which is great for templating and whatnot.
I'm still holding for the application to be a bit more robust, but I can't say I wouldn't choose this over Obsidian if I had gotten into the Early Access earlier. So sign up for the Early Access or subscribe to their newsletter because I honestly believe this one is going places 🚀

This is it for now. Feel free to share what apps you are currently using or if you actually checked out and liked one of the apps I've suggested here 🙂

Building a Roguelike Game with TypeScript

David Morais — Sat, 25 Sep 2021 19:10:43 +0000

In this article I'm writing about the experience of building a game as someone with a front-end background.
Epoch Rift is a 2d platformer with roguelike features I'm currently building. It's unique feature is that you can play only as wizards. No swords allowed ⛔

Intro

Hey everyone 👋
It's been a while since I've posted something. This is mostly due to the fact that I'm currently building a game. Working a full time job and on side projects, I've almost no time left to write posts, which is kind of a side project itself.

I've built some small games in the 2000's with the BYOND engine. I had no real programming foundations, yet I had a basic understand what terms like mobs, procs and var were. Fast forward 15 years and I'm a senior front end developer who's built several applications using Javascript and I've been wanting to build an original game ever since I got into this career. I also know other languages like Ruby and Python, which are not really good options for developing games. But then again, Javascript also didn't seem to be a viable option for building a game.

Battle of the Engines

Having read multiple articles comparing the many different game engines, one thing was guaranteed: Creating a game with Javascript did not seem possible, at least without an huge amount of boilerplate work. I would have to settle for a typed language like C#. When looking for an engine, I have to take multiple factors in consideration, one of them is the size and activity of the community. Having no 'real' experience with game development, I better have everything I need on the first page of Google, minimum. Imagine building an application with a framework with zero StackOverflow posts. Daunting, isn't it ?

So I'm still decided to learn Unity and do a project with it. However, my C# knowledge is close to nil 😛.
I've known about Phaser for a few years now, and stayed away from it for multiple reasons, the main one being that there really isn't a big community, compared to other engines like Unity or Godot. But currently, it's almost fully compatible with Typescript, which in my head, is acting like a stepping stone to C#. So I went it it.

Phaser + Typescript

Phaser has its caveats, but it has a lot of tutorials. In fact, most stuff I've implemented, I used their tutorial examples as a template. Their API documentation is a bit fuzzy and not everything will be on the first page you hit.
After dwelling through GitHub, I forked a nice Cordova Phaser Template with Typescript which has some cool feature out of the box, mainly a BGM player (with Howler.js), Firebase integration and mobile platform support with Cordova on top of a webpack config with a dev server, and of course, Typescript support.

I still develop much faster using plain ol' JavaScript, so I took some time to figure the proper TS typings, and still have one or two any types lost in the codebase. Still, for custom logic, it makes perfect sense, at it feels very intuitive having autocomplete when updating scenes or sprites.
Eventually, I moved all my "template" classes into a Base class which would be extended to the different sub types. For example, instead of duplicating most of the code to create two different enemies, I've merged the common parts into a BaseEnemy which I then extend enemies with different behaviors.

Here you can see the progress I've been making ever since I've successfully added a map and a moving sprite. As someone who's been mainly developing apps with React, I had immutability in mind, so developing with mutable objects and updatable classes, it's been complete paradigm shift.

Tools

As I said in the beginning, I work a full time job and am currently helping my girlfriend start her own project, so I don't have tons of spare time to build games. I have to say that the fact that I've made this progress in these 3 months, is because I've been using some of these tools which help me in someway or another to stay organized and be more productive.

Project Management

I've always used project management tools for my solo projects. For this project I changed over from Ora to ClickUp last month. For managing what needs to be done, defining a roadmap and managing my progress, ClickUp's free tier does the trick. I've cooperated with two social media managers so far and a project management tool to centralize your game documents is essential.
So far I've only contracted the services of two social media managers, but I will eventually need to at least 1 graphic designer. I've been using Obsidian to store Game Design Documents, spreadsheets and diagrams, but I will eventually move some of this to ClickUp in order to make task creation and onboarding more efficient.

Code & Source Control

Despite the fact that I'm going solo on this one, I've also been using Gitkraken with WSLg as a Git GUI to help me visualize what changes I did in the codebase. For example, I can easily find a specific commit which introduced a bug in the codebase and can easily revert it with the built-in code editor. It's one of the products I definitely recommend you get for everything you do that involves a git repository.
As per usual, I'm using Visual Studio Code which goes on steroids when using Typescript. It's been a really smooth experience. I've installed some TS extensions, and I was ready to go. You can check my last post to find which extensions I'm currently using.

Pixel Art

I bought and have been using Aseprite to draw almost all of my pixel art. I'm not the best sketch artist out there, by any means, but Aseprite has plenty of tools you don't find in software like Photoshop or Affinity Photo.
The best thing, is that you can generate spritesheets and tag your animations in Aseprite and Phaser already has a createFromAseprite function which automatically maps the animations in your spritesheet.
One thing I've learned the hard way is that if you have two animations with the same name from different sprites, you will have conflicts.
You have multiple examples on Phaser's website on how to export and load a spritesheet from Aseprite.

Mapping

This one is free and open source. Tiled alows you to create your level maps with a graphical interface. One of my inspirations was built with Tiled and I had already heard about it. You can import your tilesets (created in Aseprite), have multiple tile layers and object layers, which are used to pin enemy spawns or chests.
Again, the most defining feature that made me use this was Phaser's out of the box support for Tiled maps. You need to embed your tileset in your tiled export, and then simply preload the json file, and you can load it in Phaser by doing this.make.tilemap({ key: <map_key> }); on your scene.
Also, like with Aseprite, there's tons of examples for loading a Tiled map and its layers onto your Phaser game.

Roadmap

So I've been at it for the last months, what have I got to show ?

The main hub which you will pass through when starting a run.
The first level which you can clear by collecting 10 spheres spread around the map.
Three spells with slightly different effects.
Gated areas,
A lighting and particles system which renders certain effects based on Tiled's object layers (for example, fire braziers).
A very rudimentar HUD which displays your heatlh, your collectibles and the cooldown of your spells.
Essential physics mechanics (dash, jump, collisions, enemy flight...)

For the next few months, I want to have the following done:

A new level with a new set of enemies.
Another playable character with different stats.
More spells that the player can use.
A boss fight.
New physics mechanics like elevator turfs and level portals.

I feel like require a lot of pixel art work as most of the groundwork for the game is built. There are alot of challenges I see ahead, and plenty more I can't even fathom. So stay tuned for when I post the next devlog in three to six months 😛

If you liked this project, follow Epoch Rift on Twitter as I'm posting screenshots and sharing development updates much more often there.

My VS Code Setup (and less known extensions)

David Morais — Fri, 30 Apr 2021 17:06:26 +0000

Hey hey 👋

You may look at the title and sarcastically say "Yay, another VS Code extensions list", at least I would. The fact is that I end up opening said articles and realize that most times they share 8 out of 10 extensions between them all. I use most of them, so I'm not going to go into detail about those that are most featured in articles, instead I'll try to analyze the lesser known and most useful extensions I'm using. I've split the extension list into categories so you can easily find whatever you're looking for here, and at the end of the article you can find the full list of extensions I'm using.

Our Lord and Savior

Let's start with the editor itself. VS Code is a code editor made by Microsoft. It's mainly powered by the open source Monaco Editor, extensions and the extensive settings API. It's also pretty lightweight for all that it offers which is why I changed from Atom and have never stopped preaching about our lord and savior VS Code.

By using an extension called Settings Sync, I've kept about the same configuration throughout the years. Recently Microsoft added a built-in Sync feature which seems to work even better. Sometimes I clean up my extensions, change the color and icon theme and install a few new jewels, hence why I'm currently rocking 59 extensions.

This is my VS Code setup at the moment 👇

Some main changes from the initial layout include the sidebar on the right side, the activity bar, theme and sidebar items.

Starting with the theme, I'm currently using these extensions to achieve this look:

Theming & Layout

Theme: Electron vue

Sidebar Icons: Carbon Product Icons

Opacity (Linux & Windows only): GlassIt-VSC

Folder and File Icons: Moxer Icons

Font: FiraCode (w/ ligatures)

For the sidebar on the right side and other customizations that are available out of the box, you can add this to your settings.json (You can open your settings by pressing Ctrl + P and selecting 'Open Settings (JSON)'.

{
    **"workbench.editor.tabCloseButton": "off", // I was accidentally closing tabs too often, so I removed the close button
  "workbench.sideBar.location": "right", // Pretty straightfoward**
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'", // Fira Code is an open source ligature font that I strongly recommend you install
  "editor.fontLigatures": true, // Enable font ligatures for Fira Code
  "editor.formatOnPaste": true, // Formats your pasted content
  "editor.minimap.enabled": true, // Enables the file minimap
  "editor.minimap.maxColumn": 200,  // Minimap char count
  "editor.minimap.renderCharacters": false, // You can render actual characters instead of the color blocks
  "editor.minimap.showSlider": "always", // Adds a scrollbar to the minimap
    "terminal.integrated.fontFamily": "'MesloLGS NF', 'MesloLGL Nerd Font', monospace", // Change to your terminal font
  "terminal.integrated.shell.linux": "/usr/bin/zsh",  // Change to your default shell and check your OS key (ex: for mac use "shell.mac"),
    "files.eol": "\n",  // Force LF  line endings, useful if you use Windows and Linux/Mac
  "files.watcherExclude": {  // Boosts performance by not watching for changes in these directories
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true
      },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false // Set to true if you're enforcing ESLint. Disable if you're working on old projects that changed their linting config over time.
      },
  "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ], // use ESLint on these files
  "eslint.workingDirectories": [
    "./node_modules/eslint"
  ],
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // use the Prettier extension to format javascript code
  },
}

Linting & Code Formatting

I've included there two settings which are for two extensions, ESLint and Prettier - Code formatter.

The first is, in my opinion, the best linter for Javascript around. Basically it will warn or throw errors if your code breaks common best practices rules. If you have never used it I strongly suggest you start doing so, and every time ESLint complains about something you think it's stupid, go read about it instead of disabling the linter for that line. ESLint has seriously helped me grow as a developer and while it's a well known extension, it's one I can't help mentioning here.

Prettier on the other hand is a code formatter, it 'prettifies' your code. So when pasting something my editor, the code gets instantly formatted by Prettier.

Something that I've seen in some projects is combining both ESLint and Prettier, meaning that if code style is off the linter will warn you and Prettier will also format your code according to the ESLint rules you have in place.

Snippets

I honestly think I'm using far too many snippets extensions, despite the fact that I may or may not be using some on these list, who knows. I'm not a 'snippets' person. But from my extensions list, the ones that I use on a daily basis and actually know that they exist are, ES7 React/Redux/GraphQL/React-Native snippets, Path Intellisense & JavaScript (ES6) code snippets. Path Intellisense is great at auto completing your relative path imports, the other two I use mostly for JavaScript/React shortcuts. The big boss of auto complete and intellisense is Visual Studio IntelliCode, developed by Microsoft itself, it provides an AI-based relevant code completion to your code editor and is a must have for all VSCode users.

Other cool 'auto complete' extensions I have include Turbo Console Log which I use with the keyboard shortcut to log my highlighted variables, Auto Close Tag, a well known extension that works flawlessly even with self closing elements and my personal favorite Auto Import, which automatically finds and parses code actions for imports.

Productivity & Git

On the bottom bar there you can see how much I've coded for the day, I'm using two extensions for time tracking and I'm going to recommend the one I've been using for the longest time which is Waka Time. On the sidebar you can also see Project Manager's logo which is an extension for quickly switching between projects from your sidebar.

Also on the sidebar, we have two git extensions, Git Lens is the first and allows you to fully integrate git into your code editor by adding code blame, revision navigation and file,line and branch history all from your sidebar. The other one is Git Graph which adds a neat graphical interface to your Source Control tab and allows you to quickly check your repository status.

The last two items on the sidebar are Todo Tree, which shows all // TODO comments on the current repository and the bane of our existence, Jira also has a VSCode extension, which I only recently discovered, and offers a quick glimpse of your assigned tasks out of the box.

Honorable Mentions

Hermes Comments has about 1k installs and is a simple extension that adds comment commands to your VSCode Command Palette (Ctrl + Shift + P). Simply highlight text, hit the command palette and create framed or sub section comment out of the highlighted text.

Emoji Log is one of the many surfacing extensions that prefix your commits with Emoji. I prefer this one because it actually adds a button to the Source Control tab.

Power Mode is another extension I didn't know I needed until I had it. This baby adds up your keystrokes into combos and even has the option to add sparks and custom GIFs to your code editor.

People, I was blind before I started using ident-rainbow, Guides and Bracket Pair Colorizer. These are one of the most known and oldest extensions out there, and they're always present when I'm using VSCode, check them out if you haven't.

Full List

Follow Me

Thanks if you ended up reading through the whole list 💪 For more JS/React content you can check out my website and follow me on Twitter.

Let me know what extensions you're using that I did not mention in here so I can check them out 👀

You (may not) Know JS

David Morais — Wed, 14 Apr 2021 09:05:04 +0000

Hello my fellow JavaScript developers 👋

Back in my first job I quickly realized that the FreeCodeCamp front end course I had finished wasn't nearly enough to deal with the hardships of creating scalable and maintainable D3 chart templates. A fact that was confirmed when my boss suggested I read more about the insides of the language, heavily implying that I'd be fired if I didn't 🚀

My senior developer at the time suggested the well known You Don't Know JS books, a well written series of books about the intricacies of the language. And by the end of the first book I had realized that I did not have the foundations of the language, and acquiring them made me more productive by cutting down on the time spent googling around how stuff was supposed to work.

So the goal of this post is not so much to imply that you don't know how to declare variables as to declare that you, my friend, may not always be aware of what's going on under the hood and teach you some use cases for those mechanisms.

And without further delay, let's list some quick facts and concepts you probably did not know about JS

Type coercion

Type coercion is the process of converting value from one type to another. Since JavaScript is a weakly-typed language, it converts two different typed variables when you use its operators.

A great cheat sheet for the type coercion principles can be found here 👈 If you're still wondering, the best practice is to not learn that whole table and stick with using strict comparison. REALLY.

Let's get to some quick facts straight about operations.

Difference between `==` and `===`

There a difference between using == and === when comparing two variables. The first only compares value, it's called abstract equality, while the latter compares type and value and is called strict comparison. This is why 1 == "1" //true and 1 === "1" //false . In the first comparison we have implicit coercion

Difference between `null` and `undefined`

When strictly comparing null and undefined, JavaScript returns false , this is because undefined is the default value for undeclared values, function that doesn't return anything or an object property which doesn't exist. While null is a value that has to be explicitly given to a variable or returned by a function.

In the end if you also check, the type of both variables is different. typeof null //"object" and typeof undefined //"undefined".

Short Circuiting Logical Operators

Because who needs ternaries

Now here's another example of where JavaScript's type coercion comes into play. For rendering React components, you come across the following patter quite often: const render = () => loading && <Component/> . Usually loading is already a Boolean type variable, but sometimes we can find something like const render = () => data.length && <Component data={data}/> and in this case data.length can is truthy when its value is not 0.

Combining && and || operators is also a great way to add logic to arrow functions without requiring you to create a block: const render = () => data.length && loading && <Component/> || 'Loading'. In this example, you basically create a ternary condition in which you evaluate the first conditions of the && half and return the last condition if the others evaluate to true, in this case our component, OR we return a loading String or in case we don't want to show anything, null or an empty string.

Nullish Operators

Recently JavaScript got a couple of new features that tap into its weakly-typed nature and make use of under the hood type coercion to work.

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

This means that we can also use it to add logic to our variable declarations, but works differently than the AND & OR operators. Here's an example:

Using the nullish coalescing operator to declare obj's properties, will result in the following object

While we're here, we could've also used the optional chaining operator (?.) to access obj.woo.length. You may very well be familiar with the "Cannot read 'length' of undefined" error, and if you remember to use this, those days are gone. What is it and how do you use it ? Just add a ? when accessing object properties that may be null or undefined. In the above example, we would've written something like obj.tar = obj?.woo?.length ?? ["WOOTAR"] . If obj.woo was nullish the output would also be different, as the condition would evaluate to null and obj.tar=["WOOTAR"].

At last, there's the logical nullish assignment (??=) which only assigns a value if the lefy-hand operator is nullish. As an example, let's add more properties to our obj using the logical nullish assignment:

Using the logical nullish assignment to assign the [obj.bar](http://obj.bar) property results in the following output

These are all JavaScript features which use the underlying type coercion mechanism. And while Logical Operators may be something you use on a daily basis, understanding how the language treats different type operations can really help developers do their jobs.

Hoisting

Hoisting is another one of JS's under the hood mechanics which affects your daily work. If you use ES Lint, and as a junior you seriously should consider using it, you've probably come across the no-use-before-define rule. This discourages you from using variables before declaring them, and before ES6 introduced let and const, this rule was in place for readability purposes. This is because you can, in fact, use variables before declaring them, as long as they're declared within scope. I'll explain.

In most languages we have two contexts in which the code is read, in JS we have what's usually called Compile Time and Execution Time. Code is compiled before it is executed, and during JavaScript's compile time, it hoists all functions and variables and while functions retain their declaration value, for variables the hoisting process gives them a value of undefined.

Example:

Here's what our code looks like on Compile vs Execution Time

This code will log undefined, David and "Hello Mark!" . This is because when hoisted to the top of the scope, our variable will get the value of undefined until it's explicitly set.

With ES6' introduction of the let and const keywords, hoisting is becoming obsolete, in the sense of its use cases disappearing, because only the var and function keywords are hoisted. The same applies to arrow functions.

Notice how I intentionally used the same name for both our global variable and the sayHello function parameter ? Yes, we'll be talking about...

Scopes

Scope is simply the 'biome' in which our declared variables live in. In JavaScript we have the global scope and function scope. In the above example, name lives in the global scope, but when a function has a parameter with the same name, it takes precedence. This is because JavaScript will look for a variable declaration in the current scope and if it doesn't find it, it will move up to the next scope, in our case, the global scope. ES6 also introduced the block scope, by using let and const keywords, you are declaring variables that are only available within a block ({}) . Let's see an example 👇

If we use let to declare our variable, it will be only accessible within its block scope, in this case, within the if condition, and will receive an error if we try to use it.

Closures

Here's something that usually comes up in interviews. What are closures ?

In my opinion, this is a rather stupid question to ask, as it's one of those JS under the hood mechanisms that developers make use of all the time, but don't even realize it exists, much less its name. I'll quote MDN here: "a closure gives you access to an outer function’s scope from an inner function.".

Let's go back to our poorly worded sayHello example, let's strip it of the console.logs, the hoisting logic, and remove the function parameter.

A wild closure appears

BAM, lo and behold, a closure. Not that complicated, and something we use on a ~~daily~~ hourly basis, but admittedly one of the worst concepts to try and describe in words.

Now, one important aspect of closures is that the variables used within them are not copies, this means that if you change a variable within a function, its value is changed for all the scope its being used on. So if within sayHello I were to set name = 'Matt' , the variable would change for the rest of the execution, depending on where I'd call sayHello .

Conclusion

There are many more 'hidden' aspects of JavaScript which I'd like to discuss, and probably will in the future, like the Protype, Inheritance and (IIFE)(). What are your tricks and how do you use these JS's hidden gems ? Let me know in the comments.

If you liked this post, follow me on Twitter, mostly for stupid and pointless stuff, and be sure to checkout my website as I'll try to create new content at least twice per month.

DEV Community: David Morais

How Vibe Coding Changed my Development Workflow

Intro

Why build Phantom Pulse (with AI?)

When hallucinations meet constraints

Implementation: Tools that powered the process.

The Power of Copilot Agents

The new workflow - #copilot🤖

Tools Used

Perplexity - 3/5

Linear MCP - 1/5

Stitch - 3/5

Warp Terminal - 4/5

Gemini CLI - 3/5

Cursor - 3/5

GitHub Copilot - 5/5

Kiro - 4/5

Conclusions

I got a new job - and I was fired after 45 days

Intro

The (New) Beginning 🌱

Onboarding ✈️

My Tenure In A Nutshell 🚀

My First Big Issue 🐞

The Next Morning 🌄

What I Learned From All Of This ? 🤓

Conclusions

My top (lesser known) VS Code extensions

Intro

Line Surfer 🔗

Squarl Bookmarks 🔗

HSL Color Preview 🔗

VSCode Git Commit Message 🔗

Theming 🎨

Carbon Product Icons 🔗

Vira Theme🔗

Dark Magic Themes 🔗

Million Lint🔗

Vitest Runner🔗

Total Typescript🔗

FrontMatter CMS 🔗

Gistpad 🔗

Summary

Updating my website's tech stack in 2025

Intro 🤓

How it was 🦕

Javascript to Typescript ✨️

Styled Components to TailwindCSS 🌬️

shadcn/ui 🧩

Goodbye styled-components 👋

Ditching API based articles 🖊️

Next.js' App Router 🛣️

Conclusion 🚀

Testing Phaser Games with Vitest

Introduction

Game Logic

Test Driven Development (TDD)

Vitest

Vitest vs Jest

Setting Up

Testing Game Logic

Example

Vitest UI

Other Use Cases

Conclusion

My Path to Front End Development - 5 Years Later

Intro

In a past life

Jack of All Trades, Master of None

Becoming a Developer

Job Hunting

I AM DEVELOPER ! (sort of)

Milestones & Timeline

Git Worktrees - git's old hidden feature you never knew

What are Git Worktrees ?

Behind the Scenes

Pros & Cons

Cons 👎

Pros 👍

Tools & Suggested Workflow

Goodbye `styled-components` 👋

Difference between `==` and `===`

Difference between `null` and `undefined`