Frontend Portal
38.4K subscribers
1.61K photos
727 videos
7 files
1.26K links
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки

Сотрудничество, реклама: @devmangx

Менеджер: @Spiral_Yuri

РКН: https://clck.ru/3Fs3wT
Download Telegram
Разделительные линии между option

А вы знали, что теперь вы можете добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения

Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых

Если вам нужна определенная группировка, с именами групп, используйте <optgroup>

➡️ @FrontendPortal | #HTML
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5410🤯2
This media is not supported in your browser
VIEW IN TELEGRAM
Эта платформа предлагает более 500 вопросов, разбитых на 20 категорий, включая такие темы, как Git, CSS, JavaScript, React и многое другое.

Все вопросы отсортированы по категориям и курируются пользователями.

Вопросы на английском, но это отличная возможность подтянуть язык 👍

👉 https://quizzes.madza.dev/

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
👍235🔥2🤯1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁104👍5🔥2👨‍💻1
💡 Совет по JavaScript

Вы могли не знать, что мы можем настроить вывод JSON.stringify()

По умолчанию JSON.stringify(data) не сериализует Set, Map, BigInt и т. д. Но с помощью функции replacer можно управлять тем, какие данные попадут в итоговую строку

✔️ #tip by Shripal Soni

➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
👍455🔥4😁1
Подборка небольших советов и трюков, которые вы можете использовать, используя современный синтаксис CSS

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍536🏆1
This media is not supported in your browser
VIEW IN TELEGRAM
Наткнулся на интересную библиотеку — Shepherd JS

Это мощная библиотека JS, предназначенная для создания интерактивных пошаговых туров и руководств на веб-страницах

Она поддерживает интеграцию с различными фреймворками, такими как React, Ember, Angular, Vue.js, а также может использоваться с чистым JavaScript

А минималистичный стиль оформления позволяет настроить внешний вид под свой дизайн без лишних заморочек. Плюс, полная поддержка клавиатурной навигации и соответствие стандартам доступности

Для WordPress существует плагин Simple Tour Guide на основе Shepherd.js

Если вы хотите увидеть Shepherd.js в действии, рекомендую посмотреть следующее видео

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
👍304🔥4🏆3
В поиске инвесторов 🚽

➡️ @FrontendPortal | #memes
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥48😁43👍94👨‍💻2💊1
Мало кто знает этот крутой трюк для фавикона вашего сайта.

Вы можете загрузить другой фавикон для темного режима.

Как это работает:

🔸Первый <link> указывает фавикон для светлого режима (обычный favicon)

🔸Второй <link> загружает другой фавикон, если у пользователя включен темный режим. Это определяется с помощью media="(prefers-color-scheme: dark)"

Если вы используете SVG в качестве фавикона, вы также можете добавить CSS-стили прямо внутри, чтобы он адаптировался (2 картинка)

➡️ @FrontendPortal | #tip
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥54👍146
Туториал по созданию перекрывающихся элементов c помощью Grid CSS

В Grid более одного элемента могут занимать одну и ту же ячейку сетки. Мы используем этот факт в демонстрации

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍56🔥185🤯1