markupboy

Articles

Terminal Tip - Copying Your Current Path to the Clipboard

I spend most of my day bouncing between the terminal and TextMate and often need the full path of where ever I happen to be in my shell. OS X comes with a great built-in terminal command - pbcopy - for just such occasions.

Copying your path to the clipboard is as easy as getting the present working directory and piping it to pbcopy

    pwd | pbcopy

I found, though, that this leaves the carriage return at the end of what was copied. We can fix this using the translate characters command tr.

    pwd | tr -d "\r\n" | pbcopy

This will remove all instances of the carriage return / line feed pair coming out of pwd and pass it to your clipboard. Of course, it’s not the easiest thing to remember, so I’ve aliased it to the command getpath in my shell configuration

    alias getpath='pwd | tr -d "\r\n" | pbcopy'

And that’s it. Now when I’m in a terminal session I can simply run getpath and my location in the filesystem is copied right into my clipboard.

Forcing Tab Types Per Language in TextMate

Personally, I’m a hard-tabs guy. I like coding with invisibles enabled, I like being able to adjust the size of my tabs on a whim and I like that I’m not bloating by markup with unnecessary white-space. Unfortunately, some languages and methodologies prefer them so I found myself stuck switching back and forth frequently.

TextMate, being one of (if not THE) best editors for OSX, has a pretty handy solution for this. You can edit a languages bundle to force the default soft tabs setting per language.

Open up the bundle editor ( Bundles -> Bundle Editor -> Show Bundle Editor), click the carrot next to your language of choice to expand that language’s bundle items and find the entry marked “Miscellaneous” . Now, you just need to append to the “shellVariables” object a quick shell variable setting -

shellVariables = (
    {
        name = 'TM_SOFT_TABS';
        value = 'no';
    },
);

If the shellVariables object doesn’t exist, don’t worry, it’s safe to just create a new one. For instance, the default CSS miscellaneous bundle preferences look like this:

{
    smartTypingPairs = (
        ( '"', '"' ),
        ( '(', ')' ),
        ( '{', '}' ),
        ( '[', ']' ),
        ( '"', '"' ),
        ( "'", "'" ),
        ( '`', '`' ),
    );
}

And the new adjusted preferences with soft tabs explicitly disabled:

{
    shellVariables = (
        {
            name = 'TM_SOFT_TABS';
            value = 'no';
        },
    );
    smartTypingPairs = (
        ( '"', '"' ),
        ( '(', ')' ),
        ( '{', '}' ),
        ( '[', ']' ),
        ( '"', '"' ),
        ( "'", "'" ),
        ( '`', '`' ),
    );
}
DevNation, Falls Church

I’m speaking at DevNation on Saturday, August 28th! It’s a really great line-up for a super low price so come join us if you get the chance.

Here are all the pertinent links and downloads from my presentation:

Commafy - Pretty Numbers for Python

I’ve been spending more and more time in Python and Django lately working on side project lostaga.in and Viget Ms. Pac-Man.  Here’s a quick method I put together for formatting numbers with commas:

def commafy(d):
  s = '%0.2f' % d
  a,b = s.split('.')
  l = []
  while len(a) > 3:
      l.insert(0,a[-3:])
      a = a[0:-3]
  if a:
      l.insert(0,a)
  return ','.join(l)
jQuery 101 - The Slice Method

Continuing the 101 series, this we're time hopping over to javascript and a look into part of my favorite library jQuery. More specifically slice(). In a nutshell, we can use slice to manipulate a set of match objects grabbed out of the DOM by the jQuery core method.



If you're familiar at all with the basic JavaScript slice() method it's application here is nearly identical. Slice() takes two arguments: a start value and an option end value. Just like in slicing in an array, performing a slice() on a jQuery set returns the elements starting at the start position and ending just before the end position. If no end is given (remember, that one's optional), the returned set starts at 'start' and ends at the end of set.



Now, that might not sound quite so straight forward but let's step back and remember one fundamental aspect of jQuery: a jQuery set is really just an array and the array is ordered in the same order each element is found in the DOM. Take this list for instance:



<ul class="colors">
    <li>Red</li>
    <li>Orange</li>
    <li>Yellow</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Indigo</li>
    <li>Violet</li>
</ul>


We can create a set of those list items using:



$('ul.colors');


Now, that by itself doesn't do anything at all, but we can visualize the set as an array with "Red" at position zero, "Orange" at position one, "Yellow" at position two and so on. This makes figuring out slice a piece of cake. Let's see how it might work in practice:



$('ul.colors').slice(2,4).hide();


Will hide "Yellow" and "Green" (We start at position 2 and end just before position 4).



Another fun trick is using a negative number for the start position. When a negative number is passed in the slice starts from the end of the array instead of the beginning. This would mean that



$('ul.colors').slice(-3).hide();


will hide "Blue", "Indigo" and "Violet". Now obviously these examples aren't exactly real world practice but they help illustrate the point. Good places to use this is in dealing with paging for circular carousels (a discussion for another day), in page pagination (hiding everything but the first three paragraphs of a post with a "read more" link) and more.



There is even another nice pro-tips about jQuery's slice: it's non-destructive on existing variables:



var colors = $('ul.colors');
colors.slice(1,4).hide();


If we run console.log(colors), the entire set is still there, "Red" through "Violet".



So there you have it - the jQuery slice() method; another invaluable tool in the front-end developers toolkit.

← Previous Page   Next Page →