Code Ready | Frontend
22.7K subscribers
942 photos
403 videos
17 files
612 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
👩‍💻 Ограничиваем загрузку файлов по типу!

Атрибут accept добавляется тегу <input>. Он позволяет указать, файлы какого типа пользователю нужно прикрепить.

Он может принимать следующие значения:
'audio/*' — звуковые файлы любого формата;
'video/*' — видео любого формата;
'image/*' — изображения любого формата;
'image/jpeg' — JPEG изображения;
'image/png' — PNG изображения;
'application/pdf' — PDF документы;
'audio/mpeg' — MP3 аудиофайлы;
'video/mp4' — MP4 видеофайлы.


Поэтому, accept принимает только корректные MIME-типы или расширения. Например, просто text без уточнения будет недействителен.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍139
📱 JavaScript Array Methods — краткая шпаргалка!

На картинке собраны часто используемые методы массивов в JavaScript — от изменения и объединения данных до поиска и фильтрации элементов.

Примеры показывают, как работают методы: что возвращают, как изменяют массив и где применяются.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍10🤝62
Проверяем, есть ли подключение к интернету!

Web API позволяет узнать, доступна ли сеть, а события online и offline — реагировать на потерю соединения. Это пригодится для офлайн-режима, сохранения черновиков или уведомлений.

Проверим текущее состояние:
console.log("Онлайн:", navigator.onLine);
// → true или false


Добавим реакцию на изменение статуса:
window.addEventListener("online",  () => console.log(" Интернет восстановлен"));
window.addEventListener("offline", () => console.log(" Соединение потеряно"));


Теперь оформим динамический индикатор:
function updateStatus() {
document.body.textContent = navigator.onLine
? "🟢 Онлайн"
: "🔴 Оффлайн";
}
window.addEventListener("online", updateStatus);
window.addEventListener("offline", updateStatus);
updateStatus();


🔥 Интерфейс может мгновенно реагировать на пропадание сети — показывать баннер, отключать кнопки или сохранять действия в очередь.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3010🔥9
😁5415👍7
📱 Карточка с 3D-эффектом при движении курсора!

Привет! В этом гайде создаём интерактивную карточку - при наведении она слегка наклоняется в 3D-пространстве, создавая ощущение глубины и живого интерфейса.

Ключевые моменты:
• 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
25👍9🔥6🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
CodeHype — это бесплатная платформа для изучения JavaScript и других языков. Краткие шпаргалки и заметки для быстрого повторения материала, примеры реальных проектов и задач, все супер полезно!

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍149🔥7
📱 Разбираем работу с событиями!

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

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

Remote – SSH даёт возможность с лёгкостью получать доступ, редактировать и передавать файлы на удалённый сервер, при этом оставаясь в знакомом интерфейсе VS Code.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍1211🤝3
👍14🔥8🤝61
Что же выведет консоль?
Anonymous Quiz
21%
A
59%
B
13%
C
8%
D
🔥12👍98🤝1
Замыкания: сохраняем состояние без классов!

Иногда нужно запоминать данные между вызовами функции — например, считать клики, сохранять позиции скролла или количество запросов. Решение — замыкания.

Проблемный вариант — данные хранятся в глобальной области. Любой код может изменить значение и сломать логику:
let count = 0;

function click() {
count++;
console.log("Clicks:", count);
}


Чтобы изолировать данные, создадим внутреннюю область видимости. Переменная count теперь доступна только функции, которая её замыкает:
function createCounter() {
let count = 0;
return function() {
count++;
console.log("Clicks:", count);
};
}


Используем функцию, чтобы хранить состояние между вызовами. Каждый обработчик клика получит своё независимое значение:
const handleClick = createCounter();
button.addEventListener("click", handleClick);


🔥 Замыкания делают функции “умными” — они хранят данные и поведение вместе, формируя капсулу логики.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2312🔥11😁9
This media is not supported in your browser
VIEW IN TELEGRAM
☕️ JavaScript Questions — огромная коллекция вопросов и ответов по JS!

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

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


📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥129😁4🤝3
📱 Секундомер с кнопками Start / Stop / Reset!

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

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

• CSS: центрирование, аккуратный интерфейс и отзывчивые кнопки.

• JS: запуск, остановка и сброс счётчика через setInterval и clearInterval.


Такой мини-проект отлично подходит для тренировки работы с таймерами, интервалами и обработчиками событий.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2610🤝8🔥4