By Rich Knight, Richard Lawrence & Gerry WhiteSenior Web Developer, Technical Director
11 min read
Monday, 26th July 2021
Let me explain;
What powers do Thanos’s infinity stones grant him?
- Power Stone: The ability to destroy whole civilisations
- Space Stone: The ability to move through space through a wormhole
- Time Stone: The ability to alter and manipulate time
- Reality Stone: The ability to transform matter
- Mind Stone: The ability to manipulate the minds of others
- Soul Stone: The power over life and death
These powers give Thanos "near" limitless power when he combines them and there's very little that can stop him.
The POWER stone
I'm not following, what can I destroy?
Why does this matter?
This is where our power comes from. With a server-side language, for example PHP, everything you see on a given web page happened BEFORE you saw it. Any calculations, any logic, anything that needed to happen, happened before the rendering of the page in your browser started.
Let me give you an example of when we might want to flex our newly found power to destroy something...
If you're anything like me, I can't stand when I'm being force-fed adverts. Youtube quite often gives you something like this:
Usually, I'd just choose to ignore it, but now I wield the power stone, it would be rude not to make good use of it!
Then I need to decide what the target of my wrath actually is.
To do this I'm going to right-click on the merch section in the web page, select "inspect" and it's going to open the console, which will show me the code behind this page.
Now it's a simple case of starting on the highlighted line that the browser has selected for us, and working upward until we find the top parent tag for this element (as we hover over each line the browser will highlight what is inside this element on the page itself, so keep going until you find the right line).
As you can see here, this line contains an ID named "merch-shelf".
All I need my Chrome extension to run is one very short line of code:
Now, every single Youtube page I visit, if the merchandise advertisement exists, my extension will destroy it for me so that I don't have to look at it, nice huh?
The SPACE stone
Sure, destroying stuff is nice. But it's not exactly ultimate power, is it?
No, for that, we need some other tricks up our sleeves.
The space stone grants Thanos the power to move through space in an instant without needing to travel between point A and point B.
What if I told you that we could transport data from somewhere else (another website even) and deposit it into our own script so that we can use it ourselves?
Pretty sweet I hear you say, believe it or not, this happens A LOT.
Developers use it on their own websites to get data from other server-side scripts on their own websites and load the data into the current page without having to reload or navigate elsewhere, and also to get data from third party services.
In fact, you might have heard about APIs (application programming interface). Their usage is widespread on the web and most massive services have one, Facebook, Spotify, Youtube etc.
This request will politely ask the destination server for some data whilst giving it some parameters to work with, and hopefully, this server will return to us what we asked for!
What we have now, is the ability to pull in WHATEVER WE WANT, from anywhere, to use on our page. That's already getting pretty powerful I'd say!
The TIME Stone
They say time stands still for no man.
This is all starting to get a bit trippy now, what am I talking about, time doesn't exist, good grief...
Hang in there, let me try and explain this in a way that makes sense to us as web users.
Currently in the year 2021, what is one of the most important factors on any website, before you even consider things like content, UI, UX etc?
If you have the greatest website in the history of mankind but it takes an age to load, nobody is going to use it. We know this because of the emphasis people like Google give load time in their ranking algorithms.
Cast your mind back to earlier when I talked about server-side languages.
Well, you could consider HTML, CSS, PHP, etc to fit into that category, everything that you are seeing from these languages has already happened before the page loaded.
With each passing second, customers are being lost!
What can be done about this?
Let's fire up our time stone and see what benefit it can bring here.
The biggest offender when it comes to page load speed could be complex SQL queries that take some time to complete.
So rather than waiting for that, before we can render the page, what if we just loaded the page and pulled that data into the content AFTER the page had loaded?
You might have noticed a similar thing happening on sites like Facebook where you get greyed out "placeholder" posts before your actual news feed loads properly.
Can we take this a step further, what else can we load after the page has rendered (asynchronously)?
In order to defer it, all we need to do is add the word "defer" to the script tag:
Anything else we can do?
Sure is, what about CSS, can we defer that as well?
Normally, a CSS file would be loaded in the section of the HTML:
var css = document.createElement('link');
css.href = '*url to our css document*';
css.rel = 'stylesheet';
css.type = 'text/css';
You probably will get a "flash of un-styled content", but this can be mitigated by a simple preloader animation.
So what's the benefit of doing this?
Instead of having to load all of these CSS and JS assets, and having to execute all of these time-consuming SQL queries before we can show a page, now we can get the page loaded MUCH faster, and pull in the content at our leisure.
This not only gives the user much better feedback, but also gives us much shorter response times for things like "first meaningful paint" and "time to interactive" in Google PageSpeed insights.
Which are obviously highly beneficial when it comes to not getting a ticking off from Google.
The REALITY Stone/The MIND Stone
For Thanos, the reality stone is something that can alter reality, or transform matter to anything he so desires.
He has been known to use it to create simulated realities that are indistinguishable from reality for the heroes he faces, in order to get what he wants.
One such example of this is something called XSS (Cross-Site Scripting).
If we combine the metaphor of the reality stone with that of the mind stone, which allows Thanos to manipulate the minds of others, we might start to see some similarities with XSS.
To do this, an attacker would need to find a vulnerability to allow them to inject the script and the methods that people use to find these are far outside the scope of this article, but just knowing that this is possible is enough for now.
In some cases, this might be used simply to send data that you insert into the web page to an alternate location rather than where you intended it to go. hink signing up for an account and sending your username and password to an attacker without even knowing it.
Or, it might take the form of downloading malicious files to your computer which can be exploited in other ways later on.
Just because you are on the right website, and you trust the owners, doesn't mean that you are 100% safe all of the times said website has been compromised.
The SOUL stone
The power that the soul stone grants Thanos is confusing at best, but it appears that it gives him control over life and death.
Furthermore, when it's combined with the power of the other stones, it gives him control over ALL life and death, allowing him to do his infamous "snap" which wiped out half of all life in the universe.
I like to think of this as control over the balance of natural order in the Marvel Universe. Having this control gives you ultimate power, there is nothing at this point you don't have control over.
The soul stone in a sense completes the power of all of the other stones.
However, with great power comes great responsibility.
You can use it to achieve damn near anything you want, it can create, destroy, change, request, send and generally manipulate anything and everything you could hope for. But it can prove incredibly difficult to debug sometimes.
Despite all of this, once you finally have that moment where everything falls into place, a new world of possibilities is going to open up for you and you too can wield the power of the infinity gauntlet.
If you watched Endgame last year, you will have seen that the story in the film had played out 14,000,605 times until the heroes found a way to finally beat Thanos and save the day!
It's been around for a long time and it'll be with us for a long time to come.