URLs & Human memory
A way to remember things
Look at these 3 URLs :
Yes , that’s clearly a youtube video. Watch it >_<
https://www.google.com/search?q=best+restaurants+in+las+vegas&hl=en#ip=1
A simple google search on restaurants , nothing special.
THAT is a regular GeeksForGeeks search page , again , nothing special for a CS grad. , right?
If you are from a technical background , you’d have noticed a pattern like this in all 3 [ It’s okay if you didn’t:) ] :
scheme://host:port/path?query#fragmentOR this :
scheme://username@host:port/path?key=value&key2=value2#fragmentIt is important that we understand the compartmentalisation of those
Uniform Resource Locators.
INSTEAD , have you ever wondered upon why a URL was designed the way it is right now & how it matters?
Did you notice all the shapes & characters used in this url pattern other than the alphabets? No need to scroll up , I’ll list the common ones here :
- A dot .
- A hyphen -
- A double Forward slash //
- A single Forward slash /
- An underscore _
- Percentage %
- A hashtag #
- An equal to =
- A colon :
- At the rate @
- An Ampersand &
- A plus sign +
- And finally, a question mark ?
Imagine a URL without any of these (Sounds like a wordle word).
httpsgooglecomqredshoesize9
Now , a mini flashback for your context window :
URLs were created in 1990 by the same guy who spelled ‘WWW’ [World Wide Web] for the first time - The great Tim Berners-Lee. And Interestingly , things like email , Unix folder Paths , and the Internet itself existed before URLs.
I know , it sounds confusing , but yeah , the 70s kids were able to send an email to connected computers using SMTP [Simple Mail Transfer Protocol] and transfer documents through FTP [File Transfer Protocol].
Get Vidya V’s stories in your inbox
Join Medium for free to get updates from this writer.
Now , let me connect the bridge between URLs , punctuations of language of URLs , and Human thoughts & familiarity. Trust me , it’s gonna get interesting:)
A colon : "http:" -> says the type of communication is HTTP
It was already being used as a natural separator for years. Remember writing your name on top of new school notebooks like this?
Name : Vidya V
Class : X-A
And writing the time as 12:30 p.m. ? So our brain’s been wired to identify it and think that a colon visually says :“The thing after me is related to the thing before me.” . Same logic applies to port as well , apple.com:8080 means :
“host : port 8080”.
Hierarchy — ‘A forward slash /’ : apple.com/products/phones/17-pro
The biggest borrowed idea ,forward slash. The Unix file systems were already listing the folder structure like this :
/
home/
vidya/
photos/
cat.jpegUnix basically made ‘/’ look familiar to all the CS crazies. Each ‘/’
says: “Now go one level further.”
As for the outer to inner hierarchy , Think of directing a new visitor in a mall trying to buy a shoe , where there are arrow marks at every corner , something like : “Floor 2 ->” , “Nike<-” , “Shoes->” , “Running shoes (Below)”. You’re progressively identifying where something is , from an outer most location to that exact spot. Hope that explains the use of ‘/’ in URLs , the most common character.
A divider or a Boundary — ‘A double forward slash //’ : https://
A stretchy thought. Back when people used to write & do calculations on paper (Ikr , old times) , usually there was a habit of including a ‘//’ by the end of all the math , something like this :
10 × 5 = 50
50 + 20 = 70 //Also used in some poetic quotations in english literature as well :
Roses are red /
Violets are blue // ...Associate them :
On paper:
//→ boundary/end of one thing.
In a URL://→ boundary; the authority/address part comes next
At @ : https://vidya@apple.com/profile
Emails existed almost 2 decades before web. Ray Tomlinson , the first guy to send an email [He tested it with “QWERTYUIOP” >_<] , chose @ for network email addresses in 1971. So , vidya@apple.com , literally meant ->
Vidya AT apple.com , also because ‘@’ ain’t something that’s commonly found inside people’s names. So when URL syntax needed to represent user information at a particular host, the same idea made sense.
“A dot .” : https://www.apple.com/
DNS [Domain Name System , the internet’s Contact list] was developed in the 1980s, before the Web, and the idea of ‘.’ came from domains. The dots show the separate levels of the name. So , Visualize maps.google.com as :
com --> A top level domain
|___ google --> A domain registered under .com
|___ maps --> A subdomain under google.comSo , they already had that naming system andd URLs simply incorporated it.
DID U KNOW : There’s actually an invisible dot by the end of it.
So it’s “maps.google.com.”. That last dot represents the DNS root. We usually leave it out because browsers implicitly understand it. So , it’s actually :
. --> DNS root
|___ com
|___ google
|___ mapsPercent — % : A special escape : .com/what%20is%20json
The Programming languages & protocols had already developed the general idea of escaping special characters. That’s why URLs use percent encoding.
What if it need to send a character that normally has a special meaning? Use % to inform that the following characters are not meant to be intepreted as it is , instead it’s encoded.
Think of a “Hello World” in a google search. It’s represented as
Hello%20world
in a URL. That’s because 20 is the hexadecimal representation of the byte for a space in ASCII!
A Hashtag # Fragment : /wiki/website#About
Before the web , people usually mentioned a specific numbered item using a hash like this :
Room #12
Order #583
Item #7It just means , the specifically identified one. For example , in this URL :
wikipedia.org/wiki/Website#Types , the browser uses the URL “wikipedia.org/wiki/Website” to get the wikipedia page about websites from the web and the “#Types” is the exact fragment or segment in that webpage that will be scrolled to immediately by your browser like Chrome or Edge.
DID U KNOW : Calling something like #types a “hashtag” came much later actually. In a URL, the proper term is a fragment or fragment identifier.
Other generic URL punctuations :
- An equal to “=” - that’s used for exactly what it’s named after:)
…color=red… - An ampersand “&” - used to add queries in a URL , like in sentences.
…size=7&color=red… - A question mark “?” - used to introduce a query (question) in a URL
…/search?q=perfumes… - A plus sign “+” - often used for spaces , similar to % in URLs
…?q=how+to+not+be+bored…
That sums up how I remember & interpret the /Language+of+URLs#Human-memory. Anytime you see a big URL from now on, hope this helps understand them simply. Now , Go back to the top and take a look at those 3 URLs again & thank me by following Vidya V !
