DOMs Just Wanna Have Fun

As part of my coding bootcamp preparation, I’ve been studying DOM manipulation.
When you study the DOM, sooner or later you will hear the magic word: Console.

To access the wonderful word of the Console, all you need to do is open a page on the Chrome browser and right-click on it. On the drop-down menu, select Inspect and be ready to be amazed.

The page will be split in two: on one side you will see your website and on the other, all the nodes in that page.

I’m not a fan of the console for testing reasons, but it can be used for other fantastic purposes, like having fun.

And what better way to have fun than to make your boss believe that someone hacked the company’s website?

If you are a bad person like myself and want to have fun while learning, manipulating the DOM can be the perfect occasion to practice on something new and, at the same time, have a good (evil) laugh.

Make sure your boss is not aware of the fact that is, indeed, possible changing the appearance of your company website even when you don’t have access to it.

Even if you DO have the power to edit the website code, is not advisable to do it for obvious reasons.

Once you’re in the Console, click on the icon that you can find on the left-hand corner as indicated by the arrow.

Once you click that icon, you can mouse-over the elements of your website to see it highlighted like shown in the gif below. You will be able to see how every element of the webpage is referred to on its code, and at the same time, your Element page will “redirect” to the exact line where that element is on the HTML code.

This will allow you to identify immediately the element you want to edit.

In my case, I wanted to replace the top-most part of the page. Specifically, I wanted to delete the element containing the picture with the course names, the menu bar, and I just wanted to replace the text inside the white box with a picture.

Once the picture is selected, the corresponding block of HTML code is highlighted.

See those three dots in the blue box? Clicking on it will open a little menu.

I will click on Delete element since this is what I wish to do.

This will make the highlighted code disappear from the Element page, and so will the element itself on the webpage.

I will do the same for the menu bar below. Now, both the picture and the menu are gone.

Time to have some fun.

Fill the screen with police-style sentences like “This website is under investigation”.

I don’t want to get in trouble here, so for the purpose of this blog post, I will use a fake warning sign.

I selected the content of the box, clicked on the 3-dot menu and this time I selected “Edit as HTML” from the drop-down menu. The code will become editable and you will be able to replace it with the HTML code you want.

I simply removed the existing text and added the image I wanted.

Place the huge logo of some menacing-looking company that could make you go bankrupt if pissed off. Even though your company makes everything legally, this will still scare your boss a bit.

In my case, he was just angry and was already talking about making some phone calls to clarify the issue.

See what happens when you have the conscience clear, kids?

Try not to laugh while you shout something along the line of: “OMFG what is this thing? What happened to our websiteeeee?”

Their first reaction will probably be: “Refresh the page!”.

Since this will, obviously, make your hard work disappeared BE PREPARED!! Say something like: “I already did. This thing comes and goes. One minute ago wasn’t there, and now here it is again”.

And open the website on another tab just to prove your point.

Make sure your boss has an incredible sense of humour before attempting these kinds of jokes.

This should have probably been Step 1. My bad.

Accept the fact that you might get fired.

I need a new job now.

Related posts:

I used to love jumping from one small talk to the next at parties. I thought it was very efficient. You get the maximum results for minimal effort. You know, investing very little but getting to know…

Most projects go global while launching a new token. On one hand, that might be a good decision as there is no need to have a physical office and one can can choose any appealing jurisdiction on the…

Collective memory is the shared knowledge or information of an event that occurred. This information is pulled from multiple people’s memories when discussing an issue or event from the past. For…