Skip to content

Instantly share code, notes, and snippets.

@levelsio
levelsio / gist:5bc87fd1b1ffbf4a705047bebd9b4790
Last active April 13, 2024 17:00
Secret of Monkey Island: Amsterdam (by @levelsio) or how to create your own ChatGPT image+text-based adventure game
# 2023-11-27 MIT LICENSE
Here's the open source version of my ChatGPT game MonkeyIslandAmsterdam.com.
It's an unofficial image+text-based adventure game edition of Monkey Island in Amsterdam, my home town.
Please use it however you want. It'd be nice to see more ChatGPT-based games appear from this. If you get inspired by it, please link back to my X https://x.com/levelsio or this Gist so more people can do the same!
Send me your ChatGPT text adventure game on X, I'd love to try it!
@knolaust
knolaust / sass-aspect-ratio-with-fallback.scss
Last active January 30, 2024 14:55
Sass Mixin For CSS Aspect-Ratio With Fallback
/**
* Include this Sass mixin for aspect-ratio. Includes fallback
* for browsers that do not support aspect-ratio. This fallback is really not necessary at this point unless
* a specific browser you need to support.
*
* Usage:
* @include aspect-ratio(16,9);
* creates a 16x9 container using aspect-ratio for supported browsers with fallback for browsers that do not.
*
* Codepen Example: https://codepen.io/knolaust/pen/KKZwXjv
@swalkinshaw
swalkinshaw / tutorial.md
Last active November 13, 2023 08:40
Designing a GraphQL API
@lelandrichardson
lelandrichardson / ensureShallowPurity.js
Created September 12, 2017 23:00
safer react-redux
/* eslint no-restricted-syntax:0 */
const hasOwnProperty = Object.prototype.hasOwnProperty;
function shallowDifferences(a, b) {
const result = [];
if (a === b) {
return result;
}
@yossorion
yossorion / what-i-wish-id-known-about-equity-before-joining-a-unicorn.md
Last active April 7, 2024 22:55
What I Wish I'd Known About Equity Before Joining A Unicorn

What I Wish I'd Known About Equity Before Joining A Unicorn

Disclaimer: This piece is written anonymously. The names of a few particular companies are mentioned, but as common examples only.

This is a short write-up on things that I wish I'd known and considered before joining a private company (aka startup, aka unicorn in some cases). I'm not trying to make the case that you should never join a private company, but the power imbalance between founder and employee is extreme, and that potential candidates would

@bvaughn
bvaughn / react-lifecycle-cheatsheet.md
Last active March 2, 2023 13:29
React lifecycle cheatsheet

React lifecycle cheatsheet

Method Side effects1 State updates2 Example uses
Mounting
componentWillMount Constructor equivalent for createClass
render Create and return element(s)
componentDidMount DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps Update state based on changed props

This is a proposal for a lightning talk at the Reactive 2016 conference. If you like this, star the Gist.


Thinking metrics on React applications

In regular websites, it is common to send multiple events to track user clicks. Single Page Applications change the way you look at metrics. This is a talk about a simple pattern we created at Globo.com to manage a metrics layer for http://globoplay.globo.com. The talk will cover how to track user flow using Google Analytics and other services. We solved the challenge of tying metrics and components, keeping information across pages and having global data. Also some React, React Router and React Side Effects concepts like context, higher order components, history state will be covered.

@anvk
anvk / promises_reduce.js
Last active October 11, 2023 09:02
Sequential execution of Promises using reduce()
function asyncFunc(e) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(e), e * 1000);
});
}
const arr = [1, 2, 3];
let final = [];
function workMyCollection(arr) {
@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
});

Goals:

  1. Provide smooth upgrade path
  2. Avoid npm install trolling
  3. Shed backwards compatibility quickly

Assumptions:

  1. Most package.json entries use ^ like this: ^1.0.0
  2. Many app test suites fail with console warnings, and therefore assume