December 5, 2017 - No Comments!

Hide Intercom chat between certain times on a schedule or at night

It turns out Intercom doesn't offer a dynamic way of hiding the chat launcher button. It's either on or it's off, as set through the Intercom dashboard.

With the help of a little JavaScript, we can set predefined times to hide the chat window.

Why would anyone want to hide the chat button between certain times?

Better user experience—don't offer a real-time chat if you're not available at 1am. Here's how to hide Intercom while you sleep.

 

For you TLDR's; here's the full code:

<script>
var d = new Date();
var currentHour = d.getHours();
var currentMins = d.getMinutes();

var newTime = (currentHour +':'+ currentMins).split(":");
var currentMils = (+newTime[0] * (60000 * 60)) + (+newTime[1] * 60000);

var availableStart = ('05:00').split(":"); // 05:00 = 5am
var startSplitMils = (+availableStart[0] * (60000 * 60)) + (+availableStart[1] * 60000);

var availableEnd = ('23:00').split(":"); // 23:00 = 11pm 
var endSplitMils = (+availableEnd[0] * (60000 * 60)) + (+availableEnd[1] * 60000);

if (currentMils >= startSplitMils && currentMils <= endSplitMils) {
 
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()

var APP_ID = "x123456x";
// be sure to use your App ID here

window.Intercom('boot', {
 app_id: APP_ID,
 });
 console.log('Chat available from ' + availableStart +' - '+availableEnd);

} else {
 Intercom('shutdown');
 console.log('Chat unavailable from ' + availableEnd +' - '+availableStart);
}
<script>

 

Breaking it down:

Get the current date (hours and minutes)

var d = new Date();
var currentHour = d.getHours();
var currentMins = d.getMinutes();

Convert 24-hour times to milliseconds

var newTime = (currentHour +':'+ currentMins).split(":");
var currentMils = (+newTime[0] * (60000 * 60)) + (+newTime[1] * 60000);

Set your desired start time - this is the beginning of the scheduled time to show Intercom

This is when the chat will begin displaying. In our example, it's 5am (05:00)

var availableStart = ('05:00').split(":");
// 05:00 = 5am

Convert the start time to milliseconds, define the end time (begin to hide Intercom), and convert to MS

var startSplitMils = (+availableStart[0] * (60000 * 60)) + (+availableStart[1] * 60000);
// converts the start time to milliseconds

var availableEnd = ('23:00').split(":");
// 23:00 = 11pm 
var endSplitMils = (+availableEnd[0] * (60000 * 60)) + (+availableEnd[1] * 60000);

Lastly, write the conditional check

There are a few approaches here. You may choose to use window.intercomSettings.hide_default_launcher = true; instead but I found the explicit loading and shutdown to be more reliable on site with cached files.

if (currentMils >= startSplitMils && currentMils <= endSplitMils) {
  // activate the chat launcher
}

else {
  // we're sleeping, don't run the chat launcher code
};

 

That's it!

Have questions? Comment below 🙂

October 3, 2017 - 11 comments

SASS won’t build in Sublime Text Mac High Sierra [Errno 2] No such File or Directory

You just tried building .sass or .scss from Sublime Text on a Mac and you're seeing an error [Errno 2] No such File or Directory. Me too.

If you've recently updated to OS High Sierra, the solution is likely very simple. This works for both SublimeText 2 and 3.

You'll need to reinstall SASS from Terminal.

  1. Open Terminal: CMD + SPACE to launch Spotlight — type "Terminal" and hit enter
  2. Check Ruby version: Ruby is bundled in OSX type:
    ruby -v

    You should see something like:

    ruby 2.3.3p222 (2016-11-21 revision 56859) [universal.x86_64-darwin17]
  3. Install SASS
    sudo gem install sass
  4. Enter your password and you're all set.
    Once it's finished installing, jump back to Sublime Text (2 or 3) and do your business!

 


If this worked for you please give a heads up in the comments 🙂

July 26, 2017 - No Comments!

Google Business Review Link Generator

The impact of Google Business listing reviews continues to grow. Aside from providing credibility from past customer testimonials, Google's search algorithms also prioritize websites that have a reasonable number of customer reviews.

Getting a direct link for customers to easily submit reviews on your Google business can be a bit tricky so I've created a simple Google Business review link generator.

