Authy by Twilio - nice 👍👍

Автентикатор гугла - лажа 💩

Колись ще на початку TOTP (Time-based one-time password) ери юзав автентикатор гугла.

Крутий підхід, а реалізація гугла відстій.
Ні дизайну ні функціональності. 🔴
Потім як втратив доступ до девайса - ледь відновив доступ до сервісів, шукав бекап коди, купу часу витратив 😫😨

Вже кілька років як користуюсь лише Authy:
- сінк акаунта через клауд
- приємний, продуманий дизайн

При зміні смартфона це мастхев, тому рекомендація однозначна.

#software

Юзай табулярні шрифти 1️⃣2️⃣3️⃣4️⃣
Проси дизайнера хай малює шрифтами з підтримкою табуляції:
- щоб лейаут був рівним ✅
- щоб не скакав від різниці ширини “11:11” та “22:22” ✅

Особливо коли мова про таймери, живі тікери, каунтери тощо.

Tailwind має ютілу для цього - tabular-nums

❔ Що робити коли шрифт не підтримує табуляцію?

В таких випадках я роблю симуляцію табуляції - рендерю кожен символ стрінги в окремому div елементі з фіксованою шириною 🧠

#ux

🤩Заціни яку шрифтову красу зробили українці з MacPaw - https://fixel.macpaw.com

- підтримка кирилиці 💪🇺🇦
- варіативні розміри ✅
- табулярні числа ✨
- та інші круті штуки показані на лендінгу 👍

Про табулярні числа в шрифті - дивись два дописи назад 👆

Голий JavaScript не вміє правильно округляти цифри після коми (float numbers) 😓
Нативний метод .toFixed працює баговано 🐞
Це повʼязано з Round-off error яка фікситься через Number.EPSILON корекцію 🤓

Саме лаконічне рішення: ✅


const round = (num = 0, fractions = 0) => {
const k = Math.pow(10, fractions);
const n = (num * k) * (1 + Number.EPSILON);
return Math.round(n) / k;
}


Для складних і точних операцій над числами з плаваючою комою потрібно юзати лібу наприклад decimal.js

TypeScript playground for demo

#coding

31 лютого це валідна дата для JavaScript 😁

Вона буде сконвертована в 3 березня (або друге, залежить від року).

Дати - хитра тема в джс, для роботи з ними варто юзати лібу.

date-fns - ТОПова ліба для роботи з датами в JS.
- Pure functions підхід 🤌💯
- Купа методів і готових рішень в інеті ✅
- Форматування дати по темплейту 💅

😎 satisfies - ключове слово TypeScript 4.9.
❤️ Моє улюблене від сьогодні, давно чекав.

Літерал типи інферяться зі збереженням відповідності базовим типам!

Кейси що одразу спадають на думку:
- конфіги роутинга
- конфіги API реквестів
- інші обʼєкти літеральні проперті яких далі трансформуються через mapped types

Більше деталей на офіційних реліз нотатках версії 4.9

Пора рефакторити проєкти на новий манер 💻

#coding

🐞 CSS vh юніт багований для мобілки.

Кейс - фулскрін діалог (модалка) абсолютно чи фіксед позиціонований.

Якщо вказати висоту діалога 100vh на десктопі - все працює класно як і очікували. 😊

Але на мобілці (e.g. Chrome iOS) висота сьорчбара і нижніх кнопок навігації браузера не враховані 🤦‍♂️
100vh рендериться більше ніж доступно місця, не влізає в один екран і тому контент перекривається:
- юзери сумують, не бачать весь контент 🙈
- не можуть закрити діалог чи клікнути кнопку (бо не видно одразу) 😭

✅ Рішення = “100%” (h-full) instead of “100vh” (h-screen)

Tailwind playground demo

#coding

😎 useHandler - ідеальний useCallback бо всі залежності завжди актуальні.

Ходили чутки що такий хук буде частиною реакта 18 версії, але досі нема.

А я вже більше року користуюсь і кайфую: 😊
- дуже зручно НЕ прописувати руками залежності 👍
- зручна конвенція суфікса “Handler” - clickHandler, mousedownHandler, submitHandler etc 👍
- нема зайвих ререндерів бо референс завжди однаковий а боді функції завжди актуальне, з усіма актуальними залежностями 👍

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

TypeScript playground demo

#coding #react

Таргеріанці, перша 100я пройдена! 🎉

Ви суууупер! ⭐

🙏 Дякую усім хто:
- Підписався ✅
- Ставить реакції ❤️
- Шарить друзям 👨‍💻 💻 💻 💻

Це дуже приємно! Це надихає, мотивує і стверджує нашу цінність.

Найкрутіше попереду 🔝 💪 😎 🤗

#milestone

Пʼятниця - пора комплітити спринт 😁
Дожимайте задачі, гайс ✌️

⭐ IMDb 8.0 🎬
Гра в імітацію (2014)

Історія на реальних подіях.
Алан Тюрінг створив універсальну машину для розшифровки секретного коду Енігми.
Це уможливило перемогу над нацистами в Другій світовій війні 🕊.

Бенедикт Камбербетч в головній ролі показує як це все було.

