Optimization: Instagram in 4000 bytes of memory
Tags: webdev, javascript, sideprojects
Published: 2020-01-30 10:14:56

A few days ago, I came across this project: [St4kOverFlow](http://danlec.com/st4k). 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.

![Screenshot](https://user-images.githubusercontent.com/30762976/73440303-0dce1400-4377-11ea-9421-cd4be452abf4.png)

![Screenshot](https://user-images.githubusercontent.com/30762976/73440352-25a59800-4377-11ea-808b-d2c837e376de.png)

### [DEMO](https://htmlpreview.github.io/?https://github.com/adarshpunj/Tinygram/blob/master/tinygram.html)

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](https://inimino.org/~inimino/blog/javascript_semicolons), 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](https://www.w3schools.com/graphics/svg_rect.asp), and it was enough.

Finally, I wanted to attach a link to the Github repository. Luckily [u.nu](https://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](https://www.pythongasm.com/python-one-liners-you-should-know/), if you are interested in Python.

#### [View code on Github](https://github.com/adarshpunj/Tinygram)