Sleepless tech
05 May 2021 09:28
#3d_print
Сегодня впервые тестирую печать SBS пластиком.
Нужно напечатать колпачок для термоса. SBS вроде как самый подходящий пластик для пищевой промышленности.
Читать полностью…
Sleepless tech
23 Apr 2021 13:08
Я, как динозавр, впервые заюзал webpack-bundle-analyzer. Это просто песня.
Заоптимизировал сборку, уменьшив vendor bundle в 3 раза.
С moment-timezone еще бы поиграться, но это уже другая история)
Читать полностью…
Sleepless tech
15 Apr 2021 18:29
Оптимизация. Заметки после live-coding (wepback-4)
После просмотра во вкладке network можно заметить загрузку жирного бандла. Посмотрим через webpack-bundle-analyzer что лишнее.
Возможные проблемы:
1 - неоптимальный бандл
2 - moment.js (или любая другая библиотека) грузит все локали и лишние зависимости
3 - CSS внутри JS
4 - нет code splitting
Возможные причины:
1 - несколько версий одной библиотеки
2 - грузится весь пакет ради одной функции
3 - лишние полифилы
4 - отсутствие хеша зависимого от контента (а не от билда) в имени бандла
5 - сборка не в production mode
6 - неподходящие source maps
▫️CSS
Выдираем css из бандла с помощью MiniCssExtractPlugin
▫️Fonts
Выносим шритфы из бандла с помощью fileLoader c
options : {
limit: 1024
}
▫️Конекретный пример с использованием определенной локали для moment.js
Используем
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/);
что позволяет выбросить остальные локали
▫️Code Spliting
1 - для роутинга
2 - тяжелый js
3 - что не нужно сейчас
4 - что редко менятеся (и можно закешировать, проставляя [contentHash] в webpack, а не [hash])
Роутинг сплитится при помощи React lazy + в tsconfig прописать
{
module: esnext
moduleResolution: "node"
}
Разбиваем бандл дальше через optimization настройку webpack
optimization: {
minimize: true,
splitChunks: {
cacheGroups: {
uikit (или любое другое проперти): {
test: тут regex,
name: "uikit",
chunks: "all",
priority: 4 (любое число в зависимости от того, нужно ли сначала сбилдить этот бандл чтобы он не вошел в другой бандл)
}
}
}
}
Читать полностью…
Sleepless tech
15 Apr 2021 11:53
Лайфхак для пайки в домашних условиях
https://i.imgur.com/brdcabA.gifv
Читать полностью…
Sleepless tech
14 Apr 2021 16:31
С чего начать оптимизацию перфоманса? (часть 1)
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.
Читать полностью…
Sleepless tech
13 Apr 2021 16:09
2. Оптимизация в бандлерах (webpack-5)
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.
Читать полностью…
Sleepless tech
13 Apr 2021 15:45
Всем привет✌️
На этой неделе стартанула Podlodka Crew по фронтенду. Если кто не слышал, это двухнедельный марафон с лекциями от разных спикеров (одна с утра, одна вечером), где довольно много интерактива (можно вызваться добровольцем на всяких активностях, поспрашивать мучающие тебя вопросы и т.п.). Это первый поток по фронту и он посвящен оптимизации фронта.
Сюда буду скидывать краткие заметки, чтобы не забыть (а может и еще кому полезно будет)
Читать полностью…
Sleepless tech
04 Apr 2021 20:44
Тестирую новые алгоритмы обработки изображений. На этот раз решил поковырять софт от Makelangelo. Первые тесты вроде ничего, интересно выходит.
Читать полностью…
Sleepless tech
01 Apr 2021 19:51
Охуенный UX акустического видео с аккордами от Найка Борзова.
Читать полностью…
Sleepless tech
01 Apr 2021 13:06
Как обычно починяю всякую бытовуху. В этот раз блендер почему-то не передает вращение от мотора на нож. При расчленении обнаружилось, что стерлись шлицы на пластиковой детали.
🤔 Естественно, меня давно мучает вопрос - почему производители делают шлицевое соединение (которое скоро сотрется), а не квадратный или какой-нить еще паз? Дешевле, проще?
UPD: починено)
Читать полностью…
Sleepless tech
29 Mar 2021 14:47
Не знал, что АлиЭкспресс был ещё при императрице Анне Ивановне.
Читать полностью…
Sleepless tech
28 Mar 2021 21:42
В эту субботу меня попросили поучаствовать в жюри хакатона среди школьников.
Мероприятие безусловно классное. Среди участников ребята от 10 до 20 лет (20 летние школьники, лол), которые познакомились с программированием прямо в ходе хакатона.
Во-первых, немного поразили кейсы от компаний. Один из них - сделать виртуальную примерочную (на фотку человека чтобы можно было накидывать одежду или что то типа того). Понимаю, что школьники щас акселераты, но блин не настолько чтобы слёту за пару дней накидать и обучить нейросеть. В итоге ребятам удалось научиться запускать скачанные проекты с нейронками (что тоже круто для ребят 12-15 лет).
Во-вторых, организаторы хакатона не предусмотрели, что для выступлений ребят неплохо бы обучить оборудованию, на котором они будут показывать проекты. Каждая команда впадала в ступор при виде этого китайского сенсорного телека вроде как на винде, но без панели пуск и какого-либо интуитивного UX.
В итоге сами организаторы впадали в ступор, когда после презентации нужно открыть какой то файл или свернуть саму презентацию.
Но опыт классный, как для меня, так для ребят и организаторов.
Читать полностью…
Sleepless tech
24 Mar 2021 18:30
Мне тут классный конфигуратор бандлеров подкинули. Ручками можно натыкать какой проект будешь собирать и вуаля, конфиг для вебпака (и не только) готов!
https://createapp.dev/webpack
Читать полностью…
Sleepless tech
11 Mar 2021 16:57
Смотрите кто у нас платы проектирует https://www.youtube.com/watch?v=f6-FC3QnbX8
Читать полностью…
Sleepless tech
10 Mar 2021 22:05
Хорошо когда есть линтеры. Сразу все понятно)
Читать полностью…
Sleepless tech
29 Apr 2021 11:13
Мне тут уже скоро тридцатник стукнет, поэтому пора заводить бонусные карточки всяких аптек.
Знатно припекло от UX одной аптеки. Мало того что нет валидации на полях и странная кнопка «Выслать код еще раз» (а где был первый раз??), так после нажатия на кнопку вся твоя форма очищается к хуям.
Черканул ребятам из https://www.tagesjump.ru/ которые пилили сайт письмо с ОС, посмотрим что ответят
Читать полностью…
Sleepless tech
22 Apr 2021 15:10
Если (когда) менты отберут у вас телефон и разблокируют его, им нужно будет вытащить из него информацию. Есть два способа: 1) глазками прокликать иконки на рабочем столе, просмотреть чаты и документы 2) вытащить информацию на компьютер и исследовать её с удобством. Для этого есть специальные программы.
Один из производителей такой программы для властей разных стран — Cellebrite, недавно публично хвастался, что умеет вытаскивать данные из Signal. Это правда, если власти смогли разблокировать телефон, то они могут вытащить из него все чаты, так же, как могли бы увидеть их глазами. Эта программа используется спецслужбами по всему миру для проведения официальных и не очень официальных криминологических экспертиз.
Сегодня Signal выложили ответочку. Они где-то раздобыли (в оригинале «fell from the truck» — «свалилась с телеги, нашли на дороге») официальную коробочку с этой программой, исследовали её и обнаружили в ней тонну уязвимостей. Таких уязвимостей, что можно составить специальный файл, который при наличии его на телефоне жертвы получает полный доступ над компьютером, который пытается вытащить с него информацию (жертва и агрессор меняются местами). Можно заставить софт Cellebrite написать что угодно во все криминологические экспертизы, которые есть на этом компьютере. Не только в текущий, но и все последующие.
Пост они закончили следующим абзацем: «мы теперь начнем прикладывать к Signal'у специальные красивые файлы. Они не несут никакой пользы, просто эстетически очень приятные. Причем файлов у нас много и они разные. Приложим мы их только давно зарегистрированным пользователям и только части отловить и исправить все ошибки у вас не получится. Никакой связи с предыдущим текстом этот абзац не имеет. Просто нравятся они нам.»
Троллинг 90го уровня.
Ах да, ещё они обнаружили, что Cellebrite нелегально использует библиотеки Apple в нарушении лицензии. У Apple дорогие и хорошие юристы.
🍿🍿🍿
Читать полностью…
Sleepless tech
15 Apr 2021 17:40
Хей, друзья!
Тут мой коллега Михаил выступает на онлайн митапе Volga JS Online. Он поделится опытом про разработку умных устройств для дома. Приходите!
📆 27 апреля | 18:00 по МСК
👉🏻 Обязательная регистрация тут https://volgajs.timepad.ru/event/1617413/#
Читать полностью…
Sleepless tech
14 Apr 2021 16:35
С чего начать оптимизацию перфоманса? (часть 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://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce
Для мониторинга runtime можно использовать https://speedcurve.com/
Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
Читать полностью…
Sleepless tech
14 Apr 2021 09:10
Телеграм официально запустил 2 новых веб-клиента.
webk.telegram.org
webz.telegram.org
Рад, что смог приложить к этому руку и запилить несколько фич для версии Z.
Читать полностью…
Sleepless tech
13 Apr 2021 15:47
1. Оптимизация изображений
Разница в использовании между <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>
<source avif> // сначала avif
<source srcset webp> // если не сработало, то webp
<img loading='lazy'> // фолбек - img
</picture>
Gif лучше конвертить в mp4 и использовать video
<video>
<source ...>
</video>
3. Оптимизация на уровне сборщиков
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader
imgproxy для динамических изображений
Читать полностью…
Sleepless tech
08 Apr 2021 15:04
Реинкарнировал свой старый @, куда буду складировать всякие рисовалки. Кому интересно, велкам)
Читать полностью…
Sleepless tech
04 Apr 2021 13:40
Ребят, в Саратове самый выгодный курс для покупки битка. Подписывайтесь на мой закрытый канал Саратовский трейдер!))
Читать полностью…
Sleepless tech
01 Apr 2021 17:18
С вами рубрика "Нищебродский diy"
Сегодня разбираем энергосберегающую лампу вида GX53. За что мне нравятся эти лампы, что их разбирать в разы легче, чем лампы E27.
Перегоревший диод обычно можно увидеть невооруженным глазом. Выкорчевываем его плоскогубцами (или выпаиваем) и запаиваем разрыв!
Собираем и тестируем! Радуемся, что немного наебали систему)
UPD: как верно заметили в коментах, есть варик что теперь лампа перегорит быстрее, т к ток рассчитывается исходя из количества диодов. Так что лучше диод заменить.
Читать полностью…
Sleepless tech
31 Mar 2021 14:08
Периодически бывает нужно накидать эскиз каких-нибудь деталей. Удобнее всего, конечно, это делать в блокноте в клетку.
Но мне кажется, что у производителей блокнотов сговор. Давайте мол сделаем дофига ссаных ежедневников в линейку в гибком мягком приятном переплете с ненужной инфой типа астрологических календарей или кодов города и блокноты в клетку в твердом переплете или с пружинкой, чтобы максимально топорно смотрелось.
Ну ладно, это все дрочерство. Суровые хипстеры могут и в линейке почертить)
Читать полностью…
Sleepless tech
28 Mar 2021 21:44
Сколько людей нужно чтобы разобраться с китайским сенсорным телеком для презентаций?
Читать полностью…
Sleepless tech
28 Mar 2021 21:21
Недавно был в родном универе. Там лет 10 строили здание библиотеки, в котором ещё всякие инновационные лекториумы и кванториумы теперь. Гардероб тоже инновационный.
Читать полностью…
Sleepless tech
15 Mar 2021 20:41
Эй, ребят. Посоветуйте плиз бюджетную читалку.
С тех пор как я спалил свою gmini летом, перестал читать книжки (
Вобщем, собираюсь читать техническую литературу, поэтому нужно чтобы читалка могла нормально отображать pdf. Ну и подсветка обязательно. Навороты типа вифи и тачскрин не нужны.
Читать полностью…
Sleepless tech
11 Mar 2021 16:57
Прям вспомнил универские времена, когда с другом путем проб и ошибок разводили платы для устройств.
Читать полностью…
Sleepless tech
10 Mar 2021 11:40
лол. Все что вам нужно знать об уровне защиты кремлевских ресурсов)
Аккуратно, так вам и президента могут подменить при помощи Man in the middle
Читать полностью…
-