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

@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

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

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

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

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

@frontend_school #статья #npm

Всем привет! 2 вопроса:

1. Хотите ли возрождение этого канала? Сейчас думаю стоит ли в него возвращаться или уже поздно и пора забыть про него.
2. Кому нужен Premium? Я тут свой личный канал завёл со всяким разным контентом и разыгрываю там подписку за подписку)

Давайте так, если контент тут хотите как в старые добрые времена — поставьте 👍, а если нет, то 👎

Ну, что ж, давайте тогда начинать! И первым делом я хочу поделиться с вами библиотекой компонентов на чистом CSS

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

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

Можно как скачать папку с библиотекой по ссылке, так и установить к себе в проект с помощью NPM командой npm i css-ui-lib.

#библиотека #css

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

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

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

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

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

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

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

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

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

@frontend_school #статья #dom

Что такое рекурсия и как она работает

Рекурсия — это процесс, когда функция вызывает саму себя. Она работает следующим образом:

1. Сначала, функция выполняет некоторый код до вызова самой себя.

2. Затем, функция вызывает саму себя.

3. Когда функция вызывает саму себя, программа переходит к началу этой функции и повторяет шаги 1 и 2. Таким образом, функция вызывается до тех пор, пока не будет достигнуто определенное условие остановки.

4. Когда условие остановки становится истинным, функция перестает вызывать саму себя и начинает возвращать значения.

5. После возврата значения, программа продолжает выполнение кода после вызова функции.

Вот пример, где функция рекурсивно вычисляет факториал числа:

function factorial(n) {
// Условие остановки
if (n === 0) {
return 1;
}

// Вызываем функцию саму себя с уменьшенным аргументом
return n * factorial(n — 1);
}

// Вызываем функцию
console.log(factorial(5)); // Выведет 120

@frontend_school #основы #рекурсия