ygorluiz

alias p="pnpm"
alias pa="pnpm add"
alias pf="pnpm add --filter"
alias pd="pnpm add -D"
alias pdf="pnpm add -D --filter"
alias pi="pnpm i"

ygorluiz

<nav id="nav">
  <ul class="navbar">
    <li> Reports </li>
    <li> Products </li>
    <li> About </li>
  </ul>
  <div class="navbox">
    <div class="dropdown-container">
      <ul>
        <li>Finance</li>

ygorluiz

bspwm/sxhkd cheat sheet

Common keys

ygorluiz

Misc notes on things I've done for my build with archlinux:

• Corsair RM750x power supply
• ASRock AB350 ITX/ac motherboard
• AMD Ryzen 7 1800X processor
• XFX GTS Black Edition RX 580 graphics card
• 16GBx2 G.SKILL Ripjaws V Series memory
• 2 Samsung 860 EVO 2.5" SATA III 1TB SSDs
• Samsung 960 EVO NVMe M.2 250GB SSD
• Celsius S24 CPU Cooler
• [Thermaltake Core P1

ygorluiz

1. vi /etc/environment

add these lines...

LANG=en_US.utf-8
LC_ALL=en_US.utf-8

Alternatively,

ygorluiz

"use client";

import { AnimationProps, motion } from "framer-motion";
import { useState } from "react";

type Feedbacks = "bad" | "not bad" | "good";

const feedbackMapping: { [key: number]: Feedbacks } = {
  0: "bad",
  1: "not bad",

ygorluiz

import { useState } from "react";
import "./App.css";

type TypographyProps = {
  children: React.ReactNode;
  size?: "small" | "large";
};

type ParagraphProps = {
  color: string;

ygorluiz

type Definition = {
  vals: number[];
};

type ErrorBrand<Err extends string> = Readonly<{
  [k in Err]: void;
}>;

// Entry point for our builder. Unlike the value builder
// pattern example, we don't need a definition value storing the set of

ygorluiz

"use client";
import {
  animate,
  motion,
  useInView,
  useMotionValue,
  useTransform,
} from "framer-motion";
import { useEffect, useRef } from "react";

ygorluiz

Essential TypeScript Concepts for React Development

Fundamentals

• Types: Master basic types (string, number, boolean, etc.), arrays, tuples, and enums for robust data modeling.
• Interfaces: Structure objects and React components with interfaces to enforce type safety, promoting code predictability.
• Generics: Employ generics to craft reusable components and functions that seamlessly operate on various data types.

React Integration

• Function Components: Utilize React.FC and interfaces/type aliases to precisely type component props and accurately model component behavior.
• Hooks: Grasp the intricate typing of React hooks like useState, useReducer, and useContext to ensure state management aligns with expected data types.