Skip to content

Commit 034b640

Browse files
author
Walle Cyril
committed
finish html streaming slide show
1 parent 536933e commit 034b640

3 files changed

Lines changed: 109 additions & 51 deletions

File tree

‎general/html-streaming/slide-show/css.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
section {
3+
position: absolute;
4+
left: 0;
5+
right: 0;
6+
}
7+
8+
section:last-of-type {
9+
animation: comin 1.4s ease 0s;
10+
left: 0;
11+
opacity: 1;
12+
}
13+
14+
@keyframes comin {
15+
0% {
16+
left: 100%;
17+
}
18+
100% {
19+
left: 0;
20+
}
21+
}
22+
23+
section:not(:last-of-type) {
24+
animation: comout 1.4s ease 0s;
25+
left: -100%;
26+
opacity: 0;
27+
}
28+
29+
@keyframes comout {
30+
0% {
31+
left: 0;
32+
opacity: 1;
33+
}
34+
100% {
35+
left: -100%;
36+
opacity: 0;
37+
}
38+
}
39+
body {
40+
margin: 30px;
41+
font-size: 24px;
42+
text-align: center;
43+
}

‎general/html-streaming/slide-show/headLoaded.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
var headLoaded = Date.now();
2+
document.addEventListener("DOMContentLoaded", function() {
3+
console.log((Date.now() - headLoaded) / 1000);
4+
});

‎general/html-streaming/slide-show/slide-show.js‎

Lines changed: 62 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,31 @@
11
"use strict";
22

3+
const fs = require(`fs`);
34
const express = require(`express`);
45
const app = express();
56

7+
68
const PORT = 8080;
79
const TIME_OUT_LIMIT = 1000 * 60 * 60;
810

11+
const css = fs.readFileSync(`./slide-show/css.css`);
12+
13+
const headLoaded = fs.readFileSync(`./slide-show/headLoaded.js`);
14+
15+
const withSVG = fs.readFileSync(`./diagrams/with.svg`);
16+
const withoutSVG = fs.readFileSync(`./diagrams/without.svg`);
917

1018
const htmlStart = `<!doctype html>
1119
<html lang="en">
1220
<head>
1321
<meta charset="utf-8">
1422
<title>html streaming</title>
1523
<meta name="viewport" content="width=device-width">
16-
<style>
17-
18-
section {
19-
position: absolute;
20-
left: 0;
21-
right: 0;
22-
}
23-
24-
section:last-of-type {
25-
animation: comin 1.4s ease 0s;
26-
left: 0;
27-
opacity: 1;
28-
}
29-
30-
@keyframes comin {
31-
0% {
32-
left: 100%;
33-
}
34-
100% {
35-
left: 0;
36-
}
37-
}
38-
39-
section:not(:last-of-type) {
40-
animation: comout 1.4s ease 0s;
41-
left: -100%;
42-
opacity: 0;
43-
}
44-
45-
@keyframes comout {
46-
0% {
47-
left: 0;
48-
opacity: 1;
49-
}
50-
100% {
51-
left: -100%;
52-
opacity: 0;
53-
}
54-
}
55-
</style>
56-
<script>
57-
var headLoaded = Date.now();
58-
document.addEventListener("DOMContentLoaded", function() {
59-
console.log((Date.now() - headLoaded) / 1000);
60-
});
61-
</script>
24+
<style>${css}</style>
25+
<script>${headLoaded}</script>
6226
</head>
6327
<body>
64-
<h1>Viewer</h1>`;
28+
<h1>HTML Streaming</h1>`;
6529

6630
const htmlEnd = `
6731
</body>
@@ -76,13 +40,60 @@ const slides = [
7640
<p>presentation by Cyril Walle</p>
7741
</section>`,
7842
`<section>
79-
<h2>2</h2>
80-
<p>22222222222222</p>
43+
<h2>HTML Streaming</h2>
44+
<p>means the browsers start parsing before having it all</p>
45+
</section>`,
46+
`<section>
47+
<h2>Timing Controls</h2>
48+
<p>Control when a HTML tag is being displayed</p>
49+
</section>`,
50+
`<section>
51+
<h2>Real Time</h2>
52+
<p>Send data as it becomes available</p>
8153
</section>`,
8254
`<section>
83-
<h2>3</h2>
84-
<p>33333333333</p>
55+
<h2>Using CSS to hide previous values</h2>
56+
<p><pre><code>p:not(:last-of-type) {
57+
display: none;
58+
}</code></pre></p>
8559
</section>`,
60+
`<section>
61+
<h2>Using CSS to hide previous values</h2>
62+
<p><pre><code>p:not(:last-of-type) {
63+
display: none;
64+
}</code></pre></p>
65+
</section>`,
66+
`<section>
67+
<h2>HTML Streaming to send data as soon as possible</h2>
68+
<p>${withSVG}</p>
69+
</section>`,
70+
`<section>
71+
<h2>Without</h2>
72+
<p>${withoutSVG}</p>
73+
</section>`,
74+
`<section>
75+
<h2>Limitations</h2>
76+
<p>The page loading indicator keeps spinning.</p>
77+
<p>Service worker pass through is limited.</p>
78+
<p>Incompatibility with existing tools.</p>
79+
<p>CSS selector last-of-type appears buggy sometimes.</p>
80+
<p>Additional work to make inputs.</p>
81+
</section>`,
82+
`<section>
83+
<h2>Timeouts</h2>
84+
<p><code>location.href = location.href;</code></p><p><code>meta http-equiv="refresh" content="230"</code></p>
85+
<p><code>server.timeout = TIME_OUT_LIMIT;</code></p>
86+
</section>`,
87+
`<section>
88+
<h2>Sources</h2>
89+
<p><a href="https://www.ebayinc.com/stories/blogs/tech/async-fragments-rediscovering-progressive-html-rendering-with-marko/">https://www.ebayinc.com/stories/blogs/tech/async-fragments-rediscovering-progressive-html-rendering-with-marko/</a>
90+
</p><p><a href="https://stackoverflow.com/questions/42589522/why-is-facebooks-html-wrapped-inside-a-table-mobile-login-page">https://stackoverflow.com/questions/42589522/why-is-facebooks-html-wrapped-inside-a-table-mobile-login-page</a>
91+
</p><p><a href="https://stackoverflow.com/questions/49515634/css-last-of-type-does-not-match-while-still-loading">https://stackoverflow.com/questions/49515634/css-last-of-type-does-not-match-while-still-loading</a></p>
92+
</section>`,
93+
`<section>
94+
<h2>Thanks</h2>
95+
<p></p>
96+
</section>`
8697
];
8798
const subScribers = [];
8899
app.get(`/`,

0 commit comments

Comments
 (0)