The intention of this project to create a "Real World" project where the many features of IntelliJ/Webstorm can be demonstrated by "Live Coding" examples.

The three main intentions of of following the exercise are:

1. "Learn one IDE and learn it well", ( so there is no need (or rather little need) to use the mouse! )
2. Stay focused on the one task in hand - (No context switching, view one file at a time)
3. Use the debugger by default - (Auto update can be set up, so any changes are reflected in the Browser)

This project is using the very basic angular-seed as a base, there is no build process to distribute files to a build directory.

Using Angular 1.5

Following the Angular 1.x styleguide (ES2015) as much as possible

It is using Bootstrap 3 as an HTML/CSS framework.

Clone the webstorm-presentation repository using [git][git]:

git clone https://github.com/russellf9/webstorm-presentation.git
cd webstorm-presentation

npm install

npm start

The app is now available at http://localhost:8000/index.html.

Select ^D or press the green bug button

Now browse to the app at http://127.0.0.1:8000/

(This is the URL we need to view to test the app rather than the localhost URL.)

To avoid using the mouse it is essential to learn keyboard shortcuts, there seem to be hundreds of them for IntelliJ!

TODO add some basic shortcuts here...

Tool Windows

• ⌘ - 1 Project

• ⌘ - 2 Favourites

• ⌘ - 9 Version control

• ⌥ - F12 Terminal

• ⌘E - recent files

• ⇧F12 - Hide other windows ( essential to stay focused on one file )

Search within file (using Ace) (This process will move the insertion point)

⌃;, then enter a letter near the search item

Then, select the letter displayed to jump to it

⌘↑ - Opens a mini navigation bar, use this to move around rather than going back to the Project view.

Expanded Selection and Move ⌥↑ Enlarge Selection

⌥↓ Shrink Selection

Then move selection up ⇧⌘↑

or down ⇧⌘↓

Clipboard - way better than using simple Cut and Paste

Will store any number of items. Copy item (use the expand selection) then ⌘C

⇧⌘ V - Then select the number to paste item

Git

1. Open Source Control - ⌘9
2. Select the files or file to commit
3. ⌘K
4. Use shift-tab to focus on the commit button and select
5. Push - ⇧⌘K
6. Use shift-tab to focus on the push button and select

TODO clarify

(There is quite a set up here, the video from WebStorm - Things You Probably Didn't Know explains a lot)

1. Add Gear setting -> “Autoscroll from source"
2. One Tab

There are numerous plugins for IntelliJ/Webstorm, each provides quicker ways to get the job done.

For this project there are a few essentials which have to be imported.

⌘, -> Search Plugins

See IntelliJ IDEA Plugins

• AceJump
• AngularJS
• Bootstrap3
• CamelCase - use ⇧ + ⌥ + U.
• [Github]
• [Terminal]

Simply select browse repositories and search for the items and select install

Live templates allow shortcuts to create code templates, I've created the following:

• Directive
• Factory Service

1. Copy the raw code from the Gist
2. Select ⌘, -> Search for Live Templates
3. Find and select the Angular2 group
4. Select paste

The Directive can be created by entering ngsd and the Service can be created by entering ngf .

These are the templates we can use to build the project.

• ngm - A new angular module without a config function.

For Chrome Install the JetBrains IDE Support

Select + and "Add a new JavaScript Debug Config"

Set the following:

Name - Webstorm Presentation URL - http://127.0.0.1:8000/

To add breakpoints select the gutter where you want the break to be

⌘ ⇧ F8 - To show breakpoints

Use tab to select items..

Creating Groups looks like a cool option!

The plan is create list of random people and display then within the UI

• Get the debugger running
• Add a Service to get the Random People data
• Add a UI to display a single person object
• Create a UI to display a list of persons
• Create a UI to add more people
• Create a UI to remove people

To get data for a random person the http://api.randomuser.me api can be used.

Select double - ⇧ to open search everywhere Enter Restful

Select Test RESTful web service

This opens a UI we can use to test the API, enter the api url in the Host/port input and enter ⏎

This will display the data response

For the markup use the intellij-bootstrap3

Select ⌘J, and enter 'bs-' and scroll or enter the text for the Bootstrap component required.

• Fix Directive Live Template
• Use modules
• Use Controller As syntax
• Use main JS file
• Add Live Template for $http
• Fix broken links
• Create Live Template for a $q promise
• Create Live Template for a handling of a $http promise
• Import dependencies locally rather than using a CDN

• Tuning
• Sharing Live Templates
• [PDF Cheatsheat](https://resources.jetbrains.com/asse ts/products/webstorm/WebStorm_ReferenceCard.pdf)
• johnlindquist/ShortcutHero
• WebStorm - Things You Probably Didn't Know
• 10 WebStorm Shortcuts You Need to Know
• Daring Fireball Markdown documentation

⌘ ⇧ ⌥ ⌃ → ← ↑ ↓⌫ Fn