Мы уже писали о двух прорывах CSS в области анимации раскрытия блоков (аккордеон). Еще одна старая проблема - анимация диалогов и всплывающих окошек.

Дело в том, что правило display: имеет дискретный тип анимации, это значит плавный переход display:none <-> display:block не может быть выполнен через transition. Он будет скачком. В результате для анимаций появления и исчезания приходилось подключать JavaScript с setTimeout() и иными ухищрениями.

Теперь в Chromium браузерах появилась поддержка transition-behavior: allow-discrete; и @starting-style, которые решают эту проблему:

dialog {
    display: none;   /* user agent style */
    opacity: 0;
    /* translate: 0 -25vh; */
    transition-property: display opacity;
    transition-duration: 1s;
    transition-behavior: allow-discrete;
}

dialog[open] {
    display: block;   /* user agent style */
    opacity: 1;
    @starting-style {
        opacity: 0;
        /* translate: 0 0; */
    }
}

Safari и Firefox уже на пути реализации этих CSS правил. А пока анимация в них просто не будет работать.

Аналогичная анимация применяется к overlay или ::backdrop

Есть еще один уже полностью рабочий вариант анимации появления диалогов через keyframes, об этом в следующий раз

#css

Ссылки на множество бесплатных ресурсов для разработчиков

https://github.com/ripienaar/free-for-dev

#tip #dev

Путь Мурыча. Часть вторая.
"Собеседование"

#murych #video #vuefaqpictures

Сколько стоит захостить современный вебсайт

А когда-то вполне можно было хостить вебсайт на миллион пользователей за какие-то сотню-другую баксов в месяц...

Стоп. И сейчас можно, если забыть для фронтенда слово serverless. Который нынче чаще всего используется для запуска SSR приложений.

#webhosting #serverless

Самый удобный для среднего веб-приложения JSON-RPC забыли

#api

Vite недавно по загрузкам вышел на половину загрузок webpack

В 7 классе на уроках математики учат школьников анализировать графики. Давайте и мы поизучаем, без учета других js бандлеров.

График говорит, что начиная с весны 2023 года, все новые проекты пишутся на Vite, и немного существующих переписываются на него с webpack,

либо

Что 80% новых проектов пишутся на Vite, 20% на webpack, и довольно большая часть существующих проектов на webpack переходит на Vite,

либо

Что 60% новых проектов пишутся на Vite, 40% на webpack, и чуть ли не половина существующих проектов на webpack мигрировала на Vite.

Действительность где-то между ними


Ну и еще график говорит, что число проектов на js/ts за последние 2 года увеличилось почти в 2 (два!) раза.

#vite #webpack

Чистая архитектура (Clean Architecture) — это способ разделения функционала по степени его близости к предметной области приложения.

Она даёт:

- Независимость от зависимостей. Архитектура вашей системы не зависит напрямую от существования какой-либо библиотеки. Это позволяет использовать фреймворки как инструменты, а не втискивать свою систему в их рамки.

- Тестируемость. Бизнес-правила можно тестировать без UI, базы данных, веб-сервера или любого другого внешнего элемента.

- Независимость от UI. Пользовательский интерфейс можно легко изменить. Например, веб-интерфейс может быть заменен на мобильный, без изменения бизнес-правил.

- Независимость от внешних сервисов. Вы можете заменить, например, MySQL на Mongo, поменять платедного провайдера или что-то еще. Ваши бизнес-правила просто ничего не знают о внешнем мире.

Именно по рекомендациями Clean architecture не следует обращаться к web API напрямую из стора. Подобные требования есть у многих методологий проектирования ПО

#architecture #cleanarchitecture

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

Пример:

.btn {
  padding: 0.5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
  // border будет тоже цвета limegreen
}

currentColor часто применяется в svg иконках, когда надо прокинуть установленный на элементе её содержащем цвет, на саму иконку. В этом случае в svg используют color: currrentColor. В распространенных icon packs это обычно так.

Если у svg иконки есть свойства и color, и fill, то как минимум одно из них прокидывать в обертку придется пропсами, как в данном примере

#tip #css #svg

