hellobrian

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

$white: #fff;

@mixin type($size, $color: $white) {
  font-family: 'IBM Helvetica', Helvetica Neue, HelveticaNeue, Helvetica, sans-serif;
  font-size: $size;
  color: $color;

hellobrian

# Linter Options
options:
  # Don't merge default rules
  merge-default-rules: false
# File Options
files:
  include:
    - './global/**/*.scss'
    - './base-elements/**/*.scss'
    - './components/**/*.scss'

hellobrian

var commits = document.querySelectorAll('.commit-title a');

for (var i=0; i<commits.length; i++) {
  commits[i].text.split(' ').forEach(function(word){
    if (word === 'Merge') {
      console.log(commits[i].parentNode.parentNode.parentNode);
      commits[i].parentNode.parentNode.parentNode.style.display = "none";
    }
  });
}

hellobrian

<select>
  <option>Bulbasaur</option>
  <option>Squirtle</option>
  <option>Charmander</option>
</select>

hellobrian

Dropdown

This dropdown can open and close on click events. When clicking on the dropdown, it will toggle the open class When clicking outside of the dropdown, it will remove the open class, effectively closing the dropdown

A Pen by Brian Han on CodePen.

License.

hellobrian

const TARGET = process.env.npm_lifecycle_event;

if (TARGET === ‘build’) {
 console.log(`Running your build tasks!`);
}

if (TARGET === ‘dev’) {
 console.log(`Running the dev server!`);
}

hellobrian

{
  "name": "npm-lifecycle-events",
  "version": "1.0.0",
  "main": "example.js",
  "scripts": {
    "build": "node example.js",
    "dev": "node example.js",
    "start": "node example.js"
  },
  "author": "Brian Han",

hellobrian

Material Tabs

A Pen by Brian Han on CodePen.

License.

hellobrian

React Icons

A Pen by Brian Han on CodePen.

License.

hellobrian

////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// - Refactor App by creating a new component named `<GeoPosition>`
// - <GeoPosition> should use a child render callback that passes
//   to <App> the latitude and longitude state
// - When you're done, <App> should no longer have anything but
//   a render method
//
// Got extra time?