-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
194 lines (184 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<title>functional programming</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="styles/master.css">
<script type="module" src="scripts/application.js"></script>
<script src="scripts/vpdims.js"></script>
<script defer src="https://unpkg.com/ionicons@4.4.8/dist/ionicons.js"></script>
</head>
<body>
<header>
<menu id="meta">
<ul class="stack">
<li><a href=#><ion-icon name="menu"></ion-icon></a></li>
<li><a href=#><ion-icon name="settings"></ion-icon></a></li>
<li><a href=#><ion-icon name="hammer"></ion-icon></a></li>
<li><a href=#><ion-icon name="logo-github"></ion-icon></a></li>
</ul>
</menu>
<div id="logo">
<h1 id="name"><a href=#>Flexbox<span id="dot">·</span>Shell</a></h1>
<h2 id="byline">mobile-<span>f</span>irst responsive layout</h2><!-- fixes f in font displays wide width -->
</div>
<nav>
<ul class="stack" id="nav">
<li><a href=#><span class="fas fa-bars"></span></a></li>
<li><a href=#><span class="fas fa-home"></span>HOME</a></li>
<li><a href=#><span class="fas fa-coffee"></span>GUIDES</a></li>
<li><a href=#><span class="fas fa-wrench"></span>TOOLS</a></li>
<li><a href=#><span class="fas fa-chalkboard-teacher"></span>DISCUSS</a></li>
<li><a href=#><span class="fas fa-user"></span>ABOUT</a></li>
</ul>
</nav>
</header>
<main><!-- semantics and flexbox container -->
<article>
<h1>This is a refactor of a CODEPEN: <a href="https://codepen.io/StrengthandFreedom/pen/zEbwpM/?editors=0010" target="_blank">Get Viewport Dimensions Version 2 (complete)</a> by <a href="https://codepen.io/StrengthandFreedom/" target="_blank">David</a></h1>
<h2>The original article is: <a href="https://techstacker.com/building-a-get-viewport-dimensions-app-with-vanilla/ttDuoXKkNyx6Yqz5X" target="_blank">Building a “Get Viewport Dimensions” App with Vanilla JavaScript</a> by <a href="https://techstacker.com/users/show/u/david" target="_blank">David at TechStacker</a>.</h2>
<p>This was an outstanding script and post. I especially appreciated how David (the contributor) walks the reader step-by-step in very clear language. First with just the minimum basics to get the script running then an optimized version which gives us a first taste (if you're a novice) of functional programming with throttling decorators for running asynchronous calls. There was nothing wrong with the script from my point of view but I refactored it to add functionality and style. I also prefer wrapping larger chunks of code into smaller ones. This leads me to create many more functions and objects for easier maintenance and self-commenting. The refactored script reflects this.</p>
<p>Added functionality are names of device targets which can easily be modified or expanded by editing the <code>getTarget</code> function. This can be removed by editing the <code>getData</code> and <code>setData</code> functions. Shell container styles can be edited by modifying <code>#viewportdata</code>, <code>#dims</code>, and <code>#target</code> in the CSS file</p>
<p>Other added functionality is the ability to stop the script by clicking once on the dims when they display. It works by wrapping the dims and target subcontainers (shell in the Javascript) with an anchor tag (displayed as a block) and adding a very basic <code>onclick</code> event that calls a function <code>endTask</code>. That function uses <code>removeEventListener</code> to remove the <code>addEventListener</code> that invokes <code>throttleSetView</code>.</p>
<p>Everything in header and below is just an HTML template used to demonstrate how this script might perform in a populated web page.</p>
</article>
<aside>
<h1>This is an ASIDE element with an H1 element</h1>
<h2>This is a subtitle with an H2 element</h2>
<summary>This is a SUMMARY element. Below is a naked UL element.</summary>
<ul>
<li>This is a plain text example.</li>
<li><a href=#>This is an A link example.</a></li>
<li>This is a <small>SMALL text</small> example.</li>
<li>This is an <i>ITALIC text</i> example.</li>
<li>This is an <em>EM text</em> example.</li>
<li>This is a <bold>BOLD text</bold> example.</li>
<li>This is a <strong>STRONG text</strong> example.</li>
<li>This is a <mark>MARK text</mark> example.</li>
</ul>
<p>This is a P element.</p>
<q>This is a short Q element.</q>
<p>This is another P element. An HR element always separate Posts within a major structure.</p>
<hr>
<h2>This is a second post with an H2 element</h2>
<p>This is a P element.</p>
<p>This is another P element.</p>
</aside>
<aside>
<h1>This is an H1 element inside an Aside container</h1>
<h2>This is an H2 element</h2>
<h3>This is an H3 element</h3>
<h4>This is an H4 element</h4>
<h5>This is an H5 element</h5>
<h6>This is an H6 element</h6>
<p>This is a P element.</p>
<p>This is another P element.</p>
<dl>
<dt>This is a DT title</dt>
<dd><a href=#>link 1</a></dd>
<dd><a href=#>link 2</a></dd>
</dl>
</aside>
</main>
<footer>
<section>
<dl>
<dt>Web Design</dt>
<dd><a href="https://developers.google.com/web/" target="_blank">Google Web Fundamentals</a></dd>
<dd><a href="https://frontendmasters.com/books/front-end-handbook/2017/" target="_blank">Front-End Developer Handbook 2017</a></dd>
<dd><a href="https://www.mozilla.org/en-US/technology/" target="_blank">Mozilla Technology</a></dd>
<dd><a href="https://www.smashingmagazine.com" target="_blank">lSmashing Magazine</a></dd>
<dd><a href="https://www.khanacademy.org" target="_blank"><strong>KHAN</strong>ACADEMY</a></dd>
<dd><a href="https://internetingishard.com" target="_blank">link 3</a></dd>
<dd><a href="https://dev.to/" target="_blank">dev.to</a></dd>
</dl>
<dl>
<dt>HTML and CSS</dt>
<dd><a href="https://learn.shayhowe.com" target="_blank">Learn to Code HTML & CSS</a></dd>
<dd><a href="wwwhttp://cssreference.io" target="_blank>link">cssreference.io</a></dd>
<dd><a href="http://adamschwartz.co/magic-of-css/" target="_blank">MAGIC OF CSS</a></dd>
<dd><a href="https://css-tricks.com" target="_blank">CSS-TRICKS</a></dd>
<dd><a href="https://internetingishard.com" target="_blank">INTERNETING IS HARD</a></dd>
<dd><a href="https://github.com/AllThingsSmitty/css-protips" target="_blank">CSS Protips</a></dd>
<dd><a href="https://refactoring.guru/" target="_blank">Refactoring Guru</a></dd>
<dd><a href=# target="_blank">link 2</a></dd>
</dl>
<dl>
<dt>Functional Javascript</dt>
<dd><a href="http://javascript.info" target="_blank">The Modern JavaScript Tutorial</a></dd>
<dd><a href="https://leanpub.com/javascriptallongesix" target="_blank">JavaScript Allonge</a></dd>
<dd><a href="https://github.com/getify/Functional-Light-JS" target="_blank">Functional Light</a></dd>
<dd><a href="http://speakingjs.com/es5/index.html" target="_blank">Speaking JavaScript</a></dd>
<dd><a href="https://leanpub.com/exploring-es6/" target="_blank">Exploring ES6</a></dd>
<dd><a href="https://github.com/getify/You-Dont-Know-JS" target="_blank">You-Dont-Know-JS</a></dd>
<dd><a href="https://mostly-adequate.gitbooks.io/mostly-adequate-guide" target="_blank">Professor Frisby's Mostly Adequate Guide to Functional Programming</a></dd>
</dl>
<dl>
<dt>GitHUb Repos</dt>
<dd><a href="https://github.com/sindresorhus/awesome" target="_blank">Awesome List</a></dd>
<dd><a href="https://frontendmasters.com/books/front-end-handbook/2017/" target="_blank">Front-End Developer Handbook 2017</a></dd>
<dd><a href="https://github.com/you-dont-need/You-Dont-Need.com" target="_blank">You-Dont-Need.com</a></dd>
<dd><a href="https://github.com/collections/design-essentials" target="_blank">GitHub Design essentials</a></dd>
<dd><a href="https://opensource.com/tags/javascript" target="_blank">30 seconds of code</a></dd>
<dd><a href="https://github.com/dkraczkowski/dom.js" target="_blank">domjs</a></dd>
<dd><a href="https://github.com/georapbox/jsEssentials" target="_blank">jsEssentials</a></dd>
<dd><a href="https://github.com/thedaviddias/Front-End-Checklist" target="_blank">Front-End-Checklist</a></dd>
<dd><a href="https://github.com/thedaviddias/Front-End-Checklist" target="_blank">Front-End-Checklist</a></dd>
<dd><a href="https://github.com/thedaviddias/Front-End-Checklist" target="_blank">Front-End-Checklist</a></dd>
</dl>
<dl>
<dt>Web Standards</dt>
<dd><a href="https://www.w3.org" target="_blank">World Wide Web Consortium (W3C)</a></dd>
<dd><a href="https://whatwg.org/" target="_blank">WHATWG Web Standards</a></dd>
<dd><a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">Standard ECMA-262</a></dd>
<dd><a href="wwwhttps://www.w3.org/DOM/" target="_blank">W3C Document Object Model</a></dd>
<dd><a href=https://www.khronos.org/webgl/ target="_blank">KHRONOS WebGL</a></dd>
<dd><a href=http://json-schema.org target="_blank">JSON Schema</a></dd>
</dl>
<dl>
<dt>People to follow</dt>
<dd><a href="https://medium.com" target="_blank">Medium</a></dd>
<dd><a href="https://medium.com/@_ericelliott" target="_blank">Eric Elliot @Medium</a></dd>
<dd><a href="http://2ality.com" target="_blank">2ality (Axel Rauschmayer)</a></dd>
<dd><a href="http://lea.verou.me" target="_blank">LEA VEROU</a></dd>
<dd><a href="https://alistapart.com" target="_blank">A LIST APART</a></dd>
<dd><a href="https://meyerweb.com" target="_blank">meyerweb.com</a></dd>
<dd><a href="https://www.crockford.com" target="_blank">Douglas Crockford's World Wide Web</a></dd>
<dd><a href="https://24ways.org" target="_blank">24 WAYS</a></dd>
</dl>
<dl>
<dt>Online Tools</dt>
<dd><a href="https://codepen.io" target="_blank">CODEPEN</a></dd>
<dd><a href="https://jsfiddle.net" target="_blank">JSFiddle</a></dd>
<dd><a href="https://plnkr.co" target="_blank">Plunker</a></dd>
<dd><a href="https://jsoneditoronline.org" target="_blank">JSON Online Editor</a></dd>
<dd><a href="https://www.freeformatter.com" target="_blank">FREEFORMATTER.COM</a></dd>
<dd><a href="https://autoprefixer.github.io" target="_blank">Autoprefixer CSS</a></dd>
<dd><a href="https://github.com/" target="_blank">GitHub</a></dd>
<dd><a href=# target="_blank">link</a></dd>
</dl>
</section>
<hr>
<menu id="social">
<ul class="stack">
<li><a href=#><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href=#><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href=#><ion-icon name="logo-reddit"></ion-icon></a></li>
<li><a href=#><ion-icon name="logo-linkedin"></ion-icon></a></li>
<li><a href=#><ion-icon name="logo-github"></ion-icon></a></li>
</ul>
</menu>
<div><small id="copyright">© 2019 <a href="https://codepen.io/" target="_blank">jules manson</a></small></div>
</footer>
</body></html>
<!--
EXTERNAL RESOURCES AND NOTES
<script defer src="https://unpkg.com/ionicons@4.4.8/dist/ionicons.js"></script>
Normalize
Autoprefixer
http://getskeleton.com/ (@media)
https://www.invisionapp.com/inside-design/designers-favorite-typefaces/ (fonts)
https://fontawesome.com/ (icons)
-->