Місце зберігання даних: Local Storage проти Session Storage

pic

Уявіть, що ви працюєте над веб-додатком і вам потрібно зберегти якісь дані, наприклад, ім’я користувача, щоб використовувати їх пізніше. Зазвичай, якщо ви створите змінну в консолі браузера і оновите сторінку, ця змінна зникне — вона тимчасова. Це може бути неприємно, якщо вам потрібно, щоб ці дані зберігалися після перезавантаження сторінки. Ось тут на допомогу приходить Local Storage!

Що таке Local Storage?

Local Storage — це вбудована функція сучасних веб-браузерів, яка дозволяє зберігати пари ключ-значення безпосередньо в браузері. Це ніби маленька приватна база даних для вашого додатка, що знаходиться в браузері користувача. Найкраща частина? Дані, які ми зберігаємо в Local … Читати далі

Посібник зі структурування папок вашого проєкту

pic

Створення ефективної структури папок може бути складним завданням, але добре організована структура робить ваш код легшим для підтримки, масштабування та приємнішою для роботи. Цей посібник натхненний детальним поясненням з відео про оптимізацію структур папок для різних додатків, таких як веб-розробка, розробка ігор чи десктопних додатків. Ось як можна організувати ваш проект для максимальної ефективності та підтримуваності.

Загальні принципи

  1. Розподіл за функціональними частинами (Features): Організуйте свою кодову базу так, щоб кожна функціональна частина вашого додатка була ізольована в окремій папці.
  2. Глобальні та спільні ресурси: Окремо зберігайте спільні або глобальні ресурси в окремих папках, щоб уникнути взаємозалежностей між функціональними частинами.
Читати далі

Казки про SOLID код для шестирічного малюка

Ця моя перша стаття — це як нова звичка, яку я завів. Коли я йду в магазин, я завжди беру щось нове, щось, що раніше не пробував, просто щоб побачити, що з цього вийде. Чи пробував ти коли-небудь смачний зміїний фрукт чи броколіні?

Коротка історія на довгу. Це не коротка стаття. Мушу тебе розчарувати.

Але що це є, так це довга версія чогось, що дасть тобі глибше розуміння. Тому що я вірю, що для справжнього розуміння потрібно поглянути з різних перспектив на глибокому і детальному рівні. Справа в тому, що я шукав на цьому так званому інтернеті хороші приклади … Читати далі

Змінні середовища в NestJS

pic

Змінні середовища (Environment variables) є важливою частиною сучасної розробки додатків, дозволяючи вам керувати налаштуваннями конфігурації в різних середовищах без необхідності змінювати код. У цьому посібнику я покажу, як ефективно використовувати змінні середовища в додатках на NestJS, від базової налаштування до більш складних шаблонів використання.

Початок роботи зі змінними середовища

Спочатку налаштуємо наш проект із необхідними залежностями.
Ми використаємо популярний пакет @nestjs/config, який дозволяє працювати із змінними середовища в додатках на NestJS.

npm install @nestjs/config  
# або за допомогою yarn  
yarn add @nestjs/config

Базова настройка

Створіть файл .env у корені вашого проекту:

DATABASE\_USER=myuser  
DATABASE\_PASSWORD=mypassword  
API\_KEY=your\_api\_key  
PORT=3000

Не забудьте додати .envЧитати далі

Як синхронізувати дані між кількома вкладками браузера за допомогою JavaScript

pic

Синхронізація даних між вкладками

Вступ

Коли ви робите покупки онлайн, у вас може бути відкрито кілька вкладок у браузері. Уявіть, що ви додаєте товар у кошик в одній вкладці і хочете, щоб кошик автоматично оновлювався у всіх інших відкритих вкладках. Це поширена вимога в сучасних веб-додатках, зокрема на платформах для електронної комерції. У цій статті ми розглянемо, як синхронізувати дії між кількома вкладками за допомогою JavaScript.

Виклик: Як зберігати вкладки синхронізованими

Уявімо, що ви керуєте інтернет-магазином. Ви додаєте товар у кошик в одній вкладці, і тепер хочете, щоб цей товар з'явився в усіх інших вкладках, які ви відкрили на тому … Читати далі

“Використання потужності Proxy в JavaScript для просунутого керування даними”


Вступ

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


Що таке Proxy в JavaScript?

Proxy в JavaScript — це об'єкт, який обгортає інший об'єкт або функцію, перехоплюючи його операції. Можна уявити це як проміжне програмне забезпечення (middleware), яке дозволяє вам контролювати, як доступаються, встановлюються або … Читати далі

JSON (JavaScript Object Notation) та JSONP (JSON з доповненням) — нотатки

Веб-розробка: Технології передачі даних

  1. Основні концепції
  • JSON: Легка формат обміну даними, який зазвичай використовується для передачі даних між сервером і клієнтом. Він використовує текстовий формат, який легко читати і писати, і є базованим на синтаксисі об'єктів JavaScript, що робить його широко використовуваним у різних мовах програмування та платформах.
  • JSONP: Спеціальна техніка, яка використовує
    Безпека

  • JSON: Оскільки дані повертаються без необхідності виконання JavaScript, безпека порівняно вища, особливо коли мова йде про обробку чутливих даних.

  • JSONP: Оскільки передача здійснюється через `

Перекладено з: [JSON(JavaScript Object Notation)& JSONP(JSON with Padding)]筆記Читати далі

Розуміння обробки помилок у JavaScript

Обробка помилок є важливим аспектом написання надійного та стабільного JavaScript-коду. Помилки можуть порушити нормальний потік програми, часто призводячи до неприємного досвіду для користувача. Розуміння того, як ефективно управляти цими помилками, дозволяє вашій програмі спокійно відновлюватися після непередбачених ситуацій.

Ця стаття розглядає обробку помилок у JavaScript, включаючи об'єкти помилок, поширені типи помилок та використання блоків try...catch і finally.

Що таке помилки в JavaScript?

Помилка в JavaScript — це об'єкт, створений для представлення проблеми, яка виникає під час виконання програми. Помилки зазвичай виникають у таких ситуаціях, як обробка вводу користувача, встановлення з'єднань чи виконання операцій з неіснуючими об'єктами. Ці проблеми можуть … Читати далі

Від складних релізів до демонстрацій у продукції: впровадження Feature Flags з Growthbook.

pic

Візуально привабливе зображення, що представляє «Від складних релізів до демонстрацій у продукції: впровадження Feature Flags з Growthbook».

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

І все це при випуску одного проекту, а тепер уявіть, як це виглядає при випуску кількох проектів в одному кодовому базі, всі на самому кінці кварталу; після … Читати далі

Оволодіння типами даних Ruby: Повний посібник з прикладами коду

Ruby — це динамічна, об'єктно-орієнтована мова програмування, яка надає різні вбудовані типи даних для ефективної обробки різних видів даних. Розуміння цих типів даних є ключовим для написання чистого та ефективного коду на Ruby. У цьому блозі ми розглянемо основні типи даних Ruby, їх використання та наочні приклади коду, щоб поглибити ваше розуміння.

1. Числа

Ruby підтримує два основних типи чисел:

  • Ціле число (Integer): Цілі числа (наприклад, 42, -7)
  • Число з плаваючою комою (Float): Десяткові числа (наприклад, 3.14, -0.001)

Приклади коду:

# Приклад з цілими числами  
x = 10  
puts x.class # Виведення: Integer
# 
Читати далі