Skip to content

Instantly share code, notes, and snippets.

Idea: Flat file system for file-based routing

Personally I've never liked how tools like Remix or NextJS have mapped a nested file system to routes. Simple things like "I want to put this component in its own file" become annoying tasks.

I've always been a fan of "flatter" file systems, my files often look like this:

/App/
import gsap from 'gsap'
import { evt, utils } from '@/core'
const { qs, qsa, rect } = utils
export default function () {
const el = qs('.js-clip-menu')
const mask = qs('.js-clip-menu-mask', el)
const items = qsa('.js-clip-menu-link', el)
@martinlaxenaire
martinlaxenaire / checkPerf.js
Last active February 7, 2024 10:37
A little function that performs a CPU performance check, based on a similar piece of code orriginally made by Baptise Briel
checkPerf() {
// performance test based on cpu performance
// higher score means worse performance
// based on Baptiste Briel's work: http://awams.bbriel.me/27
let perf = 0;
const start = (performance || Date).now();
let array = [];
for(let i = 0; i < 20000; i++) {
array = Math.pow(Math.sin(Math.random()), 2);
@jakewhiteley
jakewhiteley / FocusManager.js
Last active February 4, 2021 09:58
A class for allowing mobile focus on elements during hashchange
import E from './E'
class FocusManager {
/**
* Call this method to boot up.
*/
static init() {
if (document.location.hash) {
FocusManager.focus(document.getElementById(window.location.hash.replace('#', '')), true)
}
////////////////////////////////////////////////////////////////////////////////
// Create a directory called "pages" next to
// this file, put markdown files in there, and
// then run:
//
// ```
// $ node build.mjs
// ```
//
// Then deploy the "build" directory somewhere.
@ayamflow
ayamflow / update.js
Created June 20, 2018 23:21
Threejs - Rendering 2 scenes on top of each other without breaking render targets
// Need to toggle the autoClear flag to avoid breaking rendering to RenderTarget
function update(dt) {
renderer.render(scene, camera);
renderer.autoClear = false;
renderer.clearDepth();
renderer.render(orthoScene, orthoCamera);
renderer.autoClear = true;
}
@bjoerge
bjoerge / translate.js
Last active April 21, 2021 23:01
Translate all locale strings with missing translations in a Sanity dataset - https://sanity.io
/* eslint-disable no-console */
import client from 'part:@sanity/base/client'
import reduce from 'json-reduce'
// see https://github.com/sanity-io/sanity/blob/next/packages/example-studio/schemas/languages.js for an example
import {SUPPORTED_LANGUAGES} from '../schemas/languages'
import Translate from '@google-cloud/translate'
const translateAPI = new Translate({
@ayamflow
ayamflow / numbers.css
Created February 15, 2018 18:06
Prevent animated counters numbers to shift
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
@baptistebriel
baptistebriel / gist:29e761fbc7cc5923cf6b99444a2935c4
Created August 9, 2017 17:44
compress mp4 video using ffmpeg
// http://ericholsinger.com/install-ffmpeg-on-a-mac
ffmpeg -i input.mp4 -vcodec h264 -acodec mp3 output.mp4
@mxstbr
mxstbr / Component.js
Last active August 24, 2021 20:26
styled-components ❤ tachyons
// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.
// 1. Use .attrs to define classNames that should always be applied to a styled component
// Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
// See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
className: 'bw0-l',
})`