Learn Microsoft, Nginx and Svgo

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

svgo

Create an SVG Icon System

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using `svgo` in the command line.

For a full list of options and plugins available to use with `svgo`, [check out their documentation](https://github.com/svg/svgo).

Note: This lesson assumes you have `npm` installed.

Optimize SVGs for Better Performance using svgo

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the `svgo` and `svg-sprite-generator` npm packages to automate the process of compressing the SVGs and creating the sprite.

_Note:_ This lesson assumes you have `npm` installed.

Combine Multiple SVGs into an SVG Sprite

NGINX is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. 

nginx

Learn about the concepts of managing data within Docker volumes, including all of the commands to create and manage volumes. We'll demonstrate how to mount a Docker volume to one or many containers by creating and mounting a volume to an Nginx proxy, and then verify the output with curl. You'll also see how changes to files within volumes of one container propagate to other containers with the same volume mounted, and learn various commands to inspect Docker volumes.

Manage Data within Docker Volumes

Learn how to setup an Nginx proxy server with Docker that sits in front of a Node.js app. You can use a proxy to control the flow of frontend requests hitting your app, as well as to achieve better performance and scalability. We'll create a sample Node.js app, configure a default Nginx configuration file for proxying web requests, build both Node.js and Nginx Docker images, and learn how to link everything up and get it running with Docker specifics.

Setup an Nginx Proxy for a Node.js App with Docker

Node.js apps built with Docker cannot scale horizontally by themselves. In this lesson we will spawn out multiple Node.js processes/containers, and move the incoming request handler to an Nginx proxy to load balance and properly scale our Node.js app.

Scale Docker Horizontally with Nginx Load Balancing

Microsoft Windows is a group of several graphical operating system families, all of which are developed, marketed, and sold by Microsoft. Each family caters to a certain sector of the computing industry.

microsoft

For a production Windows server it makes sense to run NodeJS applications as a Windows service.  This way they can be automatically restarted if the server is rebooted.

It also makes it easier to use monitoring tools like datadog to detect if there are issues with the service which is critical for production systems.

Install a Node.js Application as a Windows Service

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

To replicate your production application its helpful when developing a local NodeJS Express application is running under SSL. 

There are some web technologies which do not play nicely with standard http and its likely to become more common e.g. Web Push Notifications.

This lesson will show you how to create a local SSL certificate for localhost and then convert it into a format that will work with Express.  It will also show you how to make sure that Chrome will trust it.

This lesson is for Windows as it uses a powershell command, as well as the Microsoft Management Console (MMC)
 

Create Local SSL Certificates for an Express App on Windows

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

We will setup our first command-line Dart application. We will use the Chocolatey package manager to install the SDK and write our first  program. This will form the basis for future lessons.

Get Chocolatey → https://chocolatey.org/docs/installation

Get the gist of commands → https://gist.github.com/creativebracket/128dafcbbfdc1d6946231a931f95cb1b

Setup your first Dart project on Windows

Learn the various ways to access and enable High Contrast Mode on Windows.

Enable High Contrast Mode on Windows

We should not use color alone as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.  Users may not be able to see/understand the differences in color and require additional indicators.

Along with color, use additional indicators such as:
* typography
* shapes
* grids
* spaces
* and/or allocate more weight to important elements

## References:
* http://www.particletree.com/features/interfaces-and-color-blindness/
* https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/

Use More than Color Alone to Convey Information in a Web Page

Just about every tool in our accessibility auditing toolkit can help us identify any issues with sufficient color contrast ratio on a web page.  The react-axe library and axe browser extension both report findings on all elements with insufficient contrast ratios.  The tota11y browser extension will annotate any elements with their contrast ratios and color those that are insufficient in red.  

Additionally, we need to use our experience tools to see what some of our users out there may we seeing.  We need to test with high contrast browser extensions as well as the display settings in Windows and Mac.  If our users with visual impairments are using these tools we need to see what our application looks like using them because we may find that under a certain mode some things may suddenly be harder to read or virtually invisible.

## Resources
* https://www.scottohara.me/blog/2019/02/12/high-contrast-aria-and-images.html

Test for Insufficient Color Contrast Accessibility Issues

This lesson will focus on creating the checkbox styles for both the default and checked state. We'll make sure our styles are accessible and able to use our theme system.

We'll get started by adding an inline SVG to our input which we can style. I'll give you a tour of what is happening with the SVG and show you how to display it in the checkbox by providing a width. From there we will set the default state of the SVG to a `scale(0)` and set up a transition so when the checkbox is clicked to scale the SVG to 1.

Create Custom Checkbox CSS Styles with SVG

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Ghost has two hard dependencies which need to be installed before it can run. Those are Nginx and Node.js.

We will start by installing Nginx and set Nginx up to control the traffic coming into the EC2 server. After this, we'll install NVM using the raw install script that they provide on GitHub. With NVM installed we can then install the latest version of Node.js
