Lect #1

General Resources Links

Standards

All Standards and Drafts - W3.org
HTML ver 5.2 specification
Cascading Style Sheets (CSS3) specifications, CSS3 specification - MDN
JavaScript (ES6) specification

Books

How to code in HTML5 and CSS3
Eloquent JavaScript - the book, Re-intro to JavaScript - MDN
Asp.Net Core Book - gitbooks

Tutorials

Tutorials - MDN, TutorialRepublic References, tutorialspoint library

References

MSDN, W3schools.com, MDN, htmldog.com
Microsoft Documentation
.Net Core Guide, Introduction to Asp.Net Core - MSDN, Asp.Net Core Documentation - MSDN

Design

Design for Developers

dribble.com/dhg, behance.net/gallery
jonsuh.com, Juice-Interactive

Programming Environments

Visual Studio

Visual Studio is an Integrated Development Environment (IDE) supporting projects and tool-chains for developing projects on Windows with the programming languages: C++, C#, JavaScript, and a variety of other .Net languages.

Project types

Console applications
Static website development with HTML, CSS, JavaScript, and TypeScript - starts with blank solution.
Asp.Net Core web sites and web services
node.js applications
Python applications.

Download Visual Studio Community Edition I will be presenting code in class most often with Visual Studio.
Visual Studio Help pdf

Getting Started

.Net Core and Core SDK Tutorials
Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools
Visual Studio, Visual Studio Documentation
Getting Started Videos

Visual Studio Code

Visual Studio Code is not Visual Studio. It is an IDE based on the Electron JavaScript library, and runs on every platfrom supporting node.js, a message dispatching framework hosting a modern JavaScript environment. That includes Windows, Linux, and the Mac OS's .

Project Types

JavaScript and TypeScript
node.js
C++ with pluggins
C# and .Net with pluggins
Java, Python, and Go with pluggins

Download Visual Studio Code

.Net Core and Core SDK Tutorials
Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools

Getting Started

Visual Studio Code, Getting Started with VS Code, Create a snippet in VS Code

Working with C# and .Net Core in VS Code

dotnet command
Net Core Tutorials, Using .Net Core in Visual Studio Code, Working with C#

Configuring VS Code

Integrated Terminal, VS Code variables reference, User and Workspace Settings, Custom Tasks

Working with C++ in VS Code

Building C++ with Visual Studio Code, C++ for Visual Studio Code, Make for Windows

VS Code Videos

Visual Studio for Mac

Visual Studio for Mac has support for Asp.Net Core MVC and Web API.

Download Visual Studio for Mac

.Net Core and Core SDK Tutorials
Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools

.Net Framework and .Net Core

The .Net Framework is a set of libraries that support C# and other managed code development on the Windows platform.

.Net Core is a slimmed-down port of the .Net Framework, with some new features, for Windows, Linux, and Macs. We will be using the Core Framework exclusively in this course.

.Net Framework Guide
Choosing between .Net Core and .Net Framework
What's new in .Net Core
.Net Core and Core SDK Tutorials
Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools
.Net Core packages

dotnet CLI

dotnet CLI is a command line interface for the .Net Core framework. It allows us to build, from the command line, C# console applications and Asp.Net Core Web applications.

Once you've installed the .Net Core SDK you can explore dotnet CLI capabilities with the command: dotnet /h.

Tutorial on .Net CLI - tutorialsteacher.com, Quick Tour of the .Net CLI - build scripts, Exploring dotnet CLI - Scott Hanselman

.Net Core and Core SDK Tutorials
Tutorials for Visual Studio 2017, Visual Studio Code, Visual Studio for Mac, and .Net Core CLI tools What's new in .Net Core, .Net Core packages .Net Core CLI Tools, .Net Core SDK and tools, .Net CLI and AWS Lambda

VirtualBox

VirtualBox is a virtual machine host that can be installed on any platform that supports Java, including Windows, Linux, and MacOS's. Mac users may wish to set up VirtualBox and install a Windows guest along with Visual Studio.

Download VirtualBox, Installing VirtualBox

PowerShell

PowerShell is a command line facility with a powerful scripting language. But it's hard to learn well. I may use powershell for some demos in class.

Hints: try opening PowerShell and typing: get-help, get-help commands, get-help objects,
get-help About_methods, get-help About_properties, get-help About

