Forwarded from CSS Боль
CSS Masking уже почти Widely Available, а многие до сих пор её игнорируют.
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
В новом выпуске «CSS Боли» разбираем CSS-маски для тех, кто с ними не знаком, с помощью интерактивных визуализаций.
— Что такое маскирование и как оно работает.
— Главная «киллер-фича» масок.
— Принцип работы масок.
— 4 свойства, которые закрывают 95% задач.
— Классный пример маски в реальном интерфейсе.
🎁 Попробуйте в демке самостоятельно и смотрите разбор целиком. Если работаете с UI — это надо знать.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
В новом выпуске «CSS Боли» разбираем CSS-маски для тех, кто с ними не знаком, с помощью интерактивных визуализаций.
— Что такое маскирование и как оно работает.
— Главная «киллер-фича» масок.
— Принцип работы масок.
— 4 свойства, которые закрывают 95% задач.
— Классный пример маски в реальном интерфейсе.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥5
CSS-псевдоклассы задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.
Интерактивные элементы веб-страницы живут не сами по себе, а в зависимости от действий пользователя. В статье разбираем три базовых состояния элементов: при наведении курсора, при фокусе управления с клавиатуры или тач-устройства и в активном состоянии при нажатии. Показываем, как с помощью соответствующих правил стиля управлять внешним видом кнопок и ссылок в каждом из этих случаев, чтобы интерфейс был понятным и удобным в использовании.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍3
Forwarded from CSS Боль
Статья «Восхитительный Range Syntax в CSS»
Помните сĸазĸу про мальчиĸа, ĸоторый ĸричал «волĸи»? Примерно таĸ же в 2025 году случилось с «программированием на CSS». Вышла фунĸция
В ĸонце 2025 года Chrome выĸатил революционный Range Syntax For Style Container Queries. Обновлённый
В статье мы возрождаем идею программирования на CSS. На примере паттерна — «выделение диапазона дат в ĸалендаре» — разберём, ĸаĸ обычная JS-логиĸа превращается в CSS-логиĸу (спойлер: очень просто).
Читать статью → https://habr.com/ru/articles/1002216/
Попробовать демку → https://htmlacademy.ru/demos/249
Помните сĸазĸу про мальчиĸа, ĸоторый ĸричал «волĸи»? Примерно таĸ же в 2025 году случилось с «программированием на CSS». Вышла фунĸция
if() . Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчиĸи пошли читать специфиĸации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею.В ĸонце 2025 года Chrome выĸатил революционный Range Syntax For Style Container Queries. Обновлённый
style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наĸонец-то получили мощную условную логиĸу в CSS, но мало ĸто это заметил.В статье мы возрождаем идею программирования на CSS. На примере паттерна — «выделение диапазона дат в ĸалендаре» — разберём, ĸаĸ обычная JS-логиĸа превращается в CSS-логиĸу (спойлер: очень просто).
Читать статью → https://habr.com/ru/articles/1002216/
Попробовать демку → https://htmlacademy.ru/demos/249
❤8❤🔥2👍2⚡1
Цвет в веб-странице — это не только «чёрный» или «белый», а целая система представления чисел, отражающая интенсивность, оттенок и прозрачность.
В статье разбираем основные форматы задания цвета в таблицах стилей: от традиционных шестнадцатеричных записей, через десятичные каноничные значения, до более современных пространств цвета, основанных на восприятии человека. Каждый формат имеет свои сильные стороны и области применения, и понимание этих различий помогает создавать более точные, согласованные и устойчивые визуальные решения. #цвет
🎁 Читать статью
В статье разбираем основные форматы задания цвета в таблицах стилей: от традиционных шестнадцатеричных записей, через десятичные каноничные значения, до более современных пространств цвета, основанных на восприятии человека. Каждый формат имеет свои сильные стороны и области применения, и понимание этих различий помогает создавать более точные, согласованные и устойчивые визуальные решения. #цвет
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4🔥3⚡2
Начинающие верстальщики в своих первых проектах часто задают высоту элементам, чтобы попасть в размеры чётко по макету. Давайте разберёмся, а действительно ли высота везде нужна?
Вёрстка макета часто начинается с попытки «задать высоту» элементам — но CSS-свойство
height умеет гораздо больше, чем просто фиксировать размер. В статье подробно разбираемся, как работает высота: при указании точного значения блок сохраняет заданный размер независимо от содержимого, а когда применяется относительная запись в процентах, высота рассчитывается от родительского элемента. Это позволяет управлять вертикальным пространством — от декоративных элементов до областей, наполненных контентом. Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7🔥3⚡2❤1
Forwarded from Как стать мидлом
Git и GitHub
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Курс — про прикладную работу с Git от основы до уверенных навыков: установка и первичная настройка, локальный и удалённый репозитории, ветки и модели ветвления, слияния и разрешение конфликтов, сравнение версий и файлов, откладывание и отмена изменений. Разбираем rebase и cherry-pick, восстановление через reflog, SSH и GPG-подпись коммитов.
Результат: уверенно настраиваете и связываете репозитории, выстраиваете историю коммитов, ведёте ветки под задачи, безопасно сливаете и откатываете изменения, быстро находите нужные диффы, спасаете ситуацию с помощью reflog и собираете аккуратный рабочий процесс.
🔶 Записаться на курс
Курс — про прикладную работу с Git от основы до уверенных навыков: установка и первичная настройка, локальный и удалённый репозитории, ветки и модели ветвления, слияния и разрешение конфликтов, сравнение версий и файлов, откладывание и отмена изменений. Разбираем rebase и cherry-pick, восстановление через reflog, SSH и GPG-подпись коммитов.
Результат: уверенно настраиваете и связываете репозитории, выстраиваете историю коммитов, ведёте ветки под задачи, безопасно сливаете и откатываете изменения, быстро находите нужные диффы, спасаете ситуацию с помощью reflog и собираете аккуратный рабочий процесс.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥2⚡2
Media is too big
VIEW IN TELEGRAM
Что будет, если вы не выйдете на работу?
Основатель SimpleUp рассказывает, как компания реагирует на пропуски и опоздания новичков.
Полный эфир — на YouTube и в VK.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎁 Программа обучения
Основатель SimpleUp рассказывает, как компания реагирует на пропуски и опоздания новичков.
Полный эфир — на YouTube и в VK.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤🔥1🔥1
В VS Code встроена подсветка ошибок и автодополнение, но для JavaScript этого мало. Форматировать код вручную, искать npm-модули по памяти, переключаться между проектами через проводник — всё это отнимает время.
Собрали 17 плагинов, которые закрывают эту рутину. Например,
🎁 Читать статью
Собрали 17 плагинов, которые закрывают эту рутину. Например,
npm Intellisense подсказывает модули по первым символам, а сниппет req + Tab разворачивает require в готовую строку. Каждый плагин — с описанием и ссылкой на установку. #js #vscodePlease open Telegram to view this post
VIEW IN TELEGRAM
⚡6❤🔥2
Media is too big
VIEW IN TELEGRAM
CSS Masking: быстро, просто и понятно.
CSS-маски — мощная и уже зрелая технология, которая в ближайшее время становится Widely Available. В этом ролике разбираем их с самого нуля. Попробуйте в демке самостоятельно и смотрите разбор целиком.
Полный разбор:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
CSS-маски — мощная и уже зрелая технология, которая в ближайшее время становится Widely Available. В этом ролике разбираем их с самого нуля. Попробуйте в демке самостоятельно и смотрите разбор целиком.
Полный разбор:
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤4❤🔥2
Сначала инженерная база — HTML, CSS, JavaScript, React и архитектура приложений. И только потом AI-агенты.
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Профессия «Нейрофронтендер» построена именно так: нейросеть даёт ощутимый эффект только тогда, когда разработчик понимает, что происходит под капотом. Финальный модуль — работа с Cursor и GPT-5: генерация юнит-тестов, автодокументирование кода, ускорение ревью.
720 часов, 8 учебных проектов и индивидуальный проект с глубоким ревью кода. Для новичков, учитесь в своём темпе.
🎁 Подробнее о программе
Профессия «Нейрофронтендер» построена именно так: нейросеть даёт ощутимый эффект только тогда, когда разработчик понимает, что происходит под капотом. Финальный модуль — работа с Cursor и GPT-5: генерация юнит-тестов, автодокументирование кода, ускорение ревью.
720 часов, 8 учебных проектов и индивидуальный проект с глубоким ревью кода. Для новичков, учитесь в своём темпе.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Если вы работаете в Figma только мышкой — вы работаете медленно. Переключение инструментов, экспорт, переименование слоёв — каждое действие через меню отнимает секунды, которые за день складываются в минуты.
Горячие клавиши это исправляют.
🎁 Читать статью
Горячие клавиши это исправляют.
Ctrl + \ прячет весь интерфейс, Ctrl + / открывает поиск по меню, V, F и T переключают инструменты мгновенно. Разбираем самые полезные сочетания с примерами и скриншотами. #tools #figmaPlease open Telegram to view this post
VIEW IN TELEGRAM
❤5❤🔥2🔥1
Пока все спорят, заменит ли ИИ программистов, мы учим тех, кто этим ИИ управляет.
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Мы запустили новую профессию — «Нейрофронтендер». Это для тех, кто хочет не просто «кодить», а мастерски владеть нейросетями и глубоко понимать базу. Мы не учим просто копировать промпты. Мы даем хардкорную базу (HTML, JS, React) и сверху накладываем магию: работу с GPT-5 и Cursor.
В чем фишка: сначала учимся понимать код и полностью разбираем базу, а потом разбираемся с подключением в процесс нейросетей, чтобы делать рутину в 2 раза быстрее. Это и есть та самая инженерная элита, за которой сейчас охотятся компании.
Формат — лайт. Учитесь когда удобно, без дедлайнов. И по цене сейчас в 5 раз выгоднее обычных курсов.
🎁 Подробнее
🐶 Записаться через Telegram
📲 Записаться через Max
Мы запустили новую профессию — «Нейрофронтендер». Это для тех, кто хочет не просто «кодить», а мастерски владеть нейросетями и глубоко понимать базу. Мы не учим просто копировать промпты. Мы даем хардкорную базу (HTML, JS, React) и сверху накладываем магию: работу с GPT-5 и Cursor.
В чем фишка: сначала учимся понимать код и полностью разбираем базу, а потом разбираемся с подключением в процесс нейросетей, чтобы делать рутину в 2 раза быстрее. Это и есть та самая инженерная элита, за которой сейчас охотятся компании.
Формат — лайт. Учитесь когда удобно, без дедлайнов. И по цене сейчас в 5 раз выгоднее обычных курсов.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤4❤🔥3
Forwarded from Как стать мидлом
На алгоритмических собеседованиях спрашивают O-большое и обход деревьев, а в продакшене те же знания помогают найти «дорогой» цикл до ревью.
Курс «Алгоритмы и структуры данных» — задачи на JavaScript, привязанные к реальному фронтенду. Разберёте, почему
🎁 Подробнее о курсе
Курс «Алгоритмы и структуры данных» — задачи на JavaScript, привязанные к реальному фронтенду. Разберёте, почему
Map и Set убирают дубли за O(1) вместо O(n), как работает diff виртуального DOM и когда quicksort подходит для «живого» поиска. Гибкие сроки — начать можно прямо сейчас. #htmlacademy #levelupPlease open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM