Web Dev Seminar

Lesson plan outline

HTML

  • elements (also referred to as HTML tags)
    • example: 'div'
    • a container with certain qualities
      • attributes (also commonly referred to as properties, although in HTML properties usually have values while attributes usually don't)
        • 'id 'is a property that gives an element a unique way to be found
        • 'class' is a label that can be shared across multiple elements
      • 'children'
    • e.g. '⟨div id="container" class="content"⟩children⟨/div⟩'
    • children (child elements) can include text and other elements
    • all elements should have opening and closing tags
      • simplistic tags like '⟨br⟩' should have self closing tags i.e. '⟨br /⟩'
      • the concept of elements enclosing one another is sometimes referred to as the 'box model' with smaller 'boxes' inside larger ones
    • elements should be properly nested [i.e. inner elements close before outer elements] (not so much required as recommended; makes CSS more logical and is required when HTML is processed as JavaScript when using tools like web components)
    • Indenting is a useful convention
      • tabs vs. spaces
      • 2 vs. 4
  • in practice HTML devs often use a handful of elements, each for a certain purpose
  • Structured, iterative data is usually represented in a List element; the '⟨ul⟩' tag is for unordered lists; the '⟨ol⟩' is for ordered lists and by default uses numbers instead of bullet points in front of items; within the ul tag the key element is li so for a very simple example: '⟨ul⟩⟨li⟩peanuts⟨/li⟩⟨li⟩almonds⟨/li⟩⟨/ul ⟩'
  • Tabular data is usually displayed with the 'table' element, which expects its own 'thead' and 'tbody' child elements each of which will contain different 'tr' row elements which themselves usually contain 'th' column elements
  • Many other kinds of text are handled using a series of paragraph elements, which take the simple form '⟨p⟩'; an alternative is the '⟨span⟩' tag which does not by default start a new line
  • The anchor ('a') tag is the key to the entire web--it enables hyperlinks: for example a link to this web page in HTML would look like this: '⟨a href="https://pacificio.com/webinar" id="pacificIO_link"⟩pacificIO.com/webinar⟨/a⟩'
  • The div tag is the most common layout element; it is the successor to the layer tag and that one was actually more descriptive. It's like a layer of the page. Many other elements are very similar to div with slight differences, and they are mostly part of the newer 'HTML5 semantic tags' e.g. header, footer, section, article, and aside
  • User input is typically handled with the form element; the child element of form that accepts single lines of text is the input element
    • traditional forms send the data contained in the form (user input) as a POST request to a page specified with the action property
    • an example of an attribute is the 'required' that can be added to a form element e.g. '⟨form action="/api/process-form"⟩⟨input id="color" name="color" required /⟩⟨/form⟩'
    • many modern front-end JavaScript driven sites grab the data from the form using the DOM and send it right to the API while not leaving the page
  • At a high level the top element is the html element and below that should be a head and body element; the head contains specialized tags including title (the title that appears at the top of the browser window) and the body contains most everything else including all the layout tags we have looked at so far
  • HTML documents should also include a document type definition (DTD) at the top and a declaration of encoding type--these are the kind of defaults that are set already in many projects including web-component-boilerplate; here is a typical HTML5 DTD: '⟨!DOCTYPE html⟩'

CSS

  • all HTML elements have built-in properties
  • CSS allows these properties to be changed
  • CSS is global by default in that effects the entire web page (that's why we will use specific selectors)
  • Browsers don't always have the same exact defaults (for example, it is easy to imagine a default of black text on white background, but what should the padding-left property be for a body element by default? It is not zero.) 'CSS resets' and 'normalize' CSS tries to iron out the differences by setting things like padding-left to 0px
  • CSS exists under the HTML element in its own tag '⟨style⟩'
  • Design styling can be applied to any layout element. For example, the CSS to make a whole document have black background color with white text is 'body ﹛background: black; color: white﹜'
  • In the example above 'body' is acting as a selector: that's just a CSS term for the way we represent which elements that we want to have those particular style properties. In this example, our selector is any 'div' element with id 'container' and it makes any text inside use the Helvetica font: 'div#container ﹛ font-family: Helvetica; ﹜
  • The most common ways to build selectors
    • classes: 'div.content'
    • ids: 'div#container'
    • the cascade: 'div#parentElement div'
  • CSS has a form of variables often referred to as 'custom properties'; they are defined like this: ' --monoFonts: "Anonymous Pro", "Hack", "Fira Sans", "Inconsolata", monospace;' and they are used like this: 'font-family: var(--monoFonts, sans-serif);' and they are scoped to the element they are declared in
  • Layout is largely controlled by the display property and how elements are arranged. The common values for display are:
    • block - the default for elements like div; each new contained child element starts on a new line after the end of the previous one
      • inline - roughly the opposite of 'block': puts all child elements in a left-right row
      • inline-block - a hybird which acts as inline until any block that would overflow the viewport or container, which will then go on a new line
    • flex - by default, each element in a container sits side by side, left to right; flex elements can have a series of additional properties to specify gap size or modify the default behavior
    • grid - a layout pattern with numerous additional properties that allows a 2 dimensional layout style
    • table - a way to lay out data like a table without necessarily using the 'table' element
  • float is a separate property conceptually borrowed from print which is often used to push images into a direction in space, e.g. 'img#balloons ﹛float: left﹜'
  • Each element has a 'display' property; this means that if a container element has the property 'display: block' it will cause each element to display one on top of each other; however each (or just one) of these elements themselves can be flex and can have left-right layout
  • Scalar units - many properties call for a quantity usually having to do with length of width of a container or size of a font e.g. 'div ﹛width: 200px﹜
    • px: the king is gone but he's not forgotten
    • pt: like px; a holdover conceptually from the print era, a small unit, sliiightly smaller than px
    • rem: a relative value for fonts, e.g. 2rem is twice the default font size
    • em: like rem but harder to reason about because it is supposed to be based on a user set base unit
    • %: what percent (of the parent container); less relavant for most ways of reasoning about width and height than the 'vw' and 'vh' units
    • vw: a custom unit based on 100 being 100% of the viewport width e.g. 50vw is half the screen
    • vh: like vw but for view height
    • in: inches. That's right. For the Americans (and English too quite often)--you can enjoy this traditional measurement in your web design!
  • styling
    • elements like 'p', 'a', and 'span' and others can have text styles attached to them, for example the 'text-decoration' property controls whether there is an underline, the 'font-weight' property sets whether the text is bold or not, and 'font-style' can be used to set a font to italic
    • layout elemets like 'div' can have properties like opacity (a decimal value) and border-radius (how rounded the corners should be)
  • position property
    • a quite old CSS layout technique that is rarely used now is setting the 'postion' property to 'absolute' and then positioning the element with offsets like 'left' and 'top'
    • if the postion is set to absolute (or fixed, relative, or sticky) it can use the 'z-index' property: the higher, the more on top
  • hiding
    • 'display: none' takes the selected element out of the page
    • 'visbility: hidden' will just make the element invisible but it will still be taking up empty space on screen
  • color
    • foreground elements like fonts are styled with with the 'color' property and background elements are styled with 'background' or the older more verbose 'background-color' (backgrounds can also be images)
    • color can be represented in hex format (e.g. #FFFFFF) and other ways
  • images
    • images can be embedded with the 'img' tag, the 'src' property specifies what code the image is made up of (usually via an outside file)
    • Image type: jpegs, pngs and increasingly webp images can be used; svg is a special type of code-based image type that can be used directly as an element or loaded via an image tag; layout elements can also be transformed into different shapes using certain CSS properties
    • Images can be styled with 'width: 100%; height: auto' so they don't overflow their container
  • videos
    • video can be embedded in pages now with the 'video' tag
  • responsive design
    • the CSS that runs for large screens can be different than the CSS run for smaller screens
    • The most common responsive pattern is the 'media query'; all CSS contained inside that query's brackets only runs when it meets the criteria of the query (usually chucking screen width)
    • generally put your 'display: grid' code in a large screens only media query so the layout defaults to block on mobile
    • Another critical part of making the site responsive is the 'width=1' meta tag
  • frameworks
    • CSS code frameworks will pre-define the styles for layout elements or offer 'utilty classes' like 'italic' or offer tools like grid systems; examples inlcude Bootstrap, Foundation and Tailwind
    • CSS methodologies offer a standard for naming classes that can be shared with a team; examples inlcude BEM (block element modifier) and OOCSS

JavaScript

  • a programming language created in the 1990s
  • Named after Java, part of the C family of languages
  • allows interactive features on web pages including
    • loading data from an API (making a web request from a web page)
    • updating the web page using the DOM (the Document Object Model: the HTML and CSS of a web site, represented programmatically in the browser)
    • listening for events (user input, mouse moves etc.)
    • creating special browser-level UI like alerts
  • JavaScript is a 'front-end' language: it runs in the browser
    • as distinct from the server
    • the end user's browser receives the JavaScript (typically) as text which it runs through its own interpreter (compiler)
  • JavaScript is enclosed in a script tag somewhere inside the html element (historically often in the head but this is becoming less common)
  • timing is everything
    • JavaScript on web page will run right away, often before the DOM is loaded, and thus often not have its intended effect, so it should be enclosed in a "DOM loaded" event
    • Another newer alternative is to run the JavaScript as a module (using the type="module" property on the script tag or using an 'import' statement) which ensures that it will time itself properly
    • the order in which tasks are carried out in JavaScript is also important; for example many sites use multiple APIs so they will get user info from a local authentication API and as soon as they have the key needed will make a second API call to an outside payments API, then update the DOM to indicate success (or failure); there are several techniques for accomplishing this
      • the callback pattern: put simply, one of the arguments to a function is another function (possible in JavaScript) which then runs as the last expression of the first function--and so on, sometimes several levels deep
      • then there is 'then': some objects have a 'then' method (a function inside an object or function) which can be used at the end of a closure; this is a very specific pattern but it is only worth noting right now because we will see it in the Fetch object
      • a newer way to handle the timing of tasks is the Promise object, which has many nuances but can actually be used in a very straightforward way
      • another newer pattern is using the 'async'/'await' keywords which may look familiar to C# coders although the behavior and API is somewhat different
  • limited mathematical performance (but there is often a better way to do things)
    • use Math object methods rather than simple operators
    • keep in mind that the code is running on the end user's machine; even phones can do quite a lot but the average internet user is using a mobile phone these days so test performance on mobile
  • no main() method
    • JavaScript is a flexible language that can accommodate procedural, object-oriented and functional programming styles; thus no rules about specific methods running first like in Java or Rust
  • variables
    • as in other languages, variables can store values or collections of values
    • for declarations use 'let' for variables and 'const' for 'constants' but do not rely on your intuition as to what JavaScript considers a constant; these variables have 'block' scope: this means that they are local to the function or method in which they are declared
    • an older method for declaring variables is using the 'var' keyword; this leads to the variable having 'lexical' scope
    • for string comparison and in general, use '===' (strict equality) and not '=='
  • data structures
    • arrays
      • a series of values available via index e.g. 'let exampleArray = ［"Seaver","Gooden","Harvey","DeGrom"］; alert(exampleArray［1］);' would create an alert that said "Gooden" since arrays start counting at 0
      • arrays can contain arrays or objects or any primitive value contained in a variable
    • objects
      • Objects are just bags for variables and functions; in this context the variables are sometimes called properties and the functions are called methods
      • create an object literally with Object.assign
      • instantiate a new object based on a class that you have defined or imported
      • the class keyword is used to create classes
      • JavaScript's object system under the hood is still prototype-based
    • Maps and Sets are newer tools for structuring data
    • JSON is "JavaScript object notation" and is a popular way of representing data; usually it is structured as an array of objects
    • the class keyword can be used to create custom data structures
  • types
    • JavaScript has a 'dynamic' type system
    • No explicit declaration of the type is needed in variable declarations, for example 'let x = 1' is perfectly valid: and consider that the unquoted number leads to x to be typed as a number
    • The most common 'primitive' types in JavaScript are string (a series of characters, e.g. 'const userName = "Mango"') and the number types integer and float
    • 'type coercion' can be used to change or confirm the type of a variable's value; most primitive types will have a 'toString()' method; so to change the type of the above 'x' variable we might do something like this: 'let y = x.toString()'; numbers wrongly typed as strings (a common problem for example when reading some kinds of database data) can be transformed with the Number object, although the above variable userName wouldn't work like that because it has to..🧐..look like a number for that to work
  • TypeScript is a pre-processor for JavaScript created by Microsoft and used by Google in (modern) Angular and in some React projects; it is like C# in many ways in syntax; it allows for explicit (or 'any') typing and creation of custom types; browsers do not understand it and it needs to be converted (pre-processed, or in a way, compiled) to JavaScript before being sent over the web
  • Errors
    • Error is a JS type; like other languages, JavaScript has all sorts of errors
      • syntax errors: issues like typos e.g. 'fnction newFunc()'
      • type errors: problems like expecting a number but getting a string
      • logic errors (when thrown in JavsScript, usually an InternalError): excess recursion or infinite loops that never stop running e.g. '(for let x=0; x>1; x--)'
      • Error type declared by user, e.g. 'if (typeof y !== 'string') { throw new Error('incorrect data type') }
    • Errors can be 'caught' using a try/catch block e.g. try { fetch("https://altaredwood.work") } catch(err) { console.error("error: " + err.toString())}
    • Uncaught errors will often stop execution of code on a page: in effect, the code part of the page "crashes" while the UI may or may not update to reflect that to the user
  • undefined and null
    • JavaScript has a special type known as 'undefined' and it indicates that no variable exists with that name in the current scope, or that an object does not have the property requested
    • 'null' is a concept borrowed from databases and usually indicates a lack of data for an existing variable and is thus a langauge primitive instead of a type
  • Booleans
    • type that can be set to true or false (not in quotes or the JS interpreter will think it is a string that says 'true' or 'false')
    • boolean comparison operators like '<', '===', and '>' can be used on practically any JavaScript type but when used on non-boolean values they can have unpredictable results due to type coercion
  • conditionals
    • the 'if; else if; else' logic is widely used
    • case-select statements are also available
  • loops
    • fairly standard 'for' loop implementation
    • simple 'while' loops also available
    • the 'applicative' or 'iterative' loop pattern is also available for 'iterable' collections; methods available include 'map', 'filter', 'some', and 'reduce'
  • functions
    • functions are untyped and can return any type of data structure or collection, another function (higher-order functions pattern), or nothing
    • declaration looks like 'function newFunc(args)﹛//expressions﹜'
    • Names are reserved: the number of arguments doesn't matter so there is no C++ style overloading allowed
  • modules
    • JavaScript has a new modern module system that has been recently introduced into browsers
    • Functions and classes should have the 'export' keyword in front of them
    • The functions and classes can be pulled in from other pages using the 'import' keyword
  • console
    • Most browsers have built-in developer tools that allow an examination of the site's code and DOM
    • JavaScript running in the browser can output logs in the console; writing these logs can be done with 'console' methods e.g. console.log("find me with CMD-Option-i"); the main purpose of this is for development
  • Fetch API
    • the modern way to look up data on the web from a web page; effectively the successor to the still-available XMLHttpRequest
    • make GET requests for getting data
    • make POST requests for creating, updating and destroying data
    • PUT and PATCH are also for updating and DELETE is for deleting but most APIs still use just GET and POST
    • each 'fetch' request has 2 parameters (arguments): the url being requested, and the options (or init) object e.g. 'fetch(url, options)'
      • url is a string of a full url (aka uri) including protocol (e.g. https://example.com/api/user-profile/7)
      • options object may include headers, body, and auth data, along with the protocol (GET is the default)
      • returned data can be encoded and becomes available to the app
  • Interacting with the DOM (Document Object Model, i.e. the web page)
    • The DOM is an API that JavaScript interacts with, usually through the window.document object
    • The DOM is the internal representation of the web page, so for example window.document.body represents the body tag; let's look at an application of this concept: 'let myHeader = window.document.getElementById("container"); myHeader.style.color = "blue";' This will make the font in the #container element blue.
    • The HTML and CSS of a site can be declared using JavaScript; the above example updates CSS style, while this example creates an new HTML 'aside' element with text content "new element": 'var child = document.createElement("aside"); let parent = document.getElementById("container"); parent.appendChild(child); child.textContent = "new element";'
  • Style
    • some 'rules' are conventions
      • semicolons at the end of lines are a good convention (not 'required')
      • plugins known as "linters" (ES Lint) and "formatters" (Prettier) will enforce certain conventions; linters will warn about unused variables etc. while formatters enforce tab size and style and lay out classes and functions in standard, predictable ways
  • Babel is another pre-preprocessor (transpiler) that works as a toolkit for converting ES-next (future JavaScript) to ECMA-Script (standard JavaScript) and converting JSX-based components to HTML elements and JavaScript functions
  • Scaffolding tools and boilerplates
    • the tooling needed to create a React application means that templates have been created for fast development ("convention over configuration")
    • create-react-app is probably the most popular: it offers a command line interface for creating a single page web app
    • GatsbyJS is one of the most popular React-powered static site generators which allows multi-page sites; good for JAMstack sites
    • NextJS is a framework for React built on NodeJS which allows server integrations; works well for sites built with a noSQL database
  • NodeJS
    • NodeJS is JavaScript, but it's different
      • runs on the server, not the browser
      • Offers server tools which are often used to create an API and connect to and update the database
    • Sites with JavaScript-heavy front ends don't really have any reason to use a Node API any more than one powered by Python or PHP or Ruby or Java: but the MERN (Mongo Express React Node) stack is one popular option for companies with a lot of JavaScript devs since they can work on the front end and back end
  • Frameworks
    • NodeJS frameworks like ExpressJS and Koa are designed to provide some good defaults for setting up a server with routing fairly quickly
    • Front end frameworks have become a big deal on the web over the years: they are supposed to allow organization of the site and its data
      • jQuery: the previous decade frameworks, led by jQuery, provided a standardized way to interact with the DOM (now largely a non-issue) and provided tools like an early version of Fetch
      • AngularJS: in the mid 2010s several projects including Backbone, Ember and AngularJS started providing front-end application frameworks based on the MVC pattern
      • ReactJS: now aware of both the performance bottleneck in the DOM and the over-complicated nature of the MVC model for a front-end templating tool, React introduced a modified form of HTML known as JSX and encased that markup in the render method of a JavaScript class with built-in event methods so the user could wait for specific events before running certain code
  • SPA vs. PWA
    • the first wave of front-end JavaScript driven applications were often referred to as SPAs or single page apps
    • lately Google has worked to standardize web apps with their progressive web app concept, conformity with which is best measured by Chrome's Lighthouse test
  • NPM
    • a package manager that is used for Node projects and for front-end JavaScript projects
    • package.json files in the root of a project can be used to specify project meta-data and version info along with what packages are to be available in the project

Links

Quarter App

An Accounting Tool for Windows and Mac

Quarter is an Accounting App for Freelancers that you can download and try on your desktop

Quarter web site