Як писати чистіший CSS: дюжина порад від банальних до неочевидних

CSS як технологія справді трохи роздутий, але не такий хаотичний і складний, як його іноді описують. Просто потрібно прагнути лаконічності – у тому числі, за допомогою описаних підходів. Ненависть до CSS цілком можна зрозуміти – врешті-решт технологія розвивається вже понад 25 років. Нові браузери, що з’являються на ринку, реалізують підтримку CSS по-різному, що призводить до того, що…

Стиснення css класів. Як зробити веб ще швидше. Next.js

Довгі роки точилися суперечки, як краще називати класи – по бему, за цілями, за компонентами або як завгодно, але з додаванням хеша. І це дійсно важливе питання, який спосіб буде комфортний у розробці великого проекту, що розвивається. Але що ці способи означають для користувача, чи потрібні йому ці класи і як вони пов’язані з його досвідом? Часом,…

Оптимізуйте довгі завдання у JavaScript

Вам казали «не блокуйте основний потік» та «розбивайте свої довгі завдання», але що означає робити ці речі? Якщо ви читаєте багато матеріалів про веб-продуктивності, то поради щодо забезпечення швидкості ваших додатків JavaScript, як правило, включають деякі з цих цікавих фактів: “Не блокуйте основний потік”. “Розбивайте свої довгі завдання”. Що це все означає? Використання  меншої кількості  JavaScript — це…

Створення веб-додатків з використанням мікрофронтендів та Module Federation

У цій статті ми розберемо процес розробки веб-застосунку на основі підходу мікрофронтендів з використанням технології Module Federation. Мікрофронтенди – це підхід у веб-розробці, при якому фронтенд поділяється на безліч дрібних, автономних елементів. Ці частини розробляються різними командами, мабуть, з використанням різних технологій, але в результаті вони спільно функціонують як єдине ціле. Такий підхід дозволяє вирішувати проблеми, пов’язані з…

Чому typeof null === «object» у сучасному прочитанні

Завдання унарного оператора  typeof  рядкове подання типу операнда. Інакше кажучи,  typeof 1 поверне рядок  “number”, а  typeof “” поверне  “string”. Усі можливі значення типів, що повертаються оператором типувикладені в специфікації  ECMA-262 – 13.5.1 . За задумом, що повертається оператором, значення має відповідати прийнятим у тій же специфікації типів даних. Однак, при детальному розгляді, можна помітити, що  typeof null повинен повертати  “object”, незважаючи на те, що  Null це цілком собі самостійний тип, він описаний в…

As const у Typescript

У розробці часто виникають ситуації, коли точність типів та небажання допускати неясності в коді стають першорядними завданнями. У таких випадках розробникам доводиться шукати інструменти, що надають максимальну ясність та строгість у визначенні даних. Один із таких інструментів — ключове слово as const. У цій статті ми розглянемо, як as constможе підвищити рівень суворості та передбачуваності, а також розглянемо практичні приклади…

Найкращі пошукові пакети для JavaScript

Попит на функції пошуку зростає, і багато розробників намагаються впровадити їх у свої програми. Однак створення таких додатків з нуля – складне та трудомістке завдання. На щастя, існує безліч бібліотек з відкритим вихідним кодом, які дозволяють звільнити розробників від цього тягаря. У цьому посібнику читач знайде перелік найкращих пошукових пакетів для JavaScript. У статті буде проведено огляд…

Функція TypeScript 5.3, про яку вам не розповіли

20 листопада 2023 року команда TypeScript випустила TS 5.3. Одна з найважливіших змін у TypeScript 5.3 не була згадана у примітках до релізу. Швидкий приклад коду // Це було б помилкою у 5.2, але дозволено у 5.3! const array = [“a”, “b”, “c”] as const satisfies string[]; const returnWhatIPassIn = <const T extends any[]>(t: T)…

Використання Content-Security-Policy разом із React & Emotion

Content-Security-Policy(CSP) – це HTTP заголовок, який покращує безпеку веб-застосунків за рахунок заборони небезпечних дій, таких як завантаження та відправка даних на довільні домени, використання eval, inline-скриптів і т.д. У цій статті буде зроблено фокус на директиві style-srcта її використання разом із CSS-in-JS бібліотекою emotion. Коротко про CSP та style-src Content-Security-Policyзаголовок повинен бути виставлений у відповіді разом із завантажуваною веб-сторінкою…

Infinite scroll + Virtualization на прикладі ReactJS+ RTK Query

На сьогоднішній день будь-яке підприємство, чи це магазин будівельних товарів чи компанія з надання послуг у сфері бізнесу, всі вони прагнуть «викласти» свої товари та послуги в інтернет. Це і зрозуміло – ми живемо у вік бурхливих технологій і доступ в інтернет має більше 65% населення світу (близько 5.3 млрд. осіб), а до 2025 року це…