Work & Beer Balance – Telegram
Work & Beer Balance
1.54K subscribers
116 photos
5 videos
4 files
181 links
Авторский канал @Akiyamka
Поддержать автора можно здесь:
buymeacoffee.com/cherrytea
Download Telegram
Всегда интересно наблюдать когда лозунги из телевизора настолько застревают у людей в мозгу что они заменяют ими нормальную человеческую коммуникацию.

Предложу ещё пару вариантов:
- а ты уже используешь эфектор?
- эффектор-мать зовёт тебя!
🥴1💯1
У 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/
👍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 не нашел как включить из интерфейса, а без этого маржины уезжают из дива =(

Итого, задумка интересная, реализация не оч
Пока эпл смакует то что они стали тем злом с которым должны были бороться, я листаю официальный мануал моего пк, который расказывает как его самому собрать и разобрать (в картинках)
👎1🤔1
Ваш дед только что обнаружил что если на youtube зажать левую кнопку мыши то видео будет воспроизводиться на x2 скорости
🤯15
This media is not supported in your browser
VIEW IN TELEGRAM
Есть такая фича на фронте - возобновляемая загрузка (Resumable Upload).
Это когда вы закидывайте ваш архив мемов на 5 гигов, а он на фронте распиливается и загружается в бэк кусочками по-меньше (chunks).

Все это для того чтобы:
a) Если соединение оборвется, можно было сделать ретрай не с самого начала, а только с незагруженого кусочка
б) Можно было распаралелить (а следовательно - распределить) загрузку (например грузить по 3 кусочка паралельно)
в) Самое главное - если вы забыли что у вас там идет загрузка и закрыли браузер, выключили ноут, на следующий день можно было прийти и возбновить загрузку с того места где мы остановились
Вобщем все чтобы оградить ваших пользователей от данного опыта.
(технически так же позвоялет продолжить загрузку этого же файла с другого устройства , или даже грузить с нескольких одновременно, но это уже out of scope)

Принцип работы (упрощенно):
1. Создаем "сессию" загрузки
2. Пилим файл на кусочки,
3. Грузим все файлы в любом порядке прикрепив номер кусочка и айди сессси
4. Закрываем сессию когда все кусочки загружены (в этот момент склеиваем их на бэке в один файл).
5. Самое главное - у нас должен быть эндпоинт который скажет нам какие кусочки уже загружены для этой сессии (т.е. - что можно скипать при возбновлении загрузки)

Что у нас есть на фронте для реализации:
- Есть мамонт resumable.js, сегодня интересен только в качестве музейного экспоната
- Есть filepond - имеет навароченую интерактивную часть с приятным дизайном, однако техническая реализация довольно кривая, много багов, почти нет тестов, поверхностыне типы (пытался поправить но чет мейнтейнеру не зашло)
-Есть tus.io - самое здравое решение на сегодняшний момент. И дело тут даже не в качестве кодовой базы. Ниже обьясню.

Как вы уже заметели, это фича не чисто фронтовая, она тесно связана с бэкэндом, на стороне которого должна быть реализована пачка эндпоинтов, которые работают определенным образом.
Так что если делать бэк под фронт под конкретную либу - она протекает в ваш бэкэнд и, вероятно даже в БД.
Tus - это не либа, это протокол. Причем под этот протокол уже написаны реализации под разные ЯП и окружения, как для фронта так для бэка. Вобщем есть из чего выбрать.

Впрочем есть вариант не писать бэк вообще, и взять multipart upload от aws S3, что по сути готовая реализация бэкэнда (на собственном протоколе) для resumable uploads

Ну и наконец, у нас есть uppy.io - это все-включено-мега-комбайн который в том числе включает в себя и поддержку tus протокола, и 3S multipart upload и еще с десяток всяких других сервисов типа дропбокса и гуглдрайва,
(не забудьте завести голден ретривера) и вобще умеет делать разную дичь типа - стриминга вашей вэбки в ваш onedrive (what?)
🔥19👍31
Постоянно гуглю этот тип, так что решил обронить его тут.
Полезная вещь для дебага, позвоялет "развернуть" сложный тип. Ну то-есть выводит конечный тип после всех дженериков юнионов и тп.
Если совсем просто - вместо SomeGeneric<SomeOtherGeneric, AnotherGeneric<API["some"]>> получаем структуру из js примитивов

