Category: Code Snippets

While working on a Ruby project, I often find myself referring to the code of various libraries when it’s easier than looking up the documentation. For this, I used to use code (bundle show GEM_NAME), but recently I’ve been getting this warning:

[DEPRECATED] use `bundle info $GEM_NAME` instead of `bundle show $GEM_NAME`

Okay, that’s fine, but bundle info returns a bunch of stuff that would confuse VS Code:

> bundle info devise
  * devise (4.7.1)
	Summary: Flexible authentication solution for Rails with Warden
	Homepage: https://github.com/plataformatec/devise
	Path: /Users/keita/.asdf/installs/ruby/2.7.0/lib/ruby/gems/2.7.0/gems/devise-4.7.1

Luckily there’s bundle info $GEM_NAME --path. code (bundle info devise --path) is kind of long to type out every time, though, so I decided to make an alias.

I use the Fish shell, so the code here is written for that shell. Adapt it to your shell as required. You’ll also need the VS Code terminal integration installed for this to work.

function bundlecode
  if test -e ./Gemfile
    code (bundle info $argv[1] --path)
  else
    set_color -o red
    echo "Couldn't find `Gemfile`. Try again in a directory with a `Gemfile`."
    set_color normal
  end
end

Usage:

> bundlecode devise
# VS Code opens!

If you haven’t noticed, you can’t use anchor links:

<a href="#hello">Go to id="hello"</a>

Inside Facebook Apps (Page tab, Canvas app, etc). So I wrote a little snippet that emulates this behaviour by using FB.Canvas.scrollTo(x, y);

/*
anchorlinks-fbcanvas.js

Enables anchor links (<a href="#hello">Go to id="hello"</a>) in
Facebook Canvas (page tabs, canvas app, etc)

Requires: jQuery, Facebook JS SDK
*/

jQuery(function($) {
  $('a').filter(function() {
    return $(this).attr('href').match(/^#/);
  }).each(function(i, el) {
    $(el).click(function(e) {
      e.preventDefault();
      var elementId = $(el).attr('href').replace(/^#(.*)/, '$1');
      var $goTo = $(document.getElementById(elementId));
      FB.Canvas.scrollTo(0, $goTo.offset().top);
    });
  });
});

Been wondering how to simply retina-ize your website? Put this at the end of your site:

$(function() {
  try {
  if (window.matchMedia('(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)').matches) {
    $('.autoRetina').each(function(i, e) {
      var orig_src = $(e).attr('src');
      var new_src = orig_src.replace(/^(.*?).(png|jpe?g|gif)$/i, '$1@2x.$2');
      $(e).attr('src', new_src);
    });
  }
  } catch (e) {}
});

If you’re on a Retina-equipped device, your images with the autoRetina class will automatically be replaced with their Retina counterparts. If you’re familiar with iOS development, you’ll feel right at home. If you have no clue what I’m talking about, just append @2x at the end of the filename (before the extension).

If you want to apply it to all your images (do this only if you have Retina images for all of them!), replace $('.autoRetina').each( with $('img').each(

Caveat emptor: uses jQuery. Don’t judge.