Skip to content

Commit 100ae4d

Browse files
HansUXdevHansUXdev
committed
update read me and add more in chp2
1 parent a8b04d9 commit 100ae4d

File tree

13 files changed

+269
-2
lines changed

13 files changed

+269
-2
lines changed

‎01-Reteaching-JavaScript/01-History-of-JS/readme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,4 +109,4 @@ Instead of Cordova, Ionic or NativeScript, compiling to run natively with a wrap
109109

110110
## Thoughts or Comments?
111111

112-
I hope you enjoyed reading this and don't take any of my criticisms personally (unless you are my uncle, in which case it's just fun banter). I really want to hear your thought! Especially if you were part of JavaScript / ECMAScript's history as I didn't start using it until 2013 and wasn't really full-stack until 2015–2016. I tried to do the best research I could.
112+
I hope you enjoyed reading this and don't take any of my criticisms personally (unless you are my uncle, in which case it's just fun banter). I really want to hear your thought! Especially if you were part of JavaScript / ECMAScript's history as I didn't start using it until 2013 and wasn't really full-stack until 2015–2016. I tried to do the best research I could.

‎02-ClientVServer/01-HTTP/code/readHTML.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const http = require('http')
2+
const fs = require('fs');
3+
const PORT = 7000;
4+
http.createServer(function (request, response) {
5+
if (request.url == '/') {
6+
fs.readFile('index.html', function(err, data) {
7+
response.writeHead(200, {'Content-Type': 'text/html'});
8+
response.write(data);
9+
return response.end();
10+
});
11+
}
12+
else{
13+
return response.end('Invalid request');
14+
}
15+
}).listen(PORT);

‎02-ClientVServer/02-server-side-templating/code/HTTPiterator.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
3+
const HTML = (error="unexpected") => {
4+
return `<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>ERROR</title>
10+
</head>
11+
<body>
12+
${error}
13+
</body>
14+
</html>`;
15+
}
16+
17+
const writeHTML = (HTML) => {
18+
response.writeHead(200,{
19+
'Content-Type': 'text/html',
20+
'Content-Length': HTML.length,
21+
'Expires': new Date().toUTCString()
22+
})
23+
}
24+
25+
26+
const server = (route = "/", port ) => {
27+
//
28+
http.createServer(
29+
(request, response)=>{
30+
if(request.url == route){
31+
writeHTML(HTML)
32+
response.end(HOME)
33+
}
34+
else{
35+
writeHTML(HTML)
36+
response.end(HTML)
37+
}
38+
}
39+
).listen(port);
40+
//
41+
}
42+
43+
44+
server("/")

‎02-ClientVServer/02-server-side-templating/code/components/nav.mjs

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// export default nav = (logo="https://hansmcmurdy.com/JavaScript-First/logo.svg") => {
2+
// }
3+
4+
5+
6+
7+
export const Nav = (content, logo="https://hansmcmurdy.com/JavaScript-First/logo.svg") => {
8+
return `
9+
<div class="collapse" id="JSFirst">
10+
<div class="bg-dark p-4">
11+
<h5 class="text-white h4"> #JavaScriptFirst is an online Book </h5>
12+
<span class="text-muted">
13+
Learn more about the book here: <a class="" href="https://hansmcmurdy.com/JavaScript-First/">#JavaScriptFirst</a>
14+
</span>
15+
</div>
16+
</div>
17+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
18+
<div class="container-fluid">
19+
<a class="navbar-brand" href="#" type="button" data-toggle="collapse" data-target="#JSFirst" aria-controls="JSFirst" aria-expanded="false" aria-label="Toggle navigation">
20+
<img src=${logo} width="30" height="30" alt="" loading="lazy">
21+
</a>
22+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
23+
<span class="navbar-toggler-icon"></span>
24+
</button>
25+
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
26+
<div class="navbar-nav">
27+
${content}
28+
</div>
29+
</div>
30+
</div>
31+
</nav>`;
32+
};
33+
34+
35+
// `<nav class="navbar navbar-expand-lg navbar-light bg-light">
36+
// <div class="container-fluid">
37+
// <a class="navbar-brand" href="#">
38+
// <img src=${logo} width="30" height="30" alt="" loading="lazy">
39+
// </a>
40+
// <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="#navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
41+
// <span class="navbar-toggler-icon"></span>
42+
// </button>
43+
// <div class="collapse navbar-collapse" id="#navbarNavAltMarkup">
44+
// <div class="navbar-nav">
45+
// ${content}
46+
// </div>
47+
// </div>
48+
// </div>
49+
// </nav>`;
50+
51+
52+
export const NavLinks = (data) => {
53+
return data.map(links => `
54+
<li class="nav-item">
55+
<a class="nav-link" href="#">${links.name}</a>
56+
</li>
57+
`).join('');
58+
};
59+
60+
// For Demo purposes
61+
export const homepages = [
62+
{
63+
name: 'Home',
64+
url: "/",
65+
icon: ""
66+
},
67+
{
68+
name: 'About',
69+
url: "/",
70+
icon: "fa-user"
71+
},
72+
{
73+
name: 'Portfolio',
74+
url: "/",
75+
icon: "fa-th"
76+
},
77+
{
78+
name: 'Contact',
79+
url: "/",
80+
icon: "fa-envelope"
81+
}
82+
];

