chaance

Changesets GitHub Review (2022/10/31)

General questions/notes

• Question: is it a problem for you all to have lots of old/stale open issues lingering around? I personally find that distracting if things aren't actionable, but if that's not a problem for you feel free to ignore some of this.
• There are lots of good ideas and feature requests, but I'm curious if you all have discussed priorities for new features or a future version.
• There are some open issues marked "good first issue" that seem pretty simple I might try and tackle. No question here, just a note!

Easy to close issues

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": "hi@chance.dev"
		}
	],
	"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;