Как подготовиться к собеседованию

Front-end-Developer-Interview-Questions

https://github.com/h5bp/Front-end-Developer-Interview-Questions – самый большой и самый популярный, судя по звездочкам к репозиторию, сборник вопросов. И если у вас плохо с английском, то не расстраивайтесь, потому что вопросы переведены на 32 языка, включая русский.

JS Questions

https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md – еще один популярный репозиторий на Github со списком теоретических вопросов с ответами и ссылками на ресурсы по теме.

JavaScript-questions

Считаете, что теорию уже отлично выучили? Тогда попрактикуйтесь в мини-тестах: https://github.com/lydiahallie/javascript-questions Уровень сложности тестов возрастает с каждым новым вопросом: есть вопросы, над которыми и senior-разработчику придется голову поломать.

Reactjs-interview-questions

Не обойдем стороной и подготовку к собеседованию, на которых вас будут спрашивать про фреймворки и библиотеки. Здесь найдете вопросы и ответы на них по React/Redux: https://github.com/sudheerj/reactjs-interview-questions

Там же найдете и репозитории по Vue, Angular и даже Svelte.

Собеседование по TypeScript

А вы уже используете TypeScript? Если нет, то самое время начать изучение этого быстро набирающего популярность инструмента! А самые популярные вопросы на собеседовании по нему вы найдете на всеми любимом Хабре: https://habr.com/ru/company/ruvds/blog/419993/

***

Автор подборки: Ольга Болотова, фронтенд-разработчик компании Nevatrip и наставник курсов «Vue.js. Продвинутая веб-разработка» и «Комплексный JavaScript».

Loggly

https://www.loggly.com/

Очень удобный инструмент логирования и построения аналитики. Есть ограничения по бесплатному использованию, но в большинстве случаев для небольших проектов бесплатного тарифа достаточно. Легко интегрируется со всеми популярными службами (nginx, mysql и т.п), всегда удобно отследить, что пошло не так на сервере. Также куча готовых библиотек для разных языков и фреймворков.

Docker Compose

https://docs.docker.com/compose/

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

Expo

https://expo.io/

Обертка для react-native для сверх-скоростного запуска мобильного приложения. Есть возможности для покрытия 95% необходимостей мобильных приложений, в том числе пуш-уведомления за 10 минут :) В итоге получаем "шустрое" приложение с нативными элементами управления iOS и android, при одной общей базе JavaScript кода. Идеально для быстрого выхода на рынок.

Paw

https://paw.cloud/

Очень полезная тулза для работы и тестирования различных API, к сожалению только на macOS. Обязательна тем, кто много работает с сервисами обмена данных по REST архитектуре. У меня открыта всегда и используется так же часто, как Chrome.

Auth0

https://auth0.com/

Сервис авторизации через различные соц.сети "в одном месте". Бесплатный тариф — до 10000 пользователей. Круто, что в своем серверном приложении не нужно реализовывать хранение, регистрацию и идентификацию пользователей — все есть в коробке и работает по API. Доступны библиотеки для интеграции с кучей языков программирования. Рекомендую!

***

Автор подборки: Артём Пузаков, наставник курса «Node.js. Серверный JavaScript».

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

На сегодняшний день Flexbox – это стандарт для построения лейаута страниц, позволяющий быстро и легко выстраивать элементы на HTML-страницах, управлять их пропорциями и порядком размещения.

Собрали 5 сервисов, которые помогут разобраться и попрактиковаться в применении Flexbox.

1. A Complete Guide to Flexbox.
2. Справочник по Flexbox на русском.
3. Пример из codepen, помогающий разобраться, как работает Flexbox.
4. Основные паттерны при верстке на flexbox.
5. Flexbox Froggy — игра, помогающая в изучении flexbox.

Animate.css

https://daneden.github.io/animate.css/

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

Если же нужна более гибкая настройка css-анимаций, есть классный ресурс: https://animista.net/.

Tasty CSS-animated hamburgers

https://jonsuh.com/hamburgers/

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

Font Awesome

https://fontawesome.com/

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

Transfonter

https://transfonter.org/

