Помітив як цікаво в документації TanStack зроблений зміст (ToC), одразу підсвічує всі секції які видно на екрані.
А якщо зменшити вікно то і звузиться превю на ToC.

Красиво 💅

https://tanstack.com/router/latest/docs/framework/react/overview

Як легко відтворити пікер емоджі (такий як в notion чи slack)

Беремо React Aria (хто не чув, рекоменую глянути, потужна ліба), дивимось в оцей приклад і копіюємо 🧑‍🍳

Тай взагалі, Devon, кор-розробник React Aria часто в твіттері публікує круті штуки, є що підглянути.

Приклад: https://stackblitz.com/edit/react-aria-emoji-picker?file=src%2FEmojiPicker.tsx

Джерело: https://x.com/devongovett/status/1956014690338734479

Ось до чого довели перегляди тіктоків...

Черговий лінтер з’явився на районі. Зустрічайте Rslint. Написаний на, неочікувано, Go.

До чого тут тікток? Бо лінтер релізнула WebInfra — команда в компанії ByteDance, яка стоїть за TikTok.

https://github.com/web-infra-dev/rslint

Обіцяє best effort compatibility з ESLint, працює в монорепо, в першу чергу націлений на TypeScript-код, ну і має бути швидким.

Отже, зараз вже можна вибирати між ESLint, Biome, Oxlint і, може, ще когось забув.

Все, дивіться трохи більше рілсів в інстаграм, може Мета теж якогось лінтера накодить.

Хто ваш дизайнер?

Впевнений, що більшість з вас працювали разом з дизайнерами, коли розробляли інтерфейси — така собі колаборація.

І звісно, досвід кожного може суттєво відрізнятись, але напевне ситуація, коли вам давали сирий дизайн під виглядом готового, точно знайома.

Для прикладу візьмемо гіпотетичну кнопку. Ось дизайнер додав кнопку, також задизайнив hover-стейт, може навіть додав декілька різних розмірів і дві варіації стилю. На перший погляд круто, але чогось бракує…

Ну, наприклад, бракує всіх інших стейтів, типу focus, active. Дизайнер накинув лиш один колір кнопки, але ви знаєте, що потрібно мати декілька кольорів. Ну ок, додамо інші кольори і використаємо такий же hue, типу [red-4, blue-4, green-4]. Але знову ж таки, це не завжди працює, бо кольори мають мати правильний контраст. І комбінація red-4 для фону та red-11 для тексту може бути ок, але blue-4 і blue-11 вже може мати недостатній контраст або виглядати всрато.

Короче, приклади тут можна наводити ще довго, а це я лиш про просту кнопку говорив.

Повертаючись до першого питання про те, хто ваш дизайнер, я поки змирився з думкою, що вашим дизайнером також маєте бути і самі ви. Так, цей формат точно не для всіх, але якщо цей скіл прокачати, то робота може стати простішою.

Я тут навмисно не говорю про якесь розподілення ролей і про те, що такий підхід може викликати супротив у розробників. Але з власного досвіду розумію, що це дієво. Більше того, може хтось з вас навіть чув про такі позиції, як Design Engineer. Так, вона передбачає набагато більше, ніж я описав тут, але це лиш один приклад.

Та й, в додачу, я особисто не зустрічав багато дизайнерів, які б вдавались у деталі розробки (а це було б для них корисно, так само як і для нас — розібратись трохи в дизайні). Їх мало. Але це не має бути причиною хейтити тих, яких маєте, а хай це краще буде причиною прокачати новий скіл.

На цей текст мене надихнуло декілька статей, хотілось більше прочитати про позиції Design Engineer. Більше того, я знаю, що мій канал читають люди, які працюють під таким тайтлом. Мені буде цікаво почути їх думку чи навіть критику на мою писанину.

https://vercel.com/blog/design-engineering-at-vercel

https://blog.jim-nielsen.com/2024/the-case-for-design-engineers-pt-ii/

https://marcel.io/posts/becoming-a-design-engineer

Сьогодні за справами послухав дуже цікавий подкаст про Cloudflare Durable Objects, D1 та воркери від Aaron Francis та Josh Howard.

