Всем привет! Сегодня разберёмся, как создать и анимировать тултип для текста на HTML и CSS. Мы добавим небольшую подсказку, которая будет появляться при наведении на текст, и настроим плавный эффект для её появления.
Для создания тултипа будем использовать псевдоэлемент ::after и свойство transform. Сначала тултип будет скрыт, а при наведении курсора плавно появится над текстом.
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
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
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
• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.
• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.
• Ctrl + ] / [ — Добавляет или удаляет отступ строки.
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍17🔥12
Регулярные выражения (RegEx) позволяют легко находить и обрабатывать текст по шаблону. Используются в поиске, валидации данных и других задачах, связанных с обработкой строк.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥51🤝12👍10
Промисы — это удобный способ работы с асинхронным кодом в JavaScript, упрощающий управление задачами, которые выполняются с задержкой, как запросы к серверу.
🔥 — если узнал новое
🤝 — если уже пользовался
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
😁31👍11🔥2
Привет! Сегодня научимся создавать прогресс-бар с эффектом машинного набора на чистом HTML и CSS. Такой эффект будет идеально подходить для отображения выполнения различных задач или загрузки данных.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26🔥13😁3