Forwarded from CSS Боль
Прощай, квадратный веб
Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство
Напомню, чем так мил
Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход
И ещё один приятный момент. Сама функция
В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по
Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство
border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147.Напомню, чем так мил
border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы.Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход
border-shape можно смело называть революцией.И ещё один приятный момент. Сама функция
shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро.В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по
border-shape.🔥10❤6
Рекрутёры всё реже верят резюме на слово. Слишком легко приукрасить опыт — и слишком сложно это проверить по тексту.
Поэтому при отборе растёт вес цифрового профессионального следа: публичные проекты, статьи, выступления, победы в чемпионатах. Всё, что подтверждает навыки и что нельзя подправить задним числом.
Разбираем, из чего складывается такой след и как он влияет на решение о найме.
🎁 Читать статью
Поэтому при отборе растёт вес цифрового профессионального следа: публичные проекты, статьи, выступления, победы в чемпионатах. Всё, что подтверждает навыки и что нельзя подправить задним числом.
Разбираем, из чего складывается такой след и как он влияет на решение о найме.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥2
HTML Academy
Mish — студия №1 по UX сайтов в Рейтинге Рунета. В третьем сезоне Чемпионата по вёрстке участники верстают их макет. В этом сезоне мы запускаем профессиональный трек для действующих разработчиков. Это способ прокачать цифровой профессиональный след и упростить…
Завершаем знакомство с партнёрами-работодателями третьего сезона чемпионата по вёрстке.
«5 углов» — интегратор Битрикс24, входит в топ-20 интеграторов России.
ОФЭП — агентство интернет-маркетинга. Разрабатывает сайты, занимается SEO, продвижением на маркетплейсах и PR.
Coding Team — разработка сайтов, мобильных приложений и AI-решений. Больше 200 реализованных проектов.
Всего за результатами третьего сезона следят больше 30 компаний. До конца активной части чемпионата осталось несколько дней.
👍 Профессиональный трек
«5 углов» — интегратор Битрикс24, входит в топ-20 интеграторов России.
ОФЭП — агентство интернет-маркетинга. Разрабатывает сайты, занимается SEO, продвижением на маркетплейсах и PR.
Coding Team — разработка сайтов, мобильных приложений и AI-решений. Больше 200 реализованных проектов.
Всего за результатами третьего сезона следят больше 30 компаний. До конца активной части чемпионата осталось несколько дней.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥2🔥1
Forwarded from Как стать мидлом
Конфиги webpack часто копируют из проекта в проект, а когда что-то ломается — гуглят каждую строку отдельно. Знакомо?
На курсе разбираемся, как устроена сборка изнутри: от
После курса — сможете собирать и поддерживать конфигурации webpack самостоятельно. #htmlacademy #levelup
🔜 Подробнее
На курсе разбираемся, как устроена сборка изнутри: от
entry и output до разделения кода и оптимизации под рабочее окружение. Настраиваете Babel и ESLint, подключаете обработчики и плагины, учитесь разделять окружения и уменьшать размер итоговой сборки.После курса — сможете собирать и поддерживать конфигурации webpack самостоятельно. #htmlacademy #levelup
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML Academy
«Мидлы без ИИ скоро будут грустить» — что ещё прозвучало на эфире с Зионеком Час разговора с техническим директором — про ИИ в разработке, стек и путь от обучения до штата. Несколько моментов, ради которых стоит включить запись: ❤️ Почему техдир раздал Cursor…
Media is too big
VIEW IN TELEGRAM
«Мы посмотрели результаты чемпионатов по вёрстке и восхитились» — Михаил Иванычев, технический директор Zionec.
После этого компания запустила совместную с Академией программу обучения фронтенду. Что увидели в чемпионатах и зачем готовить разработчиков именно так — в клипе из подкаста.
Полный эфир: Смотреть на YouTube | Смотреть в VK
🎁 Программа обучения
После этого компания запустила совместную с Академией программу обучения фронтенду. Что увидели в чемпионатах и зачем готовить разработчиков именно так — в клипе из подкаста.
Полный эфир: Смотреть на YouTube | Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4👍3🔥3
Совместно с Зионек мы запускаем программу «Фронтенд-разработчик» , открываем запись на программу в соответствии с планом найма, а после обучения компания нанимает выпускников.
HTML Academy предлагает 4 гранта на обучение от компании. Это — последняя возможность зайти в этот поток и гарантировать себе место в штате.
Напишите «ГРАНТ» и начните свою карьеру уже сейчас.
Записаться в Телеграме
Записаться через MAX
HTML Academy предлагает 4 гранта на обучение от компании. Это — последняя возможность зайти в этот поток и гарантировать себе место в штате.
Напишите «ГРАНТ» и начните свою карьеру уже сейчас.
Записаться в Телеграме
Записаться через MAX
🔥3❤2❤🔥2
Встроенные стили побеждают любой селектор в каскаде. Переопределить их из внешних стилей — задача нетривиальная: чаще всего приходится тянуться за
Зачем тогда их использовать? В вёрстке рассылок другого выхода нет — почтовые клиенты блокируют внешние стили. Ещё атрибут
Разбираем приоритет, ограничения и случаи, когда встроенные стили оправданы. #css #html
💡 Читать статью
!important. А псевдоклассы, псевдоэлементы и медиавыражения в атрибуте style вообще не работают — :hover, ::before, @media мимо.Зачем тогда их использовать? В вёрстке рассылок другого выхода нет — почтовые клиенты блокируют внешние стили. Ещё атрибут
style удобен при отладке и в CMS, где стили задаются через интерфейс.Разбираем приоритет, ограничения и случаи, когда встроенные стили оправданы. #css #html
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4❤🔥3🔥2
CSS-свойство WidelyNewly Available. Работает везде.
Одно условие: у элемента должен быть полупрозрачный фон. Без
Где это применять? Модальные окна, карточки с эффектом матового стекла, сайдбары с глубиной. В статье разбираем, как собрать эффект и какие фильтры комбинировать. #css #baseline
⚡ Читать статью
backdrop-filter применяет фильтры к фону за элементом — размытие, контраст, яркость. С сентября 2024 в Baseline Одно условие: у элемента должен быть полупрозрачный фон. Без
rgba или hsla эффект применится, но визуально вы ничего не увидите.Где это применять? Модальные окна, карточки с эффектом матового стекла, сайдбары с глубиной. В статье разбираем, как собрать эффект и какие фильтры комбинировать. #css #baseline
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥5❤4🔥3
Анимация по кривой раньше требовала JavaScript:
В статье показываем разные варианты путей и объясняем, где
✨ Читать статью
getPointAtLength(), requestAnimationFrame, ручной пересчёт координат. Десятки строк кода.offset-path решает задачу средствами CSS. Задаёте путь через path(), запускаете offset-distance от 0% до 100% — элемент движется по кривой, окружности или произвольной траектории. Как управлять поворотом? Для этого есть offset-rotate.В статье показываем разные варианты путей и объясняем, где
offset-path пригодится в интерфейсах. #cssPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4🔥4
Forwarded from Как стать мидлом
Вы когда-нибудь настраивали
Курс «Протоколы и сети: веб-безопасность» — шесть разделов по конкретным группам уязвимостей. XSS, CSRF, SQL-инъекции, DoS, MitM — каждую разбираете на кейсе, пишете защиту и сверяете с эталонным решением. Отдельные практики: настройка CSP, безопасная работа с
На выходе — чек-листы безопасности по каждому разделу. Готовый артефакт для проекта. #htmlacademy #levelup
☝️ Смотреть программу
Content-Security-Policy для рабочего проекта? Тема, которую фронтенд-разработчики откладывают — пока в баг-трекере не появится репорт про XSS.Курс «Протоколы и сети: веб-безопасность» — шесть разделов по конкретным группам уязвимостей. XSS, CSRF, SQL-инъекции, DoS, MitM — каждую разбираете на кейсе, пишете защиту и сверяете с эталонным решением. Отдельные практики: настройка CSP, безопасная работа с
cookie, хеширование паролей с солью, корректный CORS.На выходе — чек-листы безопасности по каждому разделу. Готовый артефакт для проекта. #htmlacademy #levelup
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4🔥3
HTML Academy
«Мидлы без ИИ скоро будут грустить» — что ещё прозвучало на эфире с Зионеком Час разговора с техническим директором — про ИИ в разработке, стек и путь от обучения до штата. Несколько моментов, ради которых стоит включить запись: ❤️ Почему техдир раздал Cursor…
This media is not supported in your browser
VIEW IN TELEGRAM
«Больше работаешь — больше зарабатываешь»
Михаил Иванычев, технический директор Zionec, рассказал, какая зарплата ждёт выпускников совместной программы обучения фронтенду. Ответ — в клипе.
Полный эфир: Смотреть на YouTube | Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣8👍3❤🔥2🔥1
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн.
В четверг 23 апреля в 12:00 (MSK) генеральный директор компании расскажет о совместной программе обучения: как устроена работа в небольшой веб-студии из топ-100 по 1С-Битрикс и почему здесь разработчики растут от вёрстки до фулстека, работая с AI-инструментами.
Бонус: первые 100 зарегистрировавшихся попадают в розыгрыш бесплатного места на программу. Итоги — в конце эфира.
https://htmlacademy.ru/events/live-mediamint
В четверг 23 апреля в 12:00 (MSK) генеральный директор компании расскажет о совместной программе обучения: как устроена работа в небольшой веб-студии из топ-100 по 1С-Битрикс и почему здесь разработчики растут от вёрстки до фулстека, работая с AI-инструментами.
Бонус: первые 100 зарегистрировавшихся попадают в розыгрыш бесплатного места на программу. Итоги — в конце эфира.
https://htmlacademy.ru/events/live-mediamint
❤🔥3🔥3❤2
Какой цвет фона в
А если первое значение —
Каскад — один из четырёх этапов обработки значений в CSS. Сначала браузер фильтрует объявления и отбрасывает невалидные, потом через каскад для каждого свойства выбирает одно значение. Если какого-то не хватает — берёт унаследованное или начальное. Дальше три стадии вычислений: вычисленные, используемые и действительные.
Разбираем весь путь CSS-значения: от объявления в файле до значения, с которым браузер отрисовывает элемент. Со схемами, примерами и тестом для самопроверки. #css
🔴 Читать статью
.selector { background-color: 20px; background-color: red; }?А если первое значение —
var(--not-a-color), и переменная содержит те же 20px? Результат будет другим.Каскад — один из четырёх этапов обработки значений в CSS. Сначала браузер фильтрует объявления и отбрасывает невалидные, потом через каскад для каждого свойства выбирает одно значение. Если какого-то не хватает — берёт унаследованное или начальное. Дальше три стадии вычислений: вычисленные, используемые и действительные.
Разбираем весь путь CSS-значения: от объявления в файле до значения, с которым браузер отрисовывает элемент. Со схемами, примерами и тестом для самопроверки. #css
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4❤🔥3🔥2
HTML Academy
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн. В четверг 23 апреля в 12:00 (MSK) генеральный директор…
Завтра — эфир с CEO. Главные вопросы о нейросетях в работе джуна
23 апреля в 12:00 (MSK) — один час, чтобы успеть спросить главное у CEO компании, которая год работает с ИИ-агентами в повседневной разработке.
Что спросим:
❤️ Джун и ИИ-агент: ускоряет рост или подменяет его
❤️ Какой вопрос на собеседовании показывает: разобрался сам или ответил через агента
❤️ В каких задачах ИИ ускоряет команду прямо сейчас, а в каких всё портит
В нашу программу обучения уже включён курс «Фронтенд на автопилоте: AI-агенты на практике» — научитесь работать с агентами, разбирать их ошибки и встраивать в рабочий процесс.
🎁 Бонус: место на программе обучения разыграем среди первых 100 регистраций. Результат — на эфире.
https://htmlacademy.ru/events/live-mediamint
23 апреля в 12:00 (MSK) — один час, чтобы успеть спросить главное у CEO компании, которая год работает с ИИ-агентами в повседневной разработке.
Что спросим:
В нашу программу обучения уже включён курс «Фронтенд на автопилоте: AI-агенты на практике» — научитесь работать с агентами, разбирать их ошибки и встраивать в рабочий процесс.
https://htmlacademy.ru/events/live-mediamint
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8❤🔥2🔥2
Media is too big
VIEW IN TELEGRAM
Алгоритмы абстрактны, их сложно представить в голове. Поэтому сортировку пузырьком и вставками удобнее посмотреть, чем изучать по тексту.
В клипе — анимация обоих алгоритмов на одних и тех же данных. Сразу видно, как каждый перебирает массив и чем они отличаются по ходу работы.
В интерактивных демках из курса можно задать свой массив и прогнать алгоритм заново:
Сортировка вставками — https://htmlacademy.ru/demos/187
Сортировка пузырьком — https://htmlacademy.ru/demos/181
В клипе — анимация обоих алгоритмов на одних и тех же данных. Сразу видно, как каждый перебирает массив и чем они отличаются по ходу работы.
В интерактивных демках из курса можно задать свой массив и прогнать алгоритм заново:
Сортировка вставками — https://htmlacademy.ru/demos/187
Сортировка пузырьком — https://htmlacademy.ru/demos/181
🔥6❤🔥3❤2