How I created a lightning fast hero image for my portfolio website, using good old fashioned ingenuity

When I created my portfolio website sdegutis.com, I wanted to give it character and avoid having it look bland. So I searched for stock photos to use as a “hero image” on the top header of my site. The most interesting ones to me were images of code, but I couldn’t find any that I liked enough.

But then it hit me: I really like the way my code works in my IDE, so why not just take a screenshot of my code and use that? Which is exactly what I did at first. But it was a flawed plan: I had to make the image wide enough to look good on all screen sizes, but the smallest I could get the file size was 800kb, and it loaded noticeably slowly for me on mobile Safari.

Instead of fiddling with gzip compression and other nginx settings, or looking for a free CDN, I wanted to get creative. Then it hit me again: why not make an HTML version of exactly what I saw in my IDE? It would load incredibly fast while still looking pretty.

1. My first step was to see if I could just copy text from VS Code (literally Cmd+C) — knowing that macOS allows programs to add data to the pasteboard in multiple formats — hoping that it would copy it as HTML. Pasting into TextEdit proved a success: it had colorized text!
2. Then I tried saving the TextEdit file as an HTML file, but the code that it generated was not very self-contained or efficient. It would have needed quite a bit of work to embed it into another HTML file, allowing me to position and style it how I wanted. At this point I was almost out of hope, until I remembered that this was TextEdit’s version of the HTML, not the original HTML generated by VS Code!
3. So I looked for an argument to pbpaste that would output the pasteboard’s HTML directly, bypassing TextEdit’s generator. It did have a -Prefer argument, but that didn’t allow for HTML. After googling, I found a StackOverflow post explaining some cryptic bash command containing an AppleScript sub-command, and voila, I had clean, self-contained HTML! So I turned that into an executable bash script.
4. Then I had to rip out the image in my <header> and replace it with a 3-column row of HTML which I would replace with the embedded code (using a custom Node script that loaded the files directly and put them into Pug). After some adjustments, I found flexbox to work fairly well.
5. Finally, I developed a workflow of copying about 15–20 lines of code in VS Code, using the paste-script to pipe it to a file, and then seeing what it looked like in the HTML page it was embedded in. After a few tries, I finally got something that looked decent enough on both desktop and mobile, and since it was all text, it loads instantaneously!