Новое CSS свойство 🔥

Chrome в 150 версии добавил text-fit, который позволяет динамически подгонять размер шрифта под размер контейнера.

По спецификации у него может быть до 7 значений, но пока что работают только 3 из них:
none (по-умолчанию) — ничего не меняет
grow — увеличивает размер шрифта до тех пор, пока текст полностью не заполнит контейнер
shrink — уменьшает размер шрифта до тех пор, пока он целиком не влезет в контейнер

🔗 Ссылка на спецификацию
⚙️ Поддержка браузерами пока небольшая

Проапгрейдили polygon()

Chrome в 150 версии добавил ключевое слово round, которое позволяет задать скругление любым формам, созданным этой функцией:

clip-path: polygon(round 20px, 50% 0%, 0% 100%, 100% 100%);

⚙️ Таблицу на caniuse пока не завезли

Проапгрейдили url()

Chrome в 150 версии добавил функции 3 модификатора запроса:

🦜 cross-origin() — указывает, какие заголовки разрешено отправлять в запросе

Возможные значения:
anonymous — запрещает отправку учётных данных пользователя (куки, HTTP аутентификация, TLS сертификаты)
use-credentials — разрешает их отправку

Пример:

background-image:
  url(
    "https://private.example.com/bg.jpg"
    cross-origin(use-credentials)
  );

🦜 integrity() — проверяет, не был ли ресурс подменён на сервере злоумышленником, используя ранее переданный хеш

Пример:

background-image: url(
  "https://private.example.com/bg.jpg"
   integrity("sha384-VeryLongBase64HashHere...")
);

🦜 referrer-policy() — управляет в каком виде Referrer заголовок будет отправлен на сервер

Возможные значения:
no-referrer — не отправляет этот заголовок вообще
no-referrer-when-downgrade — отправляет во всех случаях, кроме перехода с HTTPS на HTTP
same-origin — отправляет только внутри одного origin
origin — отправляет только origin ресурса
strict-origin — отправляет только origin и только при безопасных переходах
origin-when-cross-origin — если запрос внутри сайта, то полный URL, если на внешний ресурс, то только origin
strict-origin-when-cross-origin — если запрос внутри сайта, то полный URL, если на внешний ресурс и по безопасному соединению, то только origin, при при переходе с HTTPS на HTTP впринципе ничего не отправляет
unsafe-url — всегда отправляет полный URL

⚙️ Поддержка браузерами средняя (cross-origin(), integrity(), referrer-policy())

Новое значение свойства background-clip

Chrome в 150 версии добавил border-area (не путать с border-box), благодаря которому теперь можно оставить фон элемента только под его рамкой.

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

⚙️ Поддержка браузерами средняя

Новая CSS функция

Chrome в 150 версии добавил image(), который позволяет подставить цвет в качестве изображения.

Эта функция не даёт ничего принципиально нового, но избавляет нас от необходимости писать громоздкий код через "костыли".

До:

.hero {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url('scenery.jpg');
}

После:

.hero {
  background-image: 
    image(rgba(0, 0, 0, 0.5)), 
    url('scenery.jpg');
}

⚙️ Таблицу на caniuse пока не завезли

Проапгрейдили функцию light-dark()

Если раньше в неё можно было передавать только цвета, то с выходом Chrome 150 версии, стали доступны и изображения.

До:

.banner {
  background-image: url('sun.jpg');
}

@media (prefers-color-scheme: dark) {
  .banner {
    background-image: url('moon.jpg');
  }
}

После:

.banner {
  background-image: light-dark(url('sun.jpg'), url('moon.jpg'));
}

⚙️ Поддержка браузерами средняя

Контейнерные запросы теперь можно объединять

Если раньше приходилось дублировать дважды один и тот же код, то с выходом Chrome 150 версии, стало доступно объединение условий под общим блоком.

До:

@container (width > 600px) {
    .card {
        display: flex;
        gap: 24px;
        align-items: center;
    }
}

@container (height > 400px) {
    .card {
        display: flex;
        gap: 24px;
        align-items: center;
    }
}

После:

@container (width > 600px),
           (height > 400px) {
    .card {
        display: flex;
        gap: 24px;
        align-items: center;
    }
}

⚙️ Таблицу на caniuse пока не завезли

Хочу поделиться важной новостью

