Notes From Steve Kinney's "React Performance" Frontend Masters Course
re: optimizations: "Start with a problem first, then solve it. dont go looking for problems."
"measure first before you optimize for performance. And then measure again."
import SwiftUI | |
struct ChatGPTTextField: View { | |
// MARK: - State | |
/// State to hold our `TextField` query. | |
@State private var queryMessage: String = "" | |
/// Focus state for our `TextField`. |
// | |
// AlertItem.swift | |
// | |
// Created by Brett Bauman on 7/25/23. | |
import Foundation | |
import SwiftUI | |
struct AlertItem: Identifiable { |
CREATE TABLE public.artists ( | |
title character varying NOT NULL, | |
slug character varying NOT NULL, | |
id SERIAL PRIMARY KEY -- I use a different ID technique | |
); | |
ALTER TABLE public.artists OWNER TO postgres; | |
CREATE TABLE public.tracks ( |
Notes From Steve Kinney's "React Performance" Frontend Masters Course
re: optimizations: "Start with a problem first, then solve it. dont go looking for problems."
"measure first before you optimize for performance. And then measure again."
// | |
// Created by Adam Whitcroft on 2023-01-23. | |
// | |
import SwiftUI | |
struct SimpleDragGesture: View { | |
@State private var focussedItem: String = "middle" | |
@State private var offset = CGSize.zero | |
@State private var accumulatedOffset = CGSize.zero |
// | |
// ContentView.swift | |
// LiquidCircles | |
// | |
// Created by Paul Stamatiou on 10/10/22. | |
// | |
import SwiftUI | |
struct ContentView: View { |
import { NextResponse } from 'next/server' | |
import type { NextRequest } from 'next/server' | |
export function middleware(req: NextRequest) { | |
// get cookie token | |
const hasToken = req.cookies.get('token') | |
// protected routes (admin routes) | |
if (req.nextUrl.pathname.startsWith('/admin')) { | |
if (hasToken) { |
import { useRouter } from "next/router"; | |
import { ParsedUrlQuery } from "querystring"; | |
interface UseRouterParamsOptions { | |
method?: "push" | "replace"; | |
shallow?: boolean; | |
} | |
const useRouterParams = (options?: UseRouterParamsOptions) => { | |
const { query, pathname, push, replace } = useRouter(); |
// Accessible Modal.tsx with | |
// Framer Motion and Tailwind CSS | |
// 10 Examples in the comments section below | |
import { createPortal } from 'react-dom' | |
import { Dispatch, HTMLAttributes, SetStateAction, useEffect, useState } from 'react' | |
import { AnimatePresence, motion } from 'framer-motion' | |
import FocusLock from 'react-focus-lock' | |
const effect = { | |
hidden: { |