arunmmanoharan

import type { FetcherWithComponents } from "@remix-run/react";
import { useFetcher } from "@remix-run/react";
import { useEffect, useState } from "react";
import type { AppData } from "@remix-run/react/dist/data";
import type { SerializeFrom } from "@remix-run/server-runtime";

/**
 * A higher-order function that creates a new FetcherWithComponentsReset instance, which extends the FetcherWithComponents interface.
 * The new instance includes an additional method `reset` that can be used to reset the state of the fetcher.
 *

kentcdodds

Headers and Caching

Caching is a big subject and it can get pretty complicated. Luckily, the browsers have done all the really hard work for us and we just need to #useThePlatform.

There are three types of caches you'll likely deal with in Remix applications:

1. Application-level caches that you implement in your own code.
2. Browser caches you can control through the Cache-Control header.
3. CDN caches you also can control through the Cache-Control headers.

insidegui

struct ScrollViewOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGPoint = .zero
    
    static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {
        value = nextValue()
        print("value = \(value)")
    }
    
    typealias Value = CGPoint

tylerchilds

const createScrollManager = function() {
  let callbacks = [];
  let scrollPosition = -1;
  let animatedKilled = false;
  
  const animate = () => {
    requestAnimationFrame(onScroll);
  }

  function onScroll(){

schmidsi

// React imports
import React from 'react';


const Clock = (props) => {
  const center = {
    x: 15,
    y: 15,
  };
  const lengths = {

dmitriz

// font-size of the regular font used
$base-font-size: 	16px;

// it is convenient to declare a fixed base-line-height,
// so every other line-height is a simple multiple of base-line-height
$base-line-height: 	21px;	// 1.5 * base-font-size

// allow fractional line-height as integer multiple of base-line-height / line-height-scale
$line-height-scale: 1;

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

mmistakes

{% capture the_collection %}{{ page.collection }}{% endcapture %}

{% if page.collection %}
  {% assign document = site[the_collection] %}
{% endif %}

{% for links in document %}
  {% if links.title == page.title %}
    {% unless forloop.first %}
      {% assign prevurl = prev.url %}

brock

#!/bin/bash
# node-reinstall
# credit: http://stackoverflow.com/a/11178106/2083544

## program version
VERSION="0.0.13"

## path prefix
PREFIX="${PREFIX:-/usr/local}"

razwan

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {