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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Сегодня разберем коллекции!

Шпаргалка по ключевым методам Map, Set, WeakMap и WeakSet: создание, добавление, чтение, проверка и управление уникальными значениями. Подойдёт для эффективного хранения данных, приватных полей объектов и оптимизации структуры сложных приложений.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
20👍11🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
☕️ CSS Layout Generator — реальная находочка для фронтенда!

Быстрый и наглядный способ собрать Grid или Flexbox-layout: выбирай схему, настраивай параметры и сразу получай готовый CSS-код. Подходит для прототипов, адаптивных макетов и production-верстки.

📌 Ловите ссылочку: layout.bradwoods.io

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍86🤝2
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Добавляет заголовок полям ввода, сгруппированным при помощи <fieldset>

Тег <legend> добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

Особенности:
Обычно отображается в начале рамки <fieldset>

Может содержать текст, HTML-форматирование или вложенные элементы.

Улучшает семантику и восприятие формы.


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

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
20👍11🔥7🤝1
☕️ Нашёл годную статью на Хабре, в которой автор делится опытом создания кастомной альтернативы Google Таблицам и Excel

В этой статье:
• Реализована поддержка формул с использованием библиотеки HyperFormula;
• Добавлено условное форматирование с учётом строгой типизации столбцов;
• Интегрирован функционал построения графиков с использованием Chart.js;
• Рассмотрены возможности кастомной интеграции в другие приложения и расширения функционала.


🔊 Продолжай чтение на Habr!


📣 Code Ready | #статья
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥6🤝62
👩‍💻 Мини-трюк — подсказка (tooltip) без JS!

В этом посте разберем способ добавить аккуратную всплывающую подсказку к кнопке или иконке полностью на html/css. Пользователь получает мгновенный визуальный отклик при наведении.

Как этой работает:
Скрытый блок .tip появляется при наведении на .tooltip через селектор :hover.

Используем transform: scale() и opacity для плавного проявления подсказки.

Легко вставляется в формы, таблицы, интерфейсы и кнопки действий.


Такой приём улучшает UX без лишнего кода!

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
21👍9🔥7👎1
👩‍💻 Как сделать так, чтобы пользователь видел, на какие ссылки он уже кликал?

Псевдокласс :visited добавляется ссылкам, по которым уже переходил пользователь.

Возможные значения:
• color — можно задать отдельный цвет для посещённых ссылок.

• background-color, outline, border-color — тоже разрешены.


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

📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍266🔥6😁1
📱 Звёздный рейтинг с анимацией!

Привет! В этом гайде создаём звёздный рейтинг, где каждая звезда — интерактивная кнопка, а подпись оценки меняется динамически.

Ключевые моменты:
• HTML: кнопки <button> с data-value и aria-label.

• CSS: hover-анимация, подсветка и масштабирование.

• JS: подсветка, фиксация оценки и динамическая подпись.


Подходит для отзывов, профилей пользователей и интерактивных интерфейсов.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
28🔥10👍9🤝2
📱 Осваиваем регулярные выражения!

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

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22👍118
👩‍💻 Мини-трюк с CSS — флип-карточки!

В этом посте - эффектный приём, который позволяет переворачивать карточку при наведении только средствами html/css. Идеально подходит для подсказок или скрытого превью.

Как работает:
Используем контейнер с перспективой, чтобы задать 3D эффект.

Cоздаём «внутреннюю» обёртку, которая вращается.

Стороны карточки располагаем в одной плоскости и скрываем заднюю.

При наведении карточка поворачивается, открывая обратную сторону.


Приём легко кастомизируется: можно добавить текст, иконки или даже интерактивный контент.

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥38👍1412