Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22.6K subscribers
2.38K photos
144 videos
38 files
4.78K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
Лучший способ получить/установить поле ввода со значением даты с помощью JavaScript

👉 Поиграть можно здесь

#javascript #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍216
💡 Использование сокращенной записи для определения всех четырех позиций в CSS

#css #tip by Shripal Soni
👍21
This media is not supported in your browser
VIEW IN TELEGRAM
Indeterminate checkbox

С помощью свойства indeterminate в JavaScript и псевдокласса :indeterminate в CSS можно легко управлять и кастомизировать чекбоксы для улучшения UX.

#css #javascript #tip by Shripal Soni
21👍5
This media is not supported in your browser
VIEW IN TELEGRAM
💡Простой способ отключить группу элементов управления формы одновременно с помощью HTML

#html #tip by Shripal Soni
👍323
💡 7 способов скрыть элементы с помощью CSS: основные достоинства и недостатки

#css #tip by Shripal Soni
👍23👏3
💡 Кастомизируйте вывод c помощью JSON.stringify()

Передайте функцию замены в формате JSON.stringify(data, replacer?, space?), чтобы настроить выходные данные.

#javascript #tip by Shripal Soni
👍25🥱2
This media is not supported in your browser
VIEW IN TELEGRAM
💡Реализация чистых разрывов строк для длинных URL-адресов с помощью HTML-элемента <wbr>

#html #tip by Shripal Soni
16👍12🔥5🎉1
💡 Использование currentColor в CSS для избежания дублирования кода, связанного с указанием цвета

#css #tip by Shripal Soni
👏20
💡 Форматирование даты в JavaScript

Шпаргалка для фронтенд-разработчика.

#javascript #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Простой способ создания нового контекста наложения в CSS

Шпаргалка для фронтенд-разработчика.

#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
💡 Непрямоугольные текстовые блоки (Non-rectangular Text Block)

Простой способ использования CSS-свойства shape-outside для создания обтекания текста вокруг фигур нестандартной формы.

В Firefox DevTools есть интерактивный инструмент для редактирования/отладки контуров фигур, созданных с использованием свойств shape-outside/clip-path.

#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🤩4👏1
💡 console.context() в действии

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

console.context() может помочь в этом. Он является экспериментальным и доступен только в браузерах на базе Chromium, но это хороший шаг в правильном направлении.

1️⃣ Создайте конкретный инстанс логгера для части вашего приложения:

const myComponentLogger = console.context("name-of-my-component");


2️⃣ Затем логируйте сообщения в обычном режиме, используя ваш новый логгер:

myComponentLogger.log("This is a log message from my component");

myComponentLogger.warn("This is a warning message from my component");


3️⃣ При просмотре логов в консоли отфильтруйте сообщения по названию контекста.

#devtools #tip
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24🥰31👍1
This media is not supported in your browser
VIEW IN TELEGRAM
💡Использование isolation: isolate помогает избежать неожиданных проблем со слоями (z-index) и позволяет группировать элементы в свой стековый контекст без вмешательства других элементов страницы.

#css #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥212