Learn Firebase, 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

🔥 Firebase provides several easy-to-use authentication methods that we can use to handle auth in React apps. 

In this lesson, we will cover how to authenticate a user via an email and password. This is done using `createUserWithEmailAndPassword` function available to us from the `firebase` library. 

You'll need firebase configured in your application which you can [read about here.](https://dev.to/farazamiruddin/react-firebase-add-firebase-to-a-react-app-4nc9)

Authenticate a User in React with Firebase

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

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

The Firebase Forge provides a convenient GUI for visualizing and manipulating your data in real-time. Be sure to check out [this lesson](https://egghead.io/lessons/angularjs-get-started-with-firebase-and-angularfire) for getting Firebase setup.

Updating Real-Time Data with Firebase Forge

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

When using Firebase collections in your AngularJS application, you have access to a handy set of events emitted by the collection when changes in your data occur. Be sure to check out the [first lesson](https://egghead.io/lessons/angularjs-get-started-with-firebase-and-angularfire) in this series for the project source code.

Firebase Event Handling

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.

Copy and paste text from a tmux session

You can modify tmux's behavior with your tmux configuration file, .tmux.conf. You can use your tmux config to change color schemes, set custom keybindings, set defaults, modify the status bar, and more. In this lesson, we'll change some of the default color options as well as modify the prefix key.


Customize tmux with tmux.conf

By using ssh, you can share a tmux session, making pair programming much easier. We'll learn how to share a tmux session with another user. 


Share a tmux session for pair programming with ssh

We'll learn how to use mouse mode in tmux, including enable mouse control for resizing, scrolling and selecting panes. We'll also set keybindings in our tmux configuration to control mouse mode. 

Enable mouse mode in tmux

Do you have a standard workflow that involves setting up a specific tmux layout, or running certain commands? By writing tmux scripts, you can automate your tedious daily setup, while simultaneously documenting it for yourself. We'll cover the tmux command equivalents of common key bindings and write some simple, useful scripts.


Automate your workflow using tmux scripts

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

Topics

Instructors

Content Type