Обычно если на фронте надо показать индикатор загрузки файла, то берут XMLHttpRequest API вместо fetch.
Дело в том что в fetch нету способа получить информацию о том сколько быо загружено данных, мы можем только узнать о том, что операция была окончена успешно или нет.
А XMLHttpRequest в свою очередь имеет событие progress, которое позволяет рисовать индикатор загрузки.
И вот, сравнительно недавно в сафари и хром завезли возможность стримить запросы на бэк.
Ну т.е. можно загружать файл на бэк еще до того как он был загружен в браузер.
А еще это значит что у нас появляется возможность на этот стрим подписаться и следить за прогрессом.
Апи многословная, поэтому лучше взять библиотеку, пример:
Дело в том что в fetch нету способа получить информацию о том сколько быо загружено данных, мы можем только узнать о том, что операция была окончена успешно или нет.
А XMLHttpRequest в свою очередь имеет событие progress, которое позволяет рисовать индикатор загрузки.
const xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgressBar);
xhr.open("GET", url);
xhr.send();
И вот, сравнительно недавно в сафари и хром завезли возможность стримить запросы на бэк.
Ну т.е. можно загружать файл на бэк еще до того как он был загружен в браузер.
А еще это значит что у нас появляется возможность на этот стрим подписаться и следить за прогрессом.
Апи многословная, поэтому лучше взять библиотеку, пример:
const request = {
headers: {
'Content-Type': 'application/octet-stream'
},
method: 'PUT',
body: blob
}
const trackedRequest = trackRequestProgress(
request,
(progress) => {
console.log(`Uploaded ${progress.loaded} bytes out of ${progress.total ?? 'unknown'}`)
}
)
const response = await fetch("https://httpbin.org/put", trackedRequest)❤9
Впервые в жизни увидел реальный рекламный ролик linux. Вернее чего-то для linux - System76 - компания занимающаяся проивзодством железяк под него.
Вот их реклама
https://x.com/system76/status/1771975677429862892
Вот их реклама
https://x.com/system76/status/1771975677429862892
X (formerly Twitter)
System76 (@system76) on X
This catchy song has Thelio desktops on our minds! Get $100 – $300 off a new US-manufactured desktop during the Thelio Spring Sale with swappable accent panels and fast, thermal-optimized performance.
Explore Thelio:https://t.co/thst0hP2V0
Explore Thelio:https://t.co/thst0hP2V0
Все к чему прикладывает руку Evan You всегда имеет на порядок выше DX чем aналогичные решения.
- Vue с React сравнивать сложно, они совсем разные. Но точно никто не будет спорить насколько в vue проще было зайти с такой хорошей докой переведенной на все основные языке, тогда как у реакта адекватная документация появилсь сравнительно недавно.
- Vite и Webpack сравнить по-проще, vite по части DX опережает на порядки, но все же по функционалу они пока не имеют паритета (webpack умеет больше. пока что)
- Но Jest и Vitest просто грешно не сравнить в виду того что имея в основе аналогичные апи, vitest уделывает jest и по функционалу и по удобству.
Jest не только умудрились прибить гвоздями к require, что автоматически пораждает мильен костылей. И это еще можно было бы понять в контексте - все ради DX. Но какое там, даже базовые вещи делаются в Jest через жепу.
А Vitest смог сделать все на ESM, всего пару не значительных изменений и получилось удобно, понятно и быстро.
- Vue с React сравнивать сложно, они совсем разные. Но точно никто не будет спорить насколько в vue проще было зайти с такой хорошей докой переведенной на все основные языке, тогда как у реакта адекватная документация появилсь сравнительно недавно.
- Vite и Webpack сравнить по-проще, vite по части DX опережает на порядки, но все же по функционалу они пока не имеют паритета (webpack умеет больше. пока что)
- Но Jest и Vitest просто грешно не сравнить в виду того что имея в основе аналогичные апи, vitest уделывает jest и по функционалу и по удобству.
Jest не только умудрились прибить гвоздями к require, что автоматически пораждает мильен костылей. И это еще можно было бы понять в контексте - все ради DX. Но какое там, даже базовые вещи делаются в Jest через жепу.
А Vitest смог сделать все на ESM, всего пару не значительных изменений и получилось удобно, понятно и быстро.
👍3💯1
Слыхали про Rabbit R1?
Кто не в теме - это девайс за 200$, ваш корманный AI помошник. Без подписок.
Очень популярная штука, вижу много обзоров на нее на ютубах. Выглядит эстетично, не правда ли?
Однако, реддиторы быстро раскусили где тут собака зарыта, выковыряли оттуда APK а запустили всю эту радость на андроид смартфоне.
Я сначала подумал - почему же они не выпустили просто приложение под андроид, наладить производство собственного дейваса это огромные деньги и куча времени. Но сам же понимаю, что как приложение эта штука вобще не интересна, и просто "один из" чатов которых и так уже не сосчитать.
Почему так? Люди любят коробочные решения? Или им проще заплатить 200$ за осязаемый девайс чем за софт?
Кто не в теме - это девайс за 200$, ваш корманный AI помошник. Без подписок.
Очень популярная штука, вижу много обзоров на нее на ютубах. Выглядит эстетично, не правда ли?
Однако, реддиторы быстро раскусили где тут собака зарыта, выковыряли оттуда APK а запустили всю эту радость на андроид смартфоне.
Я сначала подумал - почему же они не выпустили просто приложение под андроид, наладить производство собственного дейваса это огромные деньги и куча времени. Но сам же понимаю, что как приложение эта штука вобще не интересна, и просто "один из" чатов которых и так уже не сосчитать.
Почему так? Люди любят коробочные решения? Или им проще заплатить 200$ за осязаемый девайс чем за софт?
Виталий Зюин собрал коллекцию авторских блогов по фронтенду, веб-разработке и вокруг неё.
Как он сам пишет - "Специально отбирал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код."
🔗 https://news.1rj.ru/str/addlist/Z6Efi4jXwe9lODcy
Как он сам пишет - "Специально отбирал именно ламповые авторские блоги, а не перепосты ссылок, документации или тексты не про код."
🔗 https://news.1rj.ru/str/addlist/Z6Efi4jXwe9lODcy
Telegram
Виталий Зюзин
Веб-разработчик, веду @web_platform, @zyuzin_vitaly_blog, @urban_trail
❤2
Что касается практического применения AI - я тут немного тормажу.
Мне показали huggingface.co, я многозначительно потыкал в него курсором, увидел кнопочки "задеплоить куда-то в облако за деньгу" на модельках и подумал - может быть в другой раз.
Наверное так бы и продолжал использовать браузерные версии чатов если бы меня не познакомили с Яном.
Ян - это гуйное приложение для запуска, использования и настройки моделек локально. Инуитивно и понятно, мне зашло.
Кроссплатформа, опенсорс.
https://github.com/janhq/jan
Мне показали huggingface.co, я многозначительно потыкал в него курсором, увидел кнопочки "задеплоить куда-то в облако за деньгу" на модельках и подумал - может быть в другой раз.
Наверное так бы и продолжал использовать браузерные версии чатов если бы меня не познакомили с Яном.
Ян - это гуйное приложение для запуска, использования и настройки моделек локально. Инуитивно и понятно, мне зашло.
Кроссплатформа, опенсорс.
https://github.com/janhq/jan
👍6
Переодически натыкаюсь на js код 10летней давности и прекрасно понимаю всех тех кто в те времена считал что js это говно и фатальная ошибка человечества.
У меня бы тоже горело такое дебажить
https://github.com/floridoo/concat-with-sourcemaps/blob/master/index.js
У меня бы тоже горело такое дебажить
https://github.com/floridoo/concat-with-sourcemaps/blob/master/index.js
GitHub
concat-with-sourcemaps/index.js at master · floridoo/concat-with-sourcemaps
Concatenate file contents with a custom separator and generate a source map - floridoo/concat-with-sourcemaps
😁7
Купил себе наконец лицуху на quokka. Во первых они чет расщерились и обявили майскую скидку на 50%, во вторых я только счас заметил что лицензия бессрочная, через год мне просто перестанут прилетать обновления (что меня совершенно устраивает)
🔥2
У Figma есть брат близнец - Penpot.
Figma я начал юзать еще когда она была в бэте, а Penpot - со вчера.
Они очень похожи, и казалось бы зачем было делать клон. Но разница есть, я уже вижу что penpot делался для верстальщиков, тогда как figma для дизайнеров.
В чем вы это выражается?
1. Penpot позволяет вам делать все то (и только то) что позволяет делать css и html. И вы везде встретите тут знакомые верстальщику термины. Например лейаут выбирается между grid и flex, настройки выравнивания детей - justify, space-around, space-between
2. Penpot генерит вам css. Более адекватный чем фигма.
Более ого они генерят вам верстку. С классами.
3. Penpot сразу на видное место выносит "палитру" шритов и цветов, что внезапно намного удобнее чем в фигме
4. Бесплатная версия более фичастая чем у figma
Вобщем если вам не логотипы рисовать а сайтец задизайнить надо - рекомендую
https://penpot.app/
Figma я начал юзать еще когда она была в бэте, а Penpot - со вчера.
Они очень похожи, и казалось бы зачем было делать клон. Но разница есть, я уже вижу что penpot делался для верстальщиков, тогда как figma для дизайнеров.
В чем вы это выражается?
1. Penpot позволяет вам делать все то (и только то) что позволяет делать css и html. И вы везде встретите тут знакомые верстальщику термины. Например лейаут выбирается между grid и flex, настройки выравнивания детей - justify, space-around, space-between
2. Penpot генерит вам css. Более адекватный чем фигма.
Более ого они генерят вам верстку. С классами.
3. Penpot сразу на видное место выносит "палитру" шритов и цветов, что внезапно намного удобнее чем в фигме
4. Бесплатная версия более фичастая чем у figma
Вобщем если вам не логотипы рисовать а сайтец задизайнить надо - рекомендую
https://penpot.app/
👍15
Work & Beer Balance
У Figma есть брат близнец - Penpot. Figma я начал юзать еще когда она была в бэте, а Penpot - со вчера. Они очень похожи, и казалось бы зачем было делать клон. Но разница есть, я уже вижу что penpot делался для верстальщиков, тогда как figma для дизайнеров.…
В комментариях отмечают что генерация так себе.
Сделал примерчик по сложнее чтобы посмотреть где проблемы будут - и нашел.
Вот макет, вот его код на jsfiddle
Итого:
1. height 100% в браузерах работает не так как в Penpot.
2. Проверить адаптивность макета в Penpot невозможно, размер холста блокируется в режиме with: 100% и менять в редакторе мы его не можем.
3. Верстка содрежрит мусорную информацию в виде data-tag "data-x="1097.999999999999" data-y="42""
4. Стили которые я хвалил по началу реализованы через css перменные, что круто. Не круто то что они почему-то инлайняться в html
5. Названия классов генерятся по непонятной логике, иногда названия осмысленные, иногда это просто хеши прямо в середине названия класса.
6. Компоненты реализованы плохо, по какой-то причине они оборачиваются в absolute див, хотя никаких таких настроек в самом редакторе я не выбирал.
7. box-sizing: border-box не нашел как включить из интерфейса, а без этого маржины уезжают из дива =(
Итого, задумка интересная, реализация не оч
Сделал примерчик по сложнее чтобы посмотреть где проблемы будут - и нашел.
Вот макет, вот его код на jsfiddle
Итого:
1. height 100% в браузерах работает не так как в Penpot.
2. Проверить адаптивность макета в Penpot невозможно, размер холста блокируется в режиме with: 100% и менять в редакторе мы его не можем.
3. Верстка содрежрит мусорную информацию в виде data-tag "data-x="1097.999999999999" data-y="42""
4. Стили которые я хвалил по началу реализованы через css перменные, что круто. Не круто то что они почему-то инлайняться в html
5. Названия классов генерятся по непонятной логике, иногда названия осмысленные, иногда это просто хеши прямо в середине названия класса.
6. Компоненты реализованы плохо, по какой-то причине они оборачиваются в absolute див, хотя никаких таких настроек в самом редакторе я не выбирал.
7. box-sizing: border-box не нашел как включить из интерфейса, а без этого маржины уезжают из дива =(
Итого, задумка интересная, реализация не оч
Пока эпл смакует то что они стали тем злом с которым должны были бороться, я листаю официальный мануал моего пк, который расказывает как его самому собрать и разобрать (в картинках)
👎1🤔1
Ваш дед только что обнаружил что если на youtube зажать левую кнопку мыши то видео будет воспроизводиться на x2 скорости
🤯15