📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Открывал видео с мыслью, что сейчас "узнаю" как изменять dom элементы, копировать cURL запроса или еще какую банальщину. Был приятно удивлён такими фишками!
это было интересно, мне как новичку особенно первые две темы, чтобы удобно смотреть контраст цветов, проверять шрифты, не используемые стили и смотреть дерево доступности
Привет! Спасибо за фидбек :) По поводу скринридеров - посмотри на канале мини-курс по цифровой доступности: ua-cam.com/play/PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV.html Найдешь для себя много нового в плане работы скринридера :)
Насчёт наведения вопрос остался. Я так полагаю сейчас наведение и показ тултипа реализовано через JS, но ведь у нас есть во вкладке elements кнопка :hov, где указаны все состояние элемента. Если выбрать hover, то мы сможем отследить состояние наведении кнопки и показать тултипа для его анализа? Через CSS она все ок отрабатывает, а что насчёт JS? А так крутые фишки, побольше фишек о вебе 😊
Эти знания в этом плейлисте , подходят для твоего роудмапа, в плане если я пройду этот плейлист то я закрою потребности в знаниях , (вкладки elements styles) и на будущее: вкладки Console, Sources , и так далее?
Не совсем. Ролики из этой серии на канале - просто про рандомные малоизвестные фишки девтулз. Если ты начинающий, то тебе нужен конкретный курс по основным (!) функциям девтулз. У меня пока такого на канале нет. Планирую сделать подобный в ближайший год.
Ты не знаешь как повысить количество кадров в секунду в Chrome? У меня по умолчанию 60, но видеокарта, процессор и оперативки готова работать на 144/120, у меня монитор 144 герца. Не нашёл в интернете слов об этом
Пример с использованием дебагера и breakpoints не слишком удачный, ибо можно повесить класс hover на элемент через DevTools, но в каких-то более сложных вещах или анимациях может быть полезно
Увы, так, как вы пишете, сделать не получится. Эффект наведения от CSS-псевдокласса состояния hover и кастомный эффект динамически появляющегося / удаляющегося элемента после событий mouseover / mouseout - разные вещи. Механика, которую я показал, часто встречается в SPA приложениях: попробуйте взять условный компонент тултипа / поповера из MUI или AntDesign библиотеки, а затем проинспектируйте разметку появляющегося элемента. Если библиотека не опирается на hover-состояние из CSS (а так оно в большинстве случаев), то тут только брейкпоинт спасет, если нужен серьёзный анализ элемента.
Я не разработчик но о больше половине знал. Дерево доступности это неинтересно и для зануд, ну ладно. Про живые выражения тоже не знал, это поинтереснее. DOM брейкпоинты это интересно но ведь можно дать состояние hover через вкладку стилей? Или это только для css работает?
Верно, так будет работать только для CSS. Если разметка генерируется через JS, появляется в DOM при маусовере и удаляется при маусауте, то только брейкпоинт поможет проинспектить элемент.
@@AleksanderLamkov да и в целом это не только для визуальной отладки. Вот например у меня есть довольно костыльное решение когда скрипт добавляет в спрятанную ноду контент который потом будет выведен. И теперь я могу отлавливать это немного раньше чем до того как я узнал об этой фиче. Вотчи опять же, вообще ни разу не использовал эту кнопку с глазом, а теперь, походу, будет моим чуть ли не основным инструментом.
@@FloeHetling Круто! Рад, что эти штуки оказались вам полезны :) До возникновения идеи этого видоса и рубрики в целом была мысль "да что там не знать, наверняка каждый разраб уже протыкал весь функционал", но оказывается нет, малоизвестных нюансов просто море...
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Отлично получается образовательный контент, давай еще!
Открывал видео с мыслью, что сейчас "узнаю" как изменять dom элементы, копировать cURL запроса или еще какую банальщину. Был приятно удивлён такими фишками!
Александр, за DOM Breakpoints особая вам благодарность! ) Очень полезная штуковина!
Отличная рубрика! Для тех, кто не понял - на 5:40 "СПА приложение" - Single Page Application.
это было интересно, мне как новичку особенно первые две темы, чтобы удобно смотреть контраст цветов, проверять шрифты, не используемые стили и смотреть дерево доступности
Александр ты молодец, продолжай заниматься, очень хорошая подача!
Открыл по новой DevTool;s для себя. Огроменный респект за труды!
Очень круто! Хочется еще подобных видео!
огонь!
крайне полезная рубрика!
Спасибо! Это просто шок-контент) Особенно с брекпоинтом на элемент
То самое чувство когда покупал ПК не для игр. Но даже в браузере меня достаёт FPS 😅
Благодарю, попробую в дальнейшем пользоваться 🤝
Снимите ещё продолжение, очень полезные фишки 👍
А это даже мне интересно было послушать.)
Спасибо тебе огромное! Твои видео это просто находка, продолжай снимать
Спасибо за информацию. Было бы полезно узнать больше о фишках devTools
Продолжай в том же духе, подача материала отличная!
Было очень полезно, про то как скрин ридеры читают сайт особенно, потому-что понял, что ничего не понял, пробел однако, буду пересматривать) Спасибо😊
Привет! Спасибо за фидбек :)
По поводу скринридеров - посмотри на канале мини-курс по цифровой доступности:
ua-cam.com/play/PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV.html
Найдешь для себя много нового в плане работы скринридера :)
Александр, большое спасибо! Полезная информация
Полезный контент! Спасибо
Пушка! Лайк
Я поставил 666 лайк! Контент - бомба! Я уже 5 лет фронтоном занимаюсь, но некоторые не знал! Спасибо!
Лайк, конечно, но всё-таки это 5 фишек о которых я знал.
Спасибо
кайф, пойду баги репортить, спасибо
Не скажу что знал, но я фулстек, мне вёрстка не всегда сложная попадается. Может и пригодится
От души спс
Насчёт наведения вопрос остался. Я так полагаю сейчас наведение и показ тултипа реализовано через JS, но ведь у нас есть во вкладке elements кнопка :hov, где указаны все состояние элемента. Если выбрать hover, то мы сможем отследить состояние наведении кнопки и показать тултипа для его анализа? Через CSS она все ок отрабатывает, а что насчёт JS?
А так крутые фишки, побольше фишек о вебе 😊
Эффект наведения hover в CSS и события mouseenter / mouseout в JS - это разные вещи и отследить JS-логику через панель ":hov" не получится.
Спасибо 👍
Эти знания в этом плейлисте , подходят для твоего роудмапа, в плане если я пройду этот плейлист то я закрою потребности в знаниях , (вкладки elements styles) и на будущее: вкладки Console, Sources , и так далее?
Не совсем. Ролики из этой серии на канале - просто про рандомные малоизвестные фишки девтулз. Если ты начинающий, то тебе нужен конкретный курс по основным (!) функциям девтулз. У меня пока такого на канале нет. Планирую сделать подобный в ближайший год.
@@AleksanderLamkov понял , спасибо
Ты не знаешь как повысить количество кадров в секунду в Chrome? У меня по умолчанию 60, но видеокарта, процессор и оперативки готова работать на 144/120, у меня монитор 144 герца. Не нашёл в интернете слов об этом
Привет! В гугле по запросу «chrome limit fps» есть парочку тем, там что-то с флагами на ярлыке запуска хрома сделать нужно, чтобы лимит снять.
@@AleksanderLamkov да, у меня ничего не работает :D
Пример с использованием дебагера и breakpoints не слишком удачный, ибо можно повесить класс hover на элемент через DevTools, но в каких-то более сложных вещах или анимациях может быть полезно
Увы, так, как вы пишете, сделать не получится.
Эффект наведения от CSS-псевдокласса состояния hover и кастомный эффект динамически появляющегося / удаляющегося элемента после событий mouseover / mouseout - разные вещи.
Механика, которую я показал, часто встречается в SPA приложениях: попробуйте взять условный компонент тултипа / поповера из MUI или AntDesign библиотеки, а затем проинспектируйте разметку появляющегося элемента. Если библиотека не опирается на hover-состояние из CSS (а так оно в большинстве случаев), то тут только брейкпоинт спасет, если нужен серьёзный анализ элемента.
++
Я не разработчик но о больше половине знал. Дерево доступности это неинтересно и для зануд, ну ладно. Про живые выражения тоже не знал, это поинтереснее. DOM брейкпоинты это интересно но ведь можно дать состояние hover через вкладку стилей? Или это только для css работает?
Верно, так будет работать только для CSS. Если разметка генерируется через JS, появляется в DOM при маусовере и удаляется при маусауте, то только брейкпоинт поможет проинспектить элемент.
@@AleksanderLamkov да и в целом это не только для визуальной отладки. Вот например у меня есть довольно костыльное решение когда скрипт добавляет в спрятанную ноду контент который потом будет выведен. И теперь я могу отлавливать это немного раньше чем до того как я узнал об этой фиче. Вотчи опять же, вообще ни разу не использовал эту кнопку с глазом, а теперь, походу, будет моим чуть ли не основным инструментом.
@@FloeHetling Круто! Рад, что эти штуки оказались вам полезны :)
До возникновения идеи этого видоса и рубрики в целом была мысль "да что там не знать, наверняка каждый разраб уже протыкал весь функционал", но оказывается нет, малоизвестных нюансов просто море...
Саша, зачем мне твоя голова в отдельном окне?
Потому что мой канал - не набор скринкастов-туториалов с закадровым голосом. Текущий формат меня полностью устраивает.
@@AleksanderLamkov Да, на здоровье.
Только, зачем? Все же смотрят на экран, а не на голову.
@@Ivan_Killin, мне и на реакцию автора интересно посмотреть.
@@alexb.2616 Что ты там хочешь увидеть? Выпученные от ужаса глаза или искривлённый гримасой рот.
Не отвлекайся, смотри на код.
Весьма!
Благодарю. Ничего этого не знал.
Довольно интересно, узнал для себя новые инструменты для разработки, их же можно спокойно в react использовать?
Разумеется! Весь инструментарий DevTools будет работать независимо от технологии, на которой разработано веб-приложение :)
@@AleksanderLamkov отлично, благодарю за видео