Про Алана Тюрінга:
- автор універсальної Машини Тюринга 🤖
- автор тесту Тюрінга 👨 or 🤖
- Повнота за Тюрінгом 💯
- ці та інші його праці зробили великий вклад в розвиток штучного інтелекту 🧠

#movietime

nandgame.com - інтерактивний симулятор хардвера компʼютера.
Алан Тюрінг би зацінив 👆.

Я пройшов більшість гри та дізнався: 😮
- Як фізично зберігається біт інформації
- Як одиниці та нулі формують регістри памʼяті
- Як процесору вдається синхронізувати мільярди імпульсів по всій платі

Дивовижно як щось неймовірно складне створюється з примітивних компонентів:
- потужний компʼютер з тринзисторів, NAND компонентів
- людина і всесвіт з атомів
- крута веб апка з компонентів реакта 🔝

Як софтвер девелопер я задався такими питаннями:
- ❔ Як я можу написати таку гру на реакті?
- ❔ Як анімувати SVG?
- ❓ Як автоматично прокласти оптимальний маршрут конекшенів щоб візуально все було читабельно?
- ❓ Які ліби краще використати?

Це допомагає скілапитись, дає хороші ідеї при розробці фіч проєктів.

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

🏗 buildSortParam - ютіла яка генерує правильну стрінгу сортування для запитів на API.

Не раз помічав баги коли список айтемів рендериться хаотично. Іноді це треба, але зазвичай це баг відсутнього сортінга в реквесті.
Причини цим багам дві:
- Або взагалі не думали про те в якому порядку вивести результати бекенда
- Або хибно написана стрінга сорта

Ця ютіла вирішує повʼязані баги наступним чином:
- Type safe - компілятор крашне коли будуть опечатки чи хибні назви філдів ✅
- Intellisense - твоя IDE підскаже які пропси доступні у ентіті ✅
- Легка конвенція-паттерн для копіпаста 👍
- Змушує думати про те який філд треба заюзати для сортінга 🧠

А мій бекенд вказує дефолтний сорт на своїй стороні, мені це не треба 😜

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

TypeScript playground demo - тут код імплементації ютіли з відповідними дженеріками.

#coding

🔝 volta.sh - ТОПова тулза для запуску різних версій ноди та пекедж менеджерів.

Один раз в пекедж джсоні сконфігурив - і далі автоматично запускається потрібна версія 💪

Модернові проєкти на лейтест стабільній 18 ноді 🔥
Пет проєкти на бета версіях 19+ 😮
Легасі на 14 ітд 😒

Колись побачив що цю тулзу юзає офіційно TypeScript - від тоді вольта це ванлав ❤️

#software

⭕ Ерора вказана в хибному місці сорців - ознака зациклених залежностей aka infinite dependency loop.

→ консоль показує ерору на пустий рядок
→ або пише назви токенів що взагалі відсутні у файлі

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

✅ Рішення - перевір циклічні залежності через dpdm пакет.

Я в package.json прописую команду для зручності:

"deps:check": "npx dpdm src --warning=false --tree=false"

#coding

Авто-імпорти крута штука, але перевіряй що і звідки заімпортилось.

Останній проблемний кейс - ідешка заімпортила сорс файл 🔤🔤🔤🔤 з ліби замість того щоб заімпортити лише🔤🔤🔤🔤🔤 тайпінги з dist папки.

Це призвело до того що білд крашився - TypeScript компілятор перевіряв типізацію самої ліби і там фейлився 🤦‍♂️ (в дев режимі білдить ок, тому не помітно одразу).

tsconfig.json з конфігою “skipLibCheck: true” - не допомагає в цьому кейсі. Бо заімпортився “.tsx” файл який мусить пройти компіляцію і всі перевірки типів.

Тобто правильний імпорт на скріншоті буде:

import { UseLoadScriptOptions } from '@react-google-maps/api/dist/useLoadScript';

Годину витратив на пошуки проблеми ⏳
Буває :)
Довіряй але перевіряй що автоматично вписує твоя улюблена IDE 😉

#coding #typenoscript

256+, летимо ✈️ 🚀 🚀

Тепер нас не опишеш одним байтом - ми більше 😎

Дякую усім вам 🤗
Найкрутіше попереду!
❤️ ❤️ ✅

#milestone

🐑 🐑 structuredClone - нативний метод джс, який вміє копіювати майже все: ✅

→ буфери
→ типізовані масиви
→ глибоко вкладені обʼєкти
→ мапи і сети
→ зациклені обʼєкти (тут звичайний JSON.stringify взагалі крашиться)

І звичайні примітиви, звісно ✅

Що не вміє клонувати це: 🙅‍♂️🙅‍♂️
→ функції

e.g. () => 5;

→ ДОМ елементи

e.g. document.createElement(‘div’);

→ днк овець (так, емоджі вівці це референс на успіхи генної інженерії)

❕ Хей, та викинь ти нарешті той lodash з проєкта!
Є сучасні нативні методи та значно кращі ліби наприклад ramdajs

p.s. цей метод працює в двигуні браузера, а для ноди є аналогічне Serialization API

TypeScript playground demo

#coding