Learn Bash, Tailwind and Tweenmax

Meet Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Tailwind provides us with highly compassable utility classes but leaves the design specification completely up to the user to maintain that custom look and feel to your app. 

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Introduction to Tailwind and the Utility First Workflow

Now that we covered fundamentals, we're going to design and implement common components that you will see in the wild. 

We'll start with a basic Vue.js application and some hard-coded data that will be displayed within the application.


Design and Implement Common Tailwind Components

The Navbar is a common component you will find yourself styling in almost any application. 

In this course, we'll style a Navbar for a mobile view with a logo and toggleable hamburger button that will contain nav links.

After building up the mobile view, we will refactor the navbar to be responsive by removing the hamburger menu from the navbar and replacing that with the links directly inline within the Navbar

Build a Responsive Navbar with Tailwind

A menu dropdown is a common component that you will build and style in any application.

In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework. 

After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.

Build and Style a Dropdown in Tailwind

🚀 In this collection, I will be going over some command line tools I use on a daily basis that make my life a lot easier.

[First up is fzf](https://github.com/junegunn/fzf).

> fzf is a general-purpose command-line fuzzy finder.

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

Upgrade Your Terminal and Make It a Joy to Work with

Extracting meaningful data from strings is a crucial skill when working with bash, and bash gives us powerful tools to do so: `head`, `tail`, `cut`, `sed`, and `awk`. But these tools can be hard to understand without spending time to learn them, so many developers fall into a rut of blindly copying and pasting commands. No more! With this mini-course, you'll understand the basic ins and outs of these commands in under 15 minutes. 


Manipulating strings in bash

SSH provides a secure way for your to [connect to and authenticate with GitHub's servers](https://help.github.com/en/github/authenticating-to-github/about-ssh). While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like [`ssh-keygen`](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have [separate accounts for personal and professional projects](https://ryanharris.dev/managing-ssh-keys-for-github/), which can be difficult to manage manually. Using `ssh-agent` and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's `git` URL.

Secure GitHub connections with SSH

“Setting up remote server authentication” will never be on your job description. It’s not one of those desirable responsibilities that convinces talented people to move across the country and pursue the job of their dreams.

But at that dream job, you might be asked to set up an SSH key. You’d better be ready.

In this course, we will learn the fundamentals of creating SSH keys and configuring them for connectivity to a remote server. We’ll figure out how to:

- tunnel SSH connections for easier local debugging
- set up configuration files to simplify the aspect of connecting to remote servers
- use security features like blocking incoming connections

Being prepared is key. Learn the skills now!

SSH for Remote Server Authentication

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!

Advanced Bash Automation for Web Developers



Humans were never meant to repeat joyless tasks in a precise manner, over and over and over. Computers are meant precisely for these types of tasks.

Bash is a ubiquitous technology in web development that gives you the immense power of automating repetitive tasks you find yourself performing throughout the day.

The topics we cover will give you confidence in creating build scripts that run on continuous integration servers or quickly testing and debugging an API with `curl`. We’ll go over:  - Interacting with the file system - Creating, moving, copying, and deleting files and folders - Finding files and text patterns in files - Creating and running scripts - Language syntax like variables and conditionals.

Automate Daily Development Tasks with Bash

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

Tailwind provides us with highly composable utility classes but leaves the design specification entirely up to the user to maintain that custom look and feel to your app.

In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes.

By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, "Hey there, nice Bootstrap app."

So if you want a fully custom design, you are back at step 1.

There's a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.

This is Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Design with Tailwind CSS is a series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.

Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.


Design with Tailwind CSS Masterclass

Migrate from Create-React-App to Gatsby - Start Project

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

Theming using TailwindCSS and CSS Variables

Lots of if and if else statements are hard to read and tough to maintain in any language, and bash is no exception. In this lesson, we’ll learn how to use `case`, bash’s construct for a switch statement. In bash, `case` actually does pattern matching, which gives some great flexibility. We’ll write a script that will uncompress a variety of different archive file  types (like .tar or .zip), based on their file extension. 

Use case for Complicated Conditional Statements in Bash

Let’s say you want to allow a user to pass a `-v` flag to turn on verbose logging in a script. Manually parsing out options passed to a script is difficult, but in this lesson, we’ll learn about `getopts` which makes it easy. We'll look at the limitations of using getopts (options must be in a format like `-a` or `-ab <value>`) as well as the importance of shifting processed options off of the argument array. 

Create a Bash Script that Accepts Named Options with getopts

In this lesson, we’ll apply our knowledge of `getopts` and create a script that opens a PR on Github, all without leaving your terminal. We’ll use `getopts` to take 3 options: username, password or token, and PR title. We’ll use any input after that as the body of the PR. We’ll validate the input and then use `curl` to POST it to Github. 

Create a Bash Script to Open a Pull Request on Github using getopts

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

Bash is great, but sometimes we need the power of a more robust programming language to accomplish our goals. In this lesson, we’ll look at how we can integrate node.js within bash to send data to and from a node.js script. First we’ll look at how to do quick one-liners at the shell using node's `-p` (print) option. Then we'll write a node.js script that accepts parameters from the shell to check the value of a query string. In node.js, we can use the `process` object to interact with command line arguments and stdio. 

Send and Receive Data from a Node.js Script in Bash using the Process Object

Pipes are one of bash's most powerful features, but sometimes plain bash doesn't give us the tools we need to perform more complicated transformations. In this lesson, we'll see how we can leverage node.js in conjunction with bash. We'll pipe a log file of line-delimited JSON (LDJSON) to a node script that filters it and then writes the result to stdout. We'll use node.js' Transform stream to accomplish this. 

Transform Piped Data from Bash using a Node.js Transform Stream

A Unix command used to search files for the occurrence of a string of characters that matches a specified pattern.

grep

When you have a bunch of text to sift through, standard Unix command line utilities like `grep`, `sed`, `awk`, `cut`, `sort`, and `uniq` can help extract the information you want. For example, with a git log for a project, you might want to group commits by day in order to see which days you're most productive, or find out how many commits you made last year. In this lesson, you'll learn how to combine these commands with the pipe operator to extract this data from git logs.

Analyze Git Logs with the Command Line

`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`. 

Topics

Instructors

Content Type