🎁 Подарочный сертификат «Журналуса»

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

🎄В честь нового года предлагаем порадовать любимых дизайнеров, фотографов, арт-директоров и менеджеров подпиской на «Журналус»

zhurnalus.ru

Реклама ИП Олейниченко Кирилл Александрович, ИНН 781697320774, erid: 2SDnjdtqUgp

Что нового в TypeScript 4.9 - оператор satisfies

Алоха товарищи фронты! Я знаю что TS 4.9 это не самая новая версия так как недавно анонсировали TS 5.0. Но я думаю что далеко не все знают о том что нового было в версии 4.9 и уверен что многим будет это полезно.

И так что делает новый оператор:

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

Рассмотрим на примере:

type FormFields = "name" | "surname" | "age";
const data: Record<FormFields, number | string> = {
name: "name",
surname: "surname",
age: 21,
}

const newAge = data.age * 2;
const nameUpperCase = data.name.toUpperCase();

❗ Объект data имеет как числовые, так и строковые значения, поэтому при работе с этим объектом мы получаем следующие ошибки:

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
Property 'toUpperCase' does not exist on type 'string | number'.
Property 'toUpperCase' does not exist on type 'number'.

Вот тут-то нам и поможет оператор satisfies.

type FormFields = "name" | "surname" | "age";

const data = {
name: "name",
surname: "surname",
age: 21,
} satisfies Record<FormFields, string | number>

const newAge = data.age * 2;
const nameUpperCase = data.name.toUpperCase();

Также оператор satisfies можно использовать для отлова некоторых ошибок. Например, для проверки объектов на наличие ключей, соответствующих заданному типу:

type FormFields = "name" | "surname" | "age";
const data = {
name: "name",
surname: "surname",
age: 21,
passport: {}
} satisfies Record<FormFields, string | number>

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

Стартуем через минутку) https://www.youtube.com/watch?v=SpaEOARH5Ug

Типы ритма в веб-дизайне

Автор

Sound of Fabric -— модный бренд, который воспевает красоту ткани. Дизайнеры Sofia Noceti, Crista Bernasconi решили поиграть с начертанием названия и начали с ручной гравировки небольших кусочков ткани.

Позднее визуальная система была вдохновлена поэзией ее следов, текстур и сочетаний. Авторы добавили цвет на цифровом этапе, думая о нем как о звуке в композиции и определяя яркую палитру, вдохновленную шкалой Do. Логотип выделяется жирным черным шрифтом, как большой звук в середине музыки. Наконец, фотография демонстрирует простоту хорошей ткани, доказывая, что ей не нужно ничего другого, чтобы выделиться.


Дизайн: UFFICIO ™

Минутка веб:

Сегодня веб-дизайн может реализовать многие идеи пространственных метафор. Например, пространство экрана как комнаты, блоки, даже части комикса. Посмотрите на интерфейс как 3D-комикс, созданный с помощью splinetool дизайнера Антона Реппонена.