Skip to content

Instantly share code, notes, and snippets.

@JoeyBurzynski
JoeyBurzynski / 55-bytes-of-css.md
Last active May 3, 2024 13:01
58 bytes of css to look great nearly everywhere

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}
@avinmathew
avinmathew / index.jsx
Created August 8, 2017 11:54
Multiple layouts with React Router v4
import React from "react"
import { Route, Switch } from "react-router-dom"
const AppRoute = ({ component: Component, layout: Layout, ...rest }) => (
<Route {...rest} render={props => (
<Layout>
<Component {...props} />
</Layout>
)} />
)
@erikras
erikras / RichTextMarkdown.js
Created October 28, 2016 12:23
Using react-rte with redux-form
import React, { Component, PropTypes } from 'react'
class RichTextMarkdown extends Component {
static propTypes = {
input: PropTypes.shape({
onChange: PropTypes.func.isRequired,
value: PropTypes.string
}).isRequired
}
@thaerlabs
thaerlabs / .babelrc
Last active November 16, 2016 17:36
React hello world is not hard
{
"presets": ["es2015", "react"]
}
@GavinJoyce
GavinJoyce / gist:4f81d0bf879dad6b203e
Last active November 20, 2020 04:01
speeding up `npm install` by disabling the progress bar
with `react-native`:
npm set progress=false && rm -rf ~/.npm && rm -rf node_modules && npm cache clean && time npm install
npm install 83.72s user 26.03s system 100% cpu 1:49.32 total
npm set progress=true && rm -rf ~/.npm && rm -rf node_modules && npm cache clean && time npm install
npm install 199.30s user 27.32s system 91% cpu 4:08.29 total
--
@gaearon
gaearon / reducers.js
Last active December 11, 2020 14:56
How I'd do code splitting in Redux (pseudo code, not tested!)
import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
return combineReducers({
users,
posts,
...asyncReducers
});
@paulirish
paulirish / how-to-view-source-of-chrome-extension.md
Last active April 25, 2024 04:16
How to view-source of a Chrome extension

Option 1: Command-line download extension as zip and extract

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$extension_id.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc" 
unzip -d "$extension_id-source" "$extension_id.zip"

Thx to crxviewer for the magic download URL.

@chantastic
chantastic / on-jsx.markdown
Last active March 20, 2024 01:03
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

@nkbt
nkbt / .eslintrc.js
Last active May 1, 2024 21:15
Strict ESLint config for React, ES6 (based on Airbnb Code style)
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"plugins": ["react"],
"ecmaFeatures": {