Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Давайте наймем дизайнера интерфесов (UX/UI)

Я уже писал о том, что не получится делать качественный продукт без дизайна. Ну вот никак. Все потому что вашей разработкой никто же пользоваться не захочет. Мы же мечтаем о том, чтобы наши клиенты были довольны и платили бы и дальше за услуги, которые мы так хотим им оказать, верно?

Значит нам нужен качественный интерфейс. Тут дело даже не в том, что “программисты должны программировать, а дизайнеры дизайнить”, пусть каждый занимается тем, в чем он хорошо, тут я даже образование в расчет не беру – если есть результаты, то все отлично. Проблема в том, что каждая область таит в себе немало проблем и нужно основательно в нее погрузиться для того чтобы эти самые результаты были. Я еще не встречал человека, который действительно хорошо во всем, что-то у него да проседает. На мой взгляд лучше углубляться в одну область, а если интересы сменятся, то переключится на другое и там снова копать пока не станешь профессионалам.

ux-designer

С дизайном все именно так и происходит, поэтому для того чтобы получить качественный продукт, нужно погрузиться и разбираться в этом. Именно для этого и нужно выделить человека, который бы искал решения, проводил исследования и постоянно бы думал о том как сделать интерфейс лучше. Если кто-то из разработчиков хочет этим заняться и он может показать, что умеет, то ради бога. Второй вариант – это начинать искать дизайнера, который будет решать эти вопросы.

Для начала опишем инструментарий, который понадобится для работы. На данный момент я вижу 2 абсолютно необходимые программы, которые нужно обязательно использовать, это: Photoshop и Sketch. Да, да это значит что дизайнеру нужно будет купить еще и “яблочный компьютер”, ребята это нормально, не пугайтесь. Эта машина будет служить верой и правдой и максимум, если не сработаетесь, то перейдет к другому дизайнеру, волноваться не нужно.

Разумеется на собеседовании нужно спросить чем кандидат владеет и в какой среде привык работать. Если это только виндоус, то это значит что “скетчом” он не пользовался и тогда возникает вопрос – а как же он делал интерфейсы и потом передавал работу разработчикам. Ведь дизайнер же не в вакууме работает. Его работа, это вводная для разработчиков, им тоже должно быть удобно коммуницировать с ним. Можно конечно передавать дизайны файликами и всю спецификацию описывать во вложенном файле (цвета, шрифты, размеры), однако, есть же способы лучше.

Например, есть облачные сервисы для того, чтобы делиться дизайном Zeplin и Avocode. Зеплин дольше на рынке и многие крупные компании им уже вовсю пользуются (например, HH.ru и zelando), авокоде помоложе, но предоставляет интересный функционал и вполне имеет смысл посмотреть в сторону обоих.

В чем же из преимущество по сравнению с “файликами”? Интерактивность – загрузил файл и разработчик сам может посмотреть размеры, цвета и шрифты. Ссылку на загруженный файл можно передать кому угодно в компании и они смогут просмотреть ее в браузере, без дополнительного программного обеспечения. Ну и конечно комментарии – прямо на дизайне, можно везти диалог. Сплошные преимущества.

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

Самое главное в итоге, это не отдельные профессионалы, а отлаженные процессы работы. Иначе как же вы будете масштабироваться? Или как будете выкручиваться, когда (не “если”, а “когда”) ключевой человек уйдет? Ведь любой специалист, нанятый в единственном экземпляре в какой-то мере становится ключевым. Так что имейте это ввиду.

Поделиться:

Как поправить изменения в файлах в последнем коммите

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

И изменения просто наложатся друг на друга и в итоге все исправится. Однако, это не самый красивый и не самый генерный способ. Тем более, что возможно, что нужно пересобрать файлы не последнего коммита, а предпоследнего, или три коммита назад, или четыре.. Ну вы меня поняли. Нужно поступить иначе.

keep-calm-and-git-rebase

Для начала конечно нужно узнать хэш коммита, после этого идем в интерактивный ребейз:

В открывшимся списке выбираем коммит, который хотим изменить и меняем его на edit. Ребейз на нем остановится и вернет управление в наши руки. Теперь нужно вынуть файлы:

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

И все, дерево коммитов будет переделано.

Поделиться:

Возможно ли, чтобы a ==1 && a== 2 && a==3 вернули true?

Из прекрасного и удивительного мира JS. Возможно ли чтобы a == 1 && a == 2 && a == 3 ?

Ответ: Да, чувак, возможно!

Can (a ==1 && a== 2 && a==3) ever evaluate to true?

Поделиться:

Вопросы, которые я бы задал на собеседовании

Разумеется вопросы на собеседовании на позицию фронтендера. И нет, это не единственные вопросы, а только те, что касаются технической части. Нужно, конечно, еще и “за жизнь” поговорить. Однако, это хорошая отправная позиция для того чтобы почувствовать чем “программист дышит”. Стоит так же отметить, что каждый из вопросов – это скорее тема для мини обсуждения, которое может вырасти из ответа кандидата.

frontend-interview-questions

JS

  • Опишите следующую конструкцию и когда бы вы ее использовали: (() => {})()

IIFE – это очень распространенный паттерн в JS. Тут же имеет смысл задать несколько вопросов про скоуп – что это такое и какое имеет отношение к использованию этой структуры.

  • Когда будет усполнена переданная функция: setTimeout(() => {})

Смотрим насколько человек разбирается в том как работает движок js. Тут же имеет смысл поговорить о том как исполняется язык в одном треде и как решается асинхронность.

  • Напишите функцию, которая бы выдавала вот такой результат: add(3)(4); // 7

Тут видим насколько человек понимает что такое замыкание, как они работают. Понимает как работают функции в языке.

  • Вопрос со звездочкой, в продолжение предыдущего. А что если мы не знаем сколько может быть передано чисел. То есть в предыдущем примере два числа: 3 и 4, а если их может быть неограниченное количество add(3)(4)(10); // 17 или add(3)(4)(1)(1)(1)(2); // 12

Не обязательный вопрос, но если кандидат знает, то сильный плюс ему 🙂

  • У вас некий компонент с заранее неизвестным количеством кнопок и их количество может всегда измениться. Как вы будете обрабатывать события клика по ним?

Вопрос на понимание того как распространяются события в DOM’е.

  • Какой будет результат вот этого кода:

Имеет смысл пройтись с кандидатом по каждой строчек, чтобы он описал что будет происходить и почему.

CSS

  • Как расопложить элемент по центру вертикально?

Святой грааль стилей 🙂

  • Что вы можете рассказать о скорости css селекторов. Какой способ будет быстрее всего работать в браузере.

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

Ну и поскольку пишу я сейчас на реакте, то и вопросы про сам фреймфорк обязательно будут. Хотя, только в том случае, если программист использовал его. Если он писал на других фреймворках, то конечно мучать его реактом нет смысла. В сутках всего 24 часа, все познать не получается.

React

  • Какие библиотеки вы использовали вместе с реактом

Вопрос на обсуждение стека. Что кандидат уже пробовал. Что выбрал для запросов к серверу, что для хранения данных, Flux или Redux

  • Почему имеет смысл выбрать Redux. В чем его преимущество, либо недостатки

Вопрос на понимания имутабильности. Стоит затронуть тему PureComponents, что это и зачем, а также как Redux облегчит работу с ними.

  • Объясните необходимость атрибута key.

Насколько кандидат понимает работу реакта. Как реакт определят рендерить ли компонент заново или нет.

Поделиться:

Скриншоты кода

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

carboon-beautiful-images-of-your-source-code

https://carbon.now.sh/
https://github.com/dawnlabs/carbon

Поделиться:

Github предупреждает об уязвимости в jQuery

Вчера github разослал “письма счастья” касательно уязвимости проектов использующих jQuery ниже третьей версии.

github-jquery-vulnerability

На моей памяти github первый раз выступает в такой роли. Это очень круто, по сути это же единственный ресурс с таким охватом опенсорсных проектов, после него, пожалуй, идут npm и bitbucket. Комьюнити беспокоится о своих птенцах ^_^

Ссылки по теме:

Поделиться:

Из прекрасного про стайлгайды

self-thought-coder

Поделиться:

Новый html элемент – dialog

В следующей версии html 5.2 появляется новый элемент <dialog>, который как раз и предназначен для нативных всплывающих окон. Не тех, что были в js с начала времен alert() и dialog(), а нормальных, не блокирующих интерфейс и не блокирующих исполнения кода. Разумеется можно накладывать свои стили и анимации.

html-element-dialog

Ссылки по теме:

Поделиться:

jarvis – информационная панель для webpack

Последнее время достаточно часто в трендах гитхаба можно встретить jarvis‘а – информационную панель для webpack. Симпатичный дизайн и заявленные возможности по сбору информации о собираемом проекте притягивают братьев фронтендеров лучше любой приманки 🙂 Ну и я, конечно, решил потестировать и в итоге совершенно не понял зачем это нужно.

jarvis-screenshot

Да, конечно, все выглядит очень модно, но кроме этого все его “фичи” ставят в тупик тем, что их совершенно невозможно применять на большом проекте. Причем дело именно в дизайне, в интерфейсе пользователя.

Очень сложно пробираться по списку модулей, особенно на большом проекте. В моем случая приложение состоит из более чем 30 частей, которые подгружаются постепенно, по мере необходимости. Их число будет только расти, но уже сейчас jarvis никак не дает возможности нормально просматривать такой список. Никаких фильтров и поиска нет и не предвидится на горизонте.

А больше, собственно ему и похвастаться то и не чем. Они конечно говорят о полезности панели, которая показывает время загрузки модулей, только толку то. Мне нужно знать сколько будет грузиться страница у пользователя, а не через сколько скачается тот или иной файл. Как мне это считать-то?

В общем по-прежнему остаюсь верным пользователем bundle-analyzer, ничего лучше пока не придумали.

Поделиться:

Хром меняет полиси относительно автозапуска видео на странице

С этого месяца хромом вводятся более суровые правила касательно автозапуска видео на странице. Видео по-прежнему можно будет запускать из кода, но вот звук будет по-умолчанию отключен. Есть исключения из правил, для того чтобы браузер дал проигрывать видео со звуком должен выполниться один из критериев:

  • Пользователь как-то интерактировал со страницей (кликал мышкой, тапал и т.п.)
  • Пользователь уже проигрывал видео со звуком на этом домене
  • На мобильном устройстве пользователь добавил страницу на рабочий стол

i-will-found-you-and-will-mute-you

Если честно, то я доволен. Чем строже с автозапуском видео тем лучше.

Autoplay Policy Changes

Поделиться: