🤔 Что такое семантические коммиты?
Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа.
Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов.
🚩Формат семантического коммита
Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки.
Основной шаблон
🚩Основные типы коммитов
🟠feat
добавление новой функциональности
🟠fix
исправление ошибки
🟠docs
изменение документации
🟠style
исправления, не влияющие на логику (например, форматирование)
🟠refactor
переработка кода без изменения функциональности
🟠test
добавление или обновление тестов
🟠chore
изменения, не влияющие на код (например, обновление зависимостей)
🚩Примеры
1⃣Добавление новой функции
2⃣Исправление ошибки
3⃣Улучшение кода без изменения
4⃣Обновление документации
Ставь 👍 и забирай 📚 Базу знаний
Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа.
Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов.
🚩Формат семантического коммита
Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки.
Основной шаблон
<тип>(<область>): <краткое описание>
🚩Основные типы коммитов
🟠feat
добавление новой функциональности
🟠fix
исправление ошибки
🟠docs
изменение документации
🟠style
исправления, не влияющие на логику (например, форматирование)
🟠refactor
переработка кода без изменения функциональности
🟠test
добавление или обновление тестов
🟠chore
изменения, не влияющие на код (например, обновление зависимостей)
🚩Примеры
1⃣Добавление новой функции
feat(auth): добавлена аутентификация через Google
2⃣Исправление ошибки
fix(login): исправлен баг с неверным редиректом
3⃣Улучшение кода без изменения
refactor(api): оптимизирован алгоритм фильтрации данных
4⃣Обновление документации
docs(readme): добавлены инструкции по развертыванию
Ставь 👍 и забирай 📚 Базу знаний
👍7
🤔 Где используются Promise?
Promise применяется при асинхронных операциях, таких как:
- fetch и любые HTTP-запросы
- Асинхронные таймеры (через обёртки)
- Файловые операции (в Node.js)
- Интерфейсы IndexedDB
- Асинхронные анимации, Web APIs
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Promise применяется при асинхронных операциях, таких как:
- fetch и любые HTTP-запросы
- Асинхронные таймеры (через обёртки)
- Файловые операции (в Node.js)
- Интерфейсы IndexedDB
- Асинхронные анимации, Web APIs
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍1🔥1
В нашем канале много ценного для разработчиков по подготовке к собесам👇
Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Стримы с гостями и записями:
Как проходить собеседование на английском
Как решать livecoding задачи
Прокачали более 30 резюме вместе с Юрой
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Текущие рекорды участников:
Оффер 6800$ net с релокацией на Кипр
Из Шанхая до 4500$ в американскую компанию
Получили 427 000 на руки в Сбер и отказались
Выбили 380 000 на руки в банк и приняли!
Наши встречи в Питере, Москве, Шанхае
Как я прохожу собесы на ютубе:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ
А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Подписывайся 👇
https://t.me/frontend_punks
Реклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809
Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!
Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Стримы с гостями и записями:
Как проходить собеседование на английском
Как решать livecoding задачи
Прокачали более 30 резюме вместе с Юрой
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Текущие рекорды участников:
Оффер 6800$ net с релокацией на Кипр
Из Шанхая до 4500$ в американскую компанию
Получили 427 000 на руки в Сбер и отказались
Выбили 380 000 на руки в банк и приняли!
Наши встречи в Питере, Москве, Шанхае
Как я прохожу собесы на ютубе:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ
А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Подписывайся 👇
https://t.me/frontend_punks
Реклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809
🤔 Как добавить слушатель события?
Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
🚩Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
🚩Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
🟠Чистый JavaScript
Для добавления слушателя события используется метод
🟠React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как
🟠jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
🚩Почему это удобно и важно
🟠Интерактивность
Позволяет создавать динамичные и отзывчивые интерфейсы.
🟠Гибкость
Возможность реагировать на различные действия пользователей.
🟠Удобство
В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
Ставь 👍 и забирай 📚 Базу знаний
Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
🚩Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
🚩Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
🟠Чистый JavaScript
Для добавления слушателя события используется метод
addEventListener.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button was clicked!');
});
</script>
</body>
</html>
🟠React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как
onClick, onChange и т.д.import React from 'react';
function App() {
const handleClick = () => {
alert('Button was clicked!');
};
return (
<div>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default App;
🟠jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click me</button>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
alert('Button was clicked!');
});
});
</script>
</body>
</html>
🚩Почему это удобно и важно
🟠Интерактивность
Позволяет создавать динамичные и отзывчивые интерфейсы.
🟠Гибкость
Возможность реагировать на различные действия пользователей.
🟠Удобство
В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
Ставь 👍 и забирай 📚 Базу знаний
👍3
🤔 Какое событие сработает при потере фокуса элементом формы?
Событие blur — срабатывает, когда элемент теряет фокус (например, при переходе к другому полю).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Событие blur — срабатывает, когда элемент теряет фокус (например, при переходе к другому полю).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍5
О!Хакатон возвращается — на кону миллион
Приглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджеров на тревел-тех хакатон от Островка.
Вам предстоит решить одну из двух AI-задач в сфере тревел-теха и побороться за главный приз — 1 000 000 ₽.
Присоединиться к хакатону можно из любой точки мира. Участвуйте командой до пяти человек и выбирайте один из двух треков:
📌«О!дин запрос». Цель для junior-специалистов — создать AI-агента для путешествий и отелей.
📌«О!дин шаг до идеального отеля». Задача для специалистов уровней middle и senior — «переизобрести» опыт бронирования пользователя с помощью AI и новых интерфейсных механик.
📅 Регистрация открыта до 16 октября 2026 года. Стартуем 23 октября.
Скорее присоединяйтесь по ссылке!
Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.
Приглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджеров на тревел-тех хакатон от Островка.
Вам предстоит решить одну из двух AI-задач в сфере тревел-теха и побороться за главный приз — 1 000 000 ₽.
Присоединиться к хакатону можно из любой точки мира. Участвуйте командой до пяти человек и выбирайте один из двух треков:
📌«О!дин запрос». Цель для junior-специалистов — создать AI-агента для путешествий и отелей.
📌«О!дин шаг до идеального отеля». Задача для специалистов уровней middle и senior — «переизобрести» опыт бронирования пользователя с помощью AI и новых интерфейсных механик.
📅 Регистрация открыта до 16 октября 2026 года. Стартуем 23 октября.
Скорее присоединяйтесь по ссылке!
Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.
👍1🔥1
🤔 Опасности использования `innerHTML` в JavaScript
🟠Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если
🟠Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то
🟠Случайное удаление обработчиков событий
Если заменить содержимое элемента через
Ставь 👍 и забирай 📚 Базу знаний
innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам. document.getElementById("content").innerHTML = "<h1>Привет!</h1>";🟠Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если
innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код. const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;🟠Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то
innerHTML может нарушать политику безопасности. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
🟠Случайное удаление обработчиков событий
Если заменить содержимое элемента через
innerHTML, все обработчики событий внутри него удалятся. document.getElementById("btn").addEventListener("click", () => {
alert("Нажато!");
});
document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удаленСтавь 👍 и забирай 📚 Базу знаний
👍2