Aaron має досить якісь формат відео, декілька курсів, включно з SQLite. А Josh працює в Cloudflare і дуже гарно пояснює як в них все працює.

В деталі не вдаватимусь. Але відео було настільки цікавим що я не промотував і не ставив на паузу.
Якщо ви знайомі з Cloudflare то не знаю чи багато звідси візьмете. Але, якщо ні і маєте бажання більше дізнатись про те як їм вдається надавати інфраструктуру за дуже дешево (не AWS звісно) і як на це впливають їх конкретні технології - запрошую до перегляду.

https://www.youtube.com/watch?v=C5-741uQPVU

Музична павза

Пісня іноземця про пузату хату, дякую за увагу

https://youtu.be/hxmAh5hGtSE

Сьогодні є час тільки на преколи

Пригадую як юзав цю лібу колись давно. Класно було загалом, але ніщо не вічне.

https://x.com/alexandereardon/status/1957300768106758225

Notion додав offline-режим. Наскільки якісно він працює наразі — не має значення, вони точно будуть це покращувати.

Але от що має значення — це те, що компанії такого розміру просто так не додають настільки складний функціонал. Їх продукт має дуже велику складність, і така інвестиція точно потребує чимало ресурсів.

До чого я це все пишу? Думаю, цей реліз є лише одним із прикладів того, що все більше продуктів, у яких offline-режим має сенс та користь, будуть це додавати.

Іншими словами, local first (ну чи offline first) набирає обертів, і Notion тому приклад. Та й Linear — дуже солідний приклад.

Маю надію, що це не перетвориться на те, як всі додають у свої продукти АІ без об’єктивної користі, просто для маркетингу.

До речі, на тему CRDT і технології, яку відмітили у відео (Peritext), ось стаття від авторів дослідження, Ink & Switch: https://www.inkandswitch.com/peritext/

Коротше, вважаю цю тему дуже цікавою і водночас складною.

https://x.com/ivanhzhao/status/1957827806681002168

Думаю, це рух в правильну сторону.
Оперативна система має наявні механізми для такого, є сенс відмовлятись від архаічних підходів.

https://x.com/jarredsumner/status/1957748098383695930

Така от цікава штука на канвасі.

Аж відьмака захотілось пограти...

https://github.com/jhuckaby/canvascycle/tree/main

Для лінивих читати дослідження - викотили відео по Peritext

https://x.com/geoffreylitt/status/1958203836738265405

Якщо користуєтесь монорепозиторіями на основі workspaces і ваші додатки працюють на Vite чи Next.js (та насправді не тільки ці, тут просто воно одразу працює), то зверніть увагу, чи вам обов’язково треба білдити проєкти, щоб юзати всередині монорепо. Бо можна і no-build підхід використати. Ваш package.json буде посилатись не на папку dist, а на src. Це мега-зручно, на мою думку. Але з деякими фреймворками може так просто не запрацювати.

Користуюсь таким вже якийсь час — балдію. Але треба врахувати, що лінтер і тд все одно треба додати в підпроєкт.

https://turborepo.com/blog/you-might-not-need-typenoscript-project-references

Ніколи не пробував Preact, але там повно цікавий рішень і так само повно хороших відгуків.

Якщо хтось мав практику на реальному проекті, поділіться враженнями

https://x.com/jovidec/status/1958890966804221998

Скрін, від якого мокнуть очі….
Хто не зрозумів, ще молоді

Святковий Google

Графи — це так прекрасно. Якщо ви колись проходили курс з теорії графів і у вас залишився тільки негативний присмак, то це прикро. Мені цей предмет трохи важко йшов, але досить високий бал у результаті я таки отримав.

Як же багато всього у світі можна описати графами. Карти, система правил, автомати (state machine), автоматизації, структури даних, звʼязки — перелічувати можна дуже довго. І як же елегантно це все виглядає, особливо коли є достатній скіл.

Але щоб трошки підкріпити мої вихваляння дисципліни, ось вам мегацікаве відео про графи та гру-пазл.

https://youtu.be/YGLNyHd2w10?si=fF0-bapbvXQtgTk1

Вайбкодери, це реально?!