Skip to content

Instantly share code, notes, and snippets.

Avatar
:octocat:
Training wolves and dragons

Joseph Rex josephrexme

:octocat:
Training wolves and dragons
View GitHub Profile
@astoilkov
astoilkov / readme.md
Last active Aug 4, 2020
Async Operations with useReducer Hook
View readme.md

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

View Redux_explanation.js
// 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
};
View for-snook.md

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 Jul 24, 2020
Article for creating CSS State Machines
View css-state-machines.md

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 Nov 30, 2017
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
View cibc2csv.js
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 Jul 29, 2020
npx is cool
View index.js
#!/usr/bin/env node
console.log('yay gist')
View zip-vs-array-from.js
// 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 Jun 6, 2020
Using Three.js "examples" (e.g. OrbitControls) with Webpack 2
View readme.md

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"
}
View CSS+_techniques.md

This is a collection of responsive techniques made possible by EQCSS that apply styles in situations CSS can't quite reach today without a little help from JavaScript.

EQCSS extends CSS syntax with the following ideas:

1) What if CSS could set a scope for a selector like a @media query for an element

2) What if CSS could add a block of CSS styles to the page when that selector is true

3) What if CSS could add responsive conditions to that selector

@csswizardry
csswizardry / README.md
Last active Aug 6, 2020
Vim without NERD tree or CtrlP
View README.md

Vim without NERD tree or CtrlP

I used to use NERD tree for quite a while, then switched to CtrlP for something a little more lightweight. My setup now includes zero file browser or tree view, and instead uses native Vim fuzzy search and auto-directory switching.

Fuzzy Search

There is a super sweet feature in Vim whereby you can fuzzy find your files using **/*, e.g.:

:vs **/*<partial file name><Tab>
You can’t perform that action at this time.