General Tips for Designing

1. Pop your DevTools “out”—this is a personal preference of mine. It isn't easy to get a clear view of your design when pushed to the side and surrounded by code. You can change how DevTools are displayed by going in the top right > click the vertical dots > and selecting a different docking icon.

2. Use the Ruler tool—this can really help when trying to make sure elements line up.

   1. To enable the ruler tool, go to the Elements pane in DevTools, press shift + ? to access preferences > click the show rulers checkbox.

   2. A little trick I've learned is highlighting an element, so the rulers are displayed, then scroll vertically-only; without moving your mouse. DevTools will continue to draw rulers as you scroll to check elements beyond the viewport are lined up.

3. Maintain your own base CSS file—I personally keep a core.css file, and a non-core.css file. I know I'll use everything in core and quite a lot of things in non-core. This can help kick-start a project, and design in the browser immediately without any set-up.

Keyboard Shortcuts

A good metaphor for thinking about automation and keyboard shortcuts is using a well-known tool like Photoshop of a Word document. If you use these all day, you'll start to get used to some shortcuts. For example, Photoshop has single-key shortcuts for things like Brush tool (b), pen tool (p), Stamp tool (s), Switch colours (x). Word has things like Bold (b), Underline (u).

If you use these tools all day long, it's difficult to do without shortcuts. I feel the same way when designing in the browser—I want as many shortcuts as I can remember to get my ideas out fast.

Here are some convenient keyboard shortcuts that are baked into DevTools:

1. Incrementing—whenever you're keyboard is focused in a number field you can use the up/down arrows to increment by 1, and then combine with modifiers like shift to increment by 10, or alt to increment by 0.1. This works slightly differently in the Elements panel vs the Sources panel—the Elements panel being slightly superior since there is also the option to increment by 0.1.

   1. Incidentally, you can also use your scroll wheel to go up and down values, again using the modifier keys to change the way the numbers increment.

2. Previous/Next edit points—Use alt & - and alt & + to get to where you were editing previously, or most recently. I find this one particularly useful when working with larger CSS files (like my core.css!) where I'm editing variables at the top of the file and need to get to where I was.

3. Switching between inspecting and editing—you can use cmd + 1-9 to jump between different panels (you can also rearrange panels to whatever order you want by dragging them around).

   1. This is not turned on by default. To enable this, go to the Elements pane in DevTools, press shift + ? to access preferences > click the Enable cmd + 1-9 shortcut to switch panels checkbox.

   2. I use these shortcuts to switch between inspect mode (the Elements panel) and authoring CSS (the Sources panel).

Automating With Keyboard Maestro

There are a few different automation tools around. TextExpander is probably the most famous. I really like Keyboard Maestro (macOS only, unfortunately – apparently the closest thing on Windows is AutoHotkey). Keyboard Maestro is similar to TextExpander, but its feature set is much much larger, and it pretty much lets you automate whatever you can dream up.

Keyboard Maestro is incredibly handy when it comes to speeding up the authoring experience in DevTools, and you can get a free trial from their website if you're not sure. I have macros that deal with different aspects of authoring:

1. Text expansions that speed up typing property/value pairs, for example, I might type ptt to have Keyboard Maestro type out padding-block-start: var(--spacing-somevalue), and place my cursor in the correct position so that DevTools presents me with a list of possible variables.

2. Utilities such as deleting a line, moving lines up/down, commenting shortcuts, or maybe typing out a media query.

I've attached a sample of my macros below which may help you understand how to speed things up, before tailoring them to your needs.

If you'd like to understand a particular macro included in the attachment, hit me up on Twitter. Also, let me know if you have issues with any macros.

This is part 3 of 3 in the series "How to automate Airbnb Messages with Placeholders". Start at the beginning of the series here. See part 2 here. Some of the things demonstrated in this macro:

1. Multiple template messages

2. Customise check-in times based on the guest

3. Different airport directions automatically included depending on where they're landing

4. Some personalisations like whether they want to use the coffee machine, and so whether we include instructions or not

5. Automatic calculations about how many free laundry washes I'll allow the guests

This is part 2 of 3 in the series "How to automate Airbnb Messages with Placeholders". Start at the beginning of the series here. See part 3 here. Some of the things demonstrated in this macro:

1. Multiple template messages

2. Customise check-in times based on the guest

3. Different airport directions automatically included depending on where they're landing

4. Some personalisations like whether they want to use the coffee machine, and so whether we include instructions or not

5. Automatic calculations about how many free laundry washes I'll allow the guests

Although Airbnb has a "Saved Messages" solution, it's impossible to automatically make these messages personal without editing them before hitting send. This is part 1 of 3 in the series "How to automate Airbnb Messages with Placeholders". See part 2 here.

Using automation software to replace placeholders in your reply

In this video, I'll show you how to use automation software on your computer to personalise messages you send as a host automatically. It'll save you time and peace of mind because you won't need to remember what needs personalising.

I use Keyboard Maestro on macOS. You can download a free trial on their website and try this out to see if you think it's worth it for you. Remember you can put together lots of other automation using this software; it's sort of like a "Swiss army knife" for your computer.

Steps to create the macro

1. Click the plus '+' button at the bottom of the main column to add a new macro.

2. Select a trigger for the new macro—in this case; I recommend something like "airr". The reason for the extra "r" is so that you don't accidentally trigger the macro while typing normally.

3. Click "Add Action" and search for "Prompt for User Input". Set the title to "What is the guest name?" and add a variable of "Guest Name."

4. Click "Add Action" and search for "Insert text by pasting". Add your text but where you would normally type the guest name, select "Insert Token" > Variable > Guest Name.

Try out the macro by triggering it in your browser, typing "air", and Keyboard Maestro will prompt you to enter the guest name, after which it will layout your message with your guest name placeholder automatically replaced.

I wanted to start with a simple macro to show you how Keyboard Maestro can automate things for you. Check out part 2 for a more useful but complex example with multiple variables and responses.