How to take a screenshot and record video in macOS

One of the nice things about macOS are the built-in tools. A recently improved upon built-in tool is called Screenshot which allows users to take a screenshot and record video. Taking screenshots has been around macOS forever, but taking video directly from OS shortcuts came along in macOS Mojave. The challenge is remembering the commands.

This tutorial is an attempt to capture the quick commands / shortcuts to make this process easy.

(more…)

How to debug problems on Mobile Safari

When you are developing and/or testing a web app on iOS, having the ability to inspect and understand what is happening in the browser is incredibly useful. For just this reason Mobile Safari can use the same developer tools that are built into Safari on macOS.

To start debugging you’ll need your iOS device, a mac and a lightning cable. Then start by making sure both devices are configured to allow this.

Configure devices:

  1. Launch Safari on your mac; open preferences and within the advanced tab click the checkbox for “Show Develop menu in menu bar”.
    1. Confirm, you should now see a menu called Develop in the top bar
  2. On your iOS device (iPhone or iPad) go to Settings > Safari > Advanced and slide the toggle on for Web Inspector.

Debug a site in Mobile Safari:

  1. Connect your iOS device (iPhone or iPad) to your mac
  2. On the device browse to your site in Mobile Safari
  3. On your mac’s Safari, under the Develop menu you should see an option for your iOS device (either called iPhone or iPad).
  4. In that sub-menu you should see the url of the website you want to debug. Click that url and it will open a new Safari window with the full Safari Dev Tools.
  5. Start your investigation!

Safari Dev Tools

A few weeks back I was testing changes to review submissions (buy a product, leave a review) and on Chrome desktop everything worked fine (including Chrome’s mobile emulator). However after testing on a real device, Safari didn’t behave the same way. Luckily we were able to debug using this same method and fix those remaining issues before any customers saw problems.

It just goes to show real device testing matters!

Oh and if this article worked for you please consider sharing it or buying me coffee!

How to set up Apple Pay on Mac (non TouchID)

According to Bailey, Apple Pay availability was limited to about 3 percent of stores in the U.S. when it launched in 2014, but is now accepted in 50 percent of stores. – Courtesy of AppleInsider.

At Laurel & Wolf we use Stripe to handle monies we collect from our customers. It’s a great service that takes care of many things including allowing us to accept Apple Pay. Although accepting Apple Pay means we need to test it, which I’ve been doing mostly from my iPhone. However I’ve been wanting to test it on my laptop and that means enabling it on macOS for Safari.

These instructions are for non TouchID macs. If you have a Mac with TouchID you can go to Apple’s website for easy set up.

Apple Pay Logo

Steps to enabling Apple Pay on non TouchID Macs

  1. On your iPhone confirm Apple Pay is active. If not set it up here.
  2. On your Mac sign-in to iCloud using your Apple ID. Without this you won’t have access to your Wallet’s cards.
  3. Allow websites to check if Apple Pay is set up on Safari.
    1. In Safari go to the menu called Safari > Preferences > Privacy > look for the Apple Pay section. 
    2. Note: It can take about 5-10 minutes to propagate after you sign-in to iCloud.
  4. Done! Any website or app with Apple Pay enabled for checkouts will render an Apple Pay button as a checkout option. To test this you can go to Stripe’s Apple Pay website and test it out. (Don’t worry purchases happen in their test environment.)
  5. There are a few caveats:
    1. This only works in Safari
    2. You can only complete the purchase if your iPhone is connected to your Mac. Apple Pay requires TouchID to authorize the purchase.

Oh and if this article worked for you please consider sharing it or buying me coffee!