Made By: Chris Coyier

I really enjoy well made videos focusing on people within our industry and this one is great.

I’d love to be able to create these, but just as Chris said in the interview, every one is connected by the computer and it’s not easy to video someone across the country.

Shuttle SSH

Shuttle – A simple SSH shortcut menu for OS X

Shuttle is a simple SSH shortcut menu for Mac. It’s designed to take the pain away from remembering all your SSH shortcuts and directly from your menu bar you can visually see all the SSH connections you have available.

I’ve been using it and love the simplicity of the app. Adding new shortcuts is easy and defined in a JSON file. However, if you already have connections defined in ~/.ssh/config it will automatically pull those in.

The project is open source and created by Trevor Fitzgerald and inspired from SSHMenu from Linux. If you have trouble remembering your connections or shortcuts definitely give this little app a try.

Unsubscribes

I’ve been running a weekly Laravel newsletter for almost a year now and it’s been a lot of fun. When I first started, after each send I would watch the unsubscribes, subconsciously using that as a metric to see if what I was doing was any good.

A year later and my outlook is completely different. I now enjoy unsubscribes. When someone leaves it tells me they didn’t care what I had to say or lost interest in the topic and it prevents me from getting bumped up to the next pay grade.

Looking at it from the angle removes so much stress. I’d trade high subscriber numbers for high open rates any day.

Snappy

Farewell Snappy

A little over three years ago the team at UserScape had the idea to start a new light and simple helpdesk application that would later be named Snappy.

snappy-tear

Today it was announced that we will be shutting it down. For me, this is a sad day. I’ve spent countless hours on the project, but it’s deeper than that. When you and your team have built something from just an idea on a whiteboard, you have a passion for it that others can’t see. It’s your baby.

There is a popular mantra among programmers, “You are not your code” and it’s true. I don’t want to be defined by any code I’ve ever created, but the code and product as a whole are deeply personal. Saying this is the end is sad.

As with all failed projects all you can do now is look back objectively. Try to grow from the experience and keep pressing forward.

My thanks to everyone involved in the project. It was a fun ride.

Mailchimp Custom Fonts

Adding Custom Fonts to Mailchimps Drag and Drop Email Designer

MailChimp includes a neat drag and drop email designer, but it lacks the ability to customize your templates outside of just the basics. One such problem is the font choice. By default, it only includes a list of nine web safe fonts.

These fonts are your safest bet if you want to support as many email clients as possible, but I like to make my emails unique. In my opinion, a custom font gives the design a little extra pop and professionalism. In this tutorial, I want to outline a simple way of adding these to MailChimp’s included templates and still keep the nice drag/drop workflow.

Creating a new template

To get started create a new template in your MailChimp account. I’m going to choose Basic -> One Column as a starter. Here is a screen shot showing my choice:

mailchimp-1col

After you select this template you should have a design that looks something like this:

Mailchimp Template

It’s not a bad design, but it feels very generic. Let’s work on improving this by adding custom fonts and a few style improvements.

Selecting a font

As I mentioned in the beginning, Mailchimp only allows a few web safe fonts but a lot of email clients do support custom fonts. In order for custom fonts to work, they must be inserted from the CSS. Meaning, you can’t use any JavaScript. No TypeKit, Typography.com, or the likes. However, you can use Google fonts.

Google has about a bazillion fonts to choose from and picking a pairing can ruin your day. I’d wager I’ve lost enough hours to drive from North Carolina to California just trying to find perfect font pairings. What I have found helpful is to find one you like and then just do a web search for “{fontname} pairing”.

For this template, I knew that I wanted “open sans” for the body and with that web search I found “Playfair Display” is one that compliments nicely. So we’ll use those two.

In Google fonts, I added both to a collection and then click the “use” button. From here you should see a style sheet to copy and paste.

<link href="http://fonts.googleapis.com/css?family=Playfair+Display|Open+Sans:400,300,700" rel="stylesheet" type="text/css" />

Implementing the font into the template

Now that we know what font to use and we have the code lets add it to our theme. MailChimp doesn’t allow you to edit HTML, so we are going to fake it by inserting code into their editor. Click the first text you see in the upper left:

Mailchimp Header

Next from the text editor select the code button. Here is a screen shot showing the button.

Mailchimp Code Button

Finally copy and paste the below code and add it to the editor:

<link href="http://fonts.googleapis.com/css?family=Playfair+Display|Open+Sans:400,300,700" rel="stylesheet" type="text/css" />
<style type="text/css">h1,h2,h3,h4,h5 { 
  font-family: 'Playfair Display', serif !important; 
  font-weight: 300 !important; 
} 
h1 { 
  line-height:44px !important; 
  color: #111 !important;
} 
p, .footerContainer { 
  font-family: 'Open Sans', sans-serif; !important; 
  font-weight: 300 !important; 
  color: #111 !important;
}
</style>

The above code is all standard CSS with the exception of having to use !important on everything to over-ride MailChimps default styling.

With that set, you should be able to preview and have a nice template with a custom font. Here is the finished design:

Completed Mailchimp Template

Wrap Up

My goal with this tutorial is to show a simple solution to a problem I encountered when creating my MailChimp template. The reason I choose this route over a custom template is because I wanted to keep the simplicity of their editor and to prevent having to deal with fighting HTML tables every week.

As with anything related to email if you try this be sure and test it in as many email clients as you can. Also, this method is not semantic because it’s including CSS outside the head, and I am confident that some will strip it out.

Geek Show – How to Write Technical Blog Posts Quickly and Easily →

In the latest Five-Minute geek show, Matt covers his tips for writing technical blog posts quickly and easily.

I wrote a few of my own technical blog post tips but I like how he focuses on improving your speed. I’ve written more in the past year than I ever have in my life and I’m still slow. However, it is getting easier.

A tip that neither Matt nor I mentioned is, always remember you are the expert when writing about a technical topic. That doesn’t mean you have to dumb it down. Just pay attention to not miss any steps that you think everyone knows.

The Dangers of Misinformation →

Marcus Zarra on the dangers of misinformation:

As developers, we are frequently using the internet to help us solve issues. We run across an error code, a crash, or another type of problem and we usually go to the internet. With the vast amount of knowledge that is available, and the incredible search engines that we have at our disposal, it is pretty easy to find someone else who has already run across the issue. Sites like StackOverflow make it even easier to find other people who have experienced the issue we are running across.

The issue is that we don’t really know if the information being shared with us is accurate. The author of that post, or response, may be guessing. They may have found a hack or workaround that kind of works, for now. They may be completely wrong and are treating a symptom as the actual problem.

I agree with the premise of this whole article. It’s so hard in the ever changing world of tech to know what is still accurate and what isn’t. Just today I had to update a tutorial I wrote back in September. The basics of it was the same, but the dependencies changed enough to make it not work and in turn cause frustration for readers.

I’ve noticed in my own searching habits, that when looking for tutorials I always look for the published date. If it’s over six months old chances are it isn’t even accurate.

Gulp, Bower, and Bootstrap SASS Example App

A few months back I created a tutorial on Setting up Gulp, Bower, Bootstrap Sass, & FontAwesome. If you had problems with the tutorial I’m sorry. Apparently the gulp-ruby-sass npm module I used is undergoing some changes causing the SASS to error out and never compile. I have updated that post to recommend sticking with version ^0.7.1 until v1 stables out.

I’ve also created a GitHub repo with everything setup. This way you can see the exact versions of dependencies I used in the tutorial.

What I do find odd is I had a similar problem with Laravel Elixir a few weeks back. It uses node-sass but something must be going on with the development of both of these plugins. Hopefully, it will all be sorted out and I can stop pulling out my hair.

Call Laravel Artisan Seed From Your Code

There are certain times when using Laravel that you would like to migrate and seed the database. Typically this is done via the Artisan command line tool with:

php artisan migrate --seed

You can also call this in your code with the following:

Artisan::call('migrate', ['--seed' => true]);

Nice and simple but the second parameter always trips me up.