<![CDATA[ShortcutFoo Blog]]> 2017-07-13T23:51:04-04:00 http://www.cccute.com/blog/ Octopress <![CDATA[Introduction to NeoVim]]> 2016-10-16T22:00:00-04:00 http://www.cccute.com/blog/introduction-to-neovim The Evolution of Vi

Vi was first released over 40 years ago. Since that time, it has been used by countless of people, quickly becoming the de facto standard Unix editor. Then, in 1991, Vim (Vi Improved) was released. Vim improved upon the ideas established by Vi, offering a slew of new features and tools.

Then, two years ago, the next evolutionary step of Vi began. NeoVim began as a fork of Vim but is quickly establishing itself as a separate entity. Most of the original codebase has been gutted, cleaned up, and rewritten. Even though the NeoVim effort only began two years ago, it already boasts impressive features and innovative ideas. Some are even heralding NeoVim as the future of Vim itself.

Motivating Factors

Vim has become quite ubiquitous on Linux and Unix platforms, and people have come to expect that Vim will run on even the most ancient of hardware. Due to the plethora of arcane and obsolete platforms that Vim must support, much of its codebase has grown to be bloated and difficult to understand. In addition, Vim continues to maintain backward compatibility with Vi, offering “vi-compatible” and “ex” modes.

NeoVim, whose goal is to modernize and streamline Vim, drops support for legacy systems such as Amiga, BeOS, and MS-DOS. In addition, all vi-compatible modes have been removed, resulting in a much cleaner, leaner codebase.

NeoVim Terminal

While Vim plugins such as Conque and VimShell attempt to bring shell capabilities to Vim, NeoVim has built terminal buffers directly into the editor as first-class citizens. This makes it possible to execute commands as window splits, enable syntax highlighting, and even use copy and paste with Vim shortcuts between an editor and a terminal (or even two terminals!) This flexibility has caused some users to adopt NeoVim as a terminal multiplexer, replacing programs such as tmux.

Crafting a New Plugin API

One of Vim’s most powerful assets are the thousands of plugins and enhancements available for the editor. There are new syntax highlighters, syntax checkers, even file managers built as Vim plugins. However, one of the drawbacks of Vim’s plugin architecture is that Vim executes plugins in a serial and synchronous manner.

Due to this limitation, plugins can easily slow down the editor, rendering the user interface completely unresponsive during intensive operations. In addition, plugins are generally written in a custom scripting language called Vimscript.

NeoVim reengineered and rearchitected the plugin system, introducing a new MsgPack-based plugin API. While Vimscript will continue to be supported, the new API offers some exciting features and opens up brand new realms of possibilities. By creating a standard API in a well-established protocol. NeoVim makes it possible to easily interact with the editor remotely and even embed it inside other applications.

NeoVim’s new API has opened new possibilities for plugin developers. Here are some plugins which are either exclusive to NeoVim or offer enhanced functionality when installed on NeoVim.

NyaoVim

NyaoVim is a web-enhanced frontend to NeoVim. It allows a mini web browser to be embedded into the editor, providing some unique features. Live previews of HTML and rendered Markdown can be displayed as vertical splits.

Deoplete

Deoplete stands for “dark powered neo-completion”. While some of Vim’s autocomplete plugins slow down or even hang its interface, NeoVim’s API allows deoplete to provide fast, asynchronous keyword completion. Rather than attempting to “reinvent the wheel”, it wraps and enhances legacy autocomplete plugins, allowing them to provide the same functionality, but with a greater amount of responsiveness.

NeoTerm

NeoTerm enhances NeoVim’s built-in terminal. It allows users to monitor command statuses from the infobar, execute and monitor unit tests, easily copy code, and execute copied code inside an already running interpreter.

Neomake

Neomake provides syntax checking and build functionality to NeoVim. This runs asynchronously, working in the background to report build progress and issues as they are encountered.

Floobits

Floobits is a service which offers real-time, collaborative editing on native editors. It works across editors and even platforms. Although they used to support a Vim plugin, but have since dropped Vim in favor for NeoVim.

nvim-ipy

nvim-ipy integrates iPython and Jupyter notebooks into NeoVim. Similar plugins exist for Vim, but nvim-ipy has the ability to asynchronously execute long-running commands. In addition, the resulting output is collected in the background and reported in the editor.

neovim-intellij-complete

neovim-intellij-complete brings IntelliJ’s completion into NeoVim.

nvimux

nvimux provides a set of keybindings which leverage’s NeoVim terminal to mimic tmux.

nvimfs

nvimfs is a FUSE file system which exposes the NeoVim API. This allows users to interact with NeoVim remotely, executing commands and retrieving the results using standard redirects and reads to/from special files within the nvimfs.

Conclusion

Although NeoVim began as a fork of Vim, it has quickly become the next evolutionary step of Vim. Its terminal, and especially the MsgPack-powered asynchronous API, has already opened new possibilities not previously achievable on Vim.

]]>
<![CDATA[Facebook Flow Tutorial]]> 2016-09-05T19:25:00-04:00 http://www.cccute.com/blog/facebook-flow-tutorial Overview

Flow is an open-source static type checker for Javascript, built by Facebook.

Flow’s goal is to reduce the number of unhelpful “Syntax error” and “undefined is not a function” messages by catching mismatched types before you run them in a browser (or anywhere else).

You run Flow through the command line, pointing it at a particular directory. Flow looks through Javascript files and sees if the different types would cause a problem. For example, if you tried to multiply a number and string together, Flow would find that.

Installing Flow

Installing Flow is pretty simple. Open up a terminal and type the following:

mkdir -p get_started
cd new_project/
echo '{"name": "get_started", "scripts": {"flow": "flow; test $? -eq 0 -o $? -eq 2"}}' > package.json
touch .flowconfig
npm install --save-dev flow-bin

That’s it! You’re now ready to use Flow.

Using Flow

To start using Flow, create this multiply.js file and put it in the getting_started directory.

// @flow

function multiply(num1, num2) {
  return num1 * num2;
}
var x = multiply(3, '0');
console.log(x);

You can see the problem here: we’re trying to multiply a number and string together.

Also note the // @flow line. That tells Flow to examine this file. Flow will ignore any file that doesn’t have this line. (/* @flow */ is also acceptable)

To run Flow, type the command

npm run-script flow

You should get something like this:

$ npm run-script flow

> get_started@ flow /your_path/get_started
> flow; test $? -eq 0 -o $? -eq 2

Launching Flow server for /your_path/get_started
Spawned flow server (child pid=3732)
Logs will go to /private/tmp/flow/zSyour_pathzSget_started.log

multiply.js:6
  6: var x = multiply(3, '0');
             ^^^^^^^^^^^^^^^^ function call
  4:   return num1 * num2;
                     ^^^^ string. This type is incompatible with
  4:   return num1 * num2;
              ^^^^^^^^^^^ number


Found 1 error

Flow was smart enough to know that num1 * num2 should result in a number, and passing in a string would cause that to fail.

Very cool, but Flow isn’t perfect. For example, it wouldn’t find any errors in this code:

// @flow

function add(num1, num2) {
  return num1 + num2;
}
var x = add(3, '0');
console.log(x);

Try it. Create the file above, call it add.js and run npm run-script flow.

$ npm run-script flow

> get_started@ flow /Users/DanBefore/Developer/flow/get_started
> flow; test $? -eq 0 -o $? -eq 2

No errors!

If you ran the actual Javascript code, you’d get 30 as a result, which is probably not what you want. However, this code doesn’t break any rules because Javascript lets you concatenate numbers and strings. Thus, Flow decides it passes muster.

How to fix this issue? Use type annotations.

// @flow

function add(num1: number, num2:number): number {
  return num1 + num2;
}
var x = add(3, '0');
console.log(x);

Type annotations aren’t part of Javascript, but don’t worry about that right now. We’ll deal with it later.

Go ahead and run Flow on the new add.js file.

$ npm run-script flow

> get_started@ flow /your_path/get_started
> flow; test $? -eq 0 -o $? -eq 2

