daveyholler

.brand-50{ color: #E3F2FD; }
.brand-100{ color: #BBDEFB; }
.brand-200{ color: #90CAF9; }
.brand-300{ color: #64B5F6; }
.brand-400{ color: #42A5F5; }
.brand-500{ color: #2196F3; }
.brand-600{ color: #1E88E5; }
.brand-700{ color: #1976D2; }
.brand-800{ color: #1565C0; }
.brand-900{ color: #0D47A1; }

daveyholler

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.0.0-rc7-master-195dbb4
 */body,html{height:100%;color:rgba(0,0,0,.87);background:#fff;position:relative}body{margin:0;padding:0}[tabindex='-1']:focus{outline:0}.inset{padding:10px}button.md-no-style{font-weight:400;background-color:inherit;text-align:left;border:none;padding:0;margin:0}button,input,select,textarea{vertical-align:baseline}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:default}textarea{vertical-align:top;overflow:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box;-webkit-box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}.md-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;

daveyholler

<?xml version="1.0" encoding="UTF-8"?>
<event>
	<date>1549375200000</date>
	<desc>GENESIS 1:1-2:25&#xa;MATTHEW 1:1-2:12&#xa;PSALM 1:1-1:6&#xa;PROVERBS 1:1-1:6</desc>
</event>
<event>
	<date>1549461600000</date>
	<desc>GENESIS 3:1-4:26&#xa;MATTHEW 2:13-3:6&#xa;PSALM 2:1-2:12&#xa;PROVERBS 1:7-1:9</desc>
</event>
<event>

daveyholler

<div className="hover-row">
  <div className="text-placeholder gradient" />
  <div className="text-placeholder gradient" style={{ width: '90%' }} />
  <div className="text-placeholder gradient" style={{ width: '75%' }} />
</div>

// CSS

.text-placeholder {
  width: 100%;

daveyholler

{"names":["Jack Shephard","Kate Austen","Hugo Reyes","James Ford","John Locke","Sayid Jarrah","Jin-Soo Kwon","Sun-Hwa Kwon","Claire Littleton","Charlie Pace","Benjamin Linus","Michael Dawson","Desmond Hume","Daniel Faraday","Juliet Burke"],"cities":["Los Angeles","Arnes","Miami","Jasper","Tustin","Tikrit","Namhae","Seoul","Sydney","Manchester","Portland","New York City","Glasgow","Oxford","Miami"],"aliases":["Doc","Freckles","Hurley","Sawyer","The Man in Black","Najeev","Jin","Sun","","","Henry Gale","Kevin Johnson","The Package","Faraday","Blondie"],"countries":["United States","United States","United States","United States","United States","Iraq","South Korea","South Korea","Australia","England","United States","United States","Scotland","England","United States"],"dates":["1969-12-03T00:00:00.000Z","1977-05-01T00:00:00.000Z","1978-12-29T00:00:00.000Z","1968-04-15T00:00:00.000Z","1956-05-30T00:00:00.000Z","1967-11-07T00:00:00.000Z","1974-11-27T00:00:00.000Z","1980-03-20T00:00:00.000Z","1982-10-27T00:00:00.0

daveyholler

[
  {
    "id": "wii-sports-wii-2006",
    "name": "Wii Sports",
    "year": 2006,
    "platform": "Wii",
    "genre": "Sports",
    "publisher": "Nintendo",
    "global_sales": 82.53,
    "critic_score": 76,

daveyholler

[
  {
    "id": "wii-sports-wii-2006",
    "name": "Wii Sports",
    "year": 2006,
    "platform": "Wii",
    "genre": "Sports",
    "publisher": "Nintendo",
    "global_sales": 82.53,
    "critic_score": 76,

daveyholler

Encounter.create([
    {
        encounter_date: Date::strptime('2020-03-15'),
        encounter_number: 15,
        start_time: '3:05pm',
        end_time: '4:55pm',
        vessel: 'Mike 1',
        staff: 'Mark Malleson',
        observers: 'Joe Zelwietro',
        pods: 'Transients',

daveyholler

Upload images with React and the carrierwave Ruby gem for Rails 5

I recently attended a 4.5 month, intensive coding bootcamp in Boston, MA called Launch Academy. I spent a lot of time in academic science doing imaging research, so I naturally had an interest in learning how to manipulate images in this new web browser environment. For my capstone project, I created a very simple image editing Rails app where I realized I needed to be able to save/upload images to my database.

Since, through earnest effort, I wanted my app to use React for a single-page experience, and I quickly discovered that my desire to use a React/fetch/carrierwave/fog/Rails strategy was initially difficult to learn. I had to pull information from many sources (StackOverflow, Medium, official docs, other blog posts, course instructors, etc) to develop a method that uses this specific POSTing cycle.

This blog post represents my findings to integrate all these technologies in a modern, seamless

daveyholler

import React, { FunctionComponent, useState } from 'react';
import classNames from 'classnames';

import {
  EuiButton,
  EuiButtonIcon,
  EuiFlexGroup,
  EuiFlexItem,
  EuiText,
} from '@elastic/eui';