Skip to content

Latest commit

 

History

History
827 lines (658 loc) · 33.1 KB

README.md

File metadata and controls

827 lines (658 loc) · 33.1 KB
Raw

#eggheadADay

How do I #eggheadADay?

  • Watch one egghead.io lesson a day
  • Tweet about it for personal accountability
  • Reinforce your knowledge of what you learned by creating a pull request adding it to this readme.
Note: Click the tweet share button from the egghead.io lesson to easily tweet about the lesson.
Note: Use the templates in the templates directory to save time. Embed your tweet into the template. Click the tweet options menu, select embed tweet, and copy the provided code. Paste it into your post and strip out the script tag. DONT FORGET TO ADD #eggheadADay to the tweet.

Contributions are encouraged to better this project!

Daily Lessons

ES6 Rest Parameters

Example

/* ES6 Rest parameters vs ES5 arguments keyword */

(function () {
  /* ES5 arguments keyword example */
  var personalInfo = function (name, cellNumber, address, twitterHandle) {
    // The arguments keyword provides access to the functions parameters using array like syntax
    // Note: Not all array methods are available to arguments as arguments is "array like"
    console.log(arguments); // Output:
    // { '0': 'Bob Dole', '1': '555-555-5555', '2': '123 Main St. Chicago, IL 87654', '3': '@bobdole' }

    console.log(arguments[0]); // Bob Dole
    console.log(arguments[3]); // @bobdole
    console.log(arguments.length); // 4
  }

  personalInfo('Bob Dole', '555-555-1234', '123 Main St. Chicago, IL 87654', '@bobdole');

  /* ES6 Rest parameters example */
  const personalInfo2 = (name, ...theRestOfPersonalInfo) => {
    // Arrow functions cannot use the arguments keyword.
    console.log(arguments); // { }

    // Rest parameters are literally "The rest of the parameters"
    console.log(name, theRestOfPersonalInfo); // Output:
    // 'Bob Dole', ['555-555-1234', '123 Main St. Chicago, IL 87654','@bobdole']
    console.log(name, theRestOfPersonalInfo[1]); // 'Bob Dole' '123 Main St. Chicago, IL 87654'
  }

  // Notice in the function declaration I have one named parameter 
  // then a Rest Parameter to grab the rest of values passed to this function.  
  personalInfo2('Bob Dole', '555-555-1234', '123 Main St. Chicago, IL 87654','@bobdole');
})();

Tweet

ES6 Rest Parameters - js Video Tutorial #pro @eggheadio: https://t.co/OyVWzYccBp #eggheadaday #js

— Sean Groff (@_SeanGroff) March 16, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/16/2017

Promises with ES6

Example

/**
 * Promises with ES2015
 * Promises allow you to perform async behaviors in a sync manner.
 */

//Promise accepts a callback function, the callback has 2 parameters, resolve & reject.
const p = new Promise((resolve, reject) => {
  // switch true to false to test Promise reject()
  if (true) {
    resolve('Success');
  } else {
    reject('Rejected');
  }
});

// When a Promise is resolved the .then() will fire.
// then() accepts a callback method (I know....just use .then() and .catch() though :P)
p.then((data) => {
  // data is the argument passed into the resolve() method.
  console.log(data);
});

// When a Promise is rejected the .catch() will fire.
// if an Error occurs ANYWHERE in the Promise the .catch() will fire.
p.catch((error) => {
  // error is the argument passed into the catch() method.
  console.log(error);
});

/**
 * Let's chain the Promise methods
 */
const d = new Promise((resolve, reject) => {
  // switch true to false to test reject and the catch method.
  if (true) {
    resolve('Promise was resolved!');
  } else {
    reject('Promise was rejected :(');
  }
})
  .then((data) => {
    console.log(`Success : ${data}`);
    return 'foo bar';
  })
  .then((data) => {
    // What will data be here? What if there was no return statement in the previous .then() ?
    console.log(`I wonder what data will be? : ${data}`);
  })
  .catch(error => console.log(`Error : ${error}`));

Tweet

Promises with ES6 - js Video Tutorial #free @eggheadio: https://t.co/SpIvnk4UAq#eggheadADay #js

— Sean Groff (@_SeanGroff) March 17, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/17/2017

Search the contents of files using grep

Example

Grep returns all instances of lines found from the search phrase. Grep is CMD + F on steroids.

  $ grep gulp package.json

This will return all instances found of the term "gulp" within the package.json file. You can include multiple files to search through.

  $ grep gulp -r my_fake_project/js

This will recursively search everything in the js directory and return all instances found of the term "gulp"

Tweet

Search the contents of files using grep - otherjs Video Tutorial #free @eggheadio: https://t.co/BAbCQcnM09
by: @brindelle #eggheadADay #grep

— Sean Groff (@_SeanGroff) March 20, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/20/2017

Manage Angular 2 Elements with Events and Refs

Example

/**
 * Angular 2 Elements with Events and Refs
 */

import { Component, OnInit } from '@angular/core';

@Component({
  // The DOM element type
  selector: 'app-simple-form',
  /* The View */
  /* The #myInput is how you place a reference on a DOM element */
  /* To place an event on an element you surround the Angular event with parenthesis */
  /* You then assign it a method and call the method */
  /* ex. (click)="onClick(myInput.value) */
  /* This calls the onClick Class method and passes the <input>'s value */
  template: `<div>
    <input #myInput type="text">
    <button (click)="onClick(myInput.value)">Click me!</button>
  </div>`,
  styles: []
})
export class SimpleFormComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  onClick(value) {
    console.log(`Input value is - ${value}`); // -> Whatever you type in #myInput text input.
  }
}

Tweet

Manage Angular 2 Elements with Events and Refs - Video Tutorial #free @eggheadio: https://t.co/xDWGJLdWc9
By: @johnlindquist #eggheadADay

— Sean Groff (@_SeanGroff) March 23, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/23/2017

Adding badges to your README

Example

Badges provide a quick and easy way for anyone to see the status of your project on Github.

Adding badges is extremely easy thanks to shields.io From shields.io select a badge you want to place in your readme markdown file and simply copy/paste the image url into image markdown.

