Голограммы без шейдеров и JavaScript — это вообще реально?
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Да, и в новом выпуске «CSS Боль» мы это доказываем.
Три слоя, конический градиент и два режима смешивания
Самое интересное: можно менять цвета, скорость вращения и параметры градиента прямо в интерактивной демке. Один эффект превращается в десятки вариантов — от тёплого свечения до холодного льда.
Разбираем на примере карточки заклинания из «Героев 3». Потому что ностальгия.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Да, и в новом выпуске «CSS Боль» мы это доказываем.
Три слоя, конический градиент и два режима смешивания
mix-blend-mode — вот и весь секрет переливающегося эффекта. Никакого WebGL, никаких библиотек. Только conic-gradient(), @property и правильное наложение слоёв.Самое интересное: можно менять цвета, скорость вращения и параметры градиента прямо в интерактивной демке. Один эффект превращается в десятки вариантов — от тёплого свечения до холодного льда.
Разбираем на примере карточки заклинания из «Героев 3». Потому что ностальгия.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤🔥2 2
This media is not supported in your browser
VIEW IN TELEGRAM
Как сверстать карточку с вырезом? Разбираем старый и новый способ.
#css
#css
🔥26👍7❤🔥1
И главное — среди первых 100 регистраций разыграем одно бесплатное место на совместную программу. Это 8,5 месяцев обучения с наставником и возможность проектной работы после выпуска.
Как участвовать:
В эфире основатель студии WAPP расскажет, как устроен фронтенд в студии разработки: какие задачи решают новички, как работает формат проектной занятости и что нужно, чтобы пройти путь от выпуска до первых оплачиваемых заказов.
https://htmlacademy.ru/events/live-wapp
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5⚡3❤🔥3
Как понять, что юзер нажал клавишу: события клавиатуры в JavaScript
В статье разбираются сами события, их работа при нажатии и отпускании клавиши, почему
✅ Читать статью
Событияkeydownиkeyupпомогают обрабатывать взаимодействие с клавиатурой: когда срабатывают, чем отличаются и где применяются — от горячих клавиш до форм и простых игр. Плюс коротко о безопасности и доступности, чтобы решения были надёжными и удобными для всех.
В статье разбираются сами события, их работа при нажатии и отпускании клавиши, почему
keypress считать легаси, и чем отличаются event.key и event.code: первое зависит от раскладки, второе — от физической клавиши. Есть мини-примеры и практические советы. #js #a11yPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤3❤🔥3
HTML Academy
Прямой эфир с основателем студии разработки WAPP HTML Academy и компания WAPP запускают синдикатный поток обучения под работодателя. Небольшая группа из 10 человек, четыре модуля за 8,5 месяцев и возможность проектной работы после выпуска — обучение адаптировано…
Вместе с WAPP запускаем синдикатный поток совместной программы обучения
Сегодня в 12:00 (MSK) — прямой эфир со студией разработки WAPP. Основатель компании расскажет, как устроен фронтенд в студии, что ждёт выпускников на проектной работе и как пройти путь от обучения до первых заказов.
В финале разыграем бесплатное место на программу!
https://htmlacademy.ru/events/live-wapp
Сегодня в 12:00 (MSK) — прямой эфир со студией разработки WAPP. Основатель компании расскажет, как устроен фронтенд в студии, что ждёт выпускников на проектной работе и как пройти путь от обучения до первых заказов.
В финале разыграем бесплатное место на программу!
https://htmlacademy.ru/events/live-wapp
⚡6 4❤🔥3
Forwarded from Как стать мидлом
Дизайн для фронтендеров
Курс учит прикладной «дизайнерской грамотности» разработчика: работе с Figma (стили, компоненты, библиотеки), сетке и вертикальному ритму (включая 8px-подход), типографике и иерархии, цвету и контрастности с учётом доступности, адаптиву без готовых макетов, безопасной UI-анимации и базовым UX-паттернам.
После курса вы умеете применять на практике:
📎 работать в Figma со стилями, компонентами и библиотеками;
📎 строить сетку (8px), держать выравнивание и вертикальный ритм;
📎 собирать резиновую вёрстку и адаптив без готовых макетов, продумывать крайние состояния;
📎 добавлять состояния интерактивных элементов и уместно анимировать UI.
🔵 Записаться на курс
Разработчику важно понимать принципы интерфейсного дизайна и пользовательского опыта — так вы сможете самостоятельно дорабатывать макеты: собирать адаптив, добавлять состояния и править огрехи без потери качества.
Курс учит прикладной «дизайнерской грамотности» разработчика: работе с Figma (стили, компоненты, библиотеки), сетке и вертикальному ритму (включая 8px-подход), типографике и иерархии, цвету и контрастности с учётом доступности, адаптиву без готовых макетов, безопасной UI-анимации и базовым UX-паттернам.
После курса вы умеете применять на практике:
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥6🔥3❤1
Media is too big
VIEW IN TELEGRAM
Разбираем ограничения при трудоустройстве с ONLY
Предпочитаете работать дома или в офисе? Как вливаться в мир разработки до 18 лет? Марианна Воденицкая, HRBP ONLY, рассказала про удалёнку, возрастные и другие ограничения.
Полный эфир с ONLY — по ссылке:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
⭐️ Программа обучения
Предпочитаете работать дома или в офисе? Как вливаться в мир разработки до 18 лет? Марианна Воденицкая, HRBP ONLY, рассказала про удалёнку, возрастные и другие ограничения.
Полный эфир с ONLY — по ссылке:
⭐️ Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4👍3🔥3
Запись вчерашнего эфира с WAPP — на выходные
400₽/час на старте, пересмотр через 3-6 месяцев, проектная работа. Максим Ермилов рассказал про реальную экономику студии: почему нет постоянной занятости, как растут ставки и зачем нужна «скамейка запасных» из 30 человек.
Плюс — как клиенты продавили переход с Vue.js на React и что такое «собеседование по вайбу».
🐭 Смотреть на YouTube
🐹 Смотреть в VK
⚫️ Программа обучения
400₽/час на старте, пересмотр через 3-6 месяцев, проектная работа. Максим Ермилов рассказал про реальную экономику студии: почему нет постоянной занятости, как растут ставки и зачем нужна «скамейка запасных» из 30 человек.
Плюс — как клиенты продавили переход с Vue.js на React и что такое «собеседование по вайбу».
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7 6❤2🔥2
С 26 по 31 октября — страшно выгодная неделя в Академии! Заклинания скидок уже наложены: одно вращение колеса — и в вашу корзину падает хэллоуинский подарок.
Не дайте скидкам испариться — они исчезнут, как туман под утро.
Коротко: 1 вращение • 26–31 октября • Ведьмино Колесо Профессий.
🎃 https://htmlacademy.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥6 6⚡4😱2
Как сделать вогнутые углы без боли, костылей и SVG?
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
❗️ В новом выпуске «CSS Боль»:
✓ Что такое инвертированный угол и почему его так сложно сверстать нативно
✓ Как nebo.css решает задачу буквально одним классом
✓ Как настраивать форму угла через CSS-переменные
✓ Что нового в версии 1.1 — независимые радиусы, эллипсы и параметр
✓ Как добавить сразу несколько углов и добиться сложных форм без единого SVG
Никаких псевдоэлементов, дополнительных
🐭 Смотреть на YouTube
🐹 Смотреть в VK
nebo.css в помощь. Это маленькая, но мощная CSS-библиотека, которая превращает мучения с инвертированными углами в пару строк кода.✓ Что такое инвертированный угол и почему его так сложно сверстать нативно
✓ Как nebo.css решает задачу буквально одним классом
✓ Как настраивать форму угла через CSS-переменные
✓ Что нового в версии 1.1 — независимые радиусы, эллипсы и параметр
✓ Как добавить сразу несколько углов и добиться сложных форм без единого SVG
Никаких псевдоэлементов, дополнительных
div-ов и хака с позиционированием — всё работает даже на градиентах и изображениях. HTML Academy подготовили для вас библиотеку, чтобы боль исчезла.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11❤3❤🔥2
Функцииbtoa()иatob()— встроенные средства JavaScript для кодирования и декодирования строк в формате base64.
Base64 — это не шифрование и не способ защитить данные, а способ представить бинарную информацию в текстовом виде. В статье разбираем, как это работает в JavaScript:
btoa() и atob() кодируют и декодируют строки, но только для байтовых строк (ASCII/Latin-1). При попытке закодировать Unicode-текст браузер бросит ошибку — показываем, как обойти это через TextEncoder и TextDecoder. Это важно, если вы работаете с emoji, кириллицей или API с многоязычными данными. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
👍4❤🔥3❤2
Осенью вечера становятся длиннее. Кто-то зажигает фонари у дверей, а мы — зелёные галочки в тренажёрах. Десять-двадцать решённых заданий в день — и код становится светлее.
С 3 по 9 ноября запускаем осеннюю неделю от @htmlacademy. Вместе с нашими партнёрами-работодателями — Addamant, Grokhotov Studio и Bquadro — на неделю открываем бесплатный доступ к тренажёрам с заданиями и испытаниями. Вызовы и мастер-классы — по активной подписке; баллы за них учитываются в общем зачёте.
Что вас ждёт?
1️⃣ 895 заданий и 151 испытание по HTML, CSS, SVG и JavaScript.
2️⃣ Рейтинг: выполняйте задания и испытания, поднимайтесь в топ-30.
3️⃣ Викторина на неделю — 200 вопросов, баллы за правильные ответы.
Зовите друзей, проходите задания и повышайте шансы на призы. Подробнее — на лендинге.
Начинаем 3 ноября — присоединяйтесь и приглашайте друзей!
Подробнее | Telegram-бот
С 3 по 9 ноября запускаем осеннюю неделю от @htmlacademy. Вместе с нашими партнёрами-работодателями — Addamant, Grokhotov Studio и Bquadro — на неделю открываем бесплатный доступ к тренажёрам с заданиями и испытаниями. Вызовы и мастер-классы — по активной подписке; баллы за них учитываются в общем зачёте.
Что вас ждёт?
Зовите друзей, проходите задания и повышайте шансы на призы. Подробнее — на лендинге.
Начинаем 3 ноября — присоединяйтесь и приглашайте друзей!
Подробнее | Telegram-бот
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7 5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Карточка с адаптивным поведением. HTML Academy подготовили для вас демонстрацию, чтобы посмотреть детально каждый шаг.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤🔥3 3
Операторы ?? и ??= — удобные инструменты для работы с null и undefined в JavaScript. Они делают код короче, понятнее и безопаснее, особенно при задании значений по умолчанию или аккуратном обновлении переменных.
В статье разбираем, как
?? отличается от ||: если || подставляет значение по умолчанию при любом «ложном» значении (0, '', false), то ?? реагирует только на реальные отсутствия данных — null и undefined. Показываем практику: дефолты для настроек, аккуратная инициализация свойств с ??= — значение задаётся только когда данных нет. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤🔥3👍3
API Intl.RelativeTimeFormat — инструмент для отображения относительного времени в локализованном виде. Он прост в использовании, поддерживает множество языков и подходит для интерфейсов, где важна понятность и культурная адаптация.
В статье разбираем, как выводить относительное время естественным языком: «вчера», «через 2 дня», «3 недели назад». Всё это без сторонних библиотек: создаём
new Intl.RelativeTimeFormat('ru', { numeric: 'auto' }) и передаём число и единицу времени (day, hour, month). API автоматически подстраивается под выбранную локаль и грамматические формы; саму разницу во времени считаем отдельно. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
👍11