Skip to content

Instantly share code, notes, and snippets.

View flexbox's full-sized avatar

David Leuliette flexbox

View GitHub Profile
@BalogunofAfrica
BalogunofAfrica / list-renderer.tsx
Created March 31, 2023 10:37
Simple API for using FlashList as Scrollview
import { FlashList, FlashListProps } from "@shopify/flash-list";
import React, { forwardRef, ReactElement } from "react";
type ListProps<T> = Omit<FlashListProps<T>, "children"> & { as?: "list" };
type ScrollViewProps<T> = Omit<
FlashListProps<T>,
"children" | "data" | "renderItem"
> & {
as?: "scroll-view";
children: React.ReactNode | React.ReactNode[];
import _ from 'lodash'
import qs from 'qs'
// @see https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/specify-width-&-height
const CONTENTFUL_IMAGE_MAX_SIZE = 4000
const isImage = image =>
_.includes(
[`image/jpeg`, `image/jpg`, `image/png`, `image/webp`, `image/gif`],
_.get(image, `file.contentType`)
)
@dabit3
dabit3 / datastore.md
Last active December 10, 2023 03:52
Building offline apps with Amplify DataStore

Building offline apps with Amplify DataStore

To view and deploy the app covered in this chapter, check out this repo.

So far in this book we've worked with both REST APIs and GraphQL APIs. When working with the GraphQL APIs so far, we've used the API class to directly call mutations and queries against the API.

Amplify also supports another type of API for interacting with AppSync, Amplify DataStore. DataStore has a different approach than a traditional GraphQL API.

Instead of interacting with the GraphQL API itself using queries and mutations, DataStore introduces a client-side SDK that persists the data locally using the local storage engine of the platform you are working with (i.e. IndexDB for web, SQLLite for native iOS and Android). DataStore then automatically syncs the local data to the GraphQL backend for you as updates are made both locally and remotely.

@slorber
slorber / react-navigation-tree.jsx
Last active August 13, 2022 19:17
react-navigation-tree.jsx
const App = createAppContainer(
createStack({
LoggedSwitch: createSwitch({
// When user is authenticated
LoggedIn: createStack({
// The logged in root is generally a tab or drawer navigator
LoggedInRoot: createTabsOrDrawer({
import React from "react";
import { Link } from "react-router-dom";
export function createResource(getPromise) {
let cache = {};
let inflight = {};
let errors = {};
function load(key) {
inflight[key] = getPromise(key)
@horacioh
horacioh / gatsby-config.js
Created November 20, 2019 21:59
Gatsby config: PostCSS, Tailwind, Emotion, Prismic, Google Analytics, Manifest & Offline
/* eslint-disable jsx-a11y/rule-name */
const path = require("path")
require("dotenv").config({
path: `../.env.${process.env.NODE_ENV}`,
})
module.exports = {
siteMetadata: {

MobX - The Journey — Michel Weststrate

MobX [mob-ex] – reactive updates via subscriptions.

How to run an open-source library

  • people do not inspect your source code seriously
  • people are not inspired by your ideas and solutions as you are
  • project without a critical mass of users does not look very attractive
@nightire
nightire / debug_ember_app_in_vscode.md
Created May 17, 2018 11:21
How to debug an ember application with VS Code

Step 1: Launch Google Chrome with Remote Debugging support

  • windows: <path to chrome>/chrome.exe --remote-debugging-port=9222
  • macOS: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
  • linux: google-chrome --remote-debugging-port=9222

Step 2: Install "Debugger for Chrome" extension

Step 3: Setup your application

@lovekaizen
lovekaizen / cloudSettings
Last active November 9, 2018 16:23
VSCode Settings
{"lastUpload":"2018-11-09T16:23:36.439Z","extensionVersion":"v3.2.0"}
new MutationObserver(mutation => {
for (let lemming of document.querySelectorAll('img[alt="lemming tombant"]')) {
lemming.dispatchEvent(new Event('mouseover', { bubbles: true }));
}
}).observe(document, {childList: true, subtree: true});