Posts

The Browser DevTools are an essential tool for every frontend developer. Accessible in all modern browsers, these development tools provide a wealth of features that can greatly enhance your productivity. In this article, we will explore the basics of the Browser DevTools and discover what they can do for you. The Browser DevTools: A Developer’s Best Friend In the early days of web development, building websites and web applications was relatively straightforward....

Parcel is a web application bundler that falls into the same category as webpack, but with a different approach. Its main selling point is that it can do many things without any configuration and is also fast. Key Features Parcel offers a range of features, including: Bundling of assets such as JavaScript, CSS, HTML, and images Zero configuration code splitting Automatic transforms using Babel, PostCSS, and PostHTML Hot module replacement Caching and parallel processing for faster builds All of these features can be used without the need for any manual configuration and are designed to ensure speedy development....

In older code, you may come across a situation where undefined is intentionally passed to a function. Why was this done? I stumbled upon this interesting technique while watching the well-known Paul Irish video about the jQuery source code. This video is from a different era, being 9 years old at the time of writing, and the jQuery source code has since changed, so you won’t find this trick in there anymore....

Axios is a convenient JavaScript library that allows you to perform HTTP requests in Node.js. In this blog, we will explore how to use Axios to make HTTP requests in your Node.js applications. Installation To start using Axios, you need to install it using npm or yarn. Open your terminal and run the following command: npm install axios If you prefer using yarn, run this command instead: yarn add axios Alternatively, you can include Axios directly in your HTML page by adding this script tag:...

One often overlooked aspect of configuring the Fish Shell is the persistence of aliases and other settings. While it might be convenient to define these configurations on the fly within the terminal, it’s important to know that they will be lost after a system reboot. To avoid this, it’s recommended to add these configurations to the ~/.config/fish/config.fish file. For instance, let’s say we want to set the ls command as an alias for exa, a modern replacement for the conventional ls command....

As a freelancer or a solopreneur, you may find yourself faced with the decision of whether to create a personal blog or a company/product blog. While both options have their merits, there are some key considerations to keep in mind. In my view, a personal blog holds significant advantages over a company blog. Unlike companies and projects that may come and go, your personal brand remains with you throughout your career....

This blog post is part of a series on Phaser. Click here to read the first post. To create and play an animation on a sprite in Phaser, you need to follow a few steps. Firstly, you have to load a sprite sheet. A sprite sheet is an image that contains multiple sprites. Specify the width and height of each sprite in the sheet. For example: this.load.spritesheet('dog', 'dog.png', { frameWidth: 20, frameHeight: 20 }); Once the sprite sheet is loaded, you can generate an animation using this....

This post is part of a Phaser series. Click here to see the first post of the series. In the create function of Phaser, we have the ability to add GameObjects to the game. These GameObjects can include shapes like circles or text. For example, to add a circle to the game, we can use the this.add.circle method: function create() { const circle = this.add.circle(100, 100, 90, 0xffffff); } This code will add a white circle at position (100, 100) with a diameter of 90 pixels....

In this post, we will explore how to handle collisions between objects and set screen boundaries in Phaser. Introduction Phaser provides two methods that are useful for detecting collisions between physics-enabled items: collider and overlap. Both methods allow us to detect when objects come into proximity with each other, but with a slight difference in their behavior. The collider method automatically makes objects bounce when they collide, while the overlap method allows objects to overlap....

In this post, we will discuss how to add images as GameObjects in Phaser. It is important to note that in order to display images when the game starts, they need to be preloaded in the preload() function and assigned an identifier. Then, they can be added as an image asset in the create() function. Here’s an example of how to preload and add an image in Phaser: function preload() { this....