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 / 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 / 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 / gist:6d22d01a81d169078b48
Last active September 7, 2015 10:23 — forked from karl0-dev/gist:b887874d32b0d560014f
CSS media queries 2015
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
/* Smartphones (landscape) ----------- */
@media only screen
@xxjinwei
xxjinwei / index.html
Last active August 29, 2015 14:28 — forked from anonymous/index.html
fixed center and middle // source http://jsbin.com/lepane
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fixed center and middle</title>
<style id="jsbin-css">
div {
position: fixed;
width: 200px;
height: 200px;
@xxjinwei
xxjinwei / gist:6ae5af7e8c7a7b1b95ad
Last active August 29, 2015 14:27 — forked from lucifr/gist:1208100
Sublime Text 2 - 实用快捷键 (Mac OS X)
@xxjinwei
xxjinwei / 0_reuse_code.js
Last active August 29, 2015 14:09
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@xxjinwei
xxjinwei / README.md
Last active August 29, 2015 14:07 — forked from addyosmani/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