TheHistoryofProgramming
> How didwe
get to where we are today intermsof programming
and
computers? Well, look nofurther, because thisessay isgoing
to
be
allabout that.
>
The firstever electronic programming language, Plankalkül, was
invented
in1948byaman named Konrad Zuse. Interestingly, this
was
long
before manypeople think that the electronic computer cameabout.
>
To makethecomputer say “hello, world!” (thetraditional test
text)
in Plankalkül, the code would look something like this:
R1.1(V0[:sig])
=> R0
R1.2(V0[:m
x
sig]) => R0
0
=> i
|
m+
1=> j
[W
[i
<
j->[R1.1(V0[i: mxsig]) =>R0|
i+1=>i
]]]
END
R1.3()
=>R0
‘h’;’e’;’l’;’l’;’o’;’,’;’
‘;’w’;’o’;’r’;’l’;’d’;’!’ =>Z0[:mx
sig]
R1.2(Z0) =>R0
END
>
Obviously, this code ispretty complex. I’vebeen codingfor
years,
and I,
personally, have nofreaking idea whatisgoing on.
>
Fast forward 76 years to2024, andcomputer programming isnow
extremely
widespread, and the spread ofvarious coding languages is
just
aswide.
>
The maincoding language that is usedtodayis disputed, as
nobody
truly knowswhich is used the most. SoI’llgoover three:
● HTML/CSS, for making and styling websites
● Python, generally used for making games, but anyother
programming
needs canbe covered byPython aswell.
●
JavaScript, for implementing interactivity into anything
digital
>
First ofall, HTML is theone Iknow best,soI’ll gooverit
first.
Same message will show uponthe output screen: “Hello, world!”
However,
thecodeitself is quite different. Takea
look:
<!DOCTYPE
html>
<html>
<head>
<meta
charset=“utf-8”>
<title>My
Website</title>
/head>
<
<body>
<p>Hello,
world!</p>
</body>
</html>
>
To
see how
this codewouldwork,checkoutthislink:
>
Let’sbreak thiscodedown.
>
To
begin this explanation, let’sthinkaboutallofthosewords
and
termsinthose“<>” enclosures. Thesearecalled“angle brackets”,
and
theybasically make up
thebasisofHTMLcode.Thefirstandmost
important
tag,
as
these termsarecalled,isthe
<!DOCTYPE html> tag.
This
tagissoimportant simplybecause it
tellsthebrowser thatthis
code
isHTML.(Technically, the<html>tagtellsitthesamething,
but
youneedboth.)
>
Nextupis
the pairedtags.Thesearetheonesthatcomeup
multiple
times. Forexample, the
<html> tagsare
paired tags.There’s
one
thatstarts a
section ofcode,and
onethatendsit.Inthiscase,
ALL
thecodegoeswithin thesetags.Theonesthatlooklike
</this-is-not-a-tag>
differfromtheonesthatlooklike
<this-is-not-a-tag>
intheirfunctionality. Theforward slashbefore
the
textdenotes that it
closesthesectionofcode,or,inother
words,
endsit.Theoneswithouttheseforward slashes are
theopening
tags
,
and
they do
exactly theopposite.
>
So
what doeseachtagdo?Well,someare
kinda obvious,suchas
the
<body>tag, which denoteswherethemainBODYof
thecodegoes.
However,
it’sworth notingthatnotallthe
codegoeshere. For
example,
the<title> tagmustbe
placed withinthe<head>tags,where
all
ofthe
information that
tells the
browser whatthebasiccode
does,
and
inthecase of
<title>, tellsthe
browser whattocallthe
tab.
>
Continuing on the
pathofthe
<head> tags,theothertagwithin
them
isthe<metacharset=“utf-8”>. Thistagis
CRUCIAL, andI
cannot
stress
thisenough. Thistellsthebrowser(again, becausecomputers
need
tobe
told everything) thatyouareusingHTMLandexactlywhat
version
youareusing. UTF-8is
themostrecentversion of
HTMLtomy
knowledge
(not HTML5, that’sa
wholeothercanofworms).I’mpretty
sure
youcaninputother versions, but
Ihaven’ttried it
andwouldn’t
recommend
it.I’m(pretty) sureitwon’tendwell.
>
Moving on
tothe<body>tags,there’s onlyonetag
within
these:
the
<p> tag.Thistagis
veryusefulifyouwantyourtextto
how
s upon
the pageexactlyhowyou
wroteit,becauseifyou
don'tput
it
in
the<p>tags, paragraphs will
showupas
spaces,amongother
problems.
The<p>tagalleviates this
issue, as
“p”standsfor
“paragraph”
.
Youcanusemultiple<p>
tags, as
withany
othertags
(except
fortheonesmentioned above,
that’ll causeproblems).In
fact,
alotofprogrammers dothis,
asthereis
oftensomething you
can’t
putina<p>tag,such
asanothertexttag,like
the<h1>-<h6>
tags.
These aresingle-line tagsthat
willlookreallyweirdifplaced
within
<p>tags. Ifyouwant
tolearn
moreaboutHTMLoreven
getinto
coding
it,check outtheappropriately namedhtml.comforguides.
>
Nextcoding language: CSS.
I’mjustgoingin
orderof
howwell
I
know
them, andCSSisup
nextin
thatlist.
>
So,CSSisalmostalwayspairedwithHTML,as
CSSis
usedfor
styling
HTML.Thecoding languageitselfisquitesimple,but
it’s
hard
todemonstrate here.So,I’ll
putit
intoour“Hello,world!”
HTML
code:
<!DOCTYPE
html>
<html>
<head>
<meta
charset=”utf-8”>
<title>My
Website</title>
<style>
p
{
color:
tomato;
}
</style>
</head>
<body>
<p>Hello,
world!</p>
</body>
</html>
>
TheCSScodeisshownin
blue.As
Isaid,CSS
isprettysimple.
This
codewill justchangethecolor
ofanyand
allparagraphs’ text.
In
thiscase,itwillchangethecolorto
areddishorangeknownas
Tomato
tothecomputer (NOTE: the
Hexadecimal codefor
Tomatois
#FF6347).
Youcandomuchmorethan
thiswithCSS,from
movingtextto
changing
thecolor of
thepageentirely.Youcan
alsochangethecolor
of
specific itemswithIDs,
butthat’snot
easily implementedinto
code
thissimple.
> Nextup:JavaScript, orJS.
JSis
lesssimple,andI
haven’t
spent
as
muchtimewithit,so
thisexplanation maybe
lesssmoothand
is
bothforme
andyou.
>
Aswith
allother examplessofar,I’ll
startwithhavingthe
code
say“Hello, World!”:
fill(0,
0,0);
text("Hello
World!", 157,200);
>
Linkto
thisone:
https://www.khanacademy.org/computer-programming/helloworld4essay/5182
502891864064
>
Now,youmay
bewondering whythislooks
sosimplewhenI
clearly,
CLEARLY said
it’s not.Well,it’sbecauseonce
youstart
adding
more,thecode
gets hardto
comprehend fast.For
example,
something
assimpleasa
smalldrawing cantake
aLOT
ofcode
and
geometry
skills. Take
alookatthiscode:
>
(codegoeshere)
>
Seehow
complex andtediousitgets?And
ithappensFAST.Let’s
start
out
withthecommon part
ofthesecodeexamples:The“fill”tag.
This
setsthecoloroftheshapes,text,anddotsyou
puton
the
canvas.
However, the
line coloris
notaffectedbythis
tag.
>
Secondly comesthetexttag.This
tagis
exactly what
itsounds
like
–a
tagthatputstextdown.
>
Nextup,the
beginShape(), endShape(), andvertex()tags.
endShape()
and
vertex() areeasyenough,workingoffof
atype
and
coordinates
respectively, but
thebeginShape() tagis
a
littlemore
confusing.
You
havetochoosewhattypeofshape
youwantit
to
create,
whichisdenotedbysomeprettyweirdinnertags.Then,once
you
closeit,youhavetoput
allofthe
vertex() tags
withinthe
beginShape()
andendShape() tags.Ofcourse,you
canmakeirregular
shapes
by
notputtinginanything inthe
parentheses, too.
>
Alright, next
upistheone
thataknow
closetonothingabout:
Python.
Pythonisone
ofthemostpopularcodinglanguages for
making
interactive
things,buthonestly, I’mnot
abig
fan.I’vespentless
than
twohoursonit
ascompared to
overahundredin
HTMLand
over
two
hundred in
Construct 3.So
you’re gettinga
bigtimenoob
perspective.
>
Here’sthecodefor“Hello,World!” in
Python:
print(“Hello,
World!”)
>
That’sit.Yup.Onelineof
code.Idon’tlike
it.Pythonjust
feels
too
simple for
me,butthat’sprobably becauseI
overcomplicate
hings
t waytoomuch.Ialsostarted codingbyjumping straightinto
the
deep endof
HTML,sooooooo…
>
Theprint(“”)tagisthebasis of
alltextinPython,andworks
similarly
tothe
<p>taginHTML. It
prints textontothe
shell
window
,
whichis
basically apreview window forfindingout
what your
code
does. Inthisexample, theshellwindow willsimplyshowaline
of
text reading,“Hello, World!” .
You
candoalot
withPython, but
I’m
terrible at
usingitandhonestly finditquiteboring,soI’mnot
going
toshowanymore.
>
Now,movingforward a
bit, let’svisit one
ofthe
programming
languages
thatisevennewerandstill developing. Thisprogramming
language
wasoriginally madeforcreating games, andthat’s
its usual
use.
What isthislanguage, youmayask?Construct 3.Construct is
a
2-dimensional
gameenginethatnow hasa
3-dimensional plugin.Backin
the
previous versionsofConstruct, youcouldonlydovery
limited
things,
butnow
it’sbecome a
really goodengine in
general.I’m
currently
working on
afew
games inConstruct.
>
Newestofall
istheadvent ofartificial intelligence writing
code.
Thishonestly kindofscares me,not
inthe“ohno,
apocalypse!”
way,
more inthe
wayof“What’s thepointofprogrammers now?”.
To
figure
outifthisis
evenaviable optiontodorightnow,
Iasked
three
different AIs(Aria,ChatGPT, andGoogle Gemini)if
theycould
write
HTMLcodeformeto
say“Hello, World!” .
Out
ofthe
three, Aria
gave
me a
verypolished andpretty setof
code that
workedgreat,
ChatGPT
gaveme
aslightlyless polished, butstill-working set, and
Gemini
gave me…
Well,gibberish. Thisisa
bit backwardsfromwhatI
thought
wouldhappen,because ChatGPT hadbeen aroundlonger,Ariais
a
built-into-the-browser AIforOperaGX,andGoogle Gemini
has a
prompt
about generating codeinitsprompts list.
>
However,there is
still apointforprogrammers, aftera
fashion.
Sure,eventually AIcanwrite code,butit
doesn’tknow what
to
write withoutaprompt.SoisAIthefuture of
coding?In
my
opinion,
we’lljusthavetowaitandsee.
>
Whatcan
bedetermined, however, isthepastof
coding. From
Plankalkül
toAI,the
world of
programming has come
along,
long way
from
the 1940s.Andit’slikely onlygoingtogoup
fromhere.
>
ENDDOCUMENT
or
F thoseof
you
who
want
to
seesome
of
my
codingprojects
come
talk
to
me.I
cangive
you
the
links
andwhatnot.
Note
thatmost
of
these
areworksin
progress
and
may
notbe
finished
for
along
time.
