Code Ready | Frontend
22.7K subscribers
933 photos
398 videos
17 files
606 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
❤️ Codepip — крутой тренажёр для разработчиков!

Хочешь прокачать навыки HTML, CSS или JavaScript без скучных учебников? На Codepip учёба превращается в лёгкий и увлекательный процесс. Каждый уровень - это маленький челлендж, который заставит думать как программист и писать правильный код.

📌 Попробуйте сами: codepip.com

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2315🔥8
👩‍💻 Описываем форму фигуры с помощью атрибута!

Атрибут d описывает путь, который будет отрисован элементом <path>. Значение атрибута — строка со списком команд, написанных особым образом.

Доступные команды:
Перемещение кисти — M, m;

Прямая линия — L, l, H, h, V, v;

Кубическая кривая Безье — C, c, S, s;

Квадратичная кривая Безье — Q, q, T, t;

Эллиптическая кривая — A, a;

Закрытие пути — Z, z.


Числа в описании пути могут быть разделены пробельными символами или запятыми, причем нет ограничений в каких ситуациях запятую можно, а в каких нет.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
17👍11🔥8🤝4
29🔥15🤝10
Определяем HEX-код базового цвета по названию!

Узнаем 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.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2411👍7
😁59👍7👎4🔥43
📱 Textarea с автоподстройкой высоты!

Привет! В этом гайде создаём адаптивное поле ввода текста, которое само увеличивается по мере набора.

Ключевые моменты:
• HTML: компактная разметка с label и textarea.

• CSS: лёгкий дизайн, мягкие тени и фокус-эффект.

• JS: автоматическое изменение высоты на основе scrollHeight.


Такой элемент отлично подойдёт для чатов, форм обратной связи или комментариев — там, где важно, чтобы поле “росло” вместе с текстом.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍269🤝7🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 А слышали ли вы, что VS Code может сам проверять Markdown-файлы на ошибки?

Markdownlint — расширение, которое анализирует .md-файлы и помогает держать документацию, README и статьи в идеальном порядке. Оно подсвечивает нарушения стандартов (лишние пробелы, неправильные заголовки, отступы в списках) и подсказывает, как их исправить.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥8🤝71
Про связность, сцепленность и человеческий фактор в коде

Когда впервые слышишь cohesion и coupling, кажется, что это из учебника по архитектуре. Но чем дольше работаешь во фронтенде, тем яснее: это не совсем про код, больше про отношения. Между модулями, командами и людьми. Хорошо объяснить разницу между cohesion (связность) и coupling (сцепленность) удалось Артему Сенюкову из Кинопоиска в своем посте. Добавлю от себя параллель, которую заметил.

Слабая связность — когда никто не понимает, зачем этот компонент живёт.
Сильная сцепленность — когда одно изменение ломает полприложения.
Код становится как хрупкая экосистема, где одно движение рушит баланс.

Кажется, что высокая связность и низкая сцепленность, не просто технический паттерн, а проявление зрелости. Когда умеешь отпустить контроль, доверить данные другому модулю и при этом понимать, где твоя зона ответственности. Хороший код — честная коммуникация: «я делаю своё, и этого достаточно».

Архитектура — это не крепость, а город.
С понятными границами и открытыми дорогами.
Такой код живёт, развивается и не боится изменений.
🔥10👍87
📱 Разбираем работу с URL и параметрами!

В этой шпаргалке собраны методы и свойства для управления адресной строкой и параметрами запроса: чтение, изменение и навигация без перезагрузки страницы. Эти приёмы применяются при создании роутинга, фильтров и динамических переходов в веб-приложениях.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
23🔥10👍5🤝3
This media is not supported in your browser
VIEW IN TELEGRAM
😎 CodeCombat — играй и учись одновременно!

Сайт, где программирование превращается в приключение: пишешь код, управляешь героем, сражаешься с врагами и проходишь уровни. Осваиваешь переменные, функции, условия и циклы прямо в процессе игры.

📌 Оставляю ссылочку: codecombat.com

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
18👍7🤝7🔥2
Перемешивание массива на JavaScript!

Делаем универсальный способ случайно перемешать элементы массива — идеален для игр, списков и тестов.

Создаём исходные данные:
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]));


🔥 Простая и надёжная функция - база для рандомизации.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1910🔥10
👍24🔥106😁3