4 posts tagged

фронтенд

Какие каналы читать в Телеграме

Делюсь списком Телеграм-каналов, которые я с интересом читаю. Разработка, дизайн, языки, редактура, журналистика, путешествия, разумность.

For Web — полезности для разработчиков интерфейсов: фронтенд, дизайн и программирование. Признаюсь, слукавил: этот канал я не читаю, я в него пишу.

Веб-стандарты — ежедневные новости и события фронтенда.

Breakfast.js — ежедневная утренняя порция фронтенд-новостей от Дмитрия Мананникова.

devSchachtChannel — анонсы новых статей и подкастов от devSchacht.

Иван Акулов про фронтенд — заметки про фронтенд, UX и смежные темы.

webo_ru — Виталий Харисов из Яндекса об оптимизации сайтов. Есть английская версия.

Code Hipsters — «квинтэссенция людей и технологий, призванная разрушать стереотипы». Фронтенд, машинное обучение, большие данные, философия программирования.

Про руководство разработчиками — руководитель службы разработки интерфейсов Олег Мохов из екатеринбуржского Яндекса о своей работе и её особенностях.

HR отвечает — Вероника Ильина о поиске работы, хороших резюме, собеседованиях и специфике работы эйчаров.

Всё о программировании (с Козулей) — Владислав Козуля о карьере, стартапах и своём опыте разработки.

isqualog — Софья Ильинова о фронтенде, дизайне, работе и жизни.

Internet 9000 — Сергей Сурганов о дизайне и технологиях.

TechSparks — Андрей Себрант с новостями хайтека.

Записки Коха — Артур Кох о email-разработке и смежных темах.

Evil Martians — Злые марсиане о стартапах, веб-разработке, интернет-бизнесе, бэкенде, фронтенде, мобильной разработке, devops и data science.

запуск завтра — техдир «Медузы» Самат Галимов о своих буднях и технологиях.

Про Сидней/Atlassian — Дмитрий Сорин об опыте переезда в Австралию и работе в Atlassian.

Интерфейсы без шелухи — Антон Жиянов о продуктоводстве, интерфейсах, здравом смысле и разработке софта.

Чёт приуныл — Ян Хацкевич с анонсами новых статей из своего личного блога о дизайне.

Design without cats — Андрей Болонев о дизайне без котиков. Мысли, цитаты из статей, реальные кейсы.

Design & Productivity — Костя Горский про дизайн, продуктивность и жизнь. Мало ссылок и много мыслей.

GOV — о дизайне государства.

Канал Ильи Бирмана — заметки, находки и советы о дизайне.

Л — Людвиг Быстроновский о дизайне, искусстве, продуктивности.

Бюро Горбунова — дизайн-советы, наблюдения и книги.

No Flame No Game — Аня Булдакова о продуктовом менеджменте.

Главред — Максим Ильяхов с советами и статьями о тексте, редактуре, информационном стиле и рекламе.

ГЗОМ — о тексте, тонкостях и пунктирностях русского языка, грамматике и стилистике, работе редактора, работе мозга — затейливо и с внятной аргументацией.

Мильчин-канал — инъекции «Справочника издателя и автора» Аркадия Мильчина и Людмилы Чельцовой. Канал для редакторов, дизайнеров и зануд.

Исправил — Никита Юкович о русском языке и о том, как не ошибаться.

Angry Translator — Даниил Орловский о тонкостях английской грамматики, типичных и нетипичных ошибках, лексике.

Сразу нет — Иван Колпаков из «Медузы» о журналистике.

Разумная внимательность — Рахим Давлеткалиев об осознанности, медитации, разуме и реальности.

За бугром — размышления иммигранта о жизни в США.

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

Че Ченел — Илья и Стася Чекальские о путешествиях, переездах и жизни в Польше.

Тинькофф-журнал — новые cтатьи об управлении деньгами. Как экономить, вкладывать, защищать свои права и общаться с банками.