https://search.google.com/local/writereview?placeid=

 

Once you paste your URL into a browser, it will change to a longer URL. So be sure to share the original one that's generated below.

**Not currently supported on mobile, please use a computer.

 

May 23, 2017 - No Comments!

Delete Images from Media Gallery when WordPress Post moved to Trash

I have a client who sells unique products on their custom WordPress site. The products listed have limited quantities and once they're sold they won't be available again. From the front end, it's easy enough to just "Trash" a post (product) and they won't display. However, this could quickly lead to unnecessarily large storage on the server since WordPress doesn't delete post attachments (images) when posts are trashed.

Here's a quick code block which will delete images when posts are moved to the trash.

This could be included in functions.php or wrapped inside a custom plugin, it'll work the same either way. Be sure to read the *disclaimer at the bottom before breaking things.

 

This code will delete just the featured image when a post is moved to trash:

add_action( 'trashed_post', 'mtp_delete_attached_thumbnail_for_trashed_product', 20, 1 );

function mtp_delete_attached_thumbnail_for_trashed_product( $post_id ) {
 
 // gets ID of post being trashed
 $post_type = get_post_type( $post_id );
 
 // does not run on other post types
 if ( $post_type != 'post' ) {
 return true;
 }
 
 // get ID of featured image
 $post_thumbnail_id = get_post_thumbnail_id( $post_id );

 // delete featured image
 wp_delete_attachment( $post_thumbnail_id, true );
}

 


In many cases you'll have more images associated with a post or product. This code will also delete gallery images in addition to the featured image.

add_action( 'trashed_post', 'mtp_delete_attached_thumbnail_for_trashed_product', 20, 1 );

function mtp_delete_attached_thumbnail_for_trashed_product( $post_id ) {
 
 // gets ID of post being trashed
 $post_type = get_post_type( $post_id );
 
 // does not run on other post types { $post }
 if ( $post_type != 'post' ) {
 return true;
 }
 
 // get ID of featured image
 $post_thumbnail_id = get_post_thumbnail_id( $post_id );

 // gets array from custom field { $gallery } 
 $gallery_images = get_field('gallery', $post_id);

 // loop through { $gallery } 
 foreach ($gallery_images as $gallery_image) {
 
 // get each attachment ID
 $gallery_id = $gallery_image['id'];

 // delete attachments
 wp_delete_attachment( $gallery_id, true );
 }
 
 // delete featured image
 wp_delete_attachment( $post_thumbnail_id, true );
}

For either example, if you need this to work on a custom post type, i.e. "product". You'll need to replace this line:

