This media is not supported in your browser
VIEW IN TELEGRAM
От хитрых нюансов типов данных и замыканий до глубокой логики this и работы событийного цикла - здесь разжёвано то, что обычно путает даже опытных разработчиков. Каждый пример сопровождается пояснением!
Оставляю ссылочку: GitHub📱
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥12❤9😁4🤝3
Привет! В этом гайде создаём простой секундомер - он запускается, останавливается и сбрасывается с помощью трёх кнопок, а логика построена на setInterval.
Ключевые моменты:
• HTML: разметка дисплея времени и кнопок управления.
• CSS: центрирование, аккуратный интерфейс и отзывчивые кнопки.
• JS: запуск, остановка и сброс счётчика через setInterval и clearInterval.
Такой мини-проект отлично подходит для тренировки работы с таймерами, интервалами и обработчиками событий.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26❤10🤝9🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь прокачать навыки HTML, CSS или JavaScript без скучных учебников? На Codepip учёба превращается в лёгкий и увлекательный процесс. Каждый уровень - это маленький челлендж, который заставит думать как программист и писать правильный код.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤15🔥8
Атрибут
d описывает путь, который будет отрисован элементом <path>. Значение атрибута — строка со списком команд, написанных особым образом. Доступные команды:
• Перемещение кисти — M, m;
• Прямая линия — L, l, H, h, V, v;
• Кубическая кривая Безье — C, c, S, s;
• Квадратичная кривая Безье — Q, q, T, t;
• Эллиптическая кривая — A, a;
• Закрытие пути — Z, z.
Числа в описании пути могут быть разделены пробельными символами или запятыми, причем нет ограничений в каких ситуациях запятую можно, а в каких нет.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18👍11🔥8🤝4
Определяем HEX-код базового цвета по названию!
Узнаем HEX цвета прямо из консоли браузера, без библиотек и сайтов - всё решается нативным JS.
Шаг 1 — вводим название цвета:
Шаг 2 — создаём элемент и получаем его реальный цвет:
Шаг 3 — конвертируем RGB в HEX:
Шаг 4 — небольшая обработка ошибки:
Пример:
🔥 Практика на работу со стилями, DOM и конвертацией цветов из RGB в HEX.
📣 Code Ready | #практика
Узнаем HEX цвета прямо из консоли браузера, без библиотек и сайтов - всё решается нативным JS.
Шаг 1 — вводим название цвета:
const colorName = prompt("Enter a color name:");Шаг 2 — создаём элемент и получаем его реальный цвет:
try {
const div = document.createElement("div");
div.style.color = colorName.toLowerCase();
document.body.appendChild(div);
const rgb = getComputedStyle(div).color;
document.body.removeChild(div);Шаг 3 — конвертируем RGB в HEX:
const hex = rgb.match(/\d+/g)
.map(x => (+x).toString(16).padStart(2, "0"))
.join("");
console.log(`Hex code for '${colorName}' is: #${hex}`);
Шаг 4 — небольшая обработка ошибки:
} catch {
console.log("Invalid color name. Try names like 'red', 'skyblue', 'orange'.");
}Пример:
Enter a color name: Silver - #c0c0c0
Enter a color name: Yellow - #ffff00
🔥 Практика на работу со стилями, DOM и конвертацией цветов из RGB в HEX.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24❤11👍7
Привет! В этом гайде создаём адаптивное поле ввода текста, которое само увеличивается по мере набора.
Ключевые моменты:
• HTML: компактная разметка с label и textarea.
• CSS: лёгкий дизайн, мягкие тени и фокус-эффект.
• JS: автоматическое изменение высоты на основе scrollHeight.
Такой элемент отлично подойдёт для чатов, форм обратной связи или комментариев — там, где важно, чтобы поле “росло” вместе с текстом.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26❤9🤝7🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Markdownlint — расширение, которое анализирует .md-файлы и помогает держать документацию, README и статьи в идеальном порядке. Оно подсвечивает нарушения стандартов (лишние пробелы, неправильные заголовки, отступы в списках) и подсказывает, как их исправить.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥8🤝7❤1
Про связность, сцепленность и человеческий фактор в коде
Когда впервые слышишь 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
❤23🔥12👍6🤝3