0kzh

// from https://kelvinzhang.com/playground/scroll-area

import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
import styled from 'styled-components';

type ScrollAreaProps = {
  children: React.ReactNode;
  showOverflowIndicator?: boolean;
  hideScrollbar?: boolean;
  indicatorColor?: CSSProperties["background"];

josethz00

Senior Frontend Interview Questions

Some questions about frontend development that might be in your next job interview. The questions were formulated by @mauvieira, a super senior fullstack developer

General Frontend

• What are the strategies we can use to optimize the performance of web applications?

  • CDNs, GraphQL (maybe) to reduce overfetching, improve backend performance, use SSR and/or SSG, lazy loading for loading assets only when it's needed, minimize and compress HTML, CSS and JS files, and optimize images by compressing and resizing them.

• What are Web Vitals (LCP, FID, CLS)? And how are they applied in the real world?

luiznasciment0

import React from "react";

type Status = "idle" | "pending" | "resolved" | "rejected";

interface RequestState<DataType> {
  data: DataType | null;
  status: Status;
  error: unknown;
}

tgmarinho

import React, { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Create a new AbortController instance
    const abortController = new AbortController();
    const signal = abortController.signal;

akinncar

Computers

• PC Gamer / Desktop (Ryzen 7 2700, 16 GB RAM, RTX 3050, 1TB Nvme)
• Macbook M1 16 GB RAM 1TB 13-inch (Personal)
• Macbook M1 Max 32 GB RAM 500GB 16-inch (Work)
• Macbook i5 2017 8 GB RAM 1TB 13-inch (Personal)

Acessories

• Keyboard Keychron K3

ektogamat

// Created by Anderson Mancini 2023
// React Three Fiber AutoFocus Component to be used
// as an extension for default Depth Of Field from react-three/postprocessing

// HOW TO USE?
// import AutoFocusDOF from './AutoFocusDOF'
//
// And add this component inside the EffectsComposer...
//...
// <EffectComposer>

ryanflorence

import invariant from "tiny-invariant";

class AmalgoBox extends HTMLElement {
  get input() {
    return this.querySelector("input") as HTMLInputElement;
  }

  get button() {
    return this.querySelector("button") as HTMLButtonElement;
  }

RenaudRohlinger

import { useFrame, useThree } from '@react-three/fiber'
import { useEffect, useMemo } from 'react'
import * as THREE from 'three'

function getFullscreenTriangle() {
  const geometry = new THREE.BufferGeometry()
  const vertices = new Float32Array([-1, -1, 3, -1, -1, 3])
  const uvs = new Float32Array([0, 0, 2, 0, 0, 2])

  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 2))

sibelius

Nossa stack (requisitos opcionais, mas bom saber)

quanto mais voce souber sobre isso mais chances de ser contratado

https://twitter.com/sseraphini/status/1385561029778845698

Questions and Answers

https://gist.github.com/sibelius/ce9499969cf2a0ccea25291471038bf0

steveruizok

export class Cache<T extends object, K> {
	items = new WeakMap<T, K>()

	get<P extends T>(item: P, cb: (item: P) => K) {
		if (!this.items.has(item)) {
			this.items.set(item, cb(item))
		}
		return this.items.get(item)!
	}