Skip to content

Instantly share code, notes, and snippets.

View josephrexme's full-sized avatar
:octocat:
Training wolves and dragons

Joseph Rex josephrexme

:octocat:
Training wolves and dragons
View GitHub Profile

Frankie Bagnardi aka GreenJello has passed away on Sept 13, 2021 at age 27

Many of you in this channel know of him because he spent much of his time helping others, his death is a great blow to the community

He lost his battle with depression

Rest In Peace Frankie, we will never forget you.

If you are in a dark place, please reach out to chanops or the ones closest to you

@sudkumar
sudkumar / frontmatter.js
Last active November 3, 2024 17:56
MDX Remark plugin to handle frontmatter
// helps us in parsing the frontmatter from text content
const matter = require('gray-matter')
// helps us safely stringigy the frontmatter as a json object
const stringifyObject = require('stringify-object')
// helps us in getting the reading time for a given text
const readingTime = require('reading-time')
// please make sure you have installed these dependencies
// before proceeding further, or remove the require statements
// that you don't use
@astoilkov
astoilkov / readme.md
Last active November 16, 2024 12:52
Async Operations with useReducer Hook

Async Operations with useReducer Hook

9 March, 2019

We were discussing with @erusev what we can do with async operation when using useReducer() in our application. Our app is simple and we don't want to use a state management library. All our requirements are satisfied with using one root useReducer(). The problem we are facing and don't know how to solve is async operations.

In a discussion with Dan Abramov he recommends Solution 3 but points out that things are fresh with hooks and there could be better ways of handling the problem.

Problem

// The reducer function looks at each action that comes in
// and based on the type generates a new state based on the
// previous state and any additional data the action carried
const reducer = (state, action) => {
switch (action.type) {
case "COUNT_INCREMENT":
return {
...state,
count: state.count + 1
};
@threepointone
threepointone / for-snook.md
Last active December 3, 2024 21:48
For Snook

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

@davidkpiano
davidkpiano / css-state-machines.md
Last active June 15, 2023 15:26
Article for creating CSS State Machines

As the number of different possible states and transitions between states in a user interface grows, managing styles and animations can quickly become complicated. Even a simple login form has many different "user flows":

https://codepen.io/davidkpiano/pen/WKvPBP

State machines are an excellent pattern for managing state transitions in user interfaces in an intuitive, declarative way. We've been using them a lot on the Keyframers as a way to simplify otherwise complex animations and user flows, like the one above.

So, what is a state machine? Sounds technical, right? It’s actually more simple and intuitive than you might think. (Don’t look at Wikipedia just yet… trust me.)

Let’s approach this from an animation perspective. Suppose you’re creating a loading animation, which can be in only one of four states at any given time:

@tomhodgins
tomhodgins / cibc2csv.js
Last active December 4, 2021 21:24
Paste this function into your JS console on CIBC's online banking website to scrape your account ledger into a CSV formatted file the browser can save that can be imported into Excel
function cibc2csv() {
var table = document.querySelector('table.smart-account')
var csv = ''
var head = []
var row = []
// read header cells
table.querySelectorAll('thead th').forEach(th => {
head.push(`${trim(th.textContent)}`)
})
@zkat
zkat / index.js
Last active September 26, 2024 10:33
npx is cool
#!/usr/bin/env node
console.log('yay gist')
// Lazy (=on-demand) zip()
for (const [i, x] of zip(naturalNumbers(), naturalNumbers())) {
console.log(i, x);
if (i >= 2) break;
}
// Output:
// 0 0
// 1 1
// 2 2
@cecilemuller
cecilemuller / readme.md
Last active March 14, 2022 17:53
Using Three.js "examples" (e.g. OrbitControls) with Webpack 2

Javascript files from the examples folder (such as OrbitControls) are not CommonJS or ES Modules, but they can still be used in Webpack bundles:

In package.json:

"dependencies": {
	"three": "0.84.0",
	"webpack": "2.4.1"
}