Vlad Trukhin barbagrigia

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.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

Problems faced by Grab UI

Not possible to have project specific overrides of variables
CSS modules not specific enough to override Grab UI (Semantic UI) classes as CSS modules only apply one class where Semantic UI applies two classes (.ui.) and has higher specificity.
Import theme variables from Grab UI theme configs to use in project-specific components

Requirements

No build requirements
Small and lightweight

This is a CFP for ReactiveConf open call for lightning talks. If you'd like to see this talk become a reality, please ⭐️ star this gist. #ReactiveConf

If you're on your phone, please request the desktop site to star this gist 😇

Not all random values are created equal - for security-related code, you need a specific kind of random value.

A summary of this article, if you don't want to read the entire thing:

Don't use Math.random(). There are extremely few cases where Math.random() is the right answer. Don't use it, unless you've read this entire article, and determined that it's necessary for your case.
Don't use crypto.getRandomBytes directly. While it's a CSPRNG, it's easy to bias the result when 'transforming' it, such that the output becomes more predictable.
If you want to generate random tokens or API keys: Use uuid, specifically the uuid.v4() method. Avoid node-uuid - it's not the same package, and doesn't produce reliably secure random values.
If you want to generate random numbers in a range: Use random-number-csprng.

You should seriously consider reading the entire article, though - it's

	// The `loader` prop is a Dataloader instance
	// https://github.com/facebook/dataloader
	class Dataloader extends React.Component {
	state = {data: null, isLoaded: false};
	componentWillMount() {
	this.prefetchData(this.props);
	}
	componentWillReceiveProps(nextProps) {
	if (this.props.id !== nextProps.id \|\| this.props.loader !== nextProps.loader) {
	this.setState({isLoaded: false});

	// getComponent is a function that returns a promise for a component
	// It will not be called until the first mount
	function asyncComponent(getComponent) {
	return class AsyncComponent extends React.Component {
	static Component = null;
	state = { Component: AsyncComponent.Component };

	componentWillMount() {
	if (!this.state.Component) {
	getComponent().then(Component => {

	#Here are the resources I have made for people:

	##Overview
	[A Comparison of Web Animation Technologies](https://css-tricks.com/comparison-animation-technologies/)

	##For Designers
	[Practical Techniques for Designing Animations](http://www.smashingmagazine.com/2015/06/08/practical-techniques-on-designing-animation/)
	[High Performance SVGs](https://css-tricks.com/high-performance-svgs/)
	[Designing Complex SVG Animations](http://slides.com/sdrasner/cssdevconf#/)

	const ChartjsNode = require('chartjs-node');
	// 600x600 canvas size
	var chartNode = new ChartjsNode(600, 600);
	var randomnumber=Math.random();
	var imagename = "testimage"+randomnumber+".png"
	module.exports = imagename

	// each api returns a Promise
	chartNode.drawChart({
	type: 'bar',

	module.exports = {
	config: {
	// default font size in pixels for all tabs
	fontSize: 14,

	// font family with optional fallbacks
	fontFamily: '"Input Mono", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

	// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
	cursorColor: 'rgba(248,28,229,0.8)',

	package demo;

	public interface Node {}