Skip to content

Instantly share code, notes, and snippets.

View xxjinwei's full-sized avatar
💻
Working...

Celile Fulwood xxjinwei

💻
Working...
View GitHub Profile
@xxjinwei
xxjinwei / cancelable-promise.js
Last active May 6, 2019 08:05
cancelable promise
/**
* @file cancelable promise
*/
const pending = Promise.race.bind(Promise, []);
export default function cancellablePromise(fn) {
let isPending = true;
const patch = fn => (...args) => {
isPending = false;
if (fn) {
fn(...args);
@xxjinwei
xxjinwei / chrome.sh
Created April 11, 2019 08:21
google bot + private
#!/usr/bin/env bash
cd /Applications/Google\ Chrome.app/Contents/MacOS
UA='Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'
./Google\ Chrome --user-agent="$UA" --incognito
@xxjinwei
xxjinwei / kmp.js
Last active October 30, 2018 13:15
const getNext = str => {
let len = str.length;
let next = [-1];
let i = 0;
let p = -1;
while (i < len) {
if (p === -1 || str[i] === str[p]) {
next[++i] = ++p;
} else {
@xxjinwei
xxjinwei / Article.md
Created November 2, 2017 12:10 — forked from Warry/Article.md
How to make faster scroll effects?

How to make faster scroll effects?

  • Avoid too many reflows (the browser to recalculate everything)
  • Use advanced CSS3 for graphic card rendering
  • Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

@xxjinwei
xxjinwei / index.html
Last active August 28, 2017 10:17
equel height colum by flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.con {
display: flex;
flex-wrap: wrap;
@xxjinwei
xxjinwei / get-keyboard-height.js
Created May 10, 2017 12:55
get keyboard height
import { Keyboard, Dimensions } from 'react'
let KEYBOARD_HEIGHT = 0
Keyboard.addListener('keyboardDidChangeFrame', function ({ endCoordinates }) {
KEYBOARD_HEIGHT = DIMENSION.height - endCoordinates.screenY
})
@xxjinwei
xxjinwei / react-unknown-prop.md
Created May 9, 2017 03:46 — forked from jimfb/react-unknown-prop.md

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

There are a couple of likely reasons this warning could be appearing:

  1. Are you using {...this.props} or cloneElement(element, this.props)? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.

  2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).

  3. React does not yet reco

@xxjinwei
xxjinwei / CSS media queries
Created March 1, 2017 15:54 — forked from ticking-clock/CSS media queries
Common media queries with LESS
@media only screen and (max-width: 767px) {
}
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 992px) {
}
@media only screen and (min-width: 1200px) {
@xxjinwei
xxjinwei / isAtBotton.js
Last active January 3, 2016 08:19
detect whether the scroll bar is at the end of page
//http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom/10795797#10795797
function isAtBottom () {
var getDocHeight = function() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
@xxjinwei
xxjinwei / transiton.css
Created December 18, 2013 09:05
transition css
.transition {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}