Today I Learned

A Hashrocket project

115 posts about #workflow

Select a Square With Mac Preview

Lately I’ve been taking screenshots of code and my terminal. They seem to look the best when they’re square; that shape translates better to a variety of project management tools and social media platforms.

Mac Preview lets you select part of an image down to the pixel for cropping, and I have found selecting a perfect square very difficult. The solution? Select with SHIFT + click to force a square-shaped selection. ⌘ + K to crop.

🔲

Enable Breadcrumbs For VS Code 1.26 Release

The latest release of Code (Version 1.26) brings about a lot of exciting new features — including file breadcrumbs at the top of each file editor view.

Breadcrumbs feature in action

By default this feature is not enabled. You can enable it from User Settings (Cmd+Shift+P, ‘User Settings’). From the User Settings view, you can search for breadcrumbs and you’ll see the following item:

  "breadcrumbs.enabled": false,

Use the pencil to override it to true and you’ll have that trail of breadcrumbs waiting for you.

Two ways to access emojis in Windows 10

Include an emoji via keyboard shortcut while typing in Windows 10 by using the Windows key together with the period key. Windows key + semicolon is also a valid shortcut.

No keyboard handy? In the right-hand part of the taskbar, there is a small keyboard icon. If that is not visible, you can enable it by right-clicking on the taskbar.

Clicking this taskbar icon enables the touch keyboard, which includes a smiley key that takes you to to the emoji list.

Now, you can express yourself. 🤠

Add The VSCode CLI To Your Path

Visual Studio Code has a command line tool that can do a bunch of things. Perhaps the most common is opening up the current directory from the command line.

First, you need to add code to your path. This can be done from within Code itself.

Hit Cmd+Shift+p to pop open the command palette. Then start typing Shell Command ... until the Shell Command: Install "code" command in shell PATH option appears. Select this and Code will add code to your path.

Try code . to open the current directory or run code --help for more details on what’s available.

Log Into Windows 10 Without A Keyboard

Sometimes you might need to log into a Windows machine without a keyboard. A damaged keyboard, non-functioning ports for connecting an external keyboard, or a faulty keyboard driver could put you in this predicament.

Windows 10 includes an accessibility menu called ‘Ease of Access’, located in the lower righthand corner of the screen. This menu includes an on-screen keyboard. Use it to log in when your keyboard doesn’t work.

Ease of Access

Disable Swipe Navigation For A Specific App On Mac

Mac’s touch pad has a bunch of handy swipe gestures, including swiping two fingers to the left or the right to navigate backward or forward. This particular gesture can be globally enabled and disabled. I find it useful for most apps and a pain in a few apps, such as Google Chrome.

From the terminal we can disable it for a specific app (like Google Chrome):

$ defaults write com.google.Chrome AppleEnableSwipeNavigateWithScrolls -bool FALSE

Restart the target application, in my case Chrome. The left and right swipe navigation will no longer be triggered.

source

Hide all other windows on #macOS

Sometimes your desktop gets cluttered with windows of different running applications which makes it difficult to concetrate on the task at hand.

This can also come in handing when sharing your screen or presenting.

Fortunately macOS offers some shortcuts to remediate this common problem:

⌘+h - hide current window

⌘+⌥+h - hide all other windows

⌃+⌘+f - toggle full screen mode

Import A Github Project Into CodeSandbox

A really fancy feature that CodeSandbox offers is the ability to import a Github project. If you go to the Create Sandbox page, you’ll see some options including Import from Github. From there, paste in the URL to a public github repository and a matter of seconds your entire project will be synced into a new CodeSandbox project.

I recently did this with a create-react-app project and CodeSandbox even knew how to recognize that it was a CRA app so that it could run and display it in the web view.

Set A Window To Its Default Zoom Level In Mac OS X

Often when showing my screen to someone else or connecting to a project, I have to adjust the zoom level of my current window by hitting Cmd + a bunch of times. Once I am done I usually do some guess work to get the screen size back to what I am used to, hitting Cmd - a couple times.

There is an easier way.

Hitting Cmd 0 will return the window back to its default zoom level.

h/t Jake Worth

🆙 Update macOS from cli

Opening the App Store and navigating to the update tab and clicking and confirming the update buttons is just too many steps for me.

macOS has a cli to the software update process:

$ /usr/sbin/softwareupdate

With some fancy arguments I can update everything in one command:

$ sudo softwareupdate -ia

the -ia flag means install all the available updates.

Shell into a stopped docker container

If you are experiencing an error trying to run your docker container then maybe you need to do some debugging inside of the docker container. But how do you shell into a container if you can’t even start it?

docker run -it --rm --name newname myimage:latest bash

This takes your image and starts a new container, running bash and allowing you to examine your container.

-it allows you to attach a terminal.

--rm will clean this container up when you are done with it.

--name <something> is the name you give your new container.

Selecting DOM Elements Faster Than Ever In Chrome

Selecting and inspecting DOM elements: you’ve done it many times before. Whether you right click the element and select Inspect (which isn’t always all that accurate) or you use the DevTools’ inspect tool with highlight-assist, it takes a couple clicks to get there.

