JavaScript Dates with Moment.js

One of the biggest frustrations developers deal with is working with dates. For an excellent overview of why dates are so complicated, check out JavaScript dates, trains, Passover, and Henry VIII by Curtis Autery.

When it comes to working with dates, JavaScript will make you want to hit your head against your desk. Even for simple tasks, working with JavaScript’s Date object can be a major hassle. It lacks a lot of basic functionality that you’d expect like being able to format a date/time a certain way, adding or subtracting from dates, working with locales, and a lot more.

There are hacky ways to accomplish these things as the thousands of StackOverflow posts about JavaScript dates can attest, but save yourself the trouble and check out moment.js.

Moment.js is an awesome library that makes working with dates in JavaScript a lot less painful. Dare I say it, maybe even enjoyable. Rather than give an incomplete introduction to its features here, scroll through the Moment.js docs page to see everything that you can do with it.

And next time you find yourself writing new Date in your code, take 30 seconds to download moment.js and save yourself hours of frustration.

Tracking Blog Post Ideas

My friend Adam asked me how I’ve been keeping track of ideas for blog posts. For that and pretty much anything else that involves lists or notes, I use Workflowy:

Screen Shot 2015-12-19 at 12.52.35 PM.png

When I started this little daily blogging challenge I would have laughed at the idea that I could write every day for more than a few days. I just didn’t feel like I had that much to write about.

But when you force yourself to do a daily blogging challenge, you have to set the bar much lower in your mind for what’s worthy of writing about. If you restrict yourself to only one or two topics or only publish long, insightful posts then you probably won’t be able to blog daily for very long.

When I committed mentally to doing this, I suddenly had a lot of ideas for things that I could write about. They’re kind of scattered and some posts won’t be interesting to many people (and some to none at all), but that’s fine. It gives me enough to write about to keep it up and that’s what the challenge is all about.

On that note, I’ll hit a 30 day streak on Christmas Eve at which point I’ll take a break and start up again in January. I probably won’t try to do it daily again, but will try to keep posting once or twice a week going forward.

Thanks all for reading.

How I Use TextExpander

One of my favorite Mac apps is TextExpander, a toolthat saves you time by enabling you to create shortcuts for things you type frequently.

For example, here are the shortcuts I use on a regular basis:

  • Typing mm@ expands to my email address, matthew.h.mazur@gmail.com.

  • Typing vcc expands to my Visa credit card number.

  • Typing stcc expands to a Stripe test credit card number, 4242424242424242.

  • Typing jscc expands into a JSDoc template:

/**
 * Description
 *
 * @param {Object} var - Description
 * @returns {Boolean} Description
 */
  • Typing wpcc expands into a PHPDoc template:
/**
 * Description
 * 
 * @param int|string $var Description
 * @return bool Description
 */
  • And last but not least, ---> expands into because using ASCII arrows makes you look like a badass hacker, obviously.

Give it a shot if you’re not already using it. There’s a free trial and you can purchase the full version for $44.95.

If you have any recommendations for other useful productivity tools like TextExpander, I’d love to check them out. Thanks!

How I Follow Twitter

Here’s my setup:

Screen Shot 2015-12-10 at 11.37.57 AM.png

I use the Tweetbot Mac app and have it configured to display two columns: one for mentions and one for tweets of folks in a private list of ~120 folks whose tweets I want to ensure I read.

I keep a list simply because I don’t have the time to read all of the tweets from the 1K+ people I follow. I keep it private simply because there’s no need for it to be public. I could unfollow folks so that I only follow the folks whose tweets I really want to read, but I’ve found keeping a list is simpler.

I’ve learned that my Twitter usage tends to follow a regular pattern: I follow a certain number of people and don’t have a problem reading all of their tweets, so I start to follow more people, get overwhelmed, then stop reading tweets all together. After a week or two I remove folks from the list so that it becomes manageable, start reading tweets again, then repeat the cycle.

After going through this several times, I’ve learned that for me it’s really important to limit the number of people I follow. If check Tweetbot and see that I have 500+ unread tweets, that’s typically when I stop following tweets entirely. With only ~120 people in the list and those folks typically producing a reasonable amount of tweets/retweets, I can usually miss a day or two and only have to catch up on 100-200 tweets which is usually no problem.

