Дэн Щербаков ⚛️
96 subscribers
20 photos
49 links
Канал для фронтенд-разработчиков о том, как развиваться и увеличивать зарплату.

Senior Frontend Developer с 6 годами опыта. За этот период увеличил зарплату почти в 7 раз.

Начинайте тут: https://yangx.top/code_lab/280
加入频道
Channel name was changed to «Ежедневные достижения»
🥇 Усвоены основы замыканий и лексического окружения!

Итак, лексическое окружение - это область кода, находящаяся вне функции или блока кода и относительная к нему. Например:

const outer = function() {
var j = 10; // Лексическое окружение для функции inner.

return function inner() {
return j + 10 // Лексическая область для функции inner.
}
}

Замыкание - это внутренняя функция, взыванная из внешней и сохраненная в переменную. Она "замыкает" на себя переменные из внешнего лексического окружения, так сохраняя их.
🥇Рекурсия - не магия! Небольшой шажок в сторону понимания рекурсии - точнее, применения на практике.

В известном алгоритме числа Фибоначчи вторым аргументом выступает... результат внутреннего вызова функции. Вот так всё просто. Возвращать единицу вторым условием нужно, чтобы прекратить рекурсивный цикл.
Channel name was changed to «Лаборатория»
🥇Стали понятнее привязки стилей к элементам DOM!

element.style - одиночное свойство-атрибут элемента;
element.textCSS - атрибуты в виде строки. Перезаписывает ранее установленные одиночные атрибуты;
getComputedCSS(element, pseudo) - стили CSS, примененные к элементу. Возвращает объект, где ключи - названия стилей, а значения - css-свойства, вычисляемые как из style, так и из каскадных таблиц. К любому элементу применены все возможные стили, но большинство идёт по-умолчанию и не просчитывается.
🥇Глава по DOM - всё!

А еще сделал мигающий элемент с помощью setInterval.
🥇Понятие Callback - функция, переданная в другую функцию для асинхронного - то есть, строго зависимого выполнения.
🥇Впервые придумал алгоритм, использующий рекурсию, вне тренировочных задач! Это осмысленное использование, а значит, большой шаг вперед. Алгоритм эмулирует перебор массива в цикле:

let relay = (array, x, y) => {
if(array[x] <= y) {
console.log(array[x]);
return relay(array, x + 1, y)
}
console.log('This is it!')
}

relay(array, 0, 10)
🥇Сделано многое - от разбора объекта событий до делегации. Впереди много больше...
Записки про Реакт:
-- особенности проверки типов props: для компонента вызываем propTypes с маленькой буквы, для проверки внутри объекта - с большой.
Camper.propTypes = {
name: PropTypes.string.isRequired
}
-- prop - это объект, передаваемый как аргумент в дочерние компоненты. Записывается он как кастомный атрибут (но без data-).

-- состояние - это объект с именем this.state, записанный в конструктор ES6-класса. Другие способы задать state...?
Обращаться надо обязательно через this, касается не только состояния.

-- состояния, пропсы и другое можно получать и управлять ими до return метода render().
Например, сохранить this.state.date в переменную date и вызывать в {JSX} только её.

-- componentDidMount() - метод жизненного цикла, который выполняется после render() - когда компонент уже отрисован (mount) в DOM. В нем следует писать вызовы API и обработчики событий.

-- Замыкая на себя происходящее в DOM, React обеспечивает кроссбраузерность: всё будет работать одинаково, независимо от поддержки браузерами методов кода.

-- Годная практика в Реакт - удалять обработчики событий в componentWillUnmount() - методе жизненного цикла, вызываемом перед удалением компонента из DOM.
let z = {
misc: 5,
gett: function() {
return console.log( this.misc );
}
}

/*

Что, по шагам, делает функция bind?
1. принимает аргументы: внешнюю функцию и контекст.
2. возвращает функцию...
3. ...которая возвращает результат вызова внешней функции с привязкой контекста.
*/

function bind(func, context) {
return function() {
return func.apply(context, arguments);
}
}

setTimeout( bind(z.gett, z), 1000)

Что происходит здесь?

В setTimeout объявляется два аргумента. Аргумент - это, фактически, запись в переменную без её объявления.
Если передать в setTimeout функцию, не указывая контекст, она будет записана как переменная-аргумент - и потеряет контест (this).

Можно сказать, функция bind создаёт конструкцию вида:
var argument = function() {
return myFunction.apply(myContext, arguments);
}

Иначе говоря, первым аргументом setTimeout будет результат вызова myFunction в фиксированном контексте.

Встроенный метод .bind работает аналогично, но ему хватает и одного аргумента.
Про Git:

git status = git st - команда проверяет статус репозитория (нет ли чего незакоммиченного).
Если сделаны нежелательные изменения, но еще не закоммичены, на этой стадии можно откатить их командой checkout.
Гит выведет подсказку о доступных на стадии командах.

git add - команда интексации изменений. На этой стадии их тоже можно откатить - гит вновь подскажет команду, если ввести git status.
Подсказка: git add с ключом —all проиндексирует все измененные файлы.

Стадия индексации нужна для гибкости работы.

При попадании в VIM по команде commit не следует паниковать. Просто вводим в первую строку описание коммита, жмем ECS, вводим :wq - и попадём назад в командную строку.

Бинды команд для Гит делаются так:
git config --global alias.shortcut full command
Например, у меня git checkout установлена как git ch.