Попытка решения задач для 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>
Ожидаемый внешний вид:
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 интервью.
Накипело..
Программистов нужно готовить с самого детства и тогда будет высокий кпд экономики, изучайте тему, двигайте педагогические идеи и вместе мы сможем это сделать..
А ТЕМ КТО ДЕЛАЕТ СЕРВЕРЫ НА ЛИНУКСЕ-вход запрещен!
Пути развития в WEB-сфере
В последнее время озадачился вопросом дальнейшего развития в сфере веб-технологий и решил обратиться к коллективному разуму Пикабу за советом:) Жду комментариев с вашим виденьем ситуации или опытом в этой сфере, может кто-то уже сталкивался с тем, что "завяз" и нужно срочно выбирать новый путь движения.
Предисловие: в веб-сфере уже не новичок, разработкой сайтов занимаюсь лет с 13 (сейчас мне почти 29), за это время были и попытки всё это бросить и перейти в другую сферу, но в нашем городе-почтимиллионнике особо не разбежишься с выбором и "веб" был наиболее оптимальным выбором). Оглядываясь назад можно выделить основную проблему/ошибку с которой я столкнулся - это распыление на всё подряд начиная от работой с разными CMS(Joomla,Wordpress...остановился на MODX) заканчивая SEO, SMM, e-mail-маркетинг, возможно сосредоточившись на одном направлении (том же JS), картинку можно было изменить, но плакать о прошлом не наш путь, будем исправлять ошибки в будущем).
Что имеем сейчас: На данный момент я уже седьмой год работаю в небольшой компании как руководитель веб-направления и по совместительству как комбайн делаю, то что не могут/не хотят делать юные рекруты(дизайнеры, контент-менеджеры и стажеры-разработчики на подхвате), которые уходят через год-два как чуть наберутся опыта. Работа всегда есть, у компании основной сайт и несколько монобрендовых сателлитов. Здесь как раз пригодилось, упомянутое выше, распыление на все сферы от рекламы до разработки. Сделать с нуля сайт-каталог или магазин (при этом хочется сделать всё с душой, через сборщик, с препроцессорами, по БЭМу и тд, а не делать УГ на коленке) придумать новость о новинке, сделать кампанию в директе или рся, найти сотрудника через хх или sj, при этом вакансия должна быть приятна взгляду и цеплять "жертву", ну и наконец научить "дизайнера" предметной съемке или контент-менеджера делать рерайт. Всё это при полусерой зп в ~30к, кому-то покажется вполне нормальной (у нас в г. средняя наверно 15-20к), но тут ипотека, бензин/расходники и не желание есть дошики при этом:) отсюда уже поднадоевшие подработки у сомнительных заказчиков в виде сделать сайт на заказ, поднять в поисковике или сделать рассылку в мэйлчампе, с последним картину портит кидалово со стороны заказчиков, которые могут слиться даже если переведут предоплату.
Муки выбора: отсутствие перспектив и обострившееся желание куда-то двигаться заставило основательно задуматься о выборе дальнейшего пути развития, пока я выделил три основных направления (учитывая умения и желания, внизу набросал схему):
1. Работа с заказчиками на фрилансе (всё то, что как-правило делают небольшие веб-студии): разработка лендингов, каталогов, интернет-магазинов "под ключ", контекстная реклама, SEO-оптимизация/продвижение, рассылки, ну и работа со страницами в соцсетях. Весь тот багаж разбросанных знаний пригодится тут в наибольшей степени. Из минусов - это желательное последующего оформление юрлица, составление договоров и прочая скучная бюрократия. Также в минусы можно записать процент неадекватных клиентов, которых, я так полагаю, не убедит даже договор. Ну и на перспективу, по своему опыту понял, что будут сложности с поиском заинтересованных сотрудников при создании команды, большой зарплатой вряд ли сможешь заинтересовать на начальном/среднем этапе, да и есть большой процент людей которые сами не знаю чего хотят, научился и ушел в неизвестном направлении).
2. Работа Frontend-разработчиком или JavaScript-программистом: вариант с необходимостью постоянного обучения и заполнения пробелов прошлого:) Держу в голове этот вариант как наиболее перспективный уже наверно год, за последнее время освоил все эти фишки с препроцессорами (Less,Sass,Jade/Pug), сборщиками проектов (GULP, в процессе Webpack), работу с Node.JS и GIT. Сейчас активно вникаю в React. Самое сложное - это настроить свой мозг на постоянное обучение, ну и в голове крутится мысль, которую приходится отгонять "не поздно ли лезть во все эти дебри в почти 30 лет??". (тут ещё свое рода минус можно рассмотреть вычеркивание опыта веб-дизайна, сео, рекламы и тд.) Отсутствие опыта командной разработки или участие в энтерпрайз проектах осложнит поиск позиции в этом направлении. Тут особенно интересно мнение бывалых)
3. Работа менеджером проектов (product owner): интерес вызывает работа по современным методологиям (Agile: Kanban, Scrum), но понятие о них чисто теоретические(видеосеминары, статьи), ознакомительная работа в JIRA и Trello. Наверно плюсом пойдет опыт работы руководителем в целом. Но тут тоже всё начинать сначала, единственное, что в зависимости от проекта может пригодится опыт работы в веб-сфере.
4. - Недовариант (добавил в последний момент) - это разработка своего проекта, где также пригодится весь опыт разработки, продвижения и веб-рекламы. Как-то из благотворительных соображений запустил свой проект (на livestreet) с объявлениями о передачи животных в добрые руки, раскрутил группу, нашлись постоянные посетители, но потом всё загнулось из-за недостатка времени, он так пока и дрейфует в интернете (с дневной посещаемостью около 150) без копирайтера или вложений в рекламу. Может у кого-то возникнут мысли и поэтому поводу).
Ниже схема первых трех вариантов для наглядности. Высказывайте свое мнение:)
Ищу единомышленников для совместного обучения HTML/CSS/JS
Ищу единомышленников (новичков) для совместного обучения html/css/JS
Немного о HTML и CSS
HTML — своего рода строительный материал для веб-страничек. Читая специальные тэги (команды, слова, которые имеют особый смысл для браузера) браузер строит страничку с содержимым текстом, картинками и прочим в своем окне.
CSS — облицовочный материал, который делает всю красоту.
Грубо говоря, HTML — это то, что должно быть на сайте, а CSS отвечает за то, как оно должно выглядеть. Именно благодаря CSS мы видим различные эффекты, анимации и прочие вкусности на сайтах.
Учитывая доступность учебных материалов в сети предполагаю что данным вещам возможно научиться самостоятельно и бесплатно.
Материалы для обучения имеющиеся "на руках" для старта
Не в целях рекламы!
HTML Academy - можно бесплатно проработать львиную долю html и css
GeekBrains - HTML/CSS
HTML Academy | Интенсивный онлайн-курс «Базовый HTML и CSS» (2017)
htmlbook.ru - Библия верстальщика
Что потребуется - Голова, руки (можно из жо*ы, будем вместе вбивать их в плечи), блокнот или более серьёзная среда разработки (кому что нравится), набор браузеров, доступ в интернет, выберем предпочтительное средство связи (Любой из топовых мессенджеров + есть свой тёплый и ламповый сервер TeamSpeak)
Сроки обучения 1 этапа - пока каждый не сможет самостоятельно сверстать добротный шаблон
Если найдётся больше 5-10 человек для совместного обучения буду выкладывать сюда результаты нашего прогресса.
Тех кого заинтересовал прошу выкладывать свои контакты в комментарии, свяжусь с каждым, организуемся и назначим время старта.
До следующих выходных (24.02.2018) буду ждать ваши контакты в комментарии
Поставлю тег "Моё" для более обширного охвата аудитории, сильно не ругайте.
Есть наставник, сегодня (19.02.2018) обсудим в телеграме условия обучения =)
Всем добра! =)
Когда сдали нервы от начинающих программистов
На одном из блогов по программированию наткнулся на жесткий комментарий. Да, и на таких сайтах устраивают разборки, оказывается.
Картинка не очень четкая, поэтому помогу текстом:
Димка не отвечает на комментарии дибилов, а я отвечу, что вы далбаебы. Ущербные и деградирующие индивидумы. Схуяли ЧоТоТамForm нелогично, затупок ты ебаный?! Ты чо, считаешь что Form, это только HTML-форма? Да ты сука олень просто неебический. Эта часть сделана верно, блеать, дубина ты. Иди сука от сюда вообще. Заебали дегенераты в сообществе Yii. Одни нубы и ебланы. Толпы ебланов и нубов. И сука, не логичней переносить функционал в модель User, не логично нахуй, потому что там вообще ничего не должно быть, по сути, кроме методов для работы с ActiveRecord! Все остальное должно быть в Сервисах, Провайдерах, и, ахуеть да, внимание блядь, ФОРМАХ! Иди на хуй отсюда, чмо тупое. Убейся сука ап стену. Я все.
Скриншот и ссылка прилагаются:
Видимо автор комментария не выдержал простых вопросов от начинающих пользователей.
Сам комментарий можно увидеть здесь:
http://www.elisdn.ru/blog/65/seo-service-on-yii2-moving-user...
Материальный дизайн (materialize framework)
Просьба несведущих в программировании и веб-разработке не дизлайкать, а идти мимо
PHP для быдлокодеров
PHP для быдлокодеров,единственный язык на котором столько быдлокода