Slanted Elements with CSS3
22 Apr 2013 / permalink
I wrote up a post over on the Foundry detailing how to use CSS3 transforms to work with slanted elements. Check it out!
A Fluid Userscript that adds Read it Later to Twitter
25 Mar 2013 / permalink
I use and love Craig Mod’s Twitter for Minimalists. It is a great way to experience the Twitter web client without some of the cruft. However, the biggest thing I miss from third party apps like Tweetbot is the ability to send interesting links directly to my Instapaper account with one click.
Since Twitter for Minimalists runs inside a Fluid instance I can set custom Userstyles (like Twitter for Minimalists) and Userscripts. I decided to write a Userscript that would parse through every tweet and determine if it had a link and - if it did - append a Send to Instapaper button to the bottom of the tweet. I was able to create the button using Instapaper’s iFrame Button API. You can find the the finished code for the Read it Later Userscript here.
Hope you find it useful!
Rename utility
14 Feb 2013 / permalink
I often find myself needing to rename batches of files. I find myself doing this when I have a set of images that are named image-2x.png, and I duplicate them for 1x assests. I tried Automator to see if I could whip up a quick service that would remove the ‘-2x’ from my 1x assests. I couldn’t figure it out in 5 minutes, so I gave up (par for the course with these types of things). I then googled around a bit and turned up several tutorials using awk, sed, or some other custom function. None of that sounded very fun or easy; I then stumbled upon rename.
Rename is a standard Unix utility that simply renames files given a pattern to search for and something (or nothing) to replace the pattern with. It supports standard things like globbing, and even supports testing your query to see the results! A basic command looks like this: rename 's/2x copy//g' *.jpg Simple and perfect. In this case rename is going to strip out ‘2x copy’ from any files that have that pattern and replace it with nothing, hence the double slashes at the end. That’s all there is to it. Hopefully this helps someone else who just wants to rename a batch of files.
To get rename on a Mac, just brew it, brew install rename.
What Matters
11 Jan 2013 / permalink
A post from David Heinemeier Hansson over at 37 Signals on settling into your work for the long term. This is something I’ve been thinking about lately, largely because I’ve found a place at Sparkbox that is such a fantastic place to work.
David provides two solid reasons for why it’s worth it to stay put at an organization for both the employee and the employeer. This one stuck out to me the most.
Focus on the residue of knowledge and practices carried over from game to game is far more important than worrying about the output of any one game.
Andy Budd on Time
11 Jan 2013 / permalink
Fantastic Pastry Box post from Andy Budd, I’ll quote the final thought here, but it’s worth it to read the entire thing
The best designers and developers rarely have more talent. They simply have more time.
IP Address Alfred Extension
08 Dec 2012 / permalink
A few days ago I posted a little bash function that displays your internal IP address and copies it to your clipboard. I created this to scratch my own itch as I’m always testing web projects in different virtual machines and on different devices.
The function worked great, however it was still a pain typing in the address on another device. So I created this Alfred Extension, Internal IP Address, which takes the IP address from the bash function and displays it in large type via Alfred for easy typing on a different device.
Alfred doesn’t support any commands to display a result in large type, so I had to use a little Applescript to get around this limitation. Once the IP address is captured, I use Applescript to open Alfred back up, paste in the IP address, and trigger the keyboard shortcut for large type. It’s a little hacky but it does what I wanted without loading up another app or installing another dependency.
Feel free to tweak the extension to fit your own workflow. One way would be to remove the Applescript portion and just echo out the IP address to Notification Center. Hopefully you find it useful.
Bash Function - IP Address to Clipboard
06 Dec 2012 / permalink
I have to admit, I am addicted to customizing my bash experience. Yesterday, I came up with a little, one-off function that smooths over a point of friction in my workflow – working with my internal IP address.
During any project, I am often testing in virtual machines. On my development machine I have my host file hacked to manage all the dev URLs. The friction point is constantly having to look up my IP address to test in VMs, or on other devices. This bash function simply parses out my IP address from the results of ‘ifconfig’ and copies that IP address to my clipboard. Now, instead of jumping into the Network pane to see my IP, or reading through ifconfig myself, I can simply type “ip”, and jump back to my VM and paste in the address. The function also displays the IP address on the command line ready for easy typing into a mobile device.
function ip {
IP=$(ifconfig | grep 'inet 1' | cut -c 6- | awk 'NR==2 {print $1}')
echo $IP
echo $IP | pbcopy
}
A few Bash Tips
20 Nov 2012 / permalink
Here are a few custom little functions and aliases that I use everyday, these are all pretty straightforward, you can tweak any of these to fit your specific workflow.
MAMP Virtual Hosts
It’s a pain to set up virtual hosts, which is why I wrote a bash script to automate that horrible process. Here is the script, I’ll explain how it works below (or check out the Gist):
#!/bin/bash
RED="\033[0;31m"
YELLOW="\033[33m"
REDBG="\033[0;41m"
WHITE="\033[1;37m"
NC="\033[0m"
mkdir -p /Applications/MAMP/Library/vhosts;
mkdir -p /Applications/MAMP/Library/vhosts/domains;
if [ "$1" = "create" ] || [ "$1" = "add" ]; then
# Ask for document root
echo -e "${RED}Enter the document root (relative to 'htdocs'):${NC}";
read documentRoot;
# Ask for domain name
echo -e "${RED}Enter local domain: (eg. local.com):${NC}";
read domain;
# Ask for port number
echo -e "${RED}Enter MAMP Port Nubmer:${NC}";
read port;
# Add vhost
touch /Applications/MAMP/Library/vhosts/domains/$domain;
echo "<VirtualHost *:$port>
DocumentRoot "/Applications/MAMP/htdocs/$documentRoot"
ServerName $domain
<Directory "/Applications/MAMP/htdocs/$documentRoot">
Options All
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>" >> /Applications/MAMP/Library/vhosts/domains/$domain;
echo "127.0.0.1 $domain" >> /etc/hosts;
# Restart MAMP
/Applications/MAMP/bin/apache2/bin/apachectl restart;
echo -e "Finished. ${REDBG}${WHITE}$domain:$port${NC} has been copied to your clipboard.";
echo "$domain:$port" | pbcopy;
fi
if [ "$1" = "remove" ] || [ "$1" = "delete" ]; then
echo -e "${RED}Here are the current custom local domains:${NC}"
for file in /Applications/MAMP/Library/vhosts/domains/*
do
if [ -f "$file" ];then
echo -e "${YELLOW}${file##/*/}${NC}"
fi
done
echo -e "${RED}Enter the site name you wish to remove:${NC}"
read siteName;
sed -i.bak "/$siteName/d" /etc/hosts;
rm /Applications/MAMP/Library/vhosts/domains/$siteName;
echo -e "${YELLOW}$siteName removed."
fi
The script is set up to work with each web project being stored in a directory under htdocs in the MAMP folder. If you want to use a different folder structure, simply change the paths in the script to reflect your particular workflow.
The script asks for three pieces of info, the domain you want, the directory name, and the MAMP port number. The script creates a new directory called ‘vhosts’ and a sub directory called ‘vhosts/domains’. Each file in ‘domains’ is a single domain, which makes this all easier to manage. The script then modifies your etc/hosts file with the new domain information. Finally, the script restarts MAMP apache and copies the new domain address to your clipboard.
The last piece to this puzzle is the function that fires this script off.
function vhost {
sudo ~/.dotfiles/osx/mamp_vh.sh $1
}
Just specify the path to the script and you are set.
Jump to project directory
Another pain point is jumping to a specific project directory quickly, and without a lot of path typing. I wrote a function that lists all the folders in my htdocs directory and lets me select the one I want to go to.
function ht {
local BLUE="\033[0;34m"
local RED="\033[0;31m"
local WHITE="\033[0;37m"
local NC="\033[0m"
echo -e "${BLUE}Projects:${WHITE}"
for file in /Applications/MAMP/htdocs/*
do
if [ -d "$file" ];then
echo ${file##/*/}
fi
done
echo -e "${RED}Which Project?${NC}"
read dir;
cd /Applications/MAMP/htdocs/$dir
}
Again, simply change the paths in the script to adapt this to your workflow.
Colored History Grep
One little alias that I snagged from the numerous dotfile repos on Github is the ‘h’ alias which simply shortcuts the ‘history’ command. I love this little command, but I found myself typing out h | grep keyword to get a list of commands specific to a keyword. I shortened this up and added color highlighting:
function hg {
history | grep --color=auto $1
}
Simply pass the function the term you are looking for. Remember you can execute previous functions by typing !999 (999 being the number of the command).
Keep tweaking and hacking
Hopefully these little utilities were useful in someway, feel free to comment or offer advice by reaching out on twitter or adn.
Update
I forgot to mention that I have two documents, one called “functions” and the other “aliases”, which I source at the top of my .bash_profile like this (You can see all my dotfiles over on Github):
. /.dotfiles/bash/functions
. /.dotfiles/bash/aliases
Sourcing these files makes the functions and aliases inside them available on the command line. To use any of the functions or aliases in this post you have to source them to your bash, then you can simply type the alias or function name plus any arguments:
> vhost create
> hg term
> ht
Thanks to Jack McDade for the advice to include some examples.
Rands on Email
22 Oct 2012 / permalink
Michael Lopp delivers a great piece on dealing with Email. I especially loved this quote:
Email is imprecise. It is easy to misinterpret. Email is a digital force of nature. It’s not going anywhere, but email, while convenient and sometimes efficient, is dehumanizing.
Do yourself a favor and read the whole thing.
Lyza Gardner on Laying Down our Burdens
22 Oct 2012 / permalink
Part of being successful on the pan-device web is relinquishing control of things we never had control of in the first place. Some of this you have probably heard. Web design processes are being re-imagined with an emphasis on adaptation and a rejection of pixel-perfect mockups. Content is increasingly given a position of centrality, and design flows around it.
Just go read the whole thing.