New React Notes

In teaching myself React, these are my cheatsheet notes that I've taken. They are in no way complete, but they have helped me get off the ground using React.

Components

There are 2 types of React components:

Functional Component

const MyComponent = () => {
  return (
    <div>
      [...JSX stuff...]
    </div>
  )
}

Class Component

import React, { Component } from 'react'
class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return (
      <div>
        [...JSX stuff...]
      </div>
    )
  }
}

Component w/ Event Handler

class SearchBar extends Component {
  render() {
    return (
      <input onChange={this.onInputChange} />
    )
  }
  onInputChange(event) {
    console.dir(event.currentTarget)
  }
}

Optimizing Images

For years I've been annoyed at websites having big beautiful PNGs taking monumental amount of time to load. Over the years, I've created this method to vastly cut down the size of PNGs while both retaining quality and maintaining alpha transparency.

These instructions show how to optimize PNGs for display on the web.

Setup

  1. These instructions are created for Mac users. Windows optimizations will be similar, but with different programs
  2. Download and install the following 2 open-source programs:

CSS Breakout

CSS Breakout appears to be very simple. It "breaks" out of a normal container to either a skinny container, site container, or to the maximum browser boundaries. No closing and then reopening of a div tree is necessary. Absolutely no special HTML structure is required. And it's all done in pure CSS - no javascript is used whatsoever.

Why do I need this?

One of the primary uses of CSS Breakout is to break out of a content container created from within a WYSIWYG. Without CSS Breakout it is very messy and usually not even possible. By using CSS Breakout you can finally break out of containers gracefully. This solution relies on only CSS so it's fast and extremely portable.

CSS Breakout works because we have a few (newer) things at our disposal: SASS, calc, vw, media-queries. Combine them together with some logic and you get CSS Breakout.

The old way:

<div class="site-container">
  <div class="skinny-container">
    <!-- your text -->
  </div>
</div>
<img src="wide-image">
<div class="site-container">
  <div class="skinny-container">
    <!-- your text -->
  </div>
</div>

The new way:

<div class="site-container">
  <div class="skinny-container">
    <!-- your text -->
    <img class="breakout--to-max" src="wide-image">
    <!-- your text -->
  </div>
</div>

Basic Express.js / Node.js Cheatsheet

This is a cheatsheet I created for myself when learning Node / Express. Relatively simple stuff but it helped me out.

Why I'm leaving the LAMP stack and embracing the MERN stack

"Hi my name is Eric and I build websites."

I've said that to people for years. From the time I started web development I've been a LAMP (Linux, Apache, MySQL, PHP) stack developer. I've built well over 20 enterprise-level Drupal and Wordpress sites in addition to coding hundreds of thousands of lines of custom CSS and UI JavaScript. My entire professional life has been a back and forth between the front-end and the LAMP stack - getting pretty good at both but never mastering either. As the years have gone by I've gravitated towards the front-end but I've always maintained that I'm a true full LAMP stack developer - while never really mastering either the front-end or the back-end.

I _am_ good at "building websites." But companies like SquareSpace and Shopify are automating these skills and making me obsolete. In staying on the LAMP stack I have been holding on to an old and dying format. By teetering in the middle I was spearheading my own demise. To evolve I had to update my skills. I had to ditch what wasn't working and master what I really loved.

Today I'm officially ditching the LAMP stack and finding something new. This is the start of my journey into being a web application developer. I'm tackling this from the point of view of an expert and a complete novice. This is humbling and embarrassing and completely necessary for me.

"Hi my name is Eric and I build web apps."

My journey began 6 months ago when literally all I knew was that I needed to learn a front-end framework in order to update content on a Drupal site better. That led me to a standoff between either React or Angular (Vue wasn't much of a thing yet). After crunching some numbers, I found the general consensus was that React has more top-level tech companies using it. It was settled, I was learning React.