{"id":23730986,"url":"https://github.com/bryanwilhite/nodejs","last_synced_at":"2026-03-11T01:02:25.263Z","repository":{"id":37674982,"uuid":"92251270","full_name":"BryanWilhite/nodejs","owner":"BryanWilhite","description":"my collection of self-educational samples on the Node.js® stack","archived":false,"fork":false,"pushed_at":"2026-03-09T06:15:42.000Z","size":12437,"stargazers_count":1,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-09T11:24:00.033Z","etag":null,"topics":["angular-io","aurelia","codepen","css","elm","html5","jasmine","karma","nodejs","postcss","svg","typescript","ux","ux-design"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BryanWilhite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-05-24T04:54:41.000Z","updated_at":"2026-03-09T06:15:46.000Z","dependencies_parsed_at":"2023-02-19T02:30:52.073Z","dependency_job_id":"40d0f697-0da6-468d-bc38-1b802e4dac53","html_url":"https://github.com/BryanWilhite/nodejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BryanWilhite/nodejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BryanWilhite%2Fnodejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BryanWilhite%2Fnodejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BryanWilhite%2Fnodejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BryanWilhite%2Fnodejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BryanWilhite","download_url":"https://codeload.github.com/BryanWilhite/nodejs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BryanWilhite%2Fnodejs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30364610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-io","aurelia","codepen","css","elm","html5","jasmine","karma","nodejs","postcss","svg","typescript","ux","ux-design"],"created_at":"2024-12-31T03:15:23.923Z","updated_at":"2026-03-11T01:02:25.216Z","avatar_url":"https://github.com/BryanWilhite.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Node.js®\n\n## my collection of self-educational samples on the Node.js® stack\n\n| | |\n|-|-\n| [![Netlify Status](https://api.netlify.com/api/v1/badges/4318bca9-b442-4e07-9584-6580feaf0470/deploy-status)](https://app.netlify.com/sites/rasx-node-js/deploys) | \u003chttps://rasx-node-js.netlify.app/\u003e\n\nThis 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.\n\nEvery 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](https://codepen.io/rasx) and [stackblitz.com](https://stackblitz.com/@BryanWilhite). This repository will attempt to be a superset of my CodePen presence (with the exception of my Angular JS pens).\n\nEach 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](https://code.visualstudio.com/) with on my Windows Desktop or my Ubuntu Desktop. To start working with this repository, start with the [`http-server`](./http-server) sample.\n\nThe 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`](https://docs.npmjs.com/cli/run-script)). 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.\n\n## emulating the CSS normalize feature of codepen.io\n\nThe popular `normalize.css` [[repository](https://github.com/necolas/normalize.css/blob/master/normalize.css)] is available [via CDN](https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css). Additionally, this CSS standardizes:\n\n```css\nhtml {\n    font-family: sans-serif;\n    margin: 2em;\n}\n```\n\nFor detail, see [gulp and CSS handling](./gulp-and-css-handling).\n\n## my samples: a bit of commentary\n\nI 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.’\n\n### Angular commentary\n\nI remain committed to Angular as a generator of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). [Angular Elements](https://angular.io/guide/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.\n\nMy `angular-workspace-minimal` [sample](./angular-workspace-minimal) allows me to declare my Studio preference for [Angular workspaces](https://angular.io/guide/glossary#workspace) which, again, is biased toward Web Component generation.\n\n### CSS commentary\n\nMy CSS gurus are [Jen Simmons](https://labs.jensimmons.com/), [Rachel Andrew](https://www.rachelandrew.co.uk/) and [Chris Coyier](https://chriscoyier.net/) (of [CSS-Tricks](https://css-tricks.com/)). My future CSS samples _should_ focus on [CSS Modules](https://css-tricks.com/css-modules-part-1-need/), the ‘native’ [CSS grid](https://hacks.mozilla.org/2018/07/9-biggest-mistakes-with-css-grid/) system, [“infinite” scrolling](https://www.awwwards.com/websites/infinite-scroll/), the [responsive “hero” image](https://madronaweb.com/web-design-blog/web-design-blog-entry-a-responsive-hero.html), etc.\n\n### D3 commentary\n\nMy `d3-bostock-bar-charts` [sample](./d3-bostock-bar-charts) is what I have for [D3.js](https://d3js.org/) so far. I am walking (very slowly) through [the tutorials](https://github.com/d3/d3/wiki/Tutorials) with a bias for its SVG support.\n\n### eleventy commentary\n\nMy relatively new commitment to [eleventy](https://www.11ty.dev/) 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](./md-11ty), where the `md` prefix stands for [Markdown](https://en.wikipedia.org/wiki/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.\n\nBTW: I am going to allow my interest in eleventy completely replace my previous interest in [Hugo](https://gohugo.io/).\n\n### Elm commentary\n\n[Jessica Kerr](https://jessitron.com/) piqued my interest in [Elm](https://elm-lang.org/) with her 2016 talk “[Adventures in Elm](https://www.youtube.com/watch?v=cgXhMc8M4X4).” My [little Elm thingy](./elm-minimal), along with my experiments with [Giraffe](https://github.com/BryanWilhite/dotnet-core/tree/master/dotnet-giraffe-template), indicates my ongoing interest in the relationship functional programming has with building maintainable UI.\n\n### jQuery commentary\n\nI expect that my investment in jQuery is historical. I am using jQuery 3.x in [Bootstrap](http://getbootstrap.com/) 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components) samples that are equivalents to the jQuery stuff to explicitly reach myself that jQuery is done—_brilliantly_ done but _done_.\n\n### karma-jasmine commentary\n\nInfluence of the Angular team led me directly to the karma-jasmine combo. My `karma-and-jasmine-minimal` [sample](./karma-and-jasmine-minimal) is my way of stepping back from Angular and looking at these in isolation.\n\nI would also like to mention my work with [Jest](https://jestjs.io/) here (since no samples as of this writing are in this repo). I started that work directly in my `songhay-core` [repo](https://github.com/BryanWilhite/songhay-core).\n\n### mocha commentary\n\nMy study of Web components (at open-wc.org) [led me](https://open-wc.org/testing/#testing-libraries) to [Mocha.js](https://mochajs.org/) which is presented as a newer, smaller iteration over [Jasmine](https://jasmine.github.io/).\n\nMy `mocha-and-typescript` [folder](./mocha-and-typescript) represents the start of my journey into the world of testing Web components.\n\n### Office Add-ins platform commentary\n\nI have removed my `office-addin-excel` [sample](https://github.com/BryanWilhite/nodejs/tree/0b2f54b45cfa480ee3986618cb2d2344c27fba1a/office-addin-excel) 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](https://docs.microsoft.com/en-us/office/dev/add-ins/overview/office-add-ins).”\n\n### React commentary\n\nMy hello-world React [sample](./react-hello-world) is proof that I have “played around” with [React](https://reactjs.org/). 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). And it must be said that, years ago, the React `Component` class [[docs](https://reactjs.org/docs/react-component.html)] was my introduction to the Web Component standard.\n\n### SVG commentary\n\nMy [SVG](https://www.w3.org/TR/SVG/) gurus are (currently) [Sara Soueidan](https://www.sarasoueidan.com/), [Tiffany Rayside](https://codepen.io/tmrDevelops/) and [Chris Coyier](https://chriscoyier.net/). 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.\n\nThe `/svg-*/` and `/tiffany-rayside-svg-*/` folders in this repo represent the beginnings of my exploration.\n\n### Typescript commentary\n\nMy `typescript-language` [sample](./mocha-and-typescript/packages/typescript-language) represents my relationship with [Typescript](https://www.typescriptlang.org/) (and `mocha` [[GitHub](https://github.com/mochajs/mocha)]), intended to be deep and complex. In addition to the work here, my `songhay-core` [repo](https://github.com/BryanWilhite/songhay-core) literally implements the _core_ commitment of this Studio to Typescript.\n\n### Web Components commentary\n\nI have not taken the relatively recently-available option to approach [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) [[GitHub](https://github.com/mdn/web-components-examples)] as a standard completely independent of Angular, Vue, React etc.\n\nI suppose my Angular/Google influence has led me to the Polymer project in general and [the LitElement project](https://lit-element.polymer-project.org/) in particular. My “[LitElement—Getting Started](./web-components-lit-element)” sample is a step in what I think is the ‘right’ direction.\n\n### webpack and rollup commentary\n\nMy webpack and rollup experience is long overdue. My `webpack-getting-started` [sample](./webpack-getting-started) is a strong start. At this moment in documenting time, I see three levels of escalation for bundling:\n\n1) `npx cp` (et al.) in an `npm` script\n2) rollup\n3) webpack\n\nThe main reason why `node-cp` [[GitHub](https://github.com/stephenmathieson/node-cp)] (along with `concat` [[GitHub](https://github.com/gko/concat)]) 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.\n\nThis pontification of mine implies that my `gulp-and-css-handling` [sample](./gulp-and-css-handling) is there for historical purposes.\n\n## global dependencies\n\nSince I have discovered the wonders of `npx` [[GitHub](https://github.com/npm/npx)], I no longer recommend installing tons of global, npm-based executables. My list, therefore, is markedly reduced:\n\n```bash\nsudo npm install -g \\\n    http-server \\\n    npx \\\n    @angular/cli\n```\n\nYou 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](https://stackoverflow.com/questions/17937960/how-to-list-npm-user-installed-packages) to check for this are:\n\n```bash\nnpm list -g --depth=0\nnpm list --depth=0\n```\n\nYou 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:\n\n```plaintext\n/usr/lib\n└── npm@3.10.10\n```\n\ntry `npm list -g --depth=1` (this implies you have node \u003e= 6.x installed).\n\n## Node.js LTS\n\nI recommend installing the latest [LTS](https://en.wikipedia.org/wiki/Long-term_support) version of Node.js. On Windows, try Chocolatey by [searching for the LTS version](https://chocolatey.org/packages?q=nodejs-lts).\n\nAs of this writing, on Ubuntu bash (Windows or Linux), run:\n\n```bash\ncurl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -\nsudo apt-get install -y nodejs\n```\n\nFor detail, see “[Installing Node.js via package manager](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)” and “[Installation instructions](https://github.com/nodesource/distributions#installation-instructions).”\n\nFinally (seriously), this command comes in handy:\n\n```bash\nsudo npm install npm@latest -g\n```\n\nAccording to [the official docs](https://docs.npmjs.com/getting-started/installing-node#updating-npm), “npm gets updated more frequently than Node does.”\n\n@[BryanWilhite](https://twitter.com/bryanwilhite)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanwilhite%2Fnodejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbryanwilhite%2Fnodejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanwilhite%2Fnodejs/lists"}