DS2018-TipsAndTricks

ArcGIS APi for JavaScript: Tips and Tricks for Developing and Debugging Apps

Setup Code Assist (K)

• Code Assist Demo
• Resources:
  JSAPI TS Setup

Snippets use in VSCode, Sublime, Atom (K)

1. Demo creating snippet 
2. Add snippet to Sublime or VSCode and show how to use 
3. Also show a demo of combining a few Emmet shortcuts and snippets to setup project. Use ! to stub out html, link:css

Resources :
 [Tool to create snippets](https://pawelgrzybek.com/snippet-generator/)
 [My snippet library](https://github.com/kellyhutchins/Code-Snippets-JSAPI)
 [Emmet support for Sublime Text 3](https://emmet.io/blog/sublime-text-3/)
 [Emmet cheat sheet](https://docs.emmet.io/cheat-sheet/)

Emmet (K)

Local Web Server (K)

Setting up a development web server is an easy way to quickly develop and test your apps built with the ArcGIS API for JavaScript without having to setup something like Apache or IIS.

• John Gravois has a great intro on setting up a web server
• Many IDE's have extensions or plug-ins you can install. One example is Live Server in VSCode
• (TODO) update demo to use http-server Another option is to use Express to create a simple web server within your project.

  1. Install express npm install express

  2. Create a simple file - in the sample app we name it server.js and paste the following code:

      ```
      const express = require('express');
      const app = express();
      const root = `${__dirname}/dist`;
     
      app.use(express.static(root));
      app.listen(5678);
     
      console.log('Running on http://localhost:' + 5678);
     
      ```
     

  3. Open a command prompt in the app folder and type node server.js

  4. Open a browser and point it to the url specified in the console and you should see your app.

Development Server Demo IndexZero

JSAPI Resources Repo (H)

• JShint, oauth callback, TS etc

Dev Tool Workspaces (H)

* Persist dev tool changes locally https://developers.google.com/web/tools/setup/setup-workflow
* Local overrides 

Useful Browser Extensions (H & K)

* Accessibility Testing [Axe accessibility extenstion](https://axe-core.org/about/) 
    **  Axe Coconut (like Chrome Canary or Firefox Nightly)
* Quickly check out fonts used on web page [WhatFont](http://www.chengyinliu.com/whatfont.html)
* JSON Prettifier (I use JSONView in Chrome ) [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en)
* Screen Reader [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en)

AGO Assistant (H)

Ago Assistant Tool

JSAPI FAQ (H)

* Module order 
* How do I know when xxx feature will be available in 4.x
* 4x extent-changed event: https://community.esri.com/thread/207901-in-4x-how-to-catch-extent-change-event
* View then/when 

Accessibility (K)

• Audits
• Check color contrast

Debugging and Testing (K)

* Using debugger to stop at point in code then inspect. 
* Throttling via browser
* Mobile emulation 
* Debug requests using Network tab 

Custom ArcGIS API 4 for JavaScript object formatting for Chrome Dev Tools (Either H or K)

• Setup and demo this: https://github.com/ycabon/arcgis-js-api-devtools

Additional Tips (??)

• Join the Spatial Community on slack
• Geonet