i}
13 | onStarClicked={() => onRatingUpdated(i + 1) }
14 | />
15 | ))}
16 |
17 | {selectedStars} of {totalStars} stars
18 |
19 |
20 | )
21 | }
--------------------------------------------------------------------------------
/FlaskDemo/templates/temperature_and_query.j2:
--------------------------------------------------------------------------------
1 |
2 |
3 | Current Temperature
4 |
5 |
6 | Current Temperature
7 |
8 |
9 |
10 | {% if name %}
11 | Hello, {{name}}.
12 | {% endif %}
13 | Currently, it is {{temperature}}°F in {{place_name}}, {{place_state}}.
14 |
15 |
16 | Query Parameters
17 |
18 | {% for key, value in query_dict.items() %}
19 | - {{key}}: {{value}}
20 | {% endfor %}
21 |
22 |
23 |
--------------------------------------------------------------------------------
/ColorList1_fetch/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/ColorList2_edit/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/ColorList1_fetch/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/ColorList2_edit/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/ColorList3_routing/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/ExpressSession/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-mvc",
3 | "version": "1.0.0",
4 | "description": "Demonstrating use of MVC with Express",
5 | "main": "index.js",
6 | "directories": {
7 | "test": "test"
8 | },
9 | "scripts": {
10 | "test": "jest"
11 | },
12 | "author": "Zachary Kurmas",
13 | "license": "ISC",
14 | "dependencies": {
15 | "ejs": "^3.1.10",
16 | "express": "^4.21.2",
17 | "express-session": "^1.18.1",
18 | "express-validator": "^6.14.2",
19 | "jest": "^29.0.3",
20 | "sqlite3": "^5.1.5"
21 | },
22 | "devDependencies": {
23 | "eslint": "^8.34.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/JavaScriptBasics/dynamicTypingAndFunctions.js:
--------------------------------------------------------------------------------
1 | function myForEach(array, callback) {
2 | for (var i = 0; i < array.length; ++i) {
3 | callback(array[i]);
4 | }
5 | }
6 |
7 | var names = ["John", "Paul", "George", "Ringo"];
8 |
9 | console.log("Method with functional parameter working as expected: ");
10 | myForEach(names, (name) => console.log("Hello, " + name + "."));
11 |
12 | console.log("");
13 | console.log("Runtime error resulting from bad lambda: We don't know until runtime that lastName will always be undefined.");
14 | myForEach(names, (firstName, lastName) => console.log("Hello, " + firstName + " " + lastName + "."));
--------------------------------------------------------------------------------
/ColorList1_fetch/src/ColorList.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Color from "./Color";
3 |
4 | export default function ColorList({ colors = [], loading = false, message, update = f => f }) {
5 | if (message) {
6 | return {message}
7 | }
8 | else if (loading) {
9 | return Loading ......
;
10 | } else if(!colors.length) {
11 | return No Colors Listed.
;
12 | }
13 |
14 | return (
15 |
16 | {
17 | colors.map(color => update(color.id, newValue)} />)
18 | }
19 |
20 | );
21 | }
--------------------------------------------------------------------------------
/ExpressMVCSimple/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-mvc",
3 | "version": "1.0.0",
4 | "description": "Demonstrating use of MVC with Express",
5 | "main": "index.js",
6 | "directories": {
7 | "test": "test"
8 | },
9 | "scripts": {
10 | "test": "jest"
11 | },
12 | "author": "Zachary Kurmas",
13 | "license": "ISC",
14 | "dependencies": {
15 | "ejs": "^3.1.10",
16 | "express": "^4.21.2",
17 | "express-validator": "^6.14.2",
18 | "jest": "^29.0.3",
19 | "sqlite3": "^5.1.5"
20 | },
21 | "devDependencies": {
22 | "@flydotio/dockerfile": "^0.7.10",
23 | "eslint": "^8.34.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/ExpressMVC/views/selectUser.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Select a User
6 |
7 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/ColorList3_routing/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import './index.css'
4 | import App from './App'
5 | import reportWebVitals from './reportWebVitals'
6 |
7 | import {BrowserRouter as Router} from 'react-router-dom'
8 |
9 |
10 | const root = ReactDOM.createRoot(document.getElementById('root'))
11 | root.render(
12 |
13 |
14 |
15 | )
16 |
17 | // If you want to start measuring performance in your app, pass a function
18 | // to log results (for example: reportWebVitals(console.log))
19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
20 | reportWebVitals()
21 |
--------------------------------------------------------------------------------
/ColorList2_edit/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
15 | #updateForm {
16 | border: 1px solid black;
17 | padding: 7px;
18 | display: inline-block;
19 | }
20 |
21 | .colorBox {
22 | height: 50px;
23 | width: 100px;
24 | margin-right: 15px;
25 | display: inline-block;
26 | }
--------------------------------------------------------------------------------
/ColorList2_edit/src/ColorList.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Color from "./Color";
3 |
4 | export default function ColorList({ colors = [], loading = false, message, onEditColor = f => f, update = f => f }) {
5 | if (message) {
6 | return {message}
7 | } else if (loading) {
8 | return Loading ......
;
9 | } else if(!colors.length) {
10 | return No Colors Listed.
;
11 | }
12 | return (
13 |
14 | {
15 | colors.map(color => onEditColor(color)} onColorRatingUpdated={(newValue) => update(color.id, newValue)} />)
16 | }
17 |
18 | );
19 | }
--------------------------------------------------------------------------------
/ColorListAPI_rails/config/initializers/inflections.rb:
--------------------------------------------------------------------------------
1 | # Be sure to restart your server when you modify this file.
2 |
3 | # Add new inflection rules using the following format. Inflections
4 | # are locale specific, and you may define rules for as many different
5 | # locales as you wish. All of these examples are active by default:
6 | # ActiveSupport::Inflector.inflections(:en) do |inflect|
7 | # inflect.plural /^(ox)$/i, "\\1en"
8 | # inflect.singular /^(ox)en/i, "\\1"
9 | # inflect.irregular "person", "people"
10 | # inflect.uncountable %w( fish sheep )
11 | # end
12 |
13 | # These inflection rules are supported but not enabled by default:
14 | # ActiveSupport::Inflector.inflections(:en) do |inflect|
15 | # inflect.acronym "RESTful"
16 | # end
17 |
--------------------------------------------------------------------------------
/ColorListAPI_rails/config/database.yml:
--------------------------------------------------------------------------------
1 | # SQLite. Versions 3.8.0 and up are supported.
2 | # gem install sqlite3
3 | #
4 | # Ensure the SQLite 3 gem is defined in your Gemfile
5 | # gem "sqlite3"
6 | #
7 | default: &default
8 | adapter: sqlite3
9 | pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
10 | timeout: 5000
11 |
12 | development:
13 | <<: *default
14 | database: db/development.sqlite3
15 |
16 | # Warning: The database defined as "test" will be erased and
17 | # re-generated from your development database when you run "rake".
18 | # Do not set this db to the same as development or production.
19 | test:
20 | <<: *default
21 | database: db/test.sqlite3
22 |
23 | production:
24 | <<: *default
25 | database: db/production.sqlite3
26 |
--------------------------------------------------------------------------------
/Cookies/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "jest": true
6 | },
7 | "extends": "eslint:recommended",
8 | "overrides": [
9 | ],
10 | "parserOptions": {
11 | "ecmaVersion": "latest",
12 | "sourceType": "module"
13 | },
14 | "rules": {
15 | "indent": [
16 | "error",
17 | 4
18 | ],
19 | "linebreak-style": [
20 | "error",
21 | "unix"
22 | ],
23 | "quotes": [
24 | "error",
25 | "single"
26 | ],
27 | "semi": [
28 | "error",
29 | "never"
30 | ],
31 | "react/prop-types": 0
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/ExpressIntro/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "jest": true
6 | },
7 | "extends": "eslint:recommended",
8 | "overrides": [
9 | ],
10 | "parserOptions": {
11 | "ecmaVersion": "latest",
12 | "sourceType": "module"
13 | },
14 | "rules": {
15 | "indent": [
16 | "error",
17 | 4
18 | ],
19 | "linebreak-style": [
20 | "error",
21 | "unix"
22 | ],
23 | "quotes": [
24 | "error",
25 | "single"
26 | ],
27 | "semi": [
28 | "error",
29 | "never"
30 | ],
31 | "react/prop-types": 0
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/ExpressRouting/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-undef
2 | module.exports = {
3 | 'env': {
4 | 'browser': true,
5 | 'es2021': true,
6 | 'amd': true
7 | },
8 | 'extends': 'eslint:recommended',
9 | 'overrides': [
10 | ],
11 | 'parserOptions': {
12 | 'ecmaVersion': 'latest',
13 | 'sourceType': 'script'
14 | },
15 | 'rules': {
16 | 'indent': [
17 | 'error',
18 | 4
19 | ],
20 | 'linebreak-style': [
21 | 'error',
22 | 'unix'
23 | ],
24 | 'quotes': [
25 | 'error',
26 | 'single'
27 | ],
28 | 'semi': [
29 | 'error',
30 | 'never'
31 | ]
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/ExpressMVCSimple/fly.toml:
--------------------------------------------------------------------------------
1 | # fly.toml app configuration file generated for zk-express-mvc-simple on 2025-04-08T15:43:23-04:00
2 | #
3 | # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
4 | #
5 |
6 | app = 'zk-express-mvc-simple'
7 | primary_region = 'ord'
8 |
9 | [build]
10 |
11 | [[mounts]]
12 | source = 'data'
13 | destination = '/data'
14 | auto_extend_size_threshold = 80
15 | auto_extend_size_increment = '1GB'
16 | auto_extend_size_limit = '10GB'
17 |
18 | [http_service]
19 | internal_port = 3000
20 | force_https = true
21 | auto_stop_machines = 'stop'
22 | auto_start_machines = true
23 | min_machines_running = 0
24 | processes = ['app']
25 |
26 | [[vm]]
27 | memory = '512mb'
28 | cpu_kind = 'shared'
29 | cpus = 1
30 |
--------------------------------------------------------------------------------
/FlaskDemo/all_routes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | All Routes
4 |
5 | These are all the routes supported by this server:
6 |
14 |
15 |
--------------------------------------------------------------------------------
/Cookies/PHP/lookForCookie.php:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | Look for Cookie
8 |
9 |
10 |
11 |
12 | Looking for cookie
13 |
14 | Hello, $nn. I see you've been to one of my other web pages.\n";
18 | } else {
19 | echo "Howdy. It looks like you're new around here.
";
20 | }
21 | ?>
22 |
23 |
24 |
25 |
2 |
3 | All Routes
4 |
5 | These are all the routes supported by this server:
6 |
14 |
15 |
--------------------------------------------------------------------------------
/ColorList3_routing/src/ColorList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Color from './Color'
3 |
4 | export default function ColorList({ colors = [], loading = false, message, onEditColor = f => f, update = f => f }) {
5 |
6 | function editClicked(color) {
7 | console.log(color)
8 | return onEditColor(color)
9 | }
10 |
11 |
12 | if (message) {
13 | return {message}
14 | } else if (loading) {
15 | return Loading ......
16 | } else if(!colors.length) {
17 | return No Colors Listed.
18 | }
19 | return (
20 |
21 | {
22 | colors.map(color => editClicked(color)} onColorRatingUpdated={(newValue) => update(color.id, newValue)} />)
23 | }
24 |
25 | )
26 | }
--------------------------------------------------------------------------------
/ColorList3_routing/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
15 | #updateForm {
16 | border: 1px solid black;
17 | padding: 7px;
18 | display: inline-block;
19 | }
20 |
21 | .colorBox {
22 | height: 50px;
23 | width: 100px;
24 | margin-right: 15px;
25 | display: inline-block;
26 | }
27 |
28 | #navBar a {
29 | margin: 15px;
30 | }
31 |
32 | #navBar {
33 | margin-bottom: 25px;
34 | padding: 5px;
35 | background-color:rgb(235, 235, 235)
36 | }
--------------------------------------------------------------------------------
/ColorListAPI_rails/db/seeds.rb:
--------------------------------------------------------------------------------
1 | # This file should contain all the record creation needed to seed the database with its default values.
2 | # The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup).
3 | #
4 | # Examples:
5 | #
6 | # movies = Movie.create([{ name: "Star Wars" }, { name: "Lord of the Rings" }])
7 | # Character.create(name: "Luke", movie: movies.first)
8 |
9 | Color.create(title: 'Ocean at noon', color: 0x029eb6, rating: 5, uuid: '0175d1f0-a8c6-41bf-8d02-df5734d829a4')
10 | Color.create(uuid: "83c7ba2f-7392-4d7d-9e23-35adbe186046",title: "Lawn",color:0x2534486, rating:3)
11 | Color.create(uuid: "a11e3995-b0bd-4d58-8c48-5e49ae7f7f23",title: "Bright red",color: 0x16711680,rating:2)
12 | Color.create(uuid: "49fef18c-475c-4ff7-b2de-7adfdbcbaa24",title: "Orange",color:0xca8102,rating: 0)
--------------------------------------------------------------------------------
/ColorList3_routing/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "jest": true
6 | },
7 | "extends": [
8 | "eslint:recommended",
9 | "plugin:react/recommended"
10 | ],
11 | "overrides": [
12 | ],
13 | "parserOptions": {
14 | "ecmaVersion": "latest",
15 | "sourceType": "module"
16 | },
17 | "plugins": [
18 | "react"
19 | ],
20 | "rules": {
21 | "indent": [
22 | "error",
23 | 2
24 | ],
25 | "linebreak-style": [
26 | "error",
27 | "unix"
28 | ],
29 | "quotes": [
30 | "error",
31 | "single"
32 | ],
33 | "semi": [
34 | "error",
35 | "never"
36 | ],
37 | "react/prop-types": 0
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/Bootstrap/example.scss:
--------------------------------------------------------------------------------
1 | /* These are just the examples from https://www.w3schools.com/sass
2 | *
3 | * There are many ways to install/run sass. Here is one:
4 | * npm install sass -g
5 | * sass example.scss
6 | */
7 |
8 | nav {
9 | ul {
10 | margin: 0;
11 | padding: 0;
12 | list-style: none;
13 | }
14 | li {
15 | display: inline-block;
16 | }
17 | a {
18 | display: block;
19 | padding: 6px 12px;
20 | text-decoration: none;
21 | }
22 | }
23 |
24 | .button-basic {
25 | border: none;
26 | padding: 15px 30px;
27 | text-align: center;
28 | font-size: 16px;
29 | cursor: pointer;
30 | }
31 |
32 | .button-report {
33 | @extend .button-basic;
34 | background-color: red;
35 | }
36 |
37 | .button-submit {
38 | @extend .button-basic;
39 | background-color: green;
40 | color: white;
41 | }
--------------------------------------------------------------------------------
/ReactRecipe/stateUsingClosures.js:
--------------------------------------------------------------------------------
1 | // Gives a rough idea of how the React useState hook might work.
2 | // (In reality, it is much more complex.)
3 | // Other articles:
4 | // https://dev.to/lizraeli/implementing-the-usestate-hook-3nd7
5 | // https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba
6 |
7 | let makeState = function(initialValue) {
8 |
9 | let current = initialValue;
10 |
11 | let get = () => current;
12 |
13 | let update = (newValue) => {
14 | current = newValue;
15 | }
16 |
17 | return [get, update];
18 | };
19 |
20 | console.log("Welcome!");
21 |
22 | let [getTemp, setTemp] = makeState(55);
23 | let [getHumidity, setHumidity] = makeState(44.5);
24 |
25 | console.log(`Current conditions: ${getTemp()}, ${getHumidity()}`)
26 |
27 | setTemp(72);
28 | setHumidity(12);
29 |
30 | console.log(`New conditions: ${getTemp()}, ${getHumidity()}`)
--------------------------------------------------------------------------------
/ExpressIntro/simple_sendHTML.js:
--------------------------------------------------------------------------------
1 | // Demonstrates a couple of routes using send only
2 |
3 | // Express documentation: https://expressjs.com/en/api.html
4 |
5 | /* Import the express npm module */
6 | const express = require('express')
7 |
8 | /* Instantiate a server object*/
9 | const app = express()
10 | const port = 3000
11 |
12 | /* Sample route returning a simple, static message.
13 | #send() simply sends the string to the client.
14 | (Yes, I "cheated" by not sending a complete HTML file.)
15 | */
16 | app.get('/', (req, res) => res.send('Root
Hello World!
(This is the root route)'))
17 |
18 | /* Another sample route returning a simple, static message. */
19 | app.get('/about', (req, res) => res.send('About
This is an absurdly simple express server with two routes.'))
20 |
21 | /* Launch the server */
22 | app.listen(port, () => console.log(`Example app listening on port ${port}!`))
--------------------------------------------------------------------------------
/ExpressIntro/multForm.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
21 |
22 |
23 |
24 | Multiplication Table
25 |
26 | 
10 |