Статті для розробників

Пояснення форматів кодування, роботи з JSON та інших тем, корисних розробникам, з посиланнями на відповідні онлайн-інструменти tulzy.

Кодування

Base64: навіщо потрібне кодування і як воно працює

Як Base64 перетворює бінарні дані на текст ASCII і де це реально потрібно.

Base32: чим відрізняється від Base64 і коли зручніший

Регістронезалежний алфавіт Base32 і сценарії, де він зручніший за Base64.

URL Encode/Decode: percent-encoding у посиланнях

Як спецсимволи в адресних рядках і query-параметрах перетворюються на %XX-послідовності.

HTML Entities: як безпечно виводити спецсимволи на сторінці

Чому символи < > & потрібно екранувати і як це запобігає поламаній розмітці.

JWT: структура токена та що означає "декодувати" JWT

Header, payload і signature JWT-токена та чому декодування — це не те саме, що перевірка підпису.

Unicode Escape: що означають послідовності \uXXXX

Звідки в JSON і JS-рядках беруться послідовності виду \u0041 і що вони означають.

ROT13 і шифр Цезаря: проста заміна символів

Чому зсув на 13 літер робить ROT13 симетричним і навіщо його взагалі використовують сьогодні.

Punycode: як домени з кирилицею працюють у DNS

Як домен на кшталт «приклад.укр» перетворюється на ASCII-запис із префіксом xn--.

Азбука Морзе: як текст перетворюється на крапки й тире

Принцип кодування літер крапками й тире та де азбука Морзе застосовується зараз.

Data URI: коли вбудовувати зображення прямо в код

Як data:-URI вбудовує вміст файлу прямо в HTML чи CSS і коли це виправдано.

Gzip + Base64: стиснення даних для передачі текстом

Навіщо стиснені бінарні дані ще й кодують у Base64 перед тим, як покласти в текстове поле.

XML Entities: екранування символів у XML-документах

П’ять обов’язкових XML-entity, без яких документ ламається при парсингу.

JSON

JSON Formatter: форматування, мінімізація та валідація

Форматування для читабельності, мінімізація для розміру, валідація для коректності — три різні задачі з JSON.

JSONPath: як шукати дані у JSON без ручного парсингу

Як JSONPath дозволяє дістати потрібні значення з великого JSON одним виразом замість ручного обходу.

JSON Diff: чим структурне порівняння відрізняється від текстового

Чому порядок ключів не повинен впливати на порівняння двох JSON-документів.

JSON Schema: як описати й перевірити структуру JSON

Як JSON Schema дозволяє автоматично перевірити, чи відповідають дані очікуваному контракту.

JSON Flatten: перетворення вкладеної структури у плаский список

Як глибоко вкладений JSON перетворюється на плаский список ключів виду user.address.city.

JSON Sort Keys: навіщо сортувати ключі об’єкта

Чому порядок ключів у JSON не регламентований, але сортування все одно буває корисним.

JSON Repair: чому JSON ламається і як це виправити

Типові причини «поламаного» JSON і що автоматичний ремонт може, а що не може виправити.

Mock JSON Generator: навіщо потрібні фейкові дані

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

JSON ↔ YAML/CSV/XML/TOML: коли і навіщо конвертувати

Які дані губляться при конвертації JSON в CSV і чому YAML та TOML популярні для конфігів.

Текст

Case Converter: навіщо потрібні різні стилі написання

Чому в одному проєкті змінні пишуть camelCase, а файли — kebab-case, і звідки взялись ці правила.

Text Diff: як алгоритми знаходять різницю між текстами

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

Регулярні вирази: основний синтаксис і типові патерни

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

Сортування та видалення дублікатів рядків: навіщо це потрібно

Чому числове сортування «10» перед «9» — це помилка, і як цього уникнути.

String Escape: чому той самий текст треба екранувати по-різному

Чому той самий символ лапок екранується по-різному в JS-рядку, JSON і shell-команді.

