Субдомени для локалхоста! 🤩

Це вже працює в твоєму хром браузері, не потрібно нічого конфігурити. ✅

Як це? ❓

1️⃣ - запусти свою фронтенд апку як зазвичай, наприклад localhost:3000
2️⃣ - пропиши будь-який субдомен і та сама апка буде працювати, наприклад admin.localhost:3000 💫

Для чого це? ❓

Цей підхід дуже зручно використовувати для багато-ролевих апок.

Тому що кожен субдомен - це як окремий домен для браузера.
А значить:
→ ізольований контекст (LocalStorage, Cookies, Notifications etc)
→ окремі збережені паролі, підсказки автокомпліта

Щоб в одному браузері відкрити різні таби апки з різними субдоменами - і авторизуватись різними ролями / юзерами і тестувати як працює взаємодія між ними.

Кілька слів про браузери:
→ працює в сучасних версіях Chrome, Firefox
→ не працює в Safari
→ має працювати в інших chromium-based браузерах

Стосовно запуску різних проєктів ✍️

Можна різні проєкти запускати на різних субдоменах щоб зберігати різні автокомпліти, авторизацію.

❗️ Але я рекомендую запускати різні апки на різних портах, тобто localhost:3040, localhost:4050 тощо.

Кожна апка для локального девелопменту повинна мати свій унікальний порт. ✍️

Тому що:
→ не має конфлікту контекстів різних апок (не перетирається localStorage, не міксуються кукі та інші persistent data тощо)
→ різні апки можна запустити одночасно
→ кожен порт прописується в коді (енвах) = хороша конвенція

Отримав користь?
Репости друзям, вподобай цей допис щоб ще більше девелоперів дізналось 😉

#coding #dx

🤖 сьогодні бавився з фізикою та софтвером - експеримент з частотою. 🎮 🕹

Часом тягне до хардверного пет проджекта, тому що хочеться впливати на реальність рухаючи матерію моторами. 🦾

📌 Ідея наступна - зробити круглий екран з прямокутного іфона.

Як - анімувати екран обертаючи його через CSS keyframes і разом з цим фізично обертати іфон в іншому напрямку.

Засінкавши частоту обертів іфона та анімації зображення - усі пікселі мали б рендеритись на своєму місці ніби екран статичний 😍

Але в реальності так не вийде - зображення розмиває, і чим далі від вісі обертання тим сильніше розмиває.

Все через кутову швидкість. 🤓

Мій іфон робить анімацію 120 FPS (frames per second) фреймрейтом.
Мотор робить 5 RPS (rotation per second).

Виходить за 1 оберт іфон показує 120 / 5 = 24 фрейма. 💡

360 градусів / 24 фрейма = 15 градусів (degree) - на стільки розмивається кожен піксель кожного фрейма. 💡

Те що видно на відео червоним на екрані іфона - червоний круг розмитий на 15 градусів.

Взагалі, це частина іншого пет проєкта, тому я керував анімацією через вебсокети з адмінки з макбука.
Але то вже інша історія 😉

Результати експеримента:
→ на комерційний рівень не вийде 😂
→ задоволений 😌 (клеїв, програмував, рахував математику і фізику, шукав деталі в гаражі тощо)
→ відчув наскільки реальність крута через безмежний фреймрейт і деталізацію 🧠

А у вас є проєкти з хардвером? Ардуіно, распбері?
Діліться в коментах чи в лічку.

☝️Незалежно від того скільки вам років і скільки доларів заробляєте - приділяйте трохи часу на те що вам щиро подобається всупереч безприбутковості задуму, щоб порадіти і знайти натхнення розвиватись далі.

#hobby #hardware

void promises 🕳

Часом буває необхідність викликати асинхронну функцію і при цьому:
→ байдуже який результат вона верне
→ не потрібно чекати її виконання, хай собі в фоні працює

Девелопери зазвичай просто викликають такі функції ніби вони синхронні, але:
→ нормальна IDE як мінімум підсвітить рядок і файл варнінгом бо “забули await” ⚠️
→ не ясно чи це дійсно бага чи так задумано 🤷‍♂️

Для цього хорошою практикою є написати оператор “void”:
→ це виражає навмисне уникання евейта 🧠
→ ESLint розпізнає це як правильний код і не буде репортити проблеми ✅

Ітого є 4 семантично хороших варіанти як використати проміси:
→ await promise 🏆
→ promise.then(onSuccessCallback, onErrorCallback)
→ promise.catch(onErrorCallback)
→ void promise

Важливий момент!
Войд проміса зробить його ерори НЕвловими в поточному флоу.
Для цього варто встановити конвенцію на проєкті - щоб проміси які ми ігноримо мали внутрі себе врапери які належно хендлять потенційні ерори.

З цим трюком познайомився недавно, раніше на проєктах писав спеціальну ютілку типу “ignoreAwait(promiseArgument)”.

Деталі по конфігу ESLint дивіться тут - @typenoscript-eslint/no-floating-promises

#coding #async

Хей гайс 👋

Після років девелопмента веб апок, багато речей стають очевидними починаючи від стилю коду до імплементації фіч.

Щось субʼєктивно хороше, щось обʼєктивно обґрунтоване.

А коли щось очевидне то про нього інстинктивно не хочеться говорити - все й так ясно, нема що додати.

Знаю що для вас багато чого зовсім не так очевидно у фронтенді, TypeScript - тому діліться в коментах що саме вам важко дається, на чому застрягли.

А я з цього виберу топіки для наступних корисних постів 😏

Крутий туторіал по ембедед девелопменту ❤️‍🔥 ❤️‍🔥 ✨
Використовує Cortex-M4 STM32 процесор, який вважається наступним рівнем, більш професійним серед ембедерів ніж ардуіно.

Автор:
→ програмує мікроконтролер на C
→ пише свій бутлоадер 😱
→ пише свій протокол для серійної комунікації UART
→ пояснює які є і чому існують периферії (GPIO, system ticks, flash memory etc)
→ datasheet and reference manual for hardware
→ і багато інших штук
→ і взагалі пояснює що це все таке і як воно взаємодіє в цілісному флоу

Я продивився понад 10 год цього туторіала і рекомендую зокрема бо:
→ автор дуже добре пояснює хардвер на лоу левелі
→ свіжий, сучасний туторіал (останнє відео було опубліковане 12 днів назад і може ще нові будуть скоро)
→ автор відповідає в коментарях і має свій активний діскорд канал
→ окрім хардвера це ще й хороший туторіал по C language 💯
→ юзає VS Code 👩‍💻 і навіть написав частину коду на TypeScript for NodeJs щоб апгрейдити софтвер на хардвері через UART протокол

Тепер ви знаєте як провести ці вихідні з користю.

p.s. класно що можна дивитись відео на ютюб на 1.5 швидкості 😃

#tutorial #hardware #c #baremetalprogramming #embedded

https://youtu.be/uQQsDWLRDuI

1М секунд = 12 днів
1В секунд = 32 роки

Наглядна різниця масштабів 😯

Щоб не писати !important (а його писати це ознака поганого коду) треба правильно розуміти specificity селекторів CSS 🧠
(читається “спесіфісіті”)

1. Обговорюєте конвенцію на проєкті
2. Слідуєте їй
3. Стилі будуть належним чином застосовані на елементах 🏆

Хороший приклад зробив TailwindCSS розділивши свої класи на 3 ієрархічні шари:
base <- components <- utilities

Таким чином що стилі ютілів оверрайдять стилі компонентів які сильніші за стилі бази.

А для наглядного розуміння як рахується специфічність є гарненька онлайн тулза - https://specificity.keegan.st/

Знаєте що джавістам важко зрозуміти?

Різницю null vs undefined 🙂

Тому що в джаві не існує такого типу undefined, як в джаваскрипті.

А в реальності відсутній філд та філд зі значенням null - це різні речі.

Різницю можна легко побачити в JSON - саме тим форматом яким фронтенд і спілкується з джавою.

Тут важливі 2 моменти:
1️⃣ Треба правильно описувати інтерфейси, щоб знати можливі типи філдів і правильно їх використовувати.

2️⃣ null філд має свій ефект, особливо на прикладі PATCH ендпоінтів.
Відсутні філди в патчі не змінять ніяк філди.
А null філд зробить видалення філда (повʼязаної ентіті через цей філд).

Тому просіть джавістів (і всіх інших бекендщиків) хай правильно описують в свагері де опшинал філд а де може бути null 😉

На стековерфлоу є кілька робочих варіантів як це зробити.

#coding #json

Be a never nester.

Хороше відео з прикладом рефакторинга щоб уникати глибоко вкладений (нестед) код.

Нестінг:
- сильно погіршує читабельність коду
- сприяє появі багів
- ускладнює розширення коду новими умовами та поведінками (ще раз підсилюючи попередній пункт про баги)

Два методи боротьби з цим:
- extraction
- inversion (aka early return)

І просте правило - максимальний рівень нестінга 3️⃣.
Все що глибше - треба рефакторити.

Давно практикую ці підходи і вам рекомендую.

https://youtu.be/CFRhGnuXG-4?si=prDddpvwEA-Kkc9f

Суперпроста функція хешування на прикладі 3Д координати (object with x, y, z properties).

Суть алгоритму проста використовуючи прості числа (prime numbers):
- беремо кожен філд обʼєкта (3Д координати в даному кейсі)
- множимо на окреме просте число
- сумуємо результат щоб отримати єдине число

В кінці ще робиться модуль (sum % maxAmountOfCoordinates) щоб хеш завжди був в межах якогось діапазону (максимальній кількості 3Д координат в програмі, наприклад).

Щоб зрозуміти алгоритм треба зрозуміти такі поїнти:
- хеш повинен вертати єдине ціле число (інтеджер) тому робиться сума всіх компонентів в одне число
- результат має бути близьким до унікального, щоб уникати колізії (однакові хеші різних значень)
- щоб уникати колізії треба уникати паттерни, повторення
- повторення виникають коли починаємо розкладати числа на множники
- наприклад 2 є множником для всіх чисел що закінчуються на 0, 2, 4, 6, 8
- відповідно треба вибирати числа в яких мінімум множників

Тут у гру вступають прості числа - бо діляться без остачі лише на 1 та на себе 💡

Вибираємо достатньо великі прості числа і подальші операції з ними теж будуть мати мінімум колізій.

p.s. базовано на коді який симулює фізику рідин (ютюб відео)