I really love Tumblr. I reeeeaaaaaallllly, really love Tumblr! For me it is a weekend craft box, a simple kit of magazine scraps and pipe cleaners and markers and white paste. It is a place where I can experiment with ugly bits and bad code. I am free here to make weird, experimental, emotional, ridiculous, collaborative, anonymous, curatorial, and archival things.
Tumblr in many ways is a perfect pro-am tool (another current obsession of mine: pro-am tools that give anyone access to the resources and ability to create in unpolished, imperfect, low-budget, lo-fi ways. And many of them come with communities hungry for that creativity). But for anyone breaking through the wall of out-of-box tumblogging, you’re likely to run into the limitations of the tool. Developing and customizing themes can be a chore with Tumblr’s in-browser customization panel. Their code editor is a feat of engineering and design, but for any serious development, it can get pretty frustrating. You can write locally, but are stuck with a messy process of copy, paste, save, tab over, refresh, view, repeat.
I have discovered — ready for this?!? — an easy way to do semi-local, semi-live development on your Tumblog!
Simple (semi) Local Development for Tumblr
1. Upload your CSS/JS files to a folder in dropbox (make sure this location won’t change during development).
1. Right click the file in dropbox and select “share dropbox link”. You’ll get a link that looks something like this: https://www.dropbox.com/s/abcdef1234567/main.css
2. Append that link with “?dl=1”. That changes the link from Dropbox’s default view document link to a download link. Since you are linking to this file as a page resource, you’ll want your site to be downloading just the CSS file on page load. If you link to Dropbox’s view link, the browser won’t know what to do with it. Now you just go use link tag in the <head> of your theme code to reference this file.
3. Edit your CSS/JS file in your favorite code editor — no more janky in-browser code editor! Use LiveReload to dynamically process your changes live. Just set LiveReload to watch the project folder on dropbox. Then, in your browser, go to the live page you are working on and turn on LiveReload. Everytime you hit “⌘S”, it will force a refresh of the page resources — instead of getting an entire page refresh, only your CSS or JS will update — which is pretty great!
This is not true local development like you get in Wordpress. You still need an internet connection. You are still editing content and code that is on both Tumblr’s and Dropbox’s servers. But it FEELS like local development. It is fast and live and automatic.There is a short delay, but it is soooooooo much more tolerable than working in the Tumblr code editor, saving, tabbing over to the live page, and force refreshing (which sometimes doesn’t grab the new CSS since the existing CSS caches).
Good luck! Make great things! Leave more tips if you have them!