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

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

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

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

@frontend_school #статья

Срочно! Как поставить Emmet на бумагу?!

@frontend_School #юмор

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

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

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

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

@frontend_school #статья

3D-самолёт

Интересный проект на CodePen, где автор создал анимацию полёта самолёта. Вы, кстати, можете менять направление полёта простым движением мышки, а клик переключает проект в ночной режим. Из интересного тут библиотека GSAP, а также использование препроцессоров Pug для HTML и Stylus для CSS.

CodePen

@frontend_school #интересное

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

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

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

@frontend_school #статья #HTML

Кнопка на Vue

Отличный пример работы реактивности во Vue — симпатичная кнопка с приятной анимацией. Можете посмотреть код и даже добавить его в свой проект.

CodePen

@frontend_school #интересное

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

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

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

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

@frontend_school #статья #CSS

То, ради чего стоит стать фронтенд-разработчиком 😄

@frontend_school #юмор

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

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

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

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

@frontend_school #статья

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

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

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

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

@frontend_school #статья #JavaScript

Frontend_thoughts | Про фронтенд. Прост

Frontend_thoughts — канал о разработке, тимлидстве и саморазвитии. Здесь делятся полезными материалами и обмениваются мнениями о frontend-разработке.

На канале вы найдёте много всего интересного, например:
➡️ Современные возможности JS
➡️ Велосипеды. Когда стоит писать свое решение
➡️ Возраст в IT. Когда уже поздно начинать?

Подписывайтесь: @frontend_thoughts

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

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

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

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

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

@frontend_school #статья #JavaScript

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

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

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

@frontend_school #статья #CSS

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

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

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

@frontend_school #статья #CSS

Налейтай, народ! Не вакансия, а мечта!

@frontend_school #юмор

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

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

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

@frontend_school #статья #HTML

​​​​Вебинар «Конечные автоматы в реальной жизни»

Наставник курса «Мидл фронтенд-разработчик» Захар Овчаров расскажет про применение автоматов, а выпускник курса Антон Субботин попытается понять, зачем всё это нужно и как применять.

Что будет на вебинаре:
1. Поговорите про абстрактные машины, не существующие в реальности. Вы увидите, как на их основе строятся алгоритмы решения широкого круга задач.
2. Разберёте на примерах, как работают конечные автоматы и где находят применение.
3. Построите небольшой конечный автомат для валидации и допуска строк пользовательского ввода.
4. Обсудите использование, сложности и ограничения конечных автоматов для решения прикладных повседневных задач.

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

8 мая в 15:00 (Мск)

https://praktikum.blog/webinar-avtomati/?utm_source=telegram&utm_medium=performance&utm_campaign=Telegram_performance_webinar-avtomati-frontend_school

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

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

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

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

@frontend_school #статья #CSS

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

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

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

@frontend_school #статья

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

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

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

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

@frontend_school #статья #chromium

Создаём скрипты для сайта интернет-магазина

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

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

Смотреть видео

@frontend_school #видео #javascript