Mosharush

alias גררר="replace_hebrew_with_latin"
replace_hebrew_with_latin() {
  previous_command=$(history | tail -n 1 | sed 's/^[ ]*[0-9]*[ ]*//')
  latin_command=$(echo "$previous_command" | tr 'פםןוטארק׳/ףךלחיעכגדשץתצמנהבסז' 'poiuytrewq;lkjhgfdsa.,mnbvcxz')

  # Display the translated command
  echo "Translated Command: $latin_command"

  # Ask for confirmation before executing
  echo "Do you want to execute this command? [Press Enter again]"

slavafomin

Using TypeScript Node.js with native ESM

This reference guide shows how to configure a TypeScript Node.js project to work and compile to to native ESM.

Rationale

CommonJS module system was introduced by the Node.js developers due to the lack of the notion of "modules" in the original JavaScript (ECMAScript) language specification at that time. However, nowadays, ECMAScript has a standard module system called ESM — ECMAScript Modules, which is a part of the accepted standard. This way CommonJS could be considered vendor-specific and obsolete/legacy. Hopefully, TypeScript ecosystem now supports the "new" standard.

So the key benefits are:

peckjon

// paste into browser console at https://www.joinhoney.com/droplist to remove ALL Droplisted items
var script = document.createElement('script');
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
setTimeout(() => {
  $('img[alt="Remove this item from your Droplist"]').each(function(){this.click()});
  $('button[aria-label="Remove item"]').each(function(){this.click()});
  $('div[id="HoneyDropList:index-moreButton"]').click();
}, 2000);

jeromefitzpatrick

<?php
/*
 * Problem:
 * Given a set of intervals, print all NON overlapping intervals
 * after merging overlapping intervals.
 *
 * Assumptions:
 * 1. The start of the interval is less than or equal to the end
 * 2. The input is sorted by the start of the interval in asc order
 * 3. The intervals are made u of positive integers

sibelius

import React, { useRef, useState } from 'react';

import { Typography } from '@material-ui/core';
import TextField from '@material-ui/core/TextField';
import CircularProgress from '@material-ui/core/CircularProgress';
import Autocomplete, {
  AutocompleteChangeDetails,
  AutocompleteChangeReason,
  AutocompleteProps
} from '@material-ui/lab/Autocomplete';

guanzo

Async calls

<template>
<!-- 
When isLoading is true, the <div> is in the DOM, the <p> is not.
When isLoading is false, Vue will remove the <div> and add the <p> to the DOM,
at which point <MyComponent> will be created and passed the fetched data.
-->

slikts

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

ShanonJackson

import css from "rollup-plugin-css-porter";
import pkg from "../../package.json";
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
import path from "path";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";

process.env.BABEL_ENV = "production";
process.env.NODE_ENV = "production";

silicakes

# Relies on ripgrep: https://github.com/BurntSushi/ripgrep
#
# Params: 
# <library-name> a string with or without quotes
#
# Usage:
# $ ./extracAllNamedImports <library-name>

# Output
# $ ./getNamedImportsByLibrary.sh date-fns

shilman

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript