oleg.prog

пикабушник
поставил 710 плюсов и 86 минусов
715 рейтинг 352 комментария 2 поста 0 в "горячем"
5

Попытка решения задач для frontend интервью Пикабу

Ссылка: https://pikabu.ru/page/interview/frontend/


14. Напишите, пожалуйста, функцию, которая принимает строку, и превращает ее в хэштег:

- строка должна начинаться с символа #;

- каждое слово должно начинаться с прописной буквы, все остальные буквы строчные;

- функция должна возвращать false, если длина хэштега превышает 100 символов или равна 0;

- хэштег может содержать только буквы, цифры и символ #.



// В задании не указано что такое "буквы". Китайские тоже?

function getHashTag(str) {

    let ret = str.split(' ').map(

        function(x){

            return x

                .toLowerCase()

                .replace(/[^a-zа-я0-9]/g, '')

                .replace(/^(.)/g, function($1) { return $1.toUpperCase()})

        }

    ).join('');

    if (ret.length > 100 || ret.length==0) return false;

    return '#' + ret;

}

15. Юному специалисту поручили написать функцию валидации URL к сайту pikabu.ru:

- поддержка протоколов http/https;

- поддомен необязателен и может содержать только буквы, цифры и дефис;

- путь и параметры после домена не имеют значения.

Однако итоговая функция получилась некачественной и вам передали эту функцию на переработку.

Предложите, пожалуйста, вариант исправления данной функции:


function isValidUrl(url)

    return /(?:http|https):\/\/(?:[0-9A-z\-]*.)*(?:pikabu)(?:.ru)/.test(url);

}


// В задании не указано что такое "буквы". Китайские тоже?
function isValidUrl(url) {
    /http(s?):\/\/([0-9a-zA-Z\-]+\.)?(pikabu\.ru)/.test(url);
}

16. Имеется массив флагов изменения версий продуктов number[][], в котором каждый элемент является массивом, содержащим следующие значения: id продукта, флаг изменения мажорной версии, флаг изменения минорной версии, флаг изменения патча.

Например, запись продукта #12 без изменения - [12, 0, 0, 0], с изменением минорной и патча - [12, 0, 1, 1], с изменением только мажорной - [12, 1, 0, 0].

Необходимо написать код сортировки массива по "силе" изменения версии продуктов, где самые сильные вначале массива. Например, [12, 1, 0, 0] будет сильнее, чем [12, 0, 1, 1], но слабее, чем [12, 1, 0, 1]

Пример массива:


let products = [

[11, 0, 1, 0],

[8, 1, 0, 0],

[9, 1, 0, 1],

[3, 0, 1, 1],

[15, 0, 0, 1],

]


products.sort((a,b) => {
    for (let i=1; i<=3; i++) {
        if (a[i] < b[i]) return 1;
        if (a[i] > b[i]) return -1;
    }
    return 0;    
});

17. Необходимо реализовать функцию Caesar для кода ниже, которая будет применять шифр Цезаря с указанным ключом (сдвигом) для указанной строки. Алфивит - 256 символов.


let enc = Caesar(3);

enc('ABC'); // DEF

enc('hello'); // khoor

Caesar(10)('script'); // }m|sz~


function Caesar(d) {
    return function(str) {
        return str
            .split('')
            .map(function(x){
                return String.fromCharCode((x.charCodeAt(0) + d) % 256);
            })
            .join('');
    }
}

18. Реализуйте, пожалуйста, ES6 класс таким образом, чтобы выполнялось следующее условие:


class Base ....


if (Base.x + Base.x === 3 && (new Base().x) === Base.x + Base.x) {

console.log('Nice!');

}

class Base {
    static get x(){
        if (typeof this.d == "undefined") return 1.5;
        return this.d;
    }
    constructor() {
        this.d = 3;
        return {x:3};
    }
}

19. Есть функция, которая удаляет все элементы с data-role="user" внутри определенного контейнера. Однако в функции закралась ошибка, которая иногда дает о себе знать: некоторые элементы не удаляются. Необходимо исправить ошибку в данной функции:


function clearContainer() {

let cont = document.querySelector('#container'),

els = cont.childNodes;

for (let i = 0; i < els.length; i++) {

if (els[i].nodeType === Element.ELEMENT_NODE

&& els[i].dataset.role === 'user') {

cont.removeChild(els[i]);

}

}

}


function clearContainer() {
    document
        .querySelectorAll('#container [data-role="user"]')
        .forEach(function(x) {
            x.parentNode.removeChild(x);
        });
}

20. Пожалуйста, опишите какие вы видете реальные и потенциальные проблемы в следующем HTML коде:


[тут очень длинный кусок херового HTML, см страницу по ссылке]


1) Нет тэга с кодировкой, желательно utf-8
2) Нет аттрибута lang у тэга <html>
3) Использование http-equiv="content-language" устарело
4) Использование аттрибутов type и aid у <div>
5) Использование аттрибута align и тэга <font> - это надо делать через CSS
6) Не использование семантических тэгов вроде <header>, <nav>, <section>, <footer>, ...
7) Загрузка CSS в самом конце документа, это надо в <head> переместить
8) Использование inline JS, который, к тому же, зависит от элементов вокруг
9) Использование inline CSS
10) Не использование настоящих кнопок <button type="button"> или хотя бы <input type="button">
11) Отсутствие href в ссылках
12) Пронумерованный список создан вручную, вместо семантического <ol>

21. Напишите, пожалуйста, наиболее точный CSS селектор (один, без запятых), который выберет в заданном HTML фрагменте SPAN элементы, справа от которых стоит комментарий <!-- этот -->