ex. ![travis build](https://img.shields.io/travis/rust-lang/rust.svg)
This gives you the badge seen below!

travis build

From here you can easily wrap the badge in a markdown link linking to your build status page!

Tweet

Adding badges to your README - js Video Tutorial #free @eggheadio: https://t.co/1NOdyhKUVT
Now I know 🤘
By: @kentcdodds #eggheadADay

— Sean Groff (@_SeanGroff) March 24, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/24/2017

Observables are almost like Functions

Example

// Observables are almost like functions
const plainFunc = () => {
  console.log('Hello!');
  return 7;
};

console.log(plainFunc());

// RxJS Observable
const foo = Rx.Observable.create((observer) => {
  console.log('Observable!');
  // .next() returns a value
  observer.next(5);
  // .next() can be called more than once to return multiple values!
  observer.next('Whoa, more values returned!');
  // async works just fine too
  setTimeout(() => observer.next(`I'm asynchronous!`), 1000);
  observer.next('Functions can only return a single value, I can return all the things!');
});

// Observables are like functions in that if you don't express interest 
// by calling a function or subscribing to an observable nothing will happen.

// subscribing to an Observable is like calling a function
// A function returns a single value immediately
// Subscribing to an observable says give me values, maybe just one value, immediately, or asynchronously.
foo.subscribe((x) => {
  // x will always be the value passed through .next() in the Observable
  console.log(x);
});

Tweet

GREAT EXPLANATION!
Observables are almost like Functions: rx Tutorial #pro @eggheadio: https://t.co/vhNyLhtoRU
By: @andrestaltz #eggheadADay

— Sean Groff (@_SeanGroff) March 27, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/27/2017

Introducing the Observable

Example

/* Introducing the Observable */

/**
 * An Observable is like an Array.
 * With an Array all data is stored in memory and has the data ready to pop-out synchronously.
 * An Observable is a collection of data where no data is stored in memory and the items arrive over time asynchronously.
 */

/* DOM Event Example */

// DOM events are very similar to Observables.
const button = document.getElementById('btn');

// Event handler
const handler = (e) => {
  console.log('clicked');
  // removes or "Unsubscribes"
  button.removeEventListener('click', handler);
}

/**
 * @param Name of event
 * @param callback function
 */
button.addEventListener('click', handler);

/* Observable Example */

const obsButton = document.getElementById('obsBtn');

// An Observable is more powerful because it gives us an object to represent that Event Stream!
const clicks = Rx.Observable.fromEvent(obsButton, 'click');

// Since Observables are asynchronous unlike Arrays the native Array forEach method will not work. Subscribe accepts 3 callbacks.
const subscription = clicks.subscribe(
  // 1) onNext
  (e) => {
    console.log('click!');
    // We don't care about anymore onNext method or any callbacks
    subscription.unsubscribe();
  },
  // 2) onError
  (err) => console.log('ERROR! ', err),
  // 3) onCompleted
  () => console.log('Done!')
);

Tweet

Introducing the Observable - js Video Tutorial #free @eggheadio: https://t.co/OxxBAKtdCv
By: @jhusain #eggheadADay #RxJs
Observables are 🔥‼️

— Sean Groff (@_SeanGroff) March 28, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/28/2017

Using the map method with Observable

Example

/* Observable Map Example */

const obsButton = document.getElementById('obsBtn');

// Creates an Observable from a click event
// Maps over each click event projecting an object
const clicks = Rx.Observable.fromEvent(obsButton, 'click')
  .map(e => ({ x: e.clientX, y: e.clientY }));

// Subscription to the clicks Observable
// pass the onNext callback to the subscribe method
const subscription = clicks.subscribe((point) => {
    console.log('clicked! ', JSON.stringify(point))
    subscription.unsubscribe();
  });

/**
 * Just like Arrays we can .map, filter, concat, etc on Observables to project new Observables!
 **/

Tweet

Using the map method with Observable - js Video Tutorial #free @eggheadio: https://t.co/9BVcF4J7Te
By: @jhusain #eggheadADay 🗺️

— Sean Groff (@_SeanGroff) March 29, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/29/2017

Reactive Programming - Why choose RxJS?

Example

/* Why choose RxJS? */
console.clear();

/********
** Rx allows you to specify the dynamic behavior of a value completely, only once, at the time of the declaration.
*********
*/

// Opposite static example of this ^
console.log('Static examples');

let a = 3;
let b = 10 * a;
console.log(b); // -> 30

a = 4;
console.log(b); // -> 30

b = 11 * a;
console.log(b); // -> 44
// b doesn't accumulate over time like an event stream, it's value is whatever it is when it's assigned a value

/* ********************************************************************************************************* */

/* Observable */
console.log('Observable examples');

// Specify the behavior of streamA and streamB ONLY at the time of declaration!
const streamA = Rx.Observable.of(3, 4);
const streamB = streamA.map(a => a * 10);

//streamA.set(4); // NOPE! Add 4 to the declaration

/**
 * Reminder
 * subscribe can accept 3 callbacks in the following order
 * onNext(), onError, onCompleted
 */
streamB.subscribe(b => console.log(b)); // -> 30, 40

Tweet

Reactive Programming - Why choose RxJS? - rx Video Tutorial #pro @eggheadio: https://t.co/zOe1fxS1yE
By: @andrestaltz #eggheadADay #RxJS #js

— Sean Groff (@_SeanGroff) March 30, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/30/2017

Reactive Programming - Async requests and responses in RxJS

Example

/* Async requests and responses in RxJS */

// checkout the fetch docs on MDN for more information
const fetchEndpoint = url => fetch(url)
    .then(response => response.json());

// Create an Observable of just the URL string
const request$ = Rx.Observable.of('https://api.github.com/users');
// think of .switchMap as .then() from a Promise
const response$ = request$.switchMap(url => Rx.Observable.fromPromise(fetchEndpoint(url)));

// subscribe to the response Observable and console log the response object for each response
response$.subscribe(response => console.log(response));

Tweet

Try fetch()

Async requests and responses in RxJS - rx Video Tutorial #pro @eggheadio: https://t.co/a7pktH6nUJ
By: @andrestaltz #eggheadADay

— Sean Groff (@_SeanGroff) March 31, 2017

Github Contributor

@SeanGroff 🐨

Date - 03/31/2017

Reactive Programming - Rendering on the DOM with RxJS

Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <ul class="suggestions">
      <li class="suggestion1">
        <img />
        <a href="#" target="_blank" class="username">username</a>
        <a href="#" class="close close1">x</a>
      </li>
      <li class="suggestion2">
        <img />
        <a href="#" target="_blank" class="username">username</a>
        <a href="#" class="close close2">x</a>
      </li>
      <li class="suggestion3">
        <img />
        <a href="#" target="_blank" class="username">username</a>
        <a href="#" class="close close3">x</a></li>
    </ul>
  </div>
  <script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>
// fetch() github users api endpoint
const fetchEndpoint = url => fetch(url)
    .then(response => response.json());

// Create an Observable of just the URL string
const requestStream$ = Rx.Observable.of('https://api.github.com/users');

// think of .switchMap as .then() from a Promise
const responseStream$ = requestStream$
  .switchMap(url =>
    Rx.Observable.fromPromise(fetchEndpoint(url))
  );

// Takes the responseStream Observable which is a list of users
// and returns a random user from the Observable list.
const randomUserStream$ = (responseStream) =>
  responseStream.map(user =>
    user[Math.floor(Math.random() * user.length)]
);

// Stores the random user Observable to a variable.
const suggestion1Stream$ = randomUserStream$(responseStream$);

const suggestion2Stream$ = randomUserStream$(responseStream$);

const suggestion3Stream$ = randomUserStream$(responseStream$);

// helper function to grab a selector on the dom and add data from the api to it.
const renderSuggestion = (userData, selector) => {
  const element = document.querySelector(selector);
  const usernameEl = element.querySelector('.username');
  usernameEl.href = userData.html_url;
  usernameEl.textContent = userData.login;
  const imgEl = element.querySelection('img');
  imgEl.src = userData.avatar_url;
};

// Subscribes to the Observable calling renderSuggestion() for each user
suggestion1Stream$.subscribe(user =>
  renderSuggestion(user, '.suggestion1'));

suggestion2Stream$.subscribe(user =>
  renderSuggestion(user, '.suggestion2'));

suggestion3Stream$.subscribe(user =>
  renderSuggestion(user, '.suggestion3'));

Tweet

Rendering on the DOM with RxJS - rx Video Tutorial #pro @eggheadio: https://t.co/LHStPtKyZl
By: @andrestaltz #eggheadADay #js #RxJS

— Sean Groff (@_SeanGroff) April 3, 2017

Github Contributor

@SeanGroff 🐨

Date - 04/03/2017

Reactive Programming - New requests from refresh clicks

Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }

    li {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    a {
      padding-left: 10px;
    }
  </style>
</head>
<body>
  <div>
    <h1 style="display: inline;">Who to follow</h1>
    <a class="refresh" href="#">Refresh</a>
    <ul class="suggestions">
      <li class="suggestion1">
        <img />
        <a href="#" target="_blank" class="username">username</a>
        <a href="#" class="close close1">x</a>
      </li>
      <li class="suggestion2">
        <img />
        <a href="#" target="_blank" class="username">username</a>
        <a href="#" class="close close2">x</a>
      </li>
      <li class="suggestion3">
        <img />
        <a href="#" target="_blank" class="username">username</a>
        <a href="#" class="close close3">x</a></li>
    </ul>
  </div>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>
// fetch() github users api endpoint
const fetchEndpoint = url => fetch(url)
    .then(response => response.json());

// refresh button element selector
const refreshButton = document.querySelector('.refresh');

// Creates an Observable click event stream on the refresh button
const refreshClickStream$ = Rx.Observable.fromEvent(refreshButton, 'click');


// Create an Observable of just the URL string
const startupRequestStream$ = Rx.Observable.of('https://api.github.com/users')

// Create an Observable of just the URL string
const requestOnRefreshStream$ = refreshClickStream$
  .map((event) => {
    const randomOffset = Math.floor(Math.random() * 500);
    return 'https://api.github.com/users?since=' + randomOffset;
  });


// think of .switchMap as .then() from a Promise
// .merge takes both streams and merges them to one stream
// ----a------b--c--->
// s----------------->
// Merge()
// s---a------b--c--->
const responseStream$ = requestOnRefreshStream$
  .merge(startupRequestStream$)
  .switchMap(url =>
    Rx.Observable.fromPromise(fetchEndpoint(url))
  );

// Takes the responseStream Observable which is a list of users
// and returns a random user from the Observable list.
const randomUserStream$ = (responseStream) =>
  responseStream.map(user =>
    user[Math.floor(Math.random() * user.length)]
);

// Stores the random user Observable to a variable.
const suggestion1Stream$ = randomUserStream$(responseStream$);

const suggestion2Stream$ = randomUserStream$(responseStream$);

const suggestion3Stream$ = randomUserStream$(responseStream$);

// helper function to grab a selector on the dom and add data from the api to it.
const renderSuggestion = (userData, selector) => {
  const element = document.querySelector(selector);
  const usernameEl = element.querySelector('.username');
  usernameEl.href = userData.html_url;
  usernameEl.textContent = userData.login;
  const imgEl = element.querySelector('img');
  imgEl.src = userData.avatar_url;
};

// Subscribes to the Observable calling renderSuggestion() for each user
suggestion1Stream$.subscribe(user =>
  renderSuggestion(user, '.suggestion1'));

suggestion2Stream$.subscribe(user =>
  renderSuggestion(user, '.suggestion2'));

suggestion3Stream$.subscribe(user =>
  renderSuggestion(user, '.suggestion3'));

Tweet

New requests from refresh clicks - rx Video Tutorial #pro @eggheadio: https://t.co/ta5eBav81c
By: @andrestaltz #eggheadADay #js #RxJS

— Sean Groff (@_SeanGroff) April 4, 2017

Github Contributor

@SeanGroff 🐨

Date - 04/04/2017

Starting a Stream with SwitchMap

Example

/* Starting a Stream with SwitchMap */

const timerButton = document.getElementById('#btnTimer');

// Create click event stream
const clickEvent$ = Rx.Observable.fromEvent(timerButton, 'click');

// Create an Interval that fires every 1 second
const intervalTick$ = Rx.Observable.interval(1000);

// Map over EACH click event and run the intervalTick stream
const startInterval$ = clickEvent$
// switchMapTo is the same as switchMap(() => cb)
  .switchMapTo(intervalTick$);

// subscribe to the Stream logging out each event (interval)
startInterval$
  .subscribe(event => console.log(event));

Tweet

Starting a Stream with SwitchMap - rx Video Tutorial #free @eggheadio: https://t.co/433x2fIAMU
By: @johnlindquist #eggheadADay #RxJS 👌

— Sean Groff (@_SeanGroff) April 10, 2017

Github Contributor

@SeanGroff 🐨

Date - 04/10/2017

React Native: fetch API introduction

Example

const URL = 'https://api.github.com/users/seangroff';

// global method fetch to make XHR requests
fetch(URL)
  // fetch returns a Promise
  // the returned Promise is a Response Object, not the data
  // .json() takes the Response Object returning a Promise with an
  // object literal containing the json data.
  .then(responseObject => {
    console.log('res: ', responseObject);
    return responseObject.json()
  })
  // this logs out the json data!
  .then(data => console.log(data))
  // Output any errors that occur
  // NOTE: HTTP errors such as 404 or 503 do NOT count as an error
  // they can be acted upon from the responseObject.status property
  .catch(err => console.log('Error ', err));

Tweet

React Native: fetch API introduction - react Video Tutorial #pro @eggheadio: https://t.co/tincg3j8L6
By: @tylermcginnis33 #eggheadADay 🍖🐕

— Sean Groff (@_SeanGroff) April 12, 2017

Github Contributor

@SeanGroff 🐨

Date - 04/11/2017

Organize your terminal using tmux panes

Example

On OS X tmux can be install using homebrew

> brew install tmux

You can change the default behavior of tmux with the Tmux config file

> vim ~/.tmux.conf

How to start a Tmux session from the terminal

> tmux

Default Prefix key

> Ctrl + b

Create a new pane vertically

> Ctrl + b %

Create a new pane horizontally

> Ctrl + b "

Switch between panes using the prefix key and the appropriate arrow key

> Ctrl + b Left Arrow
> Ctrl + b Right Arrow
> Ctrl + b Up Arrow
> Ctrl + b Down Arrow

You can change your prefix key from Ctrl + b to something else

> vim ~/.tmux.conf
> unbind-key C-b
> set -g prefix C-Space

This will set your prefix key to Ctrl + Space

Tweet

Organize your terminal using tmux panes - otherjs Video Tutorial #free @eggheadio: https://t.co/7161VQpl08
By: @brindelle #eggheadADay #tmux

— Sean Groff (@_SeanGroff) April 13, 2017

Github Contributor

@SeanGroff 🐨

Date - 04/13/2017

Create collections of panes using tmux windows

Example

With tmux you can create separate collections of panes. Maybe you want to create a collection for each project you're currently working on.

How to create a new collection

> prefix + c

How to switch to the next collection

> prefix + n

How to switch to the previous collection

> prefix + p

Tweet

👍4⃣ Multiple projects - Create collections of panes using tmux windows #free @eggheadio: https://t.co/j14MLE69BY
By: @brindelle #eggheadADay

— Sean Groff (@_SeanGroff) April 19, 2017

Github Contributor

@SeanGroff 🐨

Date - 04/19/2017

Enable mouse mode in tmux

Example

By default you cannot use the mouse in tmux. Enabling mouse mode allows you to do things like resize the panes or scroll with your mouse.

How to enable mouse mode

> prefix + : set mouse on

How to disable mouse mode

> prefix + : set mouse off

Tweet

Native scrolling 👌 - Enable mouse mode in tmux #free @eggheadio: https://t.co/3ROftw9wSk
By: @brindelle #eggheadADay

— Sean Groff ⚛ (@_SeanGroff) April 20, 2017

Github Contributor

@SeanGroff 🐨

Date - 04/20/2017