/**
* Debugging type that will display a fully resolved type
* in Intellisense instead of just the type aliases
*
* @type {T} The type to expand out
*/
type ExpandRecursively<T> = T extends (...args: infer A) => infer R
? (...args: ExpandRecursively<A>) => ExpandRecursively<R>
: T extends object
? T extends infer O
? { [K in keyof O]: ExpandRecursively<O[K]> }
: never
: T

type Expand<T> = T extends (...args: infer A) => infer R
? (...args: A) => R
: T extends object
? T extends infer O
? { [K in keyof O]: O[K] }
: never
: T


Бонус контент:
чтобы тс вам в ошибках не обрезал тип через ... надо включить noErrorTruncation в tsconfig

#typenoscript #ts
🔥26👍8
Есть такая ловушка в практике разработчика в которую я сам попадал несколько раз.
Когда у нас есть какая-то проблема, но у нас недостаточно знаний о системе, мы пытаемся ее решить в той области, в которой мы чувствуем себя уверенно.
Такие решения, те кто по опытней, называют костылями, и мы когда становимся мидлами - ругаем наших джунов, за то что их фикс лечит симптомы а не проблему.

Но иногда все не так очевидно, иногда костыль сделан из элитной породы дерева, лакированый, и имеет форму библиотеки с 1000 звездами на гитхабе.
Будьте бдительны, отличить не так сложно - хорошие решения просто работают, плохие постоянно нуждаются в новом слое костылей и увеличении сложности.
🫡8👍3
Не секрет что популярный - не значит качественный, и наоборот.
Качественные решения с трудом проникают в нашу практику, а некачественные однажды набрав хайпа разрастаются как сорняк.
Далеко ходить не надо, возьмем Next.js - обрастает костылями и сомнительными решениями, но его все равно "хавают".

Сегодня у нас есть уникальная возможность посмотреть на примере как это работает.

alexgriss поделился своими мыслями о том как он приходит к выбору next.js, в своем посте про выбор стэка для нового проекта.
Речь там не о Proof of Concept или MVP, это имено продуктовый стэк.
Обратите внимание - в листе приоритетов нету ничего что должно волновать иженера:
- Подерживаемость
- Производительность
- Вендорлок
- Куда движется это решение и есть ли у него будущее
и так далее.

Вместо этого вы увидите что
- Мне надо побыстрее

Выводы делайте сами, от себя только добавлю что пункт "я должен быть знаком с технологиями" зависит полностью от вас.
Не откладывайте на завтра, пробуйте технологии сегодня чтобы потом не решать судьбу нового проекта основываясь на том что вы попробовали в 2017 году
💯10🤡3👍1🔥1
На канале mefody_dev появился класный пост про то как сделать модалки с анимациями на нативных апишках.
(codepen демка)

В лисе анимашки не работают, но может через год два уже можно будет тащить в прод
По работе сейчас много работаю с Bazel, и подумал что вам будет интересно узнать с какими челеджами я сталкиваюсь и как оно вообще работает.
Для тех кто не в курсе пару слов о том что это:
monorepo.tools говорит нам что это тул для менеджмента мнорореп, что на самом деле не совсем совсем не так.
По факту он не делает ничего типа авторелизов или трэкинга / подьема версий / генерации ченжлогов и все то что обычно делают монореп тулы фронта.

Если в классическом монорепе возможно сделать так чтобы один пакет зависел от более старой версии пакета из этого монорепа, то bazel такой возможности не предоставляет

Он нужен в монорпе для того чтобы билдить все вот это что вы туда накидали написанное на разных ЯП и связать это между собой (т.е. что после чего надо собрать)
Короче, на языке фронтендеров - bazel это типа webpack, но не для сборки js, а для сборки чего угодно чем угодно*. Только в webpack мы все импортируем в js файлы, и пишем loader-ы, а в bazel мы все импортируем в BUILD.bzl** файл и пишем rules

* В теории, на практике есть нюансы о которых я буду расказывать позже
** Написаны они на языке starlark, который является диалектом Python с ужасной поддержкой в vscode

#bazel
👍5
Work & Beer Balance
По работе сейчас много работаю с Bazel, и подумал что вам будет интересно узнать с какими челеджами я сталкиваюсь и как оно вообще работает. Для тех кто не в курсе пару слов о том что это: monorepo.tools говорит нам что это тул для менеджмента мнорореп, что…
Под каждый билд каждой зависимости Bazel создает отдельную дирректорию куда копирует* все необхожимое для конкретно этой стадии билда.

