Olga Zhyzhka HelgaZhizhka

Creating markup with JS

Before reading

Before reading, make sure you are familiar with the following concepts:

[DOM]
[Functions]
[Classes]
[OOP]

Ревью - задача с наивысшим приоритетом. Желательно приступать к ревью как можно скорее. Это поможет избежать массового мержа задач в конце спринта и не будет тратить время коллег, особенно если задачи взаимозависимы. Начинаем ревью задачи при первом стабильном билде.
Прежде всего нужно проверить соответствие указанного номера задачи, репозитория и версии указанным в Jira, а в ходе ревью обратить внимание, соответствуют ли внесенные изменения поставленной задаче.
Названия коммитов и PR пишутся с большой буквы, они должны содержать номер задачи, описывать внесенные изменения и быть обезличенными. Плохой пример: “сделал правки”, хороший пример: “UFSUI-1111 Исправлена работа скролла в Select при открытии вверх”.
На ревью обязательно нужно как посмотреть код, так и проверить корректность работы компонента с внесенными изменениями. Код стоит проверять досконально в каждом файле. При проверке работы нужно попытаться воспроизвести все возможные кейсы использования компонента. Не стоит пренебрегать одним из ш

	function debounce(originalFn, timeoutMs) {
	let timeout;
	return (...args) => {
	clearTimeout(timeout); // clear timeout every time the function is called
	timeout = setTimeout(() => originalFn(...args), timeoutMs); // call the original function once "timeoutMs" ms after the last call have elapsed
	};
	}

	// Creates a throttled function that only invokes "originalFn" at most once per every "delayMs" milliseconds
	function throttle(originalFn, delayMs) {
	let timeout; // timeout to keep track of the executions
	return (...args) => {
	if (timeout) { // if timeout is set, this is NOT the first execution, so ignore
	return;
	}

	// this is the first execution which we need to delay by "delayMs" milliseconds
	timeout = setTimeout(() => {

	/*
	No jQuery necessary.
	Thanks to Dan's StackOverflow answer for this:
	http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
	*/

	function isElementInViewport(el) {
	var rect = el.getBoundingClientRect();
	return (
	rect.top >= 0 &&

	<template>
	<div class="wrapper">
	<div class="box" @scroll="handleScroll">
	<p>Your content here...</p>
	</div>
	<a href="#" v-if="hasScrolledToBottom">Show After Scrolling</a>
	</div>
	</template>
	<script>
	export default {

	<?php
	/**
	* Функция склонения числительных в русском языке
	*
	* @param int $number Число которое нужно просклонять
	* @param array $titles Массив слов для склонения
	* @return string
	**/
	$titles = array('котик', 'котика', 'котиков');
	function declOfNum($number, $titles)

	git branch -m old_branch new_branch – переименовать локальную ветку
	git push origin :old_branch – удалить старую ветку
	git push --set-upstream origin new_branch – выгрузить новую ветку и "закрепить" ее за локальной веткой

	.video-container {
	position: relative;
	padding-bottom: 56.25%; /16:9/
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	}

	.video-container iframe,
	.video-container object,

	<svg width="100%" height="100%" viewBox="0 0 600 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
	<rect x="-152" y="-117" width="882" height="819" fill="#ebebeb"/>
	<g>
	<circle id="circle-yellow" cx="393.785" cy="409.5" r="100" fill="transparent"/>
	<g>
	<path class="cog-yellow" d="M378.75,310.637c-6.476,0.985 -12.839,2.603 -18.999,4.832l0.962,15.729c-5.814,2.455 -11.337,5.551 -16.466,9.229l-12.915,-9.028c-5.115,4.091 -9.817,8.675 -14.036,13.685l8.696,13.14c-3.807,5.034 -7.042,10.476 -9.644,16.226l-15.699,-1.361c-2.385,6.101 -4.165,12.421 -5.314,18.869l14.102,7.032c-0.781,6.263 -0.861,12.593 -0.24,18.874l-14.276,6.671c0.985,6.476 2.604,12.839 4.833,18.998l15.728,-0.961c2.456,5.814 5.551,11.336 9.23,16.465l-9.028,12.915c4.091,5.116 8.674,9.818 13.684,14.037l13.141,-8.697c5.033,3.807 10.475,7.042 16.225,9.645l-1.36,15.