Skip to content

Instantly share code, notes, and snippets.

Avatar
Focusing

liuyanghejerry liuyanghejerry

Focusing
View GitHub Profile
@liuyanghejerry
liuyanghejerry / index.html
Last active May 27, 2019
Modern index file in 2017
View index.html
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<!-- content-type, which overrides http equivalent header. Because of charset, this meta should be set at first. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Overrides http equivalent header. This tells IE to use the most updated engine. -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Tells crawlers how to crawl this page, and the role of this page. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta name="robots" content="index, follow">
@ManasJayanth
ManasJayanth / canvas-immediate.js
Created Apr 19, 2017
Canvas Immediate mode rendering using React
View canvas-immediate.js
import type { HostConfig, Reconciler } from 'react-fiber-types';
import type { ReactNodeList } from 'react-fiber-types/ReactTypes';
import DOMPropertyOperations from './DOMPropertyOperations';
import type {
Props,
Container,
Instance,
TextInstance,
OpaqueHandle,
@bussiere
bussiere / compress.go
Created Dec 22, 2016
compress uncompress a string in golang
View compress.go
package main
import (
"bytes"
"compress/gzip"
"fmt"
"encoding/base64"
"io/ioutil"
)
@srt19170
srt19170 / hdlines.js
Created Nov 22, 2016
Hand-Drawn Lines Code (Javascript)
View hdlines.js
//
// Draw a line with the given curve, and then resample it
// to a new set of points. <step> is the distance to step
// along the line when taking a new point.
//
function drawInterpolate(svg, points, step, curve) {
curve = curve || d3.curveCatmullRom.alpha(1.0);
step = step || 1;
var lineFunc = d3.line()
.curve(curve)
@Rich-Harris
Rich-Harris / imperative-v-declarative-imports.md
Last active Aug 24, 2020
Why imperative imports are slower than declarative imports
View imperative-v-declarative-imports.md

Why imperative imports are slower than declarative imports

A lot of people misunderstood Top-level await is a footgun, including me. I thought the primary danger was that people would be able to put things like AJAX requests in their top-level await expressions, and that this was terrible because await strongly encourages sequential operations even though a lot of the asynchronous activity we're talking about should actually happen concurrently.

But that's not the worst of it. Imperative module loading is intrinsically bad for app startup performance, in ways that are quite subtle.

Consider an app like this:

// main.js
@Rich-Harris
Rich-Harris / footgun.md
Last active Aug 26, 2020
Top-level `await` is a footgun
View footgun.md

Edit — February 2019

This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:

  • TC39 is currently moving forward with a slightly different version of TLA, referred to as 'variant B', in which a module with TLA doesn't block sibling execution. This vastly reduces the danger of parallelizable work happening in serial and thereby delaying startup, which was the concern that motivated me to write this gist
  • In the wild, we're seeing (async main(){...}()) as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problems
  • Therefore, a version of TLA that solves the original issue is a valuable addition to the language, and I'm in full support of the current proposal, which you can read here.

I'll leave the rest of this document unedited, for archaeological

@guyskk
guyskk / shadowsocks-server.service
Last active Jan 16, 2020
shadowsocks server systemd service
View shadowsocks-server.service
[Unit]
Description=Shadowsocks Server
After=network.target
[Service]
ExecStart=/usr/local/bin/ssserver -c /etc/shadowsocks/ss-config.json
Restart=on-abort
[Install]
WantedBy=multi-user.target
@paulirish
paulirish / what-forces-layout.md
Last active Sep 22, 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
@maisano
maisano / RouteTransition.jsx
Last active Jan 21, 2019
Using react-motion with react-router
View RouteTransition.jsx
import React, { PropTypes } from 'react';
import { TransitionMotion, spring } from 'react-motion';
/**
* One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
*
* Usage is simple, and really only requires two things–both of which are
* injected into your app via react-router–pathname and children:
*
* <RouteTransition pathname={this.props.pathname}>
View gist:1740905b200df244cf3e
| iOS Device | Release | iOS version |
| ------------ | ------------- | ------------ |
| iPhone(1st) | June 29, 2007 | 1.0 - 3.1.3(February 2, 2010) |
| iPhone 3G | July 11, 2008 | 2.0 - 4.2.1(November 22, 2010) |
| iPhone 3GS | June 19, 2009 | 3.0 - 6.1.6(February 21, 2014) |
| iPhone 4 | June 24, 2010 | 4.0 - 7.1.2(June 30, 2014) |
| iPhone 4S | October 14, 2011 | 5.0 - 8.3 |
| iPhone 5 | September 21, 2012 | 6.0 - 8.3 |
| iPhone 5C | September 20, 2013 | 7.0 - 8.3 |
| iPhone 5S | September 20, 2013 | 7.0 - 8.3 |
You can’t perform that action at this time.