add.js:6
  6: var x = add(3, '0');
             ^^^^^^^^^^^ function call
  6: var x = add(3, '0');
                    ^^^ string. This type is incompatible with
  3: function add(num1: number, num2:number): number {
                                     ^^^^^^ number


Found 1 error

That’s more like it. Now we’re seeing the error.

Using Type Annotations

While introducing type annotations into your Javascript code isn’t required to use Flow, it can help you catch more errors.

Primitive Types

Flow has types that match all of the Javascript primitives:

  • boolean
  • number
  • string
  • null
  • void

Here are some examples:

// @flow

("gad zooks": string);
(1 + 1: string);

(false: boolean);
(0: boolean);

(45: number);
(true: number);

function theGogglesDoNothing(): void {}
function returnBoolean(): void { return true }

// Null has the type null
// Undefined has the type void
(null: null); // yup
(null: void); // nope

(undefined: void); // yup
(undefined: null); // nope

Run Flow on this and you’ll see the errors.


> get_started@ flow /your_path/get_started
> flow; test $? -eq 0 -o $? -eq 2

primitives.js:4
  4: (1 + 1: string);
      ^^^^^ number. This type is incompatible with
  4: (1 + 1: string);
             ^^^^^^ string

primitives.js:7
  7: (0: boolean);
      ^ number. This type is incompatible with
  7: (0: boolean);
         ^^^^^^^ boolean

primitives.js:10
 10: (true: number);
      ^^^^ boolean. This type is incompatible with
 10: (true: number);
            ^^^^^^ number

primitives.js:13
 13: function returnBoolean(): void { return true }
                                             ^^^^ boolean. This type is incompatible with the expected return type of
 13: function returnBoolean(): void { return true }
                               ^^^^ undefined

primitives.js:18
 18: (null: void); // nope
      ^^^^ null. This type is incompatible with
 18: (null: void); // nope
            ^^^^ undefined

primitives.js:21
 21: (undefined: null); // nope
      ^^^^^^^^^ undefined. This type is incompatible with
 21: (undefined: null); // nope
                 ^^^^ null


Found 6 errors

Advanced Types

Flow also supports a bunch of more advanced, flexible types.

  • any
  • mixed
  • literal types
  • class types

any type

any is a supertype of all types and a subtype of all types. It can literally be any type (boolean, number, whatever), and Flow will consider that variable or function to be well-typed.

Here are some examples:

// @flow

function takesAnyArgument(x: any): void {}
takesAnyArgument(0);
takesAnyArgument("");
takesAnyArgument({ foo: "bar" });

var whoKnows: any;
(whoKnows: number);
(whoKnows: string);
(whoKnows: { foo: string });

Here the takesAnyArgument function doesn’t care what kind of argument is passed, and the any type spells this out. The same appears true for the whoKnows variable. Let’s run Flow and find out.

$ npm run-script flow

> get_started@ flow /your_path/get_started
> flow; test $? -eq 0 -o $? -eq 2

any.js:9
  9: (whoKnows: number);
      ^^^^^^^^ uninitialized variable. This type is incompatible with
  9: (whoKnows: number);
                ^^^^^^ number

any.js:10
 10: (whoKnows: string);
      ^^^^^^^^ uninitialized variable. This type is incompatible with
 10: (whoKnows: string);
                ^^^^^^ string

any.js:11
 11: (whoKnows: { foo: string });
      ^^^^^^^^ uninitialized variable. This type is incompatible with
 11: (whoKnows: { foo: string });
                ^^^^^^^^^^^^^^^ object type


Found 3 errors

Whoops. What’s with all the errors? Why is there a problem with whoKnows?

The issue is that whoKnows is uninitialized: it doesn’t have an initial value. But if it gets an initial value, then it really isn’t any anymore, is it?

Flow has a way around this.

declare var whoKnows: any;

As you know, declare isn’t part of Javascript. Here, it’s just for Flow. The declare tells Flow that whoKnows can be anything.

Go ahead and change var whoKnows: any; to declare var whoKnows: any;. Then run Flow.

$ npm run-script flow

> get_started@ flow /Users/DanBefore/Developer/flow/get_started
> flow; test $? -eq 0 -o $? -eq 2

No errors!

In general, using any is a bad idea and should be treated with caution. However, if you’re trying to type-check a large number of Javascript files, you can add in any types into the code, and then change them into something more specific one by one.

You can read more about any here.

mixed, Class, and Literal Types

Diving into the rest of these types would triple the size of this article and possibly distract you from getting ramping up with Flow.

If you want to know more, check out the surprisingly well-written docs.

Removing Type Annotations for Final Build

Since type annotations are not part of the Javascript specification, you need to strip them out before sending the file to the user. Facebook recommends using Babel (a Javascript compiler) to do this.

Installing Babel

First, install the Babel command-line interface (CLI).

$> npm install -g babel-cli

Then set up Babel in the directory with the type anotations.

$> cd /path/to/my/project
$> mkdir -p node_modules && npm install babel-plugin-transform-flow-strip-types
$> echo '{"plugins": ["transform-flow-strip-types"]}' > .babelrc

Running Babel

Run the transpiler (that’s a real word, apparently) in the background with this:

$> babel --watch=./src --out-dir=./build

This will pick up any changes to files in src/, and create their pure JavaScript version in build/.

Checking Third-party code

Most production Javascript relies heavily on third-party code. Fortunately, you can use Flow to typecheck Javascript with external dependencies without having to typecheck the library code.

Interface files

You can create something called interface files which separate your code from library code. Fortunately, this does not involve changing the library code in any way.

Let Flow Know That Interface Files Exist

First, open up the file .flowconfig. Note that it’s a hidden file. When you first open it, it will look like this:

It’s empty.

Change that to:

[libs]
interfaces/

Example

Suppose you’re using the Underscore library and have this Javascript:

//* @flow */

var animals = [
  { name: 'anteater', predator: true },
  { name: 'koala', predator: false },
  { name: 'cheetah', predator: true },
  { name: 'sloth', predator: false },
];

function findPredators() {
  return _.findWhere(animals, {predator: true});
}

Running Flow will produce an error because it has no idea what the global variable _. is.

animals.js:11
 11:   return _.findWhere(animals, {predator: true});
              ^ identifier `_`. Could not resolve name

To solve this problem, create:

  1. an interfaces directory inside the get_started directory, and
  2. an underscore.js file inside interfaces.
// interfaces/underscore.js
declare class Underscore {
  findWhere<T>(list: Array<T>, properties: {}): T;
}

declare var _: Underscore;

This may look complicated, but all it says is:

Run Flow now.

$ npm run-script flow

> get_started@ flow /Users/DanBefore/Developer/flow/get_started
> flow; test $? -eq 0 -o $? -eq 2

No errors!

You’ve told Flow all it needs to know about _. so it understands what it sees and moves on.

Flow Weak Mode

If you have tens of thousands of lines of unchecked Javascript, running Flow on them may produce so many errors that it would be ovwewhleming to try to correct them all.

But it’d be nice to correct some of the more egregious errors. To target those, Flow has something called a weak mode.

The difference between weak mode and normal mode is that:

Calling Weak Mode

// @flow weak

That’s it.

Under weak mode, you’ll likely find some of these errors:

Once you get all those errors cleaned up, you’ll be ready to run Flow in regular mode.

For More Info

The mostly-human-readable documentation is at flowtype.org.

Learn Javascript 鈫?/a>
]]> <![CDATA[Sublime Text 3 GIFS Cheat Sheet]]> 2016-08-28T17:00:00-04:00 http://www.cccute.com/blog/sublime-text-3-gifs-cheat-sheet Sublime Text 3 has dozens of useful keyboard shortcuts. If you’re looking for something in particular, here are categories to browse through.

Most of the keystroke shortcuts have an accompanying gif, but others like Open File and Save As don’t really need one.

Beginner

Here are somes basics to get you started.

Command Example
鈱冣寴UP
Move line/selection up
Moving a line up
鈱榅
Cut line
Cutting a line
鈱樷喌
Insert line after
Inserting a line after
鈬р寴鈫?/code>
Insert line before
鈱冣寴DOWN
Move line/selection down
鈱楲
Select line - repeat to select next lines
鈱楧
Select word - repeat to select other occurrences
鈱僊
Go to matching parentheses
鈬р寖M
Select all contents of the current parentheses

Intermediate

If you have the basics down, it’s time to get a little fancier.

Command Example
鈱榏 or TAB
Indent current line(s)
Indent lines
鈱榌 or 鈬AB
Un-indent current line(s)
Un-indent lines
鈬р寴D
Duplicate line(s)
Duplicate lines
鈱?
Comment/un-comment current line
Comment/un-comment
鈱モ寴/
Block comment/uncomment current selection
Block comment/uncomment
鈱榊
Redo or repeat last keyboard shortcut command
Redo or repeat last keyboard shortcut command
鈱楰鈱楰
Delete from cursor to end of line
Delete from cursor to end of line
鈱楰BACKSPACE
Delete from cursor to start of line
Delete from cursor to start of line
鈬р寴V
Paste and indent correctly
鈱僛SPACE]
Select next auto-complete suggestion
鈱楿
Soft undo
A ‘soft undo’ reverses what’s been selected
鈱モ寴V
Paste from history
Sublime Text remembers the past few things on your clipboard, and you can choose from them

Navigation/Go To Anywhere

Command Example
鈱楶
Quick-open files by name
鈱楻
Goto symbol
If you’re new to symbols, think of them as class or function definitions.
鈱僄
Goto line in current file
鈱楲
Select current line
鈬р寖M
Select between brackets (or braces or parentheses)
鈬р寴J
Select current indentation
鈱楨
Use selection for find
鈬р寴E
Use selection for replace
鈬р寴A
Expand selection to html tag

Find/Replace

Command Example
鈱楩
Find
鈬р寴F
Find in files
鈱楪
Find next
鈱モ寴F
Replace…
鈬р寴G
Find previous
鈱業
Incremental find
Incremental Find is only slightly different than Find. When you use Find, you begin typing, hit Enter to find Find Next right occurance, and then Escape to begin editing. With Incremental Find, when you begin typing, you can hit Enter and immediately begin editing the selection.
鈱モ寴E
Replace next
鈱モ寴G
Quick find

Text Manipulation

Command Example
鈱楰鈱楿
Transform to uppercase
鈱楰鈱楲
Transform to lowercase
鈬р寖K
Delete line
鈱楯
Join lines
鈱モ寴.
Close html tag
F5
Sort lines
鈱僃5
Sort lines (case sensitive)

Split Window

Command Example
鈱モ寴2
Split view into two columns
鈱モ寴1
Revert view to single column
鈱モ寴3
Split view into 3 columns
鈱モ寴4
Split view into 4 columns
鈱モ寴5
Set view to grid (4 groups)
鈱?
Jump to group 2
鈬р寖2
Move file to group 2
鈬р尌鈱?
Split view into 2 rows
Sadly, the keyboard shortcut for this does not appear to work. You have to use the menu: View > Layout > Rows: 2
鈬р尌鈱?
Split view into 3 rows
鈱?
Jump to group 1

Miscellaneous

Command Example
鈱楬
Hide Sublime Text 3
Oh, you know what this looks like.
鈱モ寴H
Hide all other windows
You know what this looks like, too.
鈱楰鈱楤
Toggle side bar
鈬р寴P
Command prompt
鈱極
Open file
I suspect you’re familiar with what this looks like.
鈱?
Zoom in
鈱?
Zoom out
鈱?
User settings
鈬р寴S
Save as…
You’ve probably seen this one work before.
鈱モ寴S
Save all
Saves all your open files.
鈱僠 Show console
鈱冣寴F
Enter/exit full screen
Toggles full-screen mode.
鈬р寖鈱楩
Enter distraction free mode
F6
Spell check
Learn Sublime Text 3 Commands 鈫?/a>
]]> <![CDATA[Awk by Example]]> 2016-08-21T18:00:00-04:00 http://www.cccute.com/blog/awk-by-example This post is part of a multi-part series. While each of these posts was designed to be self-contained, you might be interested in reading about Grep and Sed, the other two tools covered previously.

