Skip to content

Instantly share code, notes, and snippets.

View elierotenberg's full-sized avatar

Elie Rotenberg elierotenberg

View GitHub Profile
@elierotenberg
elierotenberg / keybindings.json
Created March 6, 2024 08:50
VSCode restart TS / ESlint / GraphQL
[
{
"args": {
"commands": [
"eslint.restart",
"typescript.restartTsServer",
"vscode-graphql.restart"
]
},
"command": "runCommands",
@elierotenberg
elierotenberg / Maybe.ts
Last active March 5, 2024 12:37
Maybe with fallback
export const isNonNullable = <T>(value: T): value is NonNullable<T> =>
typeof value !== `undefined` && value != null;
export class Maybe<T> {
private readonly value: T;
private readonly notFoundMessage: string;
public constructor(value: T, notFoundMessage: string) {
this.value = value;
this.notFoundMessage = notFoundMessage;
@elierotenberg
elierotenberg / BLOG.md
Last active August 16, 2023 12:01
Idiomatic Data Fetching using React Hooks

Idiomatic Data Fetching using React Hooks

This post has been written in collaboration with @klervicn

Virtually all web apps and websites need to pull data from a server, usually through a JSON-returning API. When it comes to integrating data fetching in React component, the "impedence mismatch" between the React components, which are declarative and synchronous, and the HTTP requests, which are imperative and asynchronous, is often problematic.

Many apps use third-party libraries such as Redux or Apollo Client to abstract it away. This requires extra dependencies, and couple your app with a specific library to perform data fetching. In most cases, what we want is a direct way to integrate plain HTTP requests (e.g. using native fetch) for usage in React components.

Here we will discuss how we can use React Hooks to do this in an elegant, scalable manner.

@elierotenberg
elierotenberg / snippet.js
Created April 6, 2020 20:19
Move Netflix subtitles to top
(() => {
const css = `
.player-timedtext > div {
position: static !important;
text-align: center !important;
}
`;
const style = document.createElement("style");
style.innerHTML = css;
@elierotenberg
elierotenberg / README.md
Last active January 11, 2020 09:50
Offline password generator bookmarklet

Notes:

  • password generation is purely offline; no risk of mitm
  • uses browser crypto API if available; fallback to Math.random
  1. Copy and paste the following URL in your browser address bar:
@elierotenberg
elierotenberg / DropDown.css
Created August 25, 2014 15:43
React + react-query + bootstrap
.DropDown-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
.DropDown.open .DropDown-backdrop{
@elierotenberg
elierotenberg / DockerCompose.ts
Created August 15, 2019 07:28
Docker Compose TestUtils
interface IDockerComposeProps {
cwd?: string;
dockerComposeFile: string;
}
class DockerCompose {
private readonly props: IDockerComposeProps;
private state: "unknown" | "pending-up" | "up" | "pending-down" | "down";
public constructor(props: IDockerComposeProps) {
@elierotenberg
elierotenberg / prototype.js
Last active May 16, 2019 10:01
Get text within rectangle
(() => {
const MAX_BASENAME_LENGTH = 64;
const clicks = [];
const getNodesInRectangle = (topLeft, bottomRight) =>
Array.from(document.querySelectorAll("*").values()).filter(node => {
const { x, y, width, height } = node.getBoundingClientRect();
return (
x >= topLeft.x &&
x + width <= bottomRight.x &&
y >= topLeft.y &&
@elierotenberg
elierotenberg / IMyProtocol.d.ts
Last active March 5, 2019 19:17
Statically typechecked serializable protocol
import { IProtocol, IRequestResponseMap, IEventMap } from "./IProtocol";
import { ISerializable } from "./ISerializable";
type RequestResponseMap = {
ping: {
RequestParams: {};
ResponseParams: {};
};
echo: {
RequestParams: ISerializable;
@elierotenberg
elierotenberg / async-assign.js
Created February 22, 2019 19:24
Evaluation order vs. concurrency
(async () => {
// small function that resolves after t ms
const sleep = t => new Promise(resolve => setTimeout(resolve, t));
let state = {
counter: 0,
running: true
};
const setCounter = v => {