Про PiterJS 13

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

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

Re-imagining Webpack

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

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

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

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

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

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

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

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

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

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

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

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

Как научиться программировать? А как стать асом 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. Приступить к обучению, обязательно совмещая теорию с практикой, лучше всего, если практикой будет является та деятельность, которой вы планируете заниматься после обучения.

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

Javascript, ход мыслей и инсайты

Три задачи, которые помогли мне понять мои слабые места, как программиста.

Я уже писал о том, что полюбил делать задачи для программистов. Сегодня поделюсь задачами и решениями, которые буквально заставили меня схватиться за голову от удивления. Но сначала кратко расскажу о сайте codewars.com и его особенностях. Оформление сделано в стилистике японских боевых искусств — задачи называются «катами», а сложность задач и рейтинг пользователей обозначаются кю — от 8 по 1, по мере возрастания сложности задач или умений борца. Уникальное отличие этого сайта от других аналогов — удобная среда для ввода кода, огромное количество поддерживаемых языков и хорошее сообщество.

Задача «Пары медведей»

Description:

In order to prove it’s success and gain funding, the wilderness zoo needs to prove to environmentalists that it has x number of mating pairs of bears.

You must check within string (s) to fid all of the mating pairs, and return a string containing only them. Line them up for inspection.

Rules: Bears are either ‘B’ (male) or ‘8’ (female), Bears must be together in male/female pairs ‘B8’ or ‘8B’, Mating pairs must involve two distinct bears each (‘B8B’ may look fun, but does not count as two pairs).

Return an array containing a string of only the mating pairs available. e.g:

‘EvHB8KN8ik8BiyxfeyKBmiCMj’ —> ‘B88B’ (empty string if there are no pairs)

and true if the number is more than or equal to x, false if not:

(6, ‘EvHB8KN8ik8BiyxfeyKBmiCMj’) —> [‘B88B’, false];

x will always be a positive integer, and s will never be empty

С ходу я решил, что это задача — упрощенный вариант поиска палиндромов в строке. То, что задача всего лишь на 6 kyu меня не смутило, и я стал обдумывать базовый алгоритм:

  1. Ищем в строке букву «B», пока не дойдём до конца строки
  2. Если буква найдена, проверяем есть ли символ «8» слева, а потом справа
  3. Если есть слева, добавляем комбинацию «8B» в результат, увеличиваем счётчик пар на единицу
  4. Если есть справа, добавляем комбинацию «B8» в результат, увеличиваем счётчик пар на единицу
  5. Подготавливаем и возвращаем результат

Этот алгоритм не совсем рабочий для строки «B8B8», потому что вместо «B8B8» он вернёт «B88BB8». Поэтому, в случае, если мы нашли восьмерку справа, нам надо запомнить индекс и этот факт и в следующий итерации пропустить поиск восьмерки слева и обнулить флаг, отвечающий за это. В итоге, у меня получилось вот так:

Довольный, я нажал на кнопку «Submit final» и стал смотреть лучшие чужие решения. Вот такие варианты я увидел в топе:

Крайнее удивление

Да, эта задача решается в две строчки c помощью метода String.match (). Палиндромы в моей голове так сильно засели, что я просто забыл про регулярные выражения. Могло сыграть роль то, что в целом, я стараюсь избегать использования регулярных выражений, так как при частом изменении кода, их обслуживание может превратиться в ад. Ещё один аналогичный пример, нужно было создать функцию проверки ip адресов формата IPv4, вот моё решение:

А вот лучшее решение:

Задача «Шпион»

Description:

In testing, a spy function is one that keeps track of various metadata regarding its invocations. Some examples of properties that a spy might track include:

  • Whether it was invoked
  • How many times it was invoked
  • What arguments it was called with
  • What contexts it was called in
  • What values it returned
  • Whether it threw an error

For this kata, implement a spyOn function which takes any functionfunc as a parameter and returns a spy for func. The returned spymust be callable in the same manner as the original func, and include the following additional properties/methods:

  • .callCount() — returns the number of times spy has been called
  • .wasCalledWith(val) – returns true if spy was ever called with val, else returns false.
  • .returned(val) — returns true if spy ever returned val, else returns false

