Skip to content

Instantly share code, notes, and snippets.

Avatar
🏕️
I’m trying to do my job, please respect my time and attention.

Brandon Pittman brandonpittman

🏕️
I’m trying to do my job, please respect my time and attention.
View GitHub Profile
@brandonpittman
brandonpittman / use-presence-with-tailwind.tsx
Last active May 17, 2022
`usePresence` with Tailwind animation utilities
View use-presence-with-tailwind.tsx
import { AnimatePresence, usePresence } from "framer-motion";
import { classNames } from "~/lib/utils/class-names";
import { useCounter } from "@kyleshevlin/use-common";
import { useCallback } from "react";
const Box = ({ count }: { count: number }) => {
const [isPresent, safeToRemove] = usePresence();
const onAnimationEnd = useCallback(() => {
if (!isPresent) safeToRemove();
@na2hiro
na2hiro / Remix-request-cheatsheet.md
Last active May 15, 2022
Remix request cheatsheet
View Remix-request-cheatsheet.md
View pending-link.js
View session-stuff.ts
// root.tsx
import { getUserSession, requireUser, logout } from "~/session";
export function loader({ request }) {
// use case: know if the user is logged in, no redirect to /login
let userSession = await getUserSession(request);
let isAuthenticated = userSession.has("userId");
return { isAuthenticated };
}
@Jlevyd15
Jlevyd15 / stacked_prs.md
Created Nov 17, 2019
Stacked PRs with Git and Github
View stacked_prs.md

How to create a stacked PR with git and Github 📚

Create a feature branch from the master brach

  • from the master branch create a feature branch called feat1
  • git checkout master -> git checkout -b feat1

Make some changes and commit them

  • git add .
  • git commit
View htm-ssr-direct.js
const express = require('express');
const htm = require('htm');
const vhtml = require('vhtml');
// create an html`` tag function for vhtml:
const html = htm.bind(vhtml);
const App = (props) => html`
<div class="app">
<h1>This is an app</h1>
View everything-i-know-about-routing.md

Everything I Know About UI Routing

Definitions

  1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
    1. pathname - The "file/directory" portion of the URL, like invoices/123
    2. search - The stuff after ? in a URL like /assignments?showGrades=1.
    3. query - A parsed version of search, usually an object but not a standard browser feature.
    4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
  2. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.
@binoclard
binoclard / Statamic+Tailwind+PurgeCSS.md
Last active Nov 15, 2021
Fresh Statamic install, with Tailwind CSS and PurgeCSS configured
View Statamic+Tailwind+PurgeCSS.md

Fresh Statamic install, with Tailwind CSS and PurgeCSS configured

In 5 minutes, you’ll have a brand new clean Statamic site, with Tailwind CSS and PurgeCSS configured.

It assumes that you work on a Mac, you put your site in ~/sites and you use Laravel Valet.

All the credit go to Jack McDade and philipboomy, from whom I stole and adapt the build scripts and the PurgeCSS config, because I have really absolutely no idea what I am doing with all this Terminal Black Magic ™; this is only a detailed write up of the process.

You'll need Yarn and Node. You can install them both in one command via Brew: brew install yarn

@jorgebucaran
jorgebucaran / index.html
Last active Jul 14, 2020
Getting started with Hyperapp
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { h, text, app } from "https://unpkg.com/hyperapp"
app({
init: () => 0,
view: state =>
h("main", {}, [