Те, кому дают тестовое написать таймер, могут выпендриться и написать его на чистом CSS

#css

TanStack пишет свой мета-фреймворк - TanStack Start

Смесь React, TanStack Router, Vinxi, Nitro и Vite
Всё еще в разработке, но свой сайт они уже на нем переписали и открыли код.
По слухам сделают бо́льший упор на SPA чем SSR

#tanstack

https://xakep.ru/2024/06/14/intellij-github-tokens/

#jetbrains #github

Желающие есть размяться?

P.S. Почему "три года ММА" выглядят как доение коровы за вымя?

#minin #mma #marketingfraud

Я уже писал, как в 30 строк сделать глобальный прелоадер AppLoader на всё приложение.
В компонентах он включается/выключается так:

const { startLoading, stopLoading } = useAppLoader();

onMounted(async () => {
  startLoading();
  xr.value = await loadXr(props.vid);  
  stopLoading();
});

Всё работало прекрасно. Тут понадобилось кэшировать приходящие данные. Верней, приходили они партиями, и при выборе одного элемента через props.vid он мог как оказаться уже в кэше, так и его нужно было грузить по сети. Для этого была сделана промежуточная утилита (js модуль), которая экспортировала асинхронный метод loadXr().

После этого пришла мысль - а где должны быть startLoading() / stopLoading() для глобального прелоадера? Зачем им срабатывать, когда данные берутся из кэша? Перенес их в ту самую утилиту. В итоге компонент стал выглядеть так:

onMounted(async () => {
  xr.value = await loadXr(props.vid);  
});

// или в корне setup-a:

loadXr(props.vid).then((data) => {
  xr.value = data;
})

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

<Suspense>, который уже много лет пытаются внедрить во Vue, выглядит совсем не как решение для серьезных приложений, где нужно явно контролировать потоки данных, а, скорей, уровня Nuxt.

Мощь Vue Reactivity API сильно недооценена, - в том числе, в официальной документации. Не надо бояться ее использовать.

#reactivity

Искусство нэйминга

Несколько месяцев назад автор объявлял конкурс на лучшее название своей библиотеки, в итоге остановился на TSSLint

#humor

Иногда имеет смысл для удобства пользователя отключить выделение текста на элементах UI:

.unselectable {
   user-select: none;
}

А следующий селектор установит шрифт, равный системному на вашем устройстве:

.selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

#css #tip

Очень интересное интервью об Искусственном интеллекте

#ai #video

Мир IT крутится вокруг данных. Если задуматься, 99.999% времени любой компьютер внутри себя просто перекладывает данные с одного места в другое.

Data pipeline (конвейер данных) - это методика сбора, обработки и анализа данных, которые сперва собираются из разных источников в хранилища, структурируются и затем используются для разных целей.

В data lake складывают неструктурированные данные, data warehouse - уже структурированные, удобные для запросов.

#data #architecture

Небольшой роадмап

#roadmap

Инструменты для совместной работы
Разработка программного обеспечения - это социальная деятельность. Научитесь использовать такие инструменты для совместной работы, как Jira, Confluence, Slack, MS Teams, Zoom и т. д.

Языки программирования
Выберите и освойте один или два языка программирования. Выбирайте из таких вариантов, как Java, Python, JavaScript, C#, Go и т. д.

Разработка API
Узнайте о тонкостях и особенностях разработки API, таких как REST, GraphQL и gRPC.

Веб-серверы и хостинг
Узнайте о веб-серверах, а также облачных платформах, таких как AWS, Azure, GCP и Kubernetes.

Аутентификация и тестирование
Узнайте, как защитить свои приложения с помощью таких методов аутентификации, как JWTs, OAuth2 и т. д. А также освоите такие техники тестирования, как TDD, E2E-тестирование и тестирование производительности.

Базы данных
Научитесь работать с реляционными (Postgres, MySQL и SQLite) и нереляционными базами данных (MongoDB, Cassandra и Redis).

CI/CD
Изучите такие инструменты, как GitHub Actions, Jenkins или CircleCI, чтобы узнать о непрерывной интеграции и непрерывной доставке.

