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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
Что будет в консоли?
Anonymous Quiz
23%
A
25%
B
41%
C
11%
D
👍22🔥4👎3
📖 React быстрый старт

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

Автор: Стоян Стефанов
Год: 2023


⬇️ Скачать книгу

📣 Code Ready | #книга
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Атрибут contenteditable

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

Он имеет два значения:
• contenteditable="true" — включает редактирование текста.

• contenteditable="false" (по умолчанию) — отключает редактирование текста.


📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍13
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Управление содержимым с overflow

Свойство overflow в CSS определяет, как браузер обрабатывает содержимое, выходящее за пределы элемента.

Оно принимает следующие значения:
• visible — содержимое выходит за границы элемента (значение по умолчанию).
• hidden — обрезает лишнее содержимое, скрывая его.
• scroll — добавляет прокрутку, даже если она не нужна.
• auto — добавляет прокрутку только тогда, когда содержимое превышает размеры элемента.


📣 Code Ready | #свойство #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥7
👩‍💻 Морфинг формы кнопки

Всем привет! Сегодня научимся создавать кнопку с плавным эффектом изменения формы при наведении. Наша кнопка начнет в виде круга, а при наведении превратится в стильный прямоугольник с закругленными углами.

Для создания эффекта морфинга мы настроим анимацию с помощью свойства transition и будем изменять размеры кнопки, радиус скругления и цвет фона. Добавим немного теней, чтобы кнопка выглядела объёмной и привлекала внимание.


📣 Code Ready | #гайд #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍13🤝5👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Tabnine — инструмент на основе ИИ, который предоставляет автодополнение кода для различных языков программирования, помогая разработчикам ускорять процесс написания кода и повышать его качество.

📌 Ссылочка: abnine.com

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2
👩‍💻 Используем таймеры в JavaScript

Таймеры — это функции высшего порядка, при помощи которых можно откладывать или повторять выполнение других функций.

Рассмотрим 5 примеров использования:

1. setTimeout — для однократного выполнения кода с задержкой. Принимает функцию и задержку в миллисекундах.
setTimeout(() => {
console.log('This message is displayed after 2 seconds');
}, 2000);


2. setInterval — для многократного выполнения кода с фиксированным интервалом. Принимает функцию и интервал в миллисекундах.
setInterval(() => {
console.log('This message is displayed every 3 seconds');
}, 3000);


3. clearTimeout — отменяет выполнение функции, запланированной через setTimeout. Требует идентификатор таймера, возвращаемый setTimeout.
const timeoutId = setTimeout(() => {
console.log('This message will not be displayed');
}, 5000);
clearTimeout(timeoutId);


4. clearInterval — останавливает выполнение функции, запланированной через setInterval. Требует идентификатор таймера, возвращаемый setInterval.
const intervalId = setInterval(() => {
console.log('This message will stop displaying after 9 seconds');
}, 1000);
setTimeout(() => {
clearInterval(intervalId);
}, 9000);


5. requestAnimationFrame — синхронизирует выполнение функции с обновлением экрана. Используется для создания плавных анимаций.
function animate() {
console.log('Animation frame');
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);


📣 Code Ready | #техсобес
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Полезные горячие клавиши VSCode

Ctrl + F2 — Выделяет все вхождения текущего слова.

Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

Shift + Tab — Удаляет отступы.

📣 Code Ready | #клавиши
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
Эмуляция медленного интернета с помощью devtools

Задумывались, как ваш сайт выглядит при слабом интернет-соединении? С помощью DevTools можно легко протестировать, как работает лендинг или приложение при условиях "медленного интернета".

Как это подключить:
Откройте DevTools (F12) и перейдите на вкладку Network.

В верхней части выберите пресет, например, Slow 3G или Offline, чтобы проверить работу сайта без интернета.

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


📣 Code Ready | #devtools
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥9👎1
👩‍💻 Эффект дождевых капель

Привет! Сегодня создадим эффект дождевых капель с использованием Canvas API. Капли будут падать с верхней части экрана и при этом постепенно исчезать, создавая эффект дождя.

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

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


🔥 — если было полезно

📣 Code Ready | #гайд #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥46👍14🤝2
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Battle — это интерактивная платформа, где разработчики соревнуются в решении задач на минимизацию CSS-кода, создавая визуальные элементы с наименьшим количеством символов.

📌 Ссылочка: cssbattle.dev

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍5