Categories
Links of Interest

Article Roundup for 03.03.2014

Categories
Meetup Talks

“Running WordPress Locally” Talk

Thanks to all that came out to see myself and Morgan Estes at the OKC WordPress Meetup tonight. It was a lot of fun seeing everyone.


Direct Link

Other Links

There were some links that came up that were not in the slides:

  • XAMPP: Free lamp stack for all OS’s.
  • Git: Popular version control system.
  • Tower: OSX GUI for Git
  • SourceTree: Free GUI for Git for all platforms
Categories
Links of Interest

Article Roundup for 02.04.2014

Categories
Tutorials Workflow

Making SSH logins super-quick

SSH access is pretty essential these days in web development. Especially if you have root access to a server, or using tools like Grunt, Git or Sass. But signing into them can be very time consuming.

I just recently put together a straightforward workflow (OSX and Linux) for logging into a server via SSH.

Using an SSH Config file

The SSH Config file saves your usernames, hosts and ports into a single config file.

  1. If the config file isn’t there, create it by running these commands:
    $ mkdir ~/.ssh # this directory may already exist
    $ vim ~/.ssh/config
  2. Now you can edit this file and add the following code for each server you want to connect to:
    Host ryan
        HostName ryantvenge.com
        Port 22 #The default port for SSH.
        User user_name
  3. Now, you can simply type ssh ryan to connect to the server.

Creating SSH Keys

But it is still asking for your password. So let’s get rid of that step too by creating an SSH key. SSH keys are a great tool to secure access to servers. It gives you the ability to use super-secure passwords because you don’t have to remember them. But they are kind of a pain to setup.

Run the following comands:

$ ssh-keygen -f ~/.ssh/ryan -C "ryan"
$ ssh ryan 'mkdir ~/.ssh && touch ~/.ssh/authorized_keys #these files may already exist, so you may get an error. Don't worry
$ cat ~/.ssh/ryan.pub | ssh ryan 'cat >> .ssh/authorized_keys'
  1. The first command creates the key. For simplicity’s sake, I named the key the same name as our SSH config shortcut name, “ryan”. When asked for a passphrase, simply hit return twice.
  2. The second command is creating a spot on the server to hold your ssh key.
  3. The last command copies your public key up to the server.

And Bob’s your uncle, you are all done! No more typing passwords in when pushing and pulling Git repos. No more forgetting IP addresses of servers. And best of all, you can now make your passwords sooper secure 50 character random strings, because you won’t need to type time in manually on a regular basis.

Update: If you are using git, you’ll need to update your remote path with the shortcut name, otherwise it won’t use your ssh key:

url = ssh://SHORTCUT_NAME/path/to/git/repo
Categories
Scripts Troubleshooting

SVG Wonkiness in Safari 5.1

I had a client who was still rocking an old school iMac that was running OSX Snow Leopard. That’s the latest version you can install, and as a result, can only upgrade to Safari 5.1. As I was using SVG in <img> tags on this site, they were rendering really oddly.

<img src="http://superiorcampers.com/wp-content/themes/supcamp_40/img/logo.svg" onerror="this.onerror=null; this.src='http://superiorcampers.com/wp-content/themes/supcamp_40/img/logo.png'" alt="Superior Campers">

It was as if the browser was adding padding: 50px 0; to the <img> but I couldn’t override it. I found a quick and dirty jquery fix for this. This works assuming you have an PNG fallback for your SVG’s, which you should for IE8 (at least as of the time of this writing).

//safari 5.1 polyfill hack
$(window).load(function() {
  //all images with .svg
  $('img[src*=".svg"]').each(function () {

    var
      $self = $(this);

    //If rendering really tall
    if ( $self.height() > 900 ) {
      //go to IE png fallback
      $self.attr('src', $self.attr('src').replace(/.svg/, '.png'));
    }
  });
});

Because Modernizr showed this browser as supporting SVG, the hack is to look at the .height() of the <img> after all resources are loaded, and if it’s over 900px, fallback to the PNG. Not pretty, but it fixed the issue. Let me know if you found a better fix.

Tvenge Design