Skip to content

Instantly share code, notes, and snippets.

👷‍♂️
Working from home

JIMMY ムン (MOON) ragingwind

👷‍♂️
Working from home
View GitHub Profile
@hackerwins
hackerwins / SortedMap.ts
Created Jun 26, 2018
SortedMap using LLRB Tree.
View SortedMap.ts
/**
* Implementation of an SortedMap using Left-leaning Red-Black Tree
*
* Original paper on Left-leaning Red-Black Trees:
* - http://www.cs.princeton.edu/~rs/talks/LLRB/LLRB.pdf
*
* 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
PaulKinlan / manifest-polyfill.html
Last active Feb 27, 2018
Web App Manifest Polyfill for iOS
View manifest-polyfill.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="manifest" href="https://jsbin-user-assets.s3.amazonaws.com/kinlan/manifest.json">
<title>iOS Manifest Polyfill</title>
</head>
<body>
@addyosmani
addyosmani / pwas.md
Last active Jun 10, 2020
💄💋 Progressive Web Apps across popular frameworks that I have written or contributed significantly to
View pwas.md

React HN (Universal rendering, Offline caching, optimisations)

React + Webpack application using the PRPL pattern

@paulirish
paulirish / what-forces-layout.md
Last active Jul 13, 2020
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
View TemplateStrings.md

Japanese translation from the original post in English.

原文: [Getting Literal With ES6 Template Strings by Addy Osmani] (http://updates.html5rocks.com/2015/01/ES6-Template-Strings)

#ES6のテンプレート文字列

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

  • 文字列の挿入
  • 式を文字列に埋め込む
@bendc
bendc / functional-utils.js
Last active Jul 9, 2020
A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.
View functional-utils.js
// 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
p3t3r67x0 / pseudo_elements.md
Last active Nov 5, 2019
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.
View pseudo_elements.md

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
addyosmani / package.json
Last active Jun 15, 2020
npm run-scripts boilerplate
View package.json
{
"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
addyosmani / README.md
Last active Jul 12, 2020 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
View README.md

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
jeff-minard-ck / Vagrantfile
Created Jan 10, 2014
vagrant file with HD provisioning
View Vagrantfile
VAGRANTFILE_API_VERSION = "2"
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
config.vm.box = "2creatives-centos65-652"
config.vm.box_url = "https://github.com/2creatives/vagrant-centos/releases/download/v6.5.2/centos65-x86_64-20131219.box"
config.vm.hostname = "mymachine.com"
config.vm.synced_folder "salt/root/", "/srv/"
You can’t perform that action at this time.