Skip to content

Instantly share code, notes, and snippets.

View h-jennings's full-sized avatar

Hunter Jennings h-jennings

View GitHub Profile
const text = css({
color: '$gray12',
variants: {
size: {
// corrective letter-spacing and text-indent styles
// should go here too, because they're determined by font-size.
// You could also put line-height here too, if your devs prefer
// a default line-height that works in some cases. But understand
// that line-height is also a function of line-length, so the
@sseagull
sseagull / Storybook with Stitches.md
Last active May 17, 2023 11:40
Stitches + Storybook `css` prop type definition clash fix

Using Stitches with Storybook

The setup for storybook is the same as their docs. Once you're repo is set up (Im using Typescript) and you have Stitches imported and set up (as per the stitches docs), the next step is to install Storybook.

I went with their npx setup: npx sb init (note: since my project was already set up with React/TS this command detected everything it needed to know, so there was no interactive prompt for me)

When using a styled stitches component everything will work as expected:

export const Button = styled('button', {
@jamiebuilds
jamiebuilds / tradeoffs-in-value-derived-types-in-typescript.md
Last active December 16, 2022 17:21
Value-derived types in TypeScript are super powerful, but you should be thoughtful in how/when you use them

Tradeoffs in value-derived types in TypeScript

Many of the more "advanced" typescript features can be used for creating "value-derived" types.

At its simplest form:

let vehicle = { name: "Van", wheels: 4 }
@nataliemarleny
nataliemarleny / .gitconfig
Last active October 19, 2021 09:50
Niche git commands which I won't remember aliases for
[user]
name = <ur-name>
email = <ur-email>
[core]
editor = vim -f
excludesfile = /Users/<name-of-mac>/.gitignore_global
[color]
ui = true
[alias]
lg = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cd) %C(bold blue)<%an>%Creset' --abbrev-commit
@LayZeeDK
LayZeeDK / angular-cli-node-js-typescript-rxjs-compatiblity-matrix.csv
Last active March 30, 2025 18:58
Angular CLI, Angular, Node.js, TypeScript, and RxJS version compatibility matrix. Officially part of the Angular documentation as of 2023-04-19 https://angular.io/guide/versions
Angular CLI version Angular version Node.js version TypeScript version RxJS version
~16.0.0 ~16.0.0 ^16.13.0 || ^18.10.0 >=4.9.5 <5.1.0 ^6.5.5 || ^7.4.0
~15.2.0 ~15.2.0 ^14.20.0 || ^16.13.0 || ^18.10.0 >=4.8.4 <5.0.0 ^6.5.5 || ^7.4.0
~15.1.0 ~15.1.0 ^14.20.0 || ^16.13.0 || ^18.10.0 >=4.8.4 <5.0.0 ^6.5.5 || ^7.4.0
~15.0.5 ~15.0.4 ^14.20.0 || ^16.13.0 || ^18.10.0 ~4.8.4 ^6.5.5 || ^7.4.0
~14.3.0 ~14.3.0 ^14.15.0 || ^16.10.0 >=4.6.4 <4.9.0 ^6.5.5 || ^7.4.0
~14.2.0 ~14.2.0 ^14.15.0 || ^16.10.0 >=4.6.4 <4.9.0 ^6.5.5 || ^7.4.0
~14.1.3 ~14.1.3 ^14.15.0 || ^16.10.0 >=4.6.4 <4.8.0 ^6.5.5 || ^7.4.0
~14.0.7 ~14.0.7 ^14.15.0 || ^16.10.0 >=4.6.4 <4.8.0 ^6.5.5 || ^7.4.0
~13.3.0 ~13.3.0 ^12.20.2 || ^14.15.0 || ^16.10.0 >=4.4.4 <4.7.0 ^6.5.5 || ^7.4.0
@sarahdayan
sarahdayan / modifiers.scss
Last active November 15, 2024 15:56
Sass Modifiers Mixin
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan
@cuth
cuth / debug-scroll.md
Last active October 18, 2024 08:22
Find the elements that are causing a horizontal scroll. Based on http://css-tricks.com/findingfixing-unintended-body-overflow/

Debug Horizontal Scroll

(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
 if (b.right &gt; w || b.left &lt; 0) {
@staltz
staltz / introrx.md
Last active March 30, 2025 03:46
The introduction to Reactive Programming you've been missing

tmux cheatsheet

As configured in my dotfiles.

start new:

tmux

start new with session name: