Hands cross
Hands cross
Photo by krakenimages on Unsplash

I expect my manager to be…

Clear, respectful, and supportive

  • I expect to be treated like an adult and not a child

“Kind” rather than “nice”

  • I don’t want my manager to be a “people-pleaser”

GitHub Actions and Ruby
GitHub Actions and Ruby
GitHub Actions + Ruby

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…


commitlint logo
commitlint logo
commitlint

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

Prerequisites

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…


Asteroids game
Asteroids game

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…


cypress.io
cypress.io
cypress.io

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

Prerequisites

Install

Install cypress with npm or yarn:

$ npm install cypress

Open

Open Cypress:

$ npx cypress open


TypeScript and Flow logos
TypeScript and Flow logos
TypeScript vs Flow

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

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…


Node.js
Node.js
Node.js

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):


I learned about drag-and-drop using the HTML5 draggable attribute in my 2021–01–18 livestream:

What I Learned

draggable

Set draggable to true to make an element draggable:

dragstart

Use the dragstart event attribute to set the drag data:

Or add the event listener using JavaScript:

dragover

Use the dragover event attribute to prevent the default action:

Or add the event listener using JavaScript:

remarkablemark

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store