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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
👩‍💻 Тултип с анимацией при наведении на текст

Всем привет! Сегодня разберёмся, как создать и анимировать тултип для текста на HTML и CSS. Мы добавим небольшую подсказку, которая будет появляться при наведении на текст, и настроим плавный эффект для её появления.

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


📣 Code Ready | #гайд #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥36👍8
This media is not supported in your browser
VIEW IN TELEGRAM
metanit — это портал, на котором представлено множество полезных материалов для обучения программированию. Здесь можно найти ресурсы по и разным языкам, а каждое пособие содержит примеры кода.

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

📣 Code Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝16👍9🔥9
👩‍💻 Тонкости работы this в стрелочных и обычных функциях

1. Ключевое отличие в привязке this — В обычных функциях this определяется в момент вызова функции, а в стрелочных функциях — в момент их создания:
const obj = {
regularFunc: function() { return this; },
arrowFunc: () => this
};


2. Использование стрелочных функций в методах объектов — Стрелочные функции не рекомендуется использовать для методов объектов, поскольку this у них не привязан к самому объекту:
const obj = {
name: 'John',
regularFunc() { console.log(this.name); },
arrowFunc: () => console.log(this.name)
};
obj.regularFunc(); // Выводит: "John"
obj.arrowFunc(); // Выводит: undefined


3. Поведение this в обработчиках событий — При использовании обычных функций в обработчиках this указывает на элемент, вызвавший событие, а стрелочные функции наследуют this из внешней области:
const button = document.querySelector('button');
button.addEventListener('click', function() { console.log(this); });
button.addEventListener('click', () => console.log(this));


4. Контекст this при вызове с call и apply — Стрелочные функции игнорируют методы привязки контекста this, такие как call и apply, в отличие от обычных функций:
function regular() { return this.name; }
const arrow = () => this.name;

console.log(regular.call({ name: 'Alice' })); // "Alice"
console.log(arrow.call({ name: 'Alice' })); // undefined


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

📌 Ссылочка: docs.emmet.io/cheat-sheet

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

• Shift + ← / → / ↓ / ↑
— Позволяет выделять текст в направлении, указанном стрелкой.

• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.

Ctrl + ] / [ — Добавляет или удаляет отступ строки.

📣 Code Ready | #клавиши
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍17🔥12
👩‍💻 Шпаргалка по регулярным выражениям

Регулярные выражения (RegEx) позволяют легко находить и обрабатывать текст по шаблону. Используются в поиске, валидации данных и других задачах, связанных с обработкой строк.

📣 Code Ready | #js #шпаргалка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥51🤝12👍10
👩‍💻 Промисы и цепочка промисов в JavaScript

Промисы — это удобный способ работы с асинхронным кодом в JavaScript, упрощающий управление задачами, которые выполняются с задержкой, как запросы к серверу.


🔥 — если узнал новое
🤝 если уже пользовался

📣 Code Ready | #гайд #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝34🔥24👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Git How To — сайт, который предлагает пошаговые руководства и практические примеры для изучения системы контроля версий Git, облегчая процесс освоения её основных команд и функционала.

Ссылочка: githowto.com

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝21🔥12👍5
1👍4🔥3
Что будет в консоли?
Anonymous Quiz
50%
A
5%
B
34%
C
12%
D
😁31👍11🔥2
👩‍💻 Прогрессбар на CSS

Привет! Сегодня научимся создавать прогресс-бар с эффектом машинного набора на чистом HTML и CSS. Такой эффект будет идеально подходить для отображения выполнения различных задач или загрузки данных.

📣 Code Ready | #гайд #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26🔥13😁3