There is a faster way.

Hit Cmd-Shift-C.

Chrome DevTools will be expanded open if it isn’t already and your mouse pointer will be put in inspect mode with the highlight-assist. Find your DOM element, give it a click, and start inspecting!

Easier Access To Network Throttling Controls

In Simulating Various Network Connection Speeds, I showed how to change between various simulated connection speeds from the Network tab in Chrome devtools. Unfortunately, the Connection Speed dropdown is crowded out by a number of other controls in the Network tab. As a result, unless that tab is expanded pretty wide, you won’t be able to get at it. I’ve found myself sliding the devtools wider and narrower over and over while testing things with throttling.

There is another, easier place to access throttling.

The console drawer gives us access to a number of additional tabs of controls. Add the Network connections tab for easier access.

Show All Pivotal Stories With Blockers

Within the past year Pivotal Tracker added a feature that allows you to mark stories with blockers. These are visual indicators with a description that are used to show a particular story is blocked, that is, it cannot be completed until something else is taken care of.

In order to maintain the health of the project, it is good to triage these blocked stories from time to time. The best way to identify all of the blocked stories is to filter them into their own column.

Enter is:blocked into the search bar to show all of the blocked stories.

Toggle Between Terminals In VSCode

VSCode allows you to have multiple terminal tabs, but you have to manually switch between them with a drop down. For me, that is a lot of mouse action. I’d prefer to have a keyboard shortcut that allows me to switch between them. Fortunately, there are commands for going to the next and previous terminal which can be attached to keybindings.

Try adding the following two entries to your keybindings.json file:

[
  { "key": "cmd+shift+k", "command": "workbench.action.terminal.focusNext" },
  { "key": "cmd+shift+j", "command": "workbench.action.terminal.focusPrevious" },
]

Save the file and then start toggling between your different VSCode terminals.

source

Firefox DevTools Vim Mode

I’ve been using Firefox more and more lately, and keep discovering new features with the devtools. One of the most handy when trying to edit css or html is vim mode.

To enable vim mode in the devtools, first to to your about:config page:

Change the devtools.editor.keymap setting to vim and you get all your familiar editing functionality.

List Tmux Keys

Want to see all the mapped shortcuts for your Tmux session? Try this, assuming a Tmux leader of <CRTL-Z>:

<CTRL-Z> ?

This produces a list like the following:

bind-key    -T prefix       :                 command-prompt
bind-key    -T prefix       ;                 last-pane
bind-key    -T prefix       =                 choose-buffer
bind-key    -T prefix       ?                 list-keys
bind-key    -T prefix       D                 choose-client

Cursor Pagination with graphql

When a graphql object has a plural type, each object of the collection from that plural type will have a cursor associated with it. This cursor is generally a base64 encoded unique identifier referencing the search, the object and the place of that object amongst all objects in the collection.

Ask for the cursor as a property when iterating over a collection.

  query {
    User(login: 'jbranchaud') {
      repositories(first: 100) {
        edges {
          node {
            cursor
            name
          }
        }
      }
    }
  }

The above query will return a cursor for each repo.

Get the last cursor of that collection with pageInfo.endCursor:

  query {
    User(login: 'jbranchaud') {
      repositories(first: 100) {
        pageInfo {
          endCursor
          hasNextPage
        }
        edges {
          node {
            name
          }
        }
      }
    }
  }

The endCursor will look like:

Y3Vyc29yOnYyOpHOBK0NoA==

Use this cursor to obtain the next 100 repos with the after property.

  query {
    User(login: 'jbranchaud') {
      repositories(first: 100, after: "Y3Vyc29yOnYyOpHOBK0NoA==") {
        pageInfo {
          endCursor
          hasNextPage
        }
        edges {
          node {
            name
          }
        }
      }
    }
  }

Toggle Mirror Display (OSX)

When using a separate display like a projector, I often switch between screen mirroring (my screen matches the secondary display screen) and not mirroring. Especially during a presentation that uses both slides and live-coding in the terminal.

Instead of navigating through ‘System Preferences’ > ‘Displays’ > ‘Arrangement’, and checking or unchecking the ‘Mirror Displays’ checkbox, I can toggle between the two with ⌘ + F1.

Using ngrok to evaluate webhhooks in a dev env

A webhook, an http request to a server initiated by an outside service, is difficult to test. The outside service must have a valid url to make the request with, but your development server generally runs on the unreachable localhost.

The Ngrok product page describes ngrok like this:

It connects to the ngrok cloud service which accepts traffic on a public address and relays that traffic through to the ngrok process running on your machine and then on to the local address you specified.

If I have a local dev server on port 3000 I run ngrok like so:

> ngrok http 3000
Forwarding   http://92832de0.ngrok.io -> localhost:80

Then, configure the outside service to point the webhook at the ngrok.io address provided by the ngrok tool. Now, your local server will receive http requests from the outside service and you can evaluate those requests effectively.

Focus The URL Bar

There are a lot of things you can do in the browser without having to reach for the mouse. Bringing the URL bar into focus is one of those things.

