I’ve gone to great lengths for this silence
source link: https://getkiss.org/blog/20191004a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
I’ve spent a lot of time ensuring this website remains small, simple and fast. To quote Futurama “When You Do Things Right, People Won’t Be Sure You’ve Done Anything at All”. I’ve gone to great lengths for this silence.
The generation process
This website is statically generated from a simple shell script using pandoc , with every page written in basic markdown .
As this site contains near zero images, I optimize each image by hand using Compress or Die
and load a webp
or jpg
image depending on browser support.
Every page shares the same CSS style-sheet and I also minify this by hand. I’ve found that a lot of CSS minifiers actually increase the file size.
Why is it fast?
Every page is only a single HTTP request
*. To achieve this, each page is entirely self-contained. A page is comprised of the HTML with the entirety of the CSS inlined in <style>
tags.
As an example, the end result is a grand total of 3.0KB forgetkiss.org all contained in a single HTTP request.
*With the exception of the Screenshots page.
Analytics
They don’t belong here.I don’t know how many people visit this website nor do I know anything about you!
Besides, it’d be unfair for me to browse the web with Ublock Origin plus JavaScript disabled and then track you on my site.
Removing the favicon
The favicon has also been put to rest. This isn’t as simple as not setting one! All of the major browsers will request a favicon even if one hasn’t been set .
The workaround is to simply inline a favicon in each page. Through a lot of tinkering I have found the smallest inline favicon which ensures zero HTTP requests .
Behold: <link href=data:, rel=icon>
Update
You may have noticed this site now has a favicon. You may have also noticed that each page is still only a single web request!
Through firing up Grafx2 ( a pixel art editor ) and various optimization techniques I have created a simple favicon for the site.
This is a simple 4 color favicon ( 1 color being the transparent background
) in gif
format and base64
encoded to be embeddable in HTML.
<link href="data:image/gif;base64,R0lGODlhEAAQAPH/AAAAAP8AAP8AN////yH5BAUAAAQALAAAAAAQABAAAAM2SLrc/jA+QBUFM2iqA2bAMHSktwCCWJIYEIyvKLOuJt+wV69ry5cfwu7WCVp2RSPoUpE4n4sEADs=" rel=icon>
I don’t know if I’ll keep this around or not, time will tell. Regardless, this was a fun excercise!
Fonts
No external fonts are in use. The body’s font-family
is set to sans-serif
and will use whatever font is browser’s default.
JavaScript
No JavaScript is used anywhere on the website. It isn’t needed and is therefore omitted. Each page is strictly a document comprised of information.
HTML
The HTML is minified using a single sed
command! I’ll leave the dissection of the command to you, the reader. It’s a fun exercise as sed
is more powerful than people realise.
Behold: sed ':a;N;$!ba;s|>\s*<|><|g'
CSS
As mentioned above the CSS is inlined in each page inside <style>
tags and it is minified by hand. I use various techniques to reduce its size.
All unnecessary white-space is removed ( ul{display:block}
). This is arguably the easiest minification step to do yourself.
Shorthand rules are used wherever possible ( font:
in place of font-*
and background:
in place of background-*
). A lot of these are circumstantial.
Classes are avoided and IDs are instead used. This is actually a HTML minification technique ( id=a
vs class=a
). It’s even better if you’re able to stick strictly to styling HTML tags!
All colors used on this site have a 3 character long shorthand. This enables the use of #fff
instead of #ffffff
. This is really easy to do if Web Safe Colors
are used.
The CSS on this website is still far from perfect however! The hardest minification technique ( at least for me ) is the removal of unused, unneeded or unapplied CSS rules. I’m still having fun with this one.
Conclusion
I will continue to chip away the source of this site, however diminishing the end results may be. This is just who I am. If there’s wiggle room, I’ll wiggle.
The full un-generated source for this website can be found here: https://github.com/kisslinux/website
Get in touch
If you have any further questions, feel free tocontact me.
Recommend
-
6
Abusing “Phantom Types” to Encode List Lengths Into Their Type posted by Craig Gidney on September 10, 2012...
-
8
Line lengths, or the Pro Puppy Punting League is now open Yesterday's post about excessively long lines of code has generated some reader feedback. To be honest, it's rather...
-
1
Recording vectors of different lengths in a matrix / data frame advertisements I have a numeric called area of length 166860. This consists of...
-
2
Multidimensional table lengths in Java advertisements I need to find the lengths of a multidimensional array with non equal indices. For exa...
-
4
Microsoft PC Game Pass now shows game lengths based on different playstyles From only the main story to 100% completionist By
-
5
Check if 2 arrays of unequal lengths will coincide at any index if you keep repeating them. Check if 2 arrays of unequal lengths wil...
-
44
Improve default line lengths in subtitle files #314 ...
-
1
Bing Chat now supports longer message lengths and more in the latest update...
-
4
Yasho Ratna Gupta May 3, 2023 3 minute read...
-
1
P Kaushik Srinivas June 17, 2023 2 minute rea...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK