Oleksandr Prokopenko oleksapro

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

Английская версия: https://evilmartians.com/chronicles/bootstrap-an-intervention

Вводная часть

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.
Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые п

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Set up cmder to use msysgit / bash by default

Install cmder_mini (msysgit is already installed, so no need for full version)
In Cmder, open settings: Win + Alt + P
Under Startup > Tasks, add a task called {bash} with the following settings:
- Task parameters (set icon):
  - For Cmder icon: /icon "%CMDER_ROOT%\cmder.exe"
  - For Git icon: /icon "C:\Program Files (x86)\Git\etc\git.ico"
- Commands (open Git's bash shell):
"C:\Program Files (x86)\Git\bin\sh.exe" -l -new_console:d:%USERPROFILE%

^ = Ctrl key M = Alt key

^G      (F1)            Display this help text
^X      (F2)            Close the current file buffer / Exit from nano
^O      (F3)            Write the current file to disk
^J      (F4)            Justify the current paragraph

^R      (F5)            Insert another file into the current one

	function useAbortController() {
	const abortControllerRef = React.useRef()
	const getAbortController = React.useCallback(() => {
	if (!abortControllerRef.current) {
	abortControllerRef.current = new AbortController()
	}
	return abortControllerRef.current
	}, [])

	React.useEffect(() => {

	{
	"React Hook: Use State": {
	"prefix": "us",
	"body": [
	"const [${1:Value}, set${1/(.*)/${1:/capitalize}/}] = useState($2);",
	],
	"description": "useState"
	},
	"React Hook: Use Effect": {
	"prefix": "ue",

	/* --------------------------------

	Typography

	-------------------------------- */

	:root {
	--font-primary: sans-serif;
	--font-secondary: serif;

	var el = document.getElementById('el');

	document.addEventListener('click', outsideEvtListener);

	function outsideEvtListener(evt) {
	if (evt.target === el \|\| el.contains(evt.target)) {
	return;
	}
	// code handling outside click

	let hasBlobConstructor = typeof(Blob) !== 'undefined' && (function () {
	try {
	return Boolean(new Blob());
	} catch (e) {
	return false;
	}
	}());

	let hasArrayBufferViewSupport = hasBlobConstructor && typeof(Uint8Array) !== 'undefined' && (function () {
	try {