| Registered Name: https://zhile.io | |
| License Key: 48891cf209c6d32bf4 |
| /** | |
| * How to make 3-corner-rounded triangle in CSS (SO) | |
| * http://stackoverflow.com/q/14446677/1397351 | |
| */ | |
| .triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; } | |
| .triangle { | |
| overflow: hidden; | |
| position: relative; | |
| margin: 7em auto 0; | |
| border-radius: 20%; |
| import React from 'react'; | |
| export default function asyncComponent(getComponent) { | |
| class AsyncComponent extends React.Component { | |
| static Component = null; | |
| state = { Component: AsyncComponent.Component }; | |
| componentWillMount() { |
| export const copyToClipboard = text => { | |
| let textArea; | |
| let copy; | |
| let isError = false; | |
| function isOS() { | |
| return navigator.userAgent.match(/ipad|iphone/i); | |
| } | |
| function createTextArea(text) { |
| #! /bin/sh | |
| alias gs="git status" | |
| alias gc="git commit" | |
| alias gr="git checkout" | |
| alias ga="git add" | |
| alias gl="git lola" |
| /* ---------------------------------------------------------- */ | |
| /* */ | |
| /* A media query that captures: */ | |
| /* */ | |
| /* - Retina iOS devices */ | |
| /* - Retina Macs running Safari */ | |
| /* - High DPI Windows PCs running IE 8 and above */ | |
| /* - Low DPI Windows PCs running IE, zoomed in */ | |
| /* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ | |
| /* - Android hdpi devices and above */ |
| // connect() is a function that injects Redux-related props into your component. | |
| // You can inject data and callbacks that change that data by dispatching actions. | |
| function connect(mapStateToProps, mapDispatchToProps) { | |
| // It lets us inject component as the last step so people can use it as a decorator. | |
| // Generally you don't need to worry about it. | |
| return function (WrappedComponent) { | |
| // It returns a component | |
| return class extends React.Component { | |
| render() { | |
| return ( |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <input id="file" type="file" accept="image/*" /> | |
| <br/> | |
| <h2>As read:</h2> | |
| <img id="placeholder1" width=300/><br/> | |
| <h2>Rotated by exif data:</h2> | |
| <img id="placeholder2" width=300/> | |
| <script> |
| if (typeof window.document.createElement('div').style.webkitLineClamp !== 'undefined') { | |
| document.querySelector('html').classList.add('webkit-line-clamp'); | |
| } |
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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()