Skip to content

Instantly share code, notes, and snippets.

View alexreardon's full-sized avatar

Alex Reardon alexreardon

View GitHub Profile
@alexreardon
alexreardon / how-this-works.md
Created August 7, 2022 00:29
How `this` works in javascript

this binding

  • this is the runtime context of a function.
  • this is determined by the call site
  • the same function can be executed with different this runtime contexts. You can think of this as another arguement to the function
  • Comparison: scopes are generally defined at compile time (exception: eval)
const person = {
 name: 'Alex',
@yanfengliu
yanfengliu / cypressUploadArtifact.yml
Created July 28, 2021 22:47
Cypress GitHub Action to upload artifact
- uses: actions/upload-artifact@v1
if: failure()
with:
name: cypress-screenshots
path: cypress/screenshots
- uses: actions/upload-artifact@v1
if: always()
with:
name: cypress-videos
path: cypress/videos
@slikts
slikts / advanced-memo.md
Last active April 27, 2024 02:40
Advanced memoization and effects in React

nelabs.dev

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

  • Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
  • Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory
@stettix
stettix / things-i-believe.md
Last active July 7, 2024 03:09
Things I believe

Things I believe

This is a collection of the things I believe about software development. I have worked for years building backend and data processing systems, so read the below within that context.

Agree? Disagree? Feel free to let me know at @JanStette. See also my blog at www.janvsmachine.net.

Fundamentals

Keep it simple, stupid. You ain't gonna need it.

@eveporcello
eveporcello / teacher-settings.json
Last active March 25, 2024 01:55
These are the VSCode settings that we use when recording screencast videos 🍿
{
"zenMode.hideLineNumbers": false,
"workbench.colorTheme": "Night Owl",
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
},
"editor.wordBasedSuggestions": false,
"editor.suggestOnTriggerCharacters": false,
@getify
getify / 1.js
Last active September 29, 2021 11:58
experiment: mimicking React's new "useState()" hook for stand-alone functions, including "custom hooks"
"use strict";
[foo,bar] = TNG(foo,bar);
// NOTE: intentionally not TNG(..) wrapping useBaz(), so that it's
// basically like a "custom hook" that can be called only from other
// TNG-wrapped functions
function foo(origX,origY) {
var [x,setX] = useState(origX);
var [y,setY] = useState(origY);
@dwaltrip
dwaltrip / wrapped-react-beautiful-dnd.js
Last active April 24, 2020 02:05
Wrapping react-beautiful-dnd components so that we can pass `onDragEnd` directly to each `Droppable`
import {
DragDropContext as RealDragDropContext,
Droppable as RealDroppable,
Draggable
} from 'react-beautiful-dnd';
import React, { Component } from 'react';
const DroppableManager = {
_onDragEndLookup: {},
@BretFisher
BretFisher / .zshrc
Created July 4, 2018 20:52
my custom oh-my-zsh setup
# this assumes your using oh-my-zsh for maximum zsh-ness
# info and defaults are here:
# https://github.com/robbyrussell/oh-my-zsh/blob/master/templates/zshrc.zsh-template
export LC_ALL="en_US.UTF-8"
export ZSH=/Users/bret/.oh-my-zsh
# custom prompt theme
ZSH_THEME="present" # mine is present, default is robbyrussell, also agnoster, fishy, ys, wild-cherry
COMPLETION_WAITING_DOTS="true"
@gaearon
gaearon / prepack-gentle-intro-1.md
Last active May 3, 2024 12:56
A Gentle Introduction to Prepack, Part 1

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
@Noviny
Noviny / babelTypeDescriptions.md
Last active August 12, 2022 09:46
A list of all babels types with an explanation, and a link to astexplorer with an example

The goal is to have a link to ASTexplorer to demonstrate what each type is. Types have been broken into sections if they are not core parts of javascript (JSX, type annotations, typescript types), however are otherwise in alphabetical order.

WIP - un-added types have a leading ^^^^ while I am working on them.

Important Base Parts

Knowing these will help everywhere

  • identifier A named property, such as a declared variable or object property.
  • blockStatement Anything to be run as part of resolving an expression. (Effectively anything that would go between {} brackets, whether that is in a for statement, or function expression. It will be found as the body property of the expression.