Skip to content

Instantly share code, notes, and snippets.

@lopspower
lopspower / README.md
Last active January 7, 2026 17:41
Hexadecimal color code for transparency

Hexadecimal color code for transparency

Twitter

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

All hex value from 100% to 0% alpha:

@mstijak
mstijak / error.js
Created November 13, 2016 21:49
Google Bot Crawl Debugging
window.onerror = function (message, url, lineNo, colNo, error) {
console.log(arguments);
let container = document.createElement('div');
container.style.color = 'red';
container.style.position = 'fixed';
container.style.background = '#eee';
container.style.padding = '2em';
@robertpainsi
robertpainsi / commit-message-guidelines.md
Last active January 5, 2026 19:35
Commit message guidelines

Commit Message Guidelines

Short (72 chars or less) summary

More detailed explanatory text. Wrap it to 72 characters. The blank
line separating the summary from the body is critical (unless you omit
the body entirely).

Write your commit message in the imperative: "Fix bug" and not "Fixed
bug" or "Fixes bug." This convention matches up with commit messages
@swalkinshaw
swalkinshaw / tutorial.md
Last active January 5, 2026 14:33
Designing a GraphQL API
@markerikson
markerikson / redux-archeology-notes.md
Last active November 17, 2020 04:54
Redux Archeology and Design Notes

Design Goals

reduxjs/redux#8 (comment)

The main goal of this library is to prove that Flux can be implemented in a way compatible with full hot reloading (and explore how this can be done). You can run the example code with npm start, change action creators or stores, and the new logic will kick in before you refresh.

@unrevised6419
unrevised6419 / oss-tools.md
Last active September 26, 2025 13:37
Open source software tools
@DavidKuennen
DavidKuennen / minimal-analytics-snippet.js
Last active December 5, 2025 02:19
Minimal Analytics Snippet
(function (context, trackingId, options) {
const history = context.history;
const doc = document;
const nav = navigator || {};
const storage = localStorage;
const encode = encodeURIComponent;
const pushState = history.pushState;
const typeException = 'exception';
const generateId = () => Math.random().toString(36);
const getId = () => {
@simonrelet
simonrelet / asynchronous.js
Last active March 18, 2023 20:13
React hooks for asynchronous calls
import React from 'react'
/**
* @typedef {object} State The state of asynchronous hooks.
* @property {object | null} error The error.
* @property {boolean} pending Whether the call is pending.
* @property {any | null} result The result of the asynchronous call.
*/
/** @type {State} */
@sebmarkbage
sebmarkbage / WhyReact.md
Created September 4, 2019 20:33
Why is React doing this?

I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.

I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.

"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

@slikts
slikts / advanced-memo.md
Last active February 25, 2025 15:19
Advanced memoization and effects in React

nelabs.dev

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

  • Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
  • Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory