Fix badly written websites by hacking them on-the-fly


Apologies for the bad formatting – we’re in the middle of upgrading our website to something cleaner!

This week we’re applying to Bethnal Green Ventures Accelerator Programme. The folks at BGV are lovely, are doing great things in supporting Social Good projects (e.g. us).

First step in applying for something: read the application form. Work out what you need to say. What the other person/organization is looking for. Then you can think about how (much) your project/team aligns with that – if it’s a good match, you can start preparing your pitch for why they should work with you / fund you / whatever.

But wait! What is this? The application form has a horrible advert glued to the front, preventing you from seeing the form:

Screen Shot 2015-04-15 at 17.00.14

Not only is that advert trying to capture your personal details so they can advertise to you (or something) in future, but it’s broken:

The application form is right there, I can see it! but I can’t get to it, can’t scroll it, can’t read it. Can’t sign up by email (I might cover that in a future post – what happens when web-developers copy/paste code from other people without reading it or checking it’s correct). We’re blocked!

…or are we?

Firefox (and Chrome) to the rescue

The Web was originally created in a spirit of simplicity, sharing, and collaborating – a reflection perhaps of the mindset of the academics who built it. It was expected and encouraged that anyone – with zero programming experience – could read the HTML source of a webpage and understand it enough to modify, copy, reproduce, improve it.

Even today, you can always see the full source code of any webpage you visit (it’s running on YOUR computer, so it’s only fair you should be able to vet it, ensure it has no viruses, etc!). There have been attempts to remove or downgrade this, but there are even greater efforts to defend it (if you want to know more, look at The Web We Want movement – great people doing great work).

These days, the HTML source is massively complex. So … the major browsers now have built-in features that let you edit any webpage easily, taking us back to the freedom and simplicity of the early Web. You can edit any and every webpage – it only makes changes on the version displayed on your computer, and it will be reset when you navigate away from the page.

But for our current predicament, that’s all we need…

Editing a webpage

Go to the offending webpage in Firefox, and open the Inspector (currently on the menu: Tools > Web Developer > Inspector)

Screen Shot 2015-04-15 at 17.13.50

A new window appears showing the source code of the webpage – and as you move your mouse around, it hilights both “what you’re looking at” and “the source code that generates that”.

Screen Shot 2015-04-15 at 17.15.00

Now all we need is a little rudimentary knowledge of HTML and CSS..

Making part of a webpage disappear

There are many many ways to achieve this (challenge: find three different ways of doing it. Try all three, make sure they all work). But I’m going to use CSS, and one of the commands I find easy to remember:

“display: none”

display: none – “the page will be displayed as if the element is not there:”

  1. Move the mouse until the popup box is hilighted
  2. Click on it. This selects it in the source code, and stops moving it around
  3. Now you can move the mouse down to the source code.
  4. Try moving the mouse up and down a few lines, and see how more/less of the webpage gets hilighted – while preserving the selection you already made
  5. One line in particular (currently about 5 lines up) when I move mouse over it, the whole blacked-out background gets hilighted.
  6. From the source code, we can see that the line above that “includes” this line, and all the other bits of the popup – but nothing else. If we disabled that encompassing line we’d get rid of all the bits we don’t want, while preserving what we do want

Editing the source code

The source code window at bottom is fine, but it’s not user-friendly for editing.

Over at the right hand side there’s another mini-window where Firefox neatly lays-out all the CSS commands for us, making it much easier to read (and change).

If you position the mouse cursor inside the { and } braces for the “element” section, and click, you can start editing the core CSS for the line of code you have selected.

So…

  1. In the big source code window, select the line we want to remove/hide by clicking on it. This is the “containing” line we referred to above
  2. In the small source code window, click the line before the closing curly-brace (“}”), and you should be able to start editing
  3. Type: “display: none” and hit enter

…and immediately, the popup disappears!

Success

Now we can see the webpage, and scroll it.

Screen Shot 2015-04-15 at 17.27.09

Note: We cannot actually submit the form – this hack hasn’t broken the website, or changed how it works. All it’s done is to remove the visually blocking element and let us access what was being displayed all along, in the background. But that’s fine – we’ll come back later, after we’ve prepared our answers, and register, login as normal.

(Assuming the nice people at F6S have fixed their login system by then – I’m sure they will, I’ve already emailed their support team about it)

Obviously, you shouldn’t “need” to do this; a better-designed website would allow you to view the content without using silly tricks to try and block you from accessing it. I am absolutely sure that the folks at BGV want their content to be seen – they already made it public.

But the reality is that no company (or website) is perfect, and often we need to take matters into our own hands rather than asking / waiting on the phone line to an overworked Support person who doesn’t understand the problem, and isn’t empowered to fix it.

With computers, and the web, it’s cheaper and easier to go ahead and help ourselves. So we did.

Leave a comment