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
            
          
              2 forks
            
          
              4 comments
            
          
              30 stars
            
          
                na2hiro
                / Remix-request-cheatsheet.md
            
            
              Last active
              March 18, 2024 02:42
            
              
                Remix request cheatsheet
              
          
    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
            
          
              2 forks
            
          
              0 comments
            
          
              4 stars
            
          
                Jlevyd15
                / stacked_prs.md
            
            
              Created
              November 17, 2019 17:58
            
              
                Stacked PRs with Git and Github
              
          
    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
            
          
              33 forks
            
          
              9 comments
            
          
              325 stars
            
          
                ryanflorence
                / everything-i-know-about-routing.md
            
            
              Last active
              April 4, 2024 19:06
            
          
    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
              November 15, 2021 22:19
            
              
                Fresh Statamic install, with Tailwind CSS and PurgeCSS configured
              
          
    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
            
          
              13 forks
            
          
              11 comments
            
          
              50 stars
            
          
                trusktr
                / image-grid.md
            
            
              Last active
              May 1, 2024 19:59
            
              
                Image grid in Markdown
              
          
  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", {}, [