Brandon Pittman brandonpittman

## 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();

## Remix-request-cheatsheet.md

      
              1 file
            
          
              1 fork
            
          
              4 comments
            
          
              21 stars
            
          
                na2hiro
                / Remix-request-cheatsheet.md
            
            
              Last active May 15, 2022
            
              
                Remix request cheatsheet
              
          
      View Remix-request-cheatsheet.md
  
      
    Remix request cheatsheet


Navigates?
declarative?
Makes GET, triggers loader
Makes POST, triggers action
No requests


navigates
declarative
<Link to="">
<Form method="get">
<Form method="post">
<Link to="#...">


navigates
imperative
navigate()
setSearchParams()
submit()
navigate("#")


stays
declarative
<fetcher.Form method="get">
<fetcher.Form method="post">
(doesn't make sense)


s


## pending-link.js
function useIsPendingPathname(to) {
  let { location } = useTransition();
  let { pathname } = useResolvedPath(to);
  return location?.pathname === pathname;
}

function useIsSlowTransition(ms = 300) {
  let transition = useTransition();
  let [isSlow, setIsSlow] = useState(false);

## 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 };
}

## stacked_prs.md

      
              1 file
            
          
              1 fork
            
          
              0 comments
            
          
              2 stars
            
          
                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


## 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>

## everything-i-know-about-routing.md

      
              1 file
            
          
              28 forks
            
          
              9 comments
            
          
              312 stars
            
          
                ryanflorence
                / everything-i-know-about-routing.md
            
            
              Last active May 14, 2022
            
          
      View everything-i-know-about-routing.md
  
      
    Everything I Know About UI Routing
Definitions

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

pathname - The "file/directory" portion of the URL, like invoices/123
search - The stuff after ? in a URL like /assignments?showGrades=1.
query - A parsed version of search, usually an object but not a standard browser feature.
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.


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.


## Statamic+Tailwind+PurgeCSS.md

      
              1 file
            
          
              4 forks
            
          
              6 comments
            
          
              20 stars
            
          
                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

  
## image-grid.md

      
              1 file
            
          
              11 forks
            
          
              11 comments
            
          
              36 stars
            
          
                trusktr
                / image-grid.md
            
            
              Last active May 3, 2022
            
              
                Image grid in Markdown
              
          
      View image-grid.md
  
      
  blah


## 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", {}, [
	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();
Navigates?	declarative?	Makes GET, triggers loader	Makes POST, triggers action	No requests
navigates	declarative	`<Link to="">` `<Form method="get">`	`<Form method="post">`	`<Link to="#...">`
navigates	imperative	`navigate()` `setSearchParams()`	`submit()`	`navigate("#")`
stays	declarative	`<fetcher.Form method="get">`	`<fetcher.Form method="post">`	(doesn't make sense)
s
	function useIsPendingPathname(to) {
	let { location } = useTransition();
	let { pathname } = useResolvedPath(to);
	return location?.pathname === pathname;
	}

	function useIsSlowTransition(ms = 300) {
	let transition = useTransition();
	let [isSlow, setIsSlow] = useState(false);
	// 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 };
	}
	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>
	<!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", {}, [