Clixelblog

Wherein Nate gets the geek out.

[clixel]

Gitlog Automagical Timesheet Filler Outer Redux

I've been using variations on this script for several years to spit out my git commit log in a timesheet-friendly format:

https://blog.clixel.com/post/111391696763/daily-git-log-for-your-timesheet

I've now refined it to a li'l bash script that has a few extra tricks up its sleeve:

https://gist.github.com/natebeaty/b3edf108434a2d16cc600bd0686e92a8

You set your name in the script, drop it in your ~/bin dir and chmod +x it, then run gitlog from a repo dir with various options:

# Usage: # gitlog = last 8 hours of commits # gitlog 48 = last 48 hours of commits # gitlog 2018-12-20 = all commits on 12/20/2018 # gitlog yesterday = all commits since yesterday # gitlog 1 week ago = all commits since a week ago

Not the most elegant script, could be fancier—but I sure use the hell out of it as-is.

[clixel]

Chrome 63 breaks local *.dev domains

I did a complete wipe and reinstall of macOS High Sierra on my aging 2012 mbp, thinking it would solve all my random woes (false). As I was setting up my dev environment, I was baffled when both Safari and Chrome were redirecting all *.dev domain requests to https. Console showed no 301 redirects. Wth? I thought it was something I messed up in Apache config and spent a few hours beating my head against the keyboard to no avail.

Turns out .dev is a TLD owned by Google, and they recently preloaded HSTS rules for the TLD which means you cannot use http with *.dev any more. Fun!

I decided to switch all my dev domains to *.localhost. (I also toyed around with adding self-signed SSL certs for each *.dev domain, with some luck on my home computer and less luck on my work computer. In the end I decided to just go with switching to *.localhost.)

Here's a quick rundown of things I had to do. Hopefully it helps someone.

I use dnsmasq to avoid having to edit /etc/hosts for every dev domain I work on. This gist has the latest way to do this.

First, add *.localhost to dnsmasq setup:

echo 'address=/.localhost/127.0.0.1' >> $(brew --prefix)/etc/dnsmasq.conf sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/localhost' sudo brew services stop dnsmasq && sudo brew services start dnsmasq

ping foo.localhost for sanity to see if it works. May have to reboot if it doesn't. I did, but it may have been from other finagling.

I use Homebrew Apache and mod_vhost_alias (good tutorial here) so open up the vhost config with subl /usr/local/etc/httpd/extra/httpd-vhosts.conf and add this block:

<virtualhost> ServerAlias localhost *.localhost VirtualDocumentRoot /Users/nate/Sites/%1/web/ UseCanonicalName Off </virtualhost>

sudo apachectl restart

We use Bedrock to make Wordpress development 17% less painful (note document root above with .../web/). The only thing you need to do is update your local .env file with WP_HOME=http://cfs.localhost. If you use the super handy wp-cli you can run wp search-replace 'cfs.dev' 'cfs.localhost' to update db references.

We have long been using this excellent guide from Grav as a jumping off point to set up our dev environments, which already has an update noting this change from Chrome 63.

[clixel]

Simple little Alfred workflow / bash script that allows you to mute audio for a certain number of seconds, which I use to avoid Spotify commercials. (I used to manually mute, and then forget to unmute after 2-3 songs had passed.)

mute-for-x-seconds.zip

Or you can just make a ~/bin/mute script with:

#!/bin/bash osascript -e 'set volume with output muted' if [ $# -eq 1 ] then sleep $1 osascript -e 'set volume without output muted' fi%

and run mute 30 from iTerm when you want to shut up a Spotify ad for 30 seconds.

[clixel]

WebFaction Https Redirects

Yet another thing to file under "beating my head against a wall for hours before figuring out something simple"—argh!

I wanted to redirect all requests to https for a WebFaction-hosted site, and wasn't having any luck with the normal:

RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

I was getting "too many redirects" errors. After digging around I found mention of https redirects on this page with this code:

RewriteEngine On RewriteCond %{HTTP:X-Forwarded-SSL} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Note the %{HTTP:X-Forwarded-SSL} instead of %{HTTPS}.

Well howdy-doody it works now, hallelujah, back to more important coding matters like my giant SVG head navigation.

[clixel]

Sequel Pro bombing after MySQL update

After a brew update and brew upgrade, Sequel Pro suddenly stopped connecting to localhost, bombing without much explanation. Several google searches later, I found this ticket which mentioned running mysql_upgrade.

It's possible I missed a homebrew notice about this, as it updated a ton of packages, but this ended up solving the issue:

mysql_upgrade -u root -p

Followed by restarting mysql:

launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist

[clixel]

libsass, node-sass, gulp-sass, my-ass

This error:

Error: `libsass` bindings not found. Try reinstalling `node-sass`

was showing up in older Bedrock projects, causing two devs to pull some hair out—well one of them still has hair—and it turned out to be a simple update of gulp-sass in the packages.json file:

- "gulp-sass": "^1.3.3", + "gulp-sass": "^2.0.0",

npm update and you're good to go.

[clixel]

Duotone Images With ImageMagick In Wordpress

My dayjob studio Firebelly loves duotone images in their site designs. When we're using Rails, it's pretty easy to use Paperclip or Dragonfly to send along commands to ImageMagick on the fly, e.g.

# Paperclip has_attached_file :image_file, styles: { wallpaper: "1600x1000>" }, convert_options: { wallpaper: "-quality 60 -strip -fill Black -colorize 27% -background Black \\( +clone -fill White -colorize 100 -background \"Gray(70%)\" -vignette 0x65+25%+5% \\) -compose multiply -composite" } # Dragonfly

We're using this technique on a Bedrock/Sage Wordpress site, and I wanted to avoid applying this to every uploaded image via a WP hook. I ended up with this beast of a function (fugly PHP alert) that creates a duotone image using two hex values:

/** * Get header bg for post, duotone treated with the random IHC_BACKGROUND + Dark Blue */ function get_header_bg($post) { $header_bg = false; if (has_post_thumbnail($post->ID)) { $thumb_id = get_post_thumbnail_id($post->ID); $background_image = get_attached_file($thumb_id, 'full', true); $upload_dir = wp_upload_dir(); $base_dir = $upload_dir['basedir'] . '/backgrounds/'; // Build treated filename with thumb_id in case there are filename conflicts $treated_filename = preg_replace("/.+\/(.+)\.(\w{2,5})$/", $thumb_id."-$1-".IHC_BACKGROUND.".$2", $background_image); $treated_image = $base_dir . $treated_filename; // If treated file doesn't exist, create it if (!file_exists($treated_image)) { // Create background directory if necessary if(!file_exists($base_dir)) { mkdir($base_dir); } exec('/usr/local/bin/convert '.$background_image.' -colorspace gray -level +10% +level-colors "#44607f","#'.IHC_BACKGROUND.'" '.$treated_image); } $header_bg = ' style="background-image:url(' . $upload_dir['baseurl'] . '/backgrounds/' . $treated_filename . ');"'; } return $header_bg; }

It's always so difficult finding info on this sort of thing in ImageMagick forums, thought I'd give it a home in case someone else needs it. The basic command is:

convert source.jpg -colorspace gray -level +10% +level-colors "#44607f","#c1d6d8" treated.jpg

Which will give you this sort of treatment:

Update 4/2017: If newer versions of ImageMagick are giving you trouble, you can use this variation to get a similar duotone effect:

convert in.jpg +profile "*" -resize 1400x -quality 65 -modulate 100,0 -size 256x1! gradient:#44607f-#C2D6D9 -clut out.jpg

[clixel]

String Interpolation Using Rails ActiveRecord Objects

I often find myself wanting to use several attributes of a ActiveRecord object in a string, but have until now been unable to track down exactly how to do that.

Say I have this simple model with a custom method:

class Applicant < ActiveRecord::Base def full_name [first_name,last_name].reject{ |e| e.empty? }.join ' ' end end

If I want to build an email header using that custom method and a few standard attributes, trying this:

subject = "New Application from %{full_name} at %{city}, %{state}" % @applicant

will cough up the error:

ArgumentError: one hash required

Ok, so we need a hash out of our AR object. How about:

subject = "New Application from %{full_name} at %{city}, %{state}" % @applicant.as_json

gives us this:

KeyError: key{full_name} not found

Right! We have to add our custom method manually:

subject = "New Application from %{full_name} at %{city}, %{state}" % @applicant.as_json(methods: :full_name)

Crap! Still failing:

KeyError: key{full_name} not found

Turns out the hash needs to have keys that are symbols. No fear, symbolize_keys to the rescue:

subject = "New Application from %{full_name} at %{city}, %{state}" % @applicant.as_json(methods: :full_name).symbolize_keys

And voila:

"New Application from Nate Beaty at Chicago, IL"

For what seems like such a simple task, this has tripped me up for quite some time, and it's been difficult to Google exactly what was needed to make this happen.

[clixel]

Getting Image Dimensions For Sublime

Sublime Text doesn't have any way to get dimensions for an image in the sidebar yet, though a sidebar API may be coming soon. 1

I've found myself writing this simple script a few times on various machines, so I thought I'd jot it down:

#!/bin/bash FILENAME=`basename $1` DIMS=`/usr/local/bin/identify -format "width: %wpx;\nheight: %hpx;" $1` printf "background: url($FILENAME) no-repeat;\n$DIMS\n" | pbcopy

This uses a Homebrew installed Imagemagick's identify command to toss CSS-ready width/height into your clipboard. I then set up a custom Tool entry inside the-dusty-albeit-still-my-fav-dual-pane-file-manager ForkLift:

And if you want, you can set a keyboard shortcut also. (Note that you have to close prefs after adding your tool, and then cmd-, again to have it show up in the Keyboard Shortcuts pane—one of several minor longstanding bugs I try to ignore.)

Now you can select an image in ForkLift, hit the key command you specified, and then cmd-shift-v will paste it into Sublime Text respecting indentation.

Of course you may need to fix the relative path of the image filename. Still somewhat useful until ST3 manages to support this type of functionality from the sidebar.

This is something I miss from TextMate, where you can just drag an image into your code to do this, even in the ancient 1.x releases: (Granted, it's getting the relative image path wrong here anyway! You just can't win.) ↩︎

[clixel]

Daily Git Log For Your Timesheet

This is probably the most satisfying command-line lifehack of the year for me:

git log --author=Nate --since=1.day.ago --all-match --format='%s' | tail -r | paste -s -d : - | sed -e 's/:/; /g' | pbcopy

This takes all your commit messages for the last day, concatenates them with a semicolon, and shoves them into your clipboard to paste into Harvest (or On The Job if I'm working freelance).

Breakdown:

git log options seem pretty obvious except --format='%s' which outputs just the commit message on each line

tail -r reverses order of lines

paste -s -d : - concatenates & separates each line with a colon

sed -e 's/:/; /g' replaces the colon with a semicolon and a space (couldn't figure out a way to do this in one command)

pbcopy shoves the result into your clipboard on OS X

I'm guessing there's a slightly prettier way to do this, but there's a reason I keep trying to get everyone to start calling me Hacksaw because I've always really wanted a nickname and then I could get a tattoo.

You can also do a a custom span of time e.g. --since=3.days.ago --until=1.day.ago if you want more than just the last day of commits.

UPDATE: If you are in the thick of push battles with your coworker on a project and want to avoid the "Merge branch" lines from git, you can just add sed '/Merge branch/d' to the mix:

git log --author=Nate --since=1.day.ago --all-match --format='%s' | sed '/Merge branch/d' | tail -r | paste -s -d : - | sed -e 's/:/; /g' | pbcopy

[clixel]

Yosemite Pip Install Fix

I was getting compile errors when pip installing anything requiring compilation after upgrading to Yosemite, barfing out all sorts of cryptic nonsense ending with:

error: command '/usr/local/bin/gcc-4.2' failed with exit status 1

Googling that error didn't help, and I tried all sorts of fixes until I realized the real problem was this line in my ~/.bash_profile:

export CC=/usr/local/bin/gcc-4.2

When I removed that, opened a new terminal, reactivated my virtualenv and pip install -r requirements.txt everything worked perfectly. Hopefully this helps someone else who's been having issues after upgrading to Yosemite and have some lingering bash remnants from earlier dev setups.

[clixel]

It's a Prepending Party

I just realized a very powerful and simple feature of CodeKit that has made my life immensely easier, as well as giving a speed boost to my sites.

You can prepend all the libraries you're using on a project at the top of your main javascript file like so:

// @codekit-prepend "mootools-core-1.5.0.js" // @codekit-prepend "mootools-more-1.5.0.js" // @codekit-prepend "shadowbox.js" // @codekit-prepend "chosen.js" // @codekit-prepend "slider.js"

And then set the output to be Minified + source map (for easier debugging):

And then in your footer you can get all your behavior with one HTTP request:

<script src="<?php echo MEDIA_URL; ?>/js/min/application-ck.js" type="text/javascript"></script>

Stupid simple, but for some reason it just hit me that this was possible, and now I use it all the time. I love finding new ways to improve my workflow with CodeKit.

(Underwear drawer notes: yes, I still use MooTools on several of my older sites, as well as scrappy ol' PHP. I have been wooed to jQuery and sexier Ruby + Python methods of coding over the years, but it's good to keep a wide variety of skills in your tool belt.)

[clixel]

Flat File Future

I'm not sure exactly where I entered the rabbit hole, but I saw a mention of Statamic somewhere, and one link led to another until I realized there is a myriad of very slick, flat-file-based frameworks to choose from, in just about any language you prefer.

Perhaps the idea of a barebones, well-orchestrated platform was such a relief because I'd been spending my entire weekend hand-coding PHP to send multi-part MIME order confirmation emails with crusty table markup, in the thick of aging procedural code. From "GOOD GOD WHAT AM I DOING WITH MY LIFE" to "Oh cool, Statamic looks nice."

Statamic just needs PHP 5.3. Pretty slim requirements1. It uses YAML for all config files, and creating plugins looks damn simple, enough to make PHP appear not-too-shabby as a language.

One of the earliest to start this trend is Jekyll, which has been around for some time, looking just gorgeous in its Ruby minimalism suit of adult soothing dark techy hues. Installing it is ridiculously simple:

gem install jekyll jekyll create hotsauce cd hotsauce && jekyll serve

Oo-lala! Like Python? I do. How about Cactus?

sudo easy_install cactus cactus create holysmokes cd holysmokes && cactus serve

Looks familiar! Jekyll comes a little more pre-styled, but they're both very similar concepts. And along with Statamic, they all use a variant of the Django templating language (Cactus uses the real deal), which is fantastic.

But every time I get excited about using one of these handsomely simple frameworks, like Ghost, I remember that most sites I've worked on just aren't minimal enough to be served entirely by these solutions. As soon as you need products or some custom data type the client can manage, or a page that mixes & matches data types (just about every site we do at Firebelly to my chagrin), I'd be fighting against their opinionated limitations.

All said, the next time I decide to redo my portfolio site, or have a simple site to build, I'm definitely going to give one of these a try. Being able to just create a new folder to extend heirarchy, work with markup entirely in inheriting templates, and version control the entire stack sounds damn refreshing.

For now, back to my PHP spaghetti.

Though one thing about Statamic: it's not free. I've noticed a trend emerging where folks are actually -gasp- charging for their work, and as a fellow developer I think this is a fine direction to go in. ↩︎

[clixel]

Hiding Settings Tab in Refinery 2

Quick note of something that took me a while to find: if you install the Refinery Blog engine but don't need the Settings tab showing in the admin, you can easily hide it by adding config/initializers/refinery/settings.rb with:

Refinery::Settings.configure do |config| config.enable_interface = false end

(This is for refinerycms / refinerycms-blog v2.1.0)

[clixel]

Gasp! Turns out you can disable spell check in any Lion text field (when it's active) under Edit > Spelling and Grammar.

This was driving me batshit crazy writing commit messages in GitX, causing all sorts of "corrections" on my blathering commits, often riddled with techtastic abbreviations that OS X tried desperately to convert to English.

It only took me about a year to look for this option.

[clixel]

Where I Live, 2013 Edition

Sublime Text (now at v3 beta) is where I’ve spent a good portion of my life over the last 2-1/2 years. It’s a great cave as far as code caves go.

Sadly Photoshop CC still sits in my toolbelt, Acorn is getting so damn good (same with Pixelmator) but it’s still not quite enough to supplant this required, ever-worsening POS. I pine for the day indie apps kick the crap out of the CC suite.

Tweetbot because I spend entirely too much time blathering in 140-char chunks.

GitX (L) because it’s a perfect git GUI. And free. I’ve tried so many and keep coming back to GitX (L).

On The Job for time tracking & invoicing. It’s not perfect but it’s the closest I could find to my simple needs. For many years I used Billable and only switched because I didn’t like the successor, Profit Train.

Chromium because I trust Google less every day. It’s always a pain finding a download for this. I can’t even find one now.

ForkLift 2 is still in my belt, because there’s nothing quite like it. I still use Transmit for DockSend. ForkLift has sadly been left to pasture by BinaryNights while they focus on Locko, a 1Password clone.

The Hit List is still the best damn to-do app. I don’t opt to pay for the syncing & iOS app. Reminders is my on-the-go queue for tasks that I dump into Hit List when back at the desk.

Sequel Pro for when you want to navigate MySQL locally. It’s crazy this is free. I just realized you can donate and dropped $10 in the beer fund.

CodeKit was a random purchase to compile Less files, but has become an essential tool for Scss compiling, Javascript combining/minimizing, image optimizing, etc. Hilarious version update notes are a bonus.

iTerm2 became stable enough to replace Terminal.

Notational Velocity is the sharpest text-editing knife. Plays nice with Dropbox folder of plain text files.

[clixel]

Where I Live, 2011 Edition

TextMate has been supplanted by a new fling, Sublime Text 2, shown here with my own icon:

to replace the gray turd that comes supplied. Acorn 3 has finally come along far enough to replace Photoshop for most mockups and simple graphic tasks. Chrome's slightly-enhanced version of WebKit's Inspector is now good enough to replace the only reason to use Geezer Firefox: Firebug. TaskPaper usurped the forever-beta-expiration-updating Hit List, though there's been murmurs of activity in the long-dormant lands of Potion Factory. I've been leaving Transmit open for the single feature ForkLift lacks: DockSend. 

Dark gray version: