​​Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году

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

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

Читать статью

@frontend_school #статья

​​DevTools для «чайников»

Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу.

Здесь вы сможете разобраться в том, что же такое DevTools, какими возможностями обладает, а также узнаете некоторые фишки, которые выделят вас на фоне обычных интернет-пользователей.

Читать статью

@frontend_school #статья

​​Малоизвестные, но крутые атрибуты в HTML

Все знаю такие HTML-атрибуты, как src, href и прочие, которые применяет каждый фронтенд-разработчик. Но помимо них существуют ещё несколько любопытных, которые не так часто применяются и не так известны, как остальные. В этой статье вы узнаете о некоторых из них.

Читать статью

@frontend_school #статья #HTML

​​БЭМ — соглашение по именованию в CSS

Вообще, БЭМ — это аббревиатура, которая представляет собой сочетание слов «блок», «элемент» и «модификатор». Эта методология предполагает определённый порядок наименования компонентов и вы наверняка столкнётесь с ней при реальной работе.

В этой статье понятным языком объяснили, что же это такое и как правильно этим пользоваться.

Читать статью

@frontend_school #статья #CSS

10 полезных инструментов для фронтенд-разработчика

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

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

Читать статью

@frontend_school #статья

​​Что такое callback-функция в JavaScript?

В процессе обучения языку JavaScript каждый сталкивается с коллбеками. Это не самая простая тема и без действительно простого пошагового объяснения разобраться в ней может быть очень трудно.

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

Читать статью

@frontend_school #статья #JavaScript

​​Тернарный оператор в JavaScript: за, против, подводные камни

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

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

В этой статье пытаются разобраться в плюсах и минусах тернарного оператора в JS.

Читать статью

@frontend_school #статья #JavaScript

​​CSS-переменные: о чем вам не говорят

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

Читать статью

@frontend_school #статья #CSS

​​Обработка текста поверх изображений в CSS

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

Читать статью

@frontend_school #статья #CSS

​​Что лучше использовать: ссылки или кнопки

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

Читать статью

@frontend_school #статья #HTML

​​Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут

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

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

Читать статью

@frontend_school #статья #CSS

Что лучше использовать: ссылки или кнопки

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

Читать статью

@frontend_school #статья

Сколько хрома в Chromium

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

Все знают, что Chromium — это открытая основа для браузеров, которую может использовать каждый. Так, у Google — это Chrome, у Яндекс — Яндекс.Брааузер, у Microsoft — Edge, а ещё есть Opera, Brave, Vivaldi и так далее. Но оказывается, что для использования Chromium в своих целях компаниям приходится предварительно удалять кучу функционала, который туда запихнули в Google. Зачем? Непонятно.

Читать статью

@frontend_school #статья #chromium

13 приёмов работы с npm, которые помогают экономить время

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

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

Читать статью

@frontend_school #статья #npm

Не знаю, как вы жили без этого, но вам пора узнать, как работает браузер

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

Я рекомендую её прочитать не только фронтенд-разработчикам, но и вообще всем — статья крайне познавательная.

@frontend_school #статья #браузер

Как большие размеры DOM влияют на интерактивность и что с этим можно сделать

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

Так и с DOM-деревом — чем оно больше, тем больше ресурсов требуется на его рендеринг и тем сложнее создать там нормальную интерактивность. Поэтому следить за размерами DOM крайне важно.

А вот как это сделать, на что обращать внимание, где отслеживать размер DOM, узнаете тут:

https://web.dev/articles/dom-size-and-interactivity?hl=ru

@frontend_school #статья #dom

Полифилы JavaScript: что это и зачем они нужны

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

Эта статья подойдёт новичкам, которые готовятся к собеседованию, и опытным специалистам. В ней вы для наглядности реализуете полифилы таких привычных методов, как map, forEach, filter, reduce. 

@frontend_school #статья #javascript

Введение в асинхронный JavaScript: Callbacks, Promises и Async/Await

Сегодня мы собираемся создать и запустить магазин мороженого, в процессе которого мы освоим асинхронный JavaScript. В конечном итоге вы научитесь работать с коллбэками, промисами и async/await.

Здесь вы увидите многочисленные примеры кода и доступные объяснения его работы.

@frontend_school #статья #javascript

Делаем пинг-понг на JS с нуля

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

Все необходимые зависимости, части кода, принципы его работы описаны в статье.

@frontend_school #статья #javascript

Два сниппета на JavaScript, которые упростят вам жизнь

В этой короткой статье вы познакомитесь с парой сниппетов, которые очень занимательны. Первый сниппет демонстрирует пример создания простой реактивности (signal), второй — метод предотвращения несоответствия данных из-за состояния гонки (race condition).

@frontend_school #статья #javascript