Very recently I have discovered The Coding Train YouTube channel. At first, it was kinda weird for a moment, but after two or three videos I was completely sold! I wanted that power of Processing for me! And I wanted it NOW!
As usual in those nice, academic cases, tooling support is, let's just say, somewhat lacky. There is a playground you can use to, well,... play around, but any sort of serious work requires a proper setup with TypeScript, ESLint, proper IDE support for in-place documentation and code completion. I don't think there's a single person on the planet that knows all there is to Processing, is there?
And so, now, ladies and gents... (drummroll) Badum-tss! Here it is! The all-mighty all-in-one with a cherry on top template you can use NOW!
npm create -y from-github padcom/p5 hello-world
You then need to install packages (as with any npm-enabled project):
cd hello-world
npm install
and you're ready to start coding (assuming you do have vscode installed):
code .
npm start
In a matter of seconds, you're coding in a TS-enabled, ESlint-backed, full-blown development environment with features you never even dreamed about, but might also be quite familiar to you if you are a frontend developer. In essence, everything that Vite.js supports is supported.
Ok, buuuuut... HOW MANY SECONDS?!
padcom@padcom:~/learning/p5$ rm -rf ~/.npm hello-world
At this stage, my local installation is totally fresh, nothing's cached. So we go with the worst-case scenario:
padcom@padcom:~/learning/p5$ time npm create -y from-github padcom/p5 hello-world
create-from-github version 0.0.4 by Matthias Hryniszak <padcom@gmail.com>
cloning https://github.com/padcom/p5 ...
cloning https://github.com/padcom/p5-template ...
cleaning up hello-world ...
configuring hello-world ...
done.
real 0m5,003s
user 0m0,875s
sys 0m0,116s
padcom@padcom:~/learning/p5$ time npm i --prefix hello-world
added 165 packages, and audited 166 packages in 14s
36 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
real 0m14,205s
user 0m2,648s
sys 0m0,476s
padcom@padcom:~/learning/p5$
That's about 20 seconds. I call that acceptable, especially that it will save me a lot of time later.
But ok, you don't do that to have just one project, do you? You'd want to use that opportunity and start 10, 20 or a 100 small projects, some will live forever and ever, some will die 10 seconds after they were created.
Here's how fast it is to create the next project:
padcom@padcom:~/learning/p5$ rm -rf hello-world
padcom@padcom:~/learning/p5$ time npm create -y from-github@latest padcom/p5 hello-world
create-from-github version 0.0.4 by Matthias Hryniszak <padcom@gmail.com>
cloning https://github.com/padcom/p5 ...
cloning https://github.com/padcom/p5-template ...
cleaning up hello-world ...
configuring hello-world ...
done.
real 0m1,209s
user 0m0,603s
sys 0m0,054s
padcom@padcom:~/learning/p5$ time npm i --prefix hello-world
added 165 packages, and audited 166 packages in 1s
36 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
real 0m1,218s
user 0m1,529s
sys 0m0,307s
padcom@padcom:~/learning/p5$
Less than 3s to have a new project ready to work. Sounds like a winner to me ;)
And the cherry on top I promised?
How about in-editor debugging with step-by-step code execution?
Top comments (0)