Of the three utilities that we’re exploring, Awk is by far the most powerful and complicated of the bunch. Rather than attempting to document every facet of this tool, we’ll be examining a handful of examples, hopefully piquing your curiosity in the process.

Firstly, let’s review what we’ve covered in the previous parts:

Awk is a programming language which focuses on text processing and manipulation. As we’ll see in the examples, Awk can do everything that Grep and Sed can do (and more!).

Just as a reminder, as before, when “rhyme.txt” is referenced in an example, please assume it has the following contents:

Hickory dickory dock

The mouse ran up the clock

The clock struck one

The mouse ran down

Hickory dickory dock

– “Hickory, Dickory, Dock” (public domain)

Example 1: Searching for a Given String

Back in part 1, we saw how Grep can find all occurrences of the word “mouse” in “rhyme.txt,” using this command:

1
grep 'mouse' rhyme.txt

However, the same thing can be accomplished with Awk:

1
awk '/mouse/ {print}' rhyme.txt

The syntax for Awk is:

1
awk pattern { action }

However, the default action is “print,” so our Awk could be shortened to (closely resembling the grep command):

1
awk '/mouse/' rhyme.txt

resulting in:

The mouse ran up the clock

The mouse ran down

Example 2: Find and Replace

We also saw in part 2 that if we wanted to change the rhyme to be about cats, we could use the following sed command:

1
sed 's/mouse/cat/' rhyme.txt

Which would produce the following output:

Hickory dickory dock

The cat ran up the clock

The clock struck one

The cat ran down

Hickory dickory dock

Using Awk, we could use this command:

1
awk '// {sub(/mouse/, "cat"); print}' rhyme.txt

Let’s break that down:

However, if no pattern is provided, Awk already matches every line by default. This means that our command could be shortened to:

1
awk '{sub(/mouse/, "cat"); print}' rhyme.txt

Example 3: Counting Lines and Words

We’ve demonstrated how to use Awk to emulate grep and sed. However, now let’s try something a little more difficult. Let’s suppose that we want to know the total number of lines in our rhyme. To accomplish this, we could use the following command:

1
awk 'BEGIN{count=0} //{count++} END{print "Total:",count,"lines"}' rhyme.txt

Resulting in:

Total: 5 lines

How does this work?

Now, how do we change this command to count words instead of lines?

1
awk 'BEGIN{count=0} //{count++} END{print "Total:",count,"words"}' RS='\[\[:space:\]\]' rhyme.txt

Which outputs:

Total: 20 words

If you notice, the awk command is essentially the same, with an additional “RS” setting. Awk processes record-by-record, using a predefined separator to define a record’s boundary. Setting Awk’s Record Separator (RS) to “[[:space:]]” (any white-space) causes Awk to process word-by-word instead of line-by-line.

Conclusion

Awk is an extremely powerful tool and we have only explored a tiny portion of its capabilities. Hopefully, your curiosity has been piqued, and if you want to learn more, check out the references listed below.

Further Reading:

Learn Awk 鈫?/a>
]]> <![CDATA[Sed by Example]]> 2016-08-14T14:52:20-04:00 http://www.cccute.com/blog/sed-by-example We are in the middle of a multipart series. Each post focuses on one member of the command-line text-processing trifecta: Grep, Sed and Awk. In part 1, we introduced Grep, which allowed us to search and select text. Now, we will explore Sed.

Sed stands for stream editor. As its name implies, it manipulates and edits data files and streams that are piped into the program. In this post, we’ll work through several examples.

As before, whenever “rhyme.txt” is referenced, assume it contains the following content:

Hickory dickory dock

The mouse ran up the clock

The clock struck one

The mouse ran down

Hickory dickory dock

“Hickory, Dickory, Dock” (public domain)

Example 1: Find and Replace

If we wanted to change the rhyme to be about cats, we could run the following command:

1
sed 's/mouse/cat/' rhyme.txt

Which would produce the following output:

Hickory dickory dock

The cat ran up the clock

The clock struck one

The cat ran down

Hickory dickory dock

Note that, by default, all lines are returned, even if they don’t meet the pattern.

As stated before, Sed is a stream editor. To have it operate on a data stream instead of a file, you can stream the file into Sed using one the following commands:

1
sed 's/mouse/cat/' < rhyme.txt

or

1
cat rhyme.txt | sed 's/mouse/cat/'

Both commands will produce the same output.

Example 2: Adding Commas

Let’s say that we wanted to add a comma to the end of every line. Using Sed with regular expressions allows us to do this easily:

1
sed 's/\$/,/' rhyme.txt

Remember that ‘\$’ in regular expressions matches the end of the line. In other words, we are replacing the end of the line with a comma, which is how you append content to lines in Sed.

Example 3: Adding Dashes

If we were interested in adding dashes between each word, we might be tempted to use the following regular expression:

1
sed 's/\\s\*/-/g' rhyme.txt

We would be correct in thinking that “\s” matches any white-space character (which is what we want). However, since “`*`” means match zero or more occurrences, the regular expression would end up matching all characters and would produce the following output:

-H-i-c-k-o-r-y-d-i-c-k-o-r-y-d-o-c-k

-T-h-e-m-o-u-s-e-r-a-n-u-p-t-h-e-c-l-o-c-k

-T-h-e-c-l-o-c-k-s-t-r-u-c-k-o-n-e-

-T-h-e-m-o-u-s-e-r-a-n-d-o-w-n-

-H-i-c-k-o-r-y-d-i-c-k-o-r-y-d-o-c-k-

We actually want to use “+” to match one or more (verses `*`’s zero or more matches):

1
sed -r 's/\\s+/-/g' rhyme.txt

Which correctly produces:

Hickory-dickory-dock

The-mouse-ran-up-the-clock

The-clock-struck-one

The-mouse-ran-down

Hickory-dickory-dock

Please note:

Example 4: Grouping Word Pairs

Let’s take the previous example one step further. Instead of simply adding dashes, we want to use dashes to group every other word together. For example, instead of producing:

The-mouse-ran-up-the-clock

We want Sed to output:

The-mouse ran-up the-clock

To do this, we have to use the following Sed command:

1
sed -r 's/(\\w+)\\s+(\\w+)/\\1-\\2/g' rhyme.txt

Which will produce:

Hickory-dickory dock

The-mouse ran-up the-clock

The-clock struck-one

The-mouse ran-down

Hickory-dickory dock

There are two new concepts introduced by our Sed command:

Keep Learning!

Sed is insanely powerful! See below for sites where you can learn more.

Further Reading:

Learn More Command Line 鈫?/a>
]]> <![CDATA[Grep by Example]]> 2016-08-07T15:00:00-04:00 http://www.cccute.com/blog/grep-by-example Regardless of what flavor of Unix, Linux or BSD you use, you can generally count on Grep, Sed and Awk’s availability. These command line utilities provide different ways of searching and manipulating text. Understanding how to use these powerful tools will greatly enhance your command line effectiveness and productivity.

This will be a multi-part series, where each post will focus on one of these three tools. This segment will explore “Grep” using a nursery rhyme. To give some concrete examples, when “rhyme.txt” is referenced, assume it has the following content:

Hickory dickory dock

The mouse ran up the clock

The clock struck one

The mouse ran down

Hickory dickory dock

“Hickory, Dickory, Dock” (public domain)

Example 1: Searching for a Given String

If we wanted to find all occurrences of the word mouse in “rhyme.txt,” we could use this command:

1
grep 'mouse' rhyme.txt

which would result in:

The mouse ran up the clock The mouse ran down

Note that if you had multiple files to search (ex: rhyme1.txt, rhyme2.txt and rhyme3.txt), the syntax would be:

1
grep 'mouse' rhyme1.txt rhyme2.txt rhyme3.txt

Or using the “glob” (i.e., “wildcard”) syntax:

1
grep 'mouse' rhyme\*.txt

Or you could even use:

1
cat rhyme\*.txt | grep 'mouse'

(Note: As in the above example, when you don’t provide any file names, Grep will process input from standard input.)

Example 2: Using Regular Expressions

Say we wanted to find lines that rhymed (i.e., ending in “-ock”). We might be tempted to use:

1
grep 'ock' rhyme.txt

matching lines containing “dock” and “clock”. However, it would also return the line:

The clock struck one

which is not what we want. Instead, we want to leverage regular expressions:

1
grep 'ock\$' rhyme.txt

which would correctly return:

Hickory dickory dock

The mouse ran up the clock

Hickory dickory dock

If we wanted to be even more precise, we could enable grep’s extended regular expression syntax with the “-E” flag and use:

1
grep -E '(dock|clock)\$' rhyme.txt

See below for links for further reading about regular expressions in grep.

Example 3: Case Insensitivity

Now, pretend you wanted to find usages of the word “the.” Using the following command:

1
grep 'the' rhyme.txt

will only return the line:

The mouse ran up the clock

as by default, grep matches not only the search text but the case as well. To make grep case-insensitive, use the “-i” flag:

1
grep -i 'the' rhyme.txt

which will correctly return:

The mouse ran up the clock

The clock struck one

The mouse ran down

Example 4: Inverting Search Results

Having obtained all lines that contain “the,” the “-v” flag will invert the match, returning all lines that do not contain “the.” Thus, we could use the following (remembering, of course, to use the “-i” flag):

1
grep -i -v 'the' rhyme.txt

which would return:

Hickory dickory dockHickory dickory dock

Example 5: Context

Lastly, Grep provides the ability to display contextual lines. For example, if we wanted to search for “struck” and display both the previous and next line, we could use:

1
grep -C 1 'struck' rhyme.txt

resulting in:

The mouse ran up the clock

The clock struck one

The mouse ran down

Using the “-A” and “-B” options will allow you to independently control the number of preceding and subsequent contextual lines.

There’s More!

Although these are the major options, grep has many more capabilities that we didn’t have time to cover. Check out its man page for a full list.

