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

Як я себе відчуваю, коли розумію, що буду оновлювати версії бібліотеки…

Трохи технічних деталей про проєкт

• монорепозиторій з оркестратором nx.
  Тип монорепи — Package-Based Repository;
• пакетний менеджер pnpm разом із функціональністю pnpm workspaces;
• структура стандартна: /apps - містить усі застосунки, /packages - усі пакети;
• усі застосунки на Nuxt 3;
• усі пакети на vue 3 або чистому typescript, білдимо все на vite;
• на поточний момент маємо 4 — застосунки, 22

](https://www.pexels.com/photo/selective-focus-photo-of-man-using-laptop-1438081/)

Після проходження курсу, ви часто можете запитувати себе: "Чи варто мені переробити проекти з курсу, щоб впевнитися, що я зрозумів кожну концепцію?"

Хоча перегляд проектів курсу дійсно може зміцнити ваше розуміння, спробуйте створити різні проекти з нуля, що допоможе вам вийти зі зони комфорту.

Робота над різними проектами дозволить вам зіткнутися з широким спектром проблем і сценаріїв. Така різноманітність не лише загострить ваші навички вирішення проблем, а й розширить ваше розуміння JavaScript.

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

Коли ви працюєте над … Читати далі

Коли ви використовуєте Devise для аутентифікації в Rails API з версіонуванням, ви можете зіткнутися з наступною помилкою, особливо після того, як ви додали версіонування до вашого API, використовуючи кастомний контролер:

AbstractController::ActionNotFound (Не вдалося знайти Devise мапінг для шляху "/api/v1/users/[email protected]".  
Це може статися з двох причин:  

1) Ви забули обгорнути ваш маршрут у блок scope. Наприклад:  
devise_scope :user do  
 get "/some/route" => "some_devise_controller"  
end  
2) Ви тестуєте контролер Devise, обминаючи роутер.  
У такому разі ви можете явно вказати Devise, який мапінг використовувати:  
@request.env["devise.mapping"] = Devise.mappings[:user]  
):

Ця проблема виникає, тому що Devise не може знайти правильний мапінг для запитуваного маршруту, особливо … Читати далі

Під час своїх відповідних пошуків я помітив, що навіть у 2024 році чимало людей все ще рекомендують Flask як фреймворк для веб-розробки на Python. Однак на мою думку, “Flask виходить на другий план, а FastAPI — це майбутнє”. Ось чому я пишу цю статтю. Запрошую всіх долучитися до обговорення та запропонувати контраргументи.

Flask проти FastAPI

Flask займає значне місце в серцях розробників Python. Якщо ви веб-розробник, я впевнений, що ви, ймовірно, використовували Flask, але, можливо, ніколи не стикалися з FastAPI.

Ось два факти:

1. У нових значущих проектах на Python, пов'язаних з веб-розробкою, за останні один-два роки майже всі проекти, що

Фото Mr. Bochelly на Unsplash

Flask — це дуже легкий фреймворк для Python, який дозволяє створювати веб-додатки за кілька хвилин. За кілька рядків коду ви можете створити веб-додаток.

Встановлення Flask

Відкрийте термінал або командний рядок і напишіть команду

pip install Flask

Після цього Flask буде встановлено на вашій системі

Налаштування Flask

Створіть файл app.py і напишіть мінімальний код для запуску веб-сервера Flask на вашій системі.

from flask import Flask  

app = Flask(__name__)  

@app.route("/")  
def hello_world():  
 return "
Hello, World!
" ```  

Тепер розберемо мінімальний код, який ми написали в app.py:

1. Спочатку ми імпортували клас `Flask`. Екземпляр цього класу буде 

https://www.fullstackmaster.io/2024/12/17/guia-completo-criacao-importacao-e-exportacao-de-web-components-com-angular-17/

Якщо ви занурюєтеся в веб-розробку і хочете створювати повторно використовувані компоненти, які будуть сумісні з будь-яким додатком, не можна ігнорувати Web Components. Цей посібник — це покроковий практичний гід по створенню, імпорту та експорт Web Components за допомогою Angular 17, останньої версії цього потужного фреймворку.

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

Angular, React, and Vue technologies. Components є ключем до модульного підходу, незалежного від фреймворків.

Що таке, використовуються вони в проектах на Angular чи в інших технологіях, таких як React або поведінку.

```но використовувати … Читати далі

Як зазначено в заголовку, ця стаття присвячена організації структури папок вашого додатка на Vue. Але чи це важливо? І оскільки Vue вже надає стандартну структуру папок, чому ж ми повинні заглиблюватися в це? Це цілком обґрунтовані питання.

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

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

Вступ

Мені пощастило спробувати Vue, бібліотеку, про яку я останнім часом багато чув.

Проект уже був налаштований, тож я взяв участь у проекті, розробленому з Nuxt (v3, я кажу це, тому що дивно, що Nuxt.js використовують для позначення v2, а Nuxt – для v3), і сьогодні я поділюсь своїми скромними враженнями як розробник React/Next.js.

Мені пощастило спробувати багато різних технологій останнім часом, включаючи деякі, якими я користуюсь вже давно, ось короткий список:
React, Next.js, Gulp.js, Astro, Remix, ASP.NET (я також не люблю це, коротка відповідь: не має сенсу використовувати це в маленьких проектах) і ще багато іншого.

Те, що мені

Фото від freestocks на Unsplash

Попередні вимоги

• Переконайтесь, що ви встановили версію Node.js 18.3+
• Вам потрібно створити додаток Vue, слідуючи цьому посібнику.

Вступ

Для того, щоб легко отримувати та оновлювати значення поля введення, використовуйте двостороннє зв'язування даних. Це означає, що стан і поле введення залишаються синхронізованими:

1. Якщо ви змінюєте поле введення, стан оновлюється.
   2.

Якщо ви оновлюєте стан, поле введення змінюється автоматично.

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

Що таке одностороннє зв'язування даних?

Перед тим, як вивчити двостороннє зв'язування даних, вам потрібно зрозуміти, що таке одностороннє зв'язування даних.

JavaScript до HTML

Коли відбувається оновлення в JavaScript, HTML… Читати далі

При роботі з JavaScript одним із найпоширеніших джерел плутанини є поведінка ключового слова this. Це розрізнення стає ще складнішим, коли порівнюються стрілкові функції (arrow functions) та звичайні функції (regular functions). Розуміння того, як працює this у цих двох типах функцій, є важливим для написання чистого та безпомилкового коду.

Давайте заглибимося в нюанси роботи this, розглянемо приклади та з’ясуємо, як ця поведінка впливає на ваші практики кодування.

Головна різниця: Лексичне vs. Динамічне зв’язування

Стрілкові функції лексично прив'язують this

Стрілкові функції не мають власного this. Замість цього вони успадковують this з навколишнього лексичного контексту — місця, де була визначена … Читати далі