А что читаете вы?

Sep 16   дизайн   телеграм   фронтенд

Визуальная семантика, или чем разметка отличается от стилей

Иногда новички во фронтенде не понимают истинного предназначения разметки (HTML) и стилей (CSS). Однажды в комментариях к одной из публикаций Форвеба возник вопрос:

Что в 2017 лучше использовать для вёрстки таблиц, HTML-таблицы или CSS-гриды?

Что не так с этим вопросом? Давайте разберёмся.

Разметка — про семантику

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

Стили — про внешний вид

Голый текст это хорошо, но ещё лучше, когда его можно оформить — задать размер шрифта и интерлиньяж, ограничить ширину, выделить заголовки, покрасить ссылки в нужный цвет. За всю эту внешнюю красоту отвечают стили (CSS), и они чаще всего никак не влияют на семантику, то есть на смысл текста. Они лишь дают возможность изменить его внешний вид.
Хороший пример — CSS Zen Garden. Один и тот же HTML-документ, смысл которого не меняется, оформлен более чем двумястами разными способами.

Если разметка не отвечает за визуальное представление, что в HTML делают элементы вроде <i> или <strong>?

Дело в том, что эти элементы тоже несут смысл. Например, так определяется элемент <strong> в спецификации HTML:

Элемент <strong> означает важность, серьёзность или срочность его содержимого.

Заметьте, ни слова не сказано о выделении содержимого жирным начертанием шрифта. Жирное начертание для <b> и <strong>, фоновое выделение для <mark> и другое подобное оформление задаётся стандартыми стилями браузера (user-agent stylesheet). Эти стили никак не относятся к семантике разметки. Более того, в разных условиях одни и те же HTML-элементы могут быть визуально представлены по-разному (например, элементы форм на Windows и macOS). Несмотря на разный внешний вид, кнопки на Windows и кнопки на macOS несут один и тот же смысл.

Разделяйте семантику и представление

Вернёмся к вопросу из начала статьи:

Что в 2017 лучше использовать для вёрстки таблиц, HTML-таблицы или CSS-гриды?

Таблицы нужно размечать как таблицы, то есть тегами <table>, <td> и так далее. Как они будут выглядеть на экране у пользователя — дело ваше, вы полностью контролируете их внешний вид через стили. Ничего не мешает разметить HTML-таблицу и стилизовать её CSS-гридами или флексами.

Запомните: HTML — про семантику, CSS — про внешний вид.

2017   css   html   вёрстка   фронтенд

Чему учиться в 20** году, если вы — фронтенд-разработчик

  1. Изучайте разные парадигмы программирования (императивное, функциональное, логическое, автоматное программирование). Не нужно следовать только одной парадигме — каждая из них может оказаться полезной в зависимости от задачи.
  2. Научитесь писать (и пишите!) тесты. Автоматическое тестирование:
    — намного дешевле ручного;
    — помогает выявлять баги ещё на этапе разработки;
    — вселяет в вас уверенность в своём коде;
    — поможет вам убедиться, что вы ничего не сломали очередным рефакторингом.
  3. Не изучайте новые фреймворки и библиотеки; изучайте подходы, лежащие в их основе.
  4. Изучайте структуры данных и связанные с ними алгоритмы: списки, графы (в частности деревья), битовые карты, хеш-таблицы. Это расширит ваш кругозор и вы станете видеть более эффективные и простые способы решения ежедневных задач.
  5. Учитесь думать о задачах в мире бизнеса, а не в мире разработки. Помните о том, что программистам платят за решение задач бизнеса, а не за количество написанных строчек кода. Думайте о бизнесе, прежде чем переписывать проект с нуля на очередном модном фреймворке. Думайте о бизнесе, когда нужно определиться со списком поддерживаемых браузеров — если клиенты бизнеса пользуются IE8, ваша работа поддержать его, а не выводить надпись «Ваш браузер устарел, обновитесь!!!».

