chaance

import { useState, useEffect } from "react";
import blogs from "./blogs";
import "./App.css";

// Task:
//  - Update the `useBlogPosts` hook to "fetch" blog posts using the
//    `getBlogPosts` function. It should return blog posts (if we have them), an
//    error (if it exists) and the loading state.
//  - Update the `Blog` component to render each blog post once they have been
//    fetched. Make sure you handle error cases if the fetch fails or if we

chaance

Remix styling roadmap

Up to this point, Remix has taken a hands-off approach to styling with anything other than plain CSS. This made sense in the beginning because we took a very different approach to CSS than most other component-driven frameworks. We want users to actually understand how CSS actually makes it to the page, and following the path of other frameworks means introducing some magic that obscures that.

That being said, it's not a viable strategy long-term to stay agnostic about

chaance

import * as React from "react";
import { useLocation, useTransition } from "remix";

function RouteAnnouncement({ getTitle = defaultGetTitle }) {
  let location = useLocation();
  let transition = useTransition();
  let liveRegionRef = React.useRef(null);

  React.useEffect(() => {
    liveRegionRef.current = document.createElement("div");

chaance

const DIRECTIVES = [
	/**
	 * If there is currently a local scope or no scope, the :root directive will
	 * revert to using only the top-level scope if one is defined.
	 *
	 * @example
	 *
	 * @simple-scope;
	 *

chaance

html {
	box-sizing: border-box;
	tab-size: 4;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
	  sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

*,

chaance

{
	"name": "blah/blah",
	"type": "wordpress-theme",
	"authors": [
		{
			"name": "Chance Strickland",
			"email": "[email protected]"
		}
	],
	"require": {

chaance

type SomeProps =
  | { action: "START" }
  | { action: "STOP"; time: number }
  | { action: "PAUSE"; time: number; ref: { current: any } };

function useExample(props: SomeProps) {
  let {
    action, // "START" | "STOP" | "PAUSE"
    time, // number | undefined,
    ref // { current: any } | undefined

chaance

function useAccessibleRouting(skipLinkRef) {
	let location = useLocation();
	let liveRegionRef = React.useRef();

	React.useEffect(
		/**
		 * Create a live region that will be used to announce route changes when the
		 * user navigates. This hook should be called from the root App component,
		 * so this should be created and appended to the DOM only once.
		 */

chaance

type LinkProps<T extends { href: any }> = T extends { href: infer U }
	// If our `href` prop starts with a given substring, we might
	// determine that we have an external link and filter internal
	// routing-related props. This could just as easily work in reverse!
	? U extends `https://${string}` | `http://${string}`
		? ExternalLinkProps
		: InternalLinkProps
	: never;

chaance

// For Reference
import * as React from 'react'
import * as ReactDOM from 'react-dom'

const states: any[] = []
let calls = -1

function useState<S>(value: S) {
  const call = ++calls