Learn More Command Line 鈫?/a>
]]> <![CDATA[Affinity Designer Pen and Node Tools Tutorial]]> 2016-07-29T23:32:39-04:00 http://www.cccute.com/blog/affinity-designer-pen-and-node-tools-tutorial As with any vector art program, you need to be comfortable with creating and manipulating B茅zier curves. In Affinity Designer, the pen and node tools are the way to do that.

Understanding Bezier Curves

B茅zier curves are used in vector art programs like Affinity Designer and Adobe Illustrator to model smooth curves.

The basic idea is that you can describe any curve using four points in space:

  • the starting point
  • the end point
  • the control point for the starting point
  • the control poing for the ending point

For a straight line, you only need the start and end points, like this:

Start and end points

There are no control points here, since we don’t need any.

Let’s look at an actual curve.

Curve with start, end, and control points

You change the shape of the curve by moving the control points. The curve bends toward the control point. The farther away the point is, the more the curve bends. For example, if we move the control point attached to the start point, we can get something like this:

Moving a control point

Here are the control points in action:

Moving both control points

How exactly does the software draw the curve? Wikipedia has a great animation:

Animation on drawing a B茅zier curve

There’s a ton of math involved, but you don’t need to know the equations to create the curves you want.

Types of Nodes

In Affinity Designer, there are three kinds of nodes:

  • sharp nodes
  • smooth nodes
  • smart nodes

Sharp Nodes

Sharp nodes are either the end of a line or have a sharp angle. The nodes themselves are shown as squares.

Sharp nodes

The node on the bottom is a sharp node, even though it has two control points that create two curves. Since those curves don’t join in a smooth swoop, but rather at an angle, the node is a sharp node.

Essentially, any time the two control points aren’t joined by a straight line, you have a sharp node.

Smooth Nodes

Here’s an example of a sharp node (on top) and a smooth node (on bottom).

Sharp and smooth

As you can see, the control points of a smooth node are joined by a single straight line. Smooth nodes are represented by circles.

Smart Nodes

Smart nodes are simply smooth nodes where Affinity Designer controls how they look instead of you. They’re represented by a circle with a dot in them.

In the animation below, a user creates several points and Affinity Designer draws curves between them using smart nodes.

Smart Nodes

We’ll look more at smart nodes later.

Pen Tool

Use the pen tool to create curves and to transform sharp nodes into smooth nodes.

To start using the pen tool, either select the icon from the toolbar Pen icon or press P.

(I strongly recommend learning the keystrokes for any graphic design program you use regularly: it can make a huge difference in your productivity.)

Move the cursor to your document, and you’ll see the pen icon with a little “x” below it. That “x” tells you that you’re about to create a new curve.

Pen icon

Creating a Curve

To create a curve, simply select the pen tool and start clicking around your document. You’ll see something like this:

Random points

While there’s nothing curvy about this shape, it’s still known as a “curve” in the vector art world.

The node with the red square is where the next line will be drawn from. As you click around, the red square follows you.

Closing a Curve

To close a curve, click on the first node you created. When you hover over that node, a little circle will appear beneath the pen. That circle tells you that you’re about to close the curve.

Closing a curve

Drawing a Smooth Curve

Fortunately, you can create a smooth curve with your pen tool. When you’re drawing your curve, click and drag on your nodes instead of simply clicking (which we’ve been doing up until now.)

Drawing smooth curves with the pen

You can also create a curve with all sharp nodes, and change those to smooth nodes with the pen tool.

Converting from Sharp Nodes to Smooth

When you hover over a node that’s part of a closed curve, you’ll see a little slash appear beneath the pen icon.

Change sharp nodes to smooth

Converting from Smooth Nodes to Sharp

If you want to change a node from being smooth to sharp, i.e., removing its control points, you can option-click 鈱?/code>-click on a node.

Converting from smooth to sharp

Pen Tool Modes

The pen tool has four different modes:

  • Pen mode
  • Smart Mode
  • Polygon Mode
  • Line Mode

Pen Mode

Pen tool modes

So far, we’ve been using the Pen Mode, which means we can create both sharp and smooth points.

Smart Mode

The smart mode button is next to pen mode:

In Smart Mode, Affinity Designer decides how smooth your curves should be.

Smart nodes are circles with little dots in them. You saw these earlier in the article.

Polygon Mode

Next to smart mode is polygon mode.

Polygon Mode icon

In polygon mode, you can only create sharp nodes. No smooth curves in polygon mode.

Polygon Mode

When you create a curve in pen mode, clicking and dragging will create a smooth node. but in polygon mode, clicking and dragging simply moves a sharp node around.

Line Mode

In line mode, you can’t create a closed curve; only lines.

Line mode icon

You can create lines by both clicking and dragging, or by clicking twice (once for each end point).

Here’s how you use it:

Line mode

Notice that it’s impossible to create a closed curve in line mode. After you create the end point, the pen becomes ready to draw a new line.

Node Tool

Once you’ve created your curve with the pen tool, it’s time to fine-tune it with the node tool. You’ll find the node tool icon on the toolbar, right underneath the Move tool.

Node tool icon

You can also just press A.

Selecting Nodes

There are several ways to select nodes on a curve.

Selecting a Single Node

Hover over a node. You’ll see the cursor change from a white arrow to a black arrow. Then click, and you’ve selected that node.

Selecting single nodes

Selecting Multiple Nodes

Often, you’ll want to manipulate more than one node at a time.

Selecting One at a Time

To add nodes one at a time, hold down the shift key when you click (鈬?/code> - click).

Selecting multiple nodes one by one

Selecting Several at Once

To select a number of nodes at once, draw a rectangle around them.

Selecting several nodes at once

Deselecting Nodes

To deselect nodes, hold down the control key (鈱?/code>) and draw a rectangle around the nodes you want to deselect.

Deselecting nodes

Moving Nodes

Once your nodes are selected, you can move them with the mouse or the arrow keys.

You can also shift-click (鈬?/code>-click) to select multiple nodes at once.

Moving nodes with the node tool

Adding a Node

To add a node to an existing curve, just click on that line with the node tool.

Adding a node with the node tool

Curving a Straight Line

Affinity Designer can a great feature that lets you easily create a curved line from a straight one. It doesn’t give you a ton of control, but I’ve found it to be quite handy.

Place the node tool over a straight part of a curve. You’ll be a little squiggle underneath the tool icon. Click and hold, and create a curve.

Curving a Straight Line

Adjusting Control Points

To adjust control points, click on a node and move the control points that appear.

For smooth points, if you change the angle, this will move both points. However, if you just make the line shorter or longer, the other point won’t be affected.

Here’s what I mean:

Adjusting control points

But what if you want to move only one of the control points, not both at the same time? In that case, hold down the option key (鈱?/code>) when you select a control point.

Adjust single control point

You can also constrain your control points by holding down the shift key (鈬?/code>) when you move them.

Adjusting control points when constrained

Converting a Smooth Node to a Sharp Node

If you’ve decided that smooth curve just isn’t working, you can turn a smooth node into a sharp one without any control points. Simply option-click (鈱?/code> - click) the smooth node.

Converting a Smooth Node to a Sharp Node

Deleting a Node

To delete a node, simply select it and press delete.

Deleting a node with the node tool


Congratulations! You now have all you need to know about the mechanics of the pen and node tools in Affinity Designer. Go forth and make great art.

]]> <![CDATA[Sketch Measure Plugin Tutorial]]> 2016-07-23T12:34:52-04:00 http://www.cccute.com/blog/sketch-measure-plugin-tutorial By itself, Sketch does a good job of showing measurements when you’re moving or resizing a layer, but if you want to know your measurements without moving anything, the Measure plugin is a great tool.

How to install

The easiest way to install Measure is:

  1. Download the zip from GitHub.

  2. In Sketch, go to Plugins > Manage Plugins

    Manage Plugins

    and you’ll see this panel:

    Manage Plugins panel

  3. Click on the little gear near the bottom. You’ll see the menu item “Show Plugins Folder.” Select that.

    Show Plugins Folder

  4. Copy the Measure plugin (not the whole zip) into the Plugins folder.

    Copy plugin

  5. Save your current Sketch file or restart Sketch to start using Measure.

All Menu Items

For a plugin, Measure has a lot of features.

All menu items

Let’s go over all of them, one by one.

Create Overlay

The word “overlay” can mean a few different things. In Sketch, an overlay can mean a popup, alert, or lightbox over a background. Here’s one example of an overlay:

Overlay as message

However, with the Measure plugin, creating an “overlay” simply creates a layer on top of whatever you’ve selected, and it’s the same size as what you’ve selected. Here’s a selected layer:

Select Harold

Pressing 鈱冣嚙1 (control+shift+1) creates a little overlay layer.

Overlay layer

It’s simply a layer, the same size as your selection, filled with a beige color with an opacity of 30%.

Measure Size

To measure the size of a layer, start by selecting it.

Select Harold

Then either press 鈱冣嚙2 (control+shift+2) or select “2. Measure Size” from the Plugins > Measure menu.

Measure Size menu

The size measurements of that layer will then appear. You might have to deselect the layer to read the numbers.

Harold's measurements

By measuring layers one by one, you can display multiple measurements.

Multiple measurements

When you want those measurements to go away, you hide them by:

  1. Pressing 鈱冣嚙H (control + shift + H)
  2. Choosing “Toggle measure hidden” from the plugin menu
  3. Deleting the measurement layers (the top two in this case). This, of course, deletes the measurements instead of just hiding them.

    Layers

Measure Spacing

To measure the space between two layers, select them both.

Selecting Harold and his name

and press 鈱冣嚙3 (control + shift + 3) or choose “Measure spacing” from the dropdown menu.

Measure spacing

The aqua color makes it a little hard to see the numbers, but it’s still legible.

You can also select two layers, where one is inside the other.

Harold inside

Get Property

Get Property is a nice way to display all the information you want about a layer. Here, I’ve selected the text layer “Bethany” and pressed 鈱冣嚙4 (control + shift + 4).

Get Property panel

Click “OK” and get this result:

Bethany Name properties

Create Note

