OlegLustenko

'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'

OlegLustenko

// infrastructure/api/search
const baseURL = '/api/v1/projects'
const fetchSearchAPI = async (
  {
    projectSlug,
    params,
  }: {
    projectSlug: string;
    params: QueryParams;
  },

OlegLustenko

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

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

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

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

/**
 * 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

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

{"lastUpload":"2018-12-17T21:13:37.137Z","extensionVersion":"v3.2.4"}

OlegLustenko

• https://github.com/arnarthor/advent-of-code-2017 (Native & BuckleScript)
• https://github.com/rrdelaney/advent-of-code-2017 (Native)
• https://github.com/fazouane-marouane/advent-of-code-2017 (BuckleScript)
• https://github.com/jaredly/advent-2017 (BuckleScript)
• https://github.com/brentbaum/advent-of-code (BuckleScript)
• https://github.com/Lokeh/advent-2017 (BuckleScript)