Самые комментируемые за месяц

Задачки для собеседования на фронтендера

24 октября, 16:02

Эти задачи встречаются довольно часто. Рекомендую обращать внимание не на решения, а на то как объясняется происходящее.

Что выведет консоль?

var b = {}; 
var c; 

b.b = 1; 
c = b; 
c.b = 2; 

console.log(b.b); // ? 
console.log(c.b); // ?

var i = 10; 
var array = []; 

while (i--) { 
  array.push(function() { 
    return i + i; 
  }); 
} 

console.log([ 
  array[0](), 
  array[1](), 
])
let x, { x: y = 1 } = { x }; y;
console.log(x, y);

Напишите функцию

console.log(sum(2)(3)) // 5
console.log(sum(2,3)) // 5

Напишите функцию, которая делает копию объекта

Напишите функцию, аналогичную методу Array.prototype.reduce()

Есть связанный список. Напишите функцию, которая его переворачивает задом наперёд

Синтетические задачи, оторванные от реальной жизни:

let a = 10 
a += ++a + a++ + a++ 
console.log(a);

// как сделать чтобы результат был положительный?
console.log((a == 1) && (a == 2) && (a == 3)) // true

var y = 5;
var x = function(){
    return y;
};
var z = function(t){
    var y = 10;
    return t();
};
console.log(z(x));

(function(x, f = () => x) {
    var x;
    var y = x;
    x = 2;
    return [x, y, f()];
})(1);

Уроки спецпроектов

1 августа 2017, 18:40

1. Нельзя доверять стороннему АПИ:
— данные могут не прийти
— нужные вам поля могут быть пустыми или иметь неожиданное значение.

2. Следствие п. 1 — ваш код должен быть к этому готов.
Всё должно отображаться и работать без ошибок даже если данные некорректны или отсутствуют.

3. Обязательно учитывайте кэширование на стороне клиента.
— «скручивайте версию»: ссылка на файл скрипта или стилей должна меняться при изменении содержимого файла, чтобы клиент всегда получал свежую версию;
— если используете Реквайр, то придется переименовать файл, потому что Реквайр не умеет дополнять путь к отдельному файлу ГЕТ-параметром;
— если используете Вебпак, то добавляйте хэш к имени файла чанка, но не забывайте скручивать версию в месте подключения точки входа:

output: { 
...
    chunkFilename: '[name].[chunkhash].min.js'
}

4. Сафари в Айос  — чума 21 века для веб-разработчика

Сафари на айфонах по-особенному работает с айфреймами, у которых динамический контент. Например, с виджетом Твиттера.

Если такой айфрейм положить в абсолютно позиционированный блок с фиксированной высотой и внутренним скроллом (owerflow-y: auto), то он не будет растягиваться и скролл не будет работать. Похоже, сафари определяет границы блока и его контент при первом рендере и не учитывает загрузившийся айфрейм высотой 6000+ пикселей. Помогает такой хак:

*
    -webkit-overflow-scrolling: touch
.block__wrapper
    height: calc(100% + 1px)

5. Айфреймы в мобильном Сафари вообще часто ведут себя не так, как вы ожидаете. Например, их размер может внезапно зависеть от размера контента или от размера еще непонятно чего. Если нужно сделать адаптивный айфрейм, то помогает такой хак:

iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }

6. Фоновый SVG в IE9-11 требует обязательно указывать атрибуты width и height, иначе его размер вырастет непредсказуемо, растянув или уменьшив картинку.

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="1117" height="1403" viewBox="0 0 1117 1403">
...