Skip to content

Instantly share code, notes, and snippets.

@ben-rogerson
ben-rogerson / App.js
Last active March 29, 2024 07:50
A breakpoint provider that syncs up with your screens in tailwind.config.js. Common use is to fully remove elements from the dom rather than hide them with css.
import React from 'react';
import { useMinScreen } from './minScreen';
const App = () => {
const { min } = useMinScreen();
return (
<>
{min`md` && <div>I'll show at md and up</div>}
{!min`lg` && <div>I'll show at up to lg</div>}
const path = require('path');
const fs = require('fs');
const { Transform } = require('stream');
const csv = require('fast-csv');
class PersistStream extends Transform {
constructor(args) {
super({ objectMode: true, ...(args || {}) });
this.batchSize = 100;
this.batch = [];
@justsml
justsml / fetch-api-examples.md
Last active February 24, 2024 18:05
JavaScript Fetch API Examples
@zspecza
zspecza / amok_browserify_gulpfile.js
Last active November 23, 2021 07:46
Live inject CSS, Javascript & HTML with BrowserSync, Watchify, Amok & Gulp (excuse the messiness, still a WIP)
/*=====================================*\
build tasks
\*=====================================*/
/**
* This gulpfile is optimised for developing
* React.js apps in ES6 through Babel, and is
* designed to live-inject CSS, HTML and even JavaScript
* changes so maintaining state in an application when
* editing code is super easy.
@raineorshine
raineorshine / responsive.css
Last active November 19, 2022 06:08
Cheat Sheet: Responsive Design
@media all and (max-width: 1024px) {...}
@media all and (min-width: 800px) and (max-width: 1024px) {...}
@media not screen and (color) {...}
@media only screen and (orientation: portrait) {...}
@media all and (max-width: 420px) {
section, aside {
float: none;
width: auto;
}