Статті для розробників
Пояснення форматів кодування, роботи з 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 потрібно читати знизу вгору, щоб простежити шлях листа.
SEO
Meta-теги: які з них справді впливають на пошук і соцмережі
Чому пошукова система іноді ігнорує ваш meta description і сама генерує сніпет із тексту сторінки.
robots.txt: як пошукові боти вирішують, що можна сканувати
Чому заборона в robots.txt не приховує сторінку з пошукової видачі, якщо на неї є посилання.
Sitemap.xml: навіщо пошуковикам потрібна мапа сайту
Чому наявність сторінки в sitemap.xml не гарантує, що пошуковик її проіндексує.
Favicon: чому для однієї іконки потрібно стільки розмірів і форматів
Чому одного favicon.ico вже недостатньо для коректного відображення на всіх пристроях.
Генерація sitemap.xml: як автоматично зібрати мапу сайту
Чому пошуковики здебільшого ігнорують поле priority в sitemap.xml, попри те що воно є в специфікації.
Веб-розробка
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-зображення: навіщо потрібні картинки-заглушки в розробці
Чому верстальники навмисно вставляють сірі прямокутники замість реальних фотографій на етапі розробки.