You’re probably on the list if we’ve ever chatted on Twitter, we’re friends at Automattic or in Orlando, or you’re a thought leader in the growth/startup/tech/science/AI space.

I wish I could follow more folks, but given the choice between following a limited amount and reading most of their tweets vs following a lot of folks and reading no tweets, I go with the first option. YMMV.

If you have any suggestions on how to improve this setup or have a workflow that works really well for you, I’d love to hear about it.

Taking Screenshots Like a Boss

Today I’d like to share a few tips and resources for taking and managing screenshots on Macs. We’ll start with the basics and move on to the more advanced tactics.

Take a screenshot of your entire screen

Command-Shift-3

Take a screenshot of a portion of your screen

Command-Shift-4 then highlight the area you want to capture

Take a screenshot of a specific window

Command-Shift-4 then press space then click on a window

Change the directory where your screenshots are saved

By default they’re saved to the desktop, but you can change the destination.

Take a screenshot of an entire webpage, part 1

For this I highly recommend the Blipshot Chrome extension by Automattician Davide ‘Fol’ Casali. It will automatically scroll down the page, take a screenshot of each section, and piece them together into a single screenshot that you can save to your computer.

Take a screenshot of an entire webpage, part 2

If you find yourself taking a lot of screenshots and are interested in a way to organize them, check out the Ember Mac app.

When you use its Chrome extension to take a screenshot, you can specify a category which will group those screenshots together:

Screen Shot 2015-12-07 at 1.41.45 PM.png

You can then browse your collections in the Ember Mac app.

The major downside to Ember though is the way it takes screenshots. Unlike Blipshot which will take a screenshot of the page as it currently stands, Ember seems to reload the page internally and then take a screenshot of that freshly reloaded page. So if you’re working with a JavaScript-heavy site, Ember’s screenshots won’t reflect any of the changes that have taken place since you loaded the page. Also, Ember doesn’t work with Flash websites.

My hacky workflow for managing screenshots is to use a combination of Ember and Blipshot. For capturing simple websites that I want to organize (where a screenshot of a freshly loaded page will do and it doesn’t use Flash) I use Ember. For sites where I want the screenshot to reflect the current state of the front-end or sites that use Flash, I take a screenshot with Blipshot, then drag it into the appropriate collection in the Ember app.

One question for you all

One thing that’s frustrating is taking screenshots on a Retina displays because all of the screenshots wind up 2x the size that they appear on the screen. Is there a simple way to take a screenshot on a Retina display and have not be 2x? When it’s important that the screenshot not be 2x, I load it in Pixelmator and shrink it to 50% of its original size. Kind of a pain though.

Nothing beats Dash for quickly checking dev documentation

Dash is an incredibly useful Mac app that I’d highly recommend all developers check out. It lets you instantly search developer documentation (devdocs) straight from your computer:

Dash.gif

You can configure it to check only the devdocs you use on a regular basis. For example, I have Dash configured to search the devdocs for SaaS, Rails 4, jQuery, HTML, jQuery UI, PHP, MySQL, CSS, JavaScript, Ruby, WordPress, Node.js, Lo-Dash, R, and D3.js. It supports over 150+ sets of documentation and also lets you generate your own. Dash also keeps the documentation automatically up to date as it changes.

If you want to constrain your search to a specific set of devdocs, you can prefix your search such as ruby:gsub and it will only check the Ruby docs.

I also set Cmd+Shift+D to load Dash so that I can pull it up while I’m coding, perform a search, and Alt+Tab back to Sublime without ever touching the mouse.

It’s free to try and $24.99 to buy. Give it a shot and rejoice that you’ll never again have to Google for documentation.

Check out LICEcap to make GIF screencasts

LICEcap is a slick cross-platform app that lets you create GIF screencasts.

When you load it, you’re presented with a resizable frame that you can adjust to fit the portion of your screen that you’re interested in recording:

Screen Shot 2015-11-28 at 12.49.55 PM.png

Hitting the Record button gives you a few options:

Screen Shot 2015-11-28 at 12.52.58 PM.png

Once you hit Save, it begins recording. When you’re done, you simply hit Stop (or Pause) and you have yourself a GIF:

WordPress.com GIF.gif

Hat tip Sandy McFadden and Adam Weeks for the suggesting it.