Macros are sequences of commands in Vim that can be recorded to build up more complex tasks and then run them again.



## Record a vim macro

This will put you in a mode where you'll be recording your commands as they run until later, when you say to stop recording.

`q` - start the recording.

`a-z` - store the macro in a register (ie, any letter a to z) for later recall.

## Add commands to macro

Then you start typing commands in a way that's repeatable.  These can be any normal commands! They might include:

`0` - start at the beginning of the line.

`fX` - move next instance of a certain character (eg, "X").

`r'` - replace some character with another (eg, "'").

`bp` - paste from a register (eg, "b").

`j` - go the next line.

`q` - stop the recording.

## Run a vim macro

After you've recorded a macro, you can use it as long as it stays recorded. (Be careful not to overwrite any you want to keep.)

`0-9` - (optional) the number of times you want to run the macro.

`@` - indicate you're going to run the macro.

`a-z` - the register in which you previously stored your macro.

## Run the last macro again

`@@` - whichever was run last will be run again

Convenient, eh!

## See what macros are in your registers

If you ever forget what you have recorded, you can list them.  The hard part is reading what you've recorded. :)

`:reg` - list contents of all registers

Any other tips on running macros in vim?

Record Vim Macros

Vim has a lot of great text editing features built in. But if you want to do anything else to customize it -- and you probably do -- you'll want some Vim plugins, of which there are many. What you may not want is a plugin manager. Neither do I. Here's how to take care of your plugins without a plugin manager.



## Vim Version 8+

You used to need a version manager. But if you have a vim of version 8 or later, you don't. There are additional capabilities baked in. Check your version. This is required for the rest to work.

To check your version, open vim and type `:version`.

## A Place for Plugins

There are many plugins to be found. Find one that suits some need you have.

Once you have a plugin in mind, you just need put it in a specific place.

A place like `~/.vim/pack/bundle/start` will work. What is special and specific about this path?

- `.vim/` is where you put all vim-related stuff
- `pack/` means packages
- `bundle/` the name of our package -- we can call this whatever we want (eg, `my-plugins`)
- `start/` loaded on vim startup

## Get the Plugin Code

Find your plugin online, probably on Github somewhere, and copy the git clone url. If I was going to install `vim-javascript`, I'd find the url: `https://github.com/pangloss/vim-javascript`.

If you're like me, you put your [dotfiles](https://github.com/jaketrent/dotfiles) in a git repo. Within my dotfiles clone, the vim subdirectory looks like:

```text
.
...
├── vim
│   └── pack
│       └── my-plugins
│           └── start
```

Now you want to record the fact that your vim config uses a plugin but keep that plugin source code elsewhere -- in its original repo. This is a great use case for [git submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules).

To make the connection in git, we type:

```bash
cd ~/dev/dotfiles
git submodule init
cd ~/dev/dotfiles/vim/pack/my-plugins/start
git submodule add https://github.com/pangloss/vim-javascript
git add .
git commit -m "add vim plugin for javascript"
```

Of course, please make adjustments for your own dotfiles repo paths. Also note that `git submodule init` only needs run once ever. Future plugins will only need the `git submodule add` command to be included.

## On Next Clone

Now you're set for your current install of vim. But what about that next wipe of your harddrive and a reinstall? To get all this back up and running, you'll need to clone your dotfiles:

```bash
git clone --recurse-submodules -j8 git@github.com:jaketrent/dotfiles.git
```

Note the special flag `--recurse-submodules`. If you forget this, you won't get that plugin code, and vim won't be responding to your plugins, because that code won't be downloaded.

Now vim is ready to be loaded with plugins and you don't need special plugin managers Pathogen, Vundle, or the others to do it.

Manage plugins in vim without a plugin manager.  Just use git.

Manage Vim Plugins Without a Plugin Manager

Gifox is a great tool for recording your screen as a gif on a Mac.



## Power of an Animation

A picture is worth a thousand words.  Put some extra frames in, and multiply the worth.  Sometimes an animated gif is awesome to have because it shows an interaction or a progression and not just a static state.

When filing a bug report, for instance, it can be worth a lot to see the interaction actually happen.  You can include steps to reproduce the particular bug in youor gif.  Demoing a responsive interaction in your UI to your designer can be easily done in a gif.  Obviously, any motion or animation work that you're working on, from complex keyframes to simple hover states, can benefit from a gif when trying to communicate to others.

