Skip to content

Commit 14450bb

Browse files
HansUXdevHansUXdev
committed
update styles
1 parent be91488 commit 14450bb

File tree

7 files changed

+252
-39
lines changed

7 files changed

+252
-39
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ lerna-debug.log*
1717

1818
# Diagnostic reports (https://nodejs.org/api/report.html)
1919
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
20+
tempCodeRunnerFile.md
2021

2122
# Runtime data
2223
pids

‎.vscode/launch.json

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎02-ClientVServer/04-HTTPS/readme.md

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ theme : "night"
77
transition: "slide"
88
highlightTheme: "monokai"
99
slideNumber: true
10-
loop: true
11-
autoSlide: 5000
10+
# loop: true
11+
autoSlide: 50000
1212
# openButton: false
1313
enableMenu: false
1414
# controlsLayout: 'edges'
@@ -28,17 +28,16 @@ It stands for Hypertext Transfer Protocol **Secure** {.fragment .current-only }
2828

2929
Websites without it should are also demoted in **search engine optiminatization SEO** {.fragment .current-only }
3030

31-
32-
33-
---
34-
35-
36-
3731
---
3832

3933

4034
### Creating keys, certificates and decrypting them
4135

36+
37+
Check if openssl installed, `openssl version -a`. {.fragment .current-only }
38+
39+
40+
4241
:::block
4342
```bash
4443
openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
@@ -48,7 +47,7 @@ openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
4847

4948
![](https://user-images.githubusercontent.com/5007073/91366577-fc3bd600-e7b8-11ea-8ff4-316ef3644665.png) {.fragment}
5049

51-
I used the term, "open" {.fragement}
50+
5251

5352

5453
---

‎02-ClientVServer/readme.md

Lines changed: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,79 @@
1-
# About
1+
---
2+
theme : "night"
3+
transition: "slide"
4+
highlightTheme: "monokai"
5+
logoImg: "logo.png"
6+
slideNumber: false
7+
title: "JavaScript-Reintroduction"
8+
---
9+
10+
### About
211
This chapter, you will learn strong fundementals understanding of HTTP & HTML using Node.js and ES6 baked in.
312

4-
# Prior Knowledge
13+
---
14+
15+
### Prior Knowledge
516
<!-- These are to Aid quality node applications -->
617
1. Explain & Identify Synchronous functions
718
2. Explain & Identify Asynchronous functions
819
3. Explain node.js and greater ecosystem with NPM.
920

21+
---
1022

11-
12-
# Student Learning Objectives
23+
### Student Learning Objectives
1324
Students should be able to:
14-
2. Distinguish between the client and the server.
15-
16-
3. Describe what HTTP is and why it was created.
17-
4. Explain what HTML is and why it was created.
18-
5. Identify HTML basic syntax and how to check it.
19-
6. Explain how HTML is sent from a server to the browser using HTTP
20-
7. Demonstrate how to use node's `fs` method to read HTML and `http` method to create a server.
21-
8. Create a [simple functions] that uses [template literals] to compose html layouts.
25+
1. Distinguish between the client and the server.
26+
2. Describe what HTTP is and why it was created.
27+
3. Explain what HTML is and why it was created.
28+
4. Identify HTML basic syntax and how to check it.
29+
5. Explain how HTML is sent from a server to the browser using HTTP
30+
6. Demonstrate how to use node's `fs` method to read HTML and `http` method to create a server.
31+
7. Create a [simple functions] that uses [template literals] to compose html layouts.
2232
<!-- 7. Compare and contrast
2333
8. Write -->
2434

35+
---
36+
37+
### [State Standards](https://cms.azed.gov/home/GetDocumentFile?id=5a6b7c473217e10b806ce060) Utilized
38+
39+
:::block
40+
* IDENTIFY INTERNET PROTOCOLS AND OPERATIONS
41+
- 9.1 Explain cloud-based computing and content delivery networks
42+
- 9.2 Identify the components and functions of the internet (e.g., HTTP, HTTPS, FTP, IP addresses, and IMAP)
43+
- 9.3 Identify services run by web servers [e.g., scripting languages (client- and server-side scripting), databases, and media]
44+
- 9.4 Identify performance issues (e.g., bandwidth, internet connection types, pages loading slowly, resolution, and size graphics)
45+
- 9.5 Differentiate among shared hosting, dedicated server, and virtual private server (VPS)
46+
- 9.6 Identify Internet of Things (IOT) and common communication interfaces (e.g., Bluetooth, NFC, Wi-Fi, and LTE)
47+
{.fragment .current-only }
48+
:::
49+
50+
51+
---
52+
2553
# Projects
2654
1. Build a server with node.js, no frameworks
2755

28-
56+
---
2957

3058
## Resources:
3159
* [Async Gen](https://www.smashingmagazine.com/2016/08/getting-started-koa-2-async-functions/)
3260
* [async gen 2](https://www.sitepoint.com/asynchronous-apis-using-fetch-api-es6-generators/)
3361

62+
--
63+
3464
* Medium Articles:
3565
1. Build your own express.js
3666
- [Part 1](https://devtools.tech/build-your-own-express-js-part-one/)
3767
- [Part 2](https://devtools.tech/build-your-own-express-js-part-two/?ref=code-devtools-tec)
3868

69+
--
3970

4071
**Basic Videos**
4172
1. [Buffers, Streams, Pipes and Files](https://www.youtube.com/watch?v=8Vmvsn5JhVY)
4273
2. [Async Javascript - Callbacks, Promises, Async Await](https://www.youtube.com/watch?v=_8gHHBlbziw)
4374

75+
--
76+
4477
**Advanced Topic Videos**
4578
- [how to correctly stream a file over http](https://www.youtube.com/watch?v=aTEDCotcn20)
4679
- [Async Iterators: A New Future for Streams - Stephen Belanger](https://www.youtube.com/watch?v=YVdw1MDHVZs)

‎package-lock.json

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

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,10 @@
1919
"homepage": "https://github.com/HansUXdev/JavaScript-First#readme",
2020
"devDependencies": {
2121
"lerna": "^3.22.1"
22+
},
23+
"dependencies": {
24+
"bootstrap": "^5.0.0-alpha1",
25+
"node-fetch": "^2.6.0",
26+
"rfs": "^9.0.3"
2227
}
2328
}

‎theme.scss

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
// @import "../node_modules/bootstrap/scss/bootstrap";
2+
@import "../node_modules/rfs/scss";
3+
4+
// Required
5+
@import "../node_modules/bootstrap/scss/functions";
6+
@import "../node_modules/bootstrap/scss/variables";
7+
@import "../node_modules/bootstrap/scss/mixins";
8+
9+
// Optional
10+
// @import "../node_modules/bootstrap/scss/reboot";
11+
// @import "../node_modules/bootstrap/scss/type";
12+
// @import "../node_modules/bootstrap/scss/images";
13+
// @import "../node_modules/bootstrap/scss/code";
14+
@import "../node_modules/bootstrap/scss/grid";
15+
@import "../node_modules/bootstrap/scss/containers";
16+
@import"../node_modules/bootstrap/scss/bootstrap-utilities.scss";
17+
18+
////
19+
/// @group breakpoints
20+
////
21+
22+
/// small
23+
$small: 320px !default;
24+
/// large
25+
$large: 1024px !default;
26+
/// breakpoint map
27+
$boostrap: (
28+
small : 480px,
29+
medium: 800px,
30+
large : 1024px
31+
) !default;
32+
///
33+
$foundation: (
34+
small: 0,
35+
medium: 640px,
36+
large: 1024px,
37+
xlarge: 1200px,
38+
xxlarge: 1440px,
39+
) !default;
40+
41+
$custom: (
42+
xs : 480px,
43+
sm: 640px,
44+
md: 800px,
45+
lg : 1024px,
46+
xl: 1200px,
47+
xxl: 1440px,
48+
) !default;
49+
50+
// The mixin now takes a $min and $max attribute, which both default to a value of zero.
51+
@mixin bp($class) {
52+
// We check the type of value of the first passed it attribute, which in this case in $min. This helps us identify if we’re passing in a Bootstrap class or a custom width.
53+
$type: type-of($class);
54+
55+
// If $min is a string the mixin assumes you’re passing
56+
// in xs, sm, md, or lg as the attribute and it would execute the previous mixin cod
57+
@if $type == string {
58+
@if $class == xs {
59+
@media (max-width: 480px) { @content; }
60+
}
61+
@else if $class == sm {
62+
@media (min-width: 640px) { @content; }
63+
}
64+
@else if $class == md {
65+
@media (min-width: 800px) { @content; }
66+
}
67+
@else if $class == lg {
68+
@media (min-width: 1024px) { @content; }
69+
}
70+
@else if $class == xlg {
71+
@media (min-width: 1200px) { @content; }
72+
}
73+
@else if $class == xxlg {
74+
@media (min-width: 1440px) { @content; }
75+
}
76+
@else {
77+
@warn "Breakpoint mixin supports: xs, sm, md, lg";
78+
}
79+
}
80+
}
81+
82+
// The mixin now takes a $min and $max attribute, which both default to a value of zero.
83+
@mixin mq($min: 0, $max: 0) {
84+
$type: type-of($min);
85+
//// Check id the type is a number
86+
@if $type == number {
87+
$query: "all" !default;
88+
@if $min != 0 and $max != 0 {
89+
$query: "(min-width: #{$min}) and (max-width: #{$max})";
90+
}
91+
@else if $min != 0 and $max == 0 {
92+
$query: "(min-width: #{$min})";
93+
}
94+
@else if $min == 0 and $max != 0 {
95+
$query: "(max-width: #{$max})";
96+
}
97+
@media #{$query} {
98+
@content;
99+
}
100+
}
101+
}
102+
103+
104+
105+
.language-javascript > .line.focus{
106+
background: transparent !important;
107+
// font-size: xx-large;
108+
@include rfs(2rem, font-size);
109+
// @include rfs(4rem, font-size);
110+
color: #5cc4ea;
111+
}
112+
.reveal ul{ margin:0 !important;}
113+
114+
115+
116+
117+
118+
/* Fix Issue of hidden content still taking up space */
119+
.fragment.fade-in-then-out:not(.current-fragment) {
120+
display:none;
121+
}
122+
// Current Slide
123+
.present{
124+
.flex-slide{display:flex}
125+
.column {display: flex;
126+
flex-direction: column;
127+
flex-basis: 100%;
128+
flex: 4;
129+
}
130+
131+
.double-column {
132+
display: flex;
133+
flex-direction: column;
134+
flex-basis: 100%;
135+
flex: 1;
136+
}
137+
h1, h2, h3, h4, h5, h6, p {
138+
color:white;
139+
}
140+
141+
img{
142+
@include bp(sm){
143+
max-height: 15rem;
144+
}
145+
@include bp(lg){
146+
max-height: 15rem;
147+
}
148+
}
149+
.flex-slide p.fragment{
150+
// @include font-size(1rem);
151+
@include rfs(2rem, font-size)
152+
}
153+
}
154+
155+
// #logo{}
156+
.reveal.slide{
157+
@extend .container-fluid;
158+
.slides{
159+
section.present{}
160+
}
161+
}

0 commit comments

Comments
 (0)