Skip to content

Instantly share code, notes, and snippets.

View OlegLustenko's full-sized avatar

Oleg Lustenko OlegLustenko

View GitHub Profile
@OlegLustenko
OlegLustenko / _list.tsx
Created August 22, 2024 14:01
RSC Virtualization and LoadMore
'use client'
import * as React from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'
import { clsx } from 'clsx'
import { useRouter, useSearchParams } from 'next/navigation'
import { useRef, useTransition } from 'react'
import Link from 'next/link'
// infrastructure/api/search
const baseURL = '/api/v1/projects'
const fetchSearchAPI = async (
{
projectSlug,
params,
}: {
projectSlug: string;
params: QueryParams;
},
@OlegLustenko
OlegLustenko / withPropsServerComponent.tsx
Created November 4, 2023 11:14
With Props Server Component
import React, { ComponentType } from 'react';
type anyFIXME = any;
export function withAsyncProps<OriginalProps, NewProps>(
input: (props: OriginalProps) => Promise<NewProps>,
) {
return (
BaseComponent: ComponentType<OriginalProps & NewProps>,
): ComponentType<Omit<OriginalProps, keyof NewProps> & Partial<NewProps>> => {
@OlegLustenko
OlegLustenko / what-forces-layout.md
Created December 27, 2018 17:36 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@OlegLustenko
OlegLustenko / ThinkAboutMonads.md
Created July 25, 2018 05:57 — forked from cscalfani/ThinkAboutMonads.md
How to think about monads

How to think about Monads

Initially, Monads are the biggest, scariest thing about Functional Programming and especially Haskell. I've used monads for quite some time now, but I didn't have a very good model for what they really are. I read Philip Wadler's paper Monads for functional programming and I still didnt quite see the pattern.

It wasn't until I read the blog post You Could Have Invented Monads! (And Maybe You Already Have.) that I started to see things more clearly.

This is a distillation of those works and most likely an oversimplification in an attempt to make things easier to understand. Nuance can come later. What we need when first learning something is a simple, if inaccurate, model.

This document assumes a beginner's knowledge of pure functional programming and Haskell with some brief encounters of Monads, e.g. [Functors, Applicatives, And

@OlegLustenko
OlegLustenko / PROS-AND-CONS_OOP-over-FP.md
Last active April 30, 2018 13:40
Pros and Const of Functional Programming

What are the pros and cons of functional programming vs object-oriented programming?

OOP Pros: It’s easy to understand the basic concept of objects and easy to interpret the meaning of method calls. OOP tends to use an imperative style rather than a declarative style, which reads like a straight-forward set of instructions for the computer to follow.

OOP Cons: OOP Typically depends on shared state. Objects and behaviors are typically tacked together on the same entity, which may be accessed at random by any number of functions with non-deterministic order, which may lead to undesirable behavior such as race conditions.

FP Pros: Using the functional paradigm, programmers avoid any shared state or side-effects, which eliminates bugs caused by multiple functions competing for the same resources. With features such as the availability of point-free style (aka tacit programming), functions tend to be radically simplified and easily recomposed for more generally reusable code compared to OOP.

FP

@OlegLustenko
OlegLustenko / flux.js
Created April 2, 2018 06:53 — forked from acdlite/flux.js
A Redux-like Flux implementation in <75 lines of code
/**
* Basic proof of concept.
* - Hot reloadable
* - Stateless stores
* - Stores and action creators interoperable with Redux.
*/
import React, { Component } from 'react';
export default function dispatch(store, atom, action) {
@OlegLustenko
OlegLustenko / api.js
Last active February 22, 2018 12:31
The Complete Redux book
import 'whatwg-fetch';
import {API} from 'consts';
import {apiStarted, apiFinished, apiError} from 'actions/ui';
const apiMiddleware = ({dispatch}) => (next) => (action) => {
if (action.type !== API) {
return next(action);
}
const {url, success} = action.payload;
@OlegLustenko
OlegLustenko / cloudSettings
Last active December 17, 2018 21:13
Visual Studio Code Settings Sync Gist
{"lastUpload":"2018-12-17T21:13:37.137Z","extensionVersion":"v3.2.4"}