CRLF проти LF: чому символи кінця рядка досі мають значення

Чому файл, написаний у Windows, може показувати «змінений увесь файл» у git на Linux.

Підрахунок символів і слів: чому це не завжди тривіально

Чому емодзі чи символи з діакритикою можуть рахуватись як кілька символів одразу.

Lorem Ipsum: звідки взявся текст-заповнювач і навіщо він потрібен

Чому дизайнери навмисно використовують «безглуздий» текст замість реального контенту в макетах.

Slugify: як перетворити довільний текст на URL-адресу

Як заголовок «Привіт, Світ!» перетворюється на URL-сумісний рядок вигляду pryvit-svit.

Markdown: чому простий текстовий синтаксис переміг складні редактори

Чому розробники обирають писати документацію в Markdown, а не в форматованому текстовому редакторі.

Пробіли та невидимі символи: прихована причина дивних багів

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

Text Reverse: чому «перевернути текст» складніше, ніж здається

Чому наївний реверс рядка може перетворити емодзі на непридатні для показу байти.

Частотний аналіз тексту: навіщо рахувати повторення слів

Як частота літер у зашифрованому тексті допомагає зламати найпростіші шифри підстановки.

Хеші/крипто

Hash Generator: чим MD5, SHA-1 і SHA-256 відрізняються одна від одної

Чому MD5 досі використовують для перевірки цілісності файлів, але не для паролів.

Checksum Verifier: як перевірити, що файл не пошкоджено

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

HMAC: чим хеш з ключем відрізняється від звичайного хешу

Чому звичайний SHA-256 не захищає від підробки повідомлення, а HMAC — захищає.

Bcrypt: чому паролі хешують повільно, а не швидко

Чому швидкий SHA-256 — погана ідея для паролів, а повільний bcrypt — правильна.

UUID: як генерують ідентифікатори, що майже ніколи не повторюються

Чому UUID v4 можна генерувати незалежно на мільйонах машин без ризику колізій.

Генератор паролів: що насправді робить пароль стійким

Чому довгий пароль зі словника надійніший за короткий з символами й цифрами.

AES: як працює симетричне шифрування

Чому той самий ключ шифрує і розшифровує дані в AES, і чим це відрізняється від асиметричного шифрування.

Argon2: чому цей алгоритм переміг конкурс на хешування паролів

Чим Argon2 краще захищає від атак на відеокартах, ніж старіші алгоритми хешування паролів.

Scrypt: навіщо алгоритму потрібно багато пам'яті

Чому scrypt навмисно вимагає багато пам'яті, щоб ускладнити перебір на ASIC-пристроях.

TOTP: як працюють одноразові коди в застосунках-автентифікаторах

Чому код у Google Authenticator працює без інтернету і синхронізується із сервером лише за часом.

PBKDF2: найстаріший стандарт розтягування ключів

Чому рекомендована кількість ітерацій PBKDF2 зростає з кожним роком.

X.509: що всередині SSL-сертифіката

Що саме браузер перевіряє в сертифікаті сайту, перш ніж показати зелений замочок.

PGP: як працює шифрування з відкритим і приватним ключем

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

Час/числа

Unix-час: чому комп'ютери рахують час від 1970 року

Чому саме 1 січня 1970 року стало точкою відліку часу для більшості комп'ютерних систем.

Cron-вирази: як розшифрувати розклад запуску завдань

Як розшифрувати вираз на кшталт */15 * * * * і зрозуміти, коли саме запуститься завдання.

Системи числення: навіщо потрібні двійкова, вісімкова й шістнадцяткова

Чому колір #FF5733 у CSS записаний шістнадцятковими цифрами, а не десятковими.

Побітові операції: як AND, OR і XOR працюють на рівні бітів

Чим побітовий AND відрізняється від логічного, і навіщо взагалі оперувати окремими бітами числа.

Різниця між датами: чому підрахунок днів складніший, ніж здається

