27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
⚡️ Свойство initial-letter
Оно принимает два значения, разделенных пробелом:
p:first-letter {
initial-letter: 3.5 3;
}
👩💻 Vue.js 3 Design Patterns and Best Practices
Сайт предоставляет перевод книги, посвященной лучшим практикам и шаблонам проектирования в Vue.js 3. В книге рассматриваются основные принципы работы с фреймворком, инструменты разработки (Pinia, Router, Vite и др.) и эффективные подходы к созданию веб-приложений
Книга ориентирована на разработчиков, знакомых с Vue и JavaScript
⛓ Ссылка: https://vue-faq.org/ru/book/
➡️ @FrontendPortal | #Vue #resourse
⚡️ Экс-сотрудник лаборатории Касперского создал два канала по IT и кибербезопасности
▪️ Пакет безопасности
▪️ Культ безопасности
Здесь вы узнаете ТОП-10 IT-гигантов в России с самой слабой защитой от взломов, какие компании «барыжат» вашими персональными данными и как этому противостоять.
Для людей из индустрии: полезный софт, ИИшки для работы, новости из сферы и куча полезностей, которые не найдёте в других каналах.
Подписывайтесь: раз и два.
⚡️ Функция minmax в CSS гридах
В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.
Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem
➡️ @FrontendPortal | #CSS
🈳 useEffect vs useLayoutEffectuseEffect: асинхронный и не задерживает отрисовку DOM в браузере.useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере.
➡️ @FrontendPortal | #react
⚡️ Домены .new (введенные Google) полезны для быстрого доступа к определенным приложениям
➡️ @FrontendPortal | #разное
🔝 10 бесплатных видео-курсов по Фронтенду
Мы за бесплатное обучение! 👨💻 Поэтому для наших подписчиков канала "Фронтенд заметки" мы собрали 10 лучших (на наш взгляд) бесплатных курсов по фронтенду, как для начинающих, так и для более опытных.
⭐️ Полезный репозиторий для тренировки по JavaScript
Сохраняйте подборку вопросов по JS, в которой можно проверить и освежить свои знания или подготовиться к собеседованию. Список вопросов обновляется и сейчас там 155 пунктов.
🔜 Забираем здесь
➡️ @FrontendPortal | #resourse
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
/channel/+-kDHcC_11fozNzcy
💡 Тег <meter> в действии
Отображает текущее значение в заданном диапазоне
<meter value="75" min="0" max="100">75%</meter>
⚡️ Задаём цвет в зависимости от темы операционной системы пользователя
Функция light-dark() принимает два аргумента и возвращает один из них в зависимости от того, какую тему выбрал пользователь.
Первое значение вернётся, если у пользователя установлена светлая тема, либо тема не выбрана, а второе, если установлена тёмная тема
⏩Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение
🔜 На данный момент функция light-dark() поддерживается в последних версиях браузеров(80.93%)
➡️ @FrontendPortal | #CSS
Фронтенд задачки в картинках — просто, наглядно и понятно. Проверяй свои знания в интерактивном формате каждый день.
Присоединяйтесь: @Frontend_Task
Обводка текста с помощью CSS-свойства text-stroke
Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:
webkit-text-stroke-width
webkit-text-stroke-color
⚡️ Преобразование текста в речь
SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость)
В этом примере я создал простое поле ввода и вызываю данный фрагмент во время события клика на соседнюю кнопку
⏩ Этот API также поддерживает преобразование речи в текст!
🔜 Подробнее — Cтатья
➡️ @FrontendPortal | #js
CodHub теперь в Telegram❗️
Устали от 100500➕ бесконечного множества каналов, в поисках полезного материала и новостей из мира 🤩 ? Добро пожаловать в наш проект CodHub l Программирование — Мы собираем для вас все лучшие материалы любых направлений в одном канале:
📱 — Frontend 👩💻 — C+
📱 — Python 🤔 — Hacking
📱 — Java 👩💻 — Golang
📱 — C# 👩💻 — Linux
👩💻 — Lua 👩💻 — php
👩💻 — Kotlin 👩💻 — Git
👩💻 — Assembler 👩💻 — Swift
🖥 — SQL 👩💻 — Mob. Develop
👣 — Backend 🐞— Qa Automation
Успей подписаться❗️ — @CodHub_tg
🔒 7539 ГБ платного контента для программистов выложили в Telegram
Выбирай направление и обучайся:
👩💻 Java — 644 ГБ
🖥 Python — 724 ГБ
🖥 Frontend — 981 ГБ
🖥 Backend — 817 ГБ
👩💻 Все языки — 4373 ГБ
Пост удалится через 48 часов 🕔
Держите 3 классных эффекта при наведении для ваших изображений 🔥
Сохраняйте их для своего следующего проекта
➡️ @FrontendPortal | #tutorial
Определяем в CSS, что элемент пустой
Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.
В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента
➡️ @FrontendPortal | #CSS
✍️ Простые советы для тех, кто столкнулся с высшей математикой:
1) Помните, что математика — это не какой-то набор формул. Это язык, который описывает мир вокруг нас.
2) Используйте знания в повседневной жизни.
3) Читайте канал преподавателя по высшей математике @lav_math - он понятным языком объяснит все сложные вещи.
Вас ждут бесплатные практикумы на различные темы, готовые шпаргалки уроков и активное комьюнити 🔥
Приятный бонус - вы всегда можете обратиться за помощью с учёбой или решением задач.
Не теряйте 👉 @lav_math
Эта история про «Netflix отказался от React» все еще распространяется спустя годы, и она по-прежнему вводит в заблуждение
это было в 2017 году и только для лендинга 🤣
➡️ @FrontendPortal
🌟 Простой трюк для добавления градиентной заливки к тексту в CSS
Задаем тексту фоновый градиент с помощью свойства background-clip с значением text. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;
➡️ @FrontendPortal | #CSS #tutorial
⚡️ Шпаргалка по Nuxt.js от Vue Mastery: на заметку фронтенд-разработчику
Этот файл подходит для быстрого ознакомления с основными функциями Nuxt.js и может быть полезен разработчикам, которые только начинают работать с фреймворком, а также тем, кто хочет быстро вспомнить ключевые особенности и команды
➡️ @FrontendPortal | #шпора
⚡️ Новый синтаксис медиа-запросов CSS — Range Syntax
Поддержка на данный момент составляет 89.94%
➡️ @FrontendPortal | #CSS
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.
🌟 Меняем привычный курсор-стрелку на более подходящий
С помощью свойства cursor можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент
Обязательно укажите через запятую одно из стандартных значений. Это нужно на случай, если браузер не смог загрузить или отобразить картинку. Тогда будет показан тот курсор, который вы указали в конце значения
➡️ @FrontendPortal | #CSS
box-sizing: content-box vs border-box
⏩При значении свойства box-sizing, равном content-box (значение по умолчанию) ширина элемента рассчитывается следующим образом:
Ширина контентной области (100) + внутренний отступ слева и справа (10 + 10) + ширина правой и левой рамок (10 + 10). Итого: 140 пикселей.
Аналогично с высотой.
Выходит что первый элемент получил размеры 140 х 140
⏩Размер второго элемента считается иначе. Из-за значения border-box браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.
➡️ @FrontendPortal | #CSS #собес
Прими участие в «Хакатоне по кибериммунной разработке 3.0» от «Лаборатории Касперского» с призовым фондом 1 000 000 рублей!
Регистрация на хакатон открыта до 15 ноября
Приглашаем разработчиков, аналитиков, архитекторов ПО, экспертов по информационной безопасности и студентов программирования и кибербезопасности. Участвуй индивидуально или в команде до 5 человек.
Тебе предстоит разработать систему удалённого управления автомобилем для каршеринга, устойчивую к кибератакам. Специальных знаний в автомобильной отрасли не требуется — задача будет понятна всем, независимо от опыта.
Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского».
Ключевые даты:
• 15 октября – 15 ноября – регистрация участников
• 8 ноября – митап с экспертами и игра «Огнеборец»
• 15 ноября – старт хакатона
• 17 ноября – дедлайн загрузки решений
• 22 ноября – подведение итогов и объявление победителей
Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов
Использование CSS-градиента для затемнения картинки
Одним из способов затемнения изображений с помощью CSS является использование градиентов. Этот метод позволяет более гибко настроить эффект, а также добавить различные переходы и цветовые комбинации
СSS:
background: linear-gradient(
to right,
rgb(0 0 0 / 0.5),
rgb(0 0 0 / 0)
), url("img.jpg") 100%/cover no-repeat;
Псевдоэлемент ::selection
Применяет стиль к выделенному пользователем тексту
::selection {
background-color: green;
color: yellow;
}color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow