Skip to content

Instantly share code, notes, and snippets.

View OlegLustenko's full-sized avatar

Oleg Lustenko OlegLustenko

View GitHub Profile
@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"}
@OlegLustenko
OlegLustenko / FlowReactTutorial.js
Created November 27, 2017 11:46 — forked from busypeoples/FlowReactTutorial.js
Flow Fundamentals For ReactJS Developers
// @flow
// Flow Fundamentals For ReactJS Developers
/*
Tutorial for ReactJS Developers wanting to get started with FlowType.
We will go through the basic Flow features to gain a better understanding of how to use FlowType with React.
You can uncomment the features one by one and work through this tutorial.
If you want to learn the very FlowType basics, refer to "Flow Fundamentals for JavaScript Developers" (https://gist.github.com/busypeoples/61e83a1becc9ee9d498e0db324fc641b) first.

I was reviewing some notes from 1-1 meetings that me and my manager Dave used to have, and I thought I'd summarize a bunch of the repeated talking points we've had over the years. Here's some of what I've learned about being a competent professional. Identify and focus on your top priorities – because if you don't, wtf are you doing?

Is the top priority the top priority? What's the single most important thing you need to be doing? If you don't have an answer to this, you should drop everything and figure out what the answer is. Having an answer here forces clarity and focus. Not having an answer is dangerous – it guarantees that you'll be working on unimportant things and wasting your precious time. There will always be an endless stream of things to do. It'll be tempting to do whatever is easiest, or most fun, or most familiar. But this is a trap that will screw you over in the long run. It's better to make 5-10% progress on the most important thing than to finish lots of tasks that don't actually move the