Aleksandr Rogozhkin

✨ Опубликовали результаты State of CSS 2024 Казалось, что только недавно писал о State of JS 2023 (в конце июня 😱 как быстро время летит), а тут уже вышел CSS. Пробежимся по самому интересному. Для тех, кто не курсе что это вообще такое. State of CSS - это ежегодный опрос разработчиков со всего мира о последних тенденциях CSS Фичи: ❤️Фильтр-эффекты (blur(), contrast() и подобные) набирают популярность и стали самыми используемыми функциями в этом году. ❤️:has() оказался на втором месте (хотя мне за весь год ни разу не пришлось его использовать). ❤️:aspect-ratio использовали в последнее время? А он, оказывается, на 4-м месте. Библиотеки: ❤️Tailwind CSS занимает заслуженное первое место. ❤️Bootstrap держится на втором. Его еще много лет никто не сможет сместить. ❤️Ant Design делит 3-е место с Materialize CSS. Что удивило, так это Vuetify на 19-м (❗️) месте. Мне казалось, что он должен был быть в числе лидеров. CSS-in-JS: Ничего удивительного: CSS-модули идут вровень со Styled Components и занимают первое место. Pre/Post процессоры. Здесь наблюдается интересная тенденция. Ванильный CSS, благодаря новым фичам, значительно обогнал Less и Stylus, что не может не радовать. ❤️Sass/SCSS — первое место, вопросов нет. ❤️PostCSS — второе. ❤️Ванильный CSS. ❤️Less. ❤️Stylus. Ожидаемый функционал. Самое интересное, как по мне: ❤️Миксины. Думаю, было бы логично их добавить в CSS. ❤️Conditional Logic. Сомнительно, конечно. Такой функционал точно нужно будет использовать с умом, чтобы не "выстрелить себе в ногу" и не запутаться в условиях. ❤️Masonry-шаблон. Кто не знает, был (и существует) раньше такой плагин, который выстраивал сетку, как в Pinterest. Это очень полезная фича, и я был бы рад ее добавлению. ❤️Обращение к родителю. Тоже полезный функционал, дайте две! ❤️Nesting. То, к чему мы уже привыкли, сообщество просит добавить на базовый уровень. ❤️Функции. Тема тоже актуальна, берем! И завершить можно хорошими новостями: Conditional Logic, миксины и Masonry-шаблоны уже взяты в работу, но неизвестно, на какой стадии разработки они находятся. Как тебе результаты? Все было ожидаемо или что-то удивило? А что бы ты хотел увидеть в обновлениях CSS? Может, что-то нужно убрать вообще? Ссылка на источник #css #dev

🔥 Жаркий спор по теме Masonry в CSS Как писал выше, CSS получает новый функционал, с помощью которого можно будет создавать сетки по типу Pinterest. Но из-за дебатов между командами WebKit и Chrome релиз задерживается. Решается вопрос о том, как должен выглядеть синтаксис. Вырисовывается классическая картина с двумя стульями: ❤️Добавить свойство display: masonry. Этот вариант предлагает команда Chrome. По мне, так это логичное и лаконичное решение. Однако возникают сложности на адаптиве. Представьте, что у вас сетка построена на flex/grid со своими дочерними свойствами (например, flex-direction и т.д.). Но на каком-то из разрешений вам понадобится использовать display: masonry. Тогда нужно будет снова писать "пачку" дочерних настраиваемых свойств для masonry-сетки. Это уже не так радужно и выглядит громоздко. ❤️Добавить свойства в спецификацию grid. Команда WebKit предлагает добавить свойство collapsed для правил grid-template-rows и grid-template-columns. В этом случае вы получаете всегда grid-сетку с возможностью "свитчить" раскладку, не меняя представление. Но это также добавляет новое значение, что только усложнит настройку сетки. Как итог, пока не понятно, в каком виде это будет выглядеть на этапе релиза, но мы можем повлиять на решение и почувствовать силу демократии, приняв участие в открытом issue от W3C. На какой стороне вы? Какой из предложенных вариантов вам больше нравится? Ставь 🔥 - 1 вариант Ставь ❤️ - 2 вариант Ставь 👍 - флексами рулили и будем разруливать. Не нужон нам этот Masonry #css #dev #news

🔥 Боль работы с JS объектом Date закончится в этом году. В 2024 году JavaScript получил много обновлений и новых функций, которые находятся на 3 и 4 стадии: ❤️ 3 стадия - Функция принята, но ещё рассматривается как проект и может значительно измениться. Тем не менее, в конечном итоге её включат в стандарт, за исключением маловероятных причин ❤️4 стадия - Функция одобрена и находится на стадии валидации. Изменения больше не запрашиваются, кроме необходимых доработок, выявленных при тестировании Сегодня рассмотрим Temporal API — глобальный объект, который улучшает работу с датой и временем. Одна из его особенностей — использование отдельных классов для даты и времени. На данный момент Temporal API находится на 3 стадии. Несколько полезных методов и их API: ❤️ Temporal.Now - предоставляет методы для получения текущего времени и даты. Temporal.Now.instant(): Temporal.Instant - возвращает текущее системное время. Temporal.Now.timeZoneId(): string - возвращает текущую системную тайм-зону. Temporal.Now.zonedDateTimeISO(timeZone: object | string = Temporal.Now.timeZone()) : Temporal.ZonedDateTime - возвращает текущие дату и время в текущем часовом поясе в формате ISO. Temporal.Now.plainDateISO(timeZone: object | string = Temporal.Now.timeZone()) : Temporal.PlainDate - возвращает текущую дату в текущем часовом поясе в формате ISO Temporal.Now.plainTimeISO(timeZone: object | string = Temporal.Now.timeZone()) : Temporal.PlainTime - возвращает текущее время в текущем часовом поясе в формате ISO Temporal.Now.plainDateTimeISO(timeZone: object | string = Temporal.Now.timeZone()) : Temporal.PlainDateTime - возвращает дату и время вместе. Приведу несколько примеров: Temporal.Now.instant(); // => 2024-10-27T16:12:31.894551894Z Temporal.Now.zonedDateTimeISO(); // => 2024-10-27T21:13:09.095589095+05:00[Asia/Yekaterinburg] Temporal.Now.plainDateISO()); // => 2024-10-27 ❤️Temporal.Instant - предоставляет фиксированную точку во времени ("exact time") без учёта календаря и местоположения. Примеры: instant = Temporal.Instant.from('2020-01-01T00:00+05:30'); // => 2019-12-31T18:30:00Z instant.epochNanoseconds; // => 1577817000000000000n // `Temporal.Instant` не имеет свойств зависящих от часового пояса или календаря instant.year; // => undefined zdtTokyo = instant.toZonedDateTimeISO('Asia/Tokyo'); // => 2020-01-01T03:30:00+09:00[Asia/Tokyo] zdtTokyo.year; // => 2020 zdtTokyo.toPlainDate(); // => 2020-01-01 ❤️Temporal.PlainDate - календарная дата, не связанная с определённым временем или часовым поясом. По такому же принципу работают Temporal.PlainTime, Temporal.PlainDateTime, Temporal.PlainYearMonth и Temporal.PlainMonthDay. Примеры: const date = Temporal.PlainDate.from({ year: 2025, month: 1, day: 3 }); console.log(date.year); // => 2006 console.log(date.inLeapYear); // => false console.log(date.toString()); // => '2025-01-03' ❤️Temporal.Duration - представляет временной отрезок. Его можно использовать для арифметики с датами или для вычисления разницы между временными объектами Примеры: const duration = Temporal.Duration.from({ hours: 999, minutes: 59 }); console.log(duration.total({ unit: 'second' })); // => 3599940 console.log(duration.total({ unit: 'minute' })); // => 59999 console.log(duration.total({ unit: 'hour' })); // => 999.9833333333333 Прикрепленные скрины: 1 - Объектная модель 2 - Соотношение между типами в строке Temporal 🧐 Как вы думаете, облегчит ли этот глобальный объект работу с датой и временем или все же нет? 🧐 Будете ли использовать Temporal вместо Date, когда он будет доступен и безопасен в разработке? Буду рад любой обратной связи (коммент, реакция) ❤ @aleksandr_frontend

👩‍💻 Zod. Основные преимущества и неочевидные кейсы использования. Zod — это TypeScript библиотека для валидации и создания схем данных, позволяющая определять строгие типы на этапе разработки. Она значительно упрощает управление типами и обеспечивает безопасность данных в приложениях. В отличие от других решений для валидации данных, Zod написан на TypeScript и позволяет использовать строгую типизацию как на этапе компиляции, так и на этапе выполнения. 🔅 Для простых структур можно задать валидацию буквально в одной строке: const userSchema = z.object({ name: z.string(), age: z.number(), email: z.string().email() }); 🔅 Одним из ключевых преимуществ является автоматическая генерация TypeScript типов из схем Zod. Это избавляет от необходимости дублировать логику валидации и типизацию данных: const user = userSchema.parse({ name: "Aleksandr", age: 31, email: "aleksandr@google.com" }); type User = z.infer<typeof userSchema>; // { name: string, age: number, email: string } 🔅 Zod также поддерживает продвинутые методы валидации: асинхронную валидацию, пользовательские валидаторы и возможность задавать условия на основании других значений в объекте: const passwordSchema = z.string().min(8).max(20); const customSchema = z.object({ password: passwordSchema, confirmPassword: z.string().refine( (value, context) => value === context.parent.password, { message: "Пароли должны совпадать" } ) }); 🔅 Композируемость. В Zod схемы можно легко комбинировать и расширять: const baseUserSchema = z.object({ name: z.string(), age: z.number().min(18), }); const adminSchema = baseUserSchema.extend({ isAdmin: z.boolean(), }); Теперь, когда мы вспомнили/познакомились с основами работы с Zod, можно перейти к неочевидным и полезным вариантам использования. 🔥 Валидация данных с API. Zod идеально подходит для валидации данных, полученных с внешних API. Это помогает избежать ошибок при работе с неподтвержденными данными, особенно если API меняет свою структуру. const apiResponseSchema = z.object({ data: z.array(z.object({ id: z.number(), title: z.string(), })) }); fetch("/api/posts") .then(response => response.json()) .then(data => { const result = apiResponseSchema.safeParse(data); if (!result.success) { console.error("Ошибка. Неподдерживаемый тип response: ", result.error); } }); 🔥 Конфигурации приложений. Zod можно использовать для строгой валидации конфигурационных файлов (например, .env). Это гарантирует корректность настроек на разных окружениях и помогает находить ошибки до запуска приложения: const configSchema = z.object({ PORT: z.string().regex(/^\d+$/).transform(Number), DATABASE_URL: z.string().url(), }); const config = configSchema.parse(process.env); 🔥 Валидация сложных форм. Скорее всего, вы это уже использовали, но если для кого то в новинку, то будет крайне полезно. В комбинации с React или другими библиотеками Zod помогает создавать более надежные интерфейсы с минимальными усилиями: const formDataSchema = z.object({ fields: z.array(z.object({ label: z.string(), value: z.union([z.string(), z.number()]), })) }); А какие кейсы вы встречали, где можно бы было применить Zod и улучшить приложение? Буду рад узнать и обсудить другие варианты применения библиотеки. #javascript #dev

❔ Как подружить вкладки и окна с помощью Broadcast Channel API Иногда возникает необходимость создать канал связи между вкладками, окнами или iframe в рамках одного приложения. Используя данное API, можно закрыть несколько полезных пунктов, как минимум: ✔️ Улучшение UX. ✔️ Повышение безопасности (в некоторых случаях). ✔️ Уменьшение вероятности возникновения багов. Рассмотрим на примере. Представим, что мы в интернет-магазине добавили несколько товаров в корзину и решили следующий товар открыть в новой вкладке, чтобы почитать о нем более подробно. Но в новой вкладке у нас пустая корзина (добавление/удаление товаров не связано с бэкендом). Как раз для такой ситуации, как синхронизация корзины между вкладками, нам и поможет Broadcast Channel API. 1️⃣ Добавление товара в корзину. Создадим новый канал и будем отправлять в него сообщение при каждом добавлении товара в корзину: const cartChannel = new BroadcastChannel('cart-sync'); function addToCart(item) { // Логика добавления товара в корзину const cart = getCartFromLocalStorage(); cart.push(item); saveCartToLocalStorage(cart); // Отправка сообщения другим вкладкам cartChannel.postMessage({ type: 'CART_UPDATED', cart }); } 2️⃣ Обработка изменений в других вкладках. Для корректной работы в других вкладках мы подписываемся на сообщения канала cart-sync и следим за каждым новым сообщением: cartChannel.addEventListener('message', (event) => { if (event.data.type === 'CART_UPDATED') { // Обновление корзины в текущей вкладке updateCartUI(event.data.cart); } }); function updateCartUI(cart) { // Логика для отображения актуального состояния корзины console.log('Корзина обновлена:', cart); } 🙂 Вот и все. Теперь у нас есть корзина, которая живет в своем канале и на которую можно подписываться для обновления в контексте браузера. ❗️ Не забываем также учитывать ограничение — это работает только на одном same origin. Какие есть альтернативы? Вижу только 2 варианта — сокеты или long-polling. Если есть какие-нибудь еще, в разрезе данной задачи — напиши в комментарии, пожалуйста, будет интересно обсудить. #dev #javascript

⚙️ Нашел простой и понятный плагин для работы с запросами Mokku. Недавно Requestly стал платным (урезал free часть) и нужно было искать альтернативные варианты. Этот плагин отлично подошел под задачи, когда нужно протестировать запросы с разными статусами. И все это в дев тулзах. С его помощью можно имитировать: ➡️ Запросы по отдельности. ➡️ Определенные методы. ➡️ Статусы. ➡️ Возвращать кастомный body и заголовки. ➡️ Задавать delay. Для подобных задач правильным выходом бы было использовать MSW, но когда его нет на проекте, а протестировать нужно прямо сейчас, то Mokku должно хватить в большинстве случаев. Ссылка #service #chrome

Спустя 45 дня после отказа от никотина. Прошло уже больше чем 1,5 месяца, как я бросил курить, и могу с уверенностью сказать — это практически выход на плато. Безусловно, тяга практически сошла на нет, но бывают периоды, когда настолько сильно хочется сходить в магазин и купить какую-нибудь одноразку, что кажется, будто и не бросал вовсе. В периоды стресса, отчаяния и других переживаний всё усиливается, но зато в состоянии покоя я уже не чувствую нужды в дыме от слова совсем. Раньше дай только повод, а вейп найдётся — скучно или занят делом, грустно или весело, чувствуешь усталость или, наоборот, полон сил — это железобетонный знак, что нужно попарить (другие курильщики поймут, о чём я). Я считаю это настоящей и осязаемой победой, когда вообще не хочу курить в обычном состоянии и даже не думаю об этом. Что касается состояния стресса, переживаний и других отрицательных чувств — уверен, что и это смогу победить, если не опущу руки ...в карман за банковской картой, чтобы расплатиться в вейп-шопе. На сегодняшний день могу чётко описать свой опыт и что сейчас ощущаю в целом. 🥵 Представь, что в самом начале отказа от никотина к твоей спине прилипает раскалённый чугунный диск, для наглядности пусть будет 100 °C. И вот с каждым днём этот диск остывает, но не быстро, на 1 градус в день. Ты понимаешь, что в конце концов он полностью остынет, и можно смело его снять, но пока он 99 °C, завтра будет 98 °C и т. д. Да, уже не так жарит, но всё-таки ещё жарит и ты устал уже от этого. Моментами хочется сорваться, забывая про пройденный путь и думая: «Почти получилось же, в другой раз так же попробую и точно брошу». Тут главное не поддаться. Ты начинаешь торговаться с мозгом: что-то он спускает с глаз долой, что-то ты, и в конце итог один — ты закурил и всё было зря, а следующий раз будет либо ещё тяжелее, либо просто невозможен. Вот это нужно держать в голове и не отпускать в такие моменты. Если у тебя есть опыт, вопросы или подсказки — буду рад прочитать и обсудить. 👍 В прошлый раз реакций было много, спасибо вам. Я не хочу каждую неделю подводить какие-то мнимые итоги, считаю, что такие посты нужно писать, когда приходишь к чему-то новому и интересному. ❤ Поэтому, по старой схеме, если реакций будет много, то, во-первых, мне будет очень приятно 😺 Во-вторых, я буду фиксировать все интересные чувства и ситуации, и следующим постом будет выжимка из этого. Думаю, будет интересно. #health #life #smoking

‼️ Мир тестирования JS приложений больше не будет прежним Using fake browser environments means that developers introduce an environment that doesn't exist anywhere except tests which can lead to testing something that cannot happen when an actual person uses your Web Application. Как то очень тихо прошел релиз Vitest 2.0, включая его новую киллер фичу 👑 Vitest Browser Mode - больше никакого fake DOM. Браузер мод построен на основе Playwright и будет рендерить компоненты внутри iframe, используя реальные данные браузера. Можно смело предположить, что тестирование станет более очевидным, точным и прозрачным Пока что фичу завезли как экспериментальную, но ее уже можно попробовать пощупать. Документация также уже описана (ссылка) 🟡 Release Notes 🟡 Обсуждение, планы развития PS: Также очень много пофикшено багов 😘 #service #dev #javascript

🎞 Релиз HTMX 2.0 17 июня была выпущена версия 2.0. На сегодняшний день доступна уже 2.0.1. HTMX — это библиотека для HTML, которая позволяет создавать динамические и интерактивные веб-приложения без использования JavaScript-фреймворков. Основная идея HTMX заключается в использовании HTML-атрибутов для управления взаимодействиями с сервером. Основные особенности релиза: 🟡 Улучшена поддержка веб-компонентов. 🟡 Упрощён синтаксис атрибутов. 🟡 Разделение расширений в отдельный репозиторий и сайт, что облегчает их индивидуальное обновление и развитие. 🚫 Прекращение поддержки Internet Explorer 🟡 Добавили гайд по переходу со старых версий. Современная разработка фронтенда усложняется с каждым днем. Порог входа растёт с каждым годом, библиотеки и фреймворки постоянно обновляются, и вот, как будто бы, приходит очередная технология и заявляет, что способна перевернуть игру. Что не нужно хранить состояние приложения на клиенте и сервере, не нужно тянуть тонны npm пакетов и погружаться в излишнюю логику 😐 Бесспорно, технология очень хороша и интересна. HTMX обязательно найдёт свою нишу и закрепится в ней, я в этом уверен. Но, имхо, вам не кажется, что это очередная технология, которая "ну прям точно" перевернёт фронтенд с ног на голову? Я всё-таки думаю, что сейчас это выглядит как новый jQuery (в хорошем смысле). Он используется на многих сайтах и зарекомендовал себя как простой, но надёжный инструмент. Он покрывает необходимые цели, обновляется (📌4.0.0-beta.2 вот выкатили на прошлой неделе, кстати), и всё с ним до сих пор хорошо. Такое чувство, что там, где jQuery сейчас — можно смело заменить на HTMX, но там, где SPA — будет сложнее, дороже, и, скорее всего, невозможно технически. Может, в SSR его сейчас можно попробовать применить, но тоже достаточно рискованно. По крайней мере, сейчас. ❤ PS: В заключение хотелось бы поделиться личным мнением. Все инструменты хороши, но они должны эффективно и максимально быстро решать задачи. Нужно последить ещё за HTMX. Возможно, попробовать в личных проектах, дождаться, когда его завезут в крупные компании. Но совершенно точно я бы не стал использовать его в рабочих проектах. Слишком много неизвестных. ❤❤ PSS: Подкреплю довольно точный комментарий с Хабра. А вот и сама статья, рекомендую к прочтению (обязательно с комментариями) #dev

🌟 Непопулярное, но полезное - Page Visibility API Данное API предоставляет интерфейс для работы с видимостью текущей вкладки и переключения между ними, когда пользователь сворачивает и разворачивает окно. Также с его помощью можно приостанавливать long-polling или другие ресурсоемкие задачи, которые не нужно выполнять, когда пользователь "неактивен". Примеры использования: ✅ Приостанавливать long-polling запросы к серверу ✅ Ставить на паузу автопроигрывание слайдера с картинками ✅ Отключать звук в видео или приостанавливать воспроизведение аудио ✅ Приостанавливать рендеринг данных, которые обновляются в реальном времени ✅ Собирать аналитические данные И другие возможные ситуации, которые можно решить, используя доступный интерфейс. Page Visibility API имеет всего лишь два свойства и одно событие для получения состояния видимости страницы: 🟡 document.hidden - возвращает булевое значение, доступно только для чтения. 🟡 document.visibilityState - возвращает одно из четырех значений: - visible - страница активна (текущая вкладка активна и не свернута) - hidden - страница неактивна - prerender - страница находится в предварительном состоянии отрисовки - unloaded - страница была выгружена из памяти 🟡 visibilitychange - событие document, которое возникает при изменении visibilityState 👋 Пример использования: document.addEventListener("visibilitychange", function() { if (document.visibilityState === "visible") { console.log("Страница видима"); } else if (document.visibilityState === "hidden") { console.log("Страница скрыта"); } }); #javascript #dev