Про связность, сцепленность и человеческий фактор в коде
Когда впервые слышишь cohesion и coupling, кажется, что это из учебника по архитектуре. Но чем дольше работаешь во фронтенде, тем яснее: это не совсем про код, больше про отношения. Между модулями, командами и людьми. Хорошо объяснить разницу между cohesion (связность) и coupling (сцепленность) удалось Артему Сенюкову из Кинопоиска в своем посте. Добавлю от себя параллель, которую заметил.
Слабая связность — когда никто не понимает, зачем этот компонент живёт.
Сильная сцепленность — когда одно изменение ломает полприложения.
Код становится как хрупкая экосистема, где одно движение рушит баланс.
Кажется, что высокая связность и низкая сцепленность, не просто технический паттерн, а проявление зрелости. Когда умеешь отпустить контроль, доверить данные другому модулю и при этом понимать, где твоя зона ответственности. Хороший код — честная коммуникация: «я делаю своё, и этого достаточно».
Архитектура — это не крепость, а город.
С понятными границами и открытыми дорогами.
Такой код живёт, развивается и не боится изменений.
Когда впервые слышишь cohesion и coupling, кажется, что это из учебника по архитектуре. Но чем дольше работаешь во фронтенде, тем яснее: это не совсем про код, больше про отношения. Между модулями, командами и людьми. Хорошо объяснить разницу между cohesion (связность) и coupling (сцепленность) удалось Артему Сенюкову из Кинопоиска в своем посте. Добавлю от себя параллель, которую заметил.
Слабая связность — когда никто не понимает, зачем этот компонент живёт.
Сильная сцепленность — когда одно изменение ломает полприложения.
Код становится как хрупкая экосистема, где одно движение рушит баланс.
Кажется, что высокая связность и низкая сцепленность, не просто технический паттерн, а проявление зрелости. Когда умеешь отпустить контроль, доверить данные другому модулю и при этом понимать, где твоя зона ответственности. Хороший код — честная коммуникация: «я делаю своё, и этого достаточно».
Архитектура — это не крепость, а город.
С понятными границами и открытыми дорогами.
Такой код живёт, развивается и не боится изменений.
Telegram
ТОП - Тёма о программировани
Cohesion и Coupling 🧩🔗
Здарова, работяги!
Если очень коротко: хорошая архитектура — это высокая связность внутри модулей (cohesion) и низкая связанность между ними (coupling). Эти два термина отлично объясняют, почему код либо живёт годами, либо рассыпается…
Здарова, работяги!
Если очень коротко: хорошая архитектура — это высокая связность внутри модулей (cohesion) и низкая связанность между ними (coupling). Эти два термина отлично объясняют, почему код либо живёт годами, либо рассыпается…
🔥10👍8❤7
В этой шпаргалке собраны методы и свойства для управления адресной строкой и параметрами запроса: чтение, изменение и навигация без перезагрузки страницы. Эти приёмы применяются при создании роутинга, фильтров и динамических переходов в веб-приложениях.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22🔥10👍5🤝3
This media is not supported in your browser
VIEW IN TELEGRAM
Сайт, где программирование превращается в приключение: пишешь код, управляешь героем, сражаешься с врагами и проходишь уровни. Осваиваешь переменные, функции, условия и циклы прямо в процессе игры.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16👍7🤝7🔥2
Перемешивание массива на JavaScript!
Делаем универсальный способ случайно перемешать элементы массива — идеален для игр, списков и тестов.
Создаём исходные данные:
Реализуем компактный алгоритм Фишера–Йетса:
Проверяем работу на примере:
🔥 Простая и надёжная функция - база для рандомизации.
📣 Code Ready | #практика
Делаем универсальный способ случайно перемешать элементы массива — идеален для игр, списков и тестов.
Создаём исходные данные:
const items = ["🍎", "🍌", "🍇", "🍉", "🍓"];
Реализуем компактный алгоритм Фишера–Йетса:
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
Проверяем работу на примере:
console.log("До:", items);
console.log("После:", shuffle([...items]));
🔥 Простая и надёжная функция - база для рандомизации.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤10🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
Свойство
filter
даёт возможность прямо в CSS применять к элементам различные графические эффекты. Например, перекрасить объект, добавить ему необычную тень или использовать SVG в качестве фильтра.Примеры эффектов:
• blur(5px) — создаёт размытие;
• brightness(1.2) — делает элемент светлее;
• contrast(80%) — уменьшает контраст;
• grayscale(100%) — превращает изображение в чёрно-белое;
• sepia(60%) — добавляет тёплый винтажный оттенок.
Фильтры можно применить не только к картинкам, но и к любым непустым элементам.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤9🔥8
В этой шпаргалке собраны методы и свойства объектов window и navigator: управление окнами, вкладками, адресами, буфером обмена и прокруткой. Эти инструменты применяются при создании интерактивных интерфейсов, обработке навигации и интеграции с системными API браузера.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥12❤9🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Partial Diff — расширение, которое позволяет мгновенно увидеть разницу между блоками кода. Работает с любыми файлами, от JS-функций до HTML-разметки. Идеально при рефакторинге, тестировании или ревью чужого кода. Минимум действий. Максимум наглядности.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤19👍11🔥9🤝1
🔥 Дедлайн — 22 октября 🔥
Оформи заявку на Хакатон ИТ-холдинга Т1 сегодня и поборись за призовой фонд 800 000₽
Финишная прямая: подай заявку на Хакатон Т1 Новосибирск.
Реальные кейсы, рост и нетворкинг.
Команды от 3 до 5 человек.
Призовой фонд 800 000 ₽.
Завершение регистраций — 22 октября, 23:59 МСК.
Принять участие
Оформи заявку на Хакатон ИТ-холдинга Т1 сегодня и поборись за призовой фонд 800 000₽
Финишная прямая: подай заявку на Хакатон Т1 Новосибирск.
Реальные кейсы, рост и нетворкинг.
Команды от 3 до 5 человек.
Призовой фонд 800 000 ₽.
Завершение регистраций — 22 октября, 23:59 МСК.
Принять участие
❤2👍1👎1🔥1
В этом посте покажу крутой приём для форм: метка поля «плавает» над вводом при фокусе или когда поле заполнено.
Как работает:
• HTML содержит обычный <input> и <label>, placeholder остаётся пустым.
• Через CSS позиционируем label поверх поля и задаём плавный переход.
• Селекторы :focus и :not(:placeholder-shown) поднимают метку и меняют её цвет.
• Дополнительно подсветка поля при фокусе даёт визуальную обратную связь пользователю.
Идеально для форм входа, подписок, комментариев и любых интерфейсов с интерактивными полями.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18👍11🔥8