27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Эффект печати текста
Трюк заключается в автоматическом пошаговом изменении ширины текстового элемента (по одному символу за раз)
.typing-effect {
width: 10ch;
overflow: hidden;
animation: typing 1s steps(10) infinite alternate-reverse;
}
@keyframes typing {
from { width: 0ch; }
}
Недавно наткнулся на интересный сайт CSS Tip, который делится мини-советами по CSS
Это отличный ресурс для тех, кто хочет быстро освежить свои знания или узнать о новых фишках CSS, буквально за минуту.
⛓ Ссылка: https://css-tip.com/
➡️ @FrontendPortal | #resourse
Выравнивание последней строки текста
В случае необходимости выравнивания последней строки используйте text-align-last, значения свойства совпадают с text-align
.text {
text-align-last: right;
}
⚡️ Как установить динамические имена свойств с помощью ES6
ES6 ввел новый синтаксис для определения динамически вычисляемых имен свойств в литералах объектов.
То, что раньше требовало двух шагов, теперь сводится к компактному синтаксису 🥳
Вы можете использовать динамические свойства как обычные, просто обернув их в квадратные скобки [ ], и внутри можно поместить любое выражение. Это аналогично использованию квадратных скобок для вручную установленного значения свойства.
➡️ @FrontendPortal | #js
🔒 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
Создание простых форм "blob" в #css с помощью свойства border-radius!
Создайте квадратный элемент с нужными размерами и добавьте немного хаотичности с помощью свойства border-radius, чтобы получить крутую форму "blob"
В контексте дизайна и CSS, blob — это абстрактная форма с неровными, органическими контурами, напоминающими пятна или капли, вместо стандартных геометрических фигур
Крутое видео — Некоторые функции Dev Tools, на которые вы, возможно, раньше не обратили особого внимания
➡️ @FrontendPortal
⚡️Слита База из 1000+ топовых IT-курсов
👩💻 Все языки: /channel/+aJ6DgvwKYzMDFi
👩💻 Frontend: /channel/+BsAYMK1p1mNDAy
👣 Backend: /channel/+KvlCPZxamGdkNDAy
📊 SQL: /channel/+ybipaFF2vNc0Njky
Всё лучшее про IT бесплатно — уже на Базе 🚀
⚡️ Свойство 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