Однако не все так просто! :) Допускается в селекторе использовать только один раз псевдо-классы, начинающиеся с nth- (например, nth-child(), nth-of-type() и др).


[тут очень длинный кусок HTML, см страницу по ссылке]


form > div:not([class="line"]) > input + div span:nth-child(3n-1)

22. Напишите, пожалуйста, код, который будет преобразовывать строку в волну:

- Каждый символ, должен быть помещен в span;

- До середины строки каждый тег span должен иметь увеличенный на 5 пикселей шрифт по отношению к предыдущему, начиная с 10 пикселей;

- После середины размер шрифта должен уменьшаться обратно;

- Пробелы не должны влиять на изменение размера.

Для реализации используйте строку из тега input, результат поместите в тег .result


<div><input type="text"></div>

<div class="result"></div>


Ожидаемый внешний вид:

Попытка решения задач для frontend интервью Пикабу Программирование, Программист, Интервью, JavaScript, PHP, Sql, HTML, Длиннопост

const s = document.querySelector('input').value;

// half the length, not counting spaces

const len = (s.replace(/\s/g, '').length -1) / 2;

let htm = '';

let idx = 0;

s.split('').forEach(function(c) {

    let sz = 10 + (len - Math.abs(len - idx)) * 5;

    let style = ' style="font-size:' + sz + 'px"';

        if (c != ' ') {

            idx++;

        }

    htm += '<span' + style + '>' + c + '</span>';

});

document.querySelector('.result').innerHTML = htm;

Если людям будет интересно, сделаю такой же пост для backend интервью.

Показать полностью 1

Скидки на товары и услуги для геймеров (и не только) в честь E3

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

Игровая периферия от SteelSeries

Скидки на товары и услуги для геймеров (и не только) в честь E3 Длиннопост

Гарнитуры, мыши и коврики для них, клавиатуры, контроллеры – за этим можно идти к бренду SteelSeries, который поддерживает киберспортивные турниры. Вводите промокод SS10 и покупайте разные игровые устройства со скидкой 10% – без ограничений.


Ввести промокод (только перед этим зарегистрируйтесь)

Доставка еды от «Кухни на районе»

Скидки на товары и услуги для геймеров (и не только) в честь E3 Длиннопост

«Кухня на районе» идеально подходит, чтобы не отвлекаться от игры или стрима. Вы просто заказываете в приложении и за 25 минут получаете свою еду. Без минимальной суммы заказа и комиссии за доставку. Всем новым клиентам – скидка 500 рублей по пикабушному промокоду PIKABUE3.


Заказать еду

Автобусы на Daedu.ru

Скидки на товары и услуги для геймеров (и не только) в честь E3 Длиннопост

До Лос-Анджелеса, где проходит E3, на автобусе, конечно, не доехать, зато вот по стране и ближнему зарубежью прокатиться можно. Сайт Daedu.ru — это простой и удобный поиск самых дешевых билетов на автобусы. Вы просто задаете направление, а сервис ищет в интернете лучшее предложение.


Найти билет

Игровое кресло ThunderX3 EC3

Скидки на товары и услуги для геймеров (и не только) в честь E3 Длиннопост

Удобное кресло – важно всегда: и для работы, и для стриминга. Кресло ThunderX3 EC3 может похвастаться двумя подушками в комплекте (под поясницу и шею), механизмом «топ ган» и технологией AIR Tech – дышащей поверхностью, с которой летом не будет жарко. Главный плюс – раскладывающая спинка аж на 180 градусов. Когда надоест сидеть, можно прилечь.


Не забудьте перед заказом ввести промокод PIKABU20, который дает 20% скидку.


Купить кресло

Игры месяца в июне от PlayStation

Скидки на товары и услуги для геймеров (и не только) в честь E3 Длиннопост

Эксклюзивное предложение для подписчиков PS Plus в этом месяце включает две бесплатные игры для PlayStation 4:


Sonic Mania

Выход этой части был приурочен к 25-летнему юбилею серии игр о Сонике. Разработчики сохранили лучшие черты игрового процесса первых игр (с SEGA!), добавив новые возможности.


Borderlands: The Handsome Collection

Это сборник из игр Borderlands 2 и Borderlands: Pre-Sequel. Если вы никогда не играли в этот комедийный экшен, сейчас, в преддверие выхода третьей части, самое время наверстать. А тем, кто уже знаком с серией, стоит обратить внимание на новое бесплатное сюжетное дополнение «Командир Лилит и битва за Убежище», которое послужит мостиком к грядущей Borderlands 3.


Посмотреть игры месяца в PS Plus

Первая поездка на Uber Russia

Скидки на товары и услуги для геймеров (и не только) в честь E3 Длиннопост

Если еще не пользовались Uber Russia, тогда качайте приложение в App Store или Google Play. В разделе «Промокод» введите PIKABU, при заказе машины выберите оплату картой и наслаждаетесь скидкой 40% (максимальный размер скидки – 150 рублей). Акция действует до 14 июля 2019-го.

Товары для геймеров на goods.ru

Скидки на товары и услуги для геймеров (и не только) в честь E3 Длиннопост

Используйте промокод PikabuE3, чтобы получить выгоду 1000 рублей при покупке от 4000 рублей на первый заказ. Он работает с 14 июня по 30 июня 2019-го.


Промокод действует на все товары, но мы рекомендуем заглянуть в специальный раздел goods game и обратить внимание на акционные товары, спецпредложения, кэшбэк на все товары и многое другое.


Перейти в геймерский раздел

Показать полностью 5
Отличная работа, все прочитано!