If you want to PUT, PATCH, or POST your data to a server this article might help you
Also there are some things to know about JSON such as the fetch API and some of the words you need to include in your fetch syntax, such as JSON.stringify, await, and async
The very end of this post has a cool set of sliders that seems to point towards the holy grail of what I aam trying to do. Basically, replicate ppt, but be able to enter in my own numbers and have it build the graphic that I want to design.
For example, given a CSV (or JSON) input file of shapes, I want to have it display the thing.
Web Workers concepts and usage
A worker is an object created using a constructor (e.g. Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread.
In addition to the standard JavaScript set of functions (such as String, Array, Object, JSON, etc.), you can run almost any code you like inside a worker thread. There are some exceptions: for example, you can’t directly manipulate the DOM from inside a worker, or use some default methods and properties of the window object. For information about the code that you can run see worker global context and functions, and supported web APIs below.
Data is sent between workers and the main thread via a system of messages — both sides send their messages using the postMessage() method, and respond to messages via the onmessage event handler (the message is contained within the Message event’s data property). The data is copied rather than shared.
Workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page. In addition, workers may use XMLHttpRequest for network I/O, with the exception that the responseXML and channel attributes on XMLHttpRequest always return null.
Worker types
There are a number of different types of workers:
Dedicated workers are workers that are utilized by a single script. This context is represented by a DedicatedWorkerGlobalScope object.
Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames, etc., as long as they are in the same domain as the worker. They are a little more complex than dedicated workers — scripts must communicate via an active port.
Service Workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.
Note: As per the Web workers Spec, worker error events should not bubble (see bug 1188141. This has been implemented in Firefox 42.
Worker global contexts and functions
Workers run in a different global context than the current window! While Window is not directly available to workers, many of the same methods are defined in a shared mixin (WindowOrWorkerGlobalScope), and made available to workers through their own WorkerGlobalScope-derived contexts:
DedicatedWorkerGlobalScope for dedicated workers
SharedWorkerGlobalScope for shared workers
ServiceWorkerGlobalScope for service workers
Some of the functions (a subset) that are common to all workers and to the main thread (from WindowOrWorkerGlobalScope) are: atob(), btoa(), clearInterval(), clearTimeout(),dump() , setInterval(), setTimeout().
The following functions are only available to workers:
WorkerGlobalScope.importScripts() (all workers),
DedicatedWorkerGlobalScope.postMessage (dedicated workers only).
Supported Web APIs
Note: If a listed API is supported by a platform in a particular version, then it can generally be assumed to be available in web workers. You can also test support for a particular object/function using the site: https://worker-playground.glitch.me/
The following Web APIs are available to workers: Barcode Detection API, Broadcast Channel API, Cache API, Channel Messaging API,Console API, Web Crypto API (Crypto), CustomEvent, Data Store (Firefox only), DOMRequest and DOMCursor, Encoding API (TextEncoder, TextDecoder, etc.), Fetch API, FileReader, FileReaderSync (only works in workers!), FormData, ImageData, IndexedDB, Network Information API, Notifications API, Performance API (including: Performance, PerformanceEntry, PerformanceMeasure, PerformanceMark, PerformanceObserver, PerformanceResourceTiming), Promise, Server-sent events, ServiceWorkerRegistration, URL API (e.g. URL), WebGL with OffscreenCanvas (enabled behind a feature preference setting gfx.offscreencanvas.enabled), WebSocket, XMLHttpRequest.
Workers can also spawn other workers, so these APIs are also available: Worker, WorkerGlobalScope, WorkerLocation, WorkerNavigator.
The following Web APIs are available to workers: Barcode Detection API, Broadcast Channel API, Cache API, Channel Messaging API,Console API, Web Crypto API (Crypto), CustomEvent, Data Store (Firefox only), DOMRequest and DOMCursor, Encoding API (TextEncoder, TextDecoder, etc.), Fetch API, FileReader, FileReaderSync (only works in workers!), FormData, ImageData, IndexedDB, Network Information API, Notifications API, Performance API (including: Performance, PerformanceEntry, PerformanceMeasure, PerformanceMark, PerformanceObserver, PerformanceResourceTiming), Promise, Server-sent events, ServiceWorkerRegistration, URL API (e.g. URL), WebGL with OffscreenCanvas (enabled behind a feature preference setting gfx.offscreencanvas.enabled), WebSocket, XMLHttpRequest.
Workers can also spawn other workers, so these APIs are also available: Worker, WorkerGlobalScope, WorkerLocation, WorkerNavigator.
Shiny Server is currently only supported on the Linux operating system. We officially support the following distributions:
RedHat Enterprise Linux (and CentOS) 5.4+
RedHat Enterprise Linux (and CentOS) 6.0+
Ubuntu 12.04
Ubuntu 13.04
We currently only support the x86-64 architecture. As described in the Installation section, you will install R and the Shiny package prior to installing Shiny Server. Root privileges will be required both in the installation process and also at runtime.
Enent handlers (addEventListener) for keyboard press events, mouse clicks,, and TOUCHSCREEN
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
JavaScript only does one dimensional arrays, but you can hack the system by storing arrays inside of arrays to get two- dimensional arrays
OTOH you can also just import/use math.js to do it an easier way
https://mathjs.org/docs/datatypes/matrices.html
Don’t forget about d3.js!!!
https://d3js.org/
Adding and subtracting tags to an html document… Aka manipulating the DOM
https://www.w3schools.com/js/js_htmldom_nodes.asp
NPM has a CRON package
https://docs.npmjs.com/configuring-two-factor-authentication
Strapi (v4) and cms on node
https://www.gatsbyjs.com/guides/strapi/
Professional JavaScript for Web Developers [4th edition]
Node.js Design Patterns [3rd edition]
Distributed Systems with Node.js
Implementing DDD, CQRS, and Event Sourcing
Multithreaded JavaScript: Concurrency Beyond the Event Loop
Google forms API for node
Could innovate on server for surveys
https://fusebit.io/blog/google-form-using-nodejs
Security pitfalls on node:
https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html
You can use serialport.io to connect to the internet of things with node.is.. I think the newest update to the next.js framework has support for this
https://serialport.io/
If you want to PUT, PATCH, or POST your data to a server this article might help you
Also there are some things to know about JSON such as the fetch API and some of the words you need to include in your fetch syntax, such as JSON.stringify, await, and async
https://dmitripavlutin.com/fetch-with-json/
This whole async, await, and promise thing is confusing… https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
Apparently new node 17+ has a native readline module… Useful for CLI = COMMAND LINE INTERFACE
https://geshan.com.np/blog/2022/03/nodejs-readline/
A readline has different events that node listens for, like an enter key or a ctrl-z
https://www.geeksforgeeks.org/node-js-readline-module/
Here are all the global objects of node
https://nodejs.org/api/globals.html
React tutorial shows you how to make a tic tac toe game
https://reactjs.org/tutorial/tutorial.html
An “intersection observer” API Helps you to understand how much of a rectangle is visible in the view screen
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Node best practices… https://alexkondov.com/tao-of-node/
A CRUD app in pure client side JavaScript that shows the Model-View-Controller (MVC) paradigm
https://www.taniarascia.com/javascript-mvc-todo-app/
Drag and drop is actually pretty straightforward
https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event
Event listeners … You can register multiple listeners on a single target and have it call a handler function.
The context of ‘this’ changes depending on whether it is an arrow function ==> … or another function… or not a function.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Instead of if else if , there’s a ternary operator
condition ? exprIfTrue : exprIfFalse
Copied and pasted–>
function getFee(isMember) {
return (isMember ? ‘$2.00’ : ‘$10.00’);
}
console.log(getFee(true));
// expected output: “$2.00”
console.log(getFee(false));
// expected output: “$10.00”
console.log(getFee(null));
// expected output: “$10.00”
“The ternary operator is right-associative, which means it can be “chained” in the following way, similar to an if … else if … else if … else chain:
function example(…) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
// Equivalent to:
function example(…) {
if (condition1) { return value1; }
else if (condition2) { return value2; }
else if (condition3) { return value3; }
else { return value4; }
}
SVG is different from JavaScript… It’s a text based object that can be added to the DOM via JavaScript, and then manipulated by js as well
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started
I’m thinking about SVG today
https://dev.to/tqbit/how-to-create-svg-elements-with-javascript-4mmp
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes
One way is through free software like inkscape
But you can also code it
SVG is not JavaScript, and in fact has relationship to xml… A whole new world of dom manipulation!
The very end of this post has a cool set of sliders that seems to point towards the holy grail of what I aam trying to do. Basically, replicate ppt, but be able to enter in my own numbers and have it build the graphic that I want to design.
For example, given a CSV (or JSON) input file of shapes, I want to have it display the thing.
https://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/
JavaScript has problems with decimals, because of floating point 64 bit math operations.
Integers work well, but js can’t add decimals correctly
.1 + .2
https://modernweb.com/what-every-javascript-developer-should-know-about-floating-points/
https://www.w3schools.com/js/js_numbers.asp
IEEE 754 STANDARD FOR FLOATING POINT NUMBERS
https://steve.hollasch.net/cgindex/coding/ieeefloat.html
Put a data from an array into an HTML table
…use the tr tag and a for… Loop
https://stackoverflow.com/questions/15164655/generate-html-table-from-2d-javascript-array
CSS Selectors are the same thing that QuerySelectorAll() looks for
#foo is an ID
.foo is a class
you can also do nth-child(2) to select every other thing
https://www.freecodecamp.org/news/css-selectors-cheat-sheet/amp/
The Date() object is weird because January is the 00th month… So some people are going to have a Temporal object with plain time
Also, there is an INTL date standard that looks good
https://blog.openreplay.com/is-it-time-for-the-javascript-temporal-api
I definitely think ppl can create a site that enables you to download a CSV or text or JSON file using this blog post information
https://shinglyu.com/web/2019/02/09/js_download_as_file.html
Here is the way to upload files from your computer to the page
https://developer.mozilla.org/en-US/docs/Web/API/FileList
Also, you can read and write using the native Clipboard API… APPARENTLY there used to be some command execution function that this improves upon
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
There is a native database in the browser… IndexedDB
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
And you can use modeles that simulate server side db calls such as pouchdb (for couchdb)
https://pouchdb.com/
Or zangodb ( for mongodb)
https://github.com/erikolson186/zangodb
Or sql-like… Peruse the list, and consider looking at the git code to see how they do it
Here’s the w3 spec for 8ndexed db v3.0
https://w3c.github.io/IndexedDB/
https://w3c.github.io/IndexedDB/#factory-interface
What the heck are workers?
Apparently they have access to a lot of APIs but not the SAME global scope.
You basically put them in a corner with their own code and they work the synchronous task without gumming up your browser.
They can send messages and let you know when they have data or other results for you.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
”
References
Web Workers API
Web Workers concepts and usage
A worker is an object created using a constructor (e.g. Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread.
In addition to the standard JavaScript set of functions (such as String, Array, Object, JSON, etc.), you can run almost any code you like inside a worker thread. There are some exceptions: for example, you can’t directly manipulate the DOM from inside a worker, or use some default methods and properties of the window object. For information about the code that you can run see worker global context and functions, and supported web APIs below.
Data is sent between workers and the main thread via a system of messages — both sides send their messages using the postMessage() method, and respond to messages via the onmessage event handler (the message is contained within the Message event’s data property). The data is copied rather than shared.
Workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page. In addition, workers may use XMLHttpRequest for network I/O, with the exception that the responseXML and channel attributes on XMLHttpRequest always return null.
Worker types
There are a number of different types of workers:
Dedicated workers are workers that are utilized by a single script. This context is represented by a DedicatedWorkerGlobalScope object.
Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames, etc., as long as they are in the same domain as the worker. They are a little more complex than dedicated workers — scripts must communicate via an active port.
Service Workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.
Note: As per the Web workers Spec, worker error events should not bubble (see bug 1188141. This has been implemented in Firefox 42.
Worker global contexts and functions
Workers run in a different global context than the current window! While Window is not directly available to workers, many of the same methods are defined in a shared mixin (WindowOrWorkerGlobalScope), and made available to workers through their own WorkerGlobalScope-derived contexts:
DedicatedWorkerGlobalScope for dedicated workers
SharedWorkerGlobalScope for shared workers
ServiceWorkerGlobalScope for service workers
Some of the functions (a subset) that are common to all workers and to the main thread (from WindowOrWorkerGlobalScope) are: atob(), btoa(), clearInterval(), clearTimeout(),dump() , setInterval(), setTimeout().
The following functions are only available to workers:
WorkerGlobalScope.importScripts() (all workers),
DedicatedWorkerGlobalScope.postMessage (dedicated workers only).
Supported Web APIs
Note: If a listed API is supported by a platform in a particular version, then it can generally be assumed to be available in web workers. You can also test support for a particular object/function using the site: https://worker-playground.glitch.me/
The following Web APIs are available to workers: Barcode Detection API, Broadcast Channel API, Cache API, Channel Messaging API,Console API, Web Crypto API (Crypto), CustomEvent, Data Store (Firefox only), DOMRequest and DOMCursor, Encoding API (TextEncoder, TextDecoder, etc.), Fetch API, FileReader, FileReaderSync (only works in workers!), FormData, ImageData, IndexedDB, Network Information API, Notifications API, Performance API (including: Performance, PerformanceEntry, PerformanceMeasure, PerformanceMark, PerformanceObserver, PerformanceResourceTiming), Promise, Server-sent events, ServiceWorkerRegistration, URL API (e.g. URL), WebGL with OffscreenCanvas (enabled behind a feature preference setting gfx.offscreencanvas.enabled), WebSocket, XMLHttpRequest.
Workers can also spawn other workers, so these APIs are also available: Worker, WorkerGlobalScope, WorkerLocation, WorkerNavigator.
The following Web APIs are available to workers: Barcode Detection API, Broadcast Channel API, Cache API, Channel Messaging API,Console API, Web Crypto API (Crypto), CustomEvent, Data Store (Firefox only), DOMRequest and DOMCursor, Encoding API (TextEncoder, TextDecoder, etc.), Fetch API, FileReader, FileReaderSync (only works in workers!), FormData, ImageData, IndexedDB, Network Information API, Notifications API, Performance API (including: Performance, PerformanceEntry, PerformanceMeasure, PerformanceMark, PerformanceObserver, PerformanceResourceTiming), Promise, Server-sent events, ServiceWorkerRegistration, URL API (e.g. URL), WebGL with OffscreenCanvas (enabled behind a feature preference setting gfx.offscreencanvas.enabled), WebSocket, XMLHttpRequest.
Workers can also spawn other workers, so these APIs are also available: Worker, WorkerGlobalScope, WorkerLocation, WorkerNavigator.
Multi-dimensional arrays are just a rays of arrays
https://www.geeksforgeeks.org/multidimensional-array-in-javascript/
You can slice out certain elements of an array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
slice()
slice(start)
slice(start, end)
I think couch db and pouch db make the most sense for me
https://pouchdb.com/guides/databases.html
Building a basic CRUD app using Express
(Keyword: RESTful API)
https://dev.to/zagaris/build-a-restful-crud-api-with-node-js-2334
detailed info on setting up server to deliver 404 and other responses / errors / documents
Here’s another tutorial on basically the same topic: RESTful API for CRUD operations
https://dev.to/suhailkakar/building-a-restful-crud-api-with-node-js-express-and-mongodb-1541
It’s worth talking about couchdb permissions
View at Medium.com
A honey pot of fun links about couchdb
https://project-awesome.org/quangv/awesome-couchdb
Same topic but in this case you build your restful crud app using a database called postgres SQL
https://blog.logrocket.com/nodejs-expressjs-postgresql-crud-rest-api-example/
I googled RESTful CRUD JavaScript MYSQL
because MySQL is another database you might want to try
https://blog.logrocket.com/build-rest-api-node-express-mysql/
I have enough books, but here is another from December 2016 that discusses MySQL, MongoSB, and authentication
https://www.oreilly.com/library/view/learning-nodejs-second/9780134663715/
Pixel data
Imagedata
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
https://beej.us/blog/data/html5s-canvas-2-pixel/
Cool ideas
Sepimski (sp?) Triangle and other canvas imagedata facts described and put to good use
https://jasonsturges.medium.com/pixel-art-with-javascript-9e2db3088cb0
Dart /flutter compiles to JavaScript
Used to design fast client interfaces
https://dart.dev/
Have I posted about the FileReader API ???
https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
MYSQL API for js… From the horse’s mouth
De
https://dev.mysql.com/doc/dev/mysqlsh-api-javascript/8.0/
MySQL Shell API 8.0.29
Unified development interface for MySQL Products
MySQL Shell API
This document covers the JavaScript APIs available in the MySQL Shell:
(1) X DevAPI – NoSQL Database API for MySQL and the MySQL Document Store.
(2) ShellAPI – Shell API and backward compatibility API for MySQL Servers not supporting the X DevAPI.
(3) AdminAPI – API for setting up and managing InnoDB Clusters, InnoDB ReplicaSets, and InnoDB ClusterSets.
The functionality of the APIs is exposed through modules and global objects which are automatically available when the MySQL Shell starts.
Download the very thorough guide on how to use the MySQLx API
Includes MySQL shell js, as well as a separate one for Node
https://dev.mysql.com/doc/x-devapi-userguide/en/devapi-users-introduction.html
MYSQL shell 8.0
https://dev.mysql.com/doc/mysql-shell/8.0/en/
Here’s an article that says how to use express and node.js to access a mySQL database
https://blog.logrocket.com/build-rest-api-node-express-mysql/
Gatsby,
Headless CMS
React
GraphQL
https://www.gatsbyjs.com/blog/2019-02-08-government-open-data-site-with-gatsby
Back to thinking about shiny + d3
Also wondering if shiny server could be a thing using node.js
According to this website, shiny server only comes with Linux (Ubuntu, red hat, or CentOS
http://rstudio.github.io/shiny-server/os/0.4.0/
Shiny Server is currently only supported on the Linux operating system. We officially support the following distributions:
RedHat Enterprise Linux (and CentOS) 5.4+
RedHat Enterprise Linux (and CentOS) 6.0+
Ubuntu 12.04
Ubuntu 13.04
We currently only support the x86-64 architecture. As described in the Installation section, you will install R and the Shiny package prior to installing Shiny Server. Root privileges will be required both in the installation process and also at runtime.
You COULD just run Rscript.exe as a child process from node
Which raises the question, can you get node and vscode installed on your computer?
https://netterminalmachine.com/blog/2018/blending-nodejs-and-r-projects
Some good ideas for packages include
blockly
Mathjax
https://hackr.io/blog/top-javascript-libraries