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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Разбираем методы для работы со словарями!

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

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2214🤝7
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Знаете, что можно визуализировать историю Git прямо внутри VS Code?

Git Graph — мощный плагин, который показывает древовидную структуру коммитов в виде наглядной граф-схемы: ветки, слияния, история — всё как на ладони.

Особенно удобен, если работаете в нескольких ветках или сопровождаете чужой проект — сразу видно, что где происходило.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
👍218🔥7🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Можно ли нажать на элемент пальцем? Что-то вроде тач-событий в JavaScript.

Свойство touch-action управляет взаимодействием с сенсорным экраном и напоминает более распространённое свойство pointer-events, которое регулирует взаимодействие мышкой.

Примеры использования:
none — запрещает все типы взаимодействий.
auto — разрешает все типы взаимодействия.
manipulation — элемент можно сдвигать и зумить.
pan-down — элемент можно смещать только если начать движение снизу вверх.
pan-up — элемент можно смещать только если начать движение сверху вниз.
pinch-zoom — элемент можно зазумить щипком.


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

📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2514🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
frontendchecklist — удобный чеклист всего, что нужно учесть при разработке фронтенд-проекта.
Подходит как для самопроверки, так и в командной работе над продакшн-сборкой.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥75
📱 Проверка пароля в реальном времени!

Привет! В этом гайде создадим поле ввода пароля с цветной полоской-индикатором, которая показывает его безопасность во время ввода.

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

• CSS: плавная визуализация — от красного до зелёного.

• JavaScript: минимальный, но точный анализ длины, регистра, цифр и символов.


Простой, но полезный элемент UX, который улучшает безопасность и вовлечённость пользователя.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2715🔥8🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
👍 UI.Dev портал с продвинутыми статьями и гайдами по JavaScript, React, архитектуре фронтенда и др.

Темы: как работает React под капотом, как писать масштабируемый JS-код, зачем нужен suspense и как проектировать компоненты.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍146🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Атрибут aria-label — доступность без лишней разметки!

Это атрибут для screen reader’ов, который задает текстовое описание элемента для пользователей с нарушениями зрения.

Есть теги и роли, для которых его точно нельзя использовать:
<caption> и роль caption.
<code> и роль code.
<dd> и роль definition.
<dt>, <dfn> и роль term.
<del> и роль deletion.
<em> и роль emphasis.
<ins> и роль insertion.
<mark> и роль mark.
и др.


Когда у элемента должно быть видимое для всех имя, используйте aria-labelledby.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
18👍14🔥5👎1
👩‍💻 Мини‑трюк CSS — фиксируем шапку таблицы без JS!

В этом посте покажем, как зафиксировать заголовок таблицы при прокрутке — просто и надёжно, без JavaScript и библиотек.

Как работает:
С помощью position: sticky и top: 0 заставляем <thead> залипать к верхней границе.

Добавляем background, чтобы шапка не сливалась при скролле.

Ограничиваем высоту tbody и включаем overflow-y: auto — получаем прокручиваемое тело таблицы.


Это идеально подойдет для админок, дашбордов, таблиц со сводками и логами.

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍228🤝6😁1
📱 Разбираем ключевые слова JavaScript!

В первой части мы рассмотрели основы: переменные, this, async, return. Во второй — фокус на управлении потоком: условия, обработка ошибок, классы и наследование. Эти конструкции лежат в основе логики приложений, контроллеров и архитектуры компонентов.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2720👍9🤝7