Post on 20-May-2020
JavaScript and CSS for GeographersPatrick Arlt, Allison Davis & Nate Bedortha
Slides: http://bit.ly/2PLJft4
This talk is all fundamentals.
First, Some NotesLots of supplemental info in these slides.
Designed to help you keep learning beyond this talk.
Pretty much everything is a link.
Slides: http://bit.ly/2PLJft4
Web Development is Hard
It's ok to feel overwhelmed
Good news: you're more equipped than you think!
Scripted with ArcPy?
Scripted with Python?
Con�gured an app?
Used Arcade?
A quick note on web servers
HTML, CSS, and JS all go in your web server
Install > Terminal/Command Line/Windows Bash/Powershell
For fast prototyping use or
How to set up a local web server
Node
npx http-server .
CodePen StackBlitz
HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Hello!</title> <!-- <link> (CSS) goes here --> </head> <body> <!-- Content (more html) goes here --> <h1>Welcome</h1> <div>Here's some unstyled content.</div> <!-- <script> (JavaScript) goes here --> </body></html>
Try it in CodePenMDN's HTML docs and guides
CSS
html, body, #map { margin: 0; width: 100%; height: 100%; }
Where does CSS go?
Inside a .css �le that is loaded with a <link> tag.
Inside a <style> tag.
Inside an element’s style attribute. ⚠
<link href="my-css-file.css" rel="stylesheet" />
<style> /* Put CSS here*/</style>
<p style="color:blue;">Blue text!</p>
What does CSS look like?
html, body, #map { margin: 0; width: 100%; height: 100%; }
The "C" is for CascadingStyles cascade into the �nal styles for the HTML elements that match their
selectors.
Browser and user styles<link rel="stylesheet"><style> tags
Style attributes <div style="...">
CSS Speci�cityWhen properties collide speci�city determines which property wins.
1. Rules with !important2. Inline styles <div style="...">3. <style> and <link> tags
4. Selector speci�city1. #id-attribute - <div id="...">
2. .class-attribute - <div class="...">
3. div - <div>
Let's inspect some CSS
Right click on something you want to change click "Inspect Element"
Explore a Storymap
Let's Build an App!
vs Block Inline
Block-level elementsInline elementsLearn CSS Layout: the "display" propertyNormal FlowBlock and Inline Layout in Normal Flow
Units
Full unit referenceThe Lengths of CSSUnit and Values - QuirksMode📺 Layout Land: Introduction to Viewport Units
Flexbox
Flexbox FroggyLearn CSS Layout: �exboxA Complete Guide to FlexboxMDN: CSS Flexible Box Layout
PositioningLearn CSS Layout: positionMDN: position
Grid Layout
Grid GardenA Complete Guide to GridGrid by ExampleMDN: CSS Grid Layout📺 Incredibly Easy Layouts with CSS Grid
Bonus Demo: CSS Grid Template Areas
Media Queries and ResponsiveDesign
Responsive design galleryMDN: Media QueriesMedia Queries for Standard DevicesLearn CSS Layout: media queries
Typography and Color
Google FontsGoogle Web Fonts Typographic ProjectFont PairTypeScale
Flat UI ColorsAdobe Color WheelColor Lovers
JavaScript
Where does JavaScript go?
Inside a <script> tag.
Inside a .js �le.
In your browser's Right click > Inspect Element > Console tab
( ) ( )
<script> /* Put JS here*/</script>
<script src="app.js"></script>
DevTools console
, , & Variables arithmetic comparison logicconst dogName = "Bunsen"; var year = 2020; let skyBlue = true; year++; // 2021 year--; // 2019 "high" + "five"; // 'highfive' // logical 'and'true && skyBlue; // true// 'or'true || false; // true// 'not' !skyBlue; // false
MDN's First Steps JavaScript guideTry it in CodePen
functionsfunction dogYears(age) { return age * 7; }
dogYears(3); > 21
age => { return age * 7; }; age => age * 7; // these are the same!
and Arrays[] objects{}var dogs = ["Ginsburg", "Bunsen"]; dogs[0]; // 'Ginsburg' dogs.push("Spot"); dogs.length; // 3 dogs.map(dog => dog.toUpperCase()); // ['GINSBURG', 'BUNSEN', 'SPOT']
let dog = { name: "Ginsburg", age: 4, ageInDogYears: function(age) { return age * 7; } }; dog.name; // 'Ginsburg'
Try it in CodePen
JavaScript Patterns
JavaScript is Asynchronous
JavaScript is single threadedRuns one function in its entiretyThen run the next functionThis is the "Event Loop""Callback functions" de�ne thing that happen later
Event Loop and Callbacks Demo
Promises
Promises represent values that will be set in the future.
i.e. I Promise to be a useful value in the future.
function processResponse(response) { return response.json(); } function doSomethingWithUser(user) { console.log(user); // prints a bunch of user info } function anyErrors(error) { console.error("what have you done!", error); } let user = fetch("https://randomuser.me/api/") .then(processResponse) .then(doSomethingWithUser)
catch(anyErrors);
Demo
The and HTMLJavaScript can interact with your HTML. The HTML on your page is
represented by the DOM (Document Object Model).
Select HTML elementsListen for events & user interactionsChange HTML elements
DOM
Demo
The future! You will encounter this more often.
JavaScript Modulesimport { something } from 'some-file.js';
Demo
AMD Modules (JS API)
require is a fancy way of adding <script> tags to load code on demand.
require([ "esri/Map", "esri/views/MapView", ], function (Map, MapView) {
// Map and MapView have been loaded! });
Demo
A more complex appChaining Promises JS API Sample
Tools & Frameworks
Don't jump into tools
The JS API is MORE then enough for simple mapping appsAdd tools when you KNOW you will bene�t from using themToo many tools === Lots of complexity to manageDon't touch tools until you feel limited
Types of tools
Modules - Formats for splitting up and sharing codeCompilers - Transform code often adding extra featuresBundlers - Combine modules and other assetsFrameworks - Architecture and structure for large apps/teams
Examples of tools
Modules - JS Modules, AMD, CommonJS, CSS ModulesCompilers - Babel, TypeScript, SASS, LESSBundlers - WebPack, Parcel, RollupFrameworks - React, Angular, Vue, Ember, Dojo, Tailwind, Bootstrap
Node JS and NPM
- Run JavaScript on a server or desktop. Build web servers, APIsand CLI tools.
- Package manager and distribution system for JS code. Analogousto Pip or Conda in Python.
Node JS
NPM
Learn Node JS at NodeSchool
Development tools
Set up your local dev environment: Prototype with , or
Do I have a web server running?CodePen JSBin StackBlitz
Visual Studio CodeChrome Developer ToolsFirefox Developer ToolsArcGIS JS CLI
Keep learning
ArcGIS Developer TutorialsMDN: Learn web developmentCSS Tricks Beginner GuideEloquent JavaScriptYou Don't Know JSJavaScript 30NodeSchoolCommand Line Power UserCodecademy Bash Scripting course