📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

Отлично получается образовательный контент, давай еще!

это было интересно, мне как новичку особенно первые две темы, чтобы удобно смотреть контраст цветов, проверять шрифты, не используемые стили и смотреть дерево доступности

Открывал видео с мыслью, что сейчас "узнаю" как изменять dom элементы, копировать cURL запроса или еще какую банальщину. Был приятно удивлён такими фишками!

Отличная рубрика! Для тех, кто не понял - на 5:40 "СПА приложение" - Single Page Application.

Александр ты молодец, продолжай заниматься, очень хорошая подача!

огонь! крайне полезная рубрика!

Весьма!

Очень круто! Хочется еще подобных видео!

То самое чувство когда покупал ПК не для игр. Но даже в браузере меня достаёт FPS 😅 Благодарю, попробую в дальнейшем пользоваться 🤝

Спасибо тебе огромное! Твои видео это просто находка, продолжай снимать

кайф, пойду баги репортить, спасибо

Открыл по новой DevTool;s для себя. Огроменный респект за труды!

Пушка! Лайк

Спасибо! Это просто шок-контент) Особенно с брекпоинтом на элемент

Снимите ещё продолжение, очень полезные фишки 👍

От души спс

Спасибо

Благодарю. Ничего этого не знал.

Продолжай в том же духе, подача материала отличная!

Я поставил 666 лайк! Контент - бомба! Я уже 5 лет фронтоном занимаюсь, но некоторые не знал! Спасибо!

Было очень полезно, про то как скрин ридеры читают сайт особенно, потому-что понял, что ничего не понял, пробел однако, буду пересматривать) Спасибо😊

@AleksanderLamkov

2 ай бұрын

Привет! Спасибо за фидбек :) По поводу скринридеров - посмотри на канале мини-курс по цифровой доступности: kzread.info/head/PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV Найдешь для себя много нового в плане работы скринридера :)

Спасибо за информацию. Было бы полезно узнать больше о фишках devTools

Спасибо 👍

А это даже мне интересно было послушать.)

Насчёт наведения вопрос остался. Я так полагаю сейчас наведение и показ тултипа реализовано через JS, но ведь у нас есть во вкладке elements кнопка :hov, где указаны все состояние элемента. Если выбрать hover, то мы сможем отследить состояние наведении кнопки и показать тултипа для его анализа? Через CSS она все ок отрабатывает, а что насчёт JS? А так крутые фишки, побольше фишек о вебе 😊

@AleksanderLamkov

9 ай бұрын

Эффект наведения hover в CSS и события mouseenter / mouseout в JS - это разные вещи и отследить JS-логику через панель ":hov" не получится.

Лайк, конечно, но всё-таки это 5 фишек о которых я знал.

Не скажу что знал, но я фулстек, мне вёрстка не всегда сложная попадается. Может и пригодится

Ты не знаешь как повысить количество кадров в секунду в Chrome? У меня по умолчанию 60, но видеокарта, процессор и оперативки готова работать на 144/120, у меня монитор 144 герца. Не нашёл в интернете слов об этом

@AleksanderLamkov

7 ай бұрын

Привет! В гугле по запросу «chrome limit fps» есть парочку тем, там что-то с флагами на ярлыке запуска хрома сделать нужно, чтобы лимит снять.

@mihinov

7 ай бұрын

@@AleksanderLamkov да, у меня ничего не работает :D

++

Пример с использованием дебагера и breakpoints не слишком удачный, ибо можно повесить класс hover на элемент через DevTools, но в каких-то более сложных вещах или анимациях может быть полезно

@AleksanderLamkov

10 ай бұрын

Увы, так, как вы пишете, сделать не получится. Эффект наведения от CSS-псевдокласса состояния hover и кастомный эффект динамически появляющегося / удаляющегося элемента после событий mouseover / mouseout - разные вещи. Механика, которую я показал, часто встречается в SPA приложениях: попробуйте взять условный компонент тултипа / поповера из MUI или AntDesign библиотеки, а затем проинспектируйте разметку появляющегося элемента. Если библиотека не опирается на hover-состояние из CSS (а так оно в большинстве случаев), то тут только брейкпоинт спасет, если нужен серьёзный анализ элемента.

Я не разработчик но о больше половине знал. Дерево доступности это неинтересно и для зануд, ну ладно. Про живые выражения тоже не знал, это поинтереснее. DOM брейкпоинты это интересно но ведь можно дать состояние hover через вкладку стилей? Или это только для css работает?

@AleksanderLamkov

10 ай бұрын

Верно, так будет работать только для CSS. Если разметка генерируется через JS, появляется в DOM при маусовере и удаляется при маусауте, то только брейкпоинт поможет проинспектить элемент.

@user-hi6fw1bm2x

10 ай бұрын

@@AleksanderLamkov да и в целом это не только для визуальной отладки. Вот например у меня есть довольно костыльное решение когда скрипт добавляет в спрятанную ноду контент который потом будет выведен. И теперь я могу отлавливать это немного раньше чем до того как я узнал об этой фиче. Вотчи опять же, вообще ни разу не использовал эту кнопку с глазом, а теперь, походу, будет моим чуть ли не основным инструментом.

@AleksanderLamkov

10 ай бұрын

@@user-hi6fw1bm2x Круто! Рад, что эти штуки оказались вам полезны :) До возникновения идеи этого видоса и рубрики в целом была мысль "да что там не знать, наверняка каждый разраб уже протыкал весь функционал", но оказывается нет, малоизвестных нюансов просто море...

Саша, зачем мне твоя голова в отдельном окне?

@AleksanderLamkov

9 ай бұрын

Потому что мой канал - не набор скринкастов-туториалов с закадровым голосом. Текущий формат меня полностью устраивает.

@Ivan_Killin

9 ай бұрын

@@AleksanderLamkov Да, на здоровье. Только, зачем? Все же смотрят на экран, а не на голову.

@alexb.2616

8 ай бұрын

@@Ivan_Killin, мне и на реакцию автора интересно посмотреть.

@Ivan_Killin

8 ай бұрын

@@alexb.2616 Что ты там хочешь увидеть? Выпученные от ужаса глаза или искривлённый гримасой рот. Не отвлекайся, смотри на код.

Довольно интересно, узнал для себя новые инструменты для разработки, их же можно спокойно в react использовать?

@AleksanderLamkov

10 ай бұрын

Разумеется! Весь инструментарий DevTools будет работать независимо от технологии, на которой разработано веб-приложение :)

@dimonlimon1770

10 ай бұрын

@@AleksanderLamkov отлично, благодарю за видео