Слайдер пригодится для блока с отзывами, страницы с командой или галереи товаров. Внутри — работа с 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
🔥5❤🔥2👍1
Модальное окно — частая задача и частый источник багов. Затемнение, блокировка прокрутки, ловушка фокуса, 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👍1👏1