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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Изучаем Proxy — скрытое оружие JavaScript-разработчика!

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

👉 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥49👍158🤝5
📂 Напоминалка для работы с HTTP-запросами!

Например, GET используется для получения данных, POST — для создания новых записей, а DELETE — для удаления.

На картинке — 9 самых популярных методов HTTP-запросов, которые стоит держать под рукой каждому разработчику.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
27👍12🔥6
👩‍💻 Идеальные заголовки без лишних усилий!

Свойство text-wrap: balance — это настоящий подарок для тех, кто заботится о визуальной гармонии текста.

Где полезно:
В адаптивной вёрстке — когда ширина контейнера меняется, а ты хочешь, чтобы заголовок всегда выглядел опрятно.

В заголовках из 2–3 строк, где важно правильное распределение слов.

Чтобы не писать костыльный JS или не подставлять <br> вручную.


Оно автоматически балансирует перенос строк в заголовках, чтобы текст выглядел оптически красиво — без "висячих" слов и перекошенных блоков.

📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍46🔥159🤝3
😎 Отличная статья попалась мне на Хабре — если тебе интересно, как работают нейросети и хочется написать свою прямо в браузере, обязательно читай дальше.

В этой статье:
• Что такое сеть Хопфилда и как она запоминает изображения.
• Подробный разбор работы алгоритма шаг за шагом.
• Реализация нейросети на JavaScript с примерами кода.


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


📣 Code Ready | #статья
Please open Telegram to view this post
VIEW IN TELEGRAM
15🤝8🔥7
📱 Кнопка “Наверх” с прогресс-баром прокрутки!

Всем привет! Сегодня покажу, как сделать современную кнопку "Scroll to Top", которая не просто возвращает наверх, а ещё и показывает, насколько вы проскроллили страницу — прямо внутри себя, в виде кругового прогресс-бара.

Ключевые моменты:
• HTML: минимальный, только кнопка.

• CSS: фиксированное позиционирование, conic-gradient, плавные эффекты.

• JavaScript: расчёт процента прокрутки и плавный скролл к началу.


🔥 — если хочешь побольше подобного
🤝 — если попробуешь
сделать

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥48🤝118😁2
This media is not supported in your browser
VIEW IN TELEGRAM
☕️ Нашел вам сайт — CSSBattle, в котором ты буквально «сражаешься» в умении писать CSS-код!

Задача — в минимуме кода повторить заданный визуал. Тренирует знание CSS до автоматизма, особенно круто для тех, кто хочет прокачать вёрстку нестандартных форм.

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

📣 Code Ready | #сайт
Please open Telegram to view this post
VIEW IN TELEGRAM
👍36🔥15🤝62👎1
👍115🔥5
Что же выведет консоль?
Anonymous Quiz
25%
A
43%
B
16%
C
16%
D
19🔥10👍8
👩‍💻 Курс по Frontend от IT Introvert | Дмитрия Колотильщикова

Практикоориентированный курс для начинающих, где вы шаг за шагом создадите первый реальный проект. Изучите HTML, CSS, JavaScript, разберётесь в адаптивности и работе с GitHub. Отличный старт для тех, кто хочет быстро войти в профессию.

Ссылочка на плейлист: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥86
👩‍💻Атрибут inputmode — точечный контроль над экранной клавиатурой!

Атрибут inputmode говорит браузеру на устройствах с экранной клавиатурой какой набор символов показать при вводе данных в конкретное поле. Указывается для элементов <input> или <textarea>.

Примеры значений:
• numeric — числовая клавиатура
• email — клавиатура с @ и .
• decimal — числа с запятой
• tel — телефонная клавиатура


Задаёт предпочтительный способ ввода данных, не влияя на тип поля. Это особенно полезно для type="text", когда нужен ввод чисел, email, URL и т.д.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
26👍17🔥6😁1🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Знаете, что в VS Code можно быстро генерировать фейковые данные для тестов с помощью плагина?

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

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

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝39🔥115😁4👍2
👩‍💻 Мини-трюк с CSS — :has() как суперселекция!

В этом посте рассмотрим прием, который дает CSS новую супер способность: реагировать на содержимое без единой строчки JavaScript.

Как работает:

Селектор :has() позволяет родителю “заглядывать” внутрь — и менять стиль, если есть нужный элемент.

• Например, контейнер сам поймёт, что в нём появилась картинка — и адаптирует отступы или фон.

Работает в современных браузерах (Chrome, Safari, Edge) — но уже применяется в продакшене.


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

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