Слайдер пригодится для блока с отзывами, страницы с командой или галереи товаров. Внутри — работа с DOM, хранение текущего индекса и обработчики событий: знакомый набор задач, которые в JavaScript решают разными способами.
В статье — один из вариантов на чистом JavaScript: как найти элементы разметки, инициализировать
➡️ Читать статью
В статье — один из вариантов на чистом JavaScript: как найти элементы разметки, инициализировать
slideIndex, повесить обработчики на кнопки и обновить отображение активного слайда. В конце — список готовых библиотек на случай, если писать с нуля не нужно. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4⚡2
HTML Academy
Кекс возвращается на Кексодачу завтра. В город он уезжал по делам Академии — за неделю там накопились ревью, релизы и встречи с наставниками. Колесо у ворот висело под навесом, ждало хозяина. Завтра Кекс снова заведёт «Запорожец», снимет колесо с гвоздя…
Закрытие сезона на Кексодаче.
Кекс вернулся, «Запорожец» опять завёлся со второй попытки, колесо снято с навеса и стоит у ворот. Урожай этого сезона остался — морковь, кабачки, прошлогоднее варенье. Делиться есть чем.
Три дня и потом ворота закрываются до следующего года. Кто не успел в открытие или забыл забрать свою корзинку — приходите сейчас. Скидка до 50% на любой курс HTML Academy.
🌸 Зайдите на htmlacademy.ru, нажмите кнопку с колесом и крутаните его. Скидка применяется к любой профессии или интенсиву. До 10 мая.
Кекс вернулся, «Запорожец» опять завёлся со второй попытки, колесо снято с навеса и стоит у ворот. Урожай этого сезона остался — морковь, кабачки, прошлогоднее варенье. Делиться есть чем.
Три дня и потом ворота закрываются до следующего года. Кто не успел в открытие или забыл забрать свою корзинку — приходите сейчас. Скидка до 50% на любой курс HTML Academy.
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Как стать мидлом
После курса вы соберёте микроанимации для состояний
Разберётесь в пайплайне отрисовки браузера и поймёте, почему
В WebGL увидите, что происходит между вершинным и фрагментным шейдером, как передавать данные через attributes, uniforms и varying. В Three.js научитесь изолировать движения через
А ещё GSAP, Snap.svg и PixiJS — чтобы наверняка. #htmlacademy #levelup
🎁 Подробнее
:hover и :focus, морфинг SVG-логотипа через анимацию атрибута d, прорисовку иллюстрации через stroke-dasharray и stroke-dashoffset, Canvas-сцены с физикой и собственными функциями плавности, шейдерные эффекты на GLSL (цветовые фильтры, маски, displacement, шум Перлина), трёхмерные сцены на Three.js с Camera Rig и шейдерной постобработкой — без сторонних анимационных библиотек.Разберётесь в пайплайне отрисовки браузера и поймёте, почему
transform и opacity не вызывают пересчёт раскладки и перерисовку, а left запускает их заново. Узнаете, как читать prefers-reduced-motion, отлаживать FPS в DevTools и применять 12 принципов анимации Disney к интерфейсам.В WebGL увидите, что происходит между вершинным и фрагментным шейдером, как передавать данные через attributes, uniforms и varying. В Three.js научитесь изолировать движения через
Group, делать сжатие и растяжение с сохранением объёма и проектировать Camera Rig под конкретную задачу.А ещё GSAP, Snap.svg и PixiJS — чтобы наверняка. #htmlacademy #levelup
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4👍3❤1😱1
HTML Academy
«Я постою над тобой и не дай бог шаг вправо, шаг влево» — CEO про джуна пять лет назад Максим Заруцкий из MediaMint это помнит и не скрывает: пять лет назад он бы сказал джуну — полгода в офисе, надо посидеть, познакомиться. Сегодня берёт новичка на удалёнку…
Media is too big
VIEW IN TELEGRAM
«Есть технари, есть гуманитарии — хочется посмотреть, как мыслит человек»
Максим Заруцкий, CEO MediaMint, про интервью с выпускником совместной программы обучения. В клипе — помимо кода, на что ещё смотрят и как устроен испытательный срок после интервью.
Запись эфира: смотреть на YouTube | смотреть в VK
🧠 Программа обучения
Максим Заруцкий, CEO MediaMint, про интервью с выпускником совместной программы обучения. В клипе — помимо кода, на что ещё смотрят и как устроен испытательный срок после интервью.
Запись эфира: смотреть на YouTube | смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3❤🔥2👍1
HTML Academy
Закрытие сезона на Кексодаче. Кекс вернулся, «Запорожец» опять завёлся со второй попытки, колесо снято с навеса и стоит у ворот. Урожай этого сезона остался — морковь, кабачки, прошлогоднее варенье. Делиться есть чем. Три дня и потом ворота закрываются до…
Сегодня Кекс закрывает Кексодачу.
К вечеру — досками теплицу, потушить мангал, проводить лягушек, снять колесо с петель. С завтрашнего дня ворота закрыты, колесо в сарае до следующего мая.
Если откладывали — последние часы. Скидка до 50% на любой курс Академии работает до ночи.
🌸 Зайдите на htmlacademy.ru до полуночи, крутаните колесо и заберите свою скидку. Завтра ворота закрыты до следующего мая.
К вечеру — досками теплицу, потушить мангал, проводить лягушек, снять колесо с петель. С завтрашнего дня ворота закрыты, колесо в сарае до следующего мая.
Если откладывали — последние часы. Скидка до 50% на любой курс Академии работает до ночи.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
article a, aside a, footer a — список из трёх селекторов. С :is() его можно записать как один: :is(article, aside, footer) a.У
:is() и :where() есть один нюанс, из-за которого они работают по-разному: специфичность. Один из них её повышает, второй — нет, и от этого зависит, где их безопасно применять. Разбираемся в статье. #css #webdev📂 Читать статью
Самый частый способ получить последний элемент массива в JavaScript —
Метод
⚡ Читать статью
arr[arr.length - 1]. Громоздко, и нужно знать длину.Метод
.at() вошёл в стандарт ECMAScript в 2022 году и делает это короче: arr.at(-1) — последний, arr.at(-2) — предпоследний. Работает не только на массивах. Подробности и нюансы — в статье. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤🔥3👍2
Модальное окно — частая задача и частый источник багов. Затемнение, блокировка прокрутки, ловушка фокуса, Escape — каждый пункт легко сломать.
Тег
👀 Читать статью
Тег
<dialog> берёт это на себя. Открыть, закрыть, стилизовать фон — на встроенных методах и одном псевдоэлементе. С 2022 года работает во всех современных браузерах. В статье — как устроен и что важно знать перед продакшеном. #html #dialogPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7❤3🔥1
Подключаете UI-кит, пишете свой класс — он не работает. Добавляете класс поконкретнее — всё равно. В итоге появляется
Правило
⭐ Читать статью
!important, и так по цепочке. Знакомо?Правило
@layer решает это иначе — приоритет задаёт сам автор стилей, а не специфичность селекторов. Стили UI-кита можно завернуть в отдельный слой и спокойно их перебивать. С 2022 года поддерживается во всех современных браузерах. Как настроить порядок и что важно учесть — в статье. #css #uikitPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4👍2🔥1
Обновили главу «Радиальные градиенты» в тренажёре «Погружение в декоративные эффекты». Раньше она держалась на одном испытании. Теперь — полноценная глава, с теорией и практикой.
В финале собирается карточка-билет с круглым вырезом. Тот самый паттерн с купонов и билетов, который часто делают через SVG или дополнительные элементы. Здесь он работает на одном блоке —
Глава пока открыта бесплатно. Хороший момент попробовать.
💎 Попробовать → https://htmlacademy.ru/courses/419
В финале собирается карточка-билет с круглым вырезом. Тот самый паттерн с купонов и билетов, который часто делают через SVG или дополнительные элементы. Здесь он работает на одном блоке —
radial-gradient() и mask-image. Вырез «просвечивает» любой фон под карточкой.Глава пока открыта бесплатно. Хороший момент попробовать.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Media is too big
VIEW IN TELEGRAM
Как успешно откликаться на HH?
Рынок найма перегрет. На одну вакансию — сотни откликов. Большинство даже не читает описание. И в этой реальности выигрывает не тот, кто отправил резюме первым, а тот, кто смог доказать свой опыт.
Рынок найма перегрет. На одну вакансию — сотни откликов. Большинство даже не читает описание. И в этой реальности выигрывает не тот, кто отправил резюме первым, а тот, кто смог доказать свой опыт.
❤🔥2👍2👏1
Зачем команде со своими AI-сервисами джун-фронтендер
Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK) — эфир с директором.
Спросим:
❤️ Какие задачи получает джун в первый месяц в команде
❤️ Как фронтендер растёт до фулстека внутри компании
❤️ Что меняется в работе, когда AI-агенты пишут часть кода
❤️ Почему компания вкладывается в свой поток джунов
Среди первых 100 регистраций разыграем место на программе обучения. Имя победителя — на эфире.
https://htmlacademy.ru/events/live-maxis
Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK) — эфир с директором.
Спросим:
Среди первых 100 регистраций разыграем место на программе обучения. Имя победителя — на эфире.
https://htmlacademy.ru/events/live-maxis
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Три карточки в сетке. У каждой — заголовок, описание и кнопка. Заголовки разной длины, и кнопки разъезжаются по разной высоте. Сетка выглядит рваной.
Что с этим делали раньше? Считали высоту заголовков через JavaScript и проставляли
Внутри статьи — рабочая демка, разбор синтаксиса для строк и столбцов и сравнение с обычным Grid. Firefox с 2019-го, Chrome 117+, Safari 16+ — уже в baseline. #css #subgrid
🔔 Читать статью
Что с этим делали раньше? Считали высоту заголовков через JavaScript и проставляли
min-height. Или мирились. Теперь хватает одной строки CSS — grid-template-rows: subgrid на каждой карточке. Карточки наследуют строки родительской сетки, и одинаковые блоки соседних карточек выстраиваются по общим линиям.Внутри статьи — рабочая демка, разбор синтаксиса для строк и столбцов и сравнение с обычным Grid. Firefox с 2019-го, Chrome 117+, Safari 16+ — уже в baseline. #css #subgrid
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤🔥3👍3
Представьте карточку товара. На широком экране она вытягивается горизонтально: слева фото, справа текст. На узком — становится вертикальной: фото сверху, текст снизу. Кажется, медиавыражения справятся.
А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий —
Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.
В статье — пример с резиновой карточкой кроссовок и разбор
📎 Читать статью
А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий —
@media смотрит на размер окна и промахивается. Карточка снова вытянулась горизонтально, хотя места ей не хватает.Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.
В статье — пример с резиновой карточкой кроссовок и разбор
container-type. А ещё — именованные контейнеры для нескольких блоков на странице и cqw — новые единицы измерения от ширины контейнера. Chrome 105+, Safari 16+, Firefox 110+ — уже в baseline. #css #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥3👍2
HTML Academy
Зачем команде со своими AI-сервисами джун-фронтендер Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK)…
Завтра спросим у Maxis: зачем им джун, если код пишет Codex
Завтра в 12:00 (MSK) — эфир с директором Maxis. AI-агенты пишут джуновский код, и компании всё равно держат свои программы обучения. Спросим, как разработчик заходит в команду в этой реальности.
❤️ На каких задачах AI-агенты ускоряют команду, а где ломают качество
❤️ Как джуну расти, если рутинный код всё чаще пишет агент
❤️ На что смотрит работодатель, чтобы отделить разработчика с навыком от автора промптов
В программу обучения уже включён модуль «Фронтенд на автопилоте: AI-агенты на практике» — выпускники приходят к работодателю, умея работать с AI-кодингом.
💯 Среди первых 100 регистраций разыграем место на программе. Имя победителя — на эфире.
https://htmlacademy.ru/events/live-maxis
Завтра в 12:00 (MSK) — эфир с директором Maxis. AI-агенты пишут джуновский код, и компании всё равно держат свои программы обучения. Спросим, как разработчик заходит в команду в этой реальности.
В программу обучения уже включён модуль «Фронтенд на автопилоте: AI-агенты на практике» — выпускники приходят к работодателю, умея работать с AI-кодингом.
https://htmlacademy.ru/events/live-maxis
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4
Forwarded from CSS Боль
This media is not supported in your browser
VIEW IN TELEGRAM
Реактивный CSS всё ближе
Свершилось! В 151 Firefox завезли стилевые контейнерные запросы. Это значит, что сложная клиентская логика на CSS теперь доступна во всех основных браузерах. И доклады про реактивный CSS становятся всё более актуальными
Есть и ещё одна хорошая новость. За флагом добавили range синтаксис для сравнений:
То есть Firefox в вопросах клиентской логики семимильными шагами догоняет Chrome. Для полной картины осталось добавить только
Детали релиза:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151
Свершилось! В 151 Firefox завезли стилевые контейнерные запросы. Это значит, что сложная клиентская логика на CSS теперь доступна во всех основных браузерах. И доклады про реактивный CSS становятся всё более актуальными
Есть и ещё одна хорошая новость. За флагом добавили range синтаксис для сравнений:
@container style() range syntax queries: layout.css.attr.enabled
То есть Firefox в вопросах клиентской логики семимильными шагами догоняет Chrome. Для полной картины осталось добавить только
if().Детали релиза:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151
🔥3❤🔥2
HTML Academy
Зачем команде со своими AI-сервисами джун-фронтендер Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK)…
Сегодня в 12:00 (MSK) — эфир с директором Maxis. Команда делает свои продукты на React и AI-решения для среднего бизнеса, и через программу обучения растит к себе фронтендеров — с реальными задачами уже в первые месяцы. На эфире разберём, как джун попадает в команду и почему компания вкладывается в свой поток выпускников.
💯 Регистрация в первой сотне — последний шанс на розыгрыш места на программе. Имя победителя назовём в финале эфира.
https://htmlacademy.ru/events/live-maxis
https://htmlacademy.ru/events/live-maxis
Please open Telegram to view this post
VIEW IN TELEGRAM
Кекс вернулся в Скриптомск.
Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.»
Майский поток профессии «Фронтенд-разработчик» в мини-группе открыт. По случаю задержки — минус 35% от обычной цены. Считайте это извинением за то, что заставили работодателей ждать.
Десять месяцев, группа до десяти человек, наставник дважды в неделю. Путь от вёрстки до React и TypeScript. В программу бонусом включён практический курс по AI-агентам.
Записаться в Телеграме
Записаться через MAX
Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.»
Майский поток профессии «Фронтенд-разработчик» в мини-группе открыт. По случаю задержки — минус 35% от обычной цены. Считайте это извинением за то, что заставили работодателей ждать.
Десять месяцев, группа до десяти человек, наставник дважды в неделю. Путь от вёрстки до React и TypeScript. В программу бонусом включён практический курс по AI-агентам.
Записаться в Телеграме
Записаться через MAX
❤🔥2❤2🔥2
HTML Academy
Кекс вернулся в Скриптомск. Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.» Майский…
На столе у Кекса с утра — папка с программой майского потока. Просим его пройтись по страницам.
Перелистывает.
Ещё страница.
Закрывает папку, тянется за второй — потоньше.
Каждую неделю в группе — два часовых занятия с наставником, нагрузка в среднем двенадцать часов. Скидка 35% действует до конца воскресенья.
Записаться в Телеграме
Записаться через MAX
«HTML и CSS, профессиональная вёрстка. Два с половиной месяца. Стартовый модуль, без него никуда».
Перелистывает.
«JavaScript. Здесь „Кекстаграм“ — учебный проект, сервис для загрузки и просмотра фотографий. Мой любимый».
Ещё страница.
«Архитектура клиентских приложений: ООП, MVP, REST API. Здесь начинается взрослая разработка».
«Дальше React и TypeScript. Финал».
Закрывает папку, тянется за второй — потоньше.
«Это бонусом — практический курс по AI-агентам. После того, что ИИ устроил с Кексоботом в январе, разбираться в этой теме теперь обязаны все. Тем, кто заходит с майского потока, мы курс просто включили в программу».
Каждую неделю в группе — два часовых занятия с наставником, нагрузка в среднем двенадцать часов. Скидка 35% действует до конца воскресенья.
Записаться в Телеграме
Записаться через MAX
⚡3❤🔥2👍1