perfectbase

/* eslint-disable @typescript-eslint/no-explicit-any */
import { type TRPCQueryOptions } from '@trpc/tanstack-react-query';
import { unstable_noStore } from 'next/cache';
import { Fragment, Suspense, type ReactNode } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { HydrateClient, prefetch as prefetchTRPC } from '@/trpc/server';

type AwaitProps<T> =
  | {
      promise: Promise<T>;

w3cj

// Run this command to generate base config and vs code settings:
// pnpm dlx @antfu/eslint-config@latest

import antfu from "@antfu/eslint-config";

export default antfu({
  type: "app",
  typescript: true,
  formatters: true,
  stylistic: {

mustafadalga

import { act, renderHook } from '@testing-library/react';
import { describe, it, expect, beforeEach } from "vitest";
import { usePostsStore } from "@/_store/usePostsStore";

describe('usePostsStore', () => {
    beforeEach(() => {
        usePostsStore.getState().reset()
    });

    it('should return the initial state', () => {

OliverJAsh

import * as React from 'react';

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

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

    return true;
  } else {

yuaanlin

import { NextApiRequest, NextApiResponse } from 'next';

export default async function (req: NextApiRequest, res: NextApiResponse) {
  const { url } = req.query;
  const fetched = await fetch(url as string);
  const html = await fetched.text();
  const ogImg = html.match(/<meta property="og:image" content="(.*?)"/);
  if (!ogImg) {
    res.write(404);
    return;

bradtraversy

GraphQL Queries & Mutations

These are the GraphQL queries and mutations for the YouTube course.

Get names of all clients

{
  clients {
    name
 }

claus

import useScrollRestoration from "utils/hooks/useScrollRestoration";

const App = ({ Component, pageProps, router }) => {
    useScrollRestoration(router);
    return <Component {...pageProps} />;
};

export default App;

wojteklu

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules

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