Learn Docker, Mac and Ngrx-store

While "It works on my computer" might give you an excuse to close a bug ticket in the backlog, it doesn't really work when you're working on a team.

You need to ensure that your application can run regardless of what hardware your teammates are running or libraries they have installed.

Docker solves this problem by collecting everything your application needs to run into a container.

Containers aren't just for source code. They can hold configuration, scripts, and even their own filesystem. It's similar to a Virtual Machine, without having to bring a full operating system along for the ride.

Because containers run in isolation, there is some configuration involved to allow for files to be saved and containers to communicate with one another.

One of the most useful ways to get your head around Docker is to see it in action.

Follow along with Joel Lord as he works through the process of preparing an application to run in separate containers for the frontend and backend of an application that searches for gifs and re-encodes them with a caption supplied by the user.

You'll see how to configure the separate containers to communicate with one another, work with environment variables, and persist data to your local machine. Along the way, you'll pick up some tips on useful commands and bash scripting. Finally, you'll learn how to use Docker Compose to make it easy to run multiple containers simultaneously.


Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

docker

Containerize Full-Stack JavaScript Applications with Docker

Bash makes automation easy. Just a few lines of code can take care of repetitive tasks for you and your teammates. 

In this course, we’ll dive deep into the automation potential of bash. You’ll learn to leverage common hooks that open up interesting automation possibilities, like git hooks, adding functions and aliases in your bash_profile, and running scheduled jobs in launchd.

For example, we’ll write a git hook that checks package.json for changes, and if there are changes, the hook runs npm install for you automatically. 

Along the way, you’ll also learn:

- more advanced bash commands like exec
- syntax such as redirecting stdout and stderr to the same destination
- timesaving tricks like brace expansions

Automation is all about saving you time — and at only 52 minutes, this course is well worth yours. Enjoy!

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Advanced Bash Automation for Web Developers

As your Angular application grows, it becomes more difficult to manage application state.

NgRx can help with that!

In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Reactive State Management in Angular with ngrx

In this course we will take a simple Node.js app that connects to a MongoDB database and uses an Express web server, and learn how to setup a full software development deployment process as well as how to properly “Dockerize” the app. 

We’ll step through setting up proper version control techniques, managing configuring within the environment, setting up proper build/deploy/run processes, and all with abiding by Docker best practices. We’ll also make sure our deployment is setup for scale, and have consistent development practices in place for reliable app deployments.

Build a Twelve-Factor Node.js App with Docker

Zeit’s mission statement is to ‘Make Cloud computing as easy and accessible as Mobile computing.’ To that end, they’ve released some pretty amazing and powerful tools. In this course we’re going to take a look at `now`, their deployment tool, to see why it’s hands-down the simplest way to launch node applications, docker containers and even static files to the cloud.


We’ll also dig into some of now’s more advanced capabilities, including host aliasing, environment variables and integration with hosted databases.

Deploy Web Apps with Zeit Now

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.**

Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed! 
- [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) 
- [Introduction to Reactive Programming with RxJS](
https://egghead.io/series/introduction-to-reactive-programming). 
- [Step by Step Async Programming with RxJS](https://egghead.io/series/step-by-step-async-javascript-with-rxjs) 
- [Getting Started With Redux](https://egghead.io/series/getting-started-with-redux), a course by Redux's, Dan Abramov.

We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge. 
- [Dependency Injection](https://egghead.io/courses/angular-2-dependency-injection-di-explained
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/intro-to-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router)
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)



Build Redux Style Applications with Angular, RxJS, and ngrx/store

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: [joeprevite.com](https://joeprevite.com/)

Joe's Blog Posts as Screencasts

`launchd` is a robust scheduled job automation tool on macOS that allows you to schedule a task to be run at recurring times. It's macOS's take on Linux's `cron`. In this lesson, we’ll schedule a simple bash script that empties the Trash to run every Monday morning at 10am. 

First, we’ll create a plist file (a plist file is just XML) with our job configuration. In here, we’ll specify our bash script as the program to run. Then we move plist file to the `~/Library/LaunchAgents` folder. Then we’ll use launchctl to load our configuration file, which will make the job active. We'll manually activate our job to ensure it's working with `launchctl kickstart`. 

Schedule Timed Jobs on macOS with `launchd`

AppleScript is a peculiar language with a COBOL-like desire to read like English, but it's the key to automating UIs on the Mac. We'll use it together with bash to make Terminal open a new window to run any shell command.

Run a Command-line App in a New Terminal Window using Bash and AppleScript

In [the previous lesson](https://egghead.io/lessons/bash-run-a-command-line-app-in-a-new-terminal-window-using-bash-and-applescript "Run a command-line app in a new terminal window") we created a bash script that runs a given command line in a new Terminal window. Now we'll see how to use Automator to make an instance of that available as a menu item in Finder.

Turn a command-line app into a menu item in Finder

In [the previous lesson](https://egghead.io/lessons/mac-turn-a-command-line-app-into-a-menu-item-in-finder) we saved a shell script as a service for Finder. This service takes in files as arguments and opens them in Vi. Now we'll save it as a real Mac App.

Turn a command-line app into a Mac App

Smooth your workflow by opening Finder from Terminal and vice versa at a specific folder.

Jump from Terminal to Finder and back again

I can make a subfolder of the folder that is open in Finder,
but there's no convenient way to make a subfolder of amy other folder that
is showing. Let's add a Finder service to take care of that.

Create a new subfolder of any selected folder in Finder with AppleScript

Create a Finder service that takes whatever you've selected, lets you navigate to a destination folder, and moves them there.

Create a service to move items in Finder to a user-selected folder with AppleScript

screen-reader

Learn how to access the VoiceOver training and utility preferences on MacOs and how to make customizations to the screen reader.

Access and Customize VoiceOver Settings on MacOS

Learn the basics of navigating through a web page using VoiceOver on MacOS in Safari.

Navigate a Webpage with VoiceOver in Safari

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

It's very important to experience our web applications using the tools and techniques that our users are using.  Many of our users out there may have vision impairments and may use tools or adjust settings to help them see better. Learn how to change the accessibility display preferences on Mac to test your application for issues that may arise due to a lack of contrast between foreground and background colors in your web application which can be exacerbated when users have to adjust these display preferences.

## Resources
* [MacOS Display Preferences User Guide] (https://support.apple.com/guide/mac-help/change-accessibility-display-preferences-unac089/mac)

Change Display Preferences on Mac to Find Color Contrast Accessibility Issues

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

Kubernetes is an API to a computer. Multiple computers actually. Here we'll talk about what K8s is, how you can choose between the plethora of K8s related hosting options, and what the process looks like for getting some containers running.

WTF is Kubernetes (K8s)

In this video, we'll learn how to modify the default screenshot keyboard shortcut on macOS so that it copies our screenshot to our clipboard. This comes in handy if you share screenshots often.

Topics

Instructors

Content Type