Popular posts

I end up building a lot of my own project-specific and task-specific tools for the work that I do. Here is an example of each from this week:

1) The last 'project-specific' tool I built was a static site generator in 4 lines of shell script:

for file in *.md */*.md
  echo "Converting "(echo "../$file" | sed '$s/\.md$/.html/')
  pandoc $file -f markdown -t html5 -H template/header-prod.html -B template/nav.html -A template/footer-prod.html -o (echo "../$file" | sed '$s/\.md$/.html/') -s
end

I'm writing the content for a website, and I wanted a workflow like this:

• Write content in markdown
• Build HTML pages from those markdown files
• Host static HTML on a custom domain (any web server, or github pages, amazon S3, etc)

I was able to write a shell script that uses pandoc to convert my markdown content into HTML, and then using Transmit I can synchronize that folder on the machine I'm working on with a live web server. Here's a quick 45 second tour of that workflow where I deploy a fresh change to the live hosted website:

2) The last 'task-specific' tool I built was a little code editing overlay for tinkering around with CSS on any site already loaded into your web browser. I needed to style a form that had been generated without CSS, and I wanted to see the changes instantly in the browser as I wrote CSS, and also be able to copy & paste everything I had written from the browser into my editor to save the changes when I was happy with what I saw. Here's what I needed:

// Create <style> tag
var tag = document.createElement('style')
tag.id = 'styler'
document.head.appendChild(tag)

// Create <textarea>
var textarea = document.createElement('textarea')
textarea.id = 'texter'
textarea.addEventListener('input', function() {
  styler.innerHTML = texter.value
})
document.body.appendChild(textarea)

// Style <textarea>
document.head.innerHTML += `
<style>
  #texter {
    box-sizing: border-box;
    position: fixed;
    margin: 0;
    padding: 1em;
    width: 100%;
    height: 100px;
    bottom: 0;
    right: 0;
    font-size: 18pt;
    font-family: 'Fira Code', monospace;
    color: black !important;
    background: white !important;
    opacity: .3;
    z-index: 99999;
    transition:
      height .2s ease-in-out,
      opacity .2s ease-in-out
    ;
  }
  #texter:hover {
    opacity: .8;
    height: 80%;
  }
</style>`

I ended up writing this bit of JavaScript that you can copy & paste into the JS console in your web browser, and it was a big help for styling that form yesterday.

This is a screen capture of me using the overlay, but not the original page I was working on:

So I hope that gives you an idea of the sort of tools I end up making day to day as I work on different things. This sort of tooling never shows up in the end result of what I'm building, but it's a key part of how it all gets put together :D