‎02-ClientVServer/02-server-side-templating/code/index.mjs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Nav, NavLinks, homepages} from './components/nav.mjs';
2+
let links = NavLinks(homepages)
3+
4+
// console.log('====================================');
5+
// console.log( Nav(links) );
6+
// console.log('====================================');
7+
8+
9+
import Server from './layout/main.mjs';
10+
import {HTML,writeHTML} from './layout/main.mjs';
11+
12+
const home = HTML(`${ Nav(links)}`);
13+
14+
Server('/',7000,home)

‎02-ClientVServer/02-server-side-templating/code/layout/main.mjs

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import http from 'http';
2+
3+
// <title>Bootstrap Site</title>
4+
export const HTML = (header,body) => {
5+
return `<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
${header}
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
12+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
13+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
14+
</head>
15+
<body>
16+
${body}
17+
18+
</body>
19+
</html>`;
20+
}
21+
22+
// export const writeHeader = () => {
23+
// if (request.url == '/') {
24+
// // read a file and
25+
// fs.readFile('${1:index}', function(err, data) {
26+
// response.writeHead(200, {'Content-Type': 'text/${2:html}'});
27+
// response.write(data);
28+
// return response.end();
29+
// });
30+
// }
31+
// }
32+
33+
34+
/**
35+
* @export
36+
* @param {string} [route="/"]
37+
* @param {number} [port=8000]
38+
* @param {*} HTML - is a callback that returns an html string
39+
*/
40+
export default function Server(route = "/", port=8000, template ) {
41+
//
42+
http.createServer(
43+
(request, response)=>{
44+
if(request.url == route){
45+
response.writeHead(200,{
46+
'Content-Type': 'text/html',
47+
'Content-Length': template.length,
48+
'Expires': new Date().toUTCString()
49+
})
50+
response.end(template)
51+
}
52+
else{
53+
// writeHTML()
54+
response.end("nope")
55+
}
56+
}
57+
).listen(port);
58+
//
59+
};

‎02-ClientVServer/02-server-side-templating/code/package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎02-ClientVServer/02-server-side-templating/code/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "02-server-side-templating",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"dependencies": {
7+
"esm": "^3.2.25"
8+
},
9+
"devDependencies": {},
10+
"scripts": {
11+
"test": "echo \"Error: no test specified\" && exit 1",
12+
"start": "nodemon --experimental-modules index.mjs"
13+
},
14+
"keywords": [],
15+
"author": "",
16+
"license": "ISC"
17+
}

‎02-ClientVServer/02-server-side-templating/package-lock.json

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎02-ClientVServer/02-server-side-templating/readme.md

Whitespace-only changes.

0 commit comments

Comments
 (0)