Задачи с сегодняшнего занятия.
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

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

#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