Sunday, August 25, 2013

Using Automator to get the absolute path of the selected file or folder in Finder in OS X 10.8.4

This guide shows how you can add a contextual menu (i.e. right click menu) which copies the full path of the selected file or folder to the clipboard.

I often need to report to clients the list of files changed in a project manually. Unlike Windows Explorer or Nautilus in Linux, OS X's Finder requires multiple steps in order to retrieve the absolute path of the currently visible directory. Fortunately, Automator comes to the rescue.

These instructions applies to OS X 10.8.4

1) Open Automator.
2) Click 'Service' then click 'Choose'
3) At the top right, change the drop down lists so they look like :
Service receives selected 'files or folders' in 'Finder'
4) Click 'Utilities'. Drag 'Run Shell Script' to the workflow.
5) For 'Pass input', select 'as arguments'
In the text area, use these :
for f in "$@"
do
 echo "$f"
 # echo "'$f'"
done
6) Click 'Utilities'. Drag 'Copy to Clipboard' to the workflow. Drop it at position 2.
7) Click 'File', 'Save'.
8) Give it a name like 'Copy path'.
9) You will now have an entry called 'Copy path' in your Finder contextual menu i.e. the right click menu.

Thursday, February 7, 2013

Taking screenshots of multiple sites using casperjs

Casperjs, together with Phantomjs, allows you to take screenshots of web pages without the need to launch a graphical browser like FF or Chrome.

The many examples on the net unfortunately skipped the issue of taking screenshots of multiple sites per execution. Also, the ones I've tried kept getting mobile versions of the sites I intended to capture.

So I decided to piece together the disparate info out there and do some tests to come up with a foolproof way to achieve what I wanted.

Before we go to the script, here's a visual guide of the variables used in it. The top, left corner is the (0,0) position. The image we want to take for each site is the clipped region at the center. The viewport width was set to a whooping 2000 to prevent sites like engadget.com from returning their mobile version.

Here is the Casperjs script. All images are dumped in the 'shots' directory relative to the script itself. The comments should hopefully guide you into understanding and subsequently modifying it for your testing needs.

// // Usage : casperjs casper_1.js

// // Size of the browser i.e. viewport
var view_width = 2000, view_height = 768;

// // Size of the clipped image
var clip_width = 1366, clip_height = 768;

var casper = require("casper").create({
 // // Set the viewport size
 viewportSize: {width: view_width, height: view_height},
 // // Set the position and the size of the clipped image
 clipRect: { 
  top: 0, 
  left: (view_width - clip_width)/2, 
  width: clip_width, 
  height: clip_height 
 }
});

// // Take screenshots of these sites
var links = [
    "http://engadget.com/",
    "http://shoryuken.com/2013/02/01/help-save-super-arcade/",
    "http://theverge.com/"
];

casper.start();
var i = 0;

casper.each(links, function(self, link) {
    this.thenOpen(link, function() {
        i++;

        // // Output to console on the current page's title
        this.echo(i + ' : ' + this.getTitle() + " @ " + link);

        // // Dump screenshots to directory 'shots'
        this.capture('shots/casper_1_' + i + '.png');
    });
});

casper.run();

Friday, January 13, 2012

Ensuring embedded Vimeo videos are clickable within an element controlled by Isotope in Firefox 9.0.1 on Mac



Recently I had to troubleshoot why embedded Vimeo videos appear but
can't be clicked on when loaded on an element handled via
Isotope.



It turns out that this issue is specific to Firefox 9.0.1 on Mac. Not
sure if it affects other browsers though.



Assuming that the Isotope controlled element loads the embedded Vimeo video
once it gets clicked, then the solution was to remove the '-moz-transform'
css from said element preferably at the end the function bound to its 'click' event.



An example is shown below. Here, the elements handled by Isotope are
those with class 'thumbnail'. The code utilizes the excellent
jQuery based plugin for detecting browsers and OS by Stoimen
.



jQuery('.thumbnail').click(function(){

// // Code to load content with embedded Vimeo video into this element.
// // This could be done via Ajax.

// // Workaround to make Vimeo working in FF (Mac)
if ((jQuery.client.os == 'Mac') && (jQuery.client.browser == 'Firefox')) {
jQuery(this).css('-moz-transform', '');
}

});



Hope this helps someone out there. Took me an obscene 2 days of work to troubleshoot this one :(