Заметки о фронтенде

Блог Виталия Зюзина

Баги в браузерах. Кто виноват и что делать?

В апреле ездил в Екатеринбург на ДАМП. Рассказывал про баги в браузерах. Вот и видео выступления с конференции подоспело.

Презентация прилагается.

Техника помидора

На прошедшей неделе я попробовал управлять своим рабочим временем нестихийным образом.

Накануне в ленте упомянули про технику Pomodoro. Я решил провести эту рабочую неделю с помидорной техникой и посмотреть, что из этого получится.

Вкратце

Техника работает. Не отвлекаясь по мелочам всю неделю работал более эффективно. Сделал боьше, чем обычно, за то же время. Рекомендую!

Что ещё за помидоры

Техника несложная: рабочее время делится на небольшие спринты с короткими перерывами. Во время спринта надо выключить все уведомления и не отвлекаться на раздражители: чаты, контактик, твиттер и прочие уведомляшки.

Спринты идут следующим образом:

  1. 25 минут работы;
  2. 5 минут перерыв;
  3. 25 минут работы;
  4. 5 минут перерыв;
  5. 25 минут работы;
  6. 5 минут перерыв;
  7. 25 минут работы;
  8. 15 минут перерыв.

Этот цикл затем повторяется по кругу. В перерывах важно отвлечься от текущего дела, а лучше вообще встать из-за компа, походить, размяться, попить водички, подумать о чём-нибудь помимо текущей задачи.

Это всё теория, а …

На практике

… получается следующим образом. В начале рабочего дня я начинал разбирать разные мелкие задачи и дела, не включая счётчик помидоров. С прошлого дня накапливаются незавершённые мелочи, рандомные коммуникации, идеи, которые надо быстро разрешить и проверить. Этот предварительный этап у меня длился от 1 до 2 часов. Дальше разбирал задачи на сегодня из общего туду-листа.

Затем я включал счётчик, выключал уведомления и начинал работать уже по помидорам. До большого перерыва получалось сделать от 4 до 6 помидоров.

В большой перерыв я шёл на обед, который занимает около часа.

После обеда получалось сделать от 7 до 12 помидоров.

Итого примерно так:

  1. 1−2 часа без помидоров, рандом, подготовка;
  2. 2−3 часа работы;
  3. 1 час большой перерыв;
  4. 3.5−6 часов работы.

Итого, в среднем за прошедшую неделю получалось от 5 до 8 часов «чистой» работы в день. И это действительно эффективная работа, когда ты полностью погружаешься и входишь в состояние потока. Плюс 1−2 часа на предварительный рандом и подготовку.

Инструменты

Я использовал бесплатный Pomodoro One для мака. Это приложение простое и понятное, выдаёт окошко на передний план и звук, когда заканчивается или начинается следующий период. Ещё рекомендовали веб-версию Tomato Timer и платное приложение для мака Tadam, но я не пробовал.

Итог

Если у вас есть проблемы с решением больших и сложных, множества мелких или рутинных задач, попробуйте помидорную технику. С ней увеличивается продуктивность, а главное — после работы остаются силы на другие дела.

Кнопка

Потихоньку реализую элементы будущего дизайна HTML Academy. Вот, к примеру, кнопка с эффектом по наведению или фокусу.

See the Pen Эффект кнопки by juwain (@juwain) on CodePen.

Отступы фонового изображения

Простой способ добавить отступы фоновому изображению:
background-position: center и background-size: calc(100% - Npx).

See the Pen zGawGV by juwain (@juwain) on CodePen.

JS-ликбез. this, call, apply, bind

А сегодня я буду вещать про this и методы вызова функций.

Тот самый this

Чтобы вызвать функцию и передать в неё желаемый объект в качестве this, можно воспользоваться методами функций call, apply или bind. Рассмотрим их различия.

Метод call

В качестве аргументов метод call функции первым принимает объект, который станет this внутри функции. За ним перечисляются через запятую параметры самой функции.

1
2
3
4
5
6
7
8
9
10
11
var omnomnom = function(param1, param2) {
console.log('Любимые ' + this.category + ': ' + param1 + ', ' + param2);
};

var favorite = {
category: 'фрукты'
};

omnomnom.call(favorite, 'яблоко', 'груша');

// выведет «Любимые фрукты: яблоко, груша»

Метод apply

Метод apply отличается от call тем, что в него можно передать любое число параметров в виде одного массива. В случае, когда параметров у функции много, нет необходимости их всех перечислять через запятую, а можно просто передать одним массивом.

1
2
3
4
5
6
7
8
9
10
11
12
var omnomnom = function(param1, param2, param3) {
console.log('Любимые ' + this.category + ': ' + param1 + ', ' +
param2 + ', ' + param3);
};

var favorite = {
category: 'фрукты'
};

omnomnom.apply(favorite, ['яблоко', 'груша', 'вишня']);

// выведет «Любимые фрукты: яблоко, груша, вишня»

Массивом в функцию удобно как раз передавать неопределённое число параметров. И внутри функции в таком случае лучше не завязываться на конкретные названия параметров, а использовать объект arguments для доступа ко всем параметрам сразу.

1
2
3
4
5
6
7
8
9
10
11
12
var omnomnom = function() {
console.log('Любимые ' + this.category + ': ' +
[].slice.call(arguments).join(', '));
};

var favorite = {
category: 'фрукты'
};

omnomnom.apply(favorite, ['яблоко', 'груша', 'вишня']);

// выведет «Любимые фрукты: яблоко, груша, вишня»

Метод bind

Метод bind отличается тем, что не выполняет функцию сразу, как call и apply, а возвращает её. Возвращённая функция вызвается как обычно, но внутри неё уже будет заданный this.

1
2
3
4
5
6
7
8
9
10
11
12
var omnomnom = function(param1, param2) {
console.log('Любимые ' + this.category + ': ' + param1 + ', ' + param2);
};

var favorite = {
category: 'фрукты'
};

var func = omnomnom.bind(favorite, 'яблоко');
func('груша');

// выведет «Любимые фрукты: яблоко, груша»

Заметьте, что остальные параметры могут передаваться списком через запятую как в метод bind, так и при вызове возвращенной функции.

Продолжение следует…