Skip to content

Instantly share code, notes, and snippets.

Avatar

Boris Serdiuk just-boris

View GitHub Profile
@just-boris
just-boris / web-components-trade-offs.md
Last active Jun 6, 2021
Web Components trade-offs
View web-components-trade-offs.md

Web Components trade-offs

Desired state

Before we begin talking about the trade-offs, let's look at the desired state, why someone should use Web Components and what benefits it provides. This standard allows you to create framework-independent UI components. Instead of re-inventing the same concept of UI component for every framework, there could be a universal solution using Web Components standard. They will also be more simple and lightweight, as the API is already built into browsers and you do not need to load additional runtime to your web page.

Web Components are defined as custom HTML elements where you can attach your custom behavior. You do not need to learn additional proprietary framework conventions, as you can think about using Web Component same way as you would use <button> or <input>.

Now let's check how these expectations match with the real state.

View use-stable-event-handler.ts
import { useCallback, useEffect, useRef } from 'react';
/**
* A callback that stays stable between renders even as the dependencies change.
*
* @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
*/
export function useStableEventHandler<T extends (...args: any[]) => any>(fn: T): T {
const ref = useRef<T>();
@just-boris
just-boris / demo.ts
Created Oct 13, 2020
Nested weak map
View demo.ts
import { NestedWeakMap } from './nested-weak-map';
const key1 = {};
const key2 = {};
const map = new NestedWeakMap();
map.get([key1, key2]); // undefined
map.getOrCreate([key1, key2], () => 'default'); // "default"
map.get([key1, key2]); // "default"
View css-loader.js
import path from 'path';
function shouldApply(url) {
return path.extname(url) === '.css';
}
export function getFormat(url, context, defaultGetFormat) {
if (shouldApply(url)) {
return {
format: 'module',
@just-boris
just-boris / debounce.js
Created May 31, 2020
small debounce implementation without lodash
View debounce.js
export const DEBOUNCE_DEFAULT_DELAY = 200;
export default function debounce(func, delay = DEBOUNCE_DEFAULT_DELAY) {
let timeout;
return function(...args) {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
@just-boris
just-boris / README.md
Last active Aug 30, 2019
Use lint-staged to check file sizes
View README.md

File size checker

Prevents you from accidentially commenting very big assets. Make sure that you have optimized all your assets.

Installation

  1. Add the script to your repo
  2. Configure lint-staged
View react-finland-talks-day-2.md

React Everywhere — Rick Hanlon

Building a Community Around Ignite — Jamon Holmgren

Toolchain for building modular React Native plugins — Ville Immonen

No notes :(

Custom CSS is the path to inconsistent UI — Artem Sapegin

View react-finland-talks-day-1.md

MobX - The Journey — Michel Weststrate

MobX [mob-ex] – reactive updates via subscriptions.

How to run an open-source library

  • people do not inspect your source code seriously
  • people are not inspired by your ideas and solutions as you are
  • project without a critical mass of users does not look very attractive
@just-boris
just-boris / .gitignore
Last active Jan 22, 2019
React scoped styling options
View .gitignore
.cache
dist
node_modules
@just-boris
just-boris / .gitignore
Last active Aug 8, 2020
Shadow DOM as a React component: https://dist-bpvbyiobiw.now.sh
View .gitignore
.cache
dist
node_modules