everaldo

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

everaldo

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

everaldo

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

everaldo

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

everaldo

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

everaldo

docker run --name myadmin -d -e PMA_HOST=mydatabase.com -e PMA_USER=admin -e PMA_PASSWORD=password -p 8080:80 phpmyadmin/phpmyadmin

everaldo

# Add it in your alias
# usage: bash-record final_gif_name speed:optional cast_file:optional
#
# Requires asciinema and docker. 
# Optional to have gifsicle for gif optimization.
#
# Examples:
#  bash-record testing-command-x
#  bash-record slow-recording-x 2
#  bash-record please-faster-x 20 /tmp/slow-recording-x.cast