Как структурировать папки в проекте?
Неважно, используешь ли ты React, Vue, TypeScript или JavaScript.
Существует множество стратегий и мнений по этому поводу. Я расскажу тебе о нескольких интересных вариантах! ↓
1. По типу
Это самый простой и распространенный способ. Подходит для небольших проектов.
Создаешь папку для каждого типа файлов: компоненты, страницы, сервисы, состояния, утилиты...
❌ Минус: со временем в некоторых папках может скопиться слишком много файлов, что затруднит навигацию.
2. По типу и функционалу
Здесь уже отражается логика приложения. Внутри каждой папки указывается, к какой части приложения она относится.
☑ Плюс: становится проще ориентироваться.
❌ Минус: возможное дублирование одних и тех же "фич" в разных папках.
3. Screaming Architecture (Кричащая архитектура)
Здесь подход меняется: вместо того, чтобы указывать, что используется, папки обозначают, что делает приложение.
Наверняка бывало, что ты открываешь проект, сразу видишь, что он на React, но совершенно не понимаешь, чем он занимается.
Идея в том, чтобы поменять этот подход: упростить разработку и сделать так, чтобы независимо от технологии папки сразу указывали на смысловые блоки проекта.
Какая структура лучше?🤔
Зависит от размера и длительности проекта.
Можно начать с первой стратегии и постепенно переходить на другую.
Также возможны гибридные варианты, сочетающие разные принципы.
👉 Гайды по JavaScript | дать буст
Неважно, используешь ли ты React, Vue, TypeScript или JavaScript.
Существует множество стратегий и мнений по этому поводу. Я расскажу тебе о нескольких интересных вариантах! ↓
1. По типу
Это самый простой и распространенный способ. Подходит для небольших проектов.
Создаешь папку для каждого типа файлов: компоненты, страницы, сервисы, состояния, утилиты...
2. По типу и функционалу
Здесь уже отражается логика приложения. Внутри каждой папки указывается, к какой части приложения она относится.
3. Screaming Architecture (Кричащая архитектура)
Здесь подход меняется: вместо того, чтобы указывать, что используется, папки обозначают, что делает приложение.
Наверняка бывало, что ты открываешь проект, сразу видишь, что он на React, но совершенно не понимаешь, чем он занимается.
Идея в том, чтобы поменять этот подход: упростить разработку и сделать так, чтобы независимо от технологии папки сразу указывали на смысловые блоки проекта.
Какая структура лучше?
Зависит от размера и длительности проекта.
Можно начать с первой стратегии и постепенно переходить на другую.
Также возможны гибридные варианты, сочетающие разные принципы.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Javascript - Использование Promise.all
🍩
- Через 2 секунды (setTimeout) случайным образом (80% успех, 20% провал) возвращает статус
- При успехе вызывает
🍩 Пример одиночной проверки:
- Проверяет статус для
- Выводит успешный статус или ошибку
🍩
- Использует
- Выводит общий результат, если все успешны
- Или первую ошибку, если хотя бы один деплой провален
👉 Гайды по JavaScript | дать буст
checkDeploymentStatus(app)
- функция, которая возвращает Promise, имитирующий проверку статуса деплоя:- Через 2 секунды (setTimeout) случайным образом (80% успех, 20% провал) возвращает статус
- При успехе вызывает
resolve
, при ошибке - reject
- Проверяет статус для
"sevalla-web"
- Выводит успешный статус или ошибку
checkMultipleDeployments()
- проверка нескольких приложений параллельно:- Использует
Promise.all
для одновременной проверки 3 приложений- Выводит общий результат, если все успешны
- Или первую ошибку, если хотя бы один деплой провален
Please open Telegram to view this post
VIEW IN TELEGRAM
Типы функций Javascript
- Обычное объявление функции (
- Функциональное выражение (
- Именованное функциональное выражение (
- Стрелочная функция (
- Стрелочная функция с несколькими операторами (Arrow Function with Multiple Statements)
- Немедленно вызываемое функциональное выражение (
- Асинхронная функция (
👉 Гайды по JavaScript | дать буст
- Обычное объявление функции (
Regular Function Declaration
)- Функциональное выражение (
Function Expression
, анонимная функция)- Именованное функциональное выражение (
Named Function Expression
)- Стрелочная функция (
Arrow Function
)- Стрелочная функция с несколькими операторами (Arrow Function with Multiple Statements)
- Немедленно вызываемое функциональное выражение (
Immediately Invoked Function Expression, IIFE
)- Асинхронная функция (
Asynchronous Function
)Please open Telegram to view this post
VIEW IN TELEGRAM
image_2025-03-29_08-34-24.png
2.3 MB
Основы Git
1. Создание репозитория
2. Работа с локальными изменениями
3. Просмотр истории
4. Ветвление и слияние
5. Отмена изменений
* Дополнительные команды
Клонирование, обновление (git pull), отправка изменений (git push), работа с stash, тегами, сравнением (git diff), удаление веток и управление удалёнными репозиториями.
👉 Гайды по JavaScript | дать буст
1. Создание репозитория
git init, git add, git commit, git remote add, git push
2. Работа с локальными изменениями
git status, git add, git commit
3. Просмотр истории
git log, git blame
4. Ветвление и слияние
git branch, git checkout, git merge
5. Отмена изменений
git reset, git checkout, git revert
* Дополнительные команды
Клонирование, обновление (git pull), отправка изменений (git push), работа с stash, тегами, сравнением (git diff), удаление веток и управление удалёнными репозиториями.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Быстрый совет JavaScript!
Как найти максимальное и минимальное значение в массиве? Без циклов!
👉 Гайды по JavaScript | дать буст
Как найти максимальное и минимальное значение в массиве? Без циклов!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Огромный выбор инструментов для веб-разработки
Автор классифицировал их на 18 категорий и представил несколько десятков сервисов в каждой категории. Таким образом, можно найти решение практически для любой задачи.
Этот список включает в себя иконки, палитры, шаблоны кода, инструменты для дизайна, JS-фреймворки и многое другое
Ссылка: тут
👉 Гайды по JavaScript
Автор классифицировал их на 18 категорий и представил несколько десятков сервисов в каждой категории. Таким образом, можно найти решение практически для любой задачи.
Этот список включает в себя иконки, палитры, шаблоны кода, инструменты для дизайна, JS-фреймворки и многое другое
Ссылка: тут
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
5 способов сделать API-запрос с помощью JavaScript
🍩 XMLHttpRequest (XHR) - это API, доступный веб-браузерам, который предоставляет методы для передачи данных между клиентом и сервером.
🍩 Fetch - это API на JavaScript, который позволяет выполнять сетевые запросы, похожие на XMLHttpRequest (XHR).
Он гораздо проще в использовании, чем XHR, и обладает более широким набором функций.
🍩 Использование
Функция fetch не поддерживает опцию таймаута из коробки.
🍩 Axios - это основанный на обещаниях HTTP-клиент для браузера и Node.js.
Axios можно использовать для получения данных с сервера, отправки данных на сервер, обновления данных на сервере и многого другого.
Он выполняет асинхронные HTTP-запросы.
🍩 jQuery Get
Если вы все еще используете jQuery, будь то для старой системы или нового проекта, на последнем фото пример GET-запроса, сделанного в jQuery.
👉 Гайды по JavaScript | дать буст
Он гораздо проще в использовании, чем XHR, и обладает более широким набором функций.
fetch()
с AbortController (для таймаута)Функция fetch не поддерживает опцию таймаута из коробки.
Axios можно использовать для получения данных с сервера, отправки данных на сервер, обновления данных на сервере и многого другого.
Он выполняет асинхронные HTTP-запросы.
Если вы все еще используете jQuery, будь то для старой системы или нового проекта, на последнем фото пример GET-запроса, сделанного в jQuery.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
😁3
Прототипы JavaScript против классов.
⏩ Объявление объекта:
В прототипном подходе создается функция-конструктор (function Deployment(app, region) {}).
В классовом подходе используется ключевое слово class (class Deployment { constructor(app, region) {}}).
⏩ Определение методов:
В прототипном подходе метод добавляется вручную через Deployment.prototype.deploy = function() {}.
В классовом подходе метод объявляется внутри класса (deploy() {}).
⏩ Читаемость и удобство:
Классовый подход более современный, удобочитаемый и интуитивно понятный.
Прототипный подход более сложен в восприятии и требует явного манипулирования прототипами.
⏩ Использование в старых версиях JavaScript:
Прототипы использовались до появления классов в ES6.
Классы являются синтаксическим сахаром над прототипами, но работают более интуитивно.
Оба подхода приводят к одному результату, но классы чаще используются в современном коде.
👉 Гайды по JavaScript | дать буст
В прототипном подходе создается функция-конструктор (function Deployment(app, region) {}).
В классовом подходе используется ключевое слово class (class Deployment { constructor(app, region) {}}).
В прототипном подходе метод добавляется вручную через Deployment.prototype.deploy = function() {}.
В классовом подходе метод объявляется внутри класса (deploy() {}).
Классовый подход более современный, удобочитаемый и интуитивно понятный.
Прототипный подход более сложен в восприятии и требует явного манипулирования прототипами.
Прототипы использовались до появления классов в ES6.
Классы являются синтаксическим сахаром над прототипами, но работают более интуитивно.
Оба подхода приводят к одному результату, но классы чаще используются в современном коде.
Please open Telegram to view this post
VIEW IN TELEGRAM
Микросервисы делают приложения более масштабируемыми и поддерживаемыми, разбивая их на более мелкие части.
На этом практическом курсе вы научитесь создавать собственные микросервисы с помощью Nest.js.😆
Вы создадите приложение доставки с помощью MongoDB, Docker и межсервисного взаимодействия, а также узнаете о проектировании схем, проверке данных и многом другом.
⏩ https://freecodecamp.org/news/create-microservices-with-nestjs/
👉 Гайды по JavaScript | дать буст
На этом практическом курсе вы научитесь создавать собственные микросервисы с помощью Nest.js.
Вы создадите приложение доставки с помощью MongoDB, Docker и межсервисного взаимодействия, а также узнаете о проектировании схем, проверке данных и многом другом.
Please open Telegram to view this post
VIEW IN TELEGRAM
Методы объектов JavaScript - часть 1
Object.keys() – получение всех ключей объекта.
Object.values() – получение всех значений объекта.
Object.entries() – преобразование объекта в массив пар [ключ, значение].
Object.assign() – объединение объектов.
Object.freeze() – предотвращение изменения объекта.
👉 Гайды по JavaScript | дать буст
Object.keys() – получение всех ключей объекта.
Object.values() – получение всех значений объекта.
Object.entries() – преобразование объекта в массив пар [ключ, значение].
Object.assign() – объединение объектов.
Object.freeze() – предотвращение изменения объекта.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Знаете ли вы, что в VSCode можно открыть браузер?
Никаких расширений, никаких установок - он интегрирован!
Ваш код и ваши изменения в одном окне
👉 Гайды по JavaScript | дать буст
Никаких расширений, никаких установок - он интегрирован!
Ваш код и ваши изменения в одном окне
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥3👍1
The Odin Project – Full Stack JavaScript: JavaScript Course
— это часть большого фуллстек-пути, выстроенного вокруг JavaScriptПроект открытый, бесплатный, и это реально полноценный курс, а не пара глупых туториалов на ютубе.
Если собрался вкатиться во фронт или фуллстек — тык
Please open Telegram to view this post
VIEW IN TELEGRAM