Как обычно починяю всякую бытовуху. В этот раз блендер почему-то не передает вращение от мотора на нож. При расчленении обнаружилось, что стерлись шлицы на пластиковой детали.
🤔 Естественно, меня давно мучает вопрос - почему производители делают шлицевое соединение (которое скоро сотрется), а не квадратный или какой-нить еще паз? Дешевле, проще?
UPD: починено)
🤔 Естественно, меня давно мучает вопрос - почему производители делают шлицевое соединение (которое скоро сотрется), а не квадратный или какой-нить еще паз? Дешевле, проще?
UPD: починено)
С вами рубрика "Нищебродский diy"
Сегодня разбираем энергосберегающую лампу вида GX53. За что мне нравятся эти лампы, что их разбирать в разы легче, чем лампы E27.
Перегоревший диод обычно можно увидеть невооруженным глазом. Выкорчевываем его плоскогубцами (или выпаиваем) и запаиваем разрыв!
Собираем и тестируем! Радуемся, что немного наебали систему)
UPD: как верно заметили в коментах, есть варик что теперь лампа перегорит быстрее, т к ток рассчитывается исходя из количества диодов. Так что лучше диод заменить.
Сегодня разбираем энергосберегающую лампу вида GX53. За что мне нравятся эти лампы, что их разбирать в разы легче, чем лампы E27.
Перегоревший диод обычно можно увидеть невооруженным глазом. Выкорчевываем его плоскогубцами (или выпаиваем) и запаиваем разрыв!
Собираем и тестируем! Радуемся, что немного наебали систему)
UPD: как верно заметили в коментах, есть варик что теперь лампа перегорит быстрее, т к ток рассчитывается исходя из количества диодов. Так что лучше диод заменить.
This media is not supported in your browser
VIEW IN TELEGRAM
Охуенный UX акустического видео с аккордами от Найка Борзова.
This media is not supported in your browser
VIEW IN TELEGRAM
Тестирую новые алгоритмы обработки изображений. На этот раз решил поковырять софт от Makelangelo. Первые тесты вроде ничего, интересно выходит.
Реинкарнировал свой старый @drawbot_art, куда буду складировать всякие рисовалки. Кому интересно, велкам)
Всем привет✌️
На этой неделе стартанула Podlodka Crew по фронтенду. Если кто не слышал, это двухнедельный марафон с лекциями от разных спикеров (одна с утра, одна вечером), где довольно много интерактива (можно вызваться добровольцем на всяких активностях, поспрашивать мучающие тебя вопросы и т.п.). Это первый поток по фронту и он посвящен оптимизации фронта.
Сюда буду скидывать краткие заметки, чтобы не забыть (а может и еще кому полезно будет)
На этой неделе стартанула Podlodka Crew по фронтенду. Если кто не слышал, это двухнедельный марафон с лекциями от разных спикеров (одна с утра, одна вечером), где довольно много интерактива (можно вызваться добровольцем на всяких активностях, поспрашивать мучающие тебя вопросы и т.п.). Это первый поток по фронту и он посвящен оптимизации фронта.
Сюда буду скидывать краткие заметки, чтобы не забыть (а может и еще кому полезно будет)
1. Оптимизация изображений
Разница в использовании между
⁃ доступность (img - да)
⁃ сео( img - да)
⁃ производительность (img - да)
Оптимизации:
1.Ленивая загрузка
Как делали раньше.
Подписывались на
Теперь
IntersectionObserver + атрибут img
Подбираем для разных устройств разные картинки по качеству используя атрибут
- webp,
- avif (плохо поддерживается)
Чтобы сделать универсально можно заюзать такую конструкцию
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader
imgproxy для динамических изображений
Разница в использовании между
<img> и стилизацией css через background-image⁃ доступность (img - да)
⁃ сео( img - да)
⁃ производительность (img - да)
Оптимизации:
1.Ленивая загрузка
Как делали раньше.
Подписывались на
scroll, resize, orientationchange и проверяли если ли изображение во viewportТеперь
IntersectionObserver + атрибут img
loading="lazy"
2. Вес изображенийПодбираем для разных устройств разные картинки по качеству используя атрибут
srcset = '1x 2x 3x'и как фолбек
src=''
Для css аналогично есть background-image: image-set(url)
Оптимизированные форматы изображений:- webp,
- avif (плохо поддерживается)
Чтобы сделать универсально можно заюзать такую конструкцию
<picture>Gif лучше конвертить в mp4 и использовать video
<source avif> // сначала avif
<source srcset webp> // если не сработало, то webp
<img loading='lazy'> // фолбек - img
</picture>
<video>3. Оптимизация на уровне сборщиков
<source ...>
</video>
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader
imgproxy для динамических изображений
2. Оптимизация в бандлерах (webpack-5)
1. Treeshaking (трясем дерево зависимостей и смотрим что реально используется)
Конфиг webpack optimizations
В настройка babelrc (настраивает преобразование модулей) может быть косяк
modules: "cjs" - приводит все к commonJS - сложно оптимизровать - не делай так
modules : false - оставить как есть export и import
Webpack не анализирует модули без доп настроек.
Убираем неиспользуемые импорты (что есть в коде, но по факту не используется)
Под капотом webpack использует доп экспорты/импорты в бандле, это можно оптимизировать и сделать чтобы твой импорт указывал напрямую на функцию (без посреднических экспорт/импорт)
Настройка sideEffects.
Позволяет убирать модули без сайд эффектов (которые не изменяют global и тп). Как негласный стандарт многие библиотеки в package.json указывают, есть ли там функции с сайд эффектами через sideEffects: true/false/regex
2. Минимизация доп кода
У webpack 3 вида модулей:
- js/dynamic - commonjs
- js/auto -
- js/esm - импорт экспорт
Это указывается в pakage.json библиотек (поле type):
- commonJS
- auto
- module
Для commonJS treeShaking работать не будет, для auto как то сработает, для module - будет
Можно слепить вообще все в один модуль через concatinateModules
Классная мысль - сначала юзать простой Zero config для parcel, если нужно что то сложнее - то webpack.
1. Treeshaking (трясем дерево зависимостей и смотрим что реально используется)
Конфиг webpack optimizations
optimizations:
usedExports: true - включаем treeshaking
В настройка babelrc (настраивает преобразование модулей) может быть косяк
modules: "cjs" - приводит все к commonJS - сложно оптимизровать - не делай так
modules : false - оставить как есть export и import
Webpack не анализирует модули без доп настроек.
Убираем неиспользуемые импорты (что есть в коде, но по факту не используется)
optimizations:
innerGraph: trueПод капотом webpack использует доп экспорты/импорты в бандле, это можно оптимизировать и сделать чтобы твой импорт указывал напрямую на функцию (без посреднических экспорт/импорт)
optimizations:
providedExport: trueНастройка sideEffects.
optimizations:
sideEffects: true / по дефолтуПозволяет убирать модули без сайд эффектов (которые не изменяют global и тп). Как негласный стандарт многие библиотеки в package.json указывают, есть ли там функции с сайд эффектами через sideEffects: true/false/regex
2. Минимизация доп кода
У webpack 3 вида модулей:
- js/dynamic - commonjs
- js/auto -
- js/esm - импорт экспорт
Это указывается в pakage.json библиотек (поле type):
- commonJS
- auto
- module
Для commonJS treeShaking работать не будет, для auto как то сработает, для module - будет
Можно слепить вообще все в один модуль через concatinateModules
optimizations:
concatinateModules: trueКлассная мысль - сначала юзать простой Zero config для parcel, если нужно что то сложнее - то webpack.
Телеграм официально запустил 2 новых веб-клиента.
webk.telegram.org
webz.telegram.org
Рад, что смог приложить к этому руку и запилить несколько фич для версии Z.
webk.telegram.org
webz.telegram.org
Рад, что смог приложить к этому руку и запилить несколько фич для версии Z.
С чего начать оптимизацию перфоманса? (часть 1)
1. HTML:
- минификация
- потоковая отрисовка (помогает уменьшить TTFB (time to first byte))
Статья про обработку html сервис воркерами: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
2. CSS:
- минификация
- критический css:
заинлайнить в html
- загрузка не блокирующая рендер (хак: использовать
Посмотреть размер неиспользуемого css можно в devtools -> coverage
Полезные плагины для webpack:
- html-critical-webpack-plugin
- critters-webpack-plugin
Статья про блокирующий CSS https://timkadlec.com/remembers/2020-02-13-when-css-blocks/
3. Шрифты
- предзагружаем через link rel=preload
- указываем системный fallback шрифт
- кеширование
- используем font-display (swap или fallback)
4. Картинки
Статья https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
5. JS
загрузка и исполнение js может блокировать парсинг html
долгое исполнение js делает сайт не отзывчивым
- использовать async или defer аттрибуты
Теперь кстати парсинг html не блокируется при загрузке скриптов https://v8.dev/blog/v8-release-78
Уменьшаем размер
- минификация
- удаление ненужного:
dead-code elimination при помощи terser и env vars
- code splitting
devtools -> coverage посмотреть что нужно сразу после загрузки
https://webpack.js.org/guides/code-splitting/
обратить внимание на дудепликацию зависимостей
После code splitting возможно, что какой то функционал будет подгружаться динамически и где-то это может быть неприемлемо. Для этого нужно делать предзагрузку с preload/prefetch/preconnect/prerender/modulepreload.
1. HTML:
- минификация
- потоковая отрисовка (помогает уменьшить TTFB (time to first byte))
Статья про обработку html сервис воркерами: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
2. CSS:
- минификация
- критический css:
заинлайнить в html
<head> <style /> </head>
потому что пока не пришел ответ со стилями, браузер не начнет отрисовывать render tree- загрузка не блокирующая рендер (хак: использовать
<link href... media="print" onload="this.media='all'" - будет грузить стили, но т к медиа - print, не будет блокироваться рендер, а как загрузится, проставляем ему медиа - all (стили начинают применяться к рендеру))Посмотреть размер неиспользуемого css можно в devtools -> coverage
Полезные плагины для webpack:
- html-critical-webpack-plugin
- critters-webpack-plugin
Статья про блокирующий CSS https://timkadlec.com/remembers/2020-02-13-when-css-blocks/
3. Шрифты
- предзагружаем через link rel=preload
- указываем системный fallback шрифт
- кеширование
- используем font-display (swap или fallback)
4. Картинки
Статья https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
5. JS
загрузка и исполнение js может блокировать парсинг html
долгое исполнение js делает сайт не отзывчивым
- использовать async или defer аттрибуты
Теперь кстати парсинг html не блокируется при загрузке скриптов https://v8.dev/blog/v8-release-78
Уменьшаем размер
- минификация
- удаление ненужного:
dead-code elimination при помощи terser и env vars
- code splitting
devtools -> coverage посмотреть что нужно сразу после загрузки
https://webpack.js.org/guides/code-splitting/
обратить внимание на дудепликацию зависимостей
После code splitting возможно, что какой то функционал будет подгружаться динамически и где-то это может быть неприемлемо. Для этого нужно делать предзагрузку с preload/prefetch/preconnect/prerender/modulepreload.
Philipwalton
Smaller HTML Payloads with Service Workers
Thoughts on web development, open source, software architecture, and the future.
С чего начать оптимизацию перфоманса? (часть 2)
6. Runtime
Выполнение скриптов (особенно в начале работы приложения) может занимать много времени (типа 200мс это много), при этом браузер висит и не может обрабатывать пользовательский ввод. Как вариант, обмазать некоторые вещи setTimeout, сделав их асинхронным и дать возможность браузеру прорендерить и тп.
Как минус - суммарное время выполнения будет больше
Как плюс - UX будет значительно лучше
Подробнее - https://philipwalton.com/articles/idle-until-urgent/
7. Render
Рендерим только то, что видит юзер (Lazy Rendering)
8. Data Fetching Flow
По url понимать какие данные нужны и при загрузке js делать сразу загрузку данных и класть куда-нибудь в window (миллениалы изобрели SSR). Отличие от SSR - не нужно полностью вкореживать в архитектуру приложения SSR (не маяться с гидрацией и тп)
9. Сжатие
brotli, gzip
Подробнее: https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4
10. Кеширование
Http-cache + инвалидация кеша
11. Не забывать про алгоритмы и структуры данных 🙂
Большая статья про оптимизацию https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#top
Статья про runtime https://habr.com/ru/company/hh/blog/517594/
Цена абстракций и фреймворков: https://javanoscript.plainenglish.io/javanoscript-frameworks-performance-comparison-2020-cd881ac21fce
Для мониторинга runtime можно использовать https://speedcurve.com/
Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
6. Runtime
Выполнение скриптов (особенно в начале работы приложения) может занимать много времени (типа 200мс это много), при этом браузер висит и не может обрабатывать пользовательский ввод. Как вариант, обмазать некоторые вещи setTimeout, сделав их асинхронным и дать возможность браузеру прорендерить и тп.
Как минус - суммарное время выполнения будет больше
Как плюс - UX будет значительно лучше
Подробнее - https://philipwalton.com/articles/idle-until-urgent/
7. Render
Рендерим только то, что видит юзер (Lazy Rendering)
8. Data Fetching Flow
По url понимать какие данные нужны и при загрузке js делать сразу загрузку данных и класть куда-нибудь в window (миллениалы изобрели SSR). Отличие от SSR - не нужно полностью вкореживать в архитектуру приложения SSR (не маяться с гидрацией и тп)
9. Сжатие
brotli, gzip
Подробнее: https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4
10. Кеширование
Http-cache + инвалидация кеша
11. Не забывать про алгоритмы и структуры данных 🙂
Большая статья про оптимизацию https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#top
Статья про runtime https://habr.com/ru/company/hh/blog/517594/
Цена абстракций и фреймворков: https://javanoscript.plainenglish.io/javanoscript-frameworks-performance-comparison-2020-cd881ac21fce
Для мониторинга runtime можно использовать https://speedcurve.com/
Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
Philipwalton
Idle Until Urgent
Thoughts on web development, open source, software architecture, and the future.