27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Обводка текста с помощью CSS-свойства text-stroke
Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:
webkit-text-stroke-width
webkit-text-stroke-color
Совет по JS
Самый простой способ получать/устанавливать query-параметры
Можно использовать свойство searchParams (экземпляр URLSearchParams) у объекта URL, чтобы получать и задавать query-параметры URL
➡️ @FrontendPortal | #tip by Shripal Soni
Привет. Вот тебе самые топовые каналы по IT!
⚙️ Free Znanija (IT) — Самая огромная коллекция платных курсов, которые можно скачать бесплатно;
👩💻 IT Books — Самая огромная библиотека книг;
💻 Hacking & InfoSec Base — Крутой блог белого хакера;
🛡 CyberGuard — Всё про ИБ;
🤔 ИБ Вакансии— Всё, чтобы найти работу в ИБ;
👩💻 linux administration — Всё про Линукс;
👩💻 Программистика — Python, python и ещё раз python;
👩💻 GameDev Base — Всё про GameDev;
🖥 Coding Base — Мемы, полезные репозитории и инструменты, а так же софт:
😆 //code — Самые топовые мемы по IT:
А так же крутой блог админа: Rahol Jey | тг вайб
Совет по CSS
Прокачай стиль выделения текста с помощью ::selection
Псевдоэлемент применяет стиль к выделенному пользователем тексту
В правилах стилей допускается использовать следующие свойства: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow
Это не работает в Safari на iOS
➡️ @FrontendPortal | #tip by Shripal Soni
А вы знали, что в Node больше не нужен dotenv?
Теперь можно читать .env напрямую, без установки сторонних зависимостей, с помощью метода process.loadEnvFile()
Доступно начиная с версии 21.7 Node.js
➡️ @FrontendPortal
3 разных способа достичь общей цели - добавить градиент в качестве границы к элементам
— Способ 1:
Использовать встроенное свойство border-image и задать градиент в качестве изображения. Необходимо также указать значения для свойства slice, чтобы добиться нужного эффекта
— Способ 2:
Создать псевдоэлемент и поместить его под основной элемент. Этот псевдоэлемент будет чуть больше по размеру и с фоном в виде градиента, чтобы создать иллюзию градиентной рамки у основного элемента.
— Способ 3:
Добавить настоящую рамку, но при этом использовать два фона для элемента: сплошной фон, который будет до padding box(content and padding), и градиент, который будет растягиваться до области border box (content, padding и border), при этом сплошной фон будет сверху
➡️ @FrontendPortal | #CSS
«Как сделать так, чтобы пиксель-арт не был размытым в Chrome?»
Попробуй image-rendering: pixelated
Свойство image-rendering указывает браузеру, как интерполировать изображение при изменении его размера. Интерполяция применяется при масштабировании, чтобы изменить количество пикселей и избежать искажений
Можно использовать с изображениями, фоновыми картинками, <video> и <canvas>.
Подробнее о свойстве тут
➡️ @FrontendPortal
Неопределенный чекбокс
Когда у нас есть главный чекбокс в таблице или древовидной структуре чекбоксов, нужно отображать его в состоянии неопределенности, если выбраны только некоторые записи
Просто сделайте это, установив свойство indeterminate чекбокса в true:
checkboxEle.indeterminate = true;
:indeterminate
Готовимся к собесу: нашёл годную платформу — YeaHub
Там собрана огромная база вопросов по 20+ IT-направлениям, включая Frontend. Есть фильтрация по навыкам и сложности
Каждый вопрос подробно разобран, чтобы ты быстро вник в тему. А встроенный тренажер поможет заучить ключевые моменты и трекать прогресс
Всё это бесплатно и на русском, забираем 🍯
➡️ @FrontendPortal | #resourse
Бесплатный курс по PostgreSQL от практиков рынка
Присоединяйтесь к бесплатному курсу по основам PostgreSQL от Selectel и Эльбрус Буткемп. Он будет полезен Junior- и Middle-специалистам: администраторам баз данных, разработчикам, DevOps-инженерам и аналитикам.
Вы научитесь:
🔹создавать и связывать таблицы,
🔹выполнять базовые операции с данными,
🔹работать с РСУБД.
Бонусы: вы можете получить сертификат о прохождении курса, а также промокоды для практики на мощностях Selectel.
Начните обучение уже сегодня.
Реклама. АО «Селектел», ИНН 7810962785, ERID: 2VtzqvpW3qJ
Держите небольшой классный трюк в CSS. Добавление анимированного подчеркивания при наведении на текст 😄
Здесь на самом деле это не подчеркивание, а фоновое изображение, которое представляет собой линейный градиент сверху вниз. Первые 90% фона просто прозрачные, а нижние 10% - желаемый цвет
Изначально ширина фона равна 0% и увеличивается до 100% при наведении
Мы также меняем положение фона, чтобы при наведении подчеркивание увеличивалось слева, а при снятии наведения выходило справа
➡️ @FrontendPortal | #CSS
CodePen дня: это компонент с реакцией на приближение от Amit Sheen
Весь JavaScript здесь только передаёт позицию курсора в CSS через кастомные свойства — и всё. Все вычисления выполняются в CSS с помощью нативных математических функций
https://codepen.io/amit_sheen/full/gbbzbeR
➡️ @FrontendPortal | #codepen
Мой любимый факт о JS Date
Date в JavaScript?
Принес крутейший сайт для прокачки алгоритмов — визуальный тренажёр с пошаговым выполнением кода
70+ алгоритмов на JavaScript, Java и C++, всё интерактивно и с наглядной визуализацией
https://algorithm-visualizer.org/
➡️ @FrontendPortal | #resourse
🎉 Большой розыгрыш от крупнейшего IT-медиа 1337, легендарного паблика Рифмы и Панчи, канала Техно.
Победителей будет много, а для участия нужны лишь пара кликов:
1. Подписаться на Рифмы и Панчи, 1337 и на Техно.
2. Нажать «Участвовать» под этим постом
Что по призам:
1 место - Iphone 16 Pro
2 место - PS5 Slim
3 место - Nintendo Switch 2
4-10 места - 10 000 рублей на карту
👩💻 Всем программистам посвящается!
Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
👩💻 Frontend — t.me/frontend_ready
📱 JavaScript — t.me/javascript_ready
👩💻 Backend — t.me/backend_ready
📱 GitHub & Git — t.me/github_ready
👩💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
🤖 Нейросети — t.me/neuro_ready
👩💻 C/C++ — /channel/cpp_ready
👩💻 C# & Unity — t.me/csharp_ready
👩💻 Java — t.me/java_ready
🖼️ DevOps — t.me/devops_ready
👩💻 Linux — t.me/linux_ready
📖 IT Книги — t.me/books_ready
👩💻 Весь IT — t.me/it_ready
👩💻 Bash & Shell — t.me/bash_ready
🖥 Design — t.me/design_ready
📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!
Огромная библиотека классных цветовых палитр для твоих проектов. Всё чётко отсортировано, можно искать по трендам и категориям
Забираем здесь
➡️ @FrontendPortal | #resourse
Простой гайд по созданию изображения, которое отображает надпись при наведении
➡️ @FrontendPortal | #CSS
console.log(
"Программирование — В С Ё!"
)
Хочешь добавить эффект жидкого стекла в свой проект?
Нашёл бесплатный инструмент, который позволяет сгенерировать этот эффект с кучей настроек
https://glass3d.dev/
➡️ @FrontendPortal | #resourse
OpenIDE – профессиональные инструменты без ограничений
Первое большое онлайн-событие запуск OpenIDE — новой бесплатной мультиязычной среды разработки, построенной на базе IntelliJ IDEA Platform.
🧩 Вместе с ключевыми разработчиками, лидерами и представителями отрасли мы обсудим:
- Зачем появилась OpenIDE.
- Как она уже сегодня может заменить IntelliJ Platform для Java и Spring.
- В чём её ценность для всей экосистемы.
- Как работать с проектами на Go, Python и TypeScript.
- Как присоединиться к сообществу и помочь развитию проекта.
Покажем, почему OpenIDE — это не просто очередная сборка, а открытая экосистема для Java, Kotlin, Go, Python, JS, TS и десятков других языков.
👉🏻Со своим маркетплейсом. С исходниками. Без ограничений.
📅 31 июля в 17:00 МСК
📍 Бесплатно, онлайн, на всех наших платформах. Главное – зарегистрироваться.
#реклама
О рекламодателе
Идеальный пример использования функции if() в CSS от Arbaoui Mehdi
Функция if() в CSS позволяет внедрять условную логику прямо в стилях
CSS постепенно превращается в настоящий язык программирования 👍
➡️ @FrontendPortal
🔒 Гигабайты платных материалов для айтишников выложили в Telegram
Выбирай, всё бесплатно:
🤩229 ГБ — JS, HTML, CSS
🤩385 ГБ — Python
🤩422 ГБ — C, C++, C#
🤩147 ГБ — Java, PHP
🤩202 ГБ — Rust, Golang
🤩352 ГБ — Flutter, Kotlin, Swift
🤩168 ГБ — DevOps, СисАдмин
🤩242 ГБ — ИБ, Хакинг
🤩122 ГБ — Windows, Linux
🤩107 ГБ — Git, GitHub
🤩242 ГБ — БД (SQL и NoSQL)
🤩163 ГБ — QA-тестирование
🤩108 ГБ — ИИ, Machine Learning
🤩189 ГБ — Разработка игр
🤩171 ГБ — Разработка ботов
🤩612 ГБ — Собеседования в IT
🤩3942 ГБ — Другие направления
База ежедневно обновляется ⏳
Container Queries в действии
Медиазапросы, которые могут применяться на основе размера родительского элемента, а не всей области просмотра
HTML, используемый в этом примере:
<button class='responsive-button'>
<img src='cart.png' alt='...'>
<span class='text'>ADD TO CART</span>
</button>
С пылу с жару — Джош Комо выкатил полезную статью «A Friendly Introduction to SVG». Отличный вводный гайд по SVG, написанный человеческим языком
Автор пошагово проходит по базовым фигурам (линии, круги, прямоугольники и всё такое), показывает, как SVG легко анимировать и масштабировать, а главное — делает это без заумностей и с наглядными примерами
Годное чтиво под горячий кофе ✌️
➡️ @FrontendPortal | #CSS
🎁 РАЗЫГРЫВАЕМ MacBook Air!
Разыгрываем шикарный 13-дюймовый MacBook Air! Отличная рабочая машинка!
Условия участия максимально простые:
🔸Подписаться на телеграм-канал: @sqlhub
🔸Подписаться на телеграм-канал: @ai_machinelearning_big_data
🔸Нажать кнопку "Участвовать" ниже.
ВСЁ! Вы участник! Бот выберет одного человека, которому мы подарим этот MacBook. Доставка по зоне СДЭК.
Итоги подведём 14 августа.
Всем удачи! Пусть победит самый приятный человек!
⚠️ Если бот подвис — не беспокойтесь, вас все равно зарегистрирует, просто выполните условия и нажмите «Участвую».
Уважаемые фронтенд-разработчики, с сожалением сообщаем, что Figma добавила Liquid Glass 🙃
Не показывайте это дизайнерам
➡️ @FrontendPortal
⚡️Хотите научиться писать надежные тесты для React-приложений и улучшить свои навыки в тестировании?
Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.
Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.
👉Регистрация открыта: https://otus.pw/fshB/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Реализация паузы/старта видео в зависимости от состояния видимости страницы
Page Visibility API — это API браузера, который проверяет видимость страницы. Он помогает определять, скрыта или свернута текущая страница, и тем самым позволяет контролировать ее поведение и использование ресурсов
const video = document.querySelector('video');
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
video.pause();
} else {
video.play();
}
});
Откопал вам годноту для прокачки JS — 200+ упражнений для практики JavaScript, отсортированных по темам и уровню сложности
Забираем здесь 🍯
UPD: Бесплатно доступна только часть задачек из каждого раздела, полный доступ требует подписки:(
UPD2: Вот ещё подборка ресурсов с задачками по JS:
- Codewars / Leetcode
- W3resource
- Герой JS
- Edabit
- javascript30
- BFE.dev
- Exercism
➡️ @FrontendPortal | #resourse