All right, let's talk of today.
I hope you're excited as I am to learn about 25 years of JavaScript by Stephen.
Please give it up.
Thank you.
Thank you everyone.
So is that part of the slide says my name is Steve and is this bit says I'm a little bit of a geek?
So if it all turned up to the correct room, this should be a session about 25 years in JavaScript.
That I've done and seen over that time all crammed into about half an hour.
So I'm going through all this sort of stuff moving from the original web type things that I first looked at to things that aren't even web based, but our JavaScript base.
But before that, who am I?
What have I done to deserve a place on this stage?
So we have a slide about that, or is it should be called the ego slide?
This is where the speaker begs about themselves for 10 minutes and everyone wishes they're in another different room.
So I am a general purpose computer geek.
I have programs, a load of things I've done, games consoles, so place stations and Xboxes coded those things.
Ed tech stuff, web stuff, servers, cloud, you know the whole lot.
But I wrote a couple of books, six apparently, I forgot them myself.
I compose a musician, magician, stage magician, if anyone was here last year.
I did a magic show for everyone.
I've really magic and fuzz them, who are some kids?
I've spoken at the bucket loads of fuzz stems, I've been to all of them, I love retro computing, and all of this is not important.
What's important is that everything there was done with JavaScript.
When I wrote this book, I had JavaScript to manage my chapters together into the final form.
I have composed music using JavaScript, not AI, proper code.
I'm a magician. I have used JavaScript to help me do the magic.
Unfortunately, it's magic, so I can't tell you what JavaScript was used to make what magic trick work, but it was used.
And I've written emulators in JavaScript as well.
There's a lot you can do with it, fun being enough.
So, 25 years, I know JavaScript is older than that, but my experience of it is only 25 years, and obviously 25th year, we've forced them.
So, kind of a nice match.
So, what was the year like in 1999?
Well, human population was only 6 billion back then.
It's moved on a bit since then.
And, you know, hourly wage, can anyone imagine getting paid 360 an hour, 3 or 4 euros an hour?
That's what it was like back then.
As far as the tech world goes, we didn't have Facebook.
We didn't have flashed up.
I was always wondering if we were going to get a cheer for the Facebook and the R for the slash, but obviously not.
There was no stack overflow.
I bet there was some programs out there trying to work out, how did you code without stack overflow?
We had a dot com bubble that came and went, and there were almost no other JavaScript programs.
I mean, maybe there were, but I just didn't know them.
I wasn't in that sort of circle.
So, oh, yes, and Google was only one years old at the time.
So, could like trying to find a solution.
So, what else was real?
Well, as a language, I was using JavaScript in 1999 to build a website called brand new writers.
It was a very simple site, and I had hover buttons by going image dot source equals,
because this was the way the one true way.
No libraries, no modules.
You wanted to change it.
That's how you're coding it.
Oh, and using gifs as well.
And I think they're making up their own jokes at the front.
So, this was what I was doing.
And there weren't that many books around.
So, well, this is the book that I learned from.
Every single web page, I was looking at that source at the same time.
Well, that's all this is doing.
Oh, because I was a C++ program originally.
I originally owned, obviously, basic, like every one else.
I learned a sembler.
Then I was a C C++.
So, this language looked rather interesting.
From that, I went on to my own website called Blue Dust,
where I did silly things like this.
This is the right way round.
Funnily enough.
There was a back in the Xerox Park.
They had monitors that were portrait,
not landscape.
So, I built a web site, put fully on its side.
So, it looked correct if your monitor was turned 90 degrees.
None of this is CSS, because none of that would have worked.
So, everything here is an image.
And there was even a little scrolly thing that would scroll along here.
Because every single character was its own separate image.
And this is how we did the clicking things.
Look, I was young, I needed the money,
and this was the only way to make it work.
So, I accept that this was the way that I coded JavaScript back then.
The only thing I actually apologized for is my casing.
So, sorry about that.
And this is how it actually worked behind the scenes,
as you're saying, taking characters,
squishing them together.
See, double quotes, none of this backtick rubbish.
No, it had to manually mungle the things together.
Creating new images and changing the source.
This was a revelation.
At this point, I could suddenly change images.
And do it almost properly.
And this was that scrolling thing that I mentioned earlier.
Using document scroll and working it all out,
working OK, how do I change what image where?
And then he valve the string.
Has anyone used a valve in the last year?
Some people are up.
I admire your bravery in admitting it.
How did we debug all this rubbish?
Alert.
There was no console console didn't come up until quite a bit later on.
So, what do we do?
Alert.
It's basically point-tifty bugging for websites, isn't it?
But it was fine.
It sort of worked.
We eventually ended up writing the stuff in the HTML itself.
So, that was all good.
Oh, and we should also talk about some of the APIs that we've seen over the time.
But first, I thought, here we go.
We had rejects.
When I discovered this, I thought, wow, I can finally dump Pearl.
Pearl is the only, I've used rejects in Pearl.
I love Pearl, and I love rejects.
And then, I found I could do it here.
OK.
So, I created this little thing.
These were sort of toolbar applets or bookmarklets, depending on who you'd speak.
And you could put a piece of JavaScript in the toolbar of your browser.
So, when you clicked it, it would run on the page.
Sort of like a brief monkey kind of thing sort of primitive stuff.
So, I wrote this little hack that, if you were at a.com site,
it would change it to the code.uk version.
Because, as you can probably tell from my accent, I am English.
Or, if you're on the code.uk site, it changes it to come.
The only reason I did this was for pure ego and vanity.
I had a book out, not that it matters.
I'm not going to try and plug it.
I don't get any royalties anyway.
But it was a very long Amazon.uk and Amazon.com.
So, I wrote this.
So, I could flip between my book on both sites to see who'd reviewed it.
And what they've said.
The only reason I did any of this.
Also, I played around with the YouTube API.
YouTube used to have a really good API that would allow you to properly control videos.
So, I took this, which is the game Dragons layer.
It's some of you might remember.
Originally, it was a video disc, but someone had uploaded the entire video sequence to YouTube.
So, someone's got the YouTube video and I've got a YouTube API.
So, I was able to rewrite the entire game by changing the playback pointer.
Depending on what the user would press on the keyboard.
It is basically a series of quick-time events.
But that's all the original game was.
And then someone spotted the whole video was on YouTube and found a copyright thing.
And it all fell apart.
But the, you know, it worked.
It proved the thing.
Another API was Facebook.js.
Did anyone use Facebook.js?
Another one.
Yeah.
So, basically, we're in 2020, but we're in 2008.
And I had learned, now, I could do things like get element by ID.
You know, because I'm the proper programmer.
I'm changing my source.
So, I'm flipping images very, very politely.
And Facebook come along and says, we want you to have games on our platform.
So, we said, okay.
And we worked out that JavaScript has control of everything.
So, I would take the users in for private information from the Facebook webpage.
If we were running a game on there.
And then the suddenly go, oops, we made a mistake.
Okay, you can't use JavaScript anymore.
You have to use Facebook JavaScript.
So, they basically forced us to use these special,
little, little, sort of, rapid functions, essentially.
Their own version of set source rather than dot source.
Just so they could check you weren't reading stuff out from the HTML.
And they also created Facebook markup.
Just also to make it more complicated for us to steal people's data.
Oh, how times have changed.
Now, I mentioned earlier our program Games Console's playstation's Xbox is that sort of thing.
I'm not a very good graphics person, but I do like writing graphics software.
So, I worked out, I could do this.
This is using DOM manipulation.
Everything will dot on that was a separate DOM object,
that I was flipping around the screen using co-science and science.
That's not, I mean, we wrote it recently in about 100 by 100 characters of JavaScript.
Doing something sort of, not that, but one pixel images.
I suppose most people here remember everybody having a one pixel by one pixel image
that was used to pretty much space everything out.
Well, I was using it to draw graphics.
I would have a whole set of one pixel screen images.
Each one will be a different color.
I'd work out what color I wanted to use,
and write that particular pixel into the DOM.
Fortunately, someone came along and did a canvas.
I mean, this was not my game.
Someone wrote Chucky Egg using DOM manipulation.
Everything on there was a DOM object.
And he thought, I was crazy.
Personally, he did it was brilliant,
but it was using the DOM, so I saw that the canvas was available.
So I rewrote it using canvas.
Double the speed overnight.
I also used it to like silly little games like this.
It's like a missile command clone.
Well, I discovered, oh, at this point in JavaScript.
It's like, oh, so I use that.
I was mucking around with binds and the plies and calls and things like that.
This, however, was the way that I considered at the time,
JavaScript would do, oh, oh.
One massive function and hacking into the prototypes are all of the things.
Also, still using var.
We haven't got to let yet.
That doesn't exist for another few years.
But we're getting there.
So I ended up writing that said game with some kind of inheritance.
Because I like, yeah, I know we have prototyping inheritance.
I wanted to do classical inheritance because I'm a C++ program.
That's how I was trained.
So this is what I did.
I'm sure I don't need to go through how this inheritance manager
will extends various functions.
It's only a little separate function.
And you just read this prototype to the base path prototype.
But create a new object to this basic inheritance.
So when you put the prototype constructor back to the other prototype constructor,
you could then call that superclass.
So we actually call the different.
So any questions on that?
Nope.
Didn't think so.
So yes, we've got this canvas, which means we can do something fun with it.
And these were the functions that we were using at the time to get stuff.
You know, create that canvas, get stuff into the canvas,
read stuff out of the canvas.
And at this point, this is when the light bulb moment for graphics
for me happened.
If you can read something from the keyboard,
and you can write something out to the screen,
arbitrarily to the screen, you can do anything.
You don't have to rely on a 3D graphics card.
If you can just control the color of every pixel,
and you can then work out what color that pixel is,
you can do everything.
So what does everyone do when they have the whole world at their feet?
They write a manual box set generator.
And then they go away.
So oh, I'm going to write a spectrum emulator as well,
because you can.
It's got to the stage now where our browsers are on
the standard desktops were fast enough to emulate old machines in JavaScript.
We'd got to that point now.
It's trivial.
You know, this is still 15 years ago.
And the fun bit here, I first learned how to use web workers
by parallelizing the manual box set.
And it went slower.
My fault.
I also did Lego GTA as a tech demo.
These URLs are fine.
This shadow is generated in real time.
Wherever you are, it looks for the bridge.
It says, OK.
Read these pixels.
RGB, red, green and blue.
Half of them.
Create a shadow.
These walls of these buildings, for example.
As you move closer, they do exactly what you'd expect.
Oh, every single line was a scan line.
I'd say, how many of these lines down do we go?
How far over does it go?
And then calculating every pixel by scaling it.
One scan line at a time.
But it was quick enough now that you could do it.
And at the point I said, right, I'm writing the particle system.
This is fully dynamic.
So these particles bounce around and squeeze around and everything else.
And you can change the color.
It will time.
How does it do it?
Simple.
It takes the image from the canvas.
Reads every single pixel out.
We color every single pixel according to what color you've said.
And then dice every single pixel back to the canvas object.
And it does it 60 times a second.
Well, if you can do that, you can do 3D, right?
WebGL didn't exist at this point.
So this entire window.
I rewrote the entire OpenGL graphics library.
In JavaScript.
Without using any WebGL stuff or graphics card things,
do we got some of these quick characters animating?
Because the keyword there is a fine transforms.
If you don't do anything to complex with a transformation in some 3D world
in the virtual world space into the screen space,
you actually save a lot of processing cycles.
So that's what he did.
I will also show these animating, but you know,
if I'll say good brevity, we won't.
That was rendered in JavaScript.
It rendered in JavaScript a couple of weeks ago.
Yes, granted it took that particular image
was, I think, 70 seconds.
I now have that rendered down to 7 seconds.
And I haven't finished optimizing.
And this is a basic way, Tracer.
Obviously, some of you will probably notice where the image comes from.
There's a book about how to write a raytracer in a weekend.
And being someone who wants to show off,
you probably can't tell I want to show off.
I decided, how quick can I do a weekend raytracing?
In JavaScript, you can do it in six hours.
You don't have all the C++ gunk.
You've got to do it before you can start coding.
They didn't even have a, they couldn't even display their output.
The C++ people had to write it to a file
and then load it into another image program.
So this straight into the browser.
And this link here, this show, if you've seen the weekend raytracer book,
this takes you through every step of that book
in JavaScript that you can test it in real time and play around with it.
You can see the code, it's really there.
It's actually quite nice.
But eventually, we had WebGL.
So building simple things like, you know, a found a castle model.
So I wrote a thing that would import castle meshes.
Does anyone remember the game?
And to tack, it was a single aspect from game from the, I think, 1982.
Well, I don't really emulate it.
And because it's an old game and it's on an old machine,
it's very easy to find where the map data lives.
So it's like, okay, this is how the map data is stored.
This is the, I could just generate the whole thing,
Minecraft style as the series of blocks.
Which is what I did.
And this was my, that was using 3.js.
It took nearly a whole day to write a full 3D engine
and the code to run around this, jump up onto things and so forth.
Compared to the weeks that I'd spent previously,
it was one of those signs of, I don't need to do all the work anymore.
Everyone else is going to do it.
Give it out to the source community and then I can just build stuff.
It hasn't changed the problem as I say, it just moves the problem.
It went from having to understand how do you write a 3D game engine
to how do I use an existing 3D game engine?
Unfortunately, I'm not very interested in that problem.
I like building the things.
I'm less interested about using somebody else's.
But I realized at this point, the game was pretty much
I had to admit that that time had passed.
But outside of the web, there were other things.
Because as soon as you break out of the physical machine,
it seems to come alive.
There were probably people in here who have used computers
that were never connected to a network.
There are lots of good reasons for why you wouldn't connect
the machine to a network.
But we pretty much expect everything to be connected.
Well, my first machines were not ever connectable.
As that X81 could not be connected to anything,
except a cassette recorder and a black and white television set.
This computer was in black and white.
Yeah, so that reminds me, mid-lector activity, by the way.
I was speaking to some students in Cambridge last week
because I was giving a lecture on this sort of stuff.
And I was helping them with one of their things.
And they said, why does this variable name appear in pink?
But why does the same variable name over here appear in blue?
I don't know.
It could be just the way that the syntax colouring thing works.
But the code is right.
He said, well, how do you know?
I can see that the code is right.
But the colour is a difference.
Yeah.
Some of us started programming before we had colour highlighting
in our editors and some of us were coding before we had colour computers.
And he just looked at me like, what?
How did you do it?
It's called programming.
But one of the first things I saw that you could connect
sort of to the outside world was actually a webcam.
And this was farther get user media object.
Anyone is moonlighting from the real-time communications room in here?
Well, WebRTC was one of the things that used get user media.
So you can grab an image from a webcam and stick it in the canvas.
What happens once you've got an image in the canvas?
You can read out every single pixel.
You can work out what the colour is.
You can change the colour and then you can wait every single pixel back.
So this other little thing says, okay, let's mess around with pixel data.
And this code has all of these little filters written in JavaScript twice.
One for big Indian, one for little Indian.
The people who are laughing are those who are old enough to know what nothing is Indian.
We don't deal with Indian in this world.
Yeah, we do.
And we can.
And I ended up doing just again because it just works slightly nicer.
If you don't want to change the pixel from one colour to another, change it to a letter.
Every single letter, you know, look at it.
There's not a lot of space in the night or a dot.
This quite a lot in the W's and the next.
So create a mapping table as such as the one that is hidden here.
These ones have more dots, those have fewer dots.
And then change every single colour to an ask character.
And of course, because it's a webcam, this updates in real time.
So this is a nice little privacy filter thing you can add on.
Also it makes for, you know, just great missing about.
But we've got something interesting here now, right?
We've got loads of various bits of API and technology.
And we've got some interesting fun things we get use of media.
So let's grab the images.
Let's manipulate it.
But then add it to YouTube.
So what you can do is you can watch a YouTube video on one side of the screen,
teaching you how to tie, you know, the half nails and not or something.
While you're on the webcam on the other side, trying to tie it.
So you can watch the two things side by side to see if you're doing it right.
This is how programming's meant to work, right?
But we've also got something else.
We've got the ability to take a webcam image.
We've got the data stream. Why don't we just send that data somewhere else?
This means we've accidentally invited Skype 10 years too early.
That's what we did.
And it was called WebRTC.
So real-time communications thing.
You have to get use of media on both sides.
And then that data is transferred from the browser nice and quickly to everyone else.
And it's a peer to peer.
Except for the fact you need a server.
Because without the server, you don't know where the other peer is.
So you need the server just to connect you.
But after that, all the data will go from each computer directly.
Unless, of course, you've got some firewall in the way in which case it's going to go to a server.
But in all other cases, it's peer to peer.
But it was a lovely idea.
And it used data sockets.
And it's the same data socket type API that you already know from just general sockets programming.
Exactly the same.
Works the same way.
So we've got some real-time data.
Does anyone ever play with leap motion?
Does anyone ever remember that?
You do.
So it was a little box about yay big.
And you plug it into the USB.
And you could wave your hand over it.
And it would give you a viral JavaScript API.
The position of your hand and your fingers in space above it.
So it's like, well as soon as that comes like that uses websockets.
So there's a websocket you connect to on the local machine.
That when you do so, it just streams all this data about where your hands are.
Above this little box.
So I've got this little swarm application that I do this in front of the screen.
The leap motion sends that signal via the socket to the JavaScript running in the browser to make these things run away.
And people know that you may have seen me.
I did talk on music last year.
And one of the things I was missing out is web audio.
The same way is we have a canvas that can be individual pixels and change them.
We had web audio that allows us to change audio data in the same way that we would change pixel data.
So we can render any sound.
So we can actually write our own virtual synthesizer in a web browser.
And this was a very simple example I gave where it's just adding various sign waves together.
And of course, and all we mentioned the thing that you could wave over this little leap motion box at a change.
I think it's more correct meant to be telling me, but we'll leave it at that.
So you could play this virtual synthesizer by doing this across your machine.
And of course we had MIDI.
We always had MIDI.
I wrote a C library in 1998.
That makes me feel old.
I wrote a MIDI library so I could compose a music automatically.
And I put it to JavaScript and I created a symphony using the library.
Because you don't actually need output audio for this to work.
You can just generate it as a binary blob.
Effectively download to your machine and then bring that into your music sequencer.
And then assign patches and so forth.
And then someone says, oh, we don't like doing that.
We're going to do web MIDI.
So all of a sudden you can do all of this stuff in the browser without ever taking your data and putting it somewhere else.
So I thought, okay, I will recreate symphony number one in the browser.
I added some extra bits so you can do many sequences.
I did it.
So this last bit, the MIDI sequence is bit.
Because you can now plug in a synthesizer into your machine and your web browser can then talk to that synthesizer and vice versa.
Means you can play something on the keyboard.
It comes up in the browser and then it can write back different notes.
So as you play something, it can do a MIDI-based echo, for example.
Or it could hold you sequences.
So when you play one chord, it improvises the bass for you.
Well, also, we've got MIDI sequences.
So we've got sequences.
We can write MIDI files.
We can process MIDI files.
We can process live MIDI data.
We've got something to generate sounds from that data.
So when the something says synthesizer says, oh, play C.
We've got a way of generating a sound for that C.
We can then process that data to add extra echo or reverb on that audio data.
And we can do it as a life performance.
It works very well for electronic and dance music.
Because the timing resolution isn't that great.
I have tried just a co-vitch.
It's not that brilliant at it to be fair.
But I cannot play just a co-vitch either.
And I created a virtual live musician.
So each of them is sending out MIDI data to my keyboard.
So okay, now play this section.
Now play that section.
All the way through.
And we've got speech recognition in four lines of code.
So I can now put vocals on top of the songs.
I think it still works as well.
I've not done it for a while.
And Alexa, I don't want to say that.
So you realize it was running JavaScript.
If you wanted to make Alexa do something,
you would upload a chunk of JavaScript to AWS.
And that would process your intensity essentially.
You would give it, you know, I want the user to say this and this.
I then want you to give me back the data where this variable contains the data.
The week that they say this variable will contain the place that they're finding out the weather, for example.
And you can take all of this and you return back just one object that says,
speech.
This is what I want you to say in return.
And then we can control our Dreno board.
Thanks to Johnny Fives.
Of course, we've got the web, USB stuff.
We can just talk to anything that's attached.
We're not worried about the security or privacy things for that.
That doesn't matter.
But we can do it.
And there is actually a thing.
If you've tried to do this web MIDI thing and you're talking to keyboards,
if one tab is using that keyboard,
if the other tab can also see what MIDI data is going across.
Then we come to all the frameworks and other software things that come up.
Shall we talk about JavaScript frameworks?
No, because it's dull.
What's the best framework I always get?
What one are you going to pay me to use?
And then that will be my favorite.
So in buff inclusions, JavaScript began as this little language that I was using
just to change hover.
And I think that's pretty much all anyone else did at the time.
And then there's a library.
And then it's the payment.
Nobody's all of this stuff.
It's more than just the ecosystem.
We've only seen from every other talk today how big it's growing.
To the point of no single human could actually drop all of what's going on in that ecosystem.
So if we have times I'll take questions but first I'm going to update my scorecard.
There we go.
That's the 25th talk.
And with that I'll say thank you.
Good afternoon.
All right.
Thank you, Steve.