Javascript and CSS for Geographers Patrick Arlt, Allison Davis & Nate Bedortha Slides: This Talk Is All Fundamentals
Total Page:16
File Type:pdf, Size:1020Kb
JavaScript and CSS for Geographers Patrick Arlt, Allison Davis & Nate Bedortha Slides: http://bit.ly/2PLJft4 This talk is all fundamentals. First, Some Notes Lots 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? Congured an app? Used Arcade? A quick note on web servers HTML, CSS, and JS all go in your web server How to set up a local web server Install Node > Terminal/Command Line/Windows Bash/Powershell npx http-server . For fast prototyping use CodePen or 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 CodePen MDN'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. <link href="my-css-file.css" rel="stylesheet" /> Inside a <style> tag. <style> /* Put CSS here*/ </style> Inside an element’s style attribute. ⚠ <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 Cascading Styles 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 Specicity When properties collide specicity determines which property wins. 1. Rules with !important 2. Inline styles <div style="..."> 3. <style> and <link> tags 4. Selector specicity 1. #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! Block vs Inline Block-level elements Inline elements Learn CSS Layout: the "display" property Normal Flow Block and Inline Layout in Normal Flow Units Full unit reference The Lengths of CSS Unit and Values - QuirksMode Layout Land: Introduction to Viewport Units Flexbox Flexbox Froggy Learn CSS Layout: exbox A Complete Guide to Flexbox MDN: CSS Flexible Box Layout Positioning Learn CSS Layout: position MDN: position Grid Layout Grid Garden A Complete Guide to Grid Grid by Example MDN: CSS Grid Layout Incredibly Easy Layouts with CSS Grid Bonus Demo: CSS Grid Template Areas Media Queries and Responsive Design Responsive design gallery MDN: Media Queries Media Queries for Standard Devices Learn CSS Layout: media queries Typography and Color Google Fonts Google Web Fonts Typographic Project Flat UI Colors Font Pair Adobe Color Wheel TypeScale Color Lovers JavaScript Where does JavaScript go? Inside a <script> tag. <script> /* Put JS here*/ </script> Inside a .js le. <script src="app.js"></script> In your browser's DevTools console Right click > Inspect Element > Console tab ( ) ( ) Variables, arithmetic, comparison & logic const 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 guide Try it in CodePen functions function dogYears(age) { return age * 7; } dogYears(3); > 21 age => { return age * 7; }; age => age * 7; // these are the same! Arrays[] and 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 threaded Runs one function in its entirety Then run the next function This is the "Event Loop" "Callback functions" dene thing that happen later Event Loop and Callbacks Demo Promises 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); Promises represent values that will be set in the future. i.e. I Promise to be a useful value in the future. Demo The DOM and HTML JavaScript can interact with your HTML. The HTML on your page is represented by the DOM (Document Object Model). Select HTML elements Listen for events & user interactions Change HTML elements Demo JavaScript Modules import { something } from 'some-file.js'; The future! You will encounter this more often. Demo AMD Modules (JS API) require([ "esri/Map", "esri/views/MapView", ], function (Map, MapView) { // Map and MapView have been loaded! }); require is a fancy way of adding <script> tags to load code on demand. Demo Lets nish our app ~120 lines of CSS, ~30 lines of JS. A more complex app Chaining Promises JS API Sample Tools & Frameworks Don't jump into tools The JS API is MORE then enough for simple mapping apps Add tools when you KNOW you will benet from using them Too many tools === Lots of complexity to manage Don't touch tools until you feel limited Types of tools Modules - Formats for splitting up and sharing code Compilers - Transform code often adding extra features Bundlers - Combine modules and other assets Frameworks - Architecture and structure for large apps/teams Examples of tools Modules - JS Modules, AMD, CommonJS, CSS Modules Compilers - Babel, TypeScript, SASS, LESS Bundlers - WebPack, Parcel, Rollup Frameworks - React, Angular, Vue, Ember, Dojo, Tailwind, Bootstrap Node JS and NPM Node JS - Run JavaScript on a server or desktop. Build web servers, APIs and CLI tools. NPM - Package manager and distribution system for JS code. Analogous to Pip or Conda in Python. Learn Node JS at NodeSchool Development tools Set up your local dev environment: Do I have a web server running? Prototype with CodePen, JSBin or StackBlitz Visual Studio Code Chrome Developer Tools Firefox Developer Tools ArcGIS JS CLI Keep learning ArcGIS Developer Tutorials MDN: Learn web development CSS Tricks Beginner Guide Eloquent JavaScript You Don't Know JS JavaScript 30 NodeSchool Command Line Power User Codecademy Bash Scripting course Slides at http://bit.ly/2PLJft4.