Чому наївне віднімання дат може дати неправильний результат через високосні роки.

Розрахунок віку: чому це не просте віднімання років

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

Часові пояси: чому UTC — це не те саме, що GMT

Чому UTC не змінюється двічі на рік, а час у Лондоні (GMT/BST) — змінюється.

Розрахунок тривалості: як правильно підсумовувати години, хвилини й секунди

Чому при додаванні хвилин і секунд потрібно "переносити" залишок у наступний розряд, як при десятковому додаванні.

ISO 8601 Duration: як записати тривалість у стандартному форматі

Чому запис PT1H30M означає «1 година 30 хвилин», а не «1 хвилина 30 годин».

Номер тижня: чому в різних країнах тижні рахують по-різному

Чому 1 січня іноді належить до 52-го чи 53-го тижня попереднього року за стандартом ISO 8601.

Римські цифри: як побудована система без нуля й розрядів

Чому IV означає 4, а не 6, і як правило віднімання працює в римських цифрах.

IEEE 754: чому 0.1 + 0.2 не дорівнює 0.3 у коді

Чому в майже кожній мові програмування 0.1 + 0.2 виводить 0.30000000000000004.

Число прописом: навіщо перетворювати цифри на слова

Чому в банківських документах суму пишуть і цифрами, і словами одночасно.

Мережа/HTTP

Розбір URL: з яких частин складається веб-адреса

Чому в URL є частина після символу # , яку сервер навіть не отримує.

Query String проти JSON: чому GET-параметри такі обмежені

Чому передати масив або вкладений об'єкт через query string URL не так просто, як через JSON.

User-Agent: чому цей рядок такий заплутаний

Чому Chrome, Safari та Edge всі містять у User-Agent слова "Mozilla" і "Safari" одночасно.

Basic Authentication: як найпростіший спосіб автентифікації працює в HTTP

Чому Basic Auth обов'язково потребує HTTPS, адже Base64 — це не шифрування, а лише кодування.

HTTP-заголовки: що приховано в кожному запиті й відповіді

Чому заголовок Content-Type визначає, як браузер інтерпретує тіло відповіді сервера.

Cookies: як невеликий шматок тексту зберігає стан сесії

Чому атрибут HttpOnly захищає cookie від крадіжки через шкідливий JavaScript-код.

CORS: чому браузер блокує "звичайні" запити до іншого домену

Чому помилка CORS виникає в браузері, а не на боці сервера, і хто насправді блокує запит.

Заголовки email: як простежити шлях листа від відправника до вас

Чому заголовки Received потрібно читати знизу вгору, щоб простежити шлях листа.

Веб-розробка

HEX, RGB, HSL: чому для кольору існує стільки записів

Чому дизайнери часто обирають HSL замість HEX, коли потрібно підібрати відтінок кольору вручну.

Мінімізація CSS: що саме видаляється з файлу і навіщо

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

Мінімізація JavaScript: різниця між мінімізацією та обфускацією

Чому мінімізований код все ще можна прочитати за бажання, а обфускований — ні.

Мінімізація HTML: чому пробіли в розмітці взагалі мають значення

Чому видалення пробілів у <pre> чи textarea може зламати вигляд сторінки, на відміну від інших місць.

CSS-градієнти: чим linear відрізняється від radial і conic

Чому conic-gradient підходить для кругових діаграм, а radial — для ефекту світлової плями.

Алгоритм Луна: як номер картки перевіряють на коректність

Чому валідний за алгоритмом Луна номер картки не означає, що така картка реально існує.

IBAN: як влаштований міжнародний номер банківського рахунку

Чому перші дві літери в IBAN — це код країни, а не частина номера рахунку.

QR-коди: як у квадраті з пікселів вміщується посилання

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

Штрих-коди: чим Code 128 відрізняється від EAN-13

Чому на товарах у магазинах майже завжди EAN-13, а не Code 128.

Placeholder-зображення: навіщо потрібні картинки-заглушки в розробці

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