Skip to content

Instantly share code, notes, and snippets.

View alanbsmith's full-sized avatar
👋

Alan B Smith alanbsmith

👋
View GitHub Profile
@alanbsmith
alanbsmith / gist:963c7214e01401c3f78f
Last active August 29, 2015 14:04
merge & sort 3 arrays
a = [1,4,9]
b = [2,3,5]
c = [6,7,8]
(a+b+c).sort
=> [1, 2, 3, 4, 5, 6, 7, 8, 9]
@alanbsmith
alanbsmith / gist:c2a86f683e673b0bfba5
Created August 25, 2014 16:39
Storing State in Sessions
  1. What's the difference between a cookie and a session?
  2. What's serialization and how does it come into play with cookies?
  3. Can a cookie be shared by more than one user? How/why?
  4. What would it mean to store a shopping cart in a cookie?
  5. What advantages/disadvantages are there between cookie-stored carts and database-stored carts?
@alanbsmith
alanbsmith / understanding_react.md
Last active April 27, 2016 21:20
Understanding React

Understanding React

Overview

This document is not a tutorial. It's intended to provide some context for understanding ReactJS, some helpful information on some its functionality, and how to get started.

This is a 'living doc' that will be continually updated and revised.

Some Context: A Brief History of the Web

The Internet was originally created as a means to electronically share information via static files. This is the first website ever. As you can see, there's not much there. It's a static page, with some links to other pages. No JavaScript or database, just some HTML content. However, as the web became more popular, people began to discover new uses for it. We created ways to incorporate styles and images with CSS. This is a good example.

"dependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"classnames": "^2.2.5",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"webpack": "^1.13.0"
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'./client/'
],
module: {
loaders: [
{ test: /\.js?$/, loader: 'babel', exclude: /node_modules/ }
import React from 'react';
import ReactDOM from 'react-dom';
// import SomeComponent from './components/SomeComponent';
// import AnotherComponent from './components/AnotherComponent';
const components = {
// Your components go here:
// 'SomeComponent': SomeComponent,
// 'AnotherComponent': AnotherComponent
require 'json'
module ReactHelper
def react_component(component_name, props = {})
content_tag(
:div,
nil,
class: 'react-component-target',
data: {
namespace :assets do
task :precompile => :webpack
end
task :webpack do
sh "npm install"
sh "./node_modules/.bin/webpack"
end
@alanbsmith
alanbsmith / react-form-validation-patterns.md
Created February 27, 2017 20:11
React Form Validation Patterns

React Form Validation Patterns

Intro

Basic Form Validation

We'll start with basic form validation to get a handle on how the overall pattern works. Below is a basic login form without any validation built in. We're using controlled inputs for the email and password fields.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
background-color: #E0E6ED;
color: #1F2D3D;