Tutorial - tutorialspoint.com, PowerShell Execution Policy,
functions, passing arguments to cmdlets
Create and Edit Profile, psEdit, PowerShell Profile, PowerShell Profiles
Set-PSReadLineOption, Change console colors, Change prompt,

HTML5

Definition

HTML ver 5.2 specification

HyperText Markup Language (HTML) is a language for structuring content on a web page. It is based on Elements that have opening and closing tags and bodies with content.

  <htmltag>              <!-- any of the standard html tags, e.g., div -->
    <custom-childtag>    <!-- a user defined tag with some semantic meaning -->
      "literal text"
    </custom-childtag>
  </htmltag>

The HTML5 standard requires that all custom tags are hypenated, as shown above, to avoid clashes with future standard tags.
A body, everything between opening and closing tags, may consist of text or markup or both.

Tutorials

Tutorial - w3schools.com, Tutorial - tutorialspoint.com, Introduction - MDN, HTML5 Tutorial

References

HTML5 Reference - w3schools.com, HTML Reference - MDN, htmlreference.io
HTML tag reference, HTML global attributes, HTML event attributes
HTML5 Tags - tutorialspoint.com

Understanding

html5test.com, html5-demos run with Chrome, HTML5 Canvas demos
Semantic Markup Pragmatic value of semantic markup

Building Things

FileSystem APIs - html5rocks.com, FileSystem - MDN, Intro to File and Directory Entries API - MDN, File API - w3.org

CSS

Definition

Cascading Style Sheets (CSS3) specifications, CSS3 specification - MDN

