Skip to content

Instantly share code, notes, and snippets.

@JulienPradet
JulienPradet / Component.tsx
Created May 17, 2024 12:04
createStateActions as a simpler alternative to useReducer
// Example of a component using createStateActions
function Component() {
const [opened, setState] = useState(false);
const actions = createStateActions(setState, {
set: (currentState, value: boolean) => value,
open: () => true,
close: () => false,
toggle: currentState => !currentState,
});
@JulienPradet
JulienPradet / Image Size Stats Snippet
Last active December 18, 2023 11:25
Snippet that gathers stats to easily plot the different sizes of an image based on the browser's width
// If it's the first time you're using a Snippet in Google Chrome
// 1. Open your Dev Tools
// 2. Hit "Ctrl + Alt + P"
// 3. Run the command "Create new snippet". This will open the Sources tab where you can c/c the code of this gist
// 4. Hit "Ctrl + Enter"
// 5. Go to the "Console" tab of your Dev Tools and follow the instructions displayed in the Console
//
// This snippet is inspired by https://developers.front-commerce.com/docs/2.x/advanced/production-ready/media-middleware#a-method-to-determine-image-sizes
let images = [];
I am attesting that this GitHub handle JulienPradet is linked to the Tezos account tz1h7mNDPuxa57f4UD5nqFX9ifnvYxPQ8qmj for tzprofiles
sig:edsigtknd8KTQjCttpKWQ9VbEKuruycsm8Bshq3YAmYtPdYLTjwt5MY5dx2mMUAhqZrVH2PJpSLwEjXEYuLrh96giGywUdW3Nxg
@JulienPradet
JulienPradet / Component.svelte
Last active July 22, 2024 07:04
How to use `use` directive to trap focus in Svelte
<script>
import {trapFocus} from "./trapFocus";
</script>
<div use:trapFocus>
<button>Hi!</button>
<button>Second button</button>
</div>
@JulienPradet
JulienPradet / example.js
Last active November 28, 2016 09:39
Build a webpack bundle from a stream
import webpack from 'webpack'
import {Readable} from 'stream'
const entryStream = new Readable()
entryStream.push(`
import { configure } from '@kadira/storybook';
function loadStories() {
require('./story1.js');
require('./story2.js');
@JulienPradet
JulienPradet / usage.js
Created September 13, 2016 17:33
React Router v4 : Declaring matches without polluting the actual rendering.
const BasicExample = () => (
<Router>
<div>
<Menu />
<RoutedContent />
</div>
</Router>
)
const Menu = () => (