React is a JavaScript library for building user interfaces, specifically, single page applications (SPAs). It is more of a library than a framework. In the MVC (Model View Controller) paradigm, React takes care of the View. It is in charge of rendering a new view (either by rendering new HTML or changing CSS) in response … Continue reading React: Introduction to the main concepts
JavaScript
JavaScript: How to generate an array of random numbers
Let’s say I want to create a list of 10 numbers that are between the values of 0 and 1. This can be done with a simple for loop. For example: let length = 10; let max = 1; let randArray = []; for (i=0; i < length; i++) { randArray.push(Math.random(max)); } console.log(randArray); Setting the … Continue reading JavaScript: How to generate an array of random numbers
JavaScript: How to use the conditional ternary operator
In addition to “normal” comparison operators (see the links below), JavaScript has a unique comparison operator that can assign values rather than just return a boolean true or false. This is called the “Conditional (Ternary) Operator”. It follows this syntactical construction: variablename = (condition) ? value1 : value2 The question mark means: If the condition … Continue reading JavaScript: How to use the conditional ternary operator
JavaScript: How to use gulp-watch
Assuming Gulp is already installed for your project, and your gulpfile.js file is already created, this article describes how to use the gulp-watch plugin. Here is what tutorialspoint.com says about gulp-watch: The Watch method is used to monitor your source files. When any changes to the source file is made, the watch will run an … Continue reading JavaScript: How to use gulp-watch
JavaScript: How to create Gulp tasks
Once we’ve confirmed that Gulp is installed in our project: JavaScript: How to install Gulp via NPM we are ready to start using Gulp to see what it can do. Step 1: Create a gulpfile.js file In the root directory of our project, we need to create a file called “gulpfile.js”. This file will contain … Continue reading JavaScript: How to create Gulp tasks
JavaScript: How to install Gulp via NPM
Gulp is a Node.js package that acts as a plugin to automate all kinds of web development workflow tasks. According to the official gulp website: gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. To install Gulp, we need to install … Continue reading JavaScript: How to install Gulp via NPM
JavaScript: How to use NPM to install packages
NPM or “npm” stands for Node Package Manager. It is the default package manager for the JavaScript runtime environment Node.js. The NPM program is installed on your computer when you install Node.js. The website npmjs.com contains hundreds of thousands of free open source code packages that can be downloaded and used via npm. Downloading Individual … Continue reading JavaScript: How to use NPM to install packages
JavaScript: Intro to Web Game Development – Part 7: add title screen and settings
As of the previous article, the game can be considered to be in a “complete” state, but I want to add a few features, such as a title screen, some options such as score to win, ball speed, and game colors. I also want to add a link back to the title screen from the … Continue reading JavaScript: Intro to Web Game Development – Part 7: add title screen and settings
JavaScript: Intro to Web Game Development – Part 6: add win screen and replay
In the previous article, scoring was introduced, but there was no win detection that would end the game. The previous article in the series can be read here: JavaScript: Intro to Web Game Development – Part 5: ball handling, scoring, and A.I. In this article, I will show how to detect when a game ends … Continue reading JavaScript: Intro to Web Game Development – Part 6: add win screen and replay
p5.js: How to build a Menger sponge
According to Wikipedia, a Menger sponge is: In mathematics, the Menger sponge (also known as the Menger universal curve) is a fractal curve. It is a three-dimensional generalization of the Cantor set and Sierpinski carpet, though it is slightly different from a Sierpinski sponge. It was first described by Karl Menger in 1926, in his … Continue reading p5.js: How to build a Menger sponge