Эта задача напомнила мне основы JavaScript’а. На первый взгляд, очевидно, что надо обернуть функцию в другую, но как сделать вызов методов? Что нужно возвращать — объект? Функцию? Метод? Вот решение:

Я просто забыл, что функции являются объектами в JS и к ним можно прикреплять методы. Если об этом помнить, то задача становится очень легкой.

Задача «Разминирование бомбы»

Description:

There are a series of 10 bombs about to go off! Diffuse them all! Simple, right?

Note: This is not an ordinary Kata, but more of a series of puzzles. The point is to figure out what you are supposed to do, then how to do it. Instructions are intentionally left vague.

Иногда встречаются любопытные задачи, больше похожие на головоломки. Вам даётся объект Bomb с методом defuse, нужно исследовать его разными способами, чтобы разминировать все десять бомб. У меня пока не получилось разминировать все бомбы, быть может, вы сможете это сделать? Регистрируйтесь на сайте codewars.com и спасайте мир или считайте медведей решая классные задачи!

Зачем решать задачи для программистов?

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

Мне очень нравится сайт codewars.com. На нём представлены задачи для программистов самой разной сложности. Большое количество языков и возможность посмотреть чужие варианты решения для меня — очень крутые возможности сайта. В этой заметке, я объясню, почему каждый программист должен решать хотя бы одну задачу в день.

Задачи будут держать ваш мозг в тонусе

Большинство задач — не такие, какие приходится решать на работе в офисе. Часто они требует каких-то общих знаний, алгоритмов, не привязанных к предметной области, поэтому решать их может любой программист, независимо от того, делает он сайты или пишет код для железа. Они требуют некоторой креативности и неплохо будят ум, поэтому я часто делаю одну задачу утром, помогает проснуться лучше, чем кофе!

Вы будете лучше знать язык

Многие задачи заставили меня читать документацию, потому что оказалось, что с ходу я не могу вспомнить многие названия функций/методов. Например, в начале попалась задача для JavaScript — написать функцию, которая переводит число из десятичной системы счисления, в двоичную. Я стал вспоминать школьные уроки информатики, как мы записывали руками в тетрадку единички и нолики и написал такой алгоритм. Когда я отправил решение и стал смотреть чужие — я ахнул! Оказалось, что самое простое решение просто использует второй параметр функции parseInt(string, radix). Я вообще не знал, что у этой функции есть второй параметр. Более того, если его не использовать, могут быть проблемы с тем, как будет интерпретироваться строчка.

Другой пример любопытного кода на Javascript. Простая задача по написанию функции, которая считает объём конуса. Результат нужно было округлить вниз. Я вполне разумно использовал Math.floor(num), но, как оказалось, округлить можно и другим способом — использовав два раза битовую операцию NOT, которая в языке совершается через двойную тильду ~~. При этом, согласно некоторым бенчмаркам, такая операция совершается быстрее, чем вызов Math.floor():

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

Понятно, что решением такой задачи является каррирование, но как его реализовать с нуля в JavaScript? Ответа я не знал, зато в гугле нашёл отличную статью на эту тему — https://medium.com/@kevincennis/currying-in-javascript-c66080543528#.o5a0hf9z0

Вы будете внимательнее читать условия задачи

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

Ask a small girl — «How old are you?». She always says strange things… Lets help her! For correct answer program should return int from 0 to 9 😉 Assume test input string always valid and may look like «1 year old» or «5 years old», etc.. The first char is number only =)

Моё решение брало первый символ строчки, преобразовывало его в целое и возвращало. А самый топовый вариант решения выглядит вот так:

И это годится именно по текущим условиям задачи.

Это интересно, полезно для кругозора и для будущего

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

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

Наконец, это действительно интересно, очень приятно, когда твоё решение наконец-то проходит все проверки и вы можете сказать, что да, я решил эту задачу!

«Тут я пришёл в комментарии»

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

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

Видео: Как создавался редактор Visual Studio Code

Очень интересное видео, в котором Александру Дима рассказывает о истории создания Visual Studio Code и о сложностях создания редактора на JavaScript.

Очень интересное видео, в котором Александру Дима рассказывает о истории создания Visual Studio Code и о сложностях создания редактора на JavaScript.