Vasanth Krishnamoorthy vasanthk

How to style React components

If you use sass and css-modules and want to restyle some base component without changing its code. (base component already use css-modules and exposes styles property)

I know two way how to do it.

Using composes css-modules operator. Just extend classes you need, then in javascript code combine both styles as {...baseStyle, ...myStyleSimple}

Two Simple Changes to Simplify `class`

I'm not suggesting drastic action. I don't want to break backwards compatibility. I simply want to make the class feature more usable to a broader cross section of the community. I believe there is some low-hanging fruit that can be harvested to that end.

Imagine AutoMaker contained class Car, but the author wants to take advantage of prototypes to enable factory polymorphism in order to dynamically swap out implementation.

Stampit does something similar to this in order to supply information needed to inherit from composable factory functions, known as stamps.

This isn't the only way to achieve this, but it is a convenient way which is compatible with .call(), .apply(), and .bind().

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()

Difference between Debounce and Throttle

Debounce

Debounce a function when you want it to execute only once after a defined interval of time. If the event occurs multiple times within the interval, the interval is reset each time.
Example A user is typing into an input field and you want to execute a function, such as a call to the server, only when the user stops typing for a certain interval, such as 500ms.

	// Control the flow of asynchronous calls with ES6 generator functions
	// http://chrisbuttery.com/articles/synchronous-asynchronous-javascript-with-es6-generators/

	/**
	* get - XHR Request
	*/

	let get = function (url) {
	return function (callback) {
	let xhr = new XMLHttpRequest();

	var cbFn = function() {
	console.log('Done')
	}

	// Run Async API call
	completeAsyncCheckout(data, cbFn);

	cbFn = function() {
	// Guessing it prints 'Finished' since it has reference.
	console.log('Finished');

	// Original method
	var object = {
	method: function (x, y) {
	return x+y;
	}
	}

	// Add operations before or after!
	object.method = (function (original) {
	return function (x, y) {

	var foo = {
	doSomething: function(){
	// ...
	}
	}

	var bar = {};
	bar.doSomething = foo.doSomething;

	let addTask,
	removeTask;

	addTask = (data) => {
	return {
	type: 'ADD_TASK',
	data: data
	};
	};

	git branch -m old_branch new_branch # Rename branch locally
	git push origin :old_branch # Delete the old branch
	git push --set-upstream origin new_branch # Push the new branch, set local branch to track the new remote