Justin Hall wKovacs64

## SkipRenderOnClient.tsx
import * as React from 'react';

const useIsFirstRender = (): boolean => {
  const isFirst = React.useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  } else {

## fontsource-with-remix.md

      
              1 file
            
          
              0 forks
            
          
              13 comments
            
          
              8 stars
            
          
                knowler
                / fontsource-with-remix.md
            
            
              Last active
              February 21, 2024 17:03
            
              
                Fontsource with Remix (pre-1.7.3)
              
          
    Fontsource with Remix

Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the @font-face src.
Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own @font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.

Install your font:
npm install --save @fontsource/montserrat


## service-worker.js
// put this in a file where your service worker used to live, like yourdomain.com/service-worker.js. You can find out this path in the SW dev tools of your browser

self.addEventListener('install', (e) => {
  console.log('[Service Worker] Installing Service Worker ...', e);
  self.skipWaiting();
});

self.addEventListener('activate', (e) => {
  console.log('[ServiceWorker] Activate');
  self.registration

## image.ts
import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";

## jsdoc-example.js
/**
 * @typedef {Object} ClassifyProps
 * @property {React.ElementType} [as] - Element to render
 * @property {import('clsx').ClassValue} [className] - Composable classnames passed to clsx
 */

/**
 * @param {ClassifyProps} props
 */
function Classify({ as: El = "div", ...props }) {

## Link.tsx
// ----------------------------------------------------------------------
// Smart wrapper around Next.js <Link>
//
// This is to improve the default handling of Next.js dynamic links which
// requires both `href` and `as` props.
// This improvement enables the following usage:
//
// <Link page="/users/[id]" params={{ id: user.id }}>{user.name}</Link>
//
// <Link page="/blog/[...slug]" params={{ slug: ['coffee', 'frenchpress'] }}>View Here</Link>

## Reach Philosophy.md

      
              1 file
            
          
              13 forks
            
          
              6 comments
            
          
              89 stars
            
          
                ryanflorence
                / Reach Philosophy.md
            
            
              Last active
              November 28, 2023 09:50
            
          
    Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.
The three equally important goals are to be:

Accessible
Composable
Stylable


## EditPlanDetails.test.js
import React from 'react';
import { render, fireEvent } from 'react-native-testing-library';
import { _EditPlanDetails as EditPlanDetails } from '../Settings/EditPlanDetails';

// Scrollviews are bugged in the current Expo/RN release and won't render in tests https://github.com/expo/expo/issues/2806#issuecomment-465373231
jest.mock('ScrollView', () => require.requireMock('ScrollViewMock'));

describe('EditPlanDetails', () => {
  const props = {
    subscription: {

## Gatsby v2 using Internet Explorer.md

      
              1 file
            
          
              1 fork
            
          
              2 comments
            
          
              17 stars
            
          
                arnars
                / Gatsby v2 using Internet Explorer.md
            
            
              Last active
              February 15, 2021 08:01
            
              
                Tips for making Gatsby v2 working with IE / Internet Explorer
              
          
    Making Gatsby work with Internet Explorer 10 and 11

I created this gist in order to help myself and others keep track of tips and tricks in order to make Gatsby v2 play nicely with Internet Explorer 10 and 11.
This is experience based. Please share your experiences when you have a solution to a problem.
External compilation of modules

If you suspect that an es6-based module is breaking your app, then try to add gatsby-plugin-compile-es6-packages and include the package as one of the modules.

  
## index.html
<head>
  <!-- this will run -->
  <style nonce='1234'>
    .a {
      color: red;
    }
  </style>

  <!-- this won't run -->
  <style>
	import * as React from 'react';

	const useIsFirstRender = (): boolean => {
	const isFirst = React.useRef(true);

	if (isFirst.current) {
	isFirst.current = false;

	return true;
	} else {
	// put this in a file where your service worker used to live, like yourdomain.com/service-worker.js. You can find out this path in the SW dev tools of your browser

	self.addEventListener('install', (e) => {
	console.log('[Service Worker] Installing Service Worker ...', e);
	self.skipWaiting();
	});

	self.addEventListener('activate', (e) => {
	console.log('[ServiceWorker] Activate');
	self.registration
	import { createHash } from "crypto";
	import fs from "fs";
	import fsp from "fs/promises";
	import path from "path";
	import https from "https";
	import { PassThrough } from "stream";
	import type { Readable } from "stream";
	import type { LoaderFunction } from "remix";
	import sharp from "sharp";
	import type { Request as NodeRequest } from "@remix-run/node";
	/**
	* @typedef {Object} ClassifyProps
	* @property {React.ElementType} [as] - Element to render
	* @property {import('clsx').ClassValue} [className] - Composable classnames passed to clsx
	*/

	/**
	* @param {ClassifyProps} props
	*/
	function Classify({ as: El = "div", ...props }) {
	// ----------------------------------------------------------------------
	// Smart wrapper around Next.js <Link>
	//
	// This is to improve the default handling of Next.js dynamic links which
	// requires both `href` and `as` props.
	// This improvement enables the following usage:
	//
	// <Link page="/users/[id]" params={{ id: user.id }}>{user.name}</Link>
	//
	// <Link page="/blog/[...slug]" params={{ slug: ['coffee', 'frenchpress'] }}>View Here</Link>
	import React from 'react';
	import { render, fireEvent } from 'react-native-testing-library';
	import { _EditPlanDetails as EditPlanDetails } from '../Settings/EditPlanDetails';

	// Scrollviews are bugged in the current Expo/RN release and won't render in tests https://github.com/expo/expo/issues/2806#issuecomment-465373231
	jest.mock('ScrollView', () => require.requireMock('ScrollViewMock'));

	describe('EditPlanDetails', () => {
	const props = {
	subscription: {
	<head>
	<!-- this will run -->
	<style nonce='1234'>
	.a {
	color: red;
	}
	</style>

	<!-- this won't run -->
	<style>