Online Experiments #3: The Web Developer's Toolbox
It’s been a while since the last post in this series. I haven’t been totally idle. I’ve built a whole load of online experiments, and developed a series of workshops on the material I’ll be covering in these posts. The next few posts should come fairly soon.
It’s always been useful to be able to run experiments online. Post COVID-19, it’s essential. In this series of posts, I cover what you need to know to move your research online. The posts will be (roughly) as follows:
- How the Web Works
- Choosing the Right Tools for the Job
- The Web Developer’s Toolbox
- Setting the Scene: HTML and CSS
- Saving Data [coming later]
- The Fancy Stuff: Animation, Canvas Rendering, Multimedia, and More [coming later]
Working through lockdown, you don’t get a lot of feedback on what you write. If you have any comments on anything in these posts, including critical ones, I want to hear from you! Let me know what you think in the comments below, on twitter, or by email (
You are not the first person who has had to build a website. Web development is a multi-billion pound industry, and huge swathes of time and effort have gone into creating tools and resources that make this easier. In this post, I cover some tools you should be familiar with before we get to work.
- W3schools is an older site which can also be useful, although it’s out of date in places.
- Google also have a useful web developers site, although it doesn’t cover the basics as well as the Mozilla one.
- The Web Demystified YouTube series looks good.
- CSS Tricks has some great examples of the fancier things you can do with CSS.
- https://www.smashingmagazine.com/ is for the real nerds.
- Hakim El Hattab creates some beautiful stuff using the tools we’ll be learning about. Good for inspiration, and for stealing ideas.
All web browsers come with a set of built-in tools for inspecting and debugging the code underlying the websites you visit. This post has details on how to access these tools on each browser (I’ll be using Firefox, and you can find out more about the Firefox developer tools here). There are a few related tools that we’ll need.
Inspector tool lets us hover the mouse cursor over specific chunks of HTML code in the DOM (lower left), and highlights the visible section on the page generated by that code, if any (top). It also lets us do the opposite, using the picker tool just to the left of “Inspector” button, where we hover over bits of the page and see the corresponding code. Selecting an element using either of these tools brings up information about the CSS styles applied to that element (centre and right columns), for instance showing that the reason the words “Main Heading” are in red is that we’ve set the
color property of all
h1 elements to
red on line 4 of our
One of the main uses of the developer tools is to manually make changes to your browser’s model of what the page should look like, and see those changes in real time.
It’s worth stressing that this doesn’t mean you’re changing the actual code that’s saved on the server, and that gets sent to other people when they request the page. What you’re making changes to is your browser’s model of the page, which was constructed from the code sent by the server. It’s useful to think of this like the mental models we see in theories of reasoning and reinforcement learning: you’re not changing the things in the external environment (code on the server), but you are updating your mental model of those things. Later, we’ll be using the browser to view pages we’ve created ourselves that are stored on our computers, rather than on a server. These are treated just like pages from the server, which means that we’re not using the Inspector to edit the code saved on our hard drive. Instead, we’ll be using the inspector to figure out what our code should be, and see the changes we make in real time, and then using a code editor (discussed below) to edit our code files accordingly.
Since you’re going to be writing and editing code, you’re going to need a program to do it with. Your operating system includes some kind of an application for editing plain text files, like Nodepad or TextEdit, but using these to write or edit code is a very, very bad idea. Instead, get yourself a specialised code editor. There are, broadly speaking, two kinds available. An integrated development environment (IDE) is an editor designed for one language specifically, and comes with lots of specialised tools for that language. RStudio and the MATLAB editor are both IDEs. A regular code editor is less specialised, but unlike an IDE can be used for writing code in any language (see what happens if you try to write MATLAB code in RStudio, or R code in the MATLAB editor).
Of course, if you already have a code editor you like, you can stick with it. For beginners, I recommend VSCode, which is relatively easy to get the hang of, but also provides some very useful features like code completing suggestions, hints and documentation (from MDN). If you don’t already have a code editor, go get VSCode.
There are a few other tools that are very useful for any kind of coding and software development, but aren’t strictly necessary for learning to build online experiments. Earth Lab have a great set of introductory materials on a lot of this (particularly Git, the command line, and writing good code), aimed at geoscientists but useful for everyone.
Here are some other links to get you started:
- GitHub and Git for version control. See Curating Research Assets: A Tutorial on the Git Version Control System.
- A lot of things that take a great deal of clicking and scrolling to do in a graphical interface can be done quickly and easily on the terminal or command line, if you know how. For web development in particular, it’s useful to be familiar with the BASH terminal. This comes with OSX and Linux systems, and can be installed on Windows. I don’t know a single cohesive introduction to this, but these look useful.
- StackOverflow is a Q&A site for programmers. It’s a badly kept secret that most programmers spend far more time searching for answers on StackOverflow and copying it into their own code than they do actually writing things themselves. There’s no shame in this. Also check out CrossValidated, which is the same thing but for statistics. There’s also one for Psychology and Neuroscience, although it isn’t as popular.