HTML Academy

Суперприёмы Anchor Positioning В детстве мы играли в файтинги на денди (а мажоры на сегамегадрайве). И там были суперприёмы. В анкор позишнинге они тоже есть! Суперприём #1 – прочная связь двух элементов Один угол заякорённого элемента привязываем к первому якорю, противоположный угол — ко второму якорю. Готово. Связь будет сохраняться при перемещении связанных элементов. Визуально оформить связь можно фоном или рамками. Код:

.svyaz {
  /* один угол связали с --a1 */
  top: anchor(--a1 center);
  left: anchor(--a1 center);

  /* второй с --a2 */ 
  bottom: anchor(--a2 center);
  right: anchor(--a2 center);
}

Суперприём #2 – цепочки якорей Один заякорённый элемент можно делать якорем для второго, а тот для третьего и так далее. Простор для творчества — гигансткий. Этот приём напоминает мне школьную игру про "... дорисуй вагон другой". Пощупать эти приёмы можно в очередном уровне игры про Anchor Positioning. Перед этим лучше пройти все предыдущие уровни. → опубликовано через smmtp://

anchor() – царица якорей Функция anchor() живёт внутри большинства сложных демок и крутых приёмов, связанных с якорным позиционированием. Простейший вид якорей: 1. anchor-name у якоря; 2. position-anchor + position-area у привязанного элемента. Продвиутый вид: 1. anchor-name у якоря; 2. inset-свойства со значениями, содержащими anchor(), у привязанного элемента. Например:

.anchor {
  anchor-name: --a1;
}

.target {
  position: absolute;
  left: anchor(--a1 right);
}

То есть элемент можно привязать любой стороной к любому якорю (да-да, элемент можно привязать сразу к нескольким разным якорям). А ещё можно использовать выражения с anchor(). Всё это даёт невероятную гибкость в выборе точек привязки и в позиционировании элементов. Поисследуйте anchor() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования.

Скругления в неожиданных местах Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк. Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc. Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота. P.S.: если в первый раз видите shape(), то начните игру с первого уровня

👍 С 25 по 27 сентября условия покупки курса или профессии предлагаете вы. Мы назвали это «Акцией-конструктором». Например, можно попросить «TypeScript. Теория типов» и «Паттерны проектирования» по цене одного курса. Или скидку на «Фронтенд-разработчика» в индивидуальном формате, где с вами весь путь работает личный наставник. А за курс «Разработка с AI-агентами: инженерный подход» — назвать свою цену. Каждое предложение рассмотрим. Если такие условия возможны, зафиксируем их, если нет — ответим встречным вариантом, и его тоже можно обсуждать. Напишите свои условия нам в @htmlacademy_sales до 27 сентября. Бум!

CSS shape() — фича больших надежд CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape(). shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор? Но давайте посмотрим на текущий потенциал фичи: — сложные формы контейнеров (с нормальной отрисовкой рамок), — траектории движения для анимаций, — просто обрезки, — комбинирование с другими фичами (например с anchor-positioning). Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально. P.S.: куда поместить навык работы с shape() в системе грейдов? Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы?

🔴 Вместе с OKTTA запускаем совместную программу обучения фронтенд-разработчиков Нужна ли студии сильная вёрстка, когда код пишет нейросеть? В 12:00 (MSK) руководитель студии ответит и расскажет, как новичок входит в распределённую команду. Выпускники программы идут на собеседование к каждому её работодателю. После него — оплачиваемая стажировка, штат или попроектная работа, у каждой компании свой формат. Последний шанс на бесплатное место: разыграем его в конце эфира среди первых 100 зарегистрировавшихся. Подключайтесь в 12:00 и оставайтесь до финала, победителя назовём в прямом эфире. 🔜 https://htmlacademy.ru/events/live-oktta

Завтра спросим у работодателя, что джун должен уметь без нейросети Эфир с руководителем студии OKTTA — завтра в 12:00 (MSK). Что спросим: — Что джун должен уметь сам, без нейросети? — Как работодатель понимает, сам ли кандидат сделал тестовое? — Что студия делает с кодом от нейросети, который приносит заказчик? — Каково новичку в команде, где все работают удалённо? Курс «Разработка с AI-агентами: инженерный подход» уже входит в программу отдельным модулем. На нём вы ставите агенту задачу с границами и критериями приёмки, сами тестируете его код и доводите изменения через ревью до релиза. Почему сами? Отвечать за результат всё равно вам, и курс учит видеть, где заканчивается зона агента. Ну и регистрируйтесь сегодня: бесплатное место на программе разыграем среди первых 100 зарегистрировавшихся, итоги подведём в конце эфира. https://htmlacademy.ru/events/live-oktta 🔜 Что хороший разработчик не должен передавать агентам, как считаете? Напишите, а завтра в эфире будет с чем сравнить.

17 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает дизайн и разработку цифровых продуктов: корпоративных сайтов, интернет-магазинов, мобильных приложений. Пока все спорят, забрали ли нейросети стартовые задачи у джунов, спросим у работодателя напрямую: — Какого джуна студия готова взять в команду? — Что нейросеть пока не может сверстать по макету? — Почему бы не нанять верстальщика через обычные отклики? Ответы — в эфире. А среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, победителя назовём в конце. Регистрируйтесь — за час до начала пришлём напоминание. https://htmlacademy.ru/events/live-oktta

CSS Anchor Positioning Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства. Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями. Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич. Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества).

Штош, вот и подходит к концу 1 сентября и начинается учебный год. А ваше «когда-нибудь разберусь с программированием» переедет на следующий учебный год. На htmlacademy.ru снова работает «Колесо фортуны», вход через коробку с подарком. Что выпадет, то ваше: персональная скидка на обучение и повод начать учиться в один день со школьниками.