Если нужно быстро сконвертировать шрифты и не хочется разбираться с кучей настроек, сервис transfonter то, что нужно. Просто перетаскиваем шрифты (можно сразу несколько), выбираем нужные форматы и получаем готовые к использованию шрифты в нужных форматах. В архив так же добавляется css-файл с подключением всех сконвертированных шрифтов для максимально быстрого старта работы с ними.

CSSmatic

https://www.cssmatic.com/

Набор из 4-х инструментов, главными из которых являются gradient generator, который позволяет быстро и наглядно набросать необходимый градиент, и box shadow, который помогает в настройке тени для блока.

TinyPNG

https://tinypng.com/

И напоследок сервис для сжатия jpg и png изображений. Очень часто исходники изображений бывают довольно большими, что может существенно повлиять на скорость загрузки вашего сайта. Частично избежать этого поможет данный сервис для компрессии картинок. Если вы всё ещё не используете сборщики, данный сервис точно может пригодиться. Хотя возможно уже пора посматривать в сторону современных форматов изображений для использования в вебе ;)

***

Автор подборки: Врублевский Артур, SCloud, веб-разработчик

Наш прогноз на 2020 год: тренд на soft-skills в IT сохранится и будет требовать нашего внимания.

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

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

Jira

https://www.atlassian.com/. Удобный инструмент разработки для Agile-команд. Помогает планировать, отслеживать задачи, строить графики и отчеты по итогу выполнения, а также сохранять историю релизов. Можно использовать стандартный набор функциональности, а также настраивать инструмент под запросы команды. Полюбился разработчикам за возможность интеграции с инструментами разработки, к примеру GitHub, Slack, Bitbucket.

Битрикс 24

https://www.bitrix24.ru/. Полноценная CRM-система для компаний. Позволяет не только ставить и контролировать задачи, но и вести базу клиентов и отслеживать продажи в одном пространстве. Данный инструмент можно настроить под потребности бизнеса.

Trello

https://trello.com/ru. Представляет собой кастомные доски для планирования: пользователь может настроить и создать пространство для себя и команды в соответствии с целями, задачами и направлениями деятельности. Также есть набор шаблонов, которые можно скопировать и для своих проектов. Trello также можно интегрировать с другими инструментами, которые используются в работе: Slack, Google Docs, Dropbox и др.

Notion

notion.so. Удобный конструктор: можно вести заметки, списки дел, создавать документы, таблицы, вести базу знаний, создавать досочки с задачами и т.д. Единое пространство под разные потребности.

Гугл-календарь

https://calendar.google.com/calendar. Можно создавать календари под разные проекты, команды, направления работы. Можно назначить встречу и пригласить на неё коллег, а календарь своевременно напомнит всем участникам о данном событии. Все задачи можно распланировать по дням недели и прикрепить к конкретному времени.

Todoist

https://todoist.com/ru. Электронный ежедневник. Позволяет структурировать задачи по дням недели, времени, а также по проектам. Можно создавать повторяющиеся задачи, а также вести личную статистику выполнения задач. Каждый день вы получаете удобный список запланированных дел. Постановка новых не занимает много времени: достаточно вести с любого устройства название, добавить дату и указать проект, к которому задача относится.

2Do

https://www.2doapp.com/. Инструмент, подходящий для личного планирования. Задачи можно распределить по дням, времени, а также добавить геолокацию, что удобно при планировании офлайн встреч и мероприятий. Быстрый поиск задач: как с помощью голосового поиска, так и с помощью списков и тегов, которые быстро добавляются к каждой задаче.

Старый добрый Ежедневник.

При наличии такого количества цифровых инструментов, бумажные носители всё равно не теряют своей популярности.

Выбирайте свой инструмент и прокачивайте навыки планирования!

***

Участвовали в создании материала:

— Павел Семенов, руководитель агентства RoyalPro, главный преподаватель курса «Продвижение сайтов и проектов. Хайпология для стартаперов».

— Карен Атоян, разработчик Mail.ru, наставник Продвинутого курса по веб-разработке.

— Арсений Березин, freelance, наставник базовых курсов по веб-разработке и курса «Комплексное обучение JavaScript».

— Кулешова Елена, куратор профессии «Веб-разработчик».

— Михаил Пешинский, интернет-маркетолог LoftSchool.

— Таня Артемьева, руководитель отдела обучения LoftSchool.