![motion gif example](https://i.imgur.com/fRDko3w.gif)

## Gifox

Enter [Gifox](https://gifox.io/), a tool for Mac only that costs $5.  It's a nice little tool that sits in the top menu bar, ready for quick capture.

To use it, you select either an area on your screen or an entire window to record.  Once you press play, you are capturing the animation.  When you're done, press stop, and the gif will render.

![gifox dropdown ui](https://i.imgur.com/q2rqonN.jpg)

You'll see all recent gifs in a convenient dropdown for easy location.  So add another gif to your next bug report or Internet communication.  Besides funny, they can also be very useful.

What other tools do you use for gif work?

Gifox is a great tool for recording your screen as a gif on a Mac.

Record Screen as Gif on Mac

Projects are simple and lightweight in Spacemacs, and it's awesome.



## No New Project

In Spacemacs you never go to the Spacemacs menu and select "New Project".  What am I saying.. you keyboard to glory, typing `Cmd-N` for a new project.  But no, Spacemacs doesn't even do this.  You just start editing a file anywhere on the file system.  There is no ceremony in starting a new project, selecting tech, checking boxes, scaffolding junk, requiring project type support, or any of this.  It's simply editing.

## No Project Files

Lots of editors or IDEs have the idea of project files.  These are often in some hidden directory on the filesystem inside your code directory.  These might look like `.vscode` or `.idea` or some other such thing.  These often store project configuration or ditties like that related to the dev environment.  Spacemacs doesn't maintain file like this next to your code.

## Projects Tracked By Git

It's great that no new project/editor-specific files are created to support a project. Yet there is such a thing as projects in Spacemacs.  It is simply a list of local git repositories that Spacemacs remembers you as having edited.

To add a project to this list, edit a file within a local git repo (a directory with a `.git` subdirectory in it).

## Project Commands

To retrieve this list of projects, type `SPC p p` for `helm-projectile-switch-project`, select a recent project, and then a file within it to edit.

Once in a project, to open a file in that project, type `SPC p f` for `helm-project-find-file`.

Thus project starting, recognition, and navigation is super simple and lightweight.  There are many other useful project commands made possible by [projectile](https://github.com/bbatsov/projectile) within Spacemacs.

What other project features in Spacemacs do you appreciate?

Projects are simple and lightweight in Spacemacs, and it's awesome.

Projects in Spacemacs

These days, getting [prettier](https://github.com/prettier/prettier) into spacemacs is easy.



I've tried a few different methods, and recently I tried again and found one that worked well out of the box.  There is a repo for `spacemacs-prettier` at [praveenperera/spacemacs-prettier](https://github.com/praveenperera/spacemacs-prettier) that is the best I've found so far.

## Install

To install, clone [the repo](https://github.com/praveenperera/spacemacs-prettier) into `~/.emacs.d/private/`:

```bash
cd ~/.emacs.d/private/
git clone git@github.com:praveenperera/spacemacs-prettier.git
```

Next, use `SPC f e d` to open your `.spacemacs` file.  Add `spacemacs-pretter` to your config there:

```lisp
(defun dotspacemacs/layers ()
    (dotspacemacs-configuration-layers '(spacemacs-prettier))
)
```

## Format on Save

There are some great setups to [format on commit](https://jaketrent.com/post/format-javascript-with-prettier/).  If you want to format with prettier every time you *save* within Spacemacs, you can also add some config for that.

Open your `.spacemacs` file again, and a hook for every mode you care to format on save in:

```lisp
(defun dotspacemacs/user-config ()
    (add-hook 'js2-mode-hook 'prettier-js-mode)
    (add-hook 'web-mode-hook 'prettier-js-mode)
)
```

## Adjust Prettier Config

And of course, you want to add the one true prettier options to your formatting:

```lisp

(defun dotspacemacs/user-config ()
    (setq prettier-js-args '(
                             "--no-semi"
                             "--single-quote"
                             ))
)
```

:) 

Now you should be set.  Slap some nasty js in the buffer, `SPC f s`, and it's pretty!

Do you have any other interesting prettier configurations within Spacemacs?

These days, getting prettier into spacemacs is easy.

Prettier on Spacemacs

Snippets are prebaked bits of code that can make your coding experience faster.  Creating them and accessing them in [spacemacs ](http://spacemacs.org/) is easy.



## yasnippet

In spacemacs the default snippet manager is [yasnippet](https://github.com/joaotavora/yasnippet).  Its snippet format is inspired by Textmate.  We're going to look at the very basics of creating and using a snippet.  For more goodies, see the [official docs](http://joaotavora.github.io/yasnippet/index.html).

## Creating Snippet Files

A snippet is stored as a file on the file system.  There is one file per snippet.  There are a few ways to get a snippet file created.  Here are my two favorites.

### `yas-new-snippet`

To run a command in spacemacs, type `SPC :`.  Then execute the `yas-new-snippet` command.  This will open a new buffer with the template of a snippet setup for you to fill in:

```txt
# -*- mode: snippet -*-
# name: 
# key: 
# --
```

Lines that start with `#` are comments.  Everything below the comment will be the snippet content.  The comment fields are used to identify and use the snippet later on.  

- `name` is the human-readable description
- `key` is the shorthand text that you will write while coding to expand your snippet

### `helm-yas-create-snippet-on-region`

`helm-yas-create-snippet-on-region` is another way to create the snippet file.  You run this command after you're in a source file and you have a bit of source code selected.  After you have selected that code and run this command, the snippet template will be prepopulated with your selection as the snippet content.  This is great to use when you realize that you'd really like to make your tired fingers work so hard in the future.

## Defining Snippets

A snippet can be any text.  Usually it's some bit of code you write frequently. Snippets can be static or dynamic.  A dynamic snippet is one where the content includes values you decide when you go to use the snippet.  In yasnippet, these are called tab-stop fields.  They're defined by their tab order.  After you insert a snippet, you can tab through the fields to enter your dynamic values. 

Let's say that you wanted to create a snippet for a barebones React component.  You might define a snippet like this:

```txt
# -*- mode: snippet -*-
# name: React component
# key: rc
# --
import React from 'react'

export default props => 
  <$1>
    $0
  </$1>
```

- Tab-stops are defined by the `$`, followed by their tab index.
- `$1` will be the first tab-stop, allowing for dynamic value insertion.  Specifying the same tab-stop multiple times means that when inserting your dynamic value, it will appear in each place but only needing to be typed out once.
- `$0` is always where the cursor ends, with no opportunity for value insertion.

## Saving and Organizing Snippets

After you've edited your snippet to your satisfaction, you want to make sure that it's saved for later use.  Snippets are saved in:

```txt
~/.emacs.d/private/snippets/
```

In that directory, there are subdirectories named after the emacs major modes that the snippet should be available within.  For our React snippet above, we're going to save it to:

```txt
~/.emacs.d/private/snippets/js2-mode/rc
```

After you save a snippet, you need to load it into yasnippets in memory.  To do this, enter the command `yas-reload-all`.  

After you've spent time and effort creating a set of snippets that works well for you, make sure to back them up on a place like github.

## Inserting Snippets

You've done all the work -- now for the reward.  If I am writing a bunch of new React component modules, I'm ready with this new snippet.

I work in evil mode (vim keybindings within emacs), and the easiest way I've found to insert snippets is to execute the `spacemacs/helm-yas` command which is bound by default to `SPC i s` (think "insert snippet").  Once you've typed this, you'll get a mini buffer that allows you to fuzzy search over the `name` or `key` of your snippet.  We'll type `rc`, select it, and it's inserted into our code buffer.  You are ready to tab to tab-stops as soon as the snippet is inserted.  You can edit tab-stops by entering insert mode.

Snippets take some setup but can help save time later.  

How else do you handle snippets in spacemacs?  Do you have any better ways of creating, defining, or inserting them?

Snippets are prebaked bits of code.  Creating them and accessing them in spacemacs is easy.

Code Snippets in Spacemacs

Did you know that you can run an accessibility audit on your site from Chrome?  Simply add a Chrome extension, read the errors and warnings, and you're on your way to fixing the issues.



## Chrome Extension

The tooling for running the audit is available in the Chrome Web Store as an [Accessibility Developer Tools extension](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en).  Download and install to add the extension to Chrome.

Once installed, access the new panel in the developer tools.  Press `cmd-opt-i` or the equivalent to open the Developer Tools.  Click the Audit tab, and you should see this panel:

![chrome dev tools audit panel](https://i.imgur.com/nEpwQc0.jpg)

From here, select the 'Accessibility' audit, and you can click `Run` to run the audit.  Note that you can run this on local webpages as well, so this is a great local dev tool.

## The Results

Once you click run, you'll get a list of accessibility issues, either at the level of error or warning.  Go from top to bottom, and you should be resolving issues in order of severity.

![list of accessibility infractions](https://i.imgur.com/mwMLRcD.jpg)

To get more information on the errors, there are great links to small explanations of the [rules](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules).  For instance, this one about [AX_ARIA_10](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules), "This element has an unsupported ARIA attribute".

![specific AX_ARIA_10 infraction](https://i.imgur.com/fw4snXc.jpg)

For even more information about things like ARIA properties, the w3c has some more comprehensive documentation, such as its [Supported States and Properties](https://www.w3.org/TR/wai-aria/states_and_properties) page.

Once you fix up your markup, you can re-run the audit to see the errors go away.  Wouldn't it be cool if there was a hot-reload type feature here for auto rerunning of the audit?

## Run Automated Accessibility Tests

The underlying library that powers this accessibility audit in Chrome is called [axe-core](https://github.com/dequelabs/axe-core).  It can be run programmatically, thus dropped into any of your browser-running test suites (eg, functional tests in Selenium).

Thank you [Maureen](https://twitter.com/maureencodes) for introducing me to this great tool.

What other handy dandy tools have you found for testing for different accessibility issues?

Chrome has a nice tool for running an easy accessibility audit.