Sometimes I see sites with ASCII art hidden in comments in their source code. I’ve long admired the retro computer nerdiness of ASCII art. At times, I’ve wanted to add some to my site, but have been reluctant because of the extra bites it would add to page weight, the difficulty in making it look good, the lack of a subject I felt worth it, and the problems they can have with differing fonts and display widths. However, after adding an easter egg recently, I was more receptive to the idea when reminded about it by the source code of archive.org.
I spent some time this past weekend trying various different ASCII versions of my name. Some examples:
βββββββ βββββββ ββββββ β β
β β β β β β β
β β β β β β β
β β β β β β
β βββββββ ββββββ β
_______ _______ _____ . .
| | | | ) \ /
| | | | < \ /
| | | | ) |
| \_____/ |____/ |
β’β’β’β’β’β’β’ β’β’β’β’β’ β’β’β’β’β’β’ β’ β’
β’ β’ β’ β’ β’ β’ β’
β’ β’ β’ β’ β’ β’ β’
β’ β’ β’ β’ β’ β’
β’ β’β’β’β’β’ β’β’β’β’β’β’ β’
....... ....... ...... . .
: : : : : . .
: : : : Β·: . .
: : : : : :
: :.....: :....: :
A full-name version made entirely of my intials was wide and not very legible:
β’β’β’β’β’β’β’ β’β’β’β’β’ β’β’β’β’β’β’ β’ β’
β’ β’ β’ β’ β’ β’ β’
β’ β’ β’ β’ β’β’ β’ β’
β’ β’ β’ β’ β’ β’
β’ β’β’β’β’β’ β’β’β’β’β’β’ β’
β’ β’ β’β’β’ β’β’β’β’ β’ β’ β’β’β’β’β’β’β’ β’ β’ β’β’β’β’β’β’β’ β’β’β’β’β’β’β’ β’β’β’β’β’β’β’
β’ β’ β’ β’ β’ β’ β’ β’ β’β’ β’ β’ β’ β’ β’ β’ β’
β’ β’ β’ β’β’β’β’β’β’β’ β’ β’β’ β’β’β’β’β’β’β’ β’ β’ β’ β’ β’ β’β’β’β’β’β’β’
β’ β’ β’ β’ β’ β’ β’ β’β’ β’ β’ β’ β’ β’ β’ β’
β’ β’ β’ β’ β’β’β’β’ β’ β’ β’β’β’β’β’β’β’ β’ β’ β’β’β’β’β’β’β’ β’β’β’β’β’β’β’ β’β’β’β’β’β’β’
A small full-name version is only 55 characters wide for both names and 193 characters total, but didn’t look great in the font my browsers were using for source and seemed a bit boring:
Β―TΒ― |Β―| |Β―) \ / ^ ^ /Β―\ |Β―Β― | / |Β―Β― ^ | Β―Β―7 Β―TΒ― |Β―Β―
| | | | \ | |V| |Β―| | |< |Β―Β― |\| / | |Β―Β―
| |_| |_/ | | | | | |__ | \ |__ | | /__ _L_ |__
The one I finally settled on was big and bold, really announcing itself:
._______. _____ ._____ __ _.
|__ __| / _ \ | _ \ \ \ / /
| | | | | || |_| / \ v /
| | | | | || _ \ | |
| | | |_| || |_| \ | |
|_| \_____/ |______/ |_|
__ __ _ ______ ._. __._______.._ ._. _______.._______.._______.
| \ / | / \ / __ \| | / /| ._____|| \ | ||_____ ||__ __|| ._____|
| \ / | / β \ | / \|| | / / | |_____.| \ | | / / | | | |_____.
| |\Λ/| || / \ || | | < | ._____|| |\ \| | / / | | | ._____|
| | Λ | || | | || \___/Β―|| | \ \ | |_____.| | \ | / /____ .__| |__.| |_____.
|_| |_||_| |_| \_____/ |_| \_\|_______||_| \_||_______||_______||_______|
This added in total 717 bytes raw / 264 bytes gzipped to my page weight (with the comment wrapper). This is more than I would like for something that can’t be seen by visiting my site normally. But I’m a developer, to some extend showcasing my source with my site, so I think it is worth it. It’s 81 characters wide, which is just slightly wider than the 80 that is considered a safe limit. As to the subject, my name is sort of my brand. I may switch to something more interesting or lighter weight later, but I like it for my first attempt.
I put it below my <meta charset /> to ensure all browsers get the proper encoding. I put it below my <title> for good measure. I might even move it down to the bottom of the document to minimize its affects when parsing, but that will also make it less noticeable.
View my site’s source to see the result.