Skip to content

Instantly share code, notes, and snippets.

Avatar

Anibal anaibol

View GitHub Profile
@nandorojo
nandorojo / use-swr-infinite-enhanced.ts
Last active Oct 31, 2022
useSWRInfinite with pagination & typescript safety
View use-swr-infinite-enhanced.ts
import { ConfigInterface, useSWRInfinite } from 'swr'
import { useMemo, useCallback, useRef } from 'react'
import last from 'lodash.last'
import get from 'lodash.get'
type PageKeyMaker<Page, Key extends any[]> = (
index: number,
previousPageData?: Page
/**
* Mutable ref object. Set this to `true` before the request and `false` afterwards if the request is fetching more.
@dan-dr
dan-dr / index.html
Last active Sep 20, 2019
Netlify formData object from value
View index.html
<form>
<input type="text" name="cities[]" /> <!-- for arrays and objects. don't enumerate/propertize in markup. yes i just invented propertize -->
</form>
@saiumesh535
saiumesh535 / asyncawaitwithouttrycatch.js
Last active Feb 19, 2020
async await without try catch
View asyncawaitwithouttrycatch.js
async function getData(){
const a = await someFunction().catch((error)=>console.log(error));
const b = await someOtherFunction().catch((error)=>console.log(error));
if(a && b ) console.log("some result")
}
@alvaropinot
alvaropinot / map-to-object.js
Created Oct 3, 2017
"FUNctional" 😜 Map 🗺 to object 🔑
View map-to-object.js
const obj = { a: 1, c: 3, b: 2 }
// Map from object.
const myMap = new Map(Object.entries(obj))
// Map to Object.
// NOTE: Keys will be cast to strings by `.toString`, so any "complex" key like for example `[1, 2]` will become `1,2`
const newObj = [...myMap.entries()]
.reduce((acc, [key, value]) => (Object.assign(acc, { [key]: value })), {})
@acdlite
acdlite / coordinating-async-react.md
Last active Mar 20, 2022
Demo: Coordinating async React with non-React views
View coordinating-async-react.md

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

@ursm
ursm / len0073.patch
Last active Jan 16, 2022
Fix TrackPoint / touchpad issue on ThinkPad X1 Carbon 5th (Linux 4.12)
View len0073.patch
diff --git a/drivers/input/mouse/synaptics.c b/drivers/input/mouse/synaptics.c
index 16c3046..ca912ce 100644
--- a/drivers/input/mouse/synaptics.c
+++ b/drivers/input/mouse/synaptics.c
@@ -173,6 +173,7 @@ static const char * const smbus_pnp_ids[] = {
"LEN0046", /* X250 */
"LEN004a", /* W541 */
"LEN200f", /* T450s */
+ "LEN0073", /* X1 Carbon 5 (Elantech) */
NULL
@madcoda
madcoda / App.js
Created May 28, 2017
React-router v4 multi layout
View App.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link, Match, Redirect, Switch } from 'react-router-dom'
import OverviewPage from './page/OverviewPage'
import AccountPage from './page/AccountPage'
/*
Layouts, inline define here for demo purpose
you may want to define in another file instead
*/
@wf9a5m75
wf9a5m75 / starbucks_us_locations.json
Last active Jun 24, 2022 — forked from dankohn/starbucks_us_locations.csv
8902 locations of US Starbucks with addresses, latitude, and longitude
View starbucks_us_locations.json
This file has been truncated, but you can view the full file.
[
{
"position": {
"lat": 61.21759217,
"lng": -149.8935557
},
"name": "Starbucks - AK - Anchorage 00001",
"address": "601 West Street_601 West 5th Avenue_Anchorage, Alaska 99501",
"phone": "907-277-2477"
@tkh44
tkh44 / Animation.jsx
Last active Sep 13, 2022
react-router v4 animated with data-driven-motion
View Animation.jsx
import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' // https://github.com/tkh44/data-driven-motion
const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }
const AnimationExample = () => (
<Router>
<div>
<ul>
@AlexisLeon
AlexisLeon / rn.input-numbers.js
Created Jan 15, 2017
TextInput accepts only numbers - React Native
View rn.input-numbers.js
import React, { Component } from 'react';
import { TextInput } from 'react-native';
class Input extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
};
}