Skip to content

Instantly share code, notes, and snippets.

View jordienr's full-sized avatar
🏝️
mallorca

Jordi Enric jordienr

🏝️
mallorca
View GitHub Profile
@gragland
gragland / use-optimistic-mutation-example.ts
Last active July 1, 2024 07:39
useOptimisticMutation for React Query. Optimistically update data in multiple locations with rollback on error.
import axios from 'axios'
import { useOptimisticMutation } from "./useOptimisticMutation.ts"
type Response = boolean
type Error = unknown
type MutationVariables = {itemId: string}
type Items = {id: string; name: string}[]
type Likes = {itemId: string}[]
type History = {type: string}[]
@jordienr
jordienr / tailwind.config.ts
Created July 15, 2023 09:10
Tailwind SVG Grid Background
// Remember to install mini-svg-data-uri
// Follow me on twitter for memes @jordienr
import { type Config } from "tailwindcss";
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
const svgToDataUri = require("mini-svg-data-uri");
export default {
@jordienr
jordienr / Gradient.js
Created September 12, 2021 00:23
Stripe Mesh Gradient WebGL
/*
* Stripe WebGl Gradient Animation
* All Credits to Stripe.com
* ScrollObserver functionality to disable animation when not scrolled into view has been disabled and
* commented out for now.
* https://kevinhufnagl.com
*/
@csswizardry
csswizardry / nesting.css
Created February 25, 2021 16:49
DOM Depth Visualiser
/**
* Tier 1 – Dotted
*/
* { outline: 2px dotted purple; }
* * { outline: 2px dotted blue; }
* * * { outline: 2px dotted green; }
* * * * { outline: 2px dotted yellow; }
* * * * * { outline: 2px dotted orange; }
* * * * * * { outline: 2px dotted red; }
@Electroid
Electroid / rollup.config.js
Created February 12, 2021 23:45
Rollup config for ESM Cloudflare Workers
import commonjs from '@rollup/plugin-commonjs'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import json from '@rollup/plugin-json'
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'
import copyAssets from 'rollup-plugin-copy-imported-assets'
import nodePolyfills from 'rollup-plugin-node-polyfills'
import nodeGlobals from 'rollup-plugin-node-globals'
// https://rollupjs.org/guide/en/#configuration-files
export default {
@jordienr
jordienr / Tailwind 2.0 SCSS Color Variables.scss
Last active March 2, 2021 15:29
Tailwind 2.0 Colors as SCSS variables
// Rose
$rose-50: #fff1f2;
$rose-100: #ffe4e6;
$rose-200: #fecdd3;
$rose-300: #fda4af;
$rose-400: #fb7185;
$rose-500: #f43f5e;
$rose-600: #e11d48;
$rose-700: #be123c;
@slava-vishnyakov
slava-vishnyakov / readme.md
Last active November 4, 2024 09:03
How to upload images with TipTap editor
  1. Create a file Image.js from the source below (it is almost a copy of Image.js from tiptap-extensions except that it has a constructor that accepts uploadFunc (function to be called with image being uploaded) and additional logic if(upload) { ... } else { ... previous base64 logic .. } in the new Plugin section.
import {Node, Plugin} from 'tiptap'
import {nodeInputRule} from 'tiptap-commands'

/**
 * Matches following attributes in Markdown-typed image: [, alt, src, title]
 *
@DavidWells
DavidWells / reset.css
Last active November 13, 2024 09:16 — forked from karbassi/reset.css
CSS reset. Follow me on the twitters for more tips: https://twitter.com/davidwells
/* http://meyerweb.com/eric/tools/css/reset/
v2.0-modified | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
@janpipek
janpipek / input-storage.js
Created June 19, 2013 09:56
Auto-store state of input elements in localStorage (jQuery)
/**
* Simple jQuery utility for saving element values in localStorage.
*
* Usage:
* - Add class "store-state" to the element you want to save.
* - Add id attribute to the element or specify your own storage key (attribute data-storage-name)
* - Add attribute "data-storage-name" to the element if you
* want to control under which name the value will be stored
* - Add attribute "data-storage-noload" to suppress loading (will be stored though, it is
* useful, when HTML-specified value is temporarily more important).