Интересный сайт, рассказывающий как писать современные веб приложения на чистом
plainvanillaweb.com
#js #webcomponents
JS
, CSS
и HTML
plainvanillaweb.com
#js #webcomponents
Plainvanillaweb
Plain Vanilla
An explainer for web development using only vanilla techniques.
Мой
Предназначен для вставки статичных фрагментов кода (типа аналитики, SW, open graph, splash screen) в
Имеет режимы вставки в
#vite #lib
Vite
плагин vite-plugin-html-injection потихоньку набирает популярностьПредназначен для вставки статичных фрагментов кода (типа аналитики, SW, open graph, splash screen) в
index.html
во время сборки, чтобы избежать захламления этого файла в проекте и разделить код по предназначению. Имеет режимы вставки в
dev
, prod
и оба. Поддерживает hot-reload
при работе с dev
сервером.#vite #lib
Видео от автора о новом
Попытка полной типизации.
Как по мне,
#router #kitbag
router
для Vue
- KitBagПопытка полной типизации.
Как по мне,
DX
только ухудшился#router #kitbag
YouTube
Kitbag Router: New TYPE SAFE Router for VUE
⭐️ https://github.com/kitbagjs/router ⭐️
📖 Docs: https://router.kitbag.dev/
🗂️ Project Repo: https://github.com/stackoverfloweth/kitbag-router-walkthrough
💬 Discord: https://discord.gg/zw7dpcc5HV
📝 Medium: https://medium.com/@stackoverfloweth
Chapters:…
📖 Docs: https://router.kitbag.dev/
🗂️ Project Repo: https://github.com/stackoverfloweth/kitbag-router-walkthrough
💬 Discord: https://discord.gg/zw7dpcc5HV
📝 Medium: https://medium.com/@stackoverfloweth
Chapters:…
В последнее время часто пишу про
К
#ai
AI
, потому что всё-таки сделал ту волшебную кнопку.К
AI
надо относиться как к этим двоим с картинки - мозгов немного, но очень исполнительные. Поэтому надо формулировать для них четкие промпты и держать их в строгой узде.#ai
Если кто хочет помочь закончить портировать реактовские
Чем плох известный порт
#ui #lib
Radix UI Primitives
на Vue 3
- вам сюда. Большая часть компонентов уже сделана.Чем плох известный порт
Radix-Vue
автор проекта рассказал здесь#ui #lib
GitHub
GitHub - perigee-ui/vue-primitives: Vue Radix UI Primitives 1:1 . Components, icons, colors, and templates for building high-quality…
Vue Radix UI Primitives 1:1 . Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source. - perigee-ui/vue-primitives
Поставил
Бандл был 200Кб, стал 400Кб...
wtf%№?:;*"(;?;*!!!!!
Кто как делает?
#firebase #auth #optimization
Firebase Authentication
на сайт (логин через Google
, Apple
и т.д.)Бандл был 200Кб, стал 400Кб...
wtf%№?:;*"(;?;*!!!!!
AI бот
предлагает другие варианты, но уверяет, что они хуже.Кто как делает?
#firebase #auth #optimization
Тут в чате спросили - нужно ли фронтендеру знать
Имеется в виду, по собственному желанию, а не когда тебе его навязывают в уже готовом проекте. Лично я его не использую, несмотря на то, что full-stack и devops. Просто нет надобности. Как-то начал считать - а может дешевле свои проекты хостить как контейнеры? Да нет, лучше сервер купить и быть на нем полным хозяином. Хотя могу представить, что есть ситуации, когда он действительно упрощает жизнь.
Но вот никогда не встречался с юз-кейсами, когда нужен
А в интернете послушать, так это очередной мастхев для любого магазина "У дяди Васи".
Давайте, вообще, посчитаем нагрузку на средний сайт. Возьмем какой-нибудь
Допустим для создания одного заказа надо провести на сайте 1 час. Получаем, на сайте одновременно висит около 10000 человек.
Допустим, на бэкенд API за данными при этом отправляется в среднем 1 запрос в 2 секунды. Итого 5000 запросов в секунду.
Если руки разработчиков растут из нужного места, 95%-99% этих запросов (каталоги, информация о товаре, отзывы и т.п.) - кэшируются на каком-нибудь
Самое ресурсозатратное при этом - база данных. Сколько тянет
Немного упрощенно, но многие ли строят системы уровня Озон-а?
Ну и зачем дяде Васе нужен
#highload #docker #k8s
Docker
?Имеется в виду, по собственному желанию, а не когда тебе его навязывают в уже готовом проекте. Лично я его не использую, несмотря на то, что full-stack и devops. Просто нет надобности. Как-то начал считать - а может дешевле свои проекты хостить как контейнеры? Да нет, лучше сервер купить и быть на нем полным хозяином. Хотя могу представить, что есть ситуации, когда он действительно упрощает жизнь.
Но вот никогда не встречался с юз-кейсами, когда нужен
Kubernetes
. Сложно представить систему с десятками микросервисов, каждый из которых нужно изолировать, или которая масштабируется рождая новые десятки контейнеров-обработчиков при возрастающей нагрузке.А в интернете послушать, так это очередной мастхев для любого магазина "У дяди Васи".
Давайте, вообще, посчитаем нагрузку на средний сайт. Возьмем какой-нибудь
Озон
. По статистике 2023 года у него 46 миллионов активных пользователей, делающих в год в среднем 20 заказов. Это 30 заказов в секунду.Допустим для создания одного заказа надо провести на сайте 1 час. Получаем, на сайте одновременно висит около 10000 человек.
Допустим, на бэкенд API за данными при этом отправляется в среднем 1 запрос в 2 секунды. Итого 5000 запросов в секунду.
Если руки разработчиков растут из нужного места, 95%-99% этих запросов (каталоги, информация о товаре, отзывы и т.п.) - кэшируются на каком-нибудь
Redis
, который на 1 CPU с достаточным количеством RAM спокойно держит десятки и сотни тысяч запросов в секунду, поэтому их просто можно не учитывать. Итого остается 200-300 в секунду уже нормальных запросов на бэк и БД.Самое ресурсозатратное при этом - база данных. Сколько тянет
PostgreSQL
на бюджетном железе? Десятки тысяч запросов в секунду простых селектов, тысячи инсертов и сложных джойнов с временными таблицами. А в Озоне поиск (самое тяжелое) наверняка не по %LIKE%
происходит, а по заранее построенным индексам тоже в каком-нибудь memory-based
хранилище.Немного упрощенно, но многие ли строят системы уровня Озон-а?
Ну и зачем дяде Васе нужен
Kubernetes
?#highload #docker #k8s
Вышел
Много оптимизаций по реактивности, улучшена поддержка веб компонентов, добавлены деструктуризация пропсов, отложенное использование
По сравнению с новогодней кутерьмой с 3.4 версией на этот раз всё должно быть более-менее спокойно
#vuejs
Vue 3.5.0
Много оптимизаций по реактивности, улучшена поддержка веб компонентов, добавлены деструктуризация пропсов, отложенное использование
Teleport
, useTemplateRef()
, app.onUnmount()
, useId()
и много других мелких фич и багфиксов.По сравнению с новогодней кутерьмой с 3.4 версией на этот раз всё должно быть более-менее спокойно
#vuejs
GitHub
core/CHANGELOG.md at main · vuejs/core
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - vuejs/core
Попадают три кота в кошачий приют. Первый - кот ангулярщика, второй - реактера, третий - накстовца. Дают им каждому по миске с китекэтом.
Кот ангулярщика вываливает миску на пол, раскладывает корм ровными прямоугольниками, глядит некоторое время на них удовлетворенно, съедает корм и тихонько ложится спать довольный.
Кот реактера также высыпает корм, раскладывает из него какой-то архитектурный план, долго что-то двигает, думает, меняет детали местами, наконец съедает всё и чинно ложится спать.
Кот накстовца высыпает еду на пол, напряженно смотрит на нее, начинает неистово долбить корм миской, раздалбывает его в пыль, раскладывает из этой пыли три дороги, вынюхивает их, трахает первых двух котов, падает на спину и колошматя лапами по полу в истерике орет - "Бл.дь, я не могу так работать!"
#humor #nuxt
Кот ангулярщика вываливает миску на пол, раскладывает корм ровными прямоугольниками, глядит некоторое время на них удовлетворенно, съедает корм и тихонько ложится спать довольный.
Кот реактера также высыпает корм, раскладывает из него какой-то архитектурный план, долго что-то двигает, думает, меняет детали местами, наконец съедает всё и чинно ложится спать.
Кот накстовца высыпает еду на пол, напряженно смотрит на нее, начинает неистово долбить корм миской, раздалбывает его в пыль, раскладывает из этой пыли три дороги, вынюхивает их, трахает первых двух котов, падает на спину и колошматя лапами по полу в истерике орет - "Бл.дь, я не могу так работать!"
#humor #nuxt
This media is not supported in your browser
VIEW IN TELEGRAM
Каким же убогим в техническом плане стал сайт Хабра за последние месяцы...
Открываешь страницу, ждешь 3-4 секунды, кликаешь на дропдаун менюшку - иконка поворачивается, а самого меню нет. Ждешь еще, кликаешь - нет, всё сломалось. Надо перегрузить страницу, подождать секунд 7-8 и потом уже кликать, и появится менюшка. И это на быстром интернете.
Как там у вас,
Заходишь на страницы личного кабинета - там пусто. Надо нажать F5 и тогда контент появится.
#habr #ssr
Открываешь страницу, ждешь 3-4 секунды, кликаешь на дропдаун менюшку - иконка поворачивается, а самого меню нет. Ждешь еще, кликаешь - нет, всё сломалось. Надо перегрузить страницу, подождать секунд 7-8 и потом уже кликать, и появится менюшка. И это на быстром интернете.
Как там у вас,
SSR
-щиков это называется? Гидратация?Заходишь на страницы личного кабинета - там пусто. Надо нажать F5 и тогда контент появится.
Хабр
позорит гордое имя Vue
, на котором он частично (комментарии) написан. А писали его, кстати, вроде, завсегдатаи @vuejs_club#habr #ssr
Если вам надо выводить атрибут на элементе по условию, то
Это касается только нестандартных
#tip
null
выведет просто имя атрибута, а пустая строка (falsy
) запретит его вывод вообще.Это касается только нестандартных
HTML
атрибутов (типа class
, disabled)
<template>
<div :someProp="hasSomeProp ? 'disabled' : null"></div>
<!-- Выведет <div someProp></div> -->
</template>
<template>
<div :someProp="hasSomeProp ? 'disabled' : ''"></div>
<!-- Выведет <div></div> -->
</template>
#tip
Всё сущее состоит из противоположных начал, которые, будучи едиными по своей природе, находятся в борьбе друг с другом: день-ночь, горячее-холодное, добро-зло, SPA - бэк API.
Эта борьба, движимая диалектическим законом единства и борьбы противоположностей, служит источником развития, трансформируя количественное накопленные знания в качественно новые формы.
Поэтому SSR, серверные компоненты и прочие гермафродитные порождения LGBT фронтенда не имеют будущего и обречены на разлагающее зловонное вымирание.
#esse #ssr
Эта борьба, движимая диалектическим законом единства и борьбы противоположностей, служит источником развития, трансформируя количественное накопленные знания в качественно новые формы.
Поэтому SSR, серверные компоненты и прочие гермафродитные порождения LGBT фронтенда не имеют будущего и обречены на разлагающее зловонное вымирание.
#esse #ssr