Cascading Style Sheets (CSS) provide a declarative language for specifying styles to apply to HTML elements. Each style is a list of key-value pairs. Styles are applied based on selectors that identify particular HTML elements or classes of elements. Style Sheets are collections of styles of the form:

    selectors { style-property : value; ... }

    example: body { padding:5%; background-color: #ddd; }

  where selectors are combinations of:

    htmltags:         body, div, span, img, ...
    custom-tags:      nav-keys, spacer-10, ... 
    .classnames:      .indent, .undent, .photo, ...
    #idnames:         #placeHolder, #mastheadPhoto, ...
    psuedo-classes:   a:link, a:hover, ...
    psuedo-elements:  p::first-letter, p::first-line, ...  
    attributes:       [attr], [attr=value], ...

  Selectors can be combined:

    s1, s2, ...      applied to s1 and s2 and ...
    s1 s2            applied to s2 if it has s1 ancestor
    s1 > s2          applied to s2 if it has s1 parent
    s1 + s2          applied to s2 if it has adjacent sibling s1
    s1 ~ s2          applied to s2 if it has sibling s1

  Examples:
    ol, ul { margin-top:10px; margin-bottom: 10px; }  // all ordered and unordered lists
    div li { background-color: #dddddd; }             // all list items with div ancestor
    div.indent > p { color: #333333; }                // all paragraphs that are children
                                                      //   of div with class indent

  Note: If any part of a style specification is invalid, the whole specification is invalid
        and will not be applied to it's selectors.  So styles can silently fail.

Tutorials

Tutorial - w3schools.com, Intro to CSS - MDN, Tutorial - tutorialspoint.com, CSS Tutorial - w3.org

References

CSS Reference - w3schools.com, CSS Reference - MDN, cssreference.io, CSS - tympanus.net

Understanding

units of measure - W3C
stylinwithcss.com
Box Shadow, Introduction to CSS Shapes
Learn CSS Grid, CSS-Tricks Snippets
Guide to Flexbox
Learn CSS Grid, CSS Grid by Example, Complete Guide to Grid, Things I learded reading the CSS Grid Spec , The CSS Fractional Unit (fr)

Building Things

CSS dropdown menus, Hoverable Dropdown, Dropdown menu - w3schools.com
Simple manual slide show - w3schools.com, Auto play slide show

Miscellaneous

CSS user-select, Css display property, HTML DOM parentElement property

Libraries

Bootstrap, Foundation, Normalize, purecss.io, Bulma

JavaScript

Definition

JavaScript (ES6) specification

A programming language based on objects composed of key-value pairs. Keys are names, and values may be a function (pointer), a literal, or another object.

It uses a prototype model to support specialization. If a function call can't be resolved on an object, function lookup walks up the object's prototype chain.

                        Jim = {

                          "Name":"Fawcett",

                          "Job":"Instructor,

                          ...
}

When a JavaScript function is called its context (a JavaScript object) is loaded into an Execution Stack. When an event fires the context of its event handler function is enqueued in an Event Message Queue. Handlers don't execute until all functions have completed. Then, its context is loaded into the Execution Stack for processing.

Books and Blogs

Eloquent JavaScript - the book
Re-intro to JavaScript - MDN

Tutorials

Tutorial - javascript.info, Tutorial - GeeksforGeeks.org, Tutorials - dyn-web/com

References

Reference - MDN, Reference - javascript-reference.info, Reference - w3shools.com, quirksmode.org

Understanding

ES6 Syntax and Features - taniarascia.com
Understanding Classes, Understanding Events, How to use Object Methods
Details of the Object Model - MDN
Beginners guide to variables and datatypes
Understanding the DOM - taniarascia.com
ES6 Overview in 350 Bullet Points
You don't know JavaScript
Fetch API - replaces XMLHttpRequest,
JavaScript Templating without a Library
Transducers - Data Processing Pipelines

Building Useful Things

Building a Collection Object

Technical Details

JavaScript jit, Just in time compilers, Mozilla's JavaScript engine,
Execution Context, Understanding Execution, Order of execution,
Details of the object model
Memory model, Call Stack

Miscellaneous

createElement, addEventListener

JSON

Definition

JavaScript Object Notation - data structure composed of a collection of key-value pairs, where a value can be another collection of key-value pairs.

Tutorials

JSON - Wikipedia, JSON Introduction - w3schools.com

References

json.org, JSON - MDN

AJAX

Definition

Asynchronous JavaScript and XML (AJAX), used in browser-based JavaScript to get (and put) data from a website without loading a new page. Data may be strings, JSON, or XML.

Tutorials

AJAX - w3schools.com AJAX - Wikipedia
Fetch API - replaces XMLHttpRequest
JavaScript Templating without a Library

JavaScript Frameworks

jQuery

jQuery.js, jQuery API, jQuery Tutorial - w3schools.com

node.js

node.js, about node.js, node.js tutorial - w3schools.com
Creating first app with Node.js, Read file in node.js, First API with Node.js and Express, REST API with Node.js and PostgreSQL
Create a Node.js and React app in Visual Studio

React.js

React.js, Getting Started with React, React tutorial - reactjs.org, Components and Props - reactjs.org
Four ways to style React components
CRUD app in react with hooks, Create a Node.js and React app in Visual Studio

React Native

Animated Toggle in Native React

JSX and TypeScript

Getting started with JSX, What is JSX, babeljs.io, babel plugin to transform JSX, webpack.js.org, TypeScript loader for Webpack, TypeScript loader, You might not need to transpile your JavaScript,

Vue

Vue.js, Vue guide

Angular

Angular.js, Angular docs - angular.io, Learn Angular the right way, Angular Tutorial - w3schools.com, Angular for Beginners Guide

Bootstrap

Bootstrap - CSS, JavaScript, and HTML Framework, Bootstrap Documentation

Drawing with JavaScript and HTML5 canvas

Drawing - fabricjs.com, Drawing - paperjs.org, 2D Drawing - two.js
JavaScript diagramming libs - modeling-languages.com, html5 canvas libraries - ihatetomatoes.net

Standard Web Components

Building Components
Web Components - MDN, Guide to Web Components - Modular Future
Componet-based web Application - CodeProject
Polymer Project

Web Colors

Web colors
Color picker - w3schools.com
Color picker and harmonies - htmlcolorcodes.com
clrs.cc, Color chart - websafecolors.info
How colors work on the web - digital.com

Asp.Net Core

Definition

Asp.Net is a platform for delivering web content. Asp.Net applications respond to requests by dynamically assembling web pages from control models and data, often from a database. Asp.Net was originally a Windows only platform. Asp.Net Core extends that to Linux and Mac platforms as well.

The Model-View-Controller (MVC) architecture has three major part types:

Views display information to the user and transmit user actions back to a controller. Controller instances are created for each request. They coordinate responses to the request by collecting data from the model and assembling it into a view for the response. Models manage data and often provide application logic to simplify controller operations.

Books

Asp.Net Core Book - gitbooks

Tutorials

Introduction to Asp.Net Core - MSDN, Razor Pages Tutorial - MSDN
Asp.Net Core - Dependency Injection - tutorialsteacher.com

References

.Net Core Guide, Asp.Net Core Documentation - MSDN
Using .Net Core in Visual Studio Code
Razor syntax reference - MSDN, Create Razor Pages application
App startup, Static files in Asp.Net Core
File Uploads in Asp.Net Core

Understanding

Asp.Net Core demystified, Asp.Net Core Demystified - Razor Pages
Asp.Net Core MVC Pipeline, View Layout
Configure Asp.Net Core services, Configure to use static files
Use Dependency Injection in Asp.Net Core, Dependency Injection Demystified, Dependency injection in Asp.Net Core
Dependency Injection Best Practices,

Building things

Build a CRUD App with Web API and Angular
Asp.Net Core Arch, Asp.Net Core Hidden Gems - Scott Hanselman
HttpContext, HttpRequest Class, HttpResponse Class
REST Client, HttpClient Class
file upload and download, File Uploads in Asp.Net Core

Authentication

Role-base Authorization in Asp.Net Core - MSDN, Getting Started with Identity and Role - MSDN
Custom user roles and authorization
Dynamic Role-Based Authorization - CodeProject Authorization with roles

Asp.Net Web API

Definition

Asp.Net Web API provides a platform for building web services, e.g., web content that is consumed by code in other applications. Like REST applications, the Asp.Net Web API actions are based on HTTP verbs, GET, PUT, POST, and DELETE. Content is managed by controllers with data provided by models (often wrappers for a database).

Tutorials

Asp.Net MVC - Web API - tutorialspoint.com, Getting Started with Asp.Net Web API
Create a web API with Asp.Net Core MVC Tutorial - MSDN,

Reference

Asp.Net Web API - asp.net, .Net API Browser - MSDN

Building things

Build a CRUD App with Web API and Angular

Web API Clients

Definition

Asp.Net Web API Clients are applications that consume Asp.Net API services. They may be console applications, Windows Presentation Application (WPF) programs, or other Web Applications.

Survey

Asp.Net Core Clients

Console Apps

Web API Console client, Asp.Net Web API Console Client, Console Applications

WPF

WPF Client for Asp.Net Web API, Consuming Asp.Net Web API in WPF
WPF Client for Asp.Net Web API, wpftutorial.net, WPF Tutorial - tutorialspoint.com

Using Angular and React

CRUD with React and Asp.Net Core, CRUD with React.js and Entity Framework Core
Angular Client for Asp.Net Web API, Build CRUD App for Asp.Net Web API with Angular.js

Android

React Native
Xamarin.Android Applications

Relational Databases

Definition

Relational databases store data in tables with relationships between tables definded by primary and foreign keys. Most relational databases support Structured Query Language (SQL) used to create, manage, and delete tables and extract information using queries that may join information from multiple tables.

Tutorials

SQL - w3schools.com, SQL - tutorialspoint.com
MS SQL Server Tutorial - tutorialspoint.com, SQL Server Tutorial - techonthenet.com
Working with SQL Server LocalDB, Connection String
Tutorials for SQL Server Mgmt Studio

Reference

SQL Server Functions - w3schools.com, SQL Server Documentation - MSDN
SQL Server Tools for VS, Visual Studio Server Mgmt Studio

MySql

MySQL for Visual Studio,

Building things

Create SQL Project with Visual Studio

NoSQL Databases

Definition

NoSQL databases do not store data in tables. Rather, they use key-value or graph-based document stores. They use queries that are less formal than SQL and don't provide data consistency guarantees, of the kind supported by SQL.

Summaries

Wikipedia, mongoDB, couchbase.com, AWS - Amazon.com, nosql-database.org

Entity Framework

Definition

Entity Framework is part of the Asp.Net platform. It provides classes to wrap Relational tables and a context to store application specific data-centric information like db connection strings.

Tutorials

Entity Framework Tutorial, Entity Framework Core
EF 6 Tutorial, Entity Core Tutorial - stackify.com

References

Entity Framework Documentation - MSDN,

Building things

EF Core - Data First - MSDN, Generate Model from db

Definition

C# is a programming language that supports managed code, with structure very similar to Java. It is supported by the .Net Framework libraries which wrap most of the Windows API as well as provide language support for strings, delegates, presentation, and communication.

Tutorials

tutorialspoint.com, C# Tutorials - MSDN

References

C# Reference - MSDN, C# Programming Guide - MSDN

Building things

10 Most Common Mistakes

Lecture #1 - Introduction to IP

Discuss Projects, Labs, Class Mechanics

Web Resources:

Content: