Skip to content

Instantly share code, notes, and snippets.

andersevenrud /
Last active May 20, 2024 18:23
True Color (24-bit) and italics with alacritty + tmux + vim (neovim)

True Color (24-bit) and italics with alacritty + tmux + vim (neovim)

This should make True Color (24-bit) and italics work in your tmux session and vim/neovim when using Alacritty (and should be compatible with any other terminal emulator, including Kitty).

Testing colors

Running this script should look the same in tmux as without.

curl -s >
gaearon /
Last active May 16, 2024 14:13
useLayoutEffect and server rendering

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
let UserContext = React.createContext();
class App extends React.Component {
state = {
user: null,
setUser: user => {
this.setState({ user });
mizchi /
Last active March 28, 2024 07:10
(翻訳) React Hooks は魔法ではなく、ただの配列だ

(翻訳) React Hooks は魔法ではなく、ただの配列だ

この記事は の日本語訳です。途中で力尽きて雑な翻訳になってる箇所がいくつかあります。

どのように Hooks が動いているか

私は、新しい Hooks の API の "magic" な挙動に悩んでいる人が結構いると聞いています。なのでこの構文の提案が、少なくとも表面的なレベルではどう動いているか、解説してみようと思います。

bvaughn /
Last active May 4, 2024 11:25
How to use profiling in production mode for react-dom

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

cereallarceny / index.js
Last active May 2, 2023 06:41
Server-side rendering in Create React App
const md5File = require('md5-file');
const path = require('path');
// CSS styles will be imported on load and that complicates matters... ignore those bad boys!
const ignoreStyles = require('ignore-styles');
const register = ignoreStyles.default;
// We also want to ignore all image requests
// When running locally these will load from a standard import
// When running on the server, we want to load via their hashed version in the build folder



None of the string methods modify this – they always return fresh strings.

  • charAt(pos: number): string ES1

    Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

ygrenzinger /
Last active May 20, 2024 05:21
Summary of Clean Architecture by Robert C. Martin

Summary of book "Clean Architecture" by Robert C. Martin

Uncle Bob, the well known author of Clean Code, is coming back to us with a new book called Clean Architecture which wants to take a larger view on how to create software.

Even if Clean Code is one of the major book around OOP and code design (mainly by presenting the SOLID principles), I was not totally impressed by the book.

Clean Architecture leaves me with the same feeling, even if it's pushing the development world to do better, has some good stories and present robust principles to build software.

The book is build around 34 chapters organised in chapters.

addyosmani /
Last active January 20, 2024 16:14
Workbox recipes

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()
avinmathew / index.jsx
Created August 8, 2017 11:54
Multiple layouts with React Router v4
import React from "react"
import { Route, Switch } from "react-router-dom"
const AppRoute = ({ component: Component, layout: Layout, }) => (
<Route {} render={props => (
<Component {...props} />
)} />