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

Автор: @energy_it

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

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

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

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24🤝17👍65
👍 Нашёл отличную статью на Хабре: «Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов»

В статье вы:
• Установите и настроите Jest;
• Подключите React Testing Library;
• Организуете структуру тестов (SCSS, SVG, компоненты);
• Настроите Jest в окружении Next.js для unit‑тестирования компонентов.

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


📣 Code Ready | #статья
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥65
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Разберем атрибут step — контроль точности ввода чисел!

Он используется в <input> для указания шага изменения значения. Задаёт, на сколько увеличивается или уменьшается значение при вводе или при нажатии стрелок.

Можно применить со следующими значениями type:
• date — значение по умолчанию 1 день;
• month — значение по умолчанию 1 месяц;
• week — значение по умолчанию 1 неделя;
• time — значение по умолчанию 60 секунд;
• datetime-local — значение по умолчанию 1 секунда;
• number — значение по умолчанию 1;
• range — значение по умолчанию 1.


Для удобства пользователя с <input step> добавляйте инструкции через <label> или aria-describedby.

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

Даже скачивать ничего не нужно, ведь всё уже встроено в редактор. Как и что можно настроить показано на видео выше от Miguel Ángel Durán

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32👍9🤝61
📱 Слайдер с кнопками управления!

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

Ключевые моменты:
• HTML: контейнер с обёрткой для изображений и кнопками навигации.

• CSS: ограничение ширины и скрытие лишнего контента.

• JS: управление слайдами по кнопкам.


Подходит для презентаций, портфолио, лендингов и любых галерей без автопрокрутки.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝24🔥108👎1
📂 Напоминалка по сетевым портам!

Например, порт 22 используется для SSH-подключений, а 443 — для защищённого HTTPS-трафика. Порты — основа любого взаимодействия между клиентом и сервером.

На картинке — 18 основных портов.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥8🤝5😁1
👍98🔥6👎1
Что же выведет консоль?
Anonymous Quiz
51%
A
13%
B
19%
C
17%
D
👍20🔥9🤝6👎1😁1
👩‍💻 Мини-трюк с CSS — виртуальная клавиатура с активным состоянием без JS!

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

Как работает:
При выборе кнопка подсвечивается и меняет цвет.

При клике — эффект сжатия, имитирующий нажатие.

Полностью без JS, работает на всех устройствах.


Отличное решение, когда нужно быстро добавить интерактивность без лишнего кода!

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2510🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
😎 App Ideas — готовые идеи для ваших проектов и портфолио!

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

Оставляю ссылочку: GitHub 📱


📣 Code Ready | #репозиторий
Please open Telegram to view this post
VIEW IN TELEGRAM
👍157🔥6
👩‍💻 Можно ли сделать подчёркивания аккуратнее, чтобы они не заезжали на буквы с хвостиками, вроде g и y?

Свойство text-decoration-skip-ink управляет внешним видом верхнего и нижнего подчёркиваний.

Возможные значения:
• none — линия рисуется под текстом сквозь глифы.

• auto — линия может рисоваться так, что не касается глифов (значение по умолчанию).

• all — линия будет рисоваться, не касаясь глифов.


Если текст нужно перечеркнуть, то это свойство будет проигнорировано.

📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2212🔥6