Softbox

This is a page that just colors the background color a solid value, specfied in the anchor part of the URL. If you don't already know what the different parts of a URL are, I'm going to explain them in the section below. If you do, feel free to skip it.

Anatomy of a URL

We are going to use the following example for the rest of this section and detail how your web browser—probably Firefox, Safari, Edge, or Chrome—uses each part to fetch web addresses from the internet.

https://lab.quinngale.com/softbox/#663399

Breaking that into pieces, we have:

  • https://: This is the scheme, or protocol, that your browser uses. 99% of the time it is going to start with http or more likely https. That tells the browser to prepare to recive HTML code. Another one you may see sometimes is mailto. If things are set up, it will start an email to the email address that follows it.
  • lab: This is the subdomain. For my domain, I use them as containers of sorts to separate areas of concern. lab.quinngale.com is where I throw all of my experiments, and assets.quinngale.com is where I throw things like images I want to load on websites instead of putting them onto GitHub and slowing things down. Subdomains are arbitrary and there isn't a limit to how many of them can exist on a given domain. They are joined to the domain by a "." character.
  • quinngale.com: This is the domain. quinngale is a name that belongs to the com top-level domain. It's almost like a subdomain but not quite.
  • /softbox: On this web server /softbox points to the location on the server at /var/www/lab.quinngale.com/hmtl/softbox/. This has been configured by me in the Apache configuration files. This path only points the server to the softbox directory, and stops short of actually naming any files. Not to worry though, the convention is that the server will serve the file index.html if no file is specified and it exists. Using /softbox/index.html instead is going to do the exact same thing.
  • #663399: Formally, anything after the # is called the anchor and it tells the browser what part of the document to go to. on a normal web page, like Wikipedia, this will automatically link your browser to different headings in the page, like #References for references that the article uses. To JavaScript, everything at and after the # character is called the hash, and because I'm primarily a JavaScript person, that's what we are going to call it going forward. And we aren't using it for it's intended purpose.

How it works

Pass a valid hex color code into the hash (What are hex color codes? https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color can tell you!) and the included JavaScript first verify that the hex code is valid through a regular expression, and assuming that it passes, it will then set the background color to that hex code. For example, https://lab.quinngale.com/softbox#ff0000 will take you to a bright red background, and https://lab.quinngale.com/softbox#5AB7DF will take you to a light blue page. Capitalization doesn't matter here. CSS will gladly accept either version. If no hash is specified or it isn't valid, an alert box will tell you and then redirect to a black page (#000000).

Double click to enter into fullscreen mode, double click again or hit escape on your keyboard to exit.

Why

The hash part of the URL starts with a # character and hex color codes also start with a # character. That's the entire line of thought behind creating the page.