Creating a note simply reformats an already-existing text layer. Here, I’ve created a little text layer.

Zoo crew layer

If you press 鈱冣嚙5 (control + shift + 5), you get a reformatted layer that looks more like a note.

Zoo crew layer as a note

Percentage for Size

Predictably, this measures a layer’s width and height as a percentage of the total image.

If you select a layer and press 鈱冣嚙6 (control + shift + 6), you get something that looks like this:

Size percentage

You can display sizes by both percentage and direct size measurements.

Size by percentage and point measurement

Percentage for Spacing

Like Percentage for Size, this measures the distance between the edges of two layers as a percentage of the whole image.

If you select two layers and press 鈱冣嚙7 (control + shift + 7), you get something like this:

Spacing percentage

Toggle Measure Hidden

You can hide and show all of the Measure layers with 鈱冣嚙H (control + shift + H). If you have too many measurements visible, like this:

Too many measurements

Press 鈱冣嚙H to make them disappear.

Hidden measurements

All this function actually does is to hide all the Measure-created layers. Here they are, at the top:

Measure-created layers

…and here they are, hidden.

Hidden Measure layers

Toggle Measure Locked

Like “Toggle measure hidden,” locking the Measure layers means they can’t be changed until they’re unlocked.

Use 鈱冣嚙L (control + shift + L) to lock/unlock.

Locked layers

Lite Width and Lite Height

These two options delete the selected layer, replacing it with a measurement of that layer’s height or width.

Let’s select the frog.

Selecting Kazak the frog

Lite Width

Use 鈱冣嚙[ (control + shift + [) for Lite Width. The result:

Lite Width

No more frog, but you know how wide he used to be.

Lite Height

Press 鈱榋 (command + Z) to undo and bring the frog back.

Then use 鈱冣嚙] (control + shift + ]) for Lite Height. The result:

Lite Width

As with Lite Width, the frog layer itself is deleted, with only a Measure layer showing its height left behind.

Color Palette

The Color Palette menu option requires a little more up-front work before you can use it.

You have to select one or more artboards, and then choose Color Palette.

First, you have to have an artboard with color in it (images don’t count). Here’s an iPhone 6 artboard with a simple color gradient.

Artboard with gradient

Select it by clicking on the artboard’s name “iPhone 6.”

Selected artboard

Then choose Plugins > Measure > Color Palette

Measure will create a separate page called “Sketch Measure”.

First Color Palette result

It only cares about the set colors in our gradient, not all the in-between colors.

You can add to this Color Palette by selecting another artboard. Go ahead and select our original artboard.

Original artboard selected

Choose Color Palette again, and you’ll see this:

Additional colors in the Palette

Color Palette kept the original red and blue colors and added three colors from the other artboard:

  • black (from the background)
  • gray (from the image masks)
  • white (from the text).

Notice that the colors from the animal images were ignored.

Color Palette and Opacity

Color Palette has some trouble with non-opaque colors. For example, if you change the red color in the gradient to 50% opacity, like this:

Lowering red opacity

And then run Color Palette, you get this:

Color not appearing as half-opaque

There’s nothing in the Palette that shows we have a non-opaque red color in an artboard.

Fixing this requires a little workaround. To get Color Palette to recognize an opacity, you have to either

  • create a new color, or
  • resize the shape where you altered the color.

Go ahead and create a rectangle with a 50% opacity green color, and resize the original gradient.

Opacity workaround

Run Color Palette.

New colors

Aha! There they are.

Spec Export

Spec Export creates an HTML page of an artboard, which you can then either send to a client directly or post on a web site.

To see it in action, select our original artboard.

Press 鈱冣嚙E (control + shift + E) or select Plugins > Measure > Spec Export.

You’ll be asked to save the HTML and JavaScript files somewhere.

Save your spec files

This will save a folder with some files in it.

Sample export

Open up “Tablet Portrait.html” in a browser.

Spec Export

You can also click on an item in the spec to get its details.

Click on Harold

The developer of Sketch Measure says that Spec Export is still in beta, so it may be a little buggy. The measurements on the exported spec (that is, the web page) don’t always match up 100% with the measurements you’ll see in Sketch, but they’re pretty close.

Settings

The Settings menu has several options.

Settings Menu

Move to @Specs

Selecting “Move to @Specs” places any measurement layers in a special locked layer called “@Specs”.

Move to @Specs

There isn’t any documentation for the menu item, but it appears to simply make it impossible to accidentally move the existing measurements.

Clear Page Measure

Choosing “Clear Page Measure” deletes all of the measurement layers, even if they’re in a @Specs folder.

Measurements before choosing “Clear Page Measure”:

Before "Clear page measure"

And after:

After "Clear page measure"

Reset Configs

Choosing Reset Configs in Measure displays this popup:

Configs

Choose whatever resolution you want, usually depending on what kind of device you’re designing for.

Be warned: this menu always shows the first option (Standard) selected, even if that’s not what you originally chose.

Toggle Theme

Measure has a couple different ways to display measurements, but it’s not clear what they are without experimenting.

The default theme is what you’re already seen:

Default theme

Choose “Toggle Theme” and nothing happens. Unfortunately, you have to remeasure everything in order to see the new theme.

Other theme


That’s the Sketch Measure plugin, inside and out. Good luck!

]]> <![CDATA[Sublime Text 3 Plugins for Web Developers]]> 2016-07-11T20:03:00-04:00 http://www.cccute.com/blog/sublime-text-3-plugins-for-web-developers The right suite of plugins can make your time in any app far more productive. If you’re a web developer working on Sublime Text 3, we strongly recommend taking a close look at these plugins.

  • Package Control
  • HTMLPrettify
  • Emmet
  • Bracket Highlighter
  • jQuery
  • Case Conversion

Package Control

Package Control is a plugin (aka package) that makes it easy to find, install, and update other packages. Ideally, this is the plugin you want to install first. It makes dealing with all other plugins much simpler.

