CSS Anchor Positioning

Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства.

Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.

Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.

Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества).

17 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает дизайн и разработку цифровых продуктов: корпоративных сайтов, интернет-магазинов, мобильных приложений.

Пока все спорят, забрали ли нейросети стартовые задачи у джунов, спросим у работодателя напрямую:

— Какого джуна студия готова взять в команду?
— Что нейросеть пока не может сверстать по макету?
— Почему бы не нанять верстальщика через обычные отклики?

Ответы — в эфире. А среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, победителя назовём в конце.

Регистрируйтесь — за час до начала пришлём напоминание.

https://htmlacademy.ru/events/live-oktta

CSS shape() — фича больших надежд

CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().

shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?

Но давайте посмотрим на текущий потенциал фичи:
— сложные формы контейнеров (с нормальной отрисовкой рамок),
— траектории движения для анимаций,
— просто обрезки,
— комбинирование с другими фичами (например с anchor-positioning).

Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.

P.S.: куда поместить навык работы с shape() в системе грейдов?

Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы?

Скругления в неожиданных местах

Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк.

Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc.

Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота.

P.S.: если в первый раз видите shape(), то начните игру с первого уровня

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() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования.

Суперприёмы 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://

Большой визуальный гайд по CSS Anchor Positioning

От базовой привязки элементов до прикладных приёмов: создания прочных соединителей и цепочек якорей.

Собрали материалы нескольких месяцев работы в большую статью в формате "CSS-фича в картинках". Получилось больше 50 иллюстраций!

Теперь про Anchor Positioning можно и почитать, и поиграть.

https://habr.com/ru/articles/1092540/

→ опубликовано через smmtp://

Эта студия делала первые версии сервиса, который знает каждый, кто хоть раз искал работу

WayDev работает с тех времён, когда каждая веб-команда писала собственную CMS. Теперь студия — один из работодателей нашей новой программы «Фронтенд-разработчик».

22 октября в 12:00 (MSK) на эфире познакомимся с её руководителем и командой, в которую попадут выпускники. Спросим:

– Какими проектами в студии гордятся больше всего?
– Как устроена команда разработки и где в ней место фронтенд-разработчика?
– Что руководитель хочет понять о новичке на собеседовании?

Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе. Победителя выберем случайно и назовём в конце эфира.

https://htmlacademy.ru/events/live-waydev

«Ответственный и легкообучаемый»: какие слова в резюме раздражают рекрутеров

SuperJob спросил 1000 эйчаров, есть ли в резюме слова, которые их раздражают. Вопрос был открытый: варианты не предлагали, каждый писал своё.

Что называли чаще всего, в долях опрошенных:

– «многозадачность» — 21%
– «стрессоустойчивость» — 15%
– «ответственность» — 14%
– «коммуникабельность» — 12%
– «легкообучаемость» — 9%

Все пять слов — это заявления о себе, которые по резюме нельзя проверить. Среди прочих ответов рекрутеры упоминали и обратную сторону: в резюме не указаны результаты работы.

Опрос измеряет раздражение, а не решение: из него не следует, что за слово «ответственность» резюме отклоняют. Больше половины рекрутеров такие слова не задевают. И это не срез по ИТ и не срез по начинающим — опрашивали кадровиков из всех отраслей.

У начинающего в резюме мало строк про опыт, и пустое место чаще всего занимают как раз эти слова — это наше рассуждение, опрос его не проверял. Заменить их можно тем, что у вас уже есть.

Возьмите своё резюме и к каждому слову о себе допишите: какая была задача, что вы сделали сами, чем закончилось. «Легкообучаемость» превращается в строку о том, что вы освоили и что на этом сделали. «Ответственность» — в работу, которую вы довели до конца и можете показать. Если дописать нечего, слово лучше убрать: без подтверждения оно ничего не сообщает.

Приглашения на собеседование это не гарантирует. Но это та часть отбора, которая зависит от вас.

Студия встроила ИИ в работу команды. Что теперь доверят джуну?

Завтра, 22 октября, в 12:00 (MSK) — эфир с руководителем WayDev. Спросим, как это устроено и что это значит для новичка:

– Какие задачи студия доверит джуну, который умеет работать с ИИ?
– Что о работе с ИИ спрашивают на собеседовании?
– Кто принимает решение, если код написал агент?

Работать с ИИ-агентами учат и в программе: курс «Разработка с AI-агентами: инженерный подход» идёт отдельным модулем после вёрстки и JavaScript. На нём вы учитесь ставить агенту задачу и проверять результат. Этот курс мы добавили во все профессии с работодателями.

Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, итоги подведём завтра в конце эфира.

https://htmlacademy.ru/events/live-waydev