We Keep Coding

Lightweight Pure JS Plotting

Concise: Can Chart.JS be compiled locally to pure JS, and if yes, how? If it cannot, do you know of any other pure JS charting libraries available.
Hopefully someone can guide me in the right direction. I have been tasked with plotting some some time series data on a legacy system. This has to be done in JS and the libraries cannot exceed 1Mb. I don't need any functionality outside of line charts scrolling across the screen and the axes being displayed. I looked at Chart.JS but I am unsure how to compile it into JS files only. Ultimately I have to flatten the folder structure because the system doesn't support directory structures. Before we go down a rabbit hole, I have absolutely no way to alter the current configuration of the system. I got what I got. The system doesn't have access to the internet, so I can't utilize remotely hosted solutions :(
Appreciate any help someone can provide pointing me to libraries they might now of.
Used NPM and TSC to compile other solutions to JS only deployment, but unable to fully understand how to do so. Scoured the internet for pure JS libraries that are available.

Interactive Mouse Effects with Three.js

really appreciate some help for this one.
I'm new to three.js, I think I read and watched all the videos to understand, but still can't acheive this effect on a coded website that I'm making:
Interactive Mouse Effects with Three.js
Just after the "var animate" part I receive an error of "cube not defined"
So I was wordering if there is a missing part for this tutorial??
Also, I downloaded his entire project to see where I messed up, but his code was quite different from the tutorial. I'm not Using parcel, I'm using cdnjs for three.js, so I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
My last question for the most courageous ones is, when I finally acheive this (with your precious help) Is there important information due to this library use, that I need to know so I can upload it online?
Thank you thank you soooo very much!!

I'm afraid the "basic Three.js setup" code snippet from the article is incomplete since it does not contain how the cube is created. Hence, executing this code leads to a runtime errors in the animation loop. When you are new to three.js, use the code from the official guide Creating a scene.
I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
Yes, you need these files if you are want to use post-processing. There is another guide called How to use post-processing that explains how a basic usage looks like.
Is there important information due to this library use, that I need to know so I can upload it online?
I would say no^^. You can include the library files as global scripts or as ES6 modules (recommended). For more complex applications, it's actually better to use of a build-tool like rollup (or Parcel). For the former tool, there is actually a starter project which demonstrates a simple three.js build.

Implementing Cursor Trail Effect on React

I am trying to get more experience by implementing various web visual effects that I've seen online. The one I'm working on is to create a 'cursor trail' effect where the cursor trail is used to reveal a background image. For more context, you can find the inspiration for this effect here.
The CodePen that I have linked above contains an HTML file, a CSS file, and a JS file. For starters, I am trying to transfer this functionality into a simple React app. To do this, I first initialized a basic/vanilla react app:
npx create-react-app cursor_trails_effect
I'm having trouble incorporating this cursor trails effect into my React app. From the CodePen, I'm easily able to integrate the HTML and CSS parts into my React app, but am unsure how to connect to and execute the JS script that is part. Yet it makes me wonder, in general, how someone should go about integrating such a JS script into the React framework of web development?
Prior to posting this question, I conducted considerable research to understand how to execute scripts from external (.js) files, or use the <script> tag in React, and have tried to use a number of packages that claim to accomplish this (such as 'react-load-script', 'react-render-html', 'react-script-tag', 'dangerously-set-inner-html', 'react-helmet') but to no success.

Adding a custom method/object to Javascript in Electron

I'm developing a custom application that might need to use a proprietary low-level library, I'm looking into the Electron platform to see if it has entry points for extensions plugins that work as if they were native JS objects.
I've tried using Electron's <webview src="..." nodeintegration> tag, unfortunately the tag does not support transparencies when overlayed on top of each other so direct node integration was discarded. The second option is to use iframes and have the script inside the iframe call custom JS/native methods on a
custom object (think the window object).
I'm exploring the electron code base but I've just started and hoped that maybe someone more familiar with it could point me in the right direction, the ideal way would be for me to be able to create a shared library (be it linked dynamically or statically) and to be able to use the new methods on the JS code that runs as part of a web page rather than as part of Node.

Nodejs create a PNG image with text inside

I'm trying to create a new PNG file to serve back to clients via HTTP (as a response type image/png)
The new file is created by concatenating 3 base PNG files and adding a custom text in the middle of the image.
Problem is, there no built-in library in nodejs to do this. I spent a couple of hours searching and to my surprise, there is no pure JS library to do this. The closest thing is node-pngjs but it lacks the ability to add text. I understand that the text part is complicated since it's somewhat dependent on the OS (fonts installed, DLLs to interface with said fonts, etc).
There are other node modules that are wrappers around imageMagick (gm) and GTK (canvas) but unfortunately imageMagick is 155MB of binaries, and to use canvas you need to compile from source, install python and VS 2010 C++ Express Edition and it does not work on the lastest version of GTK.
The best I got right now is to write an .NET assembly and use it from inside node via edge.js, but that will require both Windows OS and .NET framework on the server.
Again, the complicated part here is adding the text inside the image.
Any suggestion on how to get this working without a sh**load of external dependencies?

Yes you are correct, the Node.js support for image processing libraries is weak, most are the wrappers of some CLI application.
The solution that I would use involves PhantomJS which has the canvas and svg support, you could use these features. It's lighter than the other options and does not require external applications to be installed. http://phantomjs.org/quick-start.html