A few days ago, I came across this project: St4kOverFlow. This is Stack Overflow micro optimized into 4k bytes.
I found this idea really interesting and tried to implement the same with Instagram. I started making an Instagram-like webpage, though with limited features.
You can search for profiles, explore hashtag pages, zoom-in images, etc.
DEMO
At first, all I wanted was to get it working. So I wrote an HTML document in around 200 lines (HTML/CSS/JS), without worrying about memory usage.
The page was ready and working expected.
Now it was time to make it smaller.
As a good first step, I started with renaming variables. profileURL became p. Almost all of the variables in the document are single character alphabets (Yes, terrible). It includes the names of attributes like id, class, etc. Doing this reduced the file size but it was far from small.
Styling (CSS):
CSS takes a lot of memory (comparatively). I tried to use as little CSS as possible. Also, In-line styling is far more memory-efficient. In fact, I wrote a few CSS attributes multiple times rather than defining a reusable CSS class, and it ended up saving me a few bytes.
A little change in styling makes a significant impact on memory.
Changing {text-align:left;float:left;} to {text-align,float:left;} saves 8 bytes, and there were multiple instances where this was done. So, I was able to fairly good amount of space in the CSS part.
JavaScript:
After renaming variables there was not a lot of scope to save space in the scripting part. I did some improvements in the logical part, though. I read this article JavaScript Semicolon Insertion: Everything you need to know, and it helped me omit a few semi-colons out of the document. However, most of them had to be restored at the end (as the document had to be contained in one line).
SVG:
There was no way I could use logos available online. The logo itself would consume 25% from the memory.
I was able to create my own version, thanks to the Instagram logo that is just a rectangle and two circles.
This wasn't the best Instagram logo but it was fine considering the fact that it was only 234 bytes.
<svg width="32" height="32" style="stroke:black;fill: white;stroke-width:2;"> <rect x="2" y="2" rx="6" ry="6" width="24" height="24"/> <circle cx="14" cy="14" r="6"/> <circle cx="21" cy="7" r="1" stroke-width="1" fill="black" /></svg>
I referred to this w3 article, and it was enough.
Finally, I wanted to attach a link to the Github repository. Luckily u.nu exists, and it shortened the long-ass GitHub URL to just u.nu/h1fw.
Issues and improvements:
The current webpage displays just 12 latest posts from a profile (which can be fixed with some tweaks), and there is no support for video.
Other than this, the document still has more room for optimization.
I hope you enjoyed reading this article.
Do read Python One-Liners You Should Know, if you are interested in Python.
Top comments (0)