Skip to content

Instantly share code, notes, and snippets.

View ben-rogerson's full-sized avatar

Ben Rogerson ben-rogerson

504 followers · 54 following
View GitHub Profile
@ben-rogerson
ben-rogerson / image.html
Created October 7, 2019 19:39
Picture loading: Fallback sources
<picture>
<source
srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
/some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
/some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
/some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
sizes="100vw"
type="image/webp"
/>
<source
@ben-rogerson
ben-rogerson / readme.md
Last active April 29, 2021 12:53
Using Emotion Styled Components with Tailwind
We couldn’t find that file to show.
@ben-rogerson
ben-rogerson / babel-plugin-macros.config.js
Last active April 18, 2020 06:50
Gatsby recipe > Twin + Emotion
module.exports = {
twin: {
styled: 'styled-components'
}
}
@ben-rogerson
ben-rogerson / App.js
Last active August 20, 2024 09:19
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>}
@ben-rogerson
ben-rogerson / twin.code-snippets
Last active June 16, 2023 02:22
Twin Code Snippits for use in vscode - Shortcuts that make working with Twin a little easier
{
// Snippits that make working with Twin a little easier
// https://github.com/ben-rogerson/twin.macro
"Add react import": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "react",
"body": "import React from 'react'",
"description": "Add react import"
},
"Add twin imports": {