Универсальный совет — изучайте фундаментальные, проверенные временем подходы и приёмы, а не меняющиеся каждые n месяцев инструменты.

2017   учёба   фронтенд

Поиск работы фронтендером в 2016 году

Этой осенью я искал новую работу. Собеседовался в четырёх компаниях: в Иннове, Тинькофф Банке , Нетологии и Рамблере. Ну и напоследок успел пообщаться с ребятами из Яндекса. В этой заметке расскажу о своих впечатлениях и приведу все запомнившиеся задачи с собеседований.

Иннова

В Иннове я работал удалённо последние 10 месяцев. С компанией общался насчёт перехода с удалёнки в офис. Мне сразу сказали, что нужно будет пройти серию интервью с разными сотрудниками. В итоге я пообщался с тимлидом Фогеймера (это проект, над которым я работал в Иннове), с эйчаром и с кем-то из руководства (так и не понял, с кем).

Впечатление от собеседований осталось двоякое. Техническое собеседование с тимлидом и общение с эйчаром были вполне приятные, а вот общение с руководством было довольно странным. Задавали вопросы в духе «какие у вас планы на ближайшие десять лет», «какие у вас глобальные мечты», «чем вы можете быть полезны компании».

+ крутые проекты и интересные задачи (по собственному опыту);
+ обучение английскому языку за счёт компании;
+ классный офис с летней верандой, располагается на Таганской: http://map.inn.ru/

– длинный процесс найма.

Нетология

Пожалуй, наиболее приятные впечатления остались от Нетологии. Первое собеседование было с двумя штатными фронтендерами и с руководителем отдела разработки. Ребята (фронтендеры) поспрашивали меня минут десять, а затем мы полчаса просто непринуждённо общались на тему технологий и разработки. Затем пришёл руководитель отдела, с которым мы отдельно поговорили о моём опыте и о Нетологии. После первой встречи мне дали тестовое задание. Суть задания — сделать на Реакте и Редаксе редактируемый список сотрудников. Я не стал заморачиваться с вёрсткой и сделал только логику, сопроводив это рассказом о моём прошлом опыте вёрстки и ссылками на выполненные работы. После выполнения тестового задания посетил ещё две встречи — одну с продуктологом, другую с одним из основателей Нетологии.

+ чуваки улучшают российское онлайн-образование;
+ офис на Тульской (одна станция до кольца);

– нет ДМС;
– длинный процесс найма;
– на время испытательного срока понижают оклад.

Тинькофф Банк

Довольно прогрессивный банк, делающий ставку на онлайн-продукты. Было одно техническое собеседование, но с большим количеством вопросов на знание JS. По вёрстке почти ничего не спрашивали, по штукам вроде Реакта тоже. После собеседования попросили прислать анкету для проверки меня службой безопасности банка. Работа в банке выглядит заманчиво, но есть пара нюансов. По некоторым данным, в банке с отделом фронтенда всё не очень хорошо (в плане менеджмента). Ну и говорят, что довольно большую часть работы банк отдаёт на аутсорс.

+ корпоративный фитнес-центр;
+ большой отдел разработки, есть у кого учиться;
+ хорошая зарплата;
+ короткий процесс найма;

– офис на Водном Стадионе, что не очень близко к центру;
– часть работы отдают на аутсорс.

Рамблер

Раньше я видел список вакансий компании, но мне казалось, что я до их уровня ещё не дорос. Довольно неожиданно мне написали оттуда с предложением пообщаться о работе. Была одна встреча, с двумя эйчарами и одним разработчиком. Сперва эйчары попросили рассказать меня о своём опыте (куда без этого), затем разработчик давал разные задачи. Затем мне вкратце рассказали о компании и о том, чем нужно будет заниматься. В компании сейчас активно используется Реакт, вроде как делается своя библиотека компонентов, ну и в целом развивается инфраструктура.

