-
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx
Проверка фокуса на элементе
Чтобы определить, сфокусирован ли элемент, используя JavaScript, мы можем использовать свойство activeElement, которое возвращает текущий элемент с фокусом
let el = document.querySelector('.btn-white');
let isFocus = el === document.activeElement;
console.log(isFocus); // true/false
Задачки по Front-end - канал с задачками и тестами по JS/CSS/HTML.
На канале вы найдете:
- тесты по Javascript;
- тесты по CSS;
- тесты по HTML;
- вопросы с собеседований с решением по JS, CSS, HTML
Подписывайтесь, решайте и предлагайте свои решения: @frontquizes
Как избежать выгорания, даже если вы постоянно вкалываете?
🎁 Бонус для подписчиков канала Психолог взрослого человека из вчерашней рекомендации: практический мини-курс из 3х видео.
После прохождения вы найдете причины упадка сил, апатии и выгорания. И поймете, как из этого выйти.
Переходите в канал - мини-курс вы найдете в закрепе.
И еще много полезного для айтишников, которые хотят работать без выгорания и ущерба для личной жизни ⚡️
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.
🔤 Найден полезный канал по Frontend - разработке!
Его ведёт Frontend разработчик с опытом больше 5 лет! 👩💻
В канале вы найдете:
▫️ полезные статьи про 👩💻 👩💻 👩💻 👩💻 👩💻
▫️ новости из мира Frontend
▫️ ежедневно в канале выходят вопросы и задачи с реальных собеседований с подробными объяснениями
Автор этого канала может ответить на любой ваш вопрос про Frontend. пишите в лс
В этом канале реально много полезного.
Аккордеон (FAQ)
Реализовано на HTML, CSS и JS
🔗 Код: Codepen
👉 @FrontendPortal | #codepen
Обнаружение устройств, поддерживающих hover
Медиазапрос, позволяет определить, поддерживает ли основное указывающее устройство пользователя возможность наведения (hover)
@media (hover: hover) {
.btn:hover {
/* Ваши стили */
}
}
Я айтишник и я устал!
Рутина, прокрастинация, куча задач и 0 желания их выполнять. Еще и в семье конфликты. Че делать?
Хватит грызть самого себя и заставлять через силу - сделаешь только хуже!
Лучше подпишись на того, кто уже не первый год работает с IT-специалистами и помогает им справиться с апатией и прокрастинацией - Психолог с научным подходом.
👨🏻💻 Не очередной инфоциган, а практикующий психолог с дипломом и аккредитацией.
✔️ Как оторваться от ленты соц. сетей и сесть за работу с удовольствием?
✔️ Как перестать работать по выходным и при этом все успевать?
✔️ Как избавиться от постоянной тревожности?
✔️ Как успокоить конфликты в семье и перестать срываться на всех, а вместо этого получить поддержку и понимание со стороны близких?
Подписывайся на канал @remizov_changes - начни работать и жить в кайф, не скатываясь в кризисы и выгорание!
А в закрепе лови бонус - 7 практик для снятия головной боли без лекарств 💆🏼♂️
Не эзотерика, а минус одна отмазка от работы - “голова болит, посмотрю лучше еще один видосик”
Подборка интересных вещей, которые можно сделать с помощью тега <a>
👉 @FrontendPortal | #HTML #подборка
Как быстро изучить JavaScript и ReactJS ⁉️
Привет! Я Андрей Шопинский — Frontend-разработчик из крупного Российского банка.
⚠️ 26 апреля в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале про Frontend-разработку!
На трансляции будут раскрыты следующие темы:
— Как перейти от вёрстки к освоению JS;
— Зачем нужен ReactJS и как быстро его изучить;
— Секрет скоростного обучения в IT-сфере.
🔥 Ты сможешь задать свои вопросы в прямом ЭФИРЕ!
Подписывайся на канал, чтобы не пропустить!
Реклама. самозанятый Шопинский А.О. ИНН: 312834439322. erid: 2VtzqwJpcGp
Автоматическое увеличение высоты textarea
Реализовано на HTML, CSS и JS
🔗 Код: Codepen
👉 @FrontendPortal | #codepen
Атрибут capture
Атрибут capture доступен для файловых <input> (тех, что имеют type="file"). Он позволяет выбрать для записи фронтальную или основную камеру телефона пользователя, а также микрофон
<input type="file" accept="image/*" capture="environment">
Шпаргалка по объекту Number в JS
👉 @FrontendPortal | #js #шпора
Быстрый способ поделиться вашим кодом с помощью Codepen
• В браузерную строку вбиваем pen.new
• Перетаскиваем файлы в соответствующие им места
• Жмем кнопку «Save» в левом верхнем углу страницы
• Жмем кнопку «Share» чтобы поделиться своим кодом с другими
👉 @FrontendPortal | #лайфхак
Подборка интересных вещей, которые можно делать со списками в HTML
👉 @FrontendPortal | #HTML
Значение theme-color
Позволяет менять цвет адресной строки браузера и его верхней части на мобильных устройствах
Чтобы установить желаемый цвет, добавьте к <meta> атрибут content со значением цвета
<meta name="theme-color" content="#50a2de">
Прокачиваем навыки CSS с помощью селектора :has()
Псевдокласс :has() позволяет уточнить основной селектор дополнительным. Это единственный способ выбрать элемент на основе дочернего или соседнего элемента посредством CSS
/* Применяем стили ко всем ссылкам, которые содержат изображения */
a:has(img) {
/* Стили */
}
Форматирование чисел и Intl.NumberFormat
Intl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др.
Этот конструктор принимает локаль и объект с настройками
new Intl.NumberFormat(locale, options).format(number)
Animate.css — это библиотека готовых к использованию кроссбраузерных анимаций для ваших проектов
🔗 Ссылка: https://animate.style/
👉 @FrontendPortal | #resourse
Ленивая загрузка изображений
Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов <img> и <iframe>, находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
А теперь посмотри и прочитай внимательно ‼️ Это 12000$ за 3 часа
И это результат фрактальной логики в финансовых решениях
Это принцип, который пробивает многие жизненные и финансовые пределы
И особенно сильно он влияет на тех, кто умеет работать на результат и готов работать еще больше
Если ты такой человек, то открой материал «ФРАКТАЛЬНАЯ ЛОГИКА В ФИНАНСОВЫХ РЕШЕНИЯХ», и тогда ты поймешь, что впереди тебя ждет твой новый максимум 📈
Сейчас тебя может остановить только твоя лень, потому что за материал платить не нужно 🤝
Действуй! - https://t.me/+Ne3eY_4Nis84NzJk
Шпаргалка по оператору typeof
👉 @FrontendPortal | #js #шпора
Создаем превью сайта при помощи Open Graph разметки
С помощью этой разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте вашего сайта
Подробнее — Статья
👉 @FrontendPortal | #HTML #разное
Совет фронтендерам: уважайте свое время
В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации.
Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram
Возвращение на предыдущую страницу
History API позволяет работать с историей браузера в пределах одной сессии. С помощью History API можно переходить по истории вперёд, назад и управлять содержимым истории
Перемещаем пользователя на страницу назад:
history.back();
// или
history.go(-1);
history.forward();
// или
history.go(1);
А теперь посмотри и прочитай внимательно ‼️ Это 12000$ за 3 часа
И это результат фрактальной логики в финансовых решениях
Это принцип, который пробивает многие жизненные и финансовые пределы
И особенно сильно он влияет на тех, кто умеет работать на результат и готов работать еще больше
Если ты такой человек, то открой материал «ФРАКТАЛЬНАЯ ЛОГИКА В ФИНАНСОВЫХ РЕШЕНИЯХ», и тогда ты поймешь, что впереди тебя ждет твой новый максимум 📈
Сейчас тебя может остановить только твоя лень, потому что за материал платить не нужно 🤝
Действуй! - https://t.me/+BR-xYV99jEFmNTU8
Alfa Frontend Meetup #3
Митап frontend-сообщества про архитектуру.
Поговорим про webpack module federation, рассмотрим статический анализ кода и попробуем применить этот подход к статическому анализу зависимостей с помощью программирования в ограничениях, обсудим плюсы и минусы монорепозиториев.
Когда: 25 апреля, 19:00.
Где: Москва, пр. Андропова, д. 18, к. 3 и онлайн.
Вас ожидают доклады спикеров:
▪️Алексей Охрименко, техлид в Yandex Cloud Tracker, расскажет о статистическом анализе зависимостей.
▪️Алексей Николаев, Teamlead в Sendsay.ru, разберёт плюсы и минусы монорепозиториев.
▪️Степан Иваньков, главный frontend-разработчик в «Альфа-Банке», расскажет о том, как перевести 45 приложений на webpack module federation и ничего не сломать.
Регистрируйтесь
Больше полезного в комьюнити @alfa_frontend
erid: LjN8K6kfJ
Реклама. АО «Альфа-Банк». ИНН 7728168971.
‼️Всем кодерам посвящается‼️
Code Ready — полезные ресурсы, шпаргалки, плагины, разработка веб-приложений, и многое другое для твоих проектов, сразу с готовым кодом, и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
Лучшие способы создания закругленных углов
Чтобы создать закругленные углы, мы часто устанавливаем border-radius на большое значение, например 9999px. Но мы можем использовать для этого относительно менее хакерские решения
.box {
border-radius: 100vmax;
}.box {
border-radius: calc(Infinity * 1px);
}