Secret Code

Новая архитектура позволяет комбинировать варианты, которые действуют на другие селекторы, такие как group-*, peer-*, has-* и новый вариант not-*. В предыдущих версиях варианты типа group-has-* были явно определены во фреймворке, но теперь group-* может компоноваться с существующим вариантом has-*, который может компоноваться с другими вариантами, такими как focus. 1 • 2 • 3

Любители Tailwind, держите новости по 4-й версии Tailwind 🤯 Адам рассказал, что нас ждёт новый движок 🚀 Tailwind: ⚙️ Движок написан на Rust ⚡️ Будет быстрее до десяти раз 📊 Весит меньше на треть 1️⃣ Всего одна зависимость — Lightning CSS 👨‍💻 Имеет собственный парсер Tailwind стремится соответствовать новым стандартам, поэтому в 4-й версии будет настоящее правило ＠layer, которое решает множество проблем со специфичностью, с которыми боролись. Также будет поддержка контейнерных запросов. 🌈 Разработчики работают над обновлением цветовой палитры с использованием цветов широкой гаммы и внедрением поддержки других современных CSS-функций, таких как ＠starting-style, позиционирование якорей и многое другое. 1 • 2 • 3

Ещё два демонстрационных видео нового функционала 👨‍💻 На них продемонстрировано, что соблюдается порядок в авто-лейауте, также можно редактировать текст и прочие свойства. Кстати, теперь если в панели свойств написано Mixed, а вам нужно добавить к каждому элементу, например, 20 пикселей, то такое можно. К Mixed можно дописать +20 и в таком случае каждый объект выделения получит «надбавку». Работает также с делением, умножением. Очень этого не хватало 👍

В 🎨 Фигму приехал хайп-трейн Теперь можно множественно редактировать одинаковые или схожие объекты, находящиеся в разных фреймах 👍 Да, до этого можно было и раньше так делать, но, например, если менять размеры, то они менялись относительно центра выделения, а не фрейма, где находится элемент. Иногда я и сам сижу что-то дизайню для себя. Всегда было болью, когда нужно отредачить компонент кнопки, которая имеет вариации (primary, secondary, tertiary). Потому что нужно было менять в каждой вариации по отдельности и просто не хотелось это делать. Теперь же это всё упрощено в рамках режима мульти-редактирования. Со вчерашнего дня доступно для всех пользователей Фигмы ⭐️

Самый часто используемый элемент в вебе — это <div>. Тег div является основой для создания структуры веб-страницы и ее дизайна. Однако, почему <div> именно так называется? Элемент <div> в HTML происходит от сокращения слова «division», что буквально переводится как «деление» или «разделение». И его название полностью соответствует его функции. Ведь <div> используется для разделения содержимого веб-страницы на логические блоки, облегчая таким образом их структурирование и оформление. Основная задача <div> заключается в том, чтобы создавать контейнеры, в которые можно помещать другие элементы HTML. Это позволяет веб-разработчикам легко управлять размещением и стилизацией содержимого веб-страницы с помощью CSS.

Когда я регистрировал аккаунт, я столкнулся с капчей, которую решал в течение половины часа, но так и не смог её пройти 😛 Капчи становятся все сложнее с каждым годом. Помните капчи, где нужно было просто ввести число с картинки? Сейчас такие капчи легко решаются нейронками. Вот почему капчи усложняются.

Не знали, что у 🌐Apple есть репозитории на 👩‍💻 GitHub? А ещё больше вас удивит то, что они создали открытый аналог JSON, который используется для конфигураций. Его название — Apple Pkl. Основные особенности — Тайпсейфти. Apple Pkl выдаёт ошибки, если указано, например, что ожидалось число, но получена строка 👩‍💻 — Модульность. Модули могут импортировать другие модули из локальных и удаленных мест. Предлагаю посмотреть на пример использования Apple Pkl. Создаётся файл Config.pkl, где описывается схема

module Config

/// The address the server will accept connections on
hostname: String

/// The port the server will accept connections on
port: Int(isBetween(1, 65_535))

/// Whether the server will attempt to minimize TCP packet delay
tcpNoDelay: Boolean

/// Maximum length of the pending connections queue
backlog: Int(isBetween(0, 1000))

/// The `Server` header on outgoing HTTP reponses
serverName: String?

А в папку dev помещаем файл config.pkl, который унаследует схему выше

amends "../Config.pkl"

hostname = "localhost"

port = 8080

tcpNoDelay = true

backlog = 128

serverName = "Pkl Swift Example Server"

Таким образом, мы получаем автодополнение и другие подсказки. Я считаю, что в будущем язык будет интегрирован с TypeScript, чтобы из коробки можно было получать типизированные данные из файлов .pkl. У меня были моменты, когда я забывал добавлять определённые поля в файл .env.example, которые необходимы для работы приложения. И когда я скачивал репозиторий и настраивал файл окружения (env), проект не запускался из-за отсутствия этих полей в файле .env. Я думаю, что использование .pkl файлов вместо env может помочь решить эту проблему.

🌐 Как часто вы используете неанглоязычную локализацию в программах и операционных системах? Я уже несколько лет назад сменил язык на своей технике на английский. Поэтому все мои программы также на английском, за исключением карт: потому что "Studencheskaja" или "Dorogomilovo" как-то не очень удобно для прочтения… Переход на английский язык был осознанным шагом. Я стал гораздо лучше разбираться во многих приложениях, потому что, когда я ищу информацию о том, где находится та или иная функция, как правило, нахожу ответ на английском языке. И там, соответственно, показано на примере интерфейса на английском. Кроме того, мне кажется, что можно немного подтянуть знания английского языка из-за того, что постоянно видишь его перед глазами. Сильно далеко на этом не уедешь, потому что интерфейсный английский отличается от разговорного: он проще. Я советую и вам попробовать неделю использовать английский язык во всей системе, если не делали это до этого. А потом уже решить, стоит ли оставить его или нет.

👨‍💻 Shift Alt F Ну или Shift Option F, кому что. Это полезная комбинация в VS Code, которая отформатирует код: уберёт все неправильные отступы, задав свои. Если забыли где-то точку с запятой, то поставит в нужное место. Если вы где-то написали одинарные кавычки, то они будут заменены на двойные. Одна комбинация, так сказать, обезличит код, преобразуя его к одному стилю. Стиль этот можно настроить, установив плагины. Самым популярным является Prettier. Вообще — это не плагин, а утилита, которую можно гибко настроить. И к утилите существует как раз плагин. Например, отключить точку с запятой в принципе или сделать отступ в 4 пробела, а не 2. Это всё есть в утилите, а плагин позволяет это всё делать не из командной строки, а по нажатию комбинации. Помимо этого можно настроить так, что форматирование кода будет происходить при сохранении файла. Это всё изменяется в настройках VS Code (Default Formatter и Format On Save).

Авто-лейауты в 🎨 Фигме позволяют упростить создание компонентов и экранов, предоставляя автоматическую расстановку объектов относительно друг друга. 😴 Подобие авто-лейаутов есть и в верстке сайтов, называются флексами. Поэтому когда дизайнер делает макет адаптивным с помощью авто-лейаутов, то он упрощает жизнь верстальщика, смотрящий на стили в Dev Mode. 🥺 Но так нельзя сказать про каждую фичу в Фигме. Поэтому буду рассказывать в постах о невозможностях — именно о невозможностях: когда что-то можно делать в Фигме, а вебе нельзя и наоборот. ✂️ Обрезка типографики по вертикали Обрезку по вертикали любят использовать, считая, что это поможет наладить отступы между элементами. В Фигме это делается с помощью переключателя Vertical trim, а в CSS с помощью leading-trim: both. В конечном итоге текст обрезается по высоте заглавных букв и по алфавитной базовой линии — горизонтальная линия, на которой обычно базируются строчные буквы в тексте. Проблема в том, что в 🎨 Фигме это всё работает, в вебе есть для этого свойство, но оно не работает ни в одном браузере, кроме Safari под флагом. То есть добавив к тексту свойство leading-trim: both ничего не произойдёт. 💡 Поэтому использовать Vertical trim, если макет планируется использовать в вебе — крайне сомнительная идея

Хуки useCallback, useMemo больше не нужны В новом блог-посте команда React поделилась над чем они упорно работают. Из интересного: React Compiler больше не просто исследовательский проект. React Compiler позволяет не задумываться об использовании useMemo, memo и useCallback. Эти хуки позволяют не высчитывать значения или создавать функцим заново благодаря кэшированию. Благодаря React Compiler их можно не использовать 🎧 Его внедрили уже в ФоТоГрАм. Скоро его приготовят к выпуску с открытым исходным кодом. Это мы ждём. В следующем релизе React будут Actions — более простой способ обработки клиент-серверных взаимодействий и отправки форм. С помощью React можно будет изменять мета-данные документа (title, link и так далее). Ранее для этого требовался react-helmet. В следующей версии React ожидается добавление поддержки директив ‘use client’ и ‘use server’. С их помощью можно создавать фулл-стак приложения используя только React.

😒 Импорты в JavaScript — отстой

import { useState } from "react"

Казалось бы, что здесь не так? Но давайте посмотрим на импорт в 👩‍💻 Питоне.

from flask import Flask

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

from "react" import { useState }

💬 Такой вариант был бы куда более уместен. Что скажете? Вообще часто пишете импорты вручную? Я чаще всего импортирую библиотеки с помощью функций 👩‍💻 VS Code и 👩‍💻 WebStorm. Они умеют даже alias-пути использовать. Но иногда проще написать импорт самому, если один модуль одинаково называется в нескольких библиотеках.

🎉 Разработчики Storybook представили бета-версию Storybook 8 Для тех кто забыл: Storybook — это фронтенд-тулза для изолированного создания компонентов и страниц UI. — Улучшилась производительность — Адаптация под мобильные устройства — Автоматизированные визуальные тесты — Улучшили тестовые утилиты — Поддержка React Server Components — Убрали React из зависимостей Ну и, конечно же, исправили ошибки.

👩‍💻 Что там по React 19? React 18 вышел в марте 2022 года, но с тех пор мажорных версий больше не выходило. Стало известно, что разработчики React работают над поддержкой веб-компонентов (кастомные компоненты). Базовая поддержка и так уже есть, но кастомные аттрибуты отсутствуют, что хотят исправить в React 19. Также в 👩‍💻 React 19 появятся новые хуки: — use. Тоже самое, что и useContext, но его можно вызвать в циклах, условиях. Должно повысить читаемость кода. — useFormState. — useFormStatus. — useOptimistic.

⚰️ Добро пожаловать на кладбище Google, боец В поисковике 📦 Google была замечательная возможность просмотра кэшированных версий страниц. С помощью неё я раньше всегда читал статьи на Medium. В компании решили убрать эту фичу — кнопка начала пропадать постепенно у всех пользователей. Компания объясняет это тем, что функция была создана для того, чтобы пользователи могли просматривать контент, когда сайты уходили в офлайн, а сейчас функциональность интернета улучшилась настолько, что в ней больше нет необходимости. Если потребуется открыть кэшированную страницу, то это по прежнему можно сделать Архиве Интернета.

👩‍💻 React-разработчик по хорошему должен следить за весом приложения. Каждая новая добавленная 👩‍💻 npm-библиотека влияет на длительность загрузки приложения у пользователя. Проверить сколько весит зависимость и какое примерное время займёт у пользователя на скачку можно на Bundlephobia. При просмотре информации о пакете внизу у некоторых зависимостей могут отображаться аналоги, которые весят меньше, но выполняют схожий функционал. Например вместо framer-motion, который грузится в худшем случае ≈0.84 секунды, предлагается react-spring, который скачивается за ≈389 мс. Для VS Code есть расширение Import Cost. Оно показывает вес импортируемого вами пакета уже в самом коде.

Многие говорят, что 👩‍💻 React — это про веб-технологии. Но что если я скажу, что React не был создан для веба? По сути React решил проблемы, которые возникли в вебе, но он не ограничился одним лишь вебом. Где и как ещё применяется React узнавай в карточках 👆 И, как обычно, ссылочки: — React DOM — React Native — React PDF — React Email — Remotion — React Ink — React Three Fiber — Reacord 💬 Пишите в комментариях какую из библиотек захотелось попробовать или предлагайте свою

Плюрализация без i18next Задача всё такая же: склонить существительное после числительного. Но что если на проекте нет i18next? Для этого можно использовать функцию:

function plural(number: number, titles: string[], withNumber: boolean = true) {
 const absoluteNumber = Math.abs(number)
 return (
  (withNumber ? number + ' ' : '') +
  titles[
   absoluteNumber % 10 == 1 && absoluteNumber % 100 != 11
    ? 0
    : absoluteNumber % 10 >= 2 &&
      absoluteNumber % 10 <= 4 &&
      (absoluteNumber % 100 < 10 || absoluteNumber % 100 >= 20)
    ? 1
    : 2
  ]
 )
}

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

plural(1, ['собака', 'собаки', 'собак']) // 1 собака
plural(5, ['собака', 'собаки', 'собак'], false) // собак

И, соответственно, эта функция не имеет поддержки других языков, кроме русского, украинского и белорусского. Недавно узнал, что JS имеет встроенный объект для плюрализации — Intl.PluralRules. Подробно ознакомиться как с ним работать можно на MDN Web Docs. Это на случай, если нужно склонять на разных языках без i18next, но таких кейсов обычно мало.

👩‍💻 Bun в релизе пять месяцев Для тех, кто не знает: Bun — тулкит, который выполняет задачи, которые решает 👩‍💻 Node.js и добавляет свои полезные фичи, улучшающие DX. Bun предоставляет функционал тестирования, перезапуска скрипта при изменении файлов (пока-пока, Nodemon), билдинга приложений. Executable-зависимости можно запускать через bunx (замена npx). А сами зависимости можно скачивать через команду bun i. Самое крутое: Bun из коробки имеет поддержку 👩‍💻 TypeScript, поэтому ничего подключать для TS дополнительно не нужно, ведь уже всё работает.

Bun относится к TypeScript как к гражданину первого класса.

Bun решает множество проблем, улучшая DX. Недавно в Bun появилась очень интересная вещь — Bun Shell, о которой я расскажу позже. Разработчики Bun говорят, что их тулкит выполняет в 5 раз больше HTTP запросов в секунду по сравнению с Node.js. Это впечатляет, но есть и другие отзывы разработчиков, которые говорят, что скорость Bun либо такая же, либо уступает скорости Node.js в каких-то кейсах. Если вы подумали, что Bun имеет меньше недостатков, чем Node.js, то это не так. К сожалению, в данный момент поддержка 👩‍💻 Bun на 👩‍💻 Windows экспериментельная и ограниченная. Это значит, что могут быть баги, которые пофиксить смогут только разработчики Bun. Если вы хотите попробовать Bun на Windows, то рекомендуется поставить его через 👩‍💻 WSL. Как только Bun релизнулся, я начал использовать его в личных проектах. За 5 месяцев эксплуатации я не столкнулся с каким-то нерешаемыми проблемами: всё работает как положено. Если и были какие-то проблемы, то их решение гуглилось и решалось за несколько минут. Вот такие пироги 🥧 Как мне кажется, то у Bun есть все шансы стать популярным, занять нишу наравне Node.js. Поэтому советую поиграться или вообще попробовать мигрировать какой-то пет-проект с Ноды на Бан.