+ довольно большая компания с большим количеством сотрудников и разных проектов;
+ офис на Тульской;
+ корпоративный английский;
+ бесплатные завтраки для сотрудников (по непроверенным данным);
+ короткий процесс найма.

– не все команды занимаются интересными задачами, где-то довольно жёсткие сроки;

Яндекс

Собеседовался на стажировку, поэтому всё было не так сложно и страшно. Первая встреча была в офисе, с ребятами из команд Метрики и Поиска. По сути я пришёл на два часа, и ребята из каждой команды общались со мной по часу. Первый час я делал задания на знание JS. Второй час был посвящён разговорам о жизни и о технологиях, под конец ради интереса мне дали задание на знание вёрстки (единственный раз за все собеседования во всех компаниях). Примерно через неделю было два созвона по скайпу с теми же ребятами. На этот раз никаких заданий не было, а мне рассказывали о задачах и процессах в их командах.

+ крупная и известная компания;
+ серьёзные высоконагруженные проекты;
+ командировки в разные города;
+ n-ая сумма денег на бейджике для оплаты еды в близлежащих заведениях;

– высокий порог вхождения из-за БЭМ-стека.

Задания

Что выведется в консоль? Как добиться правильного вывода в консоль, не убирая setTimeout?

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i); // ?
  }, 0);
}


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

var a = b = {
  value: 1,
};

var b = {
  value: 2,
};

a.value = 3;

console.log(a.value); // ?
console.log(b.value); // ?


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

var a = {
  v: 1,
};

var b = {
  v: 2,
};

function logValue() {
  console.log(this.v);
}

logValue.bind(a).bind(b)(); // ?


Что такое call, apply, bind, зачем они нужны.


Напишите полифил функции bind.


Дан массив целых чисел, найдите наибольшее из них.


Даны два массива целых чисел, найдите общие элементы.


Напишите функцию, принимающую на вход строку и проверяющую, является ли эта строка палиндромом. Приведите несколько вариантов решения.


Напишите функцию, принимающую массив произвольных слов и на выходе дающую двумерный массив анаграмм:

['стол', 'барокко', слот', 'кот', 'кошка', 'ток', 'коробка']
// ->
[
  ['стол', 'слот'],
  ['кот', 'ток'],
  ['барокко', 'коробка'],
]


Есть два класса: принтер с методом print() и сканер с методом scan(). Нужно получить класс МФУ, имеющий оба этих метода.


Напишите функцию, принимающую на вход время (в любом формате) и возвращающую угол между стрелками аналоговых часов.


Дано поле морского боя с размеченными на нём кораблями. Спроектируйте решение для подсчёта количества кораблей на этом поле.


Напишите функцию для сложения чисел, поддерживающую неограниченное количество вызовов:

sum(2)(3)(); // -> 5
sum(1)(2)(3)(4)(); // -> 10


Напишите функцию, которая принимает массив с неограниченной вложенностью и делает из него плоский массив:

[1, [2, [3, 4], 5], 6, [7]]
// ->
[1, 2, 3, 4, 5, 6, 7]


Чем поведение скрипта с атрибутом defer отличается от async?


Есть массив с адресами картинок. Как загрузить все картинки и выполнить какую-либо операцию после окончания загрузки всех картинок?


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

{
  value: 0,
  next: {
    value: 5,
    next: {
      value: 2,
      next: null,
    },
  },
};


Расскажите всё, что вы знаете о событиях в JS.


В соцсети выложили фото котят, под ним динамически добавляются комментарии. У каждого комментария есть кнопка «лайк», при нажатии на которую нужно отправлять запрос к АПИ. Как эффективно реализовать сценарий с нажатием кнопки?


Как расположить элемент по центру экрана с помощью CSS (назовите все известные вам варианты).


Опишите процесс отрисовки страницы браузером.

2016   работа   собеседование   фронтенд