Так, например, в процессе описания билда приложения в Build.bzl надо перечислить все зависимости что ему нужны для работы (в случае js приложения это будут пакеты из node_modules и например другие пакеты в вашем монорепе, которые Bazel так же предварительно соберет аналогичным образом.)

* На самом деле он их не копирует, а создает симлинки. И на практике это постоянно стреляет в ногу. Сначала вы получаете легкое ранение если попытаетесь это все дело поднять на винде, которая как известно, имеет особые отношения с симлинками, а потом вы получите выстрел из дробовика, когда узнаете что чтобы нода не могла "сбежать" из своей папки "контейнера" bazel патчит ей весь fs пакет чтобы она не могла ходить по симлинкам в принципе (npm link - пока), и наконец ноги отрывает полностью когда оказывается что bazel так же патчит require от чего esm перестает нормально работать ведь import-ы замонкепатчить не получается
😁2🤯1
Work & Beer Balance
Под каждый билд каждой зависимости Bazel создает отдельную дирректорию куда копирует* все необхожимое для конкретно этой стадии билда. Так, например, в процессе описания билда приложения в Build.bzl надо перечислить все зависимости что ему нужны для работы…
По сути это все очень напоминает недо-докер:
- Свой язык для описания билда в специальном файле - в докере есть
- Билды изолироваными "слоями", каждый из которых кэшируется - в докере есть (и реализовано лучше)
- Которые потом заливаются в репозиторий и могут быть скачаны оттуда без потребности их пересобирать - в докере есть
Work & Beer Balance
По работе сейчас много работаю с Bazel, и подумал что вам будет интересно узнать с какими челеджами я сталкиваюсь и как оно вообще работает. Для тех кто не в курсе пару слов о том что это: monorepo.tools говорит нам что это тул для менеджмента мнорореп, что…
Как работает bazel с точки зрения пользователя (упрощенно):

а) Описываем рул для сборки приложения:
- от каких пакетов зависит (вернее сказать - от каких рулов)
- где взять сорс файлы
- какой бинарник с какими аргументами запустить
- даем ему имя например - build_dev

б) Описываем рул для запуска приложения и даем ему имя, например run_dev
- указываем что он зависит от build_dev
- каким бинарником
- какой файл из build_dev запустить

Теперь если мы хотим запустить приложение - пишем bazel run //путь/к/пакету:run_dev
Bazel составит граф зависимостей, и начнет его билдить с конца (или нет если они уже готовы. Те самые временные директории для билда, о которых я говорил ранее одновременно являютсья кэшем bazel), в конце запустит ваше приложение

Кроме run есть еще build (понятно - только билдит что-то) и test
😢1
Я очень внимательно слежу за тем как развивается продукт под названием AR очки.

Ну, это те через которые вы смотрите на мир дополненный "голограмамми" которые видны только вам.
В отличие от vision pro вы не смотрите на мир через камеру, и не носите на голове монитор, их можно безопастно использовать, например, за рулем - если они зависнут или сядут вы не "потеряете зрение", там никогда не будет задержки, и вы никогда не упретесь в светочувствителньость камеры, им не нужно много вычислетельных мощностей и потребляют они сравнительно мало.

Делает такие очки много разных компаний (в коментарии будет список), и цена у них в диапазоне 400-700$ (а не 3 куска)

Я такие очень хочу, но пока не покупаю, а все потому что я знаю страшную тайну - в них есть одна пока нерешенная техническая проблема (продолжение в следующем посте)
👍1
Work & Beer Balance
Я очень внимательно слежу за тем как развивается продукт под названием AR очки. Ну, это те через которые вы смотрите на мир дополненный "голограмамми" которые видны только вам. В отличие от vision pro вы не смотрите на мир через камеру, и не носите на голове…
Вот типичная реклама таких очков. Выглядит супер, но это ложь. На самом деле вы не можете видеть все эти окошки/мониторы одновременно. На сегодняшний день такие очки могут проецировать что-либо только в области по центру, равной примерно 40% угла зрения.

Иными словами, вы смотрите на все виртуальное как бы через "окно", и чтобы увидеть монитор слева вам надо повернуть голову налево чтобы он попал в это окно (надеюсь я понятно обьяснил).

Но узнать об этом вы сможете только из отзывов реальных пользователей ; )

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

Есть кстати подвижки - совсем недавно придумали очень необычную линзу с паттерном напоминающим покрытое инеем стекло который позволяет существенно расширить этот угол
👍7