How to install

  1. Go to https://packagecontrol.io/installation and copy the long command there. It’ll look something like this: Long installation command
  2. Press Control-backtick (鈱?`) to open the Sublime Text Console. Console
  3. Paste in the long command line and press return.
  4. Once the command runs, you’ll probably see a little warning popup. popup warning
  5. Go ahead and click OK.
  6. Quit and restart Sublime Text.
  7. Press Shift-Command-P (鈬р寴P) for OSX or Control-Shift-P (鈱冣嚙P) for Windows to open the Command Palette.
  8. Start typing Package Control to see all the commands. Command palette

We’ll be using Package Control: Install Package for the rest of the plugins.

HTMLPrettify

HTMLPrettify takes long strings of HTML, CSS, JavaScript, and JSON, and formats them so you can actually read them instead of trying to parse a wall of solid text.

How to install

  1. Press Shift-Command-P (鈬р寴P) for OSX or Control-Shift-P (鈱冣嚙P) for Windows to open the Command Palette.
  2. Start typing Package Control to see all the commands. Choose Package Control: Install Package. A menu of available plugins will appear. Plugin list
  3. Start typing HTMLPrettify. Choosing plugin
  4. Click on HTML-CSS-JS Prettify. It’s a slightly different name, but don’t worry - it’s the same plugin.

You can see HTMLPrettify in action in this 14-second video.

Emmet

Emmet used to be called Zen Coding, and it’s been around for a while. It allows you to write shorthand HTML and CSS. For example, typing this:

#page>div.logo+ul#navigation>li*5>a{Item $}

and hitting tab turns into this:

1
2
3
4
5
6
7
8
9
10
<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

Once you install Emmet via Package Control, restart Sublime Text.

To get Emmet working, make sure you set the syntax for your document. Otherwise, it won’t work.

Setting HTML syntax

Give it a shot. Type in this:

1
nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon{Item $}+a{Item $}

and press tab. (You can also use Control-E 鈱僂)

Bam!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<nav id="menuSystem" class="navMenu isOpen">
  <div id="hotelLogo">
    <div class="navMenuIcon logoIcon"></div>
    <div id="arrowPointer"></div>
    <ul id="navMenuMain">
      <li class="navMenuItem navMenuItem001">
        <div class="navMenuIcon">Item 1</div>
        <a href="">Item 1</a>
      </li>
      <li class="navMenuItem navMenuItem002">
        <div class="navMenuIcon">Item 2</div>
        <a href="">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

It’ll take a little while to learn all the shortcuts, but if you write a lot of HTML, it’s well worth the investment.

BracketHighlighter

BracketHighlighter is an excellent bracket and tag highlighter.

After installing via Package Control, you can click anywhere in JavaScript or HTML and see the beginning and ending brackets in the left-hand column.

Brackets

jQuery

The jQuery plugin gives you proper syntax coloring for jQuery methods, and provides jQuery snippets for code completion.

jQuery

Case Conversion

Case Conversion lets you switch between snake_case, camelCase, PascalCase, and/more.

After installing Case Conversion via Package Control (type “pic” for a shortcut to get to Install Package), try it out:

Before: navMenu

Press: 鈱冣尌c then 鈱冣尌s

After: nav_menu

Note that it won’t work properly if you try to convert the case on a whole line.

Before: <nav id="menu_system" class="nav_menu isOpen">

Press: 鈱冣尌c then 鈱冣尌s (for camelCase)

After: navIDMenuSystemClassNavMenuIsOpen


If you’re a web developer using Sublime Text 3, give these plugins a shot! If you don’t like them, you can always remove them with Package Control: Remove Package.

]]> <![CDATA[Vim Movements Part II]]> 2016-05-15T20:20:00-04:00 http://www.cccute.com/blog/vim-movements-part-ii If you haven’t read Part I yet, you’ll probably want to do that first.

Welcome back! Buckle your seat belts and hold on to your hats; we’re about to blast through a lot of information.

Words! Words! Words!

Vim provides a total of eight different ways of navigating by word:

  • w – Moves the cursor to the beginning of the next word
  • W – Moves the cursor to the beginning of the next word (using spaces)
  • e – Moves the cursor to the end of the next word
  • E – Moves the cursor to the end of the next word (using spaces)
  • b – Moves the cursor to the beginning of the previous word
  • B – Moves the cursor to the beginning of the previous word (using spaces)
  • ge – Moves the cursor to the end of the previous word
  • gE – Moves the cursor to the end of the previous word (using spaces)

It might help to remember “w” for word, “e” for end and “b” for back. The major difference between the lower and uppercase word movements is how they deal with delimiters. Lowercase word movements stop at punctuation while capital word movements only stop at white space.

Let’s take an example. If your cursor as at the beginning of this sentence:

shortcutfoo.com is a cool website

Then:

  • The “w” would move the cursor to the first period (right after the “shortcutfoo”)
  • “W” would move the cursor the first white space (right after the “.com”)

Seek and Ye Shall Find

Vim also provides quick ways to move the cursor based on a search character.

  • f – Moves the forward cursor to the first occurrence of
  • t – Moves the forward cursor to right before the first occurrence of
  • F – Moves the backward cursor to the first occurrence of
  • T – Moves the backward cursor to right before the first occurrence of
  • ; – Repeats a f/t/F/T command (see below)
  • , – Repeats a f/t/F/T command (see below)

The f/t/F/T commands cannot be used on their own but are paired with another character. For example, pressing “fM” moves the cursor forward to the fist occurrence of a capital “M”. It is important to note that these commands only work on a single line; they won’t wrap around the next line (but other commands do; more on that later).

When using a f/t/F/T command, the “;” repeats the command in the same direction while “,” repeats the command in the reverse direction. For example, after a “f” command, “;” moves the cursor forward. However, after a “F” command, “;” moves the cursor backward.

Seek More and Ye Shall Find More

As previously mentioned, the f/t/F/T commands only work on a single line. However, other searching modes can operate on the entire document:

  • / – Moves the cursor forward to the first occurrence of
  • ? – Moves the cursor backward to the first occurrence of
  • * – Moves the cursor forward to the first occurrence that matches the word under the cursor
  • # – Moves the cursor backward to the first occurrence that matches the word under the cursor
  • n – Repeats one of the four previously mentioned commands (see below)
  • N – Repeats one of the four previously mentioned commands (see below)

Just like the “,” and “;” commands, “n” moves the cursor in the same direction while “N” repeats the command in the reverse direction.

Confused Yet?

We covered a ton of commands, and there are many more we didn’t have time to talk about. Vim can be overwhelming, but after while, it starts making more sense.

You might also find our Vim dojo helpful. It provides guided practice sessions to help you quickly master these tricky commands.

Until next time, keep Vim'ing!

]]> <![CDATA[Vim Movements Part I]]> 2016-05-07T14:06:00-04:00 http://www.cccute.com/blog/vim-movements-part-i Take a moment to think about your favorite text editor. How do move the cursor around? You can probably use your arrow keys, page up/down and home/end keys. If you want to get really crazy, there’s a chance that your editor supports control modifiers such as Control+Home or Control+End. However, in a standard editor, there aren’t many options. If you’re like most people, you probably think the same bland movements apply to Vim. Au contraire, my friend; Vim is no ordinary editor!

The Basics

Before we dive into the extensive list of Vim movement commands, let’s wet our feet with a couple of basics.

There are two ways to move the cursor left/down/up/right. You can either use the arrow keys (like you would in any other editor), or you can use:

  • h – Moves the cursor left
  • j – Moves the cursor down
  • k – Moves the cursor up
  • l – Moves the cursor right

Given the two options, which one should you use? It depends. Generally, you’ll want to use h/j/k/l as it is more efficient (being in the home row). In addition, as we’ll see later, there are many combinations that rely on the h/j/k/l movement that might not work with the arrow keys. However, when you are in edit mode, the arrow keys are generally the only way to move the cursor without first exiting edit mode. The only exception to this is that “Control+O” (that’s “oh”, not “zero”) allows you to temporary pause edit mode to enter a single movement command.

Patterns

Before we move on, here are a couple of patterns you’ll want to keep in mind.

Firstly, you can prefix almost any movement command with a number. For example, as you now know, “h” moves the cursor to the left. “4h” moves the cursor 4 positions to the left and is equivalent to pressing “hhhh”. Secondly, upper and lower case commands that share the same letter generally related (for example, “w” and “W”). Sometimes they will do the exact opposite, other times they will do the same thing but in different ways. However, they are almost always linked in some way.

The First and the Last

The home/end keys work for most versions, but as you can already guess, Vim can do much more!

Moving to the Beginning of a Line

  • 0 – Moves the cursor to the line’s first column
  • ^ – Moves the cursor to the line’s first non-whitespace character
  • I – Like ^, but also enters into edit mode (mnemonic: “Insert at the beginning of a line”)
  • S – Like “I”, but it erases the entire line (mnemonic: “Substitute a line”)
  • o – Like “I”, but moves the cursor the beginning of the line below, inserting a new line
  • O – Like “I”, but moves the cursor the beginning of the line above, inserting a new line

Moving to the End of a Line

  • $ – Moves the cursor to the end of a line
  • A – Like “$”, but also enters into edit mode (mnemonic: “Append to a line”)

Moving to the Beginning and End of a Document

  • gg – Moves the cursor to beginning of the document
  • G – Moves the cursor to the start of the document’s last line. You must use “G$” to get to the true end of the document

Moving Relative to the Screen

  • H – Moves the cursor to the start of the screen’s first line (mnemonic: “High”)
  • M – Moves the cursor to the start of the screen’s middle line (mnemonic: “Middle”)
  • L – Moves the cursor to the start of the screen’s last line (mnemonic: “Low”)

There’s More!

We’ve only begun to scratch the surface, and there’s much more to come! Head on over to Part II to continue your journey.

]]> <![CDATA[Top 50 Vim Configuration Options]]> 2016-04-30T11:02:00-04:00 http://www.cccute.com/blog/top-50-vim-configuration-options Few products rival Vim’s flexibility, since it currently supports over 380 configuration options, not including the hundreds of possible key bindings. While the sheer magnitude of choices are overwhelming, here are 50 of the most important configurations you need to know.

Before We Begin

The “vimrc” (Vim resource configuration) file provides initialization settings that configure Vim every time it starts. This file can be found in “$HOME/.vimrc” for Linux/OSX and “$HOME/_vimrc” for Windows users. Inside Vim, type “:echo $HOME” to see the value of “$HOME” for your system.

Indention Options

  • set autoindent: New lines inherit the indentation of previous lines.
  • set expandtab: Convert tabs to spaces.
  • set filetype indent on: Enable indentation rules that are file-type specific.
  • set shiftround: When shifting lines, round the indentation to the nearest multiple of “shiftwidth.”
  • set shiftwidth=4: When shifting, indent using four spaces.
  • set smarttab: Insert “tabstop” number of spaces when the “tab” key is pressed.
  • set tabstop=4: Indent using four spaces.

Search Options

  • set hlsearch: Enable search highlighting.
  • set ignorecase: Ignore case when searching.
  • set incsearch: Incremental search that shows partial matches.
  • set smartcase: Automatically switch search to case-sensitive when search query contains an uppercase letter.

Performance Options

  • set complete-=i: Limit the files searched for auto-completes.
  • set lazyredraw: Don’t update screen during macro and script execution.

Text Rendering Options

  • set display+=lastline: Always try to show a paragraph’s last line.
  • set encoding=utf-8: Use an encoding that supports unicode.
  • set linebreak: Avoid wrapping a line in the middle of a word.
  • set scrolloff=1: The number of screen lines to keep above and below the cursor.
  • set sidescrolloff=5: The number of screen columns to keep to the left and right of the cursor.
  • syntax enable: Enable syntax highlighting.
  • set wrap: Enable line wrapping.

User Interface Options

  • set laststatus=2: Always display the status bar.
  • set ruler: Always show cursor position.
  • set wildmenu: Display command line’s tab complete options as a menu.
  • set tabpagemax=50: Maximum number of tab pages that can be opened from the command line.
  • set colorscheme wombat256mod: Change color scheme.
  • set cursorline: Highlight the line currently under cursor.
  • set number: Show line numbers on the sidebar.
  • set relativenumber: Show line number on the current line and relative numbers on all other lines.
  • set noerrorbells: Disable beep on errors.
  • set visualbell: Flash the screen instead of beeping on errors.
  • set mouse=a: Enable mouse for scrolling and resizing.
  • set title: Set the window’s title, reflecting the file currently being edited.
  • set background=dark: Use colors that suit a dark background.

Code Folding Options

  • set foldmethod=indent: Fold based on indention levels.
  • set foldnestmax=3: Only fold up to three nested levels.
  • set nofoldenable: Disable folding by default.

Miscellaneous Options

  • set autoread: Automatically re-read files if unmodified inside Vim.
  • set backspace=indent,eol,start: Allow backspacing over indention, line breaks and insertion start.
  • set backupdir=~/.cache/vim: Directory to store backup files.
  • set confirm: Display a confirmation dialog when closing an unsaved file.
  • set dir=~/.cache/vim: Directory to store swap files.
  • set formatoptions+=j: Delete comment characters when joining lines.
  • set hidden: Hide files in the background instead of closing them.
  • set history=1000: Increase the undo limit.
  • set nomodeline: Ignore file’s mode lines; use vimrc configurations instead.
  • set noswapfile: Disable swap files.
  • set nrformats-=octal: Interpret octal as decimal when incrementing numbers.
  • set shell: The shell used to execute commands.
  • set spell: Enable spellchecking.
  • set wildignore+=.pyc,.swp: Ignore files matching these patterns when opening files based on a glob pattern.

Hopefully, these settings help you configure Vim to suit your preferences. If not, there are 330 other settings to explore!

]]> <![CDATA[Vim Plugins You'll Use Every Day]]> 2016-02-27T13:43:00-05:00 http://www.cccute.com/blog/vim-plugins-youll-use-every-day Vim is an awesome editor; the efficiency and power of its key bindings are astounding. Furthermore, the core functionality of Vim can be customized and extended through plugins. While there are a plethora of plugins that exist, we’re confident that you’ll use the following seven every day.

1. Pathogen

Before Pathogen, managing plugins in Vim was a chore. If you were lucky, plugins would be distributed as a “vimball” archive. However, files usually had to be manually copied and maintained. Pathogen modifies that way plugins are loaded, isolating them into their own directories. This makes installation, upgrading and removal fast and easy.

2. Ctrl-P

Ctrl-P is an extremely powerful finder for Vim and is without a doubt the plugin you’ll rely on the most. It supports regular expressions and has amazing fuzzy partial matching. For example, to find “src/util/misc.py,” Ctrl-P allows you to search by “misc,” “s/u/misc” or even “srcutilmisc.” It automatically detects your project’s root directory, enabling you to find files at insane speeds. Once you locate files, Ctrl-P also provides quick key bindings to open the file in a new tab or split.

3. Indent Guides

Indent Guides draws vertical stripes, enabling you to quickly see where indented blocks begin and end. While this is helpful in writing clean and properly indented code in any language, it is especially useful for Python, where white space is extremely important. Before this plugin existed, this was accomplished by manually editing Vim’s syntax files to add indentation guides, but this plugin is much easier and faster.

4. Syntastic

Syntastic is a syntax-checking plugin for Vim, supporting close to a hundred languages and data formats. It highlights errors in the gutter and provides full error messages as hover balloons. Syntactic provides a great first-line defense against careless mistakes. This is especially useful for those who constantly switch between programming languages, it is easy to confuse syntaxes.

5. Fugitive

Fugitive provides a Git wrapper inside Vim. From within the editor, the plugin enables you to easily switch branches, see a list of changed files, stage changes and create commits. The ability to view diffs and blames (change logs) of the current file as vertical splits is especially powerful. These splits are synchronized and scroll with the main editor.

6. Git Gutter

Git Gutter displays a git diff in the left gutter of the editor. The diff indicates which lines have been inserted, modified or deleted. While Fugitive provides detailed diffs, this plugin’s overview is extremely useful in quickly viewing a file’s changes at a glance. In addition, it offers a convenient way to stage and revert individual hunks.

7. Airline

Airline is an extendable status line for Vim. Many of the Vim plugins listed here are able to hook into Airline and display additional information such as the current Git branch, status of modifications and count of syntax errors. While Airline works and looks great on its own, special fonts (for example, “Inconsolata for Powerline”) provide enhanced visuals and graphics.

While there are many more Vim plugins, these are seven you’ll use every day for development. What about you? What plugins do actually you use most often?

]]> <![CDATA[How Does shortcutFoo Work? Part II: Fight Section]]> 2014-09-30T22:30:00-04:00 http://www.cccute.com/blog/how-does-shortcutfoo-work-part-ii-fight-section The Fight Section is the most infuriating part of the site 鈥?or at least it should be. That was the intent of the Evil Red Ninja. Maybe some background is required.

The Evil Red Ninja was spat out of his whore of a mother, somewhere on the souther slopes of the Caucasus mountains. He learned to terrify the locals at an early age but soon outgrew his provincial surroundings. He ceaselessly and mercilessly trained his body and mind to be the most unspeakably evil being the world had ever know. He then got a job at Comcast.

When he鈥檚 not trying to make your life a cesspool of hopelessness he enjoys watching children cry, going to Evil Ninja meetup groups, and cuddling with his cat, Adolf Hitler.

Seriously though, the fight section is designed to be fun. Challenging but fun. The difference between knowledge and a skill is repetition. You might know a shortcut in your head. But to solidify the kinesthesia our fingers requires practice. Gamifying such repetition goes a long way to keep you going while you amass those necessary repetitions.

The fight section also adds some stress. Stress is not inherently bad. Sometimes it makes us better, sharper, and better prepared. To practice being stressed is to remove stress. We want you to integrate shortcuts into you daily work 鈥?if thinking about shortcuts stress you, then you鈥檙e not going to use them. We stress you during the fight so you鈥檙e not stressed at work. Or, as the old maxim says, 鈥淐ry in the Dojo, Laugh on the Battlefield.鈥?/p> ]]> <![CDATA[Division of Startup Equity for Pirates]]> 2014-09-16T07:31:00-04:00 http://www.cccute.com/blog/division-of-startup-equity-for-pirates The daily standup got a bit heated that morning

How it normally works

We鈥檝e been thinking about equity this week 鈥?and the problems there in. Lets invent a hypothetical SEO firm called Pirates Incorporated. No… that鈥檚 not techie enough. How about we call them, PyrateSpace. Better. Now we鈥檒l need a Founder / CEO to start. Shortly after that, other first hires join up (assuming they鈥檙e not already there at the moment of inception.) They do what they can, for as long as they can. But inevitably, they鈥檒l need a full staff of developers and a staff to manage those developers.

It鈥檚 a startup. As such, everyone there works really hard, really long hours. There鈥檚 camaraderie: ping pong tables, lots of drinking, and seemingly endless amounts of free cereal. Eventually there is great success. Early traction leads to more traction. Traction leads to lots of early and well respected VC. Respected VC leads to an couple incredible funding rounds. And now it鈥檚 time to exit. Luckily, the investor class doesn鈥檛 understands their product too well 鈥?but it looks like there鈥檚 a boatload of monitizable elements. Their company is then sold to a multinational, which has more money than innovation, for 100 million dollars.

Here鈥檚 the question: Where does all that money go? In most cases, it largely goes to the CEO and the early-in crowd. Which is great for them. They all get a crazy amount of money. The grunts on the ground (a group I鈥檒l be calling 鈥渢he Crew鈥?鈥?the development team, the marketing department, HR, etc.) have to be satisfied with whatever is left for them when it鈥檚 finally their turn at the bar.

This is a problem. Mostly because there鈥檚 little incentive in this model for the crew. They get a job, work it for 22 months, 60 hours a week, then upon exit are given an insultingly small bonus and shown the door. Their hard work made someone else rich. Do this a few times and the whole startup culture starts to loose its appeal for the crew. They end up abandoning startups all together and start looking for a larger, and more reliable paycheck at one of those aforementioned multinationals. Their experience goes with them out of the startup ecosystem, and the whole ecosystem suffers.

A Lesson From Pirates

Objectively, living on a boat at sea in the 19th century must have been awful. Death from cannon fire, storms, or infectious diseases awaited you. Your only luxuries were hard tack dinners and watered down rum. So why do it? Simple. It payed well. Whether you worked as a pirate, privateer, or in the Royal Navy the economic model was similar: chase down enemy allied merchant ships, take them as a prize, then take everything in their hold and sell it.

They had the similar division of equity problem. Obviously the Captain was in charge. His good decisions and leadership brought success or failure. But he wouldn鈥檛 have gotten very far without the crew. There were many iterations of Prize Money distribution. I鈥檒l take a mid 19th century formula for simplicity.

All winnings were divided by eights. The Captain was allotted 2/8ths. 1/8th was divided among the next down the chain of command (the Leftenants, Sailing Master, Captain of Marines.) Another eight was divided among the warrant officers (lesser officers like carpenter, boatswain, gunner, purser, etc.) The remaining 4/8ths was divided among the crew (junior warrant and petty officers, crew.)

It would look like this: 1/8 Captain 1/8 Command Officers 1/8 Warrant Officers 4/8 Crew

Lets apply these numbers to our startup. Let鈥檚 just say, for fantasy鈥檚 simplicity, that the 100M needs to be divided just among those in the room and it鈥檚 a company of 53 people. There is a CEO, a C-Suite of 4, 12 Department Heads, and 36 everybody else (developers, marketing, HR, etc.) Divided the historical Naval way it would look like this:

1/8 CEO ($25 million) 1/8 C-Suite ($3.13 million per person) 1/8 Department heads ($1.04 million per person) 4/8 Crew ($347,000 per person)

Even the most lowly at this startup gets to leave with a nice healthy chunk of change. It鈥檚 not a bad way to end your employment. Moreover, you鈥檙e back in line to try it again. No more startup brain drain.

Also, you get to tell people that your startup鈥檚 fiscal model is based on 19th century pirating. Which is a pretty cool thing to mention at bars.

]]>
<![CDATA[Croissants and Tech Disruptions: The Story of August Zang]]> 2014-09-08T18:52:00-04:00 http://www.cccute.com/blog/croissants-and-tech-disruptions-the-story-of-august-zang A few weeks ago I wrote a post about Baguettes and Thought Disruption. It was actually just mock click-bait about how reading articles with such titles are a waste of time. But the more I鈥檝e been thinking about it the more I鈥檝e realized two important things. First, I鈥檓 clearly hungry during my weekly blog writing time. And second, there鈥檚 actually a lot we can learn about disruption from baguettes.

Meet August Zang. Born to a prominent surgeon in Vienna, Zang started his professional life as an artillery officer. It was a fine and promising career path for a young man, but one which lost his interest. His entrepreneurial spirit needed an outlet. When he was 30 years old he left home with a plan to bring Viennese style baked goods to Paris.

The disruption he brought with him was called Steam Baking. In steam baked breads, or pastries, steam is injected into the oven as it cooks. The steam slows the formation of the crust and makes the outside of the bread flakier and thinner. In the case of croissants it can make a very thin crust with a moist interior.

In 1839, Zang opened 鈥淏oulangerie Viennoise,鈥?which found immediate acclaim and popularity. Parisians could not get enough of his delicious baguettes, croissants, brioche, and other baked goods which came to be known as Viennoiseries. Imitators sprouted up all over Paris. You read that right. The croissant, probably the most French thing you can think off right now, was introduced to Paris, and popularized, by an Austrian.

At that point Zang could have coasted on his considerable success. But just like his previous career, he had bigger fish to… saut茅, I suppose.

In 1848, revolution spread across Europe and Latin America like wildfire. Dozens of countries erupted as the middle class demanded more participation in government, a more free press, and a fairer chance to succeed. Pretty much all of these revolutions failed within a year. But there were lessons to be learned. Zang learned that daily newspapers, the fuel which fired these revolutions, were the wave of the future of communications. Some 10 years after he left, Zang moved back to Vienna to get into publishing.

He started a newspaper modeled after the Paris newspaper, 鈥淟a Presse.鈥?The idea was simple: smaller articles, advertising tucked in everywhere, and make it as cheap as you can make possibly make it. He became the father of the Austrian daily newspaper when he founded his paper, 鈥淒ie Press.鈥?Some 166 years later Die Press is still in business. As such, the world ended up remembering Zang as a press mogul, and eventually a wealthy banker and mine owner, but not as a baker.

There are three important things to learn from the life of August Zang:

  1. All things are ripe for disruption always. When we think of disruption we don鈥檛 think of bread. It鈥檚 had been a staple food for a couple millennia. But there was room there for disruption. Same could be said about newspapers. The model barely changed for a couple of centuries. But there was space for better ideas in their model. The opportunity to improve is all around. Which brings us to…

  2. Heads Up! Ideas are everywhere. Zang became a man of wealth and power by taking an idea he learned in Vienna and moving it to Paris, and then by taking ideas he learned in Paris and moving them to Vienna. Get out there. Learn from everyone. And never stop consuming information.

  3. Don鈥檛 be afraid to try something radically new. How does an artillery officer become a bakery owner, to a publishing baron, to a banker? What these things have in common is leadership. The specifics change but the ability to have vision and take people to that vision is the same. So don鈥檛 be afraid 鈥?you already have every thing you could need. Just go for it.

]]>
<![CDATA[How Does shortcutFoo Work? Part I: Learn Section]]> 2014-09-02T12:00:00-04:00 http://www.cccute.com/blog/how-does-shortcutfoo-work-part-i-learn-section To understand the Learn section we first have to talk about how a person forgets or remembers something. Imagine that today you learn a fact: 鈥渄omain registration was free until September 14th, 1995鈥? From the moment you first learn this fact the clock starts ticking; You will forget if it is not reinforced. Review is necessary. But when? I鈥檒l say it again: 鈥渄omain registration was free until September 14th, 1995鈥? Now you鈥檝e heard it twice. This kind of rapid review helps, but not for long. You鈥檙e still going to forget.

The key is in understanding when you鈥檙e going to forget. You鈥檙e not going to forget in four sentences, but you鈥檒l probably forget within 24 hours. Maybe you鈥檒l forget in 18. Maybe 36 hours.

The algorithm shortcutFoo uses is known as a Spaced Repetition Algorithm. What it does is predict when you are going to forget. Once it knows when you鈥檙e going to forget it can bring up an item for review before you actually forget it. If the algorithm knows you鈥檙e going to forget in 3 days, it brings up the item for review in 2 days. With each review the time you are able remember that fact elongates. Your reviews start with a space of one day between them, then maybe 2 days, then 4, then 7, then 18. It all depends on you and your brain. The end result is a complete internalization of that fact. It will be a part of you. No recall necessary.

This is why you can do the Learn section of each unit of shortcuts only once a day. With the Learn section you are customizing the algorithm to your brain鈥檚 memorization cycle. The practice happens in the Fight section.

Stay tuned for Part II: The Fight Section

]]>
<![CDATA[What a Baguette Can Teach You About Thought Leadership]]> 2014-08-25T20:10:00-04:00 http://www.cccute.com/blog/what-a-baguette-can-teach-you-about-thought-leadership I鈥檓 curious. What did you think you would find on this page? Did you imagine that you鈥檇 learn a fun little tidbit about the history of French Bread? Or did you actually imagine that you would learn something about thought leadership by understanding a baguette?

Maybe the most important questions is somewhere in the neighborhood of both of our motivations. For me, my motivation as a author is easy to understand. I want you to click on that link. It would be nice if you enjoyed the article. It would also be nice if you shared it with your friends and colleagues. But primarily, I just want you to click the link, drive up my click through numbers, and make me more employable and more worthy of ad revenue.

But you. Why did you come here? Don鈥檛 get me wrong. In this world there are fun and nearly non-connectible topics and issues that can be to put together. Honestly, there is plenty Silicon Valley can learn about the San Francisco earthquake of 1906. Or what managers could learn about Captain Cook鈥檚 leadership style. Or what HR could learn from understanding the Chinese Imperial Examination system of the Ming Dynasty.

But ultimately these thing are just obfuscations. They are distractions that prey on your insecurities. When you see 鈥? Things That You Can鈥檛 Afford Not To Know About Canoes,鈥?one finds themselves asking, 鈥淐ould that be true? Could there be, well, anything that I can鈥檛 afford to know about canoes?鈥?/p>

Here鈥檚 the plea I鈥檓 making. Ignore these things. You don鈥檛 need them. Keep your head up, keep your eyes open, and you鈥檙e bound to learn everything you need to accomplish your goals. Trust yourself.

And get back to work.

]]>
<![CDATA[Why the Reboot?]]> 2014-08-18T22:32:00-04:00 http://www.cccute.com/blog/why-the-reboot Why the Reboot?

Some people have asked, 鈥淲hy the reboot?鈥? Good question! It鈥檚 been working great for lots of people. We even have users who haven鈥檛 missed a day in over a year. Their dedication astounds us! We meer mortals are lucky if we put on clean clothes in the morning.

Ironically, the reason we have changed our product is because we believe in it.

We believe that thorough knowledge of keyboard shortcuts can unleash creativity through fluidity. We believe that a good spaced repetition algorithm can help people learn faster and with greater retention. And we believe that most people are willing to work today to be better tomorrow.

The question is, how do we convince the world of our ideas?

Do you remember in those old Roadrunner and Coyote cartoons? Coyote had a nasty habit of running off cliffs. Normally, he鈥檇 run off the cliff and keep running, as if the ground was still there, defying gravity. Eventually and inevitably he鈥檇 look down, realize that the ground was no longer beneath him, and fall straight down. Education, habit building, and growth are kind of like this. As long as you don鈥檛 look down, as long as you keep going, eyes on the horizon, anything can be accomplished.

So how do we keep from looking down?

The answer lies somewhere between distraction and entertainment. A pedagogy needs to be compelling enough that you don鈥檛 mind learning. Entertaining enough that you enjoy doing what you wouldn鈥檛 normally do.

Simply put: we wanted shortcutFoo to be more entertaining that it could be more effective. We wanted to build something that tricked you into being the person you鈥檝e wanted to be.

]]>
<![CDATA[Routines: What 2 Raw Eggs and Orgies of Work Can Do for You]]> 2014-06-13T07:39:00-04:00 http://www.cccute.com/blog/routines-what-2-raw-eggs-and-orgies-of-work-can-do-for-you Pre-Day Planning

The thought of a daily routine can feel oppressive. Get up. Go to Work. Go Home. Go to Bed. Blah!

But what if your personal creative routine helped to spur your creativity, produce your best work in the shortest amount of time, and focus you on getting your life鈥檚 work done, not just your 鈥榤aking ends meet鈥?work.

What in the world am I talking about?

Some of the greatest creative minds of the last 300 years were just like you. Mozart, Darwin and Hugo are all lasting names in their fields, but they had to pay the bills too! So, the first step in building a personal creative routine is to figure out what your work is.

The first kind of work should be pretty obvious. This is the thing you have to perform every day to make the money to pay your electric bill and buy enough ramen to sustain life for one more month. We鈥檒l call this your Making Ends Meet work. Maybe this work is also your passion. If so, you can go ahead an skip the next paragraph.

But if your passion is developing an app from scratch or writing a novel, creating your YouTube channel on building the cast of Star Trek DS9 out of mini-marshmallows, or developing a faster way to do your taxes, then you have a second type of 鈥榳ork鈥?to prioritize in your creative routine. Imagine thinking of this passion or project as your 鈥楶rimary Work.鈥?/p>

What are your best times of day?

In addition to work we have to eat, exercise, socialize and sleep, but being a genius doesn鈥檛 necessarily mean you fit into the 9-5 mold of today鈥檚 working landscape.

Victor Hugo spent 1 hour every day writing. One hour! The rest of his time was spent 鈥榮ocializing鈥?and going to the barber! Seriously, he went to the barber every day.

Mozart spent twice as much time teaching lessons and giving performances to make ends meet than he did composing.

While Flaubert was writing Madame Bovary he wrote from 11:15pm to 1:30am because that is when his creative juices were flowing.

Point is, you might be a Mozart or a Flaubert. Hell, maybe you鈥檙e a Dickens. He exercised 90 minutes a day!

Start observing the times of day when you feel most creative and when you are most fatigued. If you have flexibility in your Make Ends Meet work schedule, try a few different modifications. If you don鈥檛, try arranging the hours you have outside of your MEM work in different arrangements.

You never know, your best creative programming might happen at 2am. Maybe your marshmallow genius is in full bloom from 6-7am.

Sticking with it!

A creative routine seems like a good idea, but what if you lay out a new routine and then just can鈥檛 stick with it?

Maybe this isn鈥檛 the right routine for you. Some self discipline is in order, of course. Re-arranging your day isn鈥檛 going to make every aspect of your life easy and splendid, but try to be objective when evaluating your new schedule. If you鈥檝e never tried it before, some trial and error will occur.

Also, check your priorities. Maybe you aren鈥檛 as into writing a novel as you think. There is no shame in that. Your time is the only finite commodity you have, so spend it wisely. Maybe the issue is your MEM work. Give some serious consideration to what your day job is doing to the rest of your life. It should be an enhancement, if at all possible.

If your routine and priorities are in then it鈥檚 time to suck it up and get back to work. To be a Tchaikovsky or a Freud or a Beethoven means getting up every day and putting in the effort. Work your routine and it can work for you. Get the most out of your 24 hours every day.

This article was written by shortcutFoo because we鈥檙e into getting work done faster. Learn shortcuts. Work faster. Have more time for whatever comes next in your day.

Major thanks to RJ Andrews of infowetrust.com for the infographic. All data originally coms from Mason Currey, author of DAILY RITUALS

]]>
波多野结衣高清无码中文456_波多野结衣中文字幕免费_波多野结衣高清无码中文