Skip to content

Instantly share code, notes, and snippets.

Avatar

Jon Abrams JonAbrams

View GitHub Profile
@JonAbrams
JonAbrams / gist:7edaa3545f8fd11a1919
Created Jul 9, 2015
How to add getter/setter methods to ES6 classes after the class is created
View gist:7edaa3545f8fd11a1919
// Also works for normal methods
class User {
constructor (first, last) {
this.firstName = first;
this.lastName = last;
}
}
Object.defineProperty(User.prototype, 'name', {
get: function () {
View gist:9f9f8a98444b250f20e2164da39b4223
.menu {
overflow: hidden;
}
/* Enable scroll on hover */
.menu:hover {
overflow: auto;
}
/* Enable scroll on focus */
View gist:2c243edd52e720c6b6641ea1a62a8264
.menu {
overflow: hidden;
}
/* Enable scroll on hover OR focus */
.menu:hover, .menu:focus-within {
overflow: auto;
}
@JonAbrams
JonAbrams / gist:1bdabf8ae3dc2d132056f1b09cd1c603
Last active Jan 12, 2019
Examples for blog post about pseudo-classes
View gist:1bdabf8ae3dc2d132056f1b09cd1c603
/* Applies to all input elements that are being focused */
input:focus {
border-color: blue;
}
/* Applies to all buttons that are hovered over */
button:hover {
border-color: red;
}
View gist:ee68c4cdf76e51bec724046750427f09
/*
Applies to any element that has
mydiv as a class OR myotherdiv as an id
*/
.mydiv, #myotherdiv {
background-color: red;
}
View index.js
import { subscribe } from 'spaceace';
import { renderApp } from './renderApp';
import { rootSpace } from './rootSpace';
renderApp(rootSpace);
subscribe(rootSpace, ({ newSpace }) => {
// executed whenever rootSpace is updated
// rootSpace is immutable, newSpace is the updated version
View SpaceAce-subSpaces.jsx
const handleRemove = ({ merge, space }, itemToBeRemoved) => {
merge({
items: space.items.filter(item => item !== itemToBeRemoved)
});
};
export const ShoppingCart = ({ space }) => (
<div>
<ul>
{space.items.map(item => (
View SpaceAce-customActions.jsx
import { fetchPizza } from '../apiCalls';
/*
handleSubmit is a custom action.
The first parameter is provided by SpaceAce.
The remaining parameters are passed-through
which in this case consists of React's event object
*/
const handleSubmit = async ({ space, merge }, event) => {
event.preventDefault();
View SpaceAce-handler.jsx
export const PizzaForm = ({ space }) => (
<form>
<label>Name</label>
<input
type="text"
value={space.name || ''}
onChange={space('name')} // Whenever user types, `space.name` is updated
/>
<label>Do you like pizza?</label>
<input
View SpaceAce-subscribe.js
import Space, { subscribe } from 'spaceace';
const space = new Space({
appName: "SpaceAce demoe",
user: { name: 'Jon', level: 9001 }
});
subscribe(space, ({ newSpace, causedBy }) => {
console.log(`State updated by ${causedBy}`);
ReactDOM.render(