elyseholladay

yarn storybook
@storybook/cli v7.6.6

info => Starting manager..
(node:87275) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/elyse.holladay/color/src/projects/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Starting preview..
info Using Babel compiler
info Addon-docs: using MDX2

elyseholladay

You are an experienced Principal Software Engineer. You have 15+ years of experience. You know the following programming languages and frameworks at an expert level: Django, Python, JavaScript, Typescript, React, and Material UI. You are familiar with monorepo tools and data analysis as well.

You are going to look at a diff of a Pull Request from GitHub. This diff represents a set of changes that are about to get deployed to the production environment.

First, analyze the diff to see what will change.

Then, summarize the changes in 2-4 sentences. The description should be approximately at a reading level 10 and use straightforward language. You can include technical terms to describe the changes, especially if you are referencing code in the changes like function and method names. Prefer to use plain non-jargon non-technical language when you can. Assume that non-engineers will also be reading this, like product managers and designers. Write the summary in imperative mood. For example, write "Fix bug in dat

elyseholladay

<div class="preview-section">
    <h2>CSS Triangle with optional Border</h2>
    <p>Creates a CSS triangle of any size that can be plain (borderless), or 
    have an optional border. The size and color of the border are customizable. 
    The triangle can be in any direction (up, down, right, left). 
    By default the triangle is positioned in the vertical or horizontal 
    center; it can have an optional offset (a percentage, positive or 
    negative) to be moved in any direction.</p>
    <div class="tests">

elyseholladay

Theory

We subscribe to the following high-level theories in our Sass code:

Keep functional Sass separate from presentational styles

Keeping functional Sass separate from presentational Sass is important in order to maintain readability, search-ability and scaleability of your code. Patterns like placing mixins in the same file as presentational Sass leads to overly complex files to scan and opportunities for accidental pollution of your processed CSS. Source: http://gist.io/4436524

Sass is a CSS assistant.

"Sass is not a replacement for CSS, it’s more like having a CSS assistant who will help you write your code. So when you’re ready to really put it to work I recommend occasional sanity checks on the resulting CSS to see if this “assistant” has created too much repeated code or if the selectors are getting too complicated. Refactoring your Sass will help keep your code clean and you’ll start learning how you can make the best use of it."

elyseholladay

# set up Sublime as default editor and "subl ." command
export PATH=/bin:/sbin:/usr/bin:/usr/local/sbin:/usr/local/bin:$PATH
export EDITOR='subl -w'

#!/usr/bin/env bash

# Make my prompt AWESOMESAUCE
__powerline() {

    # EMOJI YO

elyseholladay

$(document).ready(function(){
	var animals = [];

	$.getJSON( "https://mks-frontend-gallery.herokuapp.com/", function( json ) {
	  for (var i in json) {
	  	$(".gallery").append("<div class='large-4 small-6 columns " + json[i].animals.join(" ") + "'><img src=" + json[i].url + "></div>");
	  }
	  var ids = [];
	  $.each( json, function ( key, val ) {
	    

elyseholladay

// Variables
$black: #000000;
$greydark: lighten($black,28%); // #424242
$greymedium: lighten($black,40.75%); // #686868
$greylight: lighten($black,68%); // #adadad
$greypale: lighten($black,80%); // #cccccc
$white: #ffffff;

// Site colors
$turquoise: darken(rgb(97,210,214),20%);

elyseholladay

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

%button {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 20px 0 0;
    padding: .25em 1em;

elyseholladay

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----


// variables
$white: #fff;
$black: #000;
$greydark: lighten($black,50%);

elyseholladay

<button class="button_primary">Post</button>
<button class="button_primary button_disabled">Approve</button>
<button class="button_secondary">Edit</button>
<button class="button_tertiary">Cancel</button>
<button class="button_text">Unsubscribe</button>