On my 2021–01–18 livestream, I learned about drag-and-drop using the HTML5 draggable attribute:
Set draggable to true
to make an element draggable:
Use the dragstart
event attribute to set the drag data:
Or add the event listener using JavaScript:
Use the dragover
event attribute to prevent the default action:
Or add the event listener using JavaScript:
Get package.json
fields using:
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 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’s1.2.3
instead of"1.2.3"
).
How to build a bouncing DVD logo website using:
Initialize the variables:
During preload()
, load the DVD images:
dvd1.svg
todvd8.svg
are found in theassets/
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 automates dependency updates for projects on GitHub. We’ll go over how to automate dependency updates for bundler or Ruby projects.
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”.
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 automates dependency updates for projects on GitHub. We’ll go over how to automate dependency updates for npm or Node.js projects.
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”.
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.
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 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.
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. …
You shouldn’t make excuses for not writing because you have more free time than you realize:
Examine your daily schedule because you can find many moments to write.
You can accomplish a lot of writing when you’re in the right…
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:
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. …
Did you know it’s easy to start an HTTP web server using some of your favorite programming languages?
Create a directory with an HTML file:
mkdir static
cd static
echo "<h1>Hello, world!</h1>" > index.html
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
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 -run -e httpd .
View your webpage at localhost:8080
. To specify the port, use the -p
…