• chrome://inspect/

1. Documentation
2. Misc
3. Recommended Packages for Sublime and Atom

Documentation

https://devdocs.io/

https://github.com/google/ios-webkit-debug-proxy

SVG Animation Examples

20 SVG Examples

Misc

Node.js installs npm and node.

node - runs programs written in java script. npm - node package manager for installing open source development tools.

browser-sync tool - automatically reloads the browser when you save changes to your code.

sudo npm install -g browser-sync

(The -g in the command stands for “global.” Installing the package globally means that you will be able to run browser-sync from any directory.)

When you start browser-sync, as you will in the next chapter, it will run until you press Control-C

Starting browser-sync

browser-sync start --server --browser "Google Chrome" --files "stylesheets/*.css, *.html"

Recommended Packages for Sublime and Atom:

Recommended Packages for Sublime

• Emmet

  1. https://www.smashingmagazine.com/2013/03/goodbye-zen-coding-hello-emmet/
  2. https://docs.emmet.io/abbreviations/

• Color Highlighter (Sublime)

  1. https://packagecontrol.io/packages/Color%20Highlighter

Recommended Packages for Atom

• Emmet (emmetio)

  1. https://www.smashingmagazine.com/2013/03/goodbye-zen-coding-hello-emmet/
  2. https://docs.emmet.io/abbreviations/

• Pigments (Atom)

  1. https://atom.io/packages/pigments

• atom-beautify (Glavin001)

  helps with the indentation of your code, which helps with readability.

• autocomplete-paths (atom-community)

  your code will need to refer to other files and folders in your project.

• api-docs (sharvil)

  lets you look up documentation based on keyword

• linter (atom-community)

  Base plugin

  A linter is a program that checks the syntax and style of your code.

  linter-csslint (AtomLinter)

  • ensures that your CSS is syntactically correct.

  linter-htmlhint (AtomLinter)

  • confirms that your HTML is well formed.

  linter-eslint (AtomLinter)

  • checks the syntax of your JavaScript.