Skip to content

Instantly share code, notes, and snippets.

View 0livare's full-sized avatar

Zach Olivare 0livare

View GitHub Profile
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active June 23, 2024 12:06
Expose Tailwind colors as CSS custom properties (variables)

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

  • You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
  • You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

@gaearon
gaearon / uselayouteffect-ssr.md
Last active July 7, 2024 18:47
useLayoutEffect and server rendering

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

Algorithmic layouts

You are looking at the most important, and most abundant thing on the web. You can't see it, unfortunately, because it's very small… aaaaand it's invisible — so having a magnifying glass doesn't really help here. But still.

I'm talking, of course, about U+0020; not to be confused with the band U2, who are just as ubiquitous, but far less useful.

This unicode point, representing the humble space character, is between every word, in every run of text, on every page of the web. And it has a very special characteristic: it's not sticky like glue. If two words are neighbors but there's not enough room for both of them, the space will free the second word to wrap around and start a new line.

Before getting into flexible containers, viewport meta tags, and @media breakpoints this humble character is what makes the web fundamentally 'responsive'. That is: able to change the layout of its content to suit different devices, contexts, and settings. Browser text does this automa

@milankorsos
milankorsos / redux-actions.ts
Last active November 10, 2022 10:58
Correct TypeScript typing example for Redux Thunk actions
import {Action, ActionCreator, Dispatch} from 'redux';
import {ThunkAction} from 'redux-thunk';
// Redux action
const reduxAction: ActionCreator<Action> = (text: string) => {
return {
type: SET_TEXT,
text
};
};
@bendc
bendc / random-color.js
Last active February 7, 2024 03:19
Generate nice random colors
const randomColor = (() => {
"use strict";
const randomInt = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
return () => {
var h = randomInt(0, 360);
var s = randomInt(42, 98);
@miki725
miki725 / .bash_prompt.sh
Last active June 25, 2024 08:57
Custom bash prompt which displays: (virtualenv) user:/path (git-branch)
#!/bin/bash
#
# DESCRIPTION:
#
# Set the bash prompt according to:
# * the active virtualenv
# * the branch of the current git/mercurial repository
# * the return value of the previous command
# * the fact you just came from Windows and are used to having newlines in
# your prompts.
@l15n
l15n / git-branches-by-commit-date.sh
Created July 13, 2012 08:47 — forked from jasonrudolph/git-branches-by-commit-date.sh
List remote Git branches and the last commit's author and author date for each branch. Sort by most recent commit's author date.
# Credit http://stackoverflow.com/a/2514279
for branch in `git branch -r | grep -v HEAD`;do echo -e `git show --format="%ai %ar by %an" $branch | head -n 1` \\t$branch; done | sort -r
@jasonrudolph
jasonrudolph / git-branches-by-commit-date.sh
Created February 12, 2012 20:40
List remote Git branches and the last commit date for each branch. Sort by most recent commit date.
# Credit http://stackoverflow.com/a/2514279
for branch in `git branch -r | grep -v HEAD`;do echo -e `git show --format="%ci %cr" $branch | head -n 1` \\t$branch; done | sort -r