Розробка третьої хвилі – Telegram
Розробка третьої хвилі
376 subscribers
420 photos
138 videos
425 links
Українською про веб-технології, і не тільки.

Як кав'ярня, тільки про технології.

https://www.bohdanptyts.com/
Download Telegram
Ще десь у травні відклав собі нотатку, щоб зробити пост про Activity API в React, але постійно відкладав. Тема загалом проста, але цікава, тому час.

У React є експериментальна фіча — компонент (якщо це ще так можна назвати, ну або API) під назвою Activity.

Якщо читати документацію, то може бути трохи складно, тому дам просте пояснення. Огорнувши елементи в Activity, у вас з’являється можливість рендерити компонент лише у virtual DOM із низьким пріоритетом.

Я додам відео, де це класно показано, та приклад звідти мені дуже сподобався. Там показано велику кількість анімованих інтерфейсів, які при одночасному рендері садять FPS. Якщо приховати лише в CSS, то все одно блокуватимуть основний потік, бо HTML треба рендерити. Якщо не рендерити взагалі — не вийде прорахувати state наперед. Тут якраз Activity посередині: рендерить тільки віртуально, не блокує потік і тримає активним state.

Цікава фіча, нечасте застосування, але точно буде корисною.

https://react.dev/reference/react/Activity
👍3
Раніше писав про LiveStore. Його автор, Johannes Schickling, схоже, став великим популяризатором бібліотеки Effect. А потім це підхопив лисий чєл (не той, що ви подумали), відомий своїми відосами про TypeScript — Matt Pocock.

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

От що точно потрібно розуміти — це генератори, ну ті, що функції. І під руку, на хвилі цього хайпу, потрапив код від Мета. Він там мігрує дещо у своєму відкритому проєкті на Effect — точно буде найс підглянути.

https://x.com/mattpocockuk/status/1936145776465391658

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

А якщо я більше розберуся з Effect і буду готовий щось написати, то неодмінно це зроблю.

https://effect.website/
3👍1👌1
Вийшли результати опитування The State of Devs 2025
Думаю ви точно бачили інші їх опитування раніше, типу State of CSS і тд

https://2025.stateofdevs.com/ua-UA/

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

64% девів не мають дітей
56% мають профільну освіту
Найбільші проблеми це поганий менеджмент та вигорання (63% та 62%), але 70% не відчувають дискримінації
56% заявило що їх дохід виріс але всеодно найбільшими труднощами зазначили недостатню оплату (43%)

То ІТ в дупі чи ні?
👍4🍌1
Розробка третьої хвилі
Раніше писав про LiveStore. Його автор, Johannes Schickling, схоже, став великим популяризатором бібліотеки Effect. А потім це підхопив лисий чєл (не той, що ви подумали), відомий своїми відосами про TypeScript — Matt Pocock. Я б хотів більше написати про…
З мого попереднього поста про Effect я вже трохи глибше заглибився в тему — виглядає не так складно. Переглянув кілька дуже довгих відео, щоб просто відчути смак підходу. Насправді цікаво: ком’юніті теж непогане і досить привітне, що, звісно, корисно.

З усього контенту вибрав одне відео, яке досить добре пояснює, як працює Effect і яка з нього загалом користь.

Після такої кількості контенту починаєш почуватися ідеалістом: усе так гарно розкладено по поличках, нагадує підхід якогось солідного університету.

Я досі граюся з LiveStore, тож Effect так чи інакше буде залучений — може, не скрізь, але точно для схем даних, тому цікаво продовжувати дослідження.

А ось саме відео:
https://www.youtube.com/watch?v=ibxUIL_-LlA
👍4
Я вже деякий час, періодично та з паузами, працюю над мобільним додатком, який контролюватиме фізичний пристрій. Ну там вмикати, вимикати і всяке різне. Пристрій теж розробляю сам, до речі, та пишу код на плюсах.

А от додаток роблю на React Native. Після паузи в кілька років побачив, наскільки суттєво покращилась екосистема й як багато може Expo. У мене там і BLE, і Wi-Fi, і mDNS, та ще інші сервіси — не просто якийсь туду-ліст.

Багато інформації є в документації, статтях і просто в гуглі. Але деколи трапляються цікаві проблеми, про які нечасто щось публікують. Мені друг колись скинув одну телеграм-групу українського комʼюніті по RN. Я там нечасто щось сам питаю — здебільшого знаходив відповіді в історії повідомлень. Але от із розмови дізнався, що в Expo-проєкті можна видаляти деякі файли нативної частини, і Expo потім їх відгенерує — я взагалі не очікував цього.

Коротше, я вирішив там поділитись своїм каналом, і щоб було чесно, поділюсь тут посиланням на них: @reactnativesquad
👍3
Розробка третьої хвилі
https://www.youtube.com/watch?v=azk-GuGiy3E Прогрів перед Rolldown Постараюсь про це розписати пізніше
Щойно релізнули Vite 7. Ну як, декілька годин тому.

Нічого надзвичайного, але під капотом рух в сторону повної міграції на Rolldown. Черговий прогрів? Та напевне ні, бо Rolldown вже можна пробувати. Але, схоже, треба Node 22+.

Як мінімум спробую мігрувати сторібук коли вони синхронізуються з оновленням, то болюча точка бо він дуже великий.

https://vite.dev/blog/announcing-vite7.html
🔥2🎉1
This media is not supported in your browser
VIEW IN TELEGRAM
Сьогодні робив рев’ю для друга-дизайнера сайту, який він «навайбкодив». Ми ще поспілкувалися, і він скинув класні референси блогів розробників-дизайнерів.

Дуже сподобалася одна стаття: Good vs Great animations.

Я взагалі фанат гарно анімованого UI. Але часто це виглядає кострубато. Можливо, тут теж можна застосувати правило з accessibility: або робити одразу високої якості, або взагалі не робити. Бо «на пів шишечки» часто відчувається не дуже або навіть може ускладнювати роботу з інтерфейсом. Думаю, з анімаціями так само.

У цій статті наведено буквально кілька прикладів, як із хорошої анімації зробити чудову. Але найголовніше — це не записи, а живі приклади: можна поклацати й глянути в devtools, як воно зроблено. Дуже круто, як на мене.

https://emilkowal.ski/ui/good-vs-great-animations
👍22
Шановні, в Drizzle відкрилась вакансія!

Шукають людину для роботи над документацією, туторіалами і щось в цьому напрямку.

Ось сторінка: https://petal-echo-01d.notion.site/Learning-Loop-Engineer-Dev-Rel-Drizzle-Team-21d0e2b8170480258860fd6ad305329d
👍3
Пригадую, як на першому курсі, коли ми проходили вступ до комп’ютерної інженерії, один із викладачів пояснював тему дискретизації сигналу. Одне з правил, яке він розповів, звучало приблизно так: «частота дискретизації має бути щонайменше вдвічі більшою за частоту сигналу».

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

https://www.youtube.com/watch?v=eBHbCZo9QrM

Одразу поясню, чому я про це пишу. На мою думку, розуміння таких тем загалом не потрібне для веб-розробки. Але я також вірю, що хоча б поверхневе розуміння того, як працює комп’ютер загалом, є важливим і додає вам певного % конкурентоспроможності. Тому я інколи кидаю щось і про embedded, роботу з пам’яттю чи те, як працює операційна система.

Сигнали є всюди: звук, зображення, будь-які дані — все це передається у вигляді аналогових сигналів. Комп’ютери дискретні, тобто працюють із визначеним набором значень, ну типу 0 та 1. Сигнали ж аналогові. І щоб перетворити сигнал з аналогу на дискретний, використовують семплінг: з певною частотою «слухають» вхідний сигнал і перетворюють його амплітуду в точках семплінгу на якісь дискретні значення.

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

Уявімо сигнал частотою X герц, синусоїду, наприклад. Щоб перетворити його на дискретні значення, нам недостатньо частоти дискретизації теж X герц, адже тоді ми втратимо половину вершин сигналу. Мінімум нам потрібно 2 X герц, щоб дискретні значення відображали всі вершини. При нижчих частотах семплінгу спостерігається спотворення (aliasing), коли сигнал набуває хибного вигляду й не відтворює справжню форму. Тож правило «вдвічі більшої частоти» дійсно гарантує, що ключові точки сигналу «ловляться» без втрат.

Це ще називається теоремою Віттекера — Найквіста — Котельникова — Шеннона. Пригадую з універу тільки прізвище Шеннона.

А знаєте, як його звали? Клод Шеннон (Claude Shannon). Вікіпедія спекулює, що це ім’я взяли для назви відомої LLM-моделі, але переконливих підтверджень я не знайшов
👍71
Пробую ще раз. Шукаю на виробництво бпла/літаків людину на посаду помічника конструктора. Треба вміти працювати в SolidWorks. Локація Київ, робота по місцю.

Посилання на вакансію https://skydefenders.com.ua/careers

Буду вдячний за контакти та поширення.
👍2
Зараз досить рідко користуюся Figma — роботи повно. Але інколи можу там редагувати якісь pet-проєкти. Звернув увагу на дещо, можливо, це було й раніше, але я не помічав.

У Figma Desktop присутній haptic feedback на трекпаді. Не знаю, чи це підтримують інші платформи, але на MacBook — так.

Це точно про те, що деталі важливі як в анімаціях, так і в усьому іншому. Мені прям дуже сподобалось, що таке є, тому вирішив погуглити, які взагалі є доступні API, бо, наприклад, у React Native це легко реалізувати.

Очікувано, в браузері немає доступу до приватних API macOS. Тому це працює тільки в Figma Desktop, а в браузері — ні.

Під Electron і Tauri, схоже, є пакети. Мені було б цікаво спробувати Tauri, глянув для нього — коду всього три файли, ніби нічого магічного, просто через макроси підтягують API і викликають його, тобто Foreign Function Interface (FFI).

Якщо колись тестуватиму Tauri і не забуду, то додам до додатка.

Під Electron теж, до речі, є пакет, але він уже роками не оновлюється.

https://github.com/ItsEeleeya/tauri-plugin-macos-haptics
👍5
Сподіваюсь я не стану максимально лінивим з цим інструментом, бо виглядає цікаво. Мені його порадили в твіттері.

Speach to text з капєц красивим дизайном і підтримкою локальних моделей.
Тепер ви дійсно можете накричати на ЛЛМ якщо вона не фіксить вам баги....

https://www.youtube.com/watch?v=h3NA_-Bo0zE

https://superwhisper.com/
2
Напевне таки доведеться спробувати Effect для чогось простого. Я вже почитую документацію схеми, виглядає дуже прикольно, вле схема то лиш частка від всіх можливостей.

Там зранку вийшло відео від Метта про Effect. Точно стає менш напряжно думати про функції-генератори. Я б навіть сказав що відео має захоочувальний ЕФЕКТ 😎

https://www.youtube.com/watch?v=S2GChOwivwQ
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Мав у списку ідей написати про Opaque Types в TS. Але вирішив, що пора таки спробувати дещо інший формат — відео.

Буду радий прочитати ваші коментарі та зауваження. Сподіваюсь, тема проста для розуміння та водночас цікава!

https://www.youtube.com/watch?v=4y6PX5mvQaM
👍8