npm logo
npm logo
npm

Get package.json fields using:

  • package.json vars
  • jq
  • node
  • awk

package.json vars

package.json vars are the npm package environment variables.

To print out all the package.json vars:

$ npm run env | grep npm_package_

To get the “version” using a run-script:

To access an npm environment variable outside the scope of a run-script, parse the variable with bash:

$ npm run env | grep npm_package_version | cut -d '=' -f 2

jq

jq is a tool for filtering JSON.

To print the package.json version:

$ jq -r .version package.json

The -r option outputs the raw string (so it’s 1.2.3 instead of "1.2.3").

To get the “version” using a…


Image for post
Image for post

How to build a bouncing DVD logo website using:

Code

Explanation

Initialize the variables:

During preload(), load the DVD images:

dvd1.svg to dvd8.svg are found in the assets/ directory.

During setup(), create a canvas with the same width and height as the window:

During draw(), move the DVD towards its path and check for boundary collision:

Here’s how the boundary collision is checked:

This article was originally published on remarkablemark.org on January 12, 2021.


Dependabot logo
Dependabot logo
Dependabot

Dependabot automates dependency updates for projects on GitHub. We’ll go over how to automate dependency updates for bundler or Ruby projects.

Configuration

Create .github/dependabot.yml:

$ mkdir -p .github/
$ touch .github/dependabot.yml

Add the minimum (required) configuration:

Given the configuration, Dependabot will check on a daily interval for bundler updates using the package manifest (Gemfile) located at the repository root (/).

For more options, check out “Configuration options for dependency updates”.

Example

Let’s say rubyzip recently published version 2.0.0 and you’re on 1.2.3.

At 5am UTC, Dependabot will scan your Gemfile and open a pull request (PR) to merge branch dependabot/bundler/rubyzip-2.0.0 to master.

The commit message will look like:

build(deps): bump rubyzip from 1.2.3 to 2.0.0

The PR description will contain rubyzip’s release notes and commits.

See example PR.

This article was originally published on remarkablemark.org on January 10, 2021.


Dependabot logo
Dependabot logo
Dependabot

Dependabot automates dependency updates for projects on GitHub. We’ll go over how to automate dependency updates for npm or Node.js projects.

Configuration

Create .github/dependabot.yml:

$ mkdir -p .github/
$ touch .github/dependabot.yml

Add the minimum (required) configuration:

Given the configuration, Dependabot will check on a daily interval for npm updates using the package manifest (package.json) located at the repository root (/).

For more options, check out “Configuration options for dependency updates”.

Example

Let’s say webpack recently published version 5.0.0 and you’re on 4.0.0.

At 5am UTC, Dependabot will scan your package.json and open a pull request (PR) to merge branch dependabot/npm_and_yarn/webpack-5.0.0 to master.

The commit message will look like:

build(deps-dev): bump webpack from 4.0.0 to 5.0.0

The PR description will contain webpack’s release notes, changelog, and/or commits.

This article was originally published on remarkablemark.org on January 10, 2021.


“Documentation” on monitor screen
“Documentation” on monitor screen
Photo by Sigmund on Unsplash

Introduction

The introduction should explain in 1–2 sentences what your project does and why the user should care.

Provide a quickstart example since there’s a direct correlation between how easy it is to use the project and how many people using it. Demos can be created using:

Badges

Badges provide metadata (and signals) that can help the user decide whether to use your project or not. Include information like:

For more examples, see Shields.io and Naereen/badges.

Prerequisites

Bring up any prerequisites before the user installs the project. You don’t necessary how to detail the steps to install a common binary, but you can provide a link to the binary’s download page. …


Person writing
Person writing
Photo by Green Chameleon on Unsplash
  1. Create opportunities to write
  2. Place yourself in the right environment
  3. Quantity over quality
  4. Work in sprints
  5. Find your workflow style
  6. Gamify the act
  7. Enjoy the process

1. Create opportunities to write

You shouldn’t make excuses for not writing because you have more free time than you realize:

  • When you wake up
  • During your commute
  • During a break
  • When you’re in the bathroom
  • When you’re waiting for something
  • When you feel inspired
  • When you feel bored
  • Before you go to bed
  • During the weekends

Examine your daily schedule because you can find many moments to write.

2. Place yourself in the right environment

You can accomplish a lot of writing when you’re in the right…


Image for post
Image for post
Photo by Laura Chouette on Unsplash

Motivation

Why choose routines over goals? Because routines are about the journey, whereas goals are about the destination.

For each item below, select which one you think is easier:

  • Workout 3 times a week, or lose 30 pounds.
  • Read for 30 minutes a day, or read 30 books.

As you can tell, the one on the left is a routine, and the one on the right is a goal. The problem with goals is that sometimes the bar is set too high, which leads to dread, guilt, and/or pushback.

Routines, on the other hand, won’t penalize you for failing to meet expectations. For example, if you set a goal to lose 30 pounds by the end of the year but don’t accomplish it, you’ll feel like a failure. But if you set a routine to go to the gym 3 times a week and miss a week, that’s okay as long as you keep to it the next week. …


Lines of code on a MacBook
Lines of code on a MacBook
Photo by Artem Sapegin on Unsplash

Did you know it’s easy to start an HTTP web server using some of your favorite programming languages?

Prerequisites

Create a directory with an HTML file:

mkdir static
cd static
echo "<h1>Hello, world!</h1>" > index.html

Python

Python 3:

python3 -m http.server

Python 2:

python -m SimpleHTTPServer

View your webpage at localhost:8000. To specify the port, pass the port number in the next argument:

python3 -m http.server 1337
python -m SimpleHTTPServer 1337

Node.js

http-server:

npm install --global http-server
http-server

Or:

npx http-server

View your webpage at localhost:8080. To specify the port, use the -p flag:

http-server -p 1337

Ruby

ruby -run -e httpd .

View your webpage at localhost:8080. To specify the port, use the -p


This article goes over how to add Size Limit, a performance budget tool for JavaScript, to GitHub Actions.

Image for post
Image for post

Setup

Install size-limit:

$ npm install --save-dev size-limit

Run the size-limit binary to get the message:

$ npx size-limit
Install Size Limit preset depends on type of the project
For application, where you send JS bundle directly to users
npm install --save-dev @size-limit/preset-app
For frameworks, components and big libraries
npm install --save-dev @size-limit/preset-big-lib
For small (< 10 KB) libraries
npm install --save-dev @size-limit/preset-small-lib
Check out docs for more complicated cases
https://github.com/ai/size-limit/

In our example, we’re going to install the big library preset @size-limit/preset-big-lib:

$ npm install --save-dev…


GitHub Actions Pull Request “All checks have passed”
GitHub Actions Pull Request “All checks have passed”
GitHub Actions

This article will go over how to migrate from Travis CI to GitHub Actions for a Node.js project on GitHub.

Travis CI

Given .travis.yml:

GitHub Actions

First, make the directory .github/workflows:

$ mkdir -p .github/workflows

Create the workflow file .github/workflows/build.yml:

$ touch .github/workflows/build.yml

And add the Node.js workflow (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. In our example, git push triggers our workflow.

To add the pull_request event:

Which is the same thing…

About

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