В субботу 8 июня 2024 года прошла организованная Яндексом конференция "Я 💛 Фронтенд 2024". Одним из спикеров был Никита Балихин, техлид Газпромбанка, который рассказывал о написанном ими внутреннем плагине для Webpack-a.

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

Помню как очень давно впервые узнал на каком-то профессиональном форуме, что SQL это никакой не эс ку эль, а сиквел. Youtube-a тогда еще не было, услышать этот термин от носителя английского языка было негде, даже в университете на специализированном по RDBMS курсе это был эс ку эль.

Сиквел был небольшим шоком. Пришло осознание, что у сферы software development есть своя культура, и её надо уважать. Правильное наименование - это часть культуры. Взрослому человеку с именем Николай будет неприятно, если незнакомые ему люди будут называть его "Колян" или "Колёк".

Допустимо было не знать как правильно произносится термин в 1990-ых, потому что неоткуда было это узнать. Допустимо не знать как произносится SQL тем, для кого базы данных - не профильная специальность. Допустимо называть Java - жабой, потому что это вполне отражает IQ человека, и тут ничего не поделать. Джуну допустимо ошибаться в названиях потому что он джун.

Но техлид топ банка, в 2024 году, бесстыдно срубивший бабла за рекламу Levi's на докладе ни о чем на крупнейшей фронтендерской конференции, называя термины как привык в своем колхозе (URL у него был Урел), выглядит гопником-вкатуном нулевого уровня, вызывающим фейспалм у абсолютного большинства аудитории, кто-то из которой его и поправил с Vite.

Уважайте культуру программной разработки.

#event #social

Интересное свежее интервью Эвана об истории Vite (/vit/)

Vite создавался довольно долго - около двух лет. Одновременно с ним было несколько попыток других разработчиков сделать быстрый js сборщик. Самой успешной попыткой был Snowpack, который использовалcя, в том числе, в SvelteKit, и из которого Эван перенял полезные вещи. Однако через некоторое время команда Snowpack переключилась на разработку фреймворка Astro, и сама стала использовать для него Vite.

И возможно Vite станет компанией

#vite #evanyou #video

Задачи с сегодняшнего занятия.
5 класс

#math

Если у вас VS Code тормозит из-за каких-то расширений, то есть такое:

F1 -> Developer: Open Process Explorer
F1 -> Developer: Show Running Extensions

и вообще:

F1 -> Developer: ...

#vscode

Мы уже писали о двух прорывах 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