Learn Eslint, Tmux and Webstorm

Learn to manage your terminal sessions and work more effectively from the command line using tmux. If you use the command line at all, tmux can make your life easier.

tmux bills itself as a terminal multiplexer. It allows you to wrangle multiple terminal sessions from one window. Instead of keeping track of many terminal windows yourself, you can use tmux to create, organize, and navigate between them. Even more importantly, tmux lets you detach from and re-attach sessions, so that you can leave your terminal sessions running in the background and resume them later. This is especially useful if you're working on a remote server: you can set up a persistent session that will continue running when you close your laptop. You can even share a tmux session to facilitate pair programming.

It lets you switch easily between several programs in one terminal, detach them (they keep running in the background) and reattach them to a different terminal.

tmux

Wrangle your terminal with tmux

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Our first layer of defense when building accessible React applications is to add some auditing tools to our development workflow. This should include adding static analysis checking for common accessibility standards and best practices. We can get this with the latest eslint plugin: "eslint-plugin-jsx-a11y". If you are already linting your projects adding this plugin should fit very smoothly into your workflow.

## Resources
1. [List of all the rules supported by eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y#supported-rules)
2. [Comparison of the difference in rules between recommended and strict mode](https://github.com/evcohen/eslint-plugin-jsx-a11y#difference-between-recommended-and-strict-mode)
3. [Background on how the Accessibility API implemented by browsers interfaces with Assistive Technologies](https://github.com/evcohen/eslint-plugin-jsx-a11y#some-background-on-wai-aria-the-ax-tree-and-browsers)

Set up ESLint to Audit Accessibility Issues in React

The pluggable linting utility for JavaScript and JSX.

eslint

We have a number of options to use when testing for accessibility issues concerning alternative text for images.  The react-axe library and axe browser extension will both report when an image is missing alternative text.  The tota11y browser extension will annotate any images that are missing alternative text.  Running eslint with the eslint-plugin-jsx-a11y plugin installed will report on any `<img>` elements missing an `alt` attribute.  Finally, we can use a screen reader to actually hear what is read when an image has focus.

Test for Image Alternative Text Accessibility Issues

Images must have text alternatives that describe the information or function 
represented by them so they can be read and understood by those using screen readers.

## Alternative text for images
* All `<img>` elements should have an `alt` attribute provided
    * When not provided many screen readers will fallback to reading the file name instead
* The `alt` value should not include words like _“image”_, _“picture”_ or _“icon”_
    * Screen readers are already announcing that the element is an image
* Images that are decorative only and provide no information or function to the page should be hidden from Assistive Technologies by providing an empty `alt` attribute (`alt=””`)

## References
* https://www.w3.org/WAI/tutorials/images/
* https://www.w3.org/WAI/tutorials/images/decision-tree/
* https://www.w3.org/WAI/tutorials/images/tips/
* https://www.w3.org/WAI/tutorials/images/informative/
* https://www.w3.org/WAI/tutorials/images/functional/
* https://www.w3.org/WAI/tutorials/images/textual/

Define Images with Appropriate Text Alternatives

Our accessibility auditing toolkit makes it very easy for us to test for any form controls that are missing labels or are not correctly associated with their labels.  Running Eslint with the eslint-plugin-jsx-a11y installed will show us any form controls with missing or unassociated labels.  Running react-axe or using axe to audit a web page will similarly list any of these findings.  Finally using tota11y we can annotate any form controls on a page that are missing labels.  This is definitely some of the lower hanging fruit that we can easily find and fix when making our applications accessible!

Test for Form Control Label Accessibility Issues

Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers.  Elements of a `<form>` such as `<input>` or `<textarea>` or `<select>` should be labelled by using a `<label>` element.  Placeholder text can be used in addition to a label but should not be used in place of a label as not all assistive technologies respect placeholder text.

Ensure Form Controls have Accessible Labels

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this lesson you will learn how to use the eslint yeoman generator to scaffold a new plugin to provide custom rules for your project. 
You will also be able to check the basic skeleton for an eslint ruleand a working example rule to apply a naming convention for async functions.

Scaffold an eslint Plugin with Yeoman

Nx already comes with a default TypeScript setup. Although you can opt-out of that and generate plain JS based components, especially in a large setup TypeScript can be beneficial in uncovering potential issues early. To add an extra level, Nx also comes with preconfigured eslint for all the apps and libraries. In this lesson we're going to explore the lint setup and how it can be used.

Linting a React app with Nx

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

In this lesson, we'll learn how to detach from a running tmux session and leave it running in the background. Then, we can re-attach to it later.

We'll cover:
- How to exit a session by killing all active panes
- Detaching explicitly with C-b d
- Detaching a specific session with C-b D
- Viewing all running tmux sessions using tmux ls
- Reattaching with tmux attach -t

Reuse terminal workspaces using tmux sessions

In tmux, a window is a collection of panes. Creating multiple windows is a great way to organize your workspace. In this lesson, we'll cover:

- How to create a new window within a tmux session, using `C-b c`
- Navigating between windows with `C-b n` and `C-b p`

Create collections of panes using tmux windows

In this lesson, we'll look at how to manage your history between tmux sessions, and ensure that your setup preserves your bash history between multiple windows. By adding a special PROMPT_COMMAND to your .bashrc, you can update and reload your history after every command, regardless of if you're in a different session, window, or tab.


Handle history in tmux sessions

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gist.run to share a running version of your code

WebStorm - Sharing a Gist

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the `eslint --init` CLI tool with the JSX and ES6 options, writing a React component in JSX, and adding some extra react linting rules with a plugin. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency. You can also use plugin rules which we do in this lesson with the `eslint-plugin-react` package.

Linting React JSX with ESLint (in ES6)

Sometimes you'll want to zoom in on a specific pane within a tmux window. We'll learn to use C-b z to temporarily zoom in on one pane, as well as how to resize your panes with C-b -L, -R, -U, and -D.


Zoom and resize to view a particular pane within tmux

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

WebStorm - Managing Imports

A quick tutorial covering installing Karma and running tests from the command line and Webstorm.

Introduction to Karma

Learn to organize your workspace using tmux. We'll create a new tmux session and learn how to create and navigate panes within a tmux window.

We'll cover:

- How to create new panes via vertical splits with C-b %
- How to create new panes via horizontal splits with C-b "
- Navigating between panes with C-b and arrow keys
- Closing panes with exit or Ctrl-d
- Viewing available commands with C-b ?

Organize your terminal using tmux panes

It's a lot easier to manage your tmux session when they have sensible names. We'll cover:

- How to create a new, named tmux session with tmux new -s
- Rename an existing tmux session using tmux rename-session -t
- Renaming sessions with C-b $
- Listing sessions with C-b s

Manage terminal workspaces using session naming

One non-obvious, but extremely useful, feature in tmux is copy-pasting text between panes. This also allows you to scroll back in a tmux sessoin. We'll cover how to use copy and paste in tmux using C-b [ and C-b ], for both emacs- and vim-style keybindings.

Topics

Instructors

Content Type