This article goes over how to migrate from Travis CI to GitHub Actions for a Ruby project on GitHub.

Watch the YouTube video:

Travis CI

Given the .travis.yml:

GitHub Actions

First make the directory .github/workflows/:

mkdir -p .github/workflows/

Create .github/workflows/build.yml:

touch .github/workflows/build.yml

Add the workflow that runs a single job:

To test multiple versions of Ruby, update the workflow:

The Ruby workflow is inspired by the template.

Workflow

Here’s a breakdown of what each YAML field does.

name

name is the workflow name. It’s optional and you can name it whatever you like:

on

on is the event that triggers the workflow…

This post goes over how to lint Git commit messages with commitlint and husky (see demo repository).

Prerequisites

• Node.js

Husky 5

Watch YouTube video:

Install commitlint with a config:

npm install @commitlint/{cli,config-conventional}

This command installs both @commitlint/cli and @commitlint/config-conventional.

config-conventional is a standard based on the Angular convention.

Create .commitlintrc.json, which extends the rules from config-conventional:

Or export the rules in commitlint.config.js:

Install husky:

npm install husky

Enable Git hooks:

npx husky install

Or add postinstall script to package.json to enable Git hooks after npm install:

It’s assumed that the package is private. If the package is public, then…

This article goes over how to create an asteroids clone from p5.play examples. Play the game or watch the YouTube video:

Code

Load the images with loadImage() in preload():

Use createCanvas() to create a canvas of 800px width by 600px height in setup():

Create a ship sprite using createSprite():

Replace the label identifiers for addImage() and addAnimation() with constants:

In draw(), set the background() to black and draw the ship with drawSprites():

Rotate the ship on keyDown() for the LEFT_ARROW and RIGHT_ARROW keys:

Move the ship forward and change the animation on keyDown() for…

This article goes over how to perform a Google search using the Cypress end-to-end (E2E) test runner. See the YouTube video:

Prerequisites

• Node.js

Install

Install cypress with npm or yarn:

$ npm install cypress

Open

Open Cypress:

$ npx cypress open

TL;DR: choose TypeScript.

When evaluating a type checker for your JavaScript project, should you choose TypeScript or Flow?

On a high level, you should consider:

• use
• community
• trend

Use

Is the type checker easy to install and use? Is it well documented? Is it performant and fast? Ease of use has a direct correlation with adoption rate and productivity.

Community

Is the type checker well supported by the community? Do other developers like using it? Can you easily find answers on Google or Stackoverflow? Is the project alive and actively maintained? Are issues and pull requests adequately addressed? Do other developers build…

I wrote a unit test for an ES module in html-react-parser in my 2021–02–06 livestream:

Links:

• GitHub pull request (PR)
• How to run ES Modules with Node.js

This article was originally published on remarkablemark.org on February 6, 2021.

Did you know you can free disk space by deleting node_modules?

To check the disk usage of your current working directory:

$ du -sh .

To find all directories (in your working directory) that matches the name node_modules:

$ find . -type d -name 'node_modules'

Execute recursive remove on all matches:

$ find . -type d -name 'node_modules' -exec rm -rf {} \;

Display the disk usage of your current working directory:

$ du -sh .

Example

Here’s an example of how to delete node_modules of a project bootstrapped by Create React App.

Create app:

$ npx create-react-app my-react-app

Check disk usage:

$ du -sh
248M  .

Delete node_modules:

$ find . -type d -name node_modules -exec rm -rf {} \;

Check disk usage:

$ du -sh
924K  .

This article was originally published on remarkablemark.org on July 23, 2020.

Overview

Create a dropzone element (I used a <main> element but you can create a different element):

Give the dropzone a dashed border style:

Highlight the dropzone when the dragenter event is fired (image is dragged over the dropzone):

event.preventDefault() is necessary or else the image will be opened from your local file explorer.

Remove the dropzone highlight when the dragleave event is fired (image is no longer dragged over the dropzone):

It’s necessary to handle the dragover event before drop happens:

Now handle the drop event (when the image is released inside the dropzone):

…