gram news
Аватар канала Фронтенд заметки

Фронтенд заметки

@frontend_zametki

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

1,290подписчиков

Открыть канал

Последние посты

  • Фронтенд заметки

    27 мар., 08:17

    Наглядный пример разницы между space-between, space-around и space-evenly (justify-content) в CSS Flexbox🔜 space-between ⤵️ - максимальное свободное пространство между элементами - между краями нет пробелов - все пробелы равны🔜 space-around ⤵️ - максимально допустимое расстояние между элементами - 1/2 расстояния по краям🔜 space-evenly ⤵️ - максимальное доступное пространство между элементами и по краям👍 - если было полезно
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    26 мар., 10:17

    Шпаргалка по методам строк в JavaScript👍 - если было полезно
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    13 мар., 14:03

    👨‍💻 Вёрстка адаптивного сайта для новичков по БЭМ с адаптивностьюИз этого видео-урока вы узнаете, как сверстать сайт по готовому макету, использую HTML, CSS, БЭМ, Flexbox и Grid.БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке, в основе которого лежит принцип разделения интерфейса на независимые блоки.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    10 мар., 08:24

    📱 5 важных моментов из JavaScript, которые помогут избегать ошибокПри работе с JavaScript всегда следует стремиться по возможности улучшить качество кода.Из этой статьи вы узнаете о пяти важных моментах, которые помогают разработчикам избегать ошибок и принимать правильные решения в отношении кода.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    5 мар., 18:09

    🖥 Ввод кода подтверждения на JavaScript | Верификация формыИз этого видео вы узнаете, как реализовать переход между полями при вводе, как вставлять весь код сразу из буфера обмена и обрабатывать стрелки с backspace.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    24 февр., 18:15

    💻 Вероятно, что эти HTML и CSS-ошибки есть в вашем кодеИз этой статьи вы узнаете о распространённых HTML и CSS-ошибках, которые допускают некоторые разработчики, чтобы избежать их в своих проектах
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    10 февр., 13:13

    🧿 Производительность web и React приложений, анализ, дебаг, инструменты, примерыИз этого видео вы узнаете, как дебажить (анализировать) производительность веб и React приложений. Изучите несколько подходов, посмотрите примеры.В уроке будем использовать такие инструменты как react developer tools, виджет приложение React Scan, google chrome lighthouse, узнаем про профилирование, lazy loading (ленивую загрузку), разницу между development и production сборками, разницу между дебагом в обычной вкладки или в инкогнито, про bundle analyzer, про core web vitals метрики и как они влияют на производительность.Посмотрим на мемоизацию в React на деле и как пофиксить layout shift.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    5 февр., 09:24изменён

    💻 Интересные HTML и CSS фичи, которые почему-то обходят сторонойВо фронтенде изменения происходят постоянно. Только разобрался с одним инструментом, он уже считается устаревшим. Плюс на смену ему появляются новые. В JavaScript регулярно добавляются новые методы и API, а HTML и CSS, разумеется, не отстают.Неудивительно, что в этом постоянном круговороте часть возможностей проходит мимо или просто забывается.В этой статье автор собрал несколько таких фич, о которых, по моему опыту, разработчики забыли.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    3 февр., 11:42

    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    28 янв., 06:40

    💻 Какие новые HTML и CSS фичи полностью поддерживаются браузерами в 2026 годуЭта статья — краткий обзор появившихся возможностей, какие новые фишки в HTML и CSS стали поддерживаться современными браузерами. Что уже можно использовать.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    25 янв., 11:10

    📱 Функции call, apply и bind: использование и сравнениеВ JavaScript ключевое слово this имеет решающее значение для обеспечения работы функций в определенном контексте. Чтобы эффективно определить контекст и использовать функции для различных объектов, полезными решениями являются такие методы, как call(), apply() и bind().В этой статье мы детально рассмотрим эти методы и способы их использования.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    25 янв., 09:05

    😎 Пожалуй, это лучшее объяснения, как работает z-index в CSSz-index — CSS свойство, которое определяет порядок наложения элементов в трёхмерном пространстве на веб-страницеЕщё больше полезных фишек и мемов по фронтенду на канале: ➡️ WebTaverna 😮
    481видео321Открыть в Telegram
  • Фронтенд заметки

    7 дек. 2025 г., 12:15

    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
    673511Открыть в Telegram
  • Фронтенд заметки

    30 нояб. 2025 г., 15:03

    📱 5 важных моментов из JavaScript, которые помогут избегать ошибокПри работе с JavaScript всегда следует стремиться по возможности улучшить качество кода.Из этой статьи вы узнаете о пяти важных моментах, которые помогают разработчикам избегать ошибок и принимать правильные решения в отношении кода.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    14 нояб. 2025 г., 14:12

    👨‍💻 Full-stack разработка в 2025: Какой стек технологий выбрать?Если вы хотите узнать, какие связки технологий наиболее популярны в 2025 и что стоит доучить, чтобы стать full-stack разработчиком, эта статья вам поможет! Её автор три раза анализировал вакансии на разных площадках, в начале, середине и конце года, чтобы данная информация была наиболее полезной и честной.Также, если давно думали сделать свой пет-проект, но не знали, на чем сделать вторую часть приложения, тут есть ответ и на этот вопрос.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    13 нояб. 2025 г., 15:11

    👩‍💻 Слайдер до/после на JavaScriptИз этого видео вы узнаете, как сделать с нуля слайдер “до и после”. Без плагинов — только чистый HTML, CSS и JS.В конце получится плавный и красивый эффект, как на сайтах портфолио и бьюти-студий.
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    13 нояб. 2025 г., 07:14

    💱 Форматирование чисел с помощью Intl.NumberFormatОбъект Intl.NumberFormat в JavaScript предоставляет возможность форматирования в соответствии с языковыми правилами: числа, валюты, проценты и единицы измерения, такие как длина, температура и прочее...Он может принимать 2 параметра ⤵️ Intl.NumberFormat([locales[, options]]) 🔜 locales - код языка 🔜 options - дополнительный набор опцийДля примера рассмотрим создание коротких форм для чисел ⤵️ const numRu = new Intl.NumberFormat('ru', { notation: 'compact' }) console.log(numRu.format(1200)) // 1,2 тыс. console.log(numRu.format(1200000)) // 1,2 млнconst numEn = new Intl.NumberFormat('en', { notation: 'compact'
  • Фронтенд заметки

    12 нояб. 2025 г., 15:12

    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    12 нояб. 2025 г., 07:18

    👩‍💻 CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?Адаптивная вёрстка — основа современного фронтенда. Долгое время в CSS было всего два способа задать условия ширины: min-width и max-width. Они отлично справлялись со своей задачей, но имели свои особенности.С выходом спецификации Media Queries Level 4 в CSS появился новый, более интуитивный синтаксис для написания диапазонов, приближённый к привычной математикеИз этой статьи вы узнаете, как работает новый синтаксис и стоит ли переходить?
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
  • Фронтенд заметки

    11 нояб. 2025 г., 15:25

    А вы какой тип?😁 - Жаворонок 😎 - Сова 😢 - Постоянно уставший гусь
    Иллюстрация к посту канала Фронтенд заметкиИллюстрация к посту канала Фронтенд заметки
    4031353Открыть в Telegram