Vue and Nuxt Tips & Tricks

Особо ничего нового, но для напоминания сойдет

#tip

В субботу 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