yinkakun

{
  "parser": "babel-eslint",
  "extends": [
    "react-app",
    "airbnb",
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "prettier",
    "prettier/react"

yinkakun

Animated Photo Gallery (Also Frustrating)

Me: Hm look at this

Friend: Wow so frustrating

Me: I guess that's the title

A Pen by Olivia Ng on CodePen.

yinkakun

<div class="container">
    <!-- Header Section -->
    <header class="header">
        <div class="bg-head">
            <h4>Photo Gallery Grid</h4>
            <h2>Beautiful</br> Dogs</h2>
        </div>
    </header>

yinkakun

Image Hover From Bottom, Color Overlay

A Pen by C U on CodePen.

License.

yinkakun

<!-- tsParticles container -->
<div id="tsparticles"></div>
<!-- https://github.com/matteobruni/tsparticles -->
<div class="github">
  <a class="btn btn-link" href="https://github.com/matteobruni/tsparticles" title="Find more info on GitHub">
    <img class="img-fluid" id="gh-mark" src="https://cdn.matteobruni.it/images/particles/GitHub-Mark-120px-plus.png" alt="">
    <span id="gh-project">Made with tsParticles</span>
  </a>
  <div style="text-align: center">
    <a class="github-button" href="https://github.com/matteobruni/tsparticles" data-icon="octicon-star" data-show-count="true" aria-label="Star matteobruni/tsparticles on GitHub">Star</a>

yinkakun

import React from 'react';
import Container from '@/components/container';
import ArrowRight from '@/assets/arrow-right.svg';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/splide/dist/css/splide.min.css';

const SyncedSlider = () => {
  const firstSlideRef = React.useRef(null);
  const secondSlideRef = React.useRef(null);

yinkakun

import "./styles.css";
import { Person } from "./types";
import { Listbox } from "./listbox/listbox";
import { useForm } from "react-hook-form";

const people: Person[] = [
  { id: 1, name: "Durward Reynolds", unavailable: false },
  { id: 2, name: "Kenton Towne", unavailable: false },
  { id: 3, name: "Therese Wunsch", unavailable: false },
  { id: 4, name: "Benedict Kessler", unavailable: true },

yinkakun

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

yinkakun

const getPagination = (currentPage: number, totalPages: number) => {
  const BOUNDARY = 5;
  const MIN_PAGE = 1;
  const MAX_PAGE = Math.max(MIN_PAGE, totalPages);

  const prevPage = currentPage > MIN_PAGE ? currentPage - 1 : null;
  const nextPage = currentPage < MAX_PAGE ? currentPage + 1 : null;

  let prevPages: number[] = [];
  let nextPages: number[] = [];

yinkakun

import Axios from "axios";
import Router from "next/router";

const API_URL = process.env.NEXT_PUBLIC_API_URL;

export const axios = Axios.create({
  baseURL: API_URL,
  headers: {
    "Content-Type": "application/json",
  },