Как стать мидлом

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

Прочитайте, скиньте знакомым и добавьте в закладки, чтобы не потерять

А вдобавок подпишитесь на наш новый телеграм-канал для мидлов — будем собирать там всё самое важное для обучения и роста разработчиков и делиться новостями индустрии.

Подписаться

Расширения для браузера, которые упростят жизнь фронтендера

HTML Validator — расширение через которое можно легко провести валидацию сайта.

Web Developer — набор полезных инструментов для анализа макета, тестирования кода и изменения внешнего вида страницы.

CSSViewer — расширение, которое показывает все CSS-свойства элементов.

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

Stylus — расширение с помощью которого вы сможете легко менять и настраивать CSS-стили внутри браузера.

ColorPick Eyedropper —расширение, которое поможет подсказать любой цвет с изображения.

Designer Tools — расширение, которое с точностью до миллиметра определит расстояние на лендинге.

Проверьте свои знания о селекторах в CSS

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

Пройти тест

Посмотреть конспект

Техники валидации форм

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

Читать

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени.

Разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

Подборка инструментов, которая ускорит работу разработчика

8 расширений VS Code для продуктивной работы — подборка плагинов на все случаи жизни.

JavaScript Event KeyCodes — инструмент, который поможет получить KeyCode любой нажатой клавиши. Пригодится в приложениях, которые обрабатывают ввод с клавиатуры.

Regex 101 — библиотека регулярных выражений, проверка регулярных выражений, всё что угодно для регулярных выражений.

JSON Formatter & Validator — отдаём на входе неформатированный JSON, получаем на выходе отформатированный. Бонусом проверка на валидность по трём разным RFC и ECMA-404.

JSON Placeholder — бесплатный REST API, который можно использовать для тестирования, когда вам нужны какие-нибудь фейковые данные в проекте.

JSON Parser Online — ещё один инструмент для приведения JSON в читаемый вид.

Bundlephobia — наглядно показывает, какие зависимости притянет npm-пакет. Можно загрузить package.json и проверить его.

Это полезно, ведь мы тонем в зависимостях и нам это нравится

Как искать и выбирать npm-пакеты?

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

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

Читать, чтобы всё узнать

Сегодня стартует новый поток курса «JavaScript. Профессиональная разработка веб-интерфейсов»

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

Изучают основные возможности JavaScript: объекты и массивы, какие есть встроенные объекты и функции, учатся организовывать код по принципу DRY, что значит, без повторений. Знакомятся с объектной моделью документа — DOM. Учатся работать с API, протоколом HTTP и форматом данных JSON. Разбираются, как фиксить ошибки и делать простой и понятный интерфейс для пользователя.

На протяжении всего курса теория закрепляется на практике с помощью личных проектов. Можно выбрать: создать сервис просмотра фотографий «Кекстаграм» или сервис для размещения недвижимости «Кексобукинг».

Если хотите узнать про курс более подробно или почитать отзывы студентов, переходите в отчёт прошлого потока курса. Там рассказали, как обновили программу и как на перемены отреагировали студенты.

Новый выпуск подкаста Frontend Weekend

В гостях у Андрея Смирнова побывала Александра Прокшина — руководитель отдела разработки в ARTW.

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

Слушать на всех площадках

Завтра в 13:00 пройдёт лайв «Введение во фронтенд-разработку: зачем нужен React»

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

Записаться, чтобы узнать, что такое React и зачем он нужен, можно здесь

Новый выпуск фронтенд-новостей уже в блоге

Три главных новости за неделю с 19–25 сентября:

Учебник по выражениям от контейнера с обновлённым синтаксисом

Узнайте, как работают выражения от контейнера, какие решают проблемы и как дополняют функции CSS.

Методология на слоях

Рассмотрите подход к вёрстке с помощью каскадных слоёв @layer, которые помогут начать писать код быстрее и проще.

«React, я люблю тебя, но ты меня подводишь»

Глобальные ошибки библиотеки React на примере отношений.

Больше новостей

Зачем разработчику знать «Паттерны проектирования»

Коротко. Они помогают сэкономить время на организацию кода.

Подробнее. Паттерны MVC, MVP и MVVM описывают, как лучше разделить код по папкам и что написать в файлах. «Компоновщик» позволяет сгруппировать множество объектов, чтобы их было удобнее использовать вместе. «Адаптер» помогает делать интерфейс и объекты более адаптивными. Про паттерны можно рассказывать долго — их много, и каждый упрощает разработку проекта.

Где учить. На курсе «Паттерны проектирования». Вы познакомитесь с разными видами паттернов и научитесь их применять в коде. Сейчас обучение можно начать со скидкой 30% до 3 октября включительно.

Ссылка для записи на курс

Расскажем всё, что нужно знать о React и покажем на практике, как им пользоваться.

Уже через 15 минут — вы ещё успеваете присоединиться

Как работает каскад в CSS

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

Разобраться, как всё работает и зачем это нужно можно в статье. Кликайте и читайте

Почему мы иногда пишем студентам первыми

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

В статье вы познакомитесь с их работой поближе