В эту субботу меня попросили поучаствовать в жюри хакатона среди школьников.

Мероприятие безусловно классное. Среди участников ребята от 10 до 20 лет (20 летние школьники, лол), которые познакомились с программированием прямо в ходе хакатона.

Во-первых, немного поразили кейсы от компаний. Один из них - сделать виртуальную примерочную (на фотку человека чтобы можно было накидывать одежду или что то типа того). Понимаю, что школьники щас акселераты, но блин не настолько чтобы слёту за пару дней накидать и обучить нейросеть. В итоге ребятам удалось научиться запускать скачанные проекты с нейронками (что тоже круто для ребят 12-15 лет).

Во-вторых, организаторы хакатона не предусмотрели, что для выступлений ребят неплохо бы обучить оборудованию, на котором они будут показывать проекты. Каждая команда впадала в ступор при виде этого китайского сенсорного телека вроде как на винде, но без панели пуск и какого-либо интуитивного UX.
В итоге сами организаторы впадали в ступор, когда после презентации нужно открыть какой то файл или свернуть саму презентацию.

Но опыт классный, как для меня, так для ребят и организаторов.

Сколько людей нужно чтобы разобраться с китайским сенсорным телеком для презентаций?

Не знал, что АлиЭкспресс был ещё при императрице Анне Ивановне.

Периодически бывает нужно накидать эскиз каких-нибудь деталей. Удобнее всего, конечно, это делать в блокноте в клетку.

Но мне кажется, что у производителей блокнотов сговор. Давайте мол сделаем дофига ссаных ежедневников в линейку в гибком мягком приятном переплете с ненужной инфой типа астрологических календарей или кодов города и блокноты в клетку в твердом переплете или с пружинкой, чтобы максимально топорно смотрелось.

Ну ладно, это все дрочерство. Суровые хипстеры могут и в линейке почертить)

Охуенный UX акустического видео с аккордами от Найка Борзова.

Ребят, в Саратове самый выгодный курс для покупки битка. Подписывайтесь на мой закрытый канал Саратовский трейдер!))

Тестирую новые алгоритмы обработки изображений. На этот раз решил поковырять софт от Makelangelo. Первые тесты вроде ничего, интересно выходит.

Реинкарнировал свой старый @drawbot_art, куда буду складировать всякие рисовалки. Кому интересно, велкам)

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

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

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

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

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.