
## Mac Shortcuts

Show Hidden Files: `⌘command` + `shift` + `.`

## Command Line

Pull in changes to master into working branch:

```bash
git pull --rebase origin master
git push origin [yourBranchName] --force
```

### Interactive Rebase

```bash
git rebase -i HEAD~3

Commands:
* p, pick = use commit
* r, reword = use commit, but edit the commit message
* e, edit = use commit, but stop for amending
* s, squash = use commit, but meld into previous commit
* f, fixup = like "squash", but discard this commit's log message
* x, exec = run command (the rest of the line) using shell

git push origin [yourBranchName] --force
```

## ES Lint

`// eslint-disable-line no-console`

## Kill all node processes

`killall node`


A collection of my useful shortcuts and Git commands

Helpful Git Commands and Mac Shortcuts


---

**Advertisement :)**

- **[pica](https://nodeca.github.io/pica/demo/)** - high quality and fast image
  resize in browser.
- **[babelfish](https://github.com/nodeca/babelfish/)** - developer friendly
  i18n with plurals support and easy syntax.

You will like those projects!

---

# h1 Heading 8-)

lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat

## h2 Heading

lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat

### h3 Heading

lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat

#### h4 Heading

lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat

##### h5 Heading

lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat

###### h6 Heading

lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat lorem ipsum dolor eget etat

## Horizontal Rules

---

---

---

## Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

"Smartypants, double quotes" and 'single quotes'

## Emphasis

**This is bold text**

**This is bold text**

_This is italic text_

_This is italic text_

~~Strikethrough~~

## Blockquotes

> Blockquotes can also be nested...

## Lists

Unordered

- Create a list by starting a line with `+`, `-`, or `*`
- Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    - Ac tristique libero volutpat at
    * Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
- Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

4. You can use sequential numbers...
5. ...or keep all the numbers as `1.`

## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Block code "fences"

```
Sample text here...
```

Syntax highlighting

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Right aligned columns

| Option |                                                               Description |
| -----: | ------------------------------------------------------------------------: |
|   data | path to data files to supply the data that will be passed into templates. |
| engine |    engine to be used for processing templates. Handlebars is the default. |
|    ext |                                      extension to be used for dest files. |

## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"


Kitchen Sink


## A React Slideshow component with all the bells and whistles

- [Live Demo →](https://ligzbo.csb.app/)
- [Code View →](https://codesandbox.io/s/ligzbo)

I loved the slider used in [https://www.educative.io/](educative.io) so I wanted to recreate the design and functionality with React.

### Features

- Previous/Next Slide
- Autoplay slides
- Restart slider
- Expand/Collapse all slides
- Fullscreen slides mode

### Simple API

```
const data = [
  {
    title: "First",
    text: "foo bar baz"
  },
  ...
];

...

// optional prop autoPlayTime to control autoplay time on slide
<Slides slides={data} />
```

To avoid repeating code I utilized a few custom hooks:

`useCount` – for controlling active slide index

```
import { useState } from "react";

export const useCount = (initialValue = 0) => {
  const [activeIndex, setActiveIndex] = useState(initialValue);

  const increment = () => {
    setActiveIndex((prev) => prev + 1);
  };

  const decrement = () => {
    setActiveIndex((prev) => prev - 1);
  };

  const reset = () => {
    setActiveIndex(initialValue);
  };

  return [activeIndex, increment, decrement, reset];
};
```

`useToggle` – for controlling expanded/collapsed slides, autoplay mode and full screen mode

```
import { useCallback, useState } from "react";

export const useToggle = (initialValue = false) => {
  const [state, setState] = useState(initialValue);
  const toggle = useCallback(() => setState((state) => !state), []);
  return [state, toggle];
};
```

`useInterval` – for controlling slide increments in autoplay mode

```
import { useEffect, useRef } from "react";
export const useInterval = (callback, delay) => {
  const intervalId = useRef(null);
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    const tick = () => savedCallback.current();

    if (typeof delay === "number") {
      intervalId.current = window.setInterval(tick, delay);

      return () => window.clearInterval(intervalId.current);
    }
  }, [delay]);

  return intervalId.current;
};
```


A React Slideshow component with all the bells and whistles

React Slideshow Component


Making videos has always been a passion of mine. Initially I began creating fun content that I could share with my friends and family.

As I transitioned into the working world I wanted to figure out a way I could leverage the power of video in my everyday job. I began recording my screen and voice while I showcased our React infrastructure components and utilities. This lead to the creation of several video tutorial playlists that are now used to onboard new developers and give designers insights into the basics of how the infrastructure works. These videos are extremely valuable due to our teams limited developer resources.

Videos allow me to multiply my time helping others without taking up my time. While I am unable to publicly share the videos I made for work, I can share some I made for fun below.

<VideoEmbed src="https://www.youtube.com/embed/o5MARPLbJGg" />

<VideoEmbed src="https://www.youtube.com/embed/HBCV88_9gzw" />


Blog

.css-kvj8dg{position:static;}.css-kvj8dg::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:1;width:100%;height:100%;}Helpful Git Commands and Mac Shortcuts

Kitchen Sink

React Slideshow Component

Videos

Helpful Git Commands and Mac Shortcuts