Sleepless tech | Евгений J

Всем привет!

Недавно словил «интересный» баг на raspberry pi zero. Пытался запустить bleutooth server через python и в итоге получал всегда permission denied🤔 Причем пользователь добавлен в ту же группу, что и bluetooth и все остальные причины тоже пофикшены. Запускать питоновский скрипт от sudo как то не комильфо и там появляются другие подводные камни.

В итоге, спустя полтора часа танцев с бубном я понял, что в адаптер вместе с малиной у меня воткнут телефон. Вынул - проблема ушла. Т е при нехватке питания можно cловить такое необычное поведение😐

Всем привет!

Я тут недавно писал, что немного приложил руку к релизу веб-версии телеги. У проекта довольно интересный стек - начиная c самописного аналога React (Teact), до web assembly.

Александр — тим лид этого проекта — пишет интересные заметки в @webzchannelru, где рассказывает о причинах выбора той или иной технологии и тонкостях реализации разных фич.

Кому интересно — welcome @webzchannelru.

Кстати, Саша лично тер за Telegram с Пашей, так что я теперь через одно рукопожатие знаком с Дуровым😁

Как выглядит производство корпусов Flipper Zero изнутри

Новый большой апдейт. Статья без правок почти, буду признателен за вычитку грамматики и т.д.

https://habr.com/ru/company/flipperdevices/blog/557282/

Эй, ребят! Кто знаком с python?
Я тут ищу планировщик а-ля cron и у меня складывается плохое предчувствие)

Неужто никак нельзя справиться без ублюдского бесконечного цикла? Мне то всего раз в сутки функцию запустить надо)

Это получается нужно в отдельном потоке от остального кода это запускать?

#3d_print

Сегодня впервые тестирую печать SBS пластиком.

Нужно напечатать колпачок для термоса. SBS вроде как самый подходящий пластик для пищевой промышленности.

Мне тут уже скоро тридцатник стукнет, поэтому пора заводить бонусные карточки всяких аптек.

Знатно припекло от UX одной аптеки. Мало того что нет валидации на полях и странная кнопка «Выслать код еще раз» (а где был первый раз??), так после нажатия на кнопку вся твоя форма очищается к хуям.

Черканул ребятам из https://www.tagesjump.ru/ которые пилили сайт письмо с ОС, посмотрим что ответят

Я, как динозавр, впервые заюзал webpack-bundle-analyzer. Это просто песня.

Заоптимизировал сборку, уменьшив vendor bundle в 3 раза.

С moment-timezone еще бы поиграться, но это уже другая история)

Если (когда) менты отберут у вас телефон и разблокируют его, им нужно будет вытащить из него информацию. Есть два способа: 1) глазками прокликать иконки на рабочем столе, просмотреть чаты и документы 2) вытащить информацию на компьютер и исследовать её с удобством. Для этого есть специальные программы.

Один из производителей такой программы для властей разных стран — Cellebrite, недавно публично хвастался, что умеет вытаскивать данные из Signal. Это правда, если власти смогли разблокировать телефон, то они могут вытащить из него все чаты, так же, как могли бы увидеть их глазами. Эта программа используется спецслужбами по всему миру для проведения официальных и не очень официальных криминологических экспертиз.

Сегодня Signal выложили ответочку. Они где-то раздобыли (в оригинале «fell from the truck» — «свалилась с телеги, нашли на дороге») официальную коробочку с этой программой, исследовали её и обнаружили в ней тонну уязвимостей. Таких уязвимостей, что можно составить специальный файл, который при наличии его на телефоне жертвы получает полный доступ над компьютером, который пытается вытащить с него информацию (жертва и агрессор меняются местами). Можно заставить софт Cellebrite написать что угодно во все криминологические экспертизы, которые есть на этом компьютере. Не только в текущий, но и все последующие.

Пост они закончили следующим абзацем: «мы теперь начнем прикладывать к Signal'у специальные красивые файлы. Они не несут никакой пользы, просто эстетически очень приятные. Причем файлов у нас много и они разные. Приложим мы их только давно зарегистрированным пользователям и только части отловить и исправить все ошибки у вас не получится. Никакой связи с предыдущим текстом этот абзац не имеет. Просто нравятся они нам.»

Троллинг 90го уровня.

Ах да, ещё они обнаружили, что Cellebrite нелегально использует библиотеки Apple в нарушении лицензии. У Apple дорогие и хорошие юристы.

🍿🍿🍿

Оптимизация. Заметки после 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 (любое число в зависимости от того, нужно ли сначала сбилдить этот бандл чтобы он не вошел в другой бандл)
}
}
}
}

Хей, друзья!

Тут мой коллега Михаил выступает на онлайн митапе Volga JS Online. Он поделится опытом про разработку умных устройств для дома. Приходите!

📆 27 апреля | 18:00 по МСК

👉🏻 Обязательная регистрация тут https://volgajs.timepad.ru/event/1617413/#

Лайфхак для пайки в домашних условиях

https://i.imgur.com/brdcabA.gifv

С чего начать оптимизацию перфоманса? (часть 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

С чего начать оптимизацию перфоманса? (часть 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.

Телеграм официально запустил 2 новых веб-клиента.

webk.telegram.org
webz.telegram.org

Рад, что смог приложить к этому руку и запилить несколько фич для версии Z.

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.

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 для динамических изображений

Всем привет✌️

На этой неделе стартанула Podlodka Crew по фронтенду. Если кто не слышал, это двухнедельный марафон с лекциями от разных спикеров (одна с утра, одна вечером), где довольно много интерактива (можно вызваться добровольцем на всяких активностях, поспрашивать мучающие тебя вопросы и т.п.). Это первый поток по фронту и он посвящен оптимизации фронта.

Сюда буду скидывать краткие заметки, чтобы не забыть (а может и еще кому полезно будет)