if ( $post_type != 'post' ) {

with:

if ( $post_type != 'YOUR_POST_TYPE_NAME' ) {

If you have a gallery associated with the post, you'll also need to change the gallery name. In my case, I'm using an ACF gallery named "Gallery". So you'd update this line:

$gallery_images = get_field('gallery', $post_id);

with

$gallery_images = get_field('YOUR_GALLERY_FIELD_NAME', $post_id);

 


This code is being used on WP 4.7.5
*This will permanently delete your media so as always, be sure to run a backup of your site files and database before testing on your site.

May 2, 2017 - 5 comments

Embed Responsive Full Width Pinterest Board

I have a client who needed to embed a Pinterest board on their website. One problem; Pinterest's widget builder doesn't allow for setting "100% width". I spent time searching CodePen, Stack Overflow and random Pinterest forums but just couldn't find a solution.

 

Here's a super simple CSS fix that'll get you up and running with a true responsive and full width board embed.

1. Create your Pinterest Board Widget

Pinterest offers a Widget builder here: https://developers.pinterest.com/tools/widget-builder/ 

Full Width Responsive Pinterest Board Embed

One note, you'll want to choose Create your own option under the Size drop-down menu. Be sure to change the width to something like 1920, or whatever your minimum container size happens to be.

2. Add two <div> wrappers

<div class="super-responsive-wrapper">
  <div class="board-wrapper">
    <!-- Your embed code here -->
  </div>
</div>

3. Add some custom CSS

.super-responsive-wrapper {
  width: 100%;
  margin: auto;
}

.board-wrapper {
  margin: auto;
  text-align: center;
}

.board-wrapper span {
  overflow: hidden;
  max-width: 100%!important;
}

 

That's all you'll need, just be sure to name the classes in your HTML to correspond with your CSS classes.

 


Surprisingly, EmbedResponsively doesn't offer a generator for Pinterest—maybe you guys can grab this code an implement sometime in the future? 🙂

October 24, 2016 - No Comments!

Font Awesome 5 Video

One of the best Kickstarter videos I've seen. Font Awesome 5 and Font Awesome 5 Pro really stepping it up!

Font Awesome 5

Dave Gandy is raising funds for Font Awesome 5 on Kickstarter! Font Awesome makes it easy to add vector icons and social logos to your website. And Pro gives 1,000+ more icons and SVG support!

September 9, 2016 - No Comments!

Getting Started with Evernote: A quick user guide to get up and running with Evernote in 2017

Get started using Evernote effectively with just a few small changes. These work for new or advanced users.

If you'd like more detail on any of these steps feel free to reach out or comment below.

 

1. Create your first notebook

screen-shot-2016-09-09-at-11-51-40-am

* If you don't do any of the other four steps, be sure to check this one off the list. You'll be glad when you have bunch of notes.

Evernote comes with an default notebook called "My First Notebook". Go ahead and delete it or rename it to "Inbox"

The goal of this notebook is to give you a spot to capture all of your notes quickly then you can do the organizing in the future.

Once you've created your Inbox notebook, navigate to your preferences and set it as your default notebook. Here's Evernote's instructions on how to do that.

You can think of this notebook just like your email inbox—you want to keep it as close to zero notes as possible. Since I capture a ton of notes in Evernote, I have time scheduled every Friday morning to move notes from my inbox into their more fitting notebooks. 


2. Create your first tag

screen-shot-2016-09-09-at-11-52-10-amTags can get out of hand really quickly. To give some context, I've found it's helpful to think about tags by asking yourself these two questions.

  1. Will this tag be usable in many different notebooks? If not, the tag should probably be a notebook instead.
  2. What's my future self's use of this tag?

For the sake of a clear introduction, we'll just be creating one tag for now.

Create a new tag called "Action".

I use this tag so I can quickly remind myself when I need to do something with a note. It's universal, so it can be applied to a client note like a to-do list for example. It could also be applied to something personal like a reminder to get my oil changed, redeem a coupon online or a list for the next trip to the grocery store. 

When I open Evernote, I can say "Show me all notes tagged with Action" and I'll see notes from within hundreds of different notebooks and stacks. One I complete a task, I just remove the Action tag from that note and move on.

screen-shot-2016-09-09-at-11-53-41-am


3. Declutter the UI

The factory settings for the toolbar and sidebar aren't always useful the most beneficial. Take a couple minutes to see what options can be added and removed. Personally, I prefer a minimal approach. To edit either section, just right click.

Here's what my sidebar looks like

  • Shortcuts
    • Inbox
    • Today
  • Recent notes (5 most recent notes for quick access)
  • Notes (can't remove this one)
  • Notebooks (shows a list of all my notebooks)
  • Recent Chats

Here's what my toolbar looks like

Setting up Evernote - Customizing the Toolbar

It's pretty straight forward, just removed a few items and moved my Account/Profile info to the far right—the most common location for account settings these days.


4. Check out IFTTT

IFTTT is a free web-based service that allows users to create chains of simple conditional statements, called "recipes", which are triggered based on changes to other web services such as Gmail, Facebook, Instagram, and Pinterest. IFTTT is an abbreviation of "If This Then That".
— Thanks, Wikipedia

To summarize, IFTTT let's you automate stuff all over the internet. So you can make things happen in Evernote automatically without even opening Evernote.

A quick example: I use IFTTT + IFTTT's "Do Button" to save business receipts inside an Evernote notebook.

IFTTT deserves it's own (lengthy) article. I'm working on it and I'll share it soon. For now, I'd encourage you to create a free account and poke around a bit.


5. Get mobile

mockup

This one's easy, just download the mobile app for iOS or Android and take your notes everywhere you go. Besides being accessible everywhere, this is where Evernote really becomes powerful. When you snap a photo, your location will be stored and sortable later. "Show me all notes I took on vacation" will remind you about that big idea you had while hanging out on the beach.

Additionally, using your phone's camera to snap documents will create searchable text! So in six months when you get pulled over and need to show your insurance card—just search your Evernote for "insurance". <— actual use case from a few weeks ago


Have other ideas or questions? Let me know below or reach out, I'd love your feedback!

August 23, 2016 - 1 comment.

Effective emails using A.I., Boomerang Respondable Review

I've been using Boomerang for Gmail for a few years and it's great. Super reliable and definitely helps to manage communication expectations.

Today I saw the promo video for Boomerang Respondable.

Write Perfect Emails with Artificial Intelligence.

First and foremost, the video is outstanding. Nicely done, Baydin! 🙂

What is Respondable?

Respondable is a browser extension for Gmail to help you write better, more actionable emails in real time. Based on data from millions of messages, Respondable makes every email you send more effective.

I've installed the free version, which includes these real time metrics:

  1. Subject length — It recommends 2–6 words.
  2. Word count — It recommends 50–150.
  3. Question count — It recommends 1–5 questions.
  4. Reading level — It recommends 3rd grade.

Here's a sample rating while I'm typing a bogus message:

Message rating using Boomerang Respondable

The concept is cool. Obviously, it's hit or miss depending on your audience but generally I could see this help people compose more effective emails. Maybe it'll prevent someone from emailing me with the subject: "website".

Nah, doubt it.

I suspect Baydin will be tweaking the algorithms over time, right now it's too easy to vastly sway the ratings by adding one more question, or removing a big (regular-sized(?)) word. But hey, it's guidance nonetheless.

Overall, I'm curious to see how it develops over time. I don't think I'm quite ready to upgrade to Pro for $15/mo. but I'll let it hang out for now. I could definitely see it becoming a bit of a distraction though but I'm okay with that—it's rare for me to compose emails in the browser anyway.

I'll give it a week or so and check back with more.

Give a shout if you have thoughts or questions!

Read more about it at Boomerang's website.

 

August 23, 2016 - No Comments!

Connect Shazam to Evernote

Ever wondered if you can store your Shazam music in Evernote?  Yes, and it's pretty awesome. It'll take about 7 minutes to get up and running.

What you'll need to connect Shazam to Evernote:

  1. Shazam App for iPhone or Android
  2. Evernote Plus or Premium
    (Don't want to pay for Evernote yet? Here's a free workaround using Gmail instead of Evernote)

If you don't have a paid Evernote membership, you can get started here for free with an optional upgrade - $35 annually.

Create a free account


Alright, assuming you're set with Evernote Plus or Premium, let's get started.

First, find your Evernote email address

It's a unique address you can use to save emails directly into Evernote, it looks something like this: username.5199b42@m.evernote.com. You'll want to find the address and copy it, we'll use it for the next step.


To find your Evernote email address, go to your account settings:

Mac

Select Help > Account Settings.... Your email address appears in the 'Email Notes to' section.

 

iPhone, iPad, and iPod Touch

Tap your username to access your account settings. Scroll down and select General > Evernote Email Address.

 

Windows Desktop

Click on Tools > Account Info. Your email address will appear next to 'Email notes to:'

Android

Tap the 3-dots button in the upper right, select Settings > Account Info, and scroll down until you see your Evernote email address.

Evernote Web

Click on your profile photo, the select 'Settings'. Your email address appears in the 'Email Notes to' section.


Next, create a new Contact in your phone

You can name this whatever you want, but "Evernote" seems sensible for this example. Create a contact and paste your Evernote email address as the primary email for the contact.


Lastly, sending from Shazam:

Step 1: Shazam some tunes

Step 2: Tap the Share button, then select Email

Step 3: Start typing the name of your new contact (Evern...) and select that contact.

Step 4: Click send

 

Head on back to Evernote and you'll see your newly Shazam'd tune saved as a note! It'll appear in whichever Notebook you've saved as default.

Where you go from here will depend on what you're trying to accomplish. Personally, I'll review my saved song notes about once a week. If I decide to buy something, I'll add the tag "purchased". The really great part about using Evernote to manage music is that you can add as much context to a note as you'd like. Sometimes it's easier to recall the name of the venue or train-spotee where you heard the song—typing a quick "Dave's 30th, grill out at the park" could save a ton of time later on.

Later, I'll walk through a similar process using a few other tools with Evernote.

Message or comment if you have any thoughts or questions!

Still don't have Evernote? Create a free account