Я запустил свой стартап. Мы с командой пытаемся решить проблему сломанного IT рынка.

За последние 2 недели проект значительно продвинулся и продолжает очень быстро развиваться.

Сейчас мы хотим усилить команду и ищем:
— Дизайнеров
— Backend разработчиков (Node.js)

Если вы хотите поработать над амбициозным продуктом в команде с большим коммерческим опытом и внести вклад в решение общей проблемы — напишите мне в личные сообщения (@usersavchenko).

Также, если среди ваших знакомых есть подходящие специалисты, буду сильно благодарен за репост.

Стартовала 4 неделя разработки стартапа 🤟🏻

Всем привет! Извиняюсь, что в последнее время так редко выхожу на связь. Работа над проектом идёт полным ходом и становится очень сложно найти время на традиционные посты.

Думаю после запуска MVP уже в ближайшее время должно стать попроще и я смогу вернуться к прежнему формату, а пока что расскажу, как у нас идут дела.

К проекту подключилось более 10 человек (число участников продолжает расти).

🍒 Традиционный scrum со спринтами и прочим организовать не получилось, поэтому сделали гибрид с kanban:
1) Ставим общую большую цель на неделю, к которой все стремимся
2) Раз в 2 дня проводим дейлики, на которых также и добираем задачи
3) По желанию задачи можно добирать и самостоятельно, предварительно отписав об этом в чате

🍒 Все поставленные цели на каждую из первых трёх недель закрыты:
1 неделя — каркас приложения (собственный UI Kit, окружение и прочее)
2 неделя — сборка всех запланированных страниц
3 неделя — адаптив страниц под мобильные устройства и исправление визуальных недочётов
4 неделя (планируем) — подключить все страницы к бекенду, добавить обработку всех ошибок и промежуточных состояний

🍒 Получилось организовать:
1) Подробнейшую документацию по ведению кода
2) Удобнейшую аналитику по тому, как должна быть устроена каждая из страниц
3) Макеты изначально пробовали собирать в Figma самостоятельно, но, как позже оказалось, платный ChatGPT справляется с этой задачей в разы лучше, поэтому очень быстро перешли на него

Завёл отдельный канал стартапа, в котором буду дальше публиковать новости наших достижений.

🔗 Ссылка на канал

Какую проблему решает наша платформа?

Хотел сегодня рассказать как прошла 4-я неделя разработки, но решил подсобрать чуть больше фич, чтобы картина смотрелась более целостно.

Поэтому немного повременю с этим и расскажу в чём смысл нашей площадки.

🍎 Мы пытаемся цифровизировать спрос и предложение на рынке IT, решая 2 большие проблемы:

1) Компании, стартапы и индивидуальные разработчики не знают, что именно нужно рынку, поэтому пытаются угадать, имея какие-то изначальные данные и у них это не всегда получается
2) Люди из других сфер имеют какие-то потребности, но не имеют специализированной площадки, на которой можно было бы о них написать

🍎 В связи с текущим кризисом сокращается огромное число IT специалистов и перед ними встаёт выбор:

1) Пойти работать в другую сферу
2) Пытаться упорно в условиях огромной конкуренции найти работу по профессии

Мы же пытаемся расширить этот список. В условиях, когда у работодателя нету работы, необходимо становиться работодателем самостоятельно, объединяясь в команды или действуя в одиночку.

🍎 Как это будет работать?

Представим себе Дмитрия. Он работает врачом и у него есть собака. Зачастую у него не хватает времени, чтобы её выгулять и он уже давно подумывает:

— Вот бы было такое приложение, в котором можно было бы найти человека, который бы сделал это за меня!

Он заходит на наш сайт и пишет об этом.

Через несколько дней идея собирает более 100 лайков, а в разделе голосования 23 человека выбирает опцию "Готов платить за это".

Ещё через день идею замечает разработчик Андрей, а также 2 стартапа и, понимая достаточно высокий спрос, берутся за разработку.

На всех этапах и разработчики и автор идеи общаются друг с другом в личных сообщениях и комментариях.

По итогу Андрея и ещё нескольких индивидуальных разработчиков принимают в один из стартапов, а автор идеи через месяц получает 2 крутых и конкурентоспособных приложения, которые полностью покрывают его потребности.

🔗 Ссылка на канал