Продолжаю чинить проект

Наткнулся на код где строки преобразуют в числа с помощью вызова конструктора Number().

Какое то время назад почему-то отказывались от +'string', якобы для удобного чтения кода.

Действительно Number() нагляднее показывает что происходит с переменной. Но при этом стоит всегда помнить об особенности конструктора Number из скриншота.

Штука которая ломает уже второй прод.

Не совсем очевидная особенность функций, в этом весь JS.

Подобное поведение есть у функции isFinite с аргументом null.

Был случай когда проект поломался от typeof null, но это уже совсем страшная история.

Книги для развития soft skills
Это не топ, просто список книг которые могут помочь закрыть проблемы в мягких навках

Для развития коммуникативных навыков
Н. Региер. «Конфликт — это подарок». Про конфликты не только на работе но и в семье.

Г. Кеннеди. «Договориться можно обо всём». Про умение договариваться.

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

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

М. Дорофеев. «Джедайские техники». Маст хев для лидов на мой взгляд. Очень много интересных техник тайм-менеджмента собраны в одной книге.

Для развития стрессоустойчивости
М. Мэнсон. «Тонкое искусство Пофигизма». Про правильное расставление приоритетов.

Опять же, Карнеги. "Как перестать беспокоиться".

Многие люди не любят книги по типу self-made. Некоторые даже высмеивают это как жанр. Читать или нет решать каждому, я только написал про книги которые помогли мне.

P.S Дорофеева точно почитай

В дополнение к прошлому посту

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

Кроме того на сайте описаны принципы проектирования услуг продукта, управления командой и проектом.

Если кому нужны примеры дизайн систем, делюсь ссылкой. Очень поможет при разработке библиотеки компонентов на проекте.

Тут Райффайзенбанк выпустил гайд про человеческие тексты для интерфейса.

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

По крайней мере я уже поправил пару текстов в своем пет-проекте.

Soft skills
«гибкие навыки» или буквально «мягкие навыки» не связаны с конкретной профессией, но помогают выполнять свою работу и подниматься по карьерной лестнице.

Сейчас никто не работает в одиночку, каждый общается с коллегами, клиентами и т.д. Умение договариваться нужно каждому. Кроме того гибкие навыки это еще и про работу с информацией.

Что за навыки такие ?
Классификации по конкретным навыкам в данный момент не существует. Для себя я разделил гибкие навыки на такие группы:

1. Коммуникативные навыки.
Умение общаться с командой, аргументировать свою точку зрения, работать с людьми.

2. Работа с информацией.
Умение находить/анализировать информацию.

3. Самоорганизация.
Умение эффективно выстраивать свой рабочий день.

4. Стрессоустойчивость.
Способность сохранять свою работоспособность в стрессовых ситуациях.

Сейчас (По крайней мере в IT) понятие soft skills очень сильно разрослось, так что возможно в этом списке не хватает пару десятков пунктов 😀. Но даже из такого небольшого списка можно выделить с чем именно у тебя трудности и что нужно развить.

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

Нужен ли пост со списком книг для развития soft skills ?

5 книг которые нужно прочитать каждому фронтенд разработчику

1. Чистый код. Роберт Мартин
Книга с примерами из Java. Но первые 50-70 страниц полезны для любого разработчика. Описаны общие принципы энтерпрайз программирования. Как назвать переменную ? Функцию ? Как оптимизировать модуль ? Книга ответит на эти вопросы.

2. Рефакторинг кода на JavaScrip. Фаулер Мартин
На наглядных примерах JS кода рассказывается как можно рефакторить код

3. JavaScript. Шаблоны
С подробными объяснениями о плохом и хорошем коде. + рассказывают о способах обхода недостатка языка.

4. JavaScript. Подробное руководство. Дэвид Флэнаган. ( Та самая, с носорогом )
Самый обширный справочник по JS. Написана суховато, но очень информативно.

5. Вы не знаете JS. Кайл Симпсон
Целая серия учебников по самым сложным частям JavaScript. Отлично дополняет вышеописанные книги.

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

Ссылки не прикрепляю, все книги легко гуглятся 😉

​​[Карта развития разработчика] JS

Синтаксис и базовые конструкции
На самом деле все понятно по заголовку. Идем на learn js и учим про let, if и остальной костяк языка. На мой взгляд один из самых простых пунктов в карте.

Изучение DOM
DOM сам по себе тянет на отдельный узел в подобных roadmap'ах. Советую выучить как вообще в браузере получается DOM. (Как он строится). И какие то основные концепции. Например всплытие и погружение событий. Обязательно пробегись по его API. Посмотри как можно удалять узлы с помощью JS, да и вообще какая информация доступна нам в JS о DOM узле.

Изучение Fetch API / Ajax (XHR)
Начнем наверное с AJAX. Достаточно просто прочитать что это подход обмена данными между сервером и клиентом без перезагрузки страницы.

Про XHR прочитать стоит, но только прочитать. Учить тут нечего, технология устарела и встречается только в легаси. Сейчас все пишется на Fetch.

Выучи как получать и отправлять данные. Обязательно нужно посмотреть раздел с полным API, для понимания что вообще можно сделать с помощью Fetch.

ES6+ и модули JavaScript
ES6 важная вещь, желательно выучить все что в нем ввели. Раньше на learn js был раздел по всем нововведениям из ES6, щас же все вмешали в обычные разделы. Так как ES6 стал уже стандартом.

