blackfalcon

<div class="flex-outer">
  
<div class="flex-inner">
  <div class="box blackType">These are current colors being used under legacy names</div>
  <div class="box blackType gray-100">gray-100 / cloud</div>
  <div class="box blackType gray-200">gray-200 / disabled</div>
  <div class="box gray-500">gray-500 / orca</div>
</div>

<div class="flex-inner">

blackfalcon

As professionals we look to always optimize our workload. Through better processes and shortcuts we can eliminate unnecessarily repetitive tasks. One of the tools I use quite often is the Command Line Interface (CLI) and Git, and this is an area that we can automate quite extensively through some really simple to learn BASH hacks.

We all have tasks that we do endlessly, and there are tasks that we do independently and don't realize that there is a definitive pattern that we can embrace, put them to use in a simpler function and alter the results on a per use basis. It is through years of doing things the hard way that I have found some simple tricks that makes my life much easier to maintain.

What is BASH anyway?

Let's get this out of the way quickly first. In short, it is a Unix shell and command language most common on Linux and macOS and recently has made it's way to Windows as well. It is the common interface for running simple commands or other applications such as GiT, Curl, Ack, etc ...

If you

blackfalcon

<cool>
  <p>Hi { message() }</p>
  <script>
    message() {
      return 'there'
    }
  </script>

  <style type="postcss" scoped>

blackfalcon

# put this in your .bashrc

function switch() {
  git branch | grep "$1" | pbcopy && tmp=$(pbpaste) && git checkout $tmp
}

# example branch ... 8038031-update-things-long-branch-name-of-things
# use in the CLI
# $ switch 38031 (or any unique searchable string)

blackfalcon

<div id="copy">
  <ul>
    <li class="more-copy">
      <p class="copy">
        hello
      </p>
    </li>
  </ul>
</div>

blackfalcon

// ----
// libsass (v3.2.5)
// ----

@import "include-media";

$breakpoints: map-merge($breakpoints, (
    'dtmobile': 999px,
    'small': 492px,
    'medium': 700px,

blackfalcon

.block

blackfalcon

.block desktop large
.block.webkit webkit
.block.dppx dppx
.block.resolution min-res

blackfalcon

// ----
// libsass (v3.2.5)
// ----

/* ================================= 
  Page Styles
==================================== */

* {
	box-sizing: border-box;

blackfalcon

// ----
// libsass (v3.2.5)
// ----

.container {
  float: left;
  margin-right: 100px;
  width: 300px;
  max-height: 200px;
  overflow: scroll;