When I created sdegutis.com to be my portfolio website, 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.
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!
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!
So I looked for an argument to
pbpastethat would output the pasteboard’s HTML directly, bypassing TextEdit’s generator. It did have a
-Preferargument, 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.
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
flexboxto work fairly well.
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!
My name is Steven Degutis, and I've been writing software professionally for a decade. During that time, I've written many apps and websites, quite a few technical articles, and kept up-to-date with the rapidly evolving software industry.
If you have software needs for web, mobile, or desktop, and are looking for a seasoned software professional, please reach out to me at email@example.com to set up a phone call.
- Self-employed – present
- Clean Coders – 5 years
- 8th Light – 2 years
- Big Nerd Ranch – 1 year
- Self-employed - 1 year
- Web: full-stack
- iOS (UIKit)
- macOS (Cocoa)
- REST APIs
- AWS / EC2 / ELB
- HTML5 / CSS
Over the past decade, I've written a total of 172 technical articles on various programming languages, frameworks, best practices, and my own projects, as I kept up-to-date and active in the software industry.
Subscribe via RSS / Atom.
- 2017 — "Clean code" isn't actually clean
- 2017 — Passion in your field is overrated
- 2017 — What I learned in 5 days of writing an experimental website
- 2014 — Age of the Polyglot
- 2013 — How to Program
- 2013 — Ignore the Naysayers
- 2013 — Writing Clearly
- 2012 — Reinvent the wheel
- 2010 — Good usability
- 2009 — Twitter is the wrong tool
- 2009 — We're all pretty bad at driving
- 2008 — Why I Code
|August||NDD: Narrative Driven Development|
|August||The truth about TDD|
|August||Macroframeworks vs Microframeworks|
|March||Notes on Haskell Extensions|
|February||Second thoughts on front-end tools|
|February||First thoughts on front-end tools|
|February||Some thoughts on GUIs|
|February||First thoughts on OCaml|
|February||First thoughts on Haskell|
|August||Age of the Polyglot|
|August||The history of Mjolnir|
|August||Quitting the GUI wars|
|June||Lua: my new favorite extension language|
|January||My programming life-goals|
|January||Lingua Latina, Pars I|
|January||Allocating an AST on the stack|
|April||Ruby Accessors Considered Pernicious|
|March||Reinvent the wheel|
Here are some of the projects I'm most proud of. They were created using a variety of technologies, running on several different platforms and OSes. They're all finished products, and many of them are open source.
I made Docks in 2009 for users who wanted to swap out icons in their Dock with a single click. Its unique functionality and design aesthetic attracted the attention of Apple, Engadget, MacWorld, and led to an acquisition of my start-up by Big Nerd Ranch.
This toy was made in a weekend to entertain my 1 year old daughter. It lets you create bubbles with your fingers, which then simulate physics by bumping into each other and falling.
When I couldn't find an app in the App Store that let me make very simple lists extremely quickly, I made one myself. I use it almost every day to organize and track my activities.
I created this app to increase my productivity by letting me move windows around in macOS using keyboard shortcuts. It grew into a community-driven highly extensible app, using Lua for its plugin system.
Implementing this elite social network gave me experience integrating both Apple Pay and credit card payments (via Stripe.com) seamlessly into web apps, for a frictionless and pain-free payment experience.
This isn't just any chatroom. In this web app, you can see what everyone is typing while they type it. I made this in order to scratch my itch for making real-time apps and games, and learned how to use WebSockets in the process.
This was written in 2009, before the time of Slack, when IRC was the main way for programmers to get short-term assistance from each other. Its purpose was to be a beautiful app with an emphasis on simplicity and usability over technical power.
This is an app I actually use every single day. It lets you move windows with global keyboard shortcuts. Since it uses Vim-like key bindings, it should feel pretty natural to any programmer. There's no configuration needed; it Just Works™.
As an evolution of Phoenix, Hydra was my first attempt at embedding a full Lua virtual machine into an Objective-C app, to make a lightweight and efficient window manager that focused on speed, low memory usage, low CPU usage, and overall being gentle on laptop batteries.
These may be tiny, but they're interesting technical feats.
|Lua4Swift||Swift framework for embedding Lua with a native Swift API.|
|choose||Command line fuzzy-matching tool for macOS that uses a GUI|
|music||Command line music daemon for macOS that only speaks JSON|
|hecto||Command line text editor with an embedded Lua plugin system|
|ZephSharp||Window manager for Windows using Clojure for scripting|
|management||Minimalist EC2 configuration & deployment tool in Ruby.|
|go.assert||Assertion helper package for writing tests in Go.|
|go.shattr||Go library for printing shell-attributed strings to stdout.|
|OCDSpec2||Objective-C based testing framework with Xcode integration.|