====== Atom Editor ======
===== 1. Using the Atom Interface =====
==== Downloading and installing Atom ====

Open source text editor from github. 

https://atom.io/

https://git-scm.com/

https://github.com/atom/atom

open atom
  $ cd Desktop
  $ mkdir atom
  $ atom ./atom
create a new file called index.htm
  * start typing "HTML" and hit tab.
  * Notice the cursor is in the Title field.
  * Enter a title and hit tab.
  * Notice the cursor is not in the body field.
  * Enter "lore" and hit tab.
  * Notice Lorem text is inserted!

On the https://github.com/atom/atom page scroll down to Mac OSX and click on

Download the latest **Atom release**.

==== Introduction to the Atom interface ====

tabs contain open files

Four basic panes:
  - tab bar
  - gutter
  - status bar (at the bottom)
    - name (click to copy name to clipboard)
    - cursor position row:col
    - line ending format (windows crlf, or Unix lf)
    - format of current document (detected by contents or extension)
  - text editor. Wrap guide is 80 characters to the left.
Saving or adding a project will also open up the 
  - tree view
    - context sensitive to right clicking
    - click and drag the dividing line to change the size. View > Soft wrap, will wrap text

typing text will prompt macros such as "HTML" or "Lorem"

left side of status bar shows filename and cursor position. click to change the cursor position.

the right side of status bar show some things:
  * Line endings
    * Windows line ending CRLF
    * Unix/Mac LF
  * Format of document (Autodetect)
  * 

==== Files and the Command Palette ====

Drag folders on top of the atom icon to open atom with that folder in the tree view. Windows users can right click the folder and open with atom.

Project folders can be added or removed once open also.

Command Pallet can be opened from the packages menu. (command-shift-p)

use escape to close the command pallet.

==== Managing tabs and panes ====

Multiple documents can be used to work with multiple documents. View, Panes, Split*** (cmd-k then arrow). Or, right click on the document in the Tree View

Use cmd-k then an arrow key to open split panes

right click on a file in the tree viewand select split...

Close tabs to close the views

Use "Find Buffer", not "Find in Buffer" to search multiple panes for open files (buffers).

Use "Find File" to search the filesystem. (Also works with cmd-k arrow to open the file in a new pane.)

Find File will look in the directories. When finding files, use Cmd-k arrow and it will open in a new pane.

==== Symbols and bookmarks ====
Goto line number
  cmd-g

Goto Symbol
  cmd-r

=== Bookmarks ===
Under the edit menu

cmd-(fn)-f2
==== Managing and folding content ====
Hover over line numbers and little arrows will appear.

fold or unfold sections
  cmd-opt-[
  cmd-opt-]
fold or unfold everything
  cmd-opt-shift-[
  cmd-opt-shift-[
Levels of folding are possible
  cmd-k cmd-3
===== 2. Using Editing Features =====
==== Modifying Content ====
edit > lines >

indent `cmd [` or `cmd ]`

Move Line Up `^ + cmd + (up arrow)`

Move Line Down `^ + cmd + (down arrow)`

Copy Line `cmd + Shift + d`

Delete Line `^ + Shift + k`

Join Lines `cmd + j`

==== Changing text ====
edit >

comment/un-commnet code `cmd + /`

edit > Text > Upper/Lower Case

and other delete features

Delete line `^ + shift + k`

Transpose `^ + T`

==== Selections and multiple cursors ====
Traditional ways work.

click on gutter or click and drag to select line. Expand with shift.

Selection > Select Line
`cmd L`

Select inside brackets

With text selected, cmd + ^ + g will select all text like was selected.

Arrow key will initiate multiple cusors allowing text to be entered in multiple places.

cmd + click will also create another cursor.

With multiple lines selected, cmd + shift + l, then arrow left or right. cmd + arrow (or home and end) to move the beginning or end of the lines.


==== Find and Replace ====
cmd + f

A buffer is a current document.

Use Regex. Select the .* to turn regex on.
  <img src=".*">
  <img .* src=".*">

  \d digit

  \w word

Replace text by inserting the change text and clicking replace.

"Only in selection" will replace thus.

"Whole word" omits text that is part of a word.

Find in project mode will let file paths be specified. Search open in a new tab and selected results open in new tab as well.

===== 3. Customizing Atom =====
==== Modifying your preferences  ====
cmd + k opens a tab of preferences fairly well described.
==== Using Keyboard Bindings ====
cmd + k, then select "key bindings"

icon to left copies command to the clipboard.

Atom > keymap...

indenting is relevant in cson file.

copy and paste into cson and save it.

To check for duplicate commands:
  Packages> Key Binding> Resolver...



==== Customizing Atom packages ====
Packages > Settings View

same as

Preferences...

Settings button on some packages

wrap-guide

tabs : settings
  * turn off always show tab bar
  * User preview tabs will let you peak at a file with a single click (seems default now.)

tree-view
  * settings to ignore file set as ignored in Settings
  * settings to ignore files in .gitignore (VCS folders)

install packages

  * linter

==== Using and customizin theme styles ====
Preferences > Themes

Atom > Stylesheet...
.tree-view {
  font-size: 1.2rem;
}

View > Developer > Open in Dev Mode...

View > Developer > Toggle Developer Tools

==== Creating your own snippet shortcuts ====

start typing and help pops up that will insert code if selected and hit tab. i.e.:
  * img

Atom > Snippets...
  * snip (tab)
    * starts a cson file.
    * First line:
     * source.js -> .text.html
    * Second Line:
      * Snippet Name -> viewport
    * prefix activates snippet
      * Snippet Trigger -> viewp
    * body is what gets pasted
      * Hello World! -> <meta name="viewport" content="width=device-width, initial-scale=1.0">

In cson files, indentation is relevant, so start new ones with no indentation.

<file>
'li anchor':
  'prefix': 'lia'
  'body': '<li><a href="${1:http://}"></a></li>'
</file>

Dollar signs indicate tab stops after initial tab. the curly braces will highlight text inside curly braces.

Multiline

<file>
'class list':
  'prefix': 'ulit'
  'body': '''<ul>
    <li class="${1:item}">$2</li>
    <li class="${1:item}">$3</li>
    <li class="${1:item}">$4</li>
  </ul>
  ...
</file>
multiline with three quotes at the beginging and the end. Multiple $1's create multiple cursors.

===== 4. Using Atom with git =====
==== Working with Atom and Git ====
highlighted colored files and folders in tree view show changed files

Find file in buffer
  cmd + b

Show all files changed from the last commit. Same as 'git status' command.
  cmd + shift + b

Restore file to HEAD position
  cmd + opt + Z
==== Atom's GitHub integration features ====
Packages > Git Diff

Packages > Open On GitHub

To open GitHub pages:

opt + g +
  * o to open a browser
  * b to open the blame file
  * h to open history
  * i to open issues
  * c to copy url of GitHub

  $ cd ~/Desktop
  $ cd atom
  $ git branch
  $ git checkout 05_02e
  
  * opt + G + 
    * r allows the branch working with to GitHub
===== Next steps =====
http://atom.io

packages and themes that are trending and featured.

  * atom-material-ui

Documention - (Atom flight manual)

GitHub repo for expanding and developing Atom

Atom was created by GitHub.

Lynda Courses:

  * GitHub for Web Designers
  * Web Project workflows with Gulp.js, Git and Browserify