Skip to content

Instantly share code, notes, and snippets.

View ryanbrunner's full-sized avatar

Ryan Brunner ryanbrunner

  • Supercast
  • Toronto, Ontario
View GitHub Profile
<div class="mt-8 flow-root" data-controller="table-component">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div class="relative">
<table class="min-w-full table-fixed border-collapse">
<thead class="border-solid border-0 border-b border-gray-200">
<tr>
<th scope="col" class="min-w-[12rem] py-3.5 pr-3 text-left text-sm font-semibold text-gray-900">
<%= columns.first.heading %>
</th>
@ryanbrunner
ryanbrunner / example.js
Created March 21, 2017 20:43
Post Form example
class AddPost extends React.Component {
render() {
return <PostForm initialPost={ this.state.post } onSave={ (formData) => this.save(formData) } />
}
save(formData) {
// make a POST request to /api/posts
}
}
@ryanbrunner
ryanbrunner / Tips And Tricks.md
Last active March 4, 2021 21:00
React tips and tricks

React Tips and Tricks

Here's some handy stuff you can use in React!

A basic React component

var ComponentName = React.createClass({
  render: function() {
    return <div>My Component</div>
  }
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id='todo'></div>
@ryanbrunner
ryanbrunner / react_simple.js
Last active April 5, 2016 01:02
React Simple App
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id='hello'></div>
@ryanbrunner
ryanbrunner / react_sample_1.js
Created April 4, 2016 22:32
Sample 1 for React
import React from 'react';
import ReactOnRails from 'react-on-rails';
// Simple example of a React "dumb" component
export default class SimpleHelloWorld extends React.Component {
render() {
return (
<div className="container">
Hello, { this.props.name }!
</div>

Week 1, Day 2: Ruby and Git

Materials Required / Prep Work

  1. Make sure you have Git installed on your computer. If you don't, here's a guide to getting it setup - http://git-scm.com/downloads.
  2. If you haven't already, create an account on GitHub.
  3. Install the Heroku toolbelt, and set up an account on Heroku.

Week 1, Day 1: Ruby, The Interwebs and YOU (but mainly Ruby & the interwebs)

Materials Required / Prep Work

  1. Opening a 'command-line' interpreter
  2. RVM (osx only), Ruby & Ruby-gems installed
  3. A Text Editor (Sublime Text strong recommended)
  4. Have the command line cheatsheet handy

@ryanbrunner
ryanbrunner / gist:22b14a368f047248b90a
Created December 12, 2014 20:15
Lotus Model problem
require 'lotus-model'
require 'lotus/model/adapters/memory_adapter'
module Admin
module Models
class Feature
include Lotus::Entity
self.attributes = :name
end