This media is not supported in your browser
VIEW IN TELEGRAM
Chrome DevTools теперь поддерживает индивидуальное ограничение скорости для отдельных сетевых запросов
Разработчики просили об этом годами! Теперь DevTools позволяет эмулировать медленное сетевое соединение не для всей страницы целиком, а только для конкретных запросов.
Это помогает тестировать, как веб-приложение работает и обрабатывает проблемы, когда отдельные ресурсы (например, изображения, скрипты или API-запросы) загружаются медленно
➡️ @FrontendPortal
Разработчики просили об этом годами! Теперь DevTools позволяет эмулировать медленное сетевое соединение не для всей страницы целиком, а только для конкретных запросов.
Это помогает тестировать, как веб-приложение работает и обрабатывает проблемы, когда отдельные ресурсы (например, изображения, скрипты или API-запросы) загружаются медленно
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥93👍14❤11
API интернационализации (Intl) в браузерах и Node.js предоставляет множество полезных инструментов для работы с языковыми специфическими отображениями, например, с "компактной" нотацией, такой как 10K, 5M и т.д.
Вот пример, как вы можете использовать это😎
Это особенно полезно для таких вещей, как панели управления и страницы профилей в социальных сетях.
Также этот API предлагает множество других возможностей, обязательно ознакомьтесь с полной документацией на MDN
➡️ @FrontendPortal | #js
Вот пример, как вы можете использовать это
Это особенно полезно для таких вещей, как панели управления и страницы профилей в социальных сетях.
Также этот API предлагает множество других возможностей, обязательно ознакомьтесь с полной документацией на MDN
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41❤18🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, когда один из чипов удаляется.
Это происходит из-за режима
➡️ @FrontendPortal
Это происходит из-за режима
popLayout в AnimatePresence из motion/react, который обеспечивает более плавную и быструю анимацию при удалении элементаPlease open Telegram to view this post
VIEW IN TELEGRAM
👍25❤12🔥2💊2
Вертикальные вкладки доступны за флагом в Chrome 145 (текущая бета)
1. Перейдите на
2. Включите флаг (установите Enabled)
3. Перезапустите Chrome
4. Кликните правой кнопкой по панели вкладок и выберите “Move Tabs To The Side” (переместить вкладки вбок)
➡️ @FrontendPortal
1. Перейдите на
chrome://flags/#vertical-tabs2. Включите флаг (установите Enabled)
3. Перезапустите Chrome
4. Кликните правой кнопкой по панели вкладок и выберите “Move Tabs To The Side” (переместить вкладки вбок)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20❤9💊5👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локального терминала: можно звать коллег по ссылке, видеть курсоры друг друга и даже чатиться
Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут
➡️ @FrontendPortal
Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут
Please open Telegram to view this post
VIEW IN TELEGRAM
❤28👍15🔥5🤯1
jQuery 4.0 тихо вышел в релиз!
https://github.com/jquery/jquery/releases/tag/4.0.0
Легенда живее всех живых🫡
➡️ @FrontendPortal
https://github.com/jquery/jquery/releases/tag/4.0.0
После почти 10 лет с момента публикации ветки 3.0 и спустя 20 лет после основания проекта состоялся релиз JavaScript-библиотеки jQuery 4.0, используемой по данным организации W3Techs на 70.9% из 10 млн наиболее посещаемых сайтов в сети
Легенда живее всех живых
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
Release Release 4.0.0 · jquery/jquery
Changelog
https://blog.jquery.com/2026/01/17/jquery-4-0-0/
Ajax
Don't treat array data as binary (992a1911)
Allow processData: true even for binary data (ce264e07)
Support binary data (includi...
https://blog.jquery.com/2026/01/17/jquery-4-0-0/
Ajax
Don't treat array data as binary (992a1911)
Allow processData: true even for binary data (ce264e07)
Support binary data (includi...
😁73🔥36❤14😢2
This media is not supported in your browser
VIEW IN TELEGRAM
React-Grid-Layout — это система сеточного расположения, похожая на Packery или Gridster, для React
Она позволяет создавать перетаскиваемые, изменяемые по размеру и адаптивные сеточные макеты в React. Представьте себе панели управления, админ-панели, страницы аналитики или конструкторы страниц, где пользователи могут свободно перемещать и изменять размеры блоков.
Вы один раз определяете сетку, и она сама управляет перетаскиванием, изменением размеров и точками прерывания
GitHub: react-grid-layout
➡️ @FrontendPortal | #resourse
Она позволяет создавать перетаскиваемые, изменяемые по размеру и адаптивные сеточные макеты в React. Представьте себе панели управления, админ-панели, страницы аналитики или конструкторы страниц, где пользователи могут свободно перемещать и изменять размеры блоков.
Вы один раз определяете сетку, и она сама управляет перетаскиванием, изменением размеров и точками прерывания
GitHub: react-grid-layout
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥48💊16❤14👍6🌚1
Обнаружение статуса соединения
Для отслеживания статуса подключения можно использовать
Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях
➡️ @FrontendPortal | #js
Для отслеживания статуса подключения можно использовать
navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети.Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях
window.addEventListener('offline', (e) => {
console.log('offline');
});
window.addEventListener('online', (e) => {
console.log('online');
});Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤35🔥20👍16🤝1
Media is too big
VIEW IN TELEGRAM
Интерактивная библиотека визуализации данных — ECharts
Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.
- Предоставляет более 20 типов диаграмм
- Переключение между рендерингом Canvas и SVG
- Автоматически генерируемые описания диаграмм
- Написана на чистом JavaScript
Забираем тут
➡️ @FrontendPortal | #resourse
Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.
- Предоставляет более 20 типов диаграмм
- Переключение между рендерингом Canvas и SVG
- Автоматически генерируемые описания диаграмм
- Написана на чистом JavaScript
Забираем тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39❤9🔥5
Каждый раз, когда видишь setState внутри useEffect, иди постой в углу 5 минут и подумай о том, что ты натворил.
А потом удали этот useEffect
➡️ @FrontendPortal
А потом удали этот useEffect
Please open Telegram to view this post
VIEW IN TELEGRAM
😁85🤔17🏆13🤯7🌚4❤2🥱2💯2👍1
Форматирование чисел и Intl.NumberFormat
Этот конструктор принимает локаль и объект с настройками
Одна из интересных возможностей — генерирование коротких форм для чисел
➡️ @FrontendPortal | #js
Intl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др. Этот конструктор принимает локаль и объект с настройками
new Intl.NumberFormat(locale, options).format(number)
Одна из интересных возможностей — генерирование коротких форм для чисел
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤29👍18🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Предотвращение цепной прокрутки с помощью
Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)
Мы можем предотвратить цепочку прокрутки, установив для свойства
- Подробнее
- Поиграть можно здесь
➡️ @FrontendPortal | #CSS #tip by Shripal Soni
overscroll-behaviorЕсли мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)
Мы можем предотвратить цепочку прокрутки, установив для свойства
overscroll-behaviour значение contain или none- Подробнее
- Поиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤42👍18🔥4
Оптимизация SVG – краткий гайд для начинающих
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Читайте здесь
➡️ @FrontendPortal
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Читайте здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤19🌚1