JavaScript

Johnny Five is a fantastic library that allows developers to communicate with electronic devices using JavaScript. While devices like Arduino are typically programmed in the Arduino Language, Johnny Five enables us to interface with Arduino using JavaScript, particularly in Node.js. Setting up your Arduino to work with Johnny Five To get started, follow these steps: Download the Arduino IDE from http://arduino.cc/en/main/software. Connect your Arduino board to a USB port on your computer....

Learn the basics of ESLint, the most popular JavaScript linter that can help you adhere to syntax conventions, identify potential problems in your code, and enforce a set of standards defined by you or your team. What is a Linter? A linter is a tool that identifies issues in your code. When you run a linter against your code, it can tell you if your code follows specific syntax conventions, contains potential sources of problems, and matches a set of defined standards....

Redux is a popular state management library that is commonly used with React applications, although it can be used with other technologies as well. This guide will provide a simple and easy-to-follow overview of Redux and how to use it effectively. Why you need Redux Redux provides a way to manage the state of your application by moving it to an external global store. While React has its own method for managing state, Redux becomes necessary for complex applications where you find yourself moving state up and down the component tree using props....

When it comes to declaring variables in JavaScript, we often have two options: let and const. But which one should you choose? In this article, we’ll explore the differences between let and const and discuss when to use each. By default, I always prefer using const for my variable declarations. Why? Because const ensures that the value of the variable cannot be reassigned. As a developer, I always strive to use the approach that poses the least risk....

The differences between using a loosely typed language and a strongly typed language in programming are significant. In a loosely typed language, there is no requirement to explicitly specify the types of variables and objects, allowing for greater flexibility. On the other hand, a strongly typed language insists on types being specified. Both approaches have their merits and drawbacks, depending on the intended context and usage. JavaScript, for instance, is known for being loosely typed....

Axios is a highly popular JavaScript library that allows you to perform HTTP requests in both browser and Node.js platforms. It supports all modern browsers, including IE8 and higher. The library is promise-based, which means you can use async/await syntax to make XHR requests effortlessly. In this blog post, we will cover the basics of Axios and how to use it effectively. Installation To use Axios in a Node.js environment, you can simply install it via npm:...

In Svelte, handling state updates within a component is straightforward and doesn’t require any special configuration. You can simply use reactive assignments to update the component’s state. For instance, let’s consider a count variable that needs to be incremented. This can be done using the assignment count = count + 1 or count++: <script> let count = 0; const incrementCount = () => { count++; }; </script> {count} <button on:click={incrementCount}>+1</button> If you’re familiar with modern web frameworks like React or Vue, this approach may seem familiar....

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....

Phaser games utilize the HTML <canvas> element for rendering. If you’re unfamiliar with the Canvas API, I discuss it in detail in my Canvas API tutorial. When working with Phaser, we create a canvas with a specific width and height, and then draw on it. While CSS cannot be used to style elements within the canvas, Phaser (along with other canvas-based libraries) abstracts away many of the low-level details, allowing us to focus on the application code....

What is the difference between state and props in React? In a React component, props are variables passed to it by its parent component. State, on the other hand, consists of variables that are directly initialized and managed by the component itself. The state can be initialized using props. For example, a parent component can include a child component by calling: <ChildComponent /> The parent can then pass a prop to the child component using the following syntax:...