forked from amykapernick/no_js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
209 lines (192 loc) · 11 KB
/
index.html
File metadata and controls
209 lines (192 loc) · 11 KB
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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="shortcut icon" href="img/no-js.ico">
<meta name="theme-color" content="#64ad66">
<title>No JS</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<header>
<img src="img/no-js.svg" class="logo" alt="No JS" />
<h1>This website does not need JavaScript</h1>
<nav>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#testimonials">Testimonials</a>
</li>
<li>
<a href="#faqs">FAQs</a>
</li>
<li>
<a href="#toggle">Toggle</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#carousel">Carousels</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2 class="sr-only">Intro</h2>
<p>When we build a website these days, there's a 110% chance that it's got some form of JavaScript on it. Whether it's a full framework, for animations, to trigger a popup or as a tracking script, JavaScript is all around us.</p>
<p>But what if I told you that you didn't have to use JavaScript at all? Not even as a build process? Thanks to updates in browser technologies, there's now a plethora of native browser features that allow building modern, functional websites, sans JavaScript.</p>
<p>So together, we'll build out a <strong>completely</strong> static website, a collection of HTML and CSS files, no tracking, no scripting, no servers, no third-party resources. Let's build a website the way we used to (but no marquees).</p>
</section>
<section id="testimonials">
<h2>Why JS is the worst!</h2>
<div class="testimonials">
<input type="radio" id="testimonial_1" name="testimonials" />
<label for="testimonial_1">Testimonial 1</label>
<blockquote>
<p>So many data breaches have been caused my malicious JavaScript. Having less of it would be better. There are $400 million dollars of data breaches because of JavaScript.</p>
<cite>Scott Helme</cite>
</blockquote>
<input type="radio" id="testimonial_2" name="testimonials" />
<label for="testimonial_2">Testimonial 2</label>
<blockquote>
<p>HTML and CSS are far superior programming languages</p>
<cite>Me</cite>
</blockquote>
<input type="radio" id="testimonial_3" name="testimonials" />
<label for="testimonial_3">Testimonial 3</label>
<blockquote>
<p>If all you have is a hammer, everything is a nail. People overcomplicate things that are easier with CSS because they think they JavaScript is the answer.</p>
<cite>Anton Ball</cite>
</blockquote>
<input type="radio" id="testimonial_4" name="testimonials" />
<label for="testimonial_4">Testimonial 4</label>
<blockquote>
<p>JavaScript sucks because it's not CSS. It's complicated and makes our websites slower.</p>
<cite>Mish Mannering</cite>
</blockquote>
<input type="radio" id="testimonial_5" name="testimonials" />
<label for="testimonial_5">Testimonial 5</label>
<blockquote>
<p>JavaScript sucks because it's powered by ADHD and bad coding practices.</p>
<cite>Hannes Lowette</cite>
</blockquote>
</div>
</section>
<section id="faqs" class="faqs">
<h2>Still not convinced?</h2>
<details>
<summary>Why is HTML better than JS?</summary>
<p>HTML functionality is built into browsers so most of the time if you can do something with HTML rather than loading in a bunch of JavaScript, you should.</p>
<p>Most HTML has much better browser support than JavaScript as well, and it's much easier to debug when something goes wrong.</p>
</details>
<details>
<summary>Why is CSS better than JS?</summary>
<p>CSS is built for styling and animation of our content and is much lighter-weight to use for dressing up our content than JavaScript. It can be parsed and rendered in our browsers much faster and when something goes wrong it fails more gracefully than JS which tends to break our entire page.</p>
</details>
<details>
<summary>Why does JS suck so much?</summary>
<ul>
<li><strong>Performance Variability:</strong> JavaScript execution performance can vary widely across different browsers and devices. This can lead to inconsistent user experiences and require developers to optimize their code for various environments.</li>
<li><strong>Security Concerns:</strong> Because JavaScript runs in the browser, it's exposed to potential security vulnerabilities like cross-site scripting (XSS) attacks. Developers need to be vigilant about input validation and escaping to prevent these types of security breaches.</li>
<li><strong>Limited Debugging Tools:</strong> While modern browsers have improved their debugging tools, debugging complex JavaScript applications can still be challenging. Debugging errors in asynchronous code, for example, can be time-consuming and require specialized tools.</li>
<li><strong>DOM Manipulation Complexity:</strong> Manipulating the Document Object Model (DOM) using JavaScript can be error-prone and lead to performance issues. Frequent DOM updates can slow down the rendering of a web page, impacting the user experience.</li>
<li><strong>Dependency Management:</strong> Managing dependencies in JavaScript projects can become unwieldy due to the wide variety of libraries and frameworks available. This can lead to issues with compatibility, version conflicts, and increased project complexity.</li>
</ul>
</details>
</section>
<section id="toggle">
<h2>Flick the Switch</h2>
<fieldset>
<div class="toggle">
<input id="off" type="radio" class="sr-only" name="switch" value="off" checked />
<label for="off">
Off
</label>
<input id="on" type="radio" class="sr-only" name="switch" value="on" />
<label for="on">
On
</label>
<span class="switch" aria-hidden="true"></span>
</div>
</fieldset>
</section>
<section id="contact">
<h2>Submit Feedback</h2>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="date">When did you first learn JS?</label>
<input type="date" id="date" name="date" required>
<label for="phone">Phone Number</label>
<input type="tel" name="phone" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
<label for="js_rating">How much do you know JavaScript?</label>
<input type="range" id="js_rating" name="js" min="0" max="10" step="1" list="js_skills" />
<datalist id="js_skills">
<option value="0">Never used it before</option>
<option value="2">Used it once or twice</option>
<option value="4">Can follow a tutorial</option>
<option value="6">Fine as long as it works</option>
<option value="8">Use it regularly</option>
<option value="10">I use JS for everything</option>
</datalist>
<button type="submit">Submit</button>
</form>
</section>
<section id="carousel">
<h2>Image Carousels</h2>
<div class="carousel">
<input type="radio" name="images" value="image_1" id="img_1" class="sr-only" checked />
<label for="img_1">Image 1</label>
<div class="image">
<img src="img/quokka_(1).jpg" alt="" />
</div>
<input type="radio" name="images" value="image_2" id="img_2" class="sr-only" />
<label for="img_2">Image 2</label>
<div class="image">
<img src="img/quokka_(2).jpg" alt="" />
</div>
<input type="radio" name="images" value="image_3" id="img_3" class="sr-only" />
<label for="img_3">Image 3</label>
<div class="image">
<img src="img/quokka_(3).jpg" alt="" />
</div>
<input type="radio" name="images" value="image_4" id="img_4" class="sr-only" />
<label for="img_4">Image 4</label>
<div class="image">
<img src="img/quokka_(4).jpg" alt="" />
</div>
<input type="radio" name="images" value="image_5" id="img_5" class="sr-only" />
<label for="img_5">Image 5</label>
<div class="image">
<img src="img/quokka_(5).jpg" alt="" />
</div>
</div>
</section>
</main>
<footer>
<p>© 2023 <a href="https://amyskapers.dev" target="_blank" rel="nofollow noopener">Amy's Kapers</a>, code is on <a href="https://github.com/amykapernick/no_js"><img src="img/github.svg" class="github" /><span class="sr-only">GitHub</span></a></p>
<p>This site has no JavaScript whatsoever. Don't believe me? <a href="https://www.makeuseof.com/how-to-disable-javascript-in-web-browsers/" rel="nofollow noopener" target="_blank">Try it yourself!</a></p>
<fieldset class="theme_toggle">
<div class="toggle">
<input id="light" type="radio" class="sr-only" name="theme" value="light" checked />
<label for="light">
🌞
<span class="sr-only">Light</span>
</label>
<input id="dark" type="radio" class="sr-only" name="theme" value="dark" />
<label for="dark">
🌒
<span class="sr-only">Dark</span>
</label>
<span class="switch" aria-hidden="true"></span>
</div>
</fieldset>
</footer>
</body>
</html>