Про PiterJS 13

Делюсь с вами впечатлениями и знаниями с piterjs 13!

Я сходил на PiterJS 13, который прошел в Селектеле, ниже информация, которую я почерпнул от докладчиков.

Re-imagining Webpack

Оказалось, что в Хельсинки одновременно с PiterJS проходил митап про react, и доклад Юхо Вепсалайнена мы слушали через скайп. Юхо рассказал про путь появления вебпака из не принятого пулл реквеста (#меняневзяли), про того, каких успехов добилася проект и показал красивые экспоненциальные графики роста скачиваний. Вот несколько интересных фактов и идей, которые я запомнил из его рассказа:

  • Вебпак хотят децентрализовать, отделить разработку ядра от разработки различных лоадеров. Для них есть отдельное сообщество, где ссылки на все репозитории есть в одном месте, очень удобно;
  • Вебпак принимает пожертвования через платформу Open Collective, вы можете видит все траты на проект и отправить деньги в помощь, в идеале, автор хочет работать над вебпаков фул-тайм и это вполне возможно с помощью этого механизма;
  • Можно голосовать за фичи, которые будут у разработчиков в приоритете на специальной странице;
  • Юхо написал книжку про вебпак (и ещё одну про реакт), её можно бесплатно прочитать тут или купить через leanpub.

Документация кода в JS

Вадим Горбачёв рассказал про то, как писать комментарии так, чтобы они были понятными. В целом, советы применимы к любому языку, самое важное:

  • Старайтесь, чтобы названия переменных и методов объясняли, что они делают;
  • Обязательно комментируйте код, в котором есть высокий уровень сложности, какие-то хаки и сюрпризы;
  • Автоматизируйте процессы — используйте автогенерацию и линтеры;
  • Указывайте в комментариях используемые единицы измерения и допустимые диапазоне;
  • Прочитайте книги «Code Complete» и «Clean Code».

А видео можно посмотреть по этой ссылке.

Нужен ли мне TypeScript?

Александр Баумгертнер попытался разобраться, нужна ли типизация и можно ли без неё обойтись. В качестве альтернативы TypeScript’у и Flow, Александр предлагает использовать очевидные названия переменных и функций, а для удобства работы в редакторах использовать простые JSDoc аннотации.

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

  • Без использования внешних инструментов, требуется, что все участники разработки обладали достаточной дисциплиной для написания кода в «правильном» стиле, а это сложно, особенно когда разработчики разного уровня;
  • Необходимость писать аннотации типов для абсолютно всех вещей в коде, даже тех, которые никто не увидит. Это требует колоссальных усилий, а качество комментариев понижается из-за чисто технический записей;
  • Иногда бывает сложно придумать очевидное название для функции, или в некоторых случаях, как например с переменной, которая содержит дату, тип этой переменной может быть непонятен и можно с ней совершить неправильно операцию. В случае с типизацией, код не скомпилируется, а без проверок — упадёт в рантайме;
  • Падение в яму провала — поддерживая руками типы вместо использования автоматических инструментов, вы увеличиваете вероятность появления ошибки, которая рано или поздно произойдёт и приведёт к проблемам.

Дискуссия интересная, поэтому я советую посмотреть видео тут.

Про #pitercss 11

Делюсь с вами впечатлениями и знаниями с pitercss 11!

Про «Semrush»

21 марта в питерском офисе компании Семраш прошёл митап про вёрстку и дизайн. Отдельно хочется отметить Семраш, не так много компаний с российскими корнями хорошо известны на западе, например, недавно Ноа Кэйган, маркетолог и бизнесмен упомянул продукт в своем блоге (Ноа сам по себе интересный человек и активно делиться своими знаниями, советую подписаться). Такие компании всегда ищут людей и это хороший вариант для работы. Лично я люблю больше компании, которые разрабатывают свой собственный продукт, а компаний такого размера, которые не были бы аутсорсерами в СПб можно пересчитать по пальцам руки. Поэтому вот ссылочка на вакансии, если вы в раздумьях о своём будущем — посмотрите позиции,  уверен, что что-то вас заинтересует.

Относительный CSS

Первым выступил Валерий Любимов  рассказал про относительные величины в CSS — rem, vw, vh, vmax, vmin и currentColor. Лично для меня это были новые вещи, потому что за CSS я не особо слежу, хотя про rem слышал.

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

Аналогичную экономию труда предлагает rem — единица измерения, которая вычисляется относительно корня html, а не от текущего размера шрифта, как у простого em. В сложном коде бывает непросто понять, от какого именно размера считается em, в случае с rem вы всегда знаете число и для изменения размеров под разные вьюпорты с помощью медиа-выражений достаточно в одном месте задать разные варианты размера font-size для тега html, чтобы получить адаптивность для всего проекта. Из минусов rem-ов можно отметить сложность создания изолированных компонентов, так как появляется жесткая внешняя зависимость от размера тега html, возможные проблемы с браузерным зумом и сложность конвертации абсолютных величин из макета дизайнера в относительные величины от размера шрифта, не уверен, что тут можно получить пиксель-пёрфект верстку.

vw, vh, vmax и vmin — позволяют задавать размер в процентах от вьюпорта, что супер полезно, когда вы хотите разместить блок на весь экран, например для лайтбоксов или промостраниц, можно заменить javascript код на простой изящный CSS. Правда, тут есть свои особенности, связанные с подсчётом ширины скроллбаров и адресной строки, которая исчезает в браузерах.

Презентация доклада: https://pitercss.ru/11/pres/relative-css/

Учите дизайнеров верстать

Дизайнер Вадим Матвеев рассказал зачем он научился верстать. Оказалось, что знания верстки даёт кучу преимуществ всей команде.

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

Презентация доклада: https://pitercss.ru/11/pres/design-code.pdf

Дизайн-системы. В поисках «идеального компонента»

Роман Ганин рассказал про дизайн системы и показал, как очень легко можно превратить обычный параграф текста в интерактивный и информационный веб-документ минимальными средствами без кучи фреймворков. Посмотрите презентацию: https://pitercss.ru/11/pres/ideal-component/

Фронтендер + Дизайнер = ♥

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

Обучение программированию

Как научиться программировать? А как стать асом email-маркетинга? Ответ на оба вопроса лежит в система обучения, об этом я хочу поделиться в этом посте.

Звоночки

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

Несколько недель назад на работе решили запустить небольшую кампанию в Adwords, главной целью было понять стоимость привлечения клиента через этот канал. Помимо довольно запутанного процесса настройки, интерфейс оказался настолько непонятным, что я не был уверен, что рекламу вообще удалось запустить. Там конечно написано, что объявление показывается, но я ожидал, что статистика будет показываться в реальном времени или хотя бы +/- пять минут, но оказалось, что всё происходит с отставанием в несколько часов. Пообщавшись несколько дней с чудесным интерфейсом Эдвордс, я понял, что ничего не понимаю в том, как следует настраивать объявления и это стало первым звоночком.

Вторым звонком стала подача заявки в акселератор ФРИИ. Я принял решение, что нужно попробовать отправки заявку, потому что я вижу определенную ценность. Однако заявка — это не совсем точное выражение. Мне понадобилось больше недели, чтобы заполнить её! Оказалось, что на огромное количество вопросов, я не могу ответить и даже не знаю, что надо сделать, чтобы получить ответ. Например, вопрос про рынок проекта — как его посчитать?  Если начать считать, то понимаешь, что ты начинаешь считать гипотетический процент от другой гипотетический цифры. Или вопрос про экономику проекта — моё представление об этом оказалось намного более простым, чем требуется в реальном мире. Когда я понял, что я ни черта не знаю, в моей голове прозвенел второй звоночек.

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

Как изучить JavaScript

Вернёмся к Джаваcкрипту — люди часто хотят выучить какой-нибудь язык программирования, но совершенно не понимают, зачем. Просто так учить его совершенно нет смысла! Это огромное вложение времени, и не начиная процесс, сложно реально оценить масштаб. Но давайте представим, что вы прочитал мой пост про топ 10 языков языков, которые стоит изучить и сделали выбор. Вы провели исследование, посмотрели вакансии, отметили для себя компании, где хотели бы работать или придумали свой продукт и теперь перед вами возникает вопрос: «как изучить javascript?»

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

  1. Сколько часов в день вы готовы потратить на внимательное, фокусированное обучение? Если у вас есть много времени, вы можете пользоваться инструментами, которые требуют пристального внимания и усидчивости, а если нет, ваш вариант — уроки небольшого размера.
  2. Сколько времени у вас есть на обучение? Полгода, месяц, неделя? От этого зависит общее количество разных инструментов, которые вы можете попробовать, например, за три месяца можно прочитать несколько книг по теме и пройти практический курс.
  3. Сколько вы готовы потратить денег на выше обучение. Чем больше вы готовы потратить денег, тем больше времени с менторами вы сможете купить. Если у вас малый бюджет, то придется ограничиться книгами или бесплатными интернет ресурсами.

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

Если дело касается книг, то к сожалению, без советов знакомых, тех, кто книгу уже прочитал, обойтись сложно, потому что иначе нет надежного способа выбрать хорошую книгу. Раньше, можно было полагаться на отзывы в Амазоне, но сейчас они являются мощным маркетинговым инструментом в руках авторов. Есть специальная техника вывода книги в бестселлеры через предзаказы и массовую публикацию положительных отзывов, которая в какой-то мере дискредитирует рейтинг. Однако хорошим признаком являются высокая репутация автора в социальных сетях, множественные переиздания книги и именитые издательства.

Чтобы вы не выбрали, обязательно выберите как минимум два источника, лучше разных типов, например книга + практические курсы, или видеоуроки + курс по электронной почте. Есть большая вероятность того, что знания будут пересекаться лишь на 30-50%. Если вы полагаетесь только на один вариант, вы упускаете очень много информации. Например, в книге может быть описаны кратко описаны все методы объектов, а ментор расскажет только про самые нужные, опишет разные варианты использования  на практике и все подводные камни, с которыми он встретился в ходе работы. Книжка и живой ментор в данном примере дополняют друг друга, вы получаете представление о том, какие методы в принципе существуют и при этом знаете, какие пригодятся вам больше всего.

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

Есть такой известное правило 80/20. В случае с обучением, вам нужно знать 20% вещей, которые позволяют делать 80% работы, и чтобы получить понимание, что же это за 20%, вам нужны разные инструменты обучения. Точки их пересечения — это и есть те самые 20%, которые нужно знать. Нет никакого смысла зубрить справочник по языку программирования, если большую часть этих знаний вы будете использовать раз в год.

Есть хороший метод проверки актуальности знаний — личный проект. Выберите простую и актуальную для вас идею и попробуйте её реализовать. Допустим, вы хотите сделать todo лист. У вас по ходу разработки будет возникать ряд вопросов:

  1. Как мне что-то отобразить на экране
  2. Как мне отобразить нужную структуру списка
  3. Как мне добавить или удалить пункты
  4. Как мне сделать редактирование статуса, текста и порядка пунктов
  5. Как мне сделать красиво
  6. Как мне сделать драг эн дроп
  7. Как мне сделать сохранение моего списка задач так, чтобы я на другом компьютере мог посмотреть
  8. Как мне сделать так, чтобы разные пользователи могли сохранять свои результаты
  9. Что-то ещё…

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

Смежные области знаний

Есть ещё одна существенная причина, по которой полагаться на один источник просто невозможно и почему вы не может что-то выучить на 100%. Это смежные знания. Например, проект сверху невозможно реализовать без применения ряда технологий, не являющихся Джаваскриптом:

  1. Владение редактором, понимание как вести разработку;
  2. HTML для вывода содержимого;
  3. CSS для красивой стилизации;
  4. Cookie для авторизации;
  5. База данных для хранения данных;
  6. Серверный код для связи с базой данных и авторизации;
  7. Знания для настройки и запуска сервера.

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

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

  1. Выбрать тренера, изучив его заслуги (возможно даже познакомиться с его клиентами);
  2. Подготовить дополнительные материалы, чтобы контролировать и понимать, что с вами делает тренер. Например, посмотрев планы от именитых мировых тренеров;
  3. Проанализировать в меру своих текущий возможностей смежные области. Это может быть довольно очевидные вещи, вроде формирования спортивной диеты, может быть менее очевидная, вроде двух пар спортивной обуви — простые кроссовки и обувь с плоской подошвой.

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

Давайте подведем черту и попробуем составить алгоритм наших действий:

  1. Первым делом надо понять, что и для чего мы хотим учить. Есть ли цель? Не бросим ли мы на половину пути наше обучения без должной мотивации?
  2. Дальше мы должны ограничить себя рамками, чтобы выбрать самый эффективный инструмент для нас;
  3. После этого нам следует провести исследование или поговорить с экспертами, чтобы понять, какие смежные области нам понадобится освоить;
  4. Выбрать наилучшие инструменты для обучения исходя из наших бюджетов;
  5. Приступить к обучению, обязательно совмещая теорию с практикой, лучше всего, если практикой будет является та деятельность, которой вы планируете заниматься после обучения.

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