Структуры данных и алгоритмы
Освойте основы DSA, изучив такие темы, как нотация Big O, сортировка, деревья и графики.

Проектирование систем
Изучите концепции проектирования систем, такие как сетевое взаимодействие, кэширование, CDN, микросервисы, обмен сообщениями, балансировка нагрузки, репликация, распределенные системы и т. д.

Паттерны проектирования
Освойте применение таких паттернов проектирования, как инъекция зависимостей, фабрика, прокси, наблюдатели и фасад.

Инструменты искусственного интеллекта
Чтобы упрочить свою карьеру, научитесь использовать такие инструменты искусственного интеллекта, как GitHub Copilot, ChatGPT, Langchain и Prompt Engineering.

#roadmap

Пару центов в копилку Tailwind

Tailwind ориентировочно берет свои корни в Bootstrap с его атомарными классами. Но, во-первых, их было немного. Во-вторых, они не ставили своей задачей замену CSS. В-третьих, их использовали преимущественно для разметки (d-flex, mt-1 и p-2)

CSS3 сегодня очень развитый язык с очень богатым продуманным функционалом (#css). Возврат от него к атомарным классам ( = стилям) это как эволюционный регресс от многоклеточных кольчатых червей к одноклеточным амебам. Потенциально влекущий деградацию многоклеточных программеров в одноклеточные.

Есть ситуации, когда атомарные классы как-то решают некоторые возникающие проблемы - например, при отсутствии деления на компоненты. Но для Vue с его компонентным подходом и scoped стилями таких проблем не возникает в принципе. В то же время, все такие проблемы решаются более разумными и элегантными подходами, например, с помощью BEM или CSS modules.

Названия классов в HTML служат одновременно целям программирования и документирования кода. Tailwind отнимает у разработчиков аспект семантики.

Девиз Tailwind: "чукча не читатель, чукча писатель". Зная его можно быстро написать строку классов элемента. Дальше что? Тебе надо подправить margin у внутреннего элемента меню. Ты сперва ищешь этот элемент среди нескольких div-ов. Затем ты вглядываешься в свою портянку и ищешь букву "m". Ты должен внимательно пробежать её глазами, - иногда всю, и иногда не один раз. Это DX.

В CSS ты мгновенно видишь лексему .menu-item, верней даже сперва .menu, потом в ней .item, и так же мгновенно находишь внутри блока margin:. В умных книжках это называется бинарным поиском, его сложность O(log(n)). В случае с Tailwind имеем O(n). Это computer science.

Так же быстро и точно ты перемещаешься в CSS к нужному стилю мышкой, потому что ты перемещаешься по плоскости, по осям x и y. Tailwind допотопен в своей одномерености.

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

При попытке реализации на Tailwind нечто большего чем две темы (светлая/темная) и элементарная адаптивность, код внутри class="" становится огромным и практически нечитабельным и неподдерживаемым.

При росте проекта (увеличении числа html элементов и стилей в них) соотношение O(log(n)) / O(n) -> 0. Тэйлвиндеры по законам Дарвина просто вымрут, не адаптировавшись к новым условия окружающей среды, а вместе с ними и проекты на них. Это биология.

Попытки сделать Tailwind более developer-friendly (@apply, signals etc) просто являются приближением его к возможностям обычного CSS, но через жопу.

При обучении веб разработке при начинании с Tailwind человек упускает из поля зрения весь самостоятельный слой представления веб страницы / веб приложения, со своей архитектурой, семантикой, функционалом. Вместо трехмерного пространства (HTML , CSS, JS) он оказывается в двухмерном, где учится быстро "красить кнопочки".

Tailwind - это зависимость во всех смыслах этого слова. И, как любая зависимость, это плохо, и должна применяться только если кардинально помогает с чем-то и без нее очень трудно. Трудно ли без Tailwind?

Tailwind делает простое сложным, перемалывая через свою хайповую мясорубку достижения вебдева в области CSS за последние 25 лет, чтобы сделать из них свою нечитаемую простыню. Для чего?

#css #tailwind

Два совета по работе с Vue.js

#tip