Hit Cmd+L in any modern browser (I’ve tried Chrome, Firefox, and Safari) and the URL bar will be brought into focus. From there, you can quickly change the URL of the current tab and your fingers never left the keyboard.

h/t Jake Worth

Chrome Dev Tools Selection Variable

Highlight a few HTML elements in the Chrome Developer Tools Elements inspector, and you’ll have a traversable history. The selected element is stored in a variable called $0. We can manipulate it like so:

> $0.click();

Try this when the selected element is hidden or difficult to click. There are four more variables representing your most recently selected elements: $1, $2, $3, and $4.

h/t Josh Branchaud

Search Github Faster with Shortcuts

Last year, I wrote about Github repository shortcuts for code, issues, and pull requests.

Now Github has a projects tab on each repository. Ever the completist, here’s the shortcut for that tab: gb. Typing this on a Github repo’s page loads the projects tab.

Researching this led me to an even better shortcut, s. This is site-wide and it focuses the Github search bar.

Here’s the impressive full list of Github hotkeys.

Install a Homebrew Formula at Master

We’ve been testing out the forthcoming Elixir 1.6 formatter on Tilex’s codebase, which requires a version of the langage that has not yet been officially released.

There’s a few ways to do this. Since Elixir is installed with Homebrew on my machine, here’s how to do it with Homebrew:

$ brew install elixir --HEAD

From the Homebrew man page:

If --HEAD is passed, and formula defines it, install the HEAD version, aka master, trunk, unstable.

Welcome to the bleeding edge!

h/t Brian Dunn

Break Current tmux Pane Out To Separate Window

You have a split pane open in your current window. Perhaps it is running a local server or has a connection to a database. The pane is taking up too much space in the current window, but it is important so you don’t want to just kill it. If that is the case, break it out into a separate window.

With that pane in focus, enter into command mode (<prefix>:) and then issue the break-pane command.

Alternatively, you can trigger this with a keybinding: <prefix>!.

See man tmux for more details.

Require Additional JS Libraries In Postman

When writing pre-request scripts and test scripts as part of a Postman request, you aren’t limited to vanilla JavaScript. There are a handful of libraries that can be required where needed.

This short list of available libraries includes cherrio, lodash, and moment.

To pull one of these into a particular script, use the standard require feature:

var moment = require('moment');

var now = moment();

For a full list of what is available, check out Postman’s Sandbox API Reference.

Environmental Variables and Chaining with Postman

Postman is a tool for building APIs. We’ve been digging into it today; it’s got some great features.

Today I learned we can chain requests, passing the result from one API interaction to all subsequent interactions.

Let’s say one API call gets a token on success, a token that all other calls require. When we run the first request, we can add a test that pulls out and sets the token:

var data = JSON.parse(responseBody);
postman.setEnvironmentVariable("token", data.token);

Now, other tests can reference {{token}} in their headers. We can even chain calls in Postman’s automated test runner, ensuring that the token-getting request always runs first.

more info

Hub CI Status

hub is a command-line client for Github. It lets you manage pull requests, forks, issues, and more from the command line. I regularly find new ways to integrate it into my open-source gardening.

Today I learned hub can report on your CI integration. We recently switched TIL to Circle CI, are iterating toward a stable test build, so CI status is important and not always predictable.

I check the status of a commit with the following command:

$ hub ci-status 7aa1316fe8665ef8cab5dd10cc80da024625ba20
success
$ hub ci-status HEAD
failure

Search Tweets By Author

Twitter has some advanced search features that allow you to do more than just search by keyword. The from:<author> syntax is the way that you can restrict your search results to a specific twitter user.

twitter from search

By using "pair programming" from:hashrocket, I am able to find all of the tweets by @hashrocket that use the exact phrase pair programming.

tmux copy-mode -u, useless or useful?

Tmux comes with a key binding for both copy-mode and copy-mode -u. The first is straight forward, you can navigate through the window history, highlight something and place it into your tmux buffer. I was curious about what the -u flag was for, and the man page says:

The -u option scrolls one page up.

So the -u option just places you into copy-mode one page up. Useless! Or wait, maybe that’s something I want…

Screengrab to Clipboard on Mac

If you’ve ever taken a screengrab on a Mac with CMD + SHIFT + 4, then pasted or dragged that image into a text area such as a Github issue description, there is a better way: CMD + CTRL + SHIFT + 4. This saves your screengrab right to the clipboard, ready to paste wherever.

The same command with 3– take a screenshot instead of screengrab– also works as expected, sending the data to your clipboard.

While not a particularly ergonomic key combination, this helps me add visuals to bug reports and feature requests.

h/t Dorian Karter

Advanced Google Queries

You can use various techniques to narrow your Google queries:

To start, open a new tab, and google hashrocket.com. Compare those results to the following:

site:hashrocket.com This will only return resources that have a reference to this website.

site:hashrocket.com admin Same as above, but only containing resources that contain the word admin. In this case, it shows all of the TIL posts containing admin.

link:hashrocket.com Only pages that have links to hashrocket.com

related:hashrocket.com Sites that are similar to hashrocket.com (other dev shops).

source: ‘The Web Application Hackers Handbook 2’ - Dafydd Stuttard & Marcus Pinto