Nikita | elponi.com NikitaPokryshko

In JavaScript:

pageX, pageY, screenX, screenY, clientX and clientY

Returns a number which indicates the number of physical "css pixels" a point is from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.

pageX and pageY:

Relative to the top left of the fully rendered content area in the browser. This reference point is below the url bar and back button in the upper left.

Best Practices

It’s a very, very, bad idea to attach handlers to the window scroll event.

Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea). Any performance degradation in the scroll handler(s) as a result will only compound the performance of scrolling overall. Instead it’s much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions – and then a delay).

Always cache the selector queries that you’re re-using.

It’s not clear why Twitter decided to re-query the DOM every single time the scroll event fired, but this does not appear to be necessary (since scrolling itself didn’t change the DOM). They could’ve saved the result of that single query to a variable and looked it up whenever they wanted to re-use. This would’ve resulted in absolutely no querying overhead (whic

https://stackoverflow.com/questions/40703675/react-functional-stateless-component-purecomponent-component-what-are-the-dif

How do you decide, how do you choose between these three based on the purpose/size/props/behaviour of our components? Extending from React.PureComponent or from React.Component with a custom shouldComponentUpdate method have performance implications. Using stateless functional components is an "architectural" choice and doesn't have any performance benefits out of the box (yet).

For simple, presentational-only components that need to be easily reused, prefer stateless functional components. This way you're sure they are decoupled from the actual app logic, that they are dead-easy to test and that they don't have unexpected side effects. The exception is if for some reason you have a lot of them or if you really need to optimise their render method (as you can't define shouldComponentUpdate for a stateless functional component).

Extend PureComponent if you know your output depends on si

VSCode Shortcuts

List of helpful shortcuts for faster coding

If you have any other helpful shortcuts, feel free to add in the comments of this gist :)

Official List of all commands

Windows
Mac

Mac OS commands

To kill process on port:

lsof -i:<PORT_NUMBER>
=> COMMAND, PID, USER and etc...
kill -9 <PID>

Default

Powerlevel10k

Based on this blogpost.

Install with Homebrew:

$ brew install postgresql

Run server:

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

	git filter-branch --env-filter '
	WRONG_EMAIL="email-to-override.com"
	NEW_NAME="New Name"
	NEW_EMAIL="new-email.com"

	if [ "$GIT_COMMITTER_EMAIL" = "$WRONG_EMAIL" ]
	then
	export GIT_COMMITTER_NAME="$NEW_NAME"
	export GIT_COMMITTER_EMAIL="$NEW_EMAIL"
	fi

	-------------------------------------------------------------------------------------------------------------------------------------------------
	$ bash --version #bash acronym for "Bourne Again Shell"
	$ man bash \| grep -C2 '$@' #"$@" as explained below under Special Parameters
	-----------------------------------------------------------------------------------------------------
	#Current Shell

	$ echo $SHELL
	$ echo $0
	$ readlink /proc/$$/exe
	$ cat /proc/$$/cmdline