Skip to content

Instantly share code, notes, and snippets.

hackerwins / SortedMap.ts
Created June 26, 2018 01:37
SortedMap using LLRB Tree.
* Implementation of an SortedMap using Left-leaning Red-Black Tree
* Original paper on Left-leaning Red-Black Trees:
* -
* Invariant 1: No red node has a red child
* Invariant 2: Every leaf path has the same number of black nodes
* Invariant 3: Only the left child can be red (left leaning)
PaulKinlan / manifest-polyfill.html
Last active February 27, 2018 17:49
Web App Manifest Polyfill for iOS
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="manifest" href="">
<title>iOS Manifest Polyfill</title>
addyosmani /
Last active June 10, 2020 18:30
💄💋 Progressive Web Apps across popular frameworks that I have written or contributed significantly to

React HN (Universal rendering, Offline caching, optimisations)

React + Webpack application using the PRPL pattern

paulirish /
Last active July 18, 2024 22:41
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Japanese translation from the original post in English.

原文: [Getting Literal With ES6 Template Strings by Addy Osmani] (


従来のJavaScriptの文字列処理はPythonやRubyに比べて非力でしたが、ES6のテンプレート文字列はこの状況を根本的に覆します。(テンプレート文字列はChrome 41からサポートされています。)それによりプログラマはドメイン固有言語(domain-specific language、DSL)を定義する事が可能になります。以下はテンプレート文字列が提供する機能です。

  • 文字列の挿入
  • 式を文字列に埋め込む
bendc / functional-utils.js
Last active September 15, 2023 12:12
A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.
// array utils
// =================================================================================================
const combine = (...arrays) => [].concat(...arrays);
const compact = arr => arr.filter(Boolean);
const contains = (() => Array.prototype.includes
? (arr, value) => arr.includes(value)
: (arr, value) => arr.some(el => el === value)
p3t3r67x0 /
Last active January 16, 2024 01:17
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;

video /deep/ input[type=range] {
addyosmani / package.json
Last active May 29, 2024 15:54
npm run-scripts boilerplate
"name": "my-app",
"version": "1.0.0",
"description": "My test app",
"main": "src/js/index.js",
"scripts": {
"jshint:dist": "jshint src/js/*.js",
"jshint": "npm run jshint:dist",
"jscs": "jscs src/*.js",
"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",
addyosmani /
Last active July 13, 2024 21:26 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

jeff-minard-ck / Vagrantfile
Created January 10, 2014 16:20
vagrant file with HD provisioning
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config| = "2creatives-centos65-652"
config.vm.box_url = ""
config.vm.hostname = ""
config.vm.synced_folder "salt/root/", "/srv/"