How to 'hack' a library website – a video tutorial by Tim Sherratt

Video transcript

00:00:00:00 - 00:00:28:00

Hi, I’m Tim Sherratt and I'm the creative technologist in residence at the SLV LAB. And I'm going to talk to you today about hacking. But don't worry, I'm not talking to you about those, you know, people in dark rooms wearing black hoodies who are trying to steal your credit card details. What I'm talking about is a positive tradition of hacking, of hacks as a way of fixing things, of working around problems, of actually imagining alternatives.

00:00:28:02 - 00:00:50:20

I'm a historian, and I use hacking as a way of understanding these rich, fabulous online collections which are being made available by libraries, archives, and museums, what we call GLAM organisations. I look at what these collections show and also what they hide, how they work, and sometimes how they don't work. Why do I do this? Well, there's two real reasons.

00:00:50:22 - 00:01:12:17

The first is to see if there are ways that I can help researchers make better use of these collections. If there are particular tools or resources that I can create, which enables them to access information data more easily so they can do different types of research. And for examples of these sorts of hacks. You can go to my site, the GLAM Workbench.

00:01:12:19 - 00:01:36:22

The second reason is that online collections have had an incredible impact on the practice of history and other types of research. And yet, we often don't acknowledge that these sites, these collections, have a history themselves. You know, their content has changed over time as more material has been digitized. The way we search them has changed. The interfaces through which we access them have all changed.

00:01:36:24 - 00:01:59:08

And all of these changes mean that have affected the sorts of questions that we can ask of these collections, the type of research that we can do. So I think it's really important that we develop a critical perspective on the online collections that are being made available by GLAM organizations. And hacking helps me do that.

00:01:59:10 - 00:02:26:10

So hacking for me is a way of understanding. It's a way of imagining alternatives. And it's a way of hopefully fixing some things. So today I'm going to introduce you to a bit of my process sort of hack GLAM hacking 101. And the first thing I'd encourage you to do is learn to read URLs. I mean, I know that sounds a bit funny, but you URLs can actually tell you interesting things about the way a site works.

00:02:26:12 - 00:02:45:12

So as you move through a site, have a look at how the URLs change. If you're doing search queries, for example, look at the stuff after the question mark in your query. There there are, tags and values, things we call parameters, which are sent to the search index. And you can play around with those parameters. Try deleting them.

00:02:45:12 - 00:03:05:15

Try changing some of the values and seeing what happens. You're not going to, you know, bring down the website. And it's a useful way of starting to learn how the backend functions and how that delivers information to you. Another way to understand what's going on, under the hood, is to make use of what's available through your own browser.

00:03:05:17 - 00:03:34:20

So I'm just going to have a look at the State Library website here. And different browsers do this slightly differently, but usually it's a matter of right clicking and selecting ‘Inspect’ and you get this view of sort of what's going on underneath that web page. So what we're seeing here are all the HTML... all the HTML code that makes up a web page that defines the links, the images, all the all the things that you see on the page.

00:03:34:22 - 00:04:03:09

And this can be useful, because it enables you to actually find where particular elements are. And if you're developing tools to take information from a web page or do something with it, then you want to know where the elements are. But you can also do some fun things, with this as well. So if we look, for example, in this case at the little top menu here, and we, have a look at that in the console.

00:04:03:11 - 00:04:17:22

We can see this is it here in this, link tag. And there's the text of that menu item. We can actually go in and actually change this text. So I'm going to change it from what's on to events.

00:04:17:24 - 00:04:44:06

Here it is. Now it says events. Or we can have a look, at this header at the top of the page. You can see down here we actually get some information about the styles of the header, including the color. And I can actually just click on that little color thing. And whoa, we can get all the colors of the rainbow, including this beautiful purple.

00:04:44:08 - 00:05:07:06

So what's happening? How is this possible? Am I actually hacking the State Library website? No, of course. Now, what's happening is that, Well, you know, first of all, let's think about what a web page is. We talk about web pages being published. Right? As if the books which are sent out into the world fully finished. But web pages are more like, blueprints, or instructions.

00:05:07:08 - 00:05:28:05

So they get sent out and received by your browser, and then your browser uses all those instructions to assemble what you see in your browser. So that page that you see has actually been constructed by your browser. And an interesting way to, to, to see that is to go to the network tab, in your, browser console.

00:05:28:05 - 00:06:01:13

In the developer console. And if we reload the page here, we'll say lots of stuff fly past us. And what's going on is that your page is actually loading lots and lots of little files. And they might be JavaScript files. They might be stylesheets, that might be images. It might be bits of data. All of these files are being brought in by your browser and assembled to display that page to you, because this work is actually going on in your browser.

00:06:01:15 - 00:06:28:12

You can intervene, you can change things. You can change what your browser is doing. And that's what we're doing when we're changing that text in the developer console. But of course, doing that in the developer console, those changes are not going to stick around, which you navigate away from the page. They're going to disappear. But there are ways that you can actually start to modify websites which do stick, which you can even share.

00:06:28:14 - 00:06:51:16

So, there are things, for example, called bookmarklet and user scripts. And of course, you're probably familiar with browser extensions, right. That you a little little bits of software that you install that change the way your browser works, they're all quite similar. They all involve bits of JavaScript and they all run on websites to change the way the websites look or behave.

00:06:51:18 - 00:07:19:00

And bookmarklet and user scripts are a nice place to start because you can actually edit them, change and play with them yourself without really knowing too much, technical information. Bookmarklet. They're quite limited in what they can do, but they're good, for example, for changing URLs. Here's an example. So this is, the State Library page, of a digitized item in the State Library's collection.

00:07:19:02 - 00:07:43:09

And what would be interesting to know is if this particular image has been uploaded to the Wikimedia Commons, now, about 500 or so images from the State Library collection are actually available through the Wikimedia Commons. And that means that they can then be used in things like Wikipedia. So how could we find out whether this image is in the Wikipedia commons?

00:07:43:11 - 00:08:05:07

What we're going to do is do a bit of a search of, Wikimedia Commons using this URL held here, the handle URL which uniquely identifies this particular image. So we're going to take that handle URL. We're going to send it off, to the search facility in the Wikimedia Commons. And it's going to tell us whether that image is there.

00:08:05:09 - 00:08:34:01

So if you go back to this little bit of code, that's what this does. It gets the the handle URL from the, the, the web page. And it then attaches that handle URL to a query to the Wikimedia Commons. So that's all the all the code that's involved here. And to turn it into a JavaScript, you just sort of put it all on one line, get rid of all the spaces, and you put a little JavaScript at the front so that your browser knows what to do with it, and then we can actually install it.

00:08:34:03 - 00:08:46:24

So I'm going to copy the content of that user script. I'm going to go to my bookmarks bar here. I'm going to say add page.

00:08:47:00 - 00:08:57:17

Give it a title. Search the Commons. I'm going to now.

00:08:57:19 - 00:09:24:12

Select that. Get rid of that and paste in the user script. Okay. Let's just read that page. Okay. So now I'm just going to click on that little, bookmark that I made. We say it's open the Wikimedia Commons page and we can see here it is indeed found that image in the Wikimedia Commons. Just there. So that's pretty neat.

00:09:24:12 - 00:09:45:04

And we can see how you could use bookmarklet to to explore those sorts of connections between, gland collections and other, resources in the world. What would be even neater, however, is if we actually brought that information in to that web page, rather than sending you off to the Wikimedia Commons page. So how would we do that?

00:09:45:06 - 00:10:10:22

Well, this is where user scripts are fun, because user scripts can actually change the content of a web page. To use a user script. You need to install a browser extension, a user script manager. This, for example, Tampa monkey or violent Monkey are examples of user script managers. And once you've got those user script managers installed, you can install user scripts, but they also have their own little editors built in.

00:10:10:22 - 00:10:35:07

So you can actually create or modify user scripts. So that's where it gets fun. In terms of experimentation. So this is that page again of of from the digitized collections. And this is what a user script can do. We can see here that it's actually brought that link to the Wikimedia Commons and inserted it into the page.

00:10:35:09 - 00:11:05:24

So this is the code of, the, user script here. And we can, install this quite easily using our, our user script manager. So this I've, I've shared this user script, using a service called, GitHub gist, which actually is just a simple way of sharing code. So it opens up like this. And all we do to install this user script now is click on the raw button.

00:11:06:01 - 00:11:29:23

And this brings up the user script manager. And alaskas, if we're going to install and now that is installed. So if we now go back to our image here and it's going to reload the page, if we sort of scroll down the page,

00:11:30:00 - 00:11:52:07

There we have that link to the Wikimedia Commons. So that user script has got that information inserted it into the page. So we don't have to click on anything. It's just there. So this is, you know, the way that user scripts can actually help us, explore collections in new ways. Now there are lots of other user scripts out there.

00:11:52:07 - 00:12:13:21

You've got to be careful if you're installing user scripts, like if you're installing other things. So make sure you know where they're coming from and what they're doing. I've created a few user scripts which enable you to, do things within GLAM collections. So I would encourage you to, you know, do a bit of exploration of, of those user scripts and do a bit of, you know, experimentation yourself.

00:12:13:21 - 00:12:37:03

Try a few, editing a few and creating a few yourself. So that's it for my little introduction to GLAM hacking. And I'd encourage you really to to now think about websites not just as places you go or as things that are published, but as sites for investigation and experimentation. Thanks.

How to 'hack' a library website – a video tutorial by Tim Sherratt

Tim Sherratt, Yeoseop Yoon and Dilan Gunawardana

Further reading

Video transcript