-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
269 lines (245 loc) · 20.3 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="./css/styles.css">
<link type="text/css" rel="stylesheet" href="./css/reset.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab+Highlight:wght@400;700&display=swap" rel="stylesheet">
<script src="app.js" defer></script>
<title>The ENIAC 6</title>
</head>
<body>
<header class="banner flex mobile-centre">
<div class="banner__text flex mobile-centre">
<h1 class="title">The <span class="color">ENIAC</span> Six</h1>
<p class="sub-title bg-shade-3">The women who programmed the world's first electronic digital computer
</p>
</div>
</header>
<main class="main flex">
<article class="article">
<p class="article__p">
<span class="line-height"><span class="large bold color">In 1943</span>, the United States Army funded a secret experiment that led to the</span> invention of the world’s first operational computer - the <button aria-controls="#eniac-modal" class="bold letter-space color">ENIAC</button> (Electronic Numerical Integrator and Computer). It’s original purpose was to calculate artillery ballistics, and it was an enourmous machine.
</p>
<p class="article__p">
Standing 8 feet high and covering 1800 square feet, the ENIAC was also overwhelmingly intricate: comprised of 5,000,000 soldered joints, 70,000 resistors, 10,000 capacitors, 6,000 manual switches and 1,500 relays. The engineers who invented the machine,
<button aria-controls="#mauchly-modal" class="bold color"> John Mauchly</button> and <button aria-controls="#eckert-modal" class="bold color">J. Presper Eckert</button>, were now in search of people who could program it.
</p>
<p class="article__p">
During WWII, there were more than 80 female mathematicians working as “computers” for the U.S Army, calculating differential equations and ballistic trajectories by hand. These calculations took a really, <span class="italic">really</span> long time and so the hope was that a team of human "computers" could be hired to perform calculations using the ENIAC.
</p>
<p class="article__p">
The selected team included <button aria-controls="#bartik-modal" class="bold color">Jean Jennings Bartik</button>, who would later lead the development of computer storage and memory, and <button aria-controls="#holberton-modal" class="bold color">Betty Holberton</button>, who would go on to create the first software application. Together with <button aria-controls="#bilas-modal" class="bold color">Frances Bilas</button>, <button aria-controls="#meltzer-modal" class="bold color">Marlyn Wescoff Meltzer</button>, <button aria-controls="#mcnulty-modal" class="bold color">Kathleen McNulty</button> and <button aria-controls="#lichterman-modal" class="bold color">Ruth Lichterman</button>, they laid the groundwork for future programmers and software engineers. And, since they were the first modern coders, they were instrumental in teaching others to program after the war.
</p>
<figure class="figure right border">
<img src="images/eniac2.png" alt="ENIAC programmers at work">
<figcaption>U.S Army / ARL Technical Library Archives</figcaption>
</figure>
<p class="article__p">
Programming was very different in the forties. In the beginning, the women weren’t even allowed into the ENIAC room because they didn’t yet have the security clearance. Instead, they were expected to code the machine using only paper diagrams of it.
</p>
<p class="article__p">
These diagrams didn’t come with any instructions - they had to figure it out themselves without any programming languages or manuals, <span class="italic">because none existed</span>. The team had to figure out how to manually program the ENIAC, physically putting the data into the machine using thousands of switches, dozens of cables, and multiple trays.
</p>
<p class="article__p">
The team succeeded in getting the ENIAC to run the requested ballistics trajectory, and on February 15th 1946, the ENIAC was introduced to the world during a public demonstration. During the demonstration, the ENIAC ran the programmed trajectory, and both the public and the press were fascinated.
</p>
<figure class="figure left border">
<img src="images/eniac3.jpg" alt="ENIAC programmers at work">
<figcaption>U.S Army Archives</figcaption>
</figure>
<p class="article__p">
But while the male inventors of the ENIAC received awards and publicity, these women received no recognition for their pioneering efforts. They were never introduced, and when their pictures appeared in the press, the captions didn’t even mention their names or roles. For years, even computing historians regarded them as models - posing in front of the machine to make it look good.
</p>
<p class="article__p clear">
Despite their incredible achievements with the ENIAC, the story of these 6 incredible female “computers” went almost completely ignored by history for roughly half a century. Their stories were virtually lost until the 1980s when a young programmer named <button aria-controls="#kleiman-modal" class="bold color">Kathy Kleiman</button> rediscovered these women and began conducting archival research to put together their stories. She also began to apply for awards on their behalf, finally bringing their achievements into the spotlight and assuring their well-deserved place in computer history.
</p>
<p class="sources">sources:
<a class="color" href="https://www.history.com/news/coding-used-to-be-a-womans-job-so-it-was-paid-less-and-undervalued" target="_blank" rel="noopener">
history.com
</a><span>|</span>
<a class="color" href="http://www.theheroinecollective.com/the-eniac-programmers/" target="_blank" rel="noopener">
heroinecollective.com
</a>
</p>
</article>
<section class="further-reading flex mobile-centre">
<h2 class="title">Further reading...</h2>
<ul class="further-reading__list">
<li>
<a class="list__link bg-shade-1" href="http://eniacprogrammers.org/" target="_blank" rel="noopener">Eniac Programmers Project</a></li>
<li>
<a class="list__link bg-shade-2" href="https://www.digitaltrends.com/computing/remembering-eniac-and-the-women-who-programmed-it/" target="_blank" rel="noopener">Remembering ENIAC and The Women Who Programmed It</a></li>
<li>
<a class="list__link bg-shade-3" href="https://spectrum.ieee.org/tech-talk/tech-history/dawn-of-electronics/untold-history-of-ai-invisible-woman-programmed-americas-first-electronic-computer" target="_blank" rel="noopener">Untold History of AI: Invisible Women Programmed America's First Electronic Computer</a></li>
<li>
<a class="list__link bg-shade-4" href="https://www.smithsonianmag.com/science-nature/history-human-computers-180972202/" target="_blank" rel="noopener">The Gendered History of Human Computers</a></li>
<li>
<a class="list__link bg-shade-5" href="https://www.history.com/news/human-computers-women-at-nasa" target="_blank" rel="noopener">Human Computers: The Women Of NASA</a></li>
</ul>
</section>
<section class="comments-section flex">
<h2 class="comments-title title">Comments</h2>
<form action="/noserver" class="flex-row" id="form">
<div class="flex label-input">
<label for="comment">Comment</label>
<input id="comment" type="text" class="comment-input" placeholder="Enter your comment" name="comment">
</div>
<div class="flex label-input">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Name" name="name">
</div>
<button class="comments-button bg-shade-5">Post</button>
</form>
<ul id="posts" class="list">
</ul>
</section>
</main>
<footer class="footer">
<p>
this page was created by <a href="https://github.com/OrianP" target="_blank" rel="noopener">OrianP</a>
</p>
</footer>
<!-- MODALS -->
<!--eniac-->
<div class="modal" id="eniac-modal" role="dialog" aria-labelledby="eniac-title">
<div class="modal-header flex-row">
<h3 id="eniac-title" class="color">Electronic Numerical Integrator and Computer</h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/ENIAC-smithsonian.png" alt="ENIAC Computer">
<figcaption>ENIAC at the Smithsonian Museum</figcaption>
</figure>
<p class="modal-text">
The first programmable, electronic, general-purpose digital computer. Heralded as a "Giant Brain" by the press, it was designed and primarily used to calculate artillery firing tables for the United States Army's Ballistic Research Laboratory. With a speed one thousand times faster than that of electro-mechanical machines, the ENIAC could calculate a trajectory in 30 seconds that took a human 20 hours - allowing one ENIAC to displace 2,400 humans.
</p>
</div>
<!--John Mauchly-->
<div class="modal" id="mauchly-modal" role="dialog" aria-labelledby="mauchly-title">
<div class="modal-header flex-row">
<h3 id="mauchly-title" class="color">John Mauchly <span class="modal-years">(1907-1980)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/john-mauchly.jpg" alt="John Mauchly portrait">
</figure>
<p class="modal-text">
American physicist who, along with J. Presper Eckert, designed ENIAC, as well as EDVAC, BINAC and UNIVAC I, the first commercial computer made in the United States. Together they started the first computer company, the Eckert–Mauchly Computer Corporation (EMCC), and pioneered fundamental computer concepts including the stored program, subroutines, and programming languages. Their work influenced an explosion of computer development in the late 1940s all over the world.
</p>
</div>
<!--J. Presper Eckert-->
<div class="modal" id="eckert-modal" role="dialog" aria-labelledby="eckert-title">
<div class="modal-header flex-row">
<h3 id="eckert-title" class="color">J. Presper Eckert <span class="modal-years">(1907-1980)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/presper-eckert.jpg" alt="J. Presper Eckert portrait">
</figure>
<p class="modal-text">
American electrical engineer and computer pioneer.<br>With John Mauchly, he designed the ENIAC, presented the first course in computing topics (the Moore School Lectures), founded the Eckert–Mauchly Computer Corporation, and designed the first commercial computer in the U.S., the UNIVAC, which incorporated Eckert's invention of the mercury delay line memory.
</p>
</div>
<!--Jean Jennings Bartik-->
<div class="modal" id="bartik-modal" role="dialog" aria-labelledby="bartik-title">
<div class="modal-header flex-row">
<h3 id="bartik-title" class="color">Jean Jennings Bartik <span class="modal-years">(1924-2011)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/jean-bartik.jpg" alt="Jean Jennings Bartik portrait">
</figure>
<p class="modal-text">
American mathematician and programmer. Bartik began her work at the University of Pennsylvania, first manually calculating ballistics trajectories and then using ENIAC to do so. Bartik and her colleagues developed and codified many of the fundamentals of programming while working on the ENIAC, since it was the first computer of its kind. After her work on ENIAC, Bartik went on to work on BINAC and UNIVAC, and spent time at a variety of technical companies as a writer, manager, engineer and programmer. Content-management framework Drupal's default theme, Bartik, is named in her honor.
</p>
</div>
<!--Betty Holberton-->
<div class="modal" id="holberton-modal" role="dialog" aria-labelledby="holberton-title">
<div class="modal-header flex-row">
<h3 id="holberton-title" class="color">Betty Holberton <span class="modal-years">(1917-2001)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/betty-holberton.png" alt="Betty Holberton portrait">
</figure>
<p class="modal-text">
American programmer. After her work on the ENIAC, She helped develop the UNIVAC, designing control panels that put the numeric keypad next to the keyboard and persuading engineers to replace the black exterior with the gray-beige tone that came to be the universal color of computers. She was active in writing the first generative programming system (SORT/MERGE). Holberton used a deck of playing cards to develop the decision tree for the binary sort function, and wrote the code to employ a group of ten tape drives to read and write data as needed during the process. Holberton worked with John Mauchly to develop the C-10 instruction set for BINAC, which is considered to be the prototype of all modern programming languages. In 1997 she received the Augusta Ada Lovelace Award, the highest award given by the Association of Women in Computing, and was inducted into the Women in Technology International Hall of Fame, along with the other original ENIAC programmers.
</p>
</div>
<!--Frances Bilas-->
<div class="modal" id="bilas-modal" role="dialog" aria-labelledby="bilas-title">
<div class="modal-header flex-row">
<h3 id="bilas-title" class="color">Frances Bilas <span class="modal-years">(1922-2012)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/frances-bilas.jpg" alt="Frances Bilas portrait">
</figure>
<p class="modal-text">
American mathematician and programmer. Frances graduated from South Philadelphia High School for Girls in 1938 and joined Temple University. Soon she was awarded a scholarship to Chestnut Hill College in Philadelphia. She did a major in mathematics and a minor in physics. During her studies, she met Kathleen McNulty, who was also a mathematics major and they became best friends. Frances began teaching at high schools, while still in college herself, with the intention of becoming a math teacher. However, immediately after graduation in 1942, she and McNulty were hired by the army to work at the Moore School of Engineering as 'computers' and later as programmers on the ENIAC project. When WWII ended, both Spence and Antonelli continued working with the ENIAC, collaborating with other leading mathematicians.
</p>
</div>
<!--Marlyn Meltzer-->
<div class="modal" id="meltzer-modal" role="dialog" aria-labelledby="meltzer-title">
<div class="modal-header flex-row">
<h3 id="meltzer-title" class="color">Marlyn Meltzer <span class="modal-years">(1922-2008)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/marlyn-meltzer.jpg" alt="Marlyn Meltzer portrait">
</figure>
<p class="modal-text">
American mathematician and programmer. Meltzer was born Marlyn Wescoff in Philadelphia and graduated from Temple University in 1942. She was hired by the Moore School of Engineering later that year to perform weather calculations, mainly because she knew how to operate an adding machine. In 1943, she was hired to perform calculations for ballistics trajectories. At the time this was accomplished by using manual desktop mechanical calculators. In 1945, she was selected to become one of the first group of ENIAC programmers. Meltzer was an avid volunteer in her community. She delivered Meals on Wheels for more than 10 years, was the treasurer of the Trenton/Lawrenceville chapter of Hadassah and an active member of Women for Greenwood House. During her last four years, she had knitted more than 500 chemotherapy hats for the Susan B. Komen Foundation in Philadelphia.
</p>
</div>
<!--Kathleen McNulty-->
<div class="modal" id="mcnulty-modal" role="dialog" aria-labelledby="mcnulty-title">
<div class="modal-header flex-row">
<h3 id="mcnulty-title" class="color">Kathleen McNulty <span class="modal-years">(1921-2006)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/kathleen-mcnulty.jpg" alt="Kathleen McNulty portrait">
</figure>
<p class="modal-text">
Irish-American mathematician and computer programmer. McNulty studied mathematics at Chestnut Hill College for Women. She took every mathematics course offered, including spherical trigonometry, differential calculus, projective geometry, partial differential equations, and statistics. She graduated with a degree in mathematics in June 1942, one of only a few mathematics majors out of a class of 92 women, and soon after was hired to perform calculations for the U.S Army. During her work programming the ENIAC, Antonelli is credited with the invention of the subroutine. Her colleague, Jean Jennings, recalled when Antonelli proposed the idea to solve the problem where the logical circuits did not have enough capacity to compute some trajectories. The team collaborated on the implementation.
</p>
</div>
<!--Ruth Lichterman-->
<div class="modal" id="lichterman-modal" role="dialog" aria-labelledby="lichterman-title">
<div class="modal-header flex-row">
<h3 id="lichterman-title" class="color">Ruth Lichterman <span class="modal-years">(1924-1986)</span></h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/ruth-lichterman.jpg" alt="Ruth Lichterman portrait">
</figure>
<p class="modal-text">
American mathematician and programmer. Lichterman was hired by the Moore School of Electrical Engineering at the University of Pennsylvania to compute ballistics trajectories. Along with Marlyn Meltzer, Lichterman was part of a special area of the ENIAC project to calculate ballistic trajectory equations using analog technology. They taught themselves and others certain functions of the ENIAC and helped prepare the ballistics software. After the war, Lichterman relocated with the ENIAC to the Ballistics Research Laboratory at the Aberdeen Proving Ground where she remained for two more years to train the next group of ENIAC programmers.
</p>
</div>
<!--Kathy Kleiman-->
<div class="modal" id="kleiman-modal" role="dialog" aria-labelledby="kleiman-title">
<div class="modal-header flex-row">
<h3 id="kleiman-title" class="color">Kathy Kleiman</h3>
<button data-close-button class="close-button">×</button>
</div>
<figure class="figure right modal-figure">
<img src="images/kathy-kleiman.jpg" alt="Kathy Kleiman portrait">
</figure>
<p class="modal-text">
Kathy Kleiman is a pioneering attorney, programmer and data security auditor. She discovered the ENIAC Programmers as a Harvard undergraduate and a female programmer in search of role models and inspiration.
<p class="modal-text">
Her junior paper and senior thesis explored the missing chapter of computers: the ENIAC Programmers and many other women who were pioneers in early programming and software. A decade later, upon learning that most of the ENIAC Programmers were not invited to the ENIAC’s 50th Anniversary she set out to record their oral histories, seek recognition for their accomplishments and produce a documentary to tell their dramatic story.
</p>
</p>
</div>
<!--overlay-->
<div id="overlay" tabindex="-1"></div>
</body>
</html>