Talon demo transcript

This is a list of the commands uttered in the main video in my article, Hands-Free Coding. This is intended to be used by folks who cannot hear/see the video in the linked post, or who want to see an index of all of the commands spoken.

Initial code:

import React from 'react';
import { styled } from '@linaria/react';

function IconButton() {

}

export default IconButton

"slap second go up" - adds two new lines before the export, and presses the up arrow

"styled button wrapper" - adds code: const Wrapper = styled.button``

"blank rule background color" - adds code background-color: ;

"color variable primary" - adds code var(--color-primary) after background color.

"slap" - goes to end of line, and presses enter

"blank rule font size" - adds code font-size: ;

"two red each made" - adds code 2rem after font size

"slap" - goes to end of line, and presses enter

"rule cursor pointer" - adds code cursor: pointer; and a new line

"rule color white" - adds code color: white;

At this point a popping noise is made, and the cursor zooms into the react component IconButton. This demonstrates the eye tracking technology, which allows me to place the cursor where I am looking.

"say return" - adds code return

"space" - adds a single space

"elm wrapper" - adds code <Wrapper></Wrapper>, with the cursor between the start and end tag

"enter" - add a new line between the start and end tag

"go up second end go left third" - Moves the cursor to within the function's parentheses, right after function IconButton(. This command is actually three commands in one:

• "go up second" - presses the `up` arrow key twice
• "end" - presses the `end` key, which goes to the end of the current line
• "go left third" - presses the `left` rrow key three times, which moves in between the parenthesis

"brace space" - adds code { }

"say children" - adds the word children between the braces: { children}

"go down second" - moves down by two lines, between the <Wrapper></Wrapper> tags

'brace say children" - adds code {children}

"save" - saves the document, which causes Prettier to format, cleaning up some weird spacing

"go up second" - moves up by two lines, above the component

"slap second go up" - adds two new lines, and moves the cursor up by one

"import component icon" - adds code import Icon from '@/components/Icon';

More mouth popping noises, to position the cursor inside the function's parameter (before `children`)

"say icon" - adds code icon

"comma space" - adds code ,

Yet more mouth popping, to go down into the return statement, right after <Wrapper>

"closed elm icon" - adds code <Icon />, with the cursor after the word Icon

"squiggly attribute icon' - adds code icon={}, with the cursor in between the braces

"icon" - adds the word "icon" between the braces. The last few commands produce <Icon icon={icon} />

"save" - saves the file, causing prettier to format

The end state is the following code:

import React from 'react';
import { styled } from '@linaria/react';

import Icon from '@/components/Icon';

function IconButton({ icon, children }) {
  return (
    <Wrapper>
      <Icon icon={icon} />
      {children}
    </Wrapper>
  )
}

const Wrapper = styled.button`
  background-color: var(--color-primary);
  font-size: 2rem;
  cursor: pointer;
  color: white;
`

export default IconButton