Deconstructing the Endless Horse
A few years ago, I had no understanding or knowledge of software development and programming languages. At the same time, I came across a website of a horse with unusually long legs.
No matter how much you scrolled down the page, the legs would never stop and gives way to the name of the website, endless.horse.
After scrolling (endlessly..) to see if there is a lower bounds, I made the assumption that this website would infinitely scroll. However, I did not know why or how this effect was taking place. Fast forward to the present day and I now have the answer to what is happening behind the scenes.
How to Access the Source Code
The source code of a website refers to the HTML or other code that will generate the web page on a browser. You can check the source code of any web page, but getting the source code is different for each browser. Below are some of the ways you can access the source code in Microsoft Edge, Google Chrome, Mozilla Firefox, and Apple Safari.
In Microsoft Edge:
- Press F12 or Ctrl+U on your keyboard. Then click the “Elements” tab.
- Press the “…” button at the top-right of the window. Click “Developer Tools”. Then click the “Elements” tab.
In Google Chrome:
- Press Ctrl+U on your keyboard.
- Click the Customize and control Google Chrome icon at the top-right of the window (this icon is 3 dots from top to bottom). Click “More Tools”. Then click “Developer Tools” (this feature can also be accessed by pressing Ctrl+Shift+I on your keyboard). Then click the “Elements” tab.
In Mozilla Firefox:
- Press Ctrl+U on your keyboard.
- Press Alt on your keyboard to bring up the menu bar. Click “Tools” from the menu bar. Then click “Web Developer” followed by “Page Source”.
- Click the Open menu icon at the top-right of the window (this icon is indicated by 3 horizontal bars from top to bottom). Click “Web Developer”. Then click “Page Source”.
In Apple Safari:
- Press Command + Option + U on your keyboard.
- Right-click on a web page and click “Show page source”.
- Click the Develop menu. Then click “Show page source”.
The source code of the web page looks like this (click ‘Run Pen’ to view the HTML):
The thing to notice in the source code is <script src=”/jquery.jscroll.js”></script>. This line adds jScroll which is a jQuery plugin. jScroll allows for infinite scrolling/auto-paging. But where is jScroll used in all of this?
<script type="text/javascript">
$(function () {
$('#horse').jscroll({
padding: 2000,
loadingHtml: ''
});
});
</script>In this piece of code, it selects the id “horse” and loads the contents of legs.html. If we view the contents of legs.html, we can see the following:
<pre id="segment"> | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | | | | | || | </pre>
<a href="legs.html"></a>There are two parts to legs.html:
- The “legs” of the horse which make up its contents.
- A reference to itself.
The reference to itself will continue to load if you scroll down repeatedly.
It’s Not a Horse Without This…
If you noticed, the horse content is enclosed in <pre> tags. <pre> are used for preformatted text. These HTML tags preserve both spaces and line breaks. By using this tag, the shape of the horse and its legs are kept in tact.
Sources
- 4 Easy Ways to View Source Code (with Pictures) — wikiHow
https://www.wikihow.com/View-Source-Code
Code Snippets taken from
- Endless Horse
http://endless.horse/
