:has()
— это новый CSS-псевдокласс, который позволяет выбирать элемент, если он содержит определённые дочерние элементы. Его часто называют "псевдоклассом родителя".<div class="card">
<p>Текст</p>
<button>Нажми меня</button>
</div>
<div class="card">
<p>Только текст</p>
</div>
<style>
.card:has(button) {
border: 2px solid blue; /* Стили для карточек с кнопкой */
}
</style>
:has(button)
выбирает .card
, если внутри неё есть кнопка. Это позволяет применять стили на основе содержимого элемента, улучшая контроль над структурой.CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript
А также залетай в наш новый канал
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
WeakMap
— это коллекция для хранения пар ключ-значение, где ключами могут быть только объекты. В отличие от Map, WeakMap
позволяет сборщику мусора удалять записи, если на объект-ключ нет других ссылок.let obj = { name: 'Alice' };
const weakMap = new WeakMap();
weakMap.set(obj, 'Дополнительные данные');
console.log(weakMap.get(obj)); // 'Дополнительные данные'
obj = null; // Ключ становится недоступен, запись удаляется из WeakMap
WeakMap
хранит дополнительные данные для объекта obj. После обнуления ссылки obj
запись автоматически удаляется, освобождая память.CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Lazy loading — это техника загрузки ресурсов (например, изображений или скриптов) только тогда, когда они становятся необходимыми. Это ускоряет первоначальную загрузку страницы и экономит трафик.
<img src="placeholder.jpg" data-src="image.jpg" class="lazy" alt="Изображение">
<script>
const lazyImages = document.querySelectorAll('img.lazy');
lazyImages.forEach(img => {
img.src = img.dataset.src;
});
</script>
placeholder.jpg
на image.jpg
. Lazy loading улучшает производительность и пользовательский опыт на сайтах с большим количеством медиа-контента.CodeBase | Frontend | #основы
Please open Telegram to view this post
VIEW IN TELEGRAM
filter
в CSS и как оно используется?filter
— это CSS-свойство, которое позволяет применять визуальные эффекты, такие как размытие, изменение яркости или насыщенности, к элементам. Это полезно для стилизации изображений, фона и других элементов без использования графических редакторов.<img src="example.jpg" class="filtered" alt="Изображение с фильтром">
<style>
.filtered {
filter: grayscale(50%) blur(5px); /* Частично чёрно-белое изображение с размытие */
}
</style>
filter
делает изображение частично черно-белым и добавляет размытие. Это упрощает создание визуально сложных эффектов средствами CSS.CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🌀 Кто просил
🔷 Подписывайтесь на авторский канал -> English - ITnglish
Читайте закрепы.
английский для IT
?🔷 Подписывайтесь на авторский канал -> English - ITnglish
Читайте закрепы.
filter()
в JavaScript и как он используется?filter()
— это метод массивов в JavaScript, который создаёт новый массив, содержащий только те элементы, которые удовлетворяют условию, заданному в функции обратного вызова.const numbers = [1, 2, 3, 4, 5, 6];
// Оставляем только чётные числа
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]
filter()
возвращает новый массив, содержащий только чётные числа. Это полезно для фильтрации данных на основе определённых условий.CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Content Security Policy (CSP) — это механизм безопасности, который помогает предотвратить выполнение вредоносного кода, такого как XSS-атаки, ограничивая источники, из которых можно загружать контент (скрипты, стили, изображения).
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://trusted-scripts.com; object-src 'none';">
https://trusted-scripts.com
. Все другие источники запрещены. Это снижает вероятность внедрения стороннего кода и повышает безопасность вашего приложения.CodeBase | Frontend | #основы
Please open Telegram to view this post
VIEW IN TELEGRAM
Как айтишнику выйти из выгорания и вернуть силы что-то делать?
Пол беды, если просто тошнит от работы. Хуже, если пропал интерес вообще ко всему - к хобби, путешествиям, личной жизни.
Выгорание - профессиональная болезнь программистов. И чтобы не потерять доход и бесценные годы, надо научиться с ним справляться.
📍 Если хотите жить ярко и работать с удовольствием, рекомендуем подписаться на канал Психолог взрослого человека.
Это must-have для IT-специалистов, у которых периодически опускаются руки и отключается мозг от постоянных переработок и тревожки.
✔️ Научиться расставлять приоритеты и найти время на жизнь
✔️ Избавиться от прокрастинации
✔️ Вернуть себе мотивацию и интерес к работе
✔️ Расставить границы и перестать перерабатывать
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания и ущерба для личной жизни!
Пол беды, если просто тошнит от работы. Хуже, если пропал интерес вообще ко всему - к хобби, путешествиям, личной жизни.
Выгорание - профессиональная болезнь программистов. И чтобы не потерять доход и бесценные годы, надо научиться с ним справляться.
📍 Если хотите жить ярко и работать с удовольствием, рекомендуем подписаться на канал Психолог взрослого человека.
Это must-have для IT-специалистов, у которых периодически опускаются руки и отключается мозг от постоянных переработок и тревожки.
✔️ Научиться расставлять приоритеты и найти время на жизнь
✔️ Избавиться от прокрастинации
✔️ Вернуть себе мотивацию и интерес к работе
✔️ Расставить границы и перестать перерабатывать
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания и ущерба для личной жизни!
aspect-ratio
в CSS и зачем оно используется?aspect-ratio
— это CSS-свойство, которое позволяет задать соотношение сторон для элемента. Это полезно для создания адаптивных контейнеров, изображений и видео, сохраняя их пропорции независимо от размера.<div class="responsive-box"></div>
<style>
.responsive-box {
width: 300px;
aspect-ratio: 16 / 9; /* Пропорция 16:9 */
background: lightblue;
}
</style>
.responsive-box
сохраняет соотношение сторон 16:9 независимо от изменения ширины. Это упрощает работу с адаптивными компонентами, такими как видеоплееры или карточки.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Учите английский для работы и жизни?
В канале Английский Меридиан мы:
🔘 Публикуем видео с фразами для разных уровней, от базового до продвинутого;
🔘 Разбираем типичные ошибки с уроков;
🔘 Делимся фишками, как выстроить обучение с помощью знаний о работе мозга;
🔘 Обсуждаем англоязычные подкасты, делаем разборы интервью на английском;
Топ полезных постов:
🔘 Как сказать "отстой" на английском?
🔘 Лучшие протоколы обучения по исследованиям Стэнфорда
🔘 Урок "Вопросы с глаголами" + квиз
🔘 Разбор английского из видео "Почему кофе успокаивает тех, у кого СДВГ?
Канал Английский Меридиан ❤️
В канале Английский Меридиан мы:
Топ полезных постов:
Канал Английский Меридиан ❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Английский меридиан
🎙️Как сказать «отстой» на английском?
#базовый уровень
🔘That sucks
▶️Это отстой.
Самый распространённый разговорный вариант и между прочим — вполне приличный. Его можно использовать с друзьями и коллегами, это не грубость, хоть фраза и не очень подходит…
#базовый уровень
🔘That sucks
▶️Это отстой.
Самый распространённый разговорный вариант и между прочим — вполне приличный. Его можно использовать с друзьями и коллегами, это не грубость, хоть фраза и не очень подходит…
reduce()
в JavaScript и как он используется?reduce()
— это метод массивов в JavaScript, который выполняет функцию-аккумулятор, последовательно обрабатывая каждый элемент массива и возвращая одно итоговое значение.const numbers = [1, 2, 3, 4, 5];
// Сумма всех чисел в массиве
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
reduce()
суммирует все числа массива, начиная с начального значения 0
. Это полезно для вычислений, таких как сумма, произведение или объединение данных.CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM
• infosec - один из самых ламповых каналов по информационной безопасности, где говорят об истории ИТ, публикуют актуальные новости и пишут технический материал по разным темам:
- Как зарождалась Флибуста?
- Сервисы для обеспечения безопасности в сети;
- Каким образом "компьютерные мастера" обманывают своих клиентов?
- Бесплатный бот, который проверит файлы на предмет угроз более чем 70 антивирусами одновременно.
• А еще у нас часто проходят розыгрыши самых актуальных и новых книг по ИБ. Так что присоединяйся, у нас интересно!
- Как зарождалась Флибуста?
- Сервисы для обеспечения безопасности в сети;
- Каким образом "компьютерные мастера" обманывают своих клиентов?
- Бесплатный бот, который проверит файлы на предмет угроз более чем 70 антивирусами одновременно.
• А еще у нас часто проходят розыгрыши самых актуальных и новых книг по ИБ. Так что присоединяйся, у нас интересно!
Семантические теги HTML, такие как
<header>
, <article>
, <section>
и <footer>
, описывают структуру и смысл содержимого. Они делают код более читаемым для разработчиков и улучшенным для поисковых систем и вспомогательных технологий.<header>
<h1>Мой блог</h1>
</header>
<section>
<article>
<h2>Заголовок статьи</h2>
<p>Текст статьи...</p>
</article>
</section>
<footer>
<p>© 2024 Все права защищены</p>
</footer>
CodeBase | Frontend | #Основы
Please open Telegram to view this post
VIEW IN TELEGRAM
object-fit
— это CSS-свойство, которое определяет, как содержимое (например, изображения или видео) вписывается в контейнер, сохраняя пропорции или заполняя пространство.<div class="image-container">
<img src="example.jpg" alt="Пример">
</div>
<style>
.image-container {
width: 300px;
height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover; /* Заполняет контейнер, обрезая края */
}
</style>
object-fit: cover
заставляет изображение заполнять контейнер, обрезая края, чтобы сохранить пропорции. Это удобно для создания адаптивных галерей.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
reduceRight()
в JavaScript и как он используется?reduceRight()
— это метод массивов в JavaScript, который работает аналогично reduce
, но выполняет операцию справа налево.const numbers = [1, 2, 3, 4];
// Сложение чисел с обходом справа налево
const sum = numbers.reduceRight((acc, num) => acc + num, 0);
console.log(sum); // 10
reduceRight
суммирует элементы массива, начиная с последнего. Это полезно, когда порядок обработки элементов имеет значение.CodeBase | Frontend | #JS
Please open Telegram to view this post
VIEW IN TELEGRAM