Skip to content

Instantly share code, notes, and snippets.

View lili21's full-sized avatar
🎯
Focusing

li.li lili21

🎯
Focusing
View GitHub Profile
@igrigorik
igrigorik / domtokenlist_feature_detection.js
Last active June 21, 2023 16:57 — forked from yoavweiss/domtokenlist_feature_detection.js
DOMTokenList supports() example for Preload
var DOMTokenListSupports = function(tokenList, token) {
if (!tokenList || !tokenList.supports) {
return;
}
try {
return tokenList.supports(token);
} catch (e) {
if (e instanceof TypeError) {
console.log("The DOMTokenList doesn't have a supported tokens list");
} else {
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
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
@CMCDragonkai
CMCDragonkai / http_streaming.md
Last active April 25, 2024 17:19
HTTP Streaming (or Chunked vs Store & Forward)

HTTP Streaming (or Chunked vs Store & Forward)

The standard way of understanding the HTTP protocol is via the request reply pattern. Each HTTP transaction consists of a finitely bounded HTTP request and a finitely bounded HTTP response.

However it's also possible for both parts of an HTTP 1.1 transaction to stream their possibly infinitely bounded data. The advantages is that the sender can send data that is beyond the sender's memory limit, and the receiver can act on

@chantastic
chantastic / on-jsx.markdown
Last active March 20, 2024 01:03
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

@nolanlawson
nolanlawson / protips.js
Last active February 4, 2024 18:06
Promise protips - stuff I wish I had known when I started with Promises
// Promise.all is good for executing many promises at once
Promise.all([
promise1,
promise2
]);
// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
if (somethingIsNotRight()) {
throw new Error("I will be rejected asynchronously!");
@staltz
staltz / introrx.md
Last active May 3, 2024 13:00
The introduction to Reactive Programming you've been missing
@paulirish
paulirish / performance.now()-polyfill.js
Last active August 1, 2023 15:42
performance.now() polyfill (aka perf.now())
// @license http://opensource.org/licenses/MIT
// copyright Paul Irish 2015
// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
// github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values
// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed
@rkirsling
rkirsling / LICENSE
Last active December 23, 2023 12:54
Directed Graph Editor
Copyright (c) 2013 Ross Kirsling
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
@millermedeiros
millermedeiros / example.js
Last active September 10, 2022 03:06
execute multiple shell commands in series on node.js
// USAGE ------
// ============
var shell = require('./shellHelper');
// execute a single shell command
shell.exec('npm test --coverage', function(err){
console.log('executed test');
}});
@dergachev
dergachev / GIF-Screencast-OSX.md
Last active May 2, 2024 05:55
OS X Screencast to animated GIF

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Screencapture GIF

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application: