Did you know that your web browser has a built-in programming environment, that you can use right now without installing anything at all?
- No, I did not know that.
- Yes, I knew that already, why do you think I need you to tell me that?
- What on earth are you talking about?
It’s true. In most linguistics departments nowadays, there is some kind of class related to programming. That might be a computational linguistics class (often using the Python programming language together with a library like Natural Language Toolkit), or else a
sadistics statistics course, using R.
Fair warning: I’m assuming that you’re using a reasonably recent browser. If you never think about updating your browser, you probably are using a reasonably up-to-date browser, because nowadays they update automatically. If something seems weird, try a different browser, or try downloading a newer one, or come here and shake your fist (lovingly) at us.
|Browser||OS||Key combination||Menus||More information|
|Firefox||Mac||⌘+Option +I||Tools > Web Developer > Toggle Tools||Mozilla.org|
|Firefox||Windows, Linux||Ctrl+Shift+I||Tools > Web Developer > Toggle Tools||Mozilla.org|
|Chrome||Mac||⌘+Option +J||View > Developer > Developer Tools||Google.com|
|Edge||Mac||⌘+Option +I||Tools > Developer > Developer tools…||Microsoft.com|
Okay, so you opened this weird developer tools thing. Why is this happening? What is your life?
All we’re going to do right now is help you to try to make something happen to your web page. It might weird you out. That would be good.
Before we start lighting things on fire, keep the following in mind:
None of what I’m going to show you how to do is destructive in any way.
It might seem destructive, but it isn’t. Exactly how those two things can be true will require a little more explanation. For now, just live in the now.
Okay, so, you have managed to open your developer tools. I’m a Firefox guy myself, so here’s what I see:
Okay, admittedly, that’s a lot of stuff.. We’re only going to be using a few bits and pieces here
If you are using Firefox, here’s an easy, fun thing you can do in the dev tools: that little camera icon near the right side of the page will create a screenshot of the content of whatever page you are viewing! That can be kind of useful sometimes. Give it a try — it will save the image somewhere on your computer, again, exactly where depends on your browser and OS. Screenshots are also possible on other browsers, but the exact way you do it is different.
Console tab at the top of the dev tools (it’s named the same in all browsers, amazingly enough).
As you can see, as soon as you type
Now, notice that we’ve got a new blue prompt arrow, and the back-arrow is followed by a green
This is a non-trivial accomplishment. Except it is pretty trivial. Let’s do some things that are… well, weirder. Try typing out this beast (better yet, just cut-and-paste it into your console and press enter):
document.body.style.backgroundColor = "fuchsia"
Ouch. Let’s go back to something not so painful:
document.body.style.backgroundColor = "transparent"
So, we have to pause right here for an obligatory security warning:
BE CAREFUL IF SOMEONE TELLS YOU TO CUT-AND-PASTE CODE YOU DON’T UNDERSTAND INTO THE CONSOLE.
For instance, try opening the console when you are on Facebook.com — you will see a gigantic scary warning about scams that export private information via the console:
But you can trust little old me. I just wanted to make your web page fuschia, okay?
Now I will proceed to tell you to cut-and-paste code you don’t understand into the console.
Let’s do something weirder. Try this:
document.body.style.transform = "rotate(180deg)"
This is the Australian version of the site.
Haha, hahaha. Hahaha. Sorry.
You can turn off that madness like this:
document.body.style.transform = 'rotate(0)'
Please be clear that you are not “hacking” by doing these things. In fact, the server where this website lives,
https://forum.docling.net, has no idea that you changed the background color or spun your page upside down. Why is that? Because you’re only modifying your copy of the page. When you go to that URL, your browser downloads the page to your computer, and stores it in some directory you probably never look at. Then, it renders the page into a kind of “representation” of the content — to do this, it uses something called the “Document Object Model” or “The DOM”. (Stop that snickering in the back!)
I think that the DOM is the best thing about the web platform. It’s the basis for turning static, unchanging documents into interactive, dynamic applications. And for us, that means making applications for language documentation. Just about everything that we do in ELAN, Flex, even (to some extent) Praat could be programmed to work within the web platform.
Even better, we can imagine new kinds of applications, that make our work more fun, more reusable, more useful. And we can build them out of web technology.
It’s a little strange to think about, but using the web platform does not necessarily mean that your creations — or, crucially, the data you work with — will be “on” the web. You can use technology as if it were a desktop app. We’re going to look into all this kind of thing in upcoming parts of this series.
The web platform is… well, magic. You can learn a little bit at the time. You can make stuff. You can be a part of the next generation of software for linguistics and language documentation.