Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6dc6a12

Browse files
Add fun JavaScript Star War History to slides
1 parent dc09eab commit 6dc6a12

File tree

2 files changed

+136
-0
lines changed

2 files changed

+136
-0
lines changed

‎JavaScript-First/00-History-of-JS/history.adoc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
= History of JavaScript
33

44
== The Begining...
5+
link:./index.html[Intro Film]
6+
57
Before "JavaScript Existed", The creators behind the Mosaic browser created a language called "LiveScript" and shipped it in 1995. Within 3 months, it was renamed to "JavaScript" to build on the hype train programmers were on with Java, a completely separate and unrelated language.
68

79
=== Browser Wars
Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<style>
8+
body {
9+
width: 100%;
10+
height: 100%;
11+
background: #000;
12+
overflow: hidden;
13+
}
14+
15+
.fade {
16+
position: relative;
17+
width: 100%;
18+
min-height: 60vh;
19+
top: -25px;
20+
background-image: linear-gradient(0deg, transparent, black 75%);
21+
z-index: 1;
22+
}
23+
24+
.star-wars {
25+
display: flex;
26+
justify-content: center;
27+
position: relative;
28+
height: 800px;
29+
color: #feda4a;
30+
font-family: 'Pathway Gothic One', sans-serif;
31+
font-size: 500%;
32+
font-weight: 600;
33+
letter-spacing: 6px;
34+
line-height: 150%;
35+
perspective: 400px;
36+
text-align: justify;
37+
}
38+
39+
.crawl {
40+
position: relative;
41+
top: 99999px;
42+
transform-origin: 50% 100%;
43+
animation: crawl 60s linear;
44+
}
45+
46+
.crawl > .title {
47+
font-size: 90%;
48+
text-align: center;
49+
}
50+
51+
.crawl > .title h1 {
52+
margin: 0 0 100px;
53+
text-transform: uppercase;
54+
}
55+
56+
@keyframes crawl {
57+
0% {
58+
top: -100px;
59+
transform: rotateX(20deg) translateZ(0);
60+
}
61+
100% {
62+
top: -6000px;
63+
transform: rotateX(25deg) translateZ(-2500px);
64+
}
65+
}
66+
</style>
67+
</head>
68+
<body>
69+
<!--
70+
DONT CREDIT ME, Credit him...
71+
https://css-tricks.com/snippets/css/star-wars-crawl-text/
72+
-->
73+
74+
Fancy Star Wars Intro?
75+
76+
<div class="fade"></div>
77+
78+
<section class="star-wars">
79+
<div class="crawl">
80+
<div class="title">
81+
<p>Browser Wars: Episode I</p>
82+
<h1>Phatom Scripting</h1>
83+
</div>
84+
<p>
85+
Before "JavaScript Existed", The creators behind the Mosaic browser created a language called "LiveScript" and shipped it in 1995. Within 3 months, it was renamed to "JavaScript" to build on the hype train programmers were on with Java, a completely separate and unrelated language.
86+
</p>
87+
<p>
88+
The first attempt at standardizing scripting languages was in 1997 with ECMAScript. (ES-1) as part of European Computer Manufacturers Association (ECMA). However, different implementations, competing languages, and egos prevented any real standardization from occurring until 2009. In between that time, the (failed) proposal for ES-4 (led by Mozilla and others) attempted to call for more traditional programming concepts like classes, modules, etc.
89+
</p>
90+
<!-- -->
91+
<div class="title">
92+
<p>Browser Wars: Episode II</p>
93+
<h1>MircroSoft Attacks</h1>
94+
</div>
95+
<p>
96+
Eventually, Microsoft did what they always do, which is steal source code from someone else's product and release their own version of it, Internet Explorer that used <bold>JScript</bold>. The browsers wars started and long story, short, Mosaic, and other browsers died off due to Internet Explorer. Yet multiple forks of JS remained as well as other scripting languages. All of which were made to address the same issues of providing the browser interactive behavior beyond hyperlinks and the page reloading.
97+
</p>
98+
99+
<!-- -->
100+
<div class="title">
101+
<p>Browser Wars: Episode III</p>
102+
<h1>Revenge of ECMAScript</h1>
103+
</div>
104+
<p>
105+
The ES4 standard was abandoned largely due to the concern of "breaking the web" and the introduction of AJAX ( Asynchronous JavaScript And XML") which allowed for client-side dynamic content. As a result of multiple factors, jQuery was created in 2006, largely to provide cross-browser support for different implementations of JavaScript and AJAX. By 2009 ES-5 was released and essentially became what the De facto Standard of JavaScript that most still refer to.
106+
</p>
107+
108+
<!-- -->
109+
<div class="title">
110+
<p>Browser Wars: Episode VI</p>
111+
<h1>Return of ECMAScript 4?</h1>
112+
</div>
113+
114+
<p>
115+
It is important to note, that virtually every proposed feature in ES4 would later be implemented in ES-6 such as classes, generators and iterators, destructuring assignment, and most importantly a module system. The only feature truly noticeably absent are the various reimplementations of types. To read more about the [The Real Story Behind ECMAScript 4](https://auth0.com/blog/the-real-story-behind-es4/).
116+
</p>
117+
118+
<!-- -->
119+
<div class="title">
120+
<p>Browser Wars: Episode VII</p>
121+
<h1>JavaScript Awakens</h1>
122+
</div>
123+
124+
<p>
125+
Beginning in 2009, serverJS was created to give JavaScript a module system and later was renamed commonJS . The goal was "to establish conventions on module ecosystem for JavaScript outside of the web browser" and was likely related to some of the failed ES4 proposals.
126+
</p>
127+
128+
</div>
129+
130+
131+
</section>
132+
133+
</body>
134+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /