| https://rasx-node-js.netlify.app/ |
This repository is based on the assumption that Node.js®-related technology is sitting at the bottom of every Web Client stack I will be concerned about for years to come.
Every CSS, JavaScript and (X)HTML sample that is relevant to the state of the art and my current legacy load will be in this repository. Most of my Web Client/App samples have been on codepen.io and stackblitz.com. This repository will attempt to be a superset of my CodePen presence (with the exception of my Angular JS pens).
Each folder of this repository represents a subject matter of self study. This study is taking place inside the free IDE from Microsoft, Visual Studio Code with on my Windows Desktop or my Ubuntu Desktop. To start working with this repository, start with the http-server sample.
The intent is to approach each of these samples from their respective folder through npm (with a valid project.json file), using npm install then npm start and/or npm test. This install-start/test cycle is intended to exist after package.json is generated with dependencies (there may also be the need to use npm run). It implies that the initial installs (described in the README.md in each folder) have been completed—so the npm install command here should be an update.
The popular normalize.css [repository] is available via CDN. Additionally, this CSS standardizes:
html {
font-family: sans-serif;
margin: 2em;
}For detail, see gulp and CSS handling.
I would like to document my coverage of Node.js-based technologies in this ‘commentary’ section. Ideally, every sample folder in this repo will be addressed here. When this is not the case, then I am trying something new or I have abandoned something ‘old.’
I remain committed to Angular as a generator of Web Components. Angular Elements “extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.” This commitment comes from the strategic desire to make Angular-based experiences supplemental to a static-generated presentation.
My angular-workspace-minimal sample allows me to declare my Studio preference for Angular workspaces which, again, is biased toward Web Component generation.
My CSS gurus are Jen Simmons, Rachel Andrew and Chris Coyier (of CSS-Tricks). My future CSS samples should focus on CSS Modules, the ‘native’ CSS grid system, “infinite” scrolling, the responsive “hero” image, etc.
My d3-bostock-bar-charts sample is what I have for D3.js so far. I am walking (very slowly) through the tutorials with a bias for its SVG support.
My relatively new commitment to eleventy represents my relatively new, static-generation-first approach to Web site design. As of this writing, eleventy is literally filed under the md-11ty/ folder, where the md prefix stands for Markdown. This pigeon-holing of eleventy into the Markdown silo is done to indicate that Markdown is the (relatively new) fundamental document format of my Studio and eleventy is its premiere publishing platform.
BTW: I am going to allow my interest in eleventy completely replace my previous interest in Hugo.
Jessica Kerr piqued my interest in Elm with her 2016 talk “Adventures in Elm.” My little Elm thingy, along with my experiments with Giraffe, indicates my ongoing interest in the relationship functional programming has with building maintainable UI.
I expect that my investment in jQuery is historical. I am using jQuery 3.x in Bootstrap 3.x. I assume that my indirect use of jQuery will be phased out by the 3rd-parties that depend on it. A challenge for me would be adding Web Components samples that are equivalents to the jQuery stuff to explicitly reach myself that jQuery is done—brilliantly done but done.
Influence of the Angular team led me directly to the karma-jasmine combo. My karma-and-jasmine-minimal sample is my way of stepping back from Angular and looking at these in isolation.
I would also like to mention my work with Jest here (since no samples as of this writing are in this repo). I started that work directly in my songhay-core repo.
My study of Web components (at open-wc.org) led me to Mocha.js which is presented as a newer, smaller iteration over Jasmine.
My mocha-and-typescript folder represents the start of my journey into the world of testing Web components.
I have removed my office-addin-excel sample because it represents another failed attempt of mine to get the simplest Add-in working in Office. I will look into this later, taking note of this relatively new term, “Office Add-ins platform.”
My hello-world React sample is proof that I have “played around” with React. The Web developer market is currently in love with React so I had to take a look. Respectfully, React ingeniously addresses problems in a world that no longer exists: a world without the Web Components standard and Template literals. And it must be said that, years ago, the React Component class [docs] was my introduction to the Web Component standard.
My SVG gurus are (currently) Sara Soueidan, Tiffany Rayside and Chris Coyier. With help from these three (and, of course, others), I need to get comfortable with the basics of SVG (viewBox, preserveAspectRatio, etc.). Then I need to looking to SVG fall back with the picture element. Next would the robust topic of SVG icons.
The /svg-*/ and /tiffany-rayside-svg-*/ folders in this repo represent the beginnings of my exploration.
My typescript-language sample represents my relationship with Typescript (and mocha [GitHub]), intended to be deep and complex. In addition to the work here, my songhay-core repo literally implements the core commitment of this Studio to Typescript.
I have not taken the relatively recently-available option to approach Web Components [GitHub] as a standard completely independent of Angular, Vue, React etc.
I suppose my Angular/Google influence has led me to the Polymer project in general and the LitElement project in particular. My “LitElement—Getting Started” sample is a step in what I think is the ‘right’ direction.
My webpack and rollup experience is long overdue. My webpack-getting-started sample is a strong start. At this moment in documenting time, I see three levels of escalation for bundling:
npx cp(et al.) in annpmscript- rollup
- webpack
The main reason why node-cp [GitHub] (along with concat [GitHub]) is mentioned here is because rollup and webpack are designed to work with JavaScript modules in particular and, through the use of plugins/add-ins, module systems in other languages in general. This bias to modules by design ignores the rare use of older, non-modular sources.
This pontification of mine implies that my gulp-and-css-handling sample is there for historical purposes.
Since I have discovered the wonders of npx [GitHub], I no longer recommend installing tons of global, npm-based executables. My list, therefore, is markedly reduced:
sudo npm install -g \
http-server \
npx \
@angular/cliYou may already have these globally installed npm packages available to the Node.js runtime on your machine(s). As a reminder (to me), the commands to check for this are:
npm list -g --depth=0
npm list --depth=0You should also run ls /usr/local/lib/node_modules/ in bash to verify that any uninstalled packages are removed (additionally, consider sudo npm cache clean and sudo npm -g update). One last bit, when you run npm list -g --depth=0 and all you see is this:
/usr/lib
└── npm@3.10.10
try npm list -g --depth=1 (this implies you have node >= 6.x installed).
I recommend installing the latest LTS version of Node.js. On Windows, try Chocolatey by searching for the LTS version.
As of this writing, on Ubuntu bash (Windows or Linux), run:
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejsFor detail, see “Installing Node.js via package manager” and “Installation instructions.”
Finally (seriously), this command comes in handy:
sudo npm install npm@latest -gAccording to the official docs, “npm gets updated more frequently than Node does.”