Учить ES7+ для начала наверное не стоит, можно просто посмотреть что нового там завезли.

Про модули есть отличная статья которая ответит на все ваши вопросы. Ее более чем достаточно.

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

Без практики как всегда никуда.

#картаразработчика

Библиотека и фреймворк
Когда был джуниором не мог четко определить разницу этих двух понятий. Всегда задавался вопросом почему React это библиотека а Vue это фреймворк ?

Объясняю себе же из прошлого.

Библиотека это модуль с готовым кодом (функциями) который мы можем использовать как и где захотим.

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

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

Структуры данных
Пришло время написать и про них.

Программирование в основном это умение хранить и преобразовывать данные. Как раз для первого нам и нужны структуры. В зависимости от задачи, данные нужно хранить в определенном виде (Объект, массив, связный список). Не всегда удобно хранить все в массивах. Знание структур может сэкономить вам время и пару сотен строк кода. + К этому упростит решение задачи.

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

Как всегда, минимум того, что нужно знать перед собеседованием.
Массивы, Стеки, Очереди, Связные списки. Еще было бы круто что то знать про деревья.

Для теории советую прочитать пару статей на Хабре, и обязательно LeetCode.
Там есть подробные уроки вперемешку с практикой.
Можно реализовывать структуры данных на JS, но для практики я советую использовать TypeScript.

Без практики структуры данных не заучить.

Где учить JS
Многим написанная в этой статье информация может показаться очевидной, но в самом начале своего пути я задавался таким вопросом.

Чтобы выучить JS не нужно покупать книги, ходить месяц на лекции или смотреть 50 часовые вебинары. Достаточно 3 сайтов.

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

Справочник
Очень часто выручает в работе, если нужно быстро посмотреть какие аргументы у метода или освежить в голове информацию о каком-либо объекте. Ссылка

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

Собственно все, читайте learn JS и больше практикуйтесь. (И ждите пост про книги)

Бонус
Спецификация по HTML
Спецификация по CSSOM
Спецификация по DOM
CSS для разработчика - кратко и понятно про CSS. Всегда повторяю от сюда для собеседований

Тестовое задание перед собеседованием

Со стороны начинающего соискателя тестовые задания мне казались интересными, но для разработчиков уровня Senior любое тестовое вызывает скуку. Даже если оно оплачивается.

Большинство таких заданий слишком мало для того чтобы вмещать в себя вещи которые могут быть интересны сеньору. Чаще всего нужно просто получить данные с API и отрисовать их. Ладно, иногда нужно добавить возможность их редактирования. За редким случаем придется реализовать весь CRUD.

Почему так ?
Со стороны соискателя попытаюсь оправдаться за скучные тестовые задания. На самом деле их используют просто чтобы проредить количество кандидатов на позицию. Логика такая. Кто действительно хочет в компанию, тот сделает тестовое. А ленивый соискатель просто пройдет мимо.

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

Есть ли плюсы ?
Конечно есть. Если у собеседуемого нет своих примеров кода и он согласится выполнять тестовое задание (Да, от них можно отказываться. Даже если в вакансии написано что тестовое будет обязательно), то хорошо написанный код или ответ на пару вопросов "Почему тут так ?" "А как можно по-другому ?" компенсирует незнание каких либо тонкостей из вопросов по теории.

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

Только без фанатизма. Не нужно писать несколько огромных приложений и до блеска полировать код в каждом файлике.

​​[Карта развития разработчика] CSS

Изучение основ
Советую выучить то как работает CSS. Как он подключается к странице. Какие селекторы сильнее и почему. Какие единицы измерения есть в CSS.

Создание макетов
Сразу к практике. Выучить CSS без практики просто невозможно.

Если вы хотите пролететь по CSS и выучить только то что сейчас используют в разработке, то пункты про Float и CSS Grid придется пропустить. Float слишком стар и встречается только в легаси. А CSS Grid пока не так сильно распространен.

В будущем вам все равно придется выучить эти технологии, я бы начал с CSS Grid.

Медиа-запросы
Я считаю что этот пункт неразделим с прошлым.

В процессе изучения медиа запросов вы поймете как сделать ваше приложение/сайт адаптивным. Начните с подходов адаптивной верстки. Например Mobile first. Очень популярный подход в верстке который действительно облегчает процесс создание адаптива в приложении.

Изучение CSS3
Изучаем новые стандарты CSS.

На практике чего то нового в этом разделе вы не найдете. Уверен что к этому времени большинство нововведений CSS3 вы уже использовали. Например border-radius.

Я бы не тратил время на доскональное изучение CSS3. Выберите 2 макета и сверстайте их адаптивно, пользы будет больше. А лучше найдите макет интерфейса любого приложения.

#картаразработчика

Алгоритмы

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

Но знание алгоритмов помогает найти эффективное решение. А еще вас не будут пугать задачки по алгоритмам на собеседованиях. Также знание фундаментальных понятий помогает ответить на вопросы "А почему это работает так ?".

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

Неплохой гайд от Яндекса по алгоритмам.
Для практики советую LeetCode. Также на сайте есть полноценные гайды в виде урок -> практика.

Пост про структуры данных будет чуточку позже. Там есть что рассказать.

#полезныессылки
#чтоучить