00:00 Интро 00:13 В чём проблема 01:56 Обзор демки 03:58 Тест на телефонах 05:02 Отладка на iOS 06:46 Отладка на Android 07:41 Симулятор Xcode 09:27 Эмулятор Android Studio 10:54 Починка лапки 11:33 Не всё так просто 12:44 Выводы 14:20 Аутро

Бро, возвращайся на ютуб. Нам тебя не хватает :)

За твою позицию респект - удачи тебе во всем человек!

Принесли баг с синей кнопкой. Джун: принудительно на шару задает цвет, тратит одну минуту и дальше разгребает задачи в поте лица. Сеньор: ставит на стоп текущие таски, проводит ресёрч, непринужденно выкачивает девтулзы, экспериментирует с эмуляторами, принудительно задаёт цвет, тратит весь день, уходит домой, профит.

@pepelsbey

2 жыл бұрын

Ну и как ваш джун проверяет, что кнопка стала чёрной?

@HomaFromPTZ

2 жыл бұрын

@@pepelsbey по радостным крикам "ура, заработало" ) (ну шутка же, ну) А если серьёзно, то для полноты картины не хватает упоминания веб сервисов с живыми девайсами, тот же бравзерстек (правда они совсем ошалели и бесплатно теперь только одну минуту дают, что непригодно для отладки). Удобно когда под рукой нет ни мака, ни айфона, ни времени на выкачивание гигов интернета.

@pepelsbey

2 жыл бұрын

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

@liringea

2 жыл бұрын

@@HomaFromPTZ мало того что одну минуту, так она ещё и считается сразу, ещё до того как устройство загрузится, остаётся порой секунд 30, плюнул и купил макбук, так дешевле

@user-dv8co2zg9f

Жыл бұрын

@@pepelsbey Хорошо, когда есть реальные устройства на работе. Когда не было, то обычно все заканчивалось кличем в общий рабочий чатик. Там, как правило, было несколько человек с айфоном. Их и эксплуатировали)

То чувсство когда увидел currentcolor в svg и понял в чём дело а Вадим 5 с лишним минут подводит к этому ответу :) Но видео ОООЧЕНЬ полезное, для того чтобы показать как дебажить на мобильных девайсах тем, кто с этим не знаком, всё супердоступно!

@pepelsbey

2 жыл бұрын

Да я тоже сразу всё понял, опыт не пропьёшь :) Но во-первых, там реально сложное окружение было и могла быть какая-то фигня, а во-вторых, важно было пощупать. Зато теперь есть готовое окружение для тестирования, которое всё не доходили руки собрать.

Спасибо!!!, было очень полезно👏

Спасибо Вадим. Очень интересно!

спасибо apple которая решила что мне нужен комп за 100к+ просто для открытия сафари

@user-ql4xu5qu2u

2 жыл бұрын

150к+

@pepelsbey

2 жыл бұрын

Это ваша работа - разрабатывать кроссбраузерные и кроссплатформенные интерфейсы. Текстового редактора на Линуксе для этого не достаточно. Самый дешёвый, но весьма мощный Macmini на M1 стоит 75 000 рублей. Можно купить б/у ноут, или тот же Macmini ещё дешевле.

@pepelsbey

2 жыл бұрын

75 или дешевле

@MIHANIZM56

2 жыл бұрын

@@pepelsbey если человек идёт работать водителем депутата, у него обязательно должен быть свой майбах?)

@MIHANIZM56

2 жыл бұрын

почему то всё заводится везде кроме сафари. ну да ну да проблема в нас что мы ноем))) увы, проблема не в разработчиках.

Отличное решение наболевшей проблемы!!! Спасибо автору!!!

Спасибо, это было очень информативно

Отличный выпуск, спасибо! Очень доступно, без лишних деталей, но тема раскрыта) Сам пользуюсь этими инструментами, но есть интересные особенности: десктопный Safari не даёт отлаживать содержимое WebView в нативных приложениях на iOS. Но если запускать приложение в эмуляторе, то проблем не будет. И похожая проблема с Android: чтобы отлаживать WebView в десктопном Хроме, нужно в нативном приложении специально дать разрешение. Было бы интересно ещё обсудить инструменты для «перехвата» и изменения реквестов/респонсов на локальной машине. Начиная с Overrides в Хроме, закачивая прокси (Charles, Proxyman). Бывает полезно, чтобы отладить JS на чужом сайте, или подставлять нужные ответы от API, иногда такие штуки очень помогают.

Очень нравится ваш канал, надеюсь будут выходить новые видео.

Спасибо! Очень полезно :)

Узнал сколько весит XCode, спасибо Вадим))

Буквально вчера гуглил как открутить девтулзы на мобильном телефоне. Спасибо большое за видео)

Лучший преподаватель . Понятно и доступно изгалаете материал

спасибо большое за информацию!

За 5 лет работы на одном проекте с кросс-платформенным приложением сделал вывод - эмулятор не всегда правильно показывает как будет на реальном девайсе, и так же справедливо обратное утверждение. И опять же, артефактов при отладке тоже хватает, меняешь свойства в инспекторе сафари, вроде все ок, а когда применяешь изменения в коде и обновляешь страницу - бац, не работает. Короче, все перепроверять приходится по несколько раз и эмулятор - не панацея, приходится содержать еще зоопарк реальных девайсов)

@alevlako

2 жыл бұрын

Судя по 5 годам, это касается кросс-приложения, созданного на React Native или Xamarin? Интересно, с Flutter те же грабли? Существуют ли проблемы, которые принципиально не отловить без устройства, запустив приложение в эмуляторе на макоси?

ЭТО ПРОСТО АХРЕННЕНННООООО !!!! ЭТО ТАКОЕ ОТКРЫТИЕ ДЛЯ МЕНЯ!!!! ОГРОМНОЕ СПАСИБО, Шикарная тема!!!! Мега крутая!!!! Работаю в маленькой продуктовой компании и беда с айфонами присутствует. Теперь этой боли не будет!!!!!!!!

Спасибо, Вадим.

Спасибо, очень полезное видео! Ёще добавлю, есть сервис appetize там реальный эмулятор IOS различных версий на разных устройствах + немного andrioida

Полезно, спасибо

спасибо, жаль не было этого видео 5 лет назад :D

очень интересное видео!!

Я предпочитаю пользоваться BrowserStack. Да, этот сервис иногда тормозит, но исправить ошибки на самых разных платформах позволяет. И да, Developer Tools там тоже есть :)

@peace-jn9nl

2 жыл бұрын

И для отладки JavaScript, исходники в виде maps приходится делать доступными внешнему миру? Не секьюрно. Или там есть возможность проброса в локалку?

@IhorVyshniakov

2 жыл бұрын

@@peace-jn9nl есть. Ты можешь смотреть свой сервер, будто ты локально работаешь, это очень удобно)

@kvrk-kvrk

2 жыл бұрын

@@peace-jn9nl есть проброс на локалку. Секурно

Спасибо за видео, Вадим! Балдеж!

Да недавнего времени в компании использовали BrowserStack. Теперь переехали на LambdaTest. В целом разработка происходит в хроме. Изредка открываю какие-то сложные моменты на реальных мобильных устройствах, чтобы убедиться в своих решениях и пощупать интерфейс в реальном окружении. Все кроссбраузерное тестирование ложится на плечи тестировщиков. Сафари в своё время попил не мало крови, особенно когда делал текстовый редактор на мобилке с залипающим меню форматирования текста …

Видео охонь!) пару моментов: 1. Можно спокойно поставить MacOS на виртуальную машину, а там уже Safari (тут уже отписались про это, не совсем легально, да, но если нет возможности, то других вариантов нет) и Xcode с эмулятором , но тут конечно для комфортной работы потребуется комп помощнее, чем офисный вариант 2. Вадим, пожалуйста, поменьше переключений камер "слева-справа". Идеально было раньше - когда фронтально одна камера P.S. всё ещё ждёмс видео "делаем табы по феншую" но этот рассказ охонь!

@user-ql4xu5qu2u

2 жыл бұрын

А мне понравилась смена ракурсов, он еще так раз, типа не успевает за сменой камер, и повернул голову)

@pepelsbey

2 жыл бұрын

Это новая студия, я пока разбираюсь как снимать удачно

Тестирование это тоже искусство и если есть команда то лучше конечно иметь под рукой хотя бы пару тестировщиков, а если нет то придется потратить время и все проверить самому и сильно доверять эмуляторам тоже не стоит не всегда они могут показать проблему. На счет Safary это отдельная тема он современный IE как то была заморочка со шрифтами везде норм но в нем откуда то вылезла жирная обводка.

Огонь! Невероятно полезная штука для проверки и отладки!

Именно из-за подобных проблем и перешел на бекенд) Вадим, спасибо! Скинул видос друзьям фронтендерам

спасибо за видос. В этот раз актуальный контент. Пользуюсь тулзой ResponsivelyApp для эмуляции в ios.

@pepelsbey

2 жыл бұрын

К сожалению, вы просто ресайзите экран десктопного Safari в этом инструменте. Вы не можете получить реальный рендеринг в iOS без симулятора или реального устройства.

Тоже нашел в продашене у нас синюю кнопку, но все никак не выдавали таску, чтобы разобраться, вот оно в чем дело ))

Мне в основном хватало CrossBrowserTesting. Пришлось только один раз воспользоваться Mac mini.

супер вовремя, вчера качал хкод, плача и рыдая, в итоге не выдержал - отменил загрузку

Эмулятор эмулирует, а симулятор симулирует, всё просто! =))

@pepelsbey

2 жыл бұрын

Спасибо, кэп!

@RolandAlexCole

2 жыл бұрын

Еще есть имитатор - имитирует

как же доступно изложил. знал о таком но все же)

Мобильный Safari та еще шляпа. Например, скрытие появившегося в iOS 15 Tab Bar'а не тригерит resize вьюпорта. Т.е. если у тебя приложение размером в один viewport, то у тебя либо Tab Bar всегда виден либо унылая полоса внизу экрана. Зачем, почему, а главное на..уя? А так, по сути покупал iPhone только ради дебага проектов) Теперь нужно еще и мак покупать. Удобно.

@rodigy

2 жыл бұрын

Это хитрый ход, что бы люди (разрабы) покупали их продукцию и делали все как у людей

@liringea

2 жыл бұрын

@@rodigy 100%, меня также развели, сидел спокойно на виндоусе, пока заказчики не начали жаловаться, сначала айфон, потом макбук, теперь айпад, везде свои приколы. А так без разницы на чём работать, хотя виндоус привычнее

Вадим, спасибо за новые видео и за гражданскую или лучше человеческую позицию! Как QA немного забавно было смотреть именно это видео - кажется, что это супер очевидные вещи. Видимо, со временем внутри происходит автоматическое обесценивание себя (дети совка 🥲). А вообще очень годный контент. И человек хороший. Peace be upon you!

А нельзя ли использовать нормалайз чтобы сбросить все стили? Или я чего то не понимаю?? Заранее прошу строго не судить за вопрос, потому как я ещё совсем новичок во фронтенде

место IE занял Safari

@pepelsbey

2 жыл бұрын

Вы хотите сказать, что у Safari 90% рынка и браузер перестали разрабатывать на 5 лет? Нет конечно. Это была главная проблема IE, которая вызвала стагнацию рынка. Это совсем не так с Safari.

Привет Вадим! Я не понял только как свойство "color" подействовало на svg. Там разве цвет не задаётся через "fill" и "stroke"?

@pepelsbey

2 жыл бұрын

Там внутри написано fill=currentcolor, то есть заливка наследует значение CSS-свойства color. Проблема именно в этом - у кнопки на iOS цвет текста по умолчанию синий.

@albertrain7093

2 жыл бұрын

спасибо большое, буду знать, что так тоже можно :)

Буквально пару часов назад появился вопрос о проверке мобильной верстки в эмуляторе или на реальном устройстве, и тут выходит это видео) Спасибо!

Вадим, а как работает кнопка в инспекторе в Chrome слева от вкладки Elements? Она просто меняет размер окна браузера, оставляя текущий движок?

@pepelsbey

2 жыл бұрын

Да, это простой ресайз окна и ещё изменение плотности пикселей экрана, не больше.

@user-zh5kg2op4h

2 жыл бұрын

Движок тот же, а вот мобильный режим эмулирует неплохо. Работает мобильные медиа-выражения вроде (pointer: coarse), можно проматывать свайпом мышкой. Весьма полезно для базовой разработки. В Сафари, например, только меняется размер экрана/плотность пикселей и ничего больше.

@user-fq5oe8hc2s

2 жыл бұрын

@@pepelsbey еще юзер-агент подменяется на мобильный

Всем сердцем не люблю МакОс, неудобно, неприятно работать и абсолютно не хочется привыкать к такому) на работе для таких случаев есть макМини и реальные устройства два айпада и несколько айфонов у коллег. Но каждый раз, когда находится очередной баг в эпл - день будет плохой). На винде и на андройд всё легко, понятно и удобно, на мой взгляд. Жду обновление сафари на винде, чтобы тестировать подобное)

@Veselitter

2 жыл бұрын

Золотые слова, брат

@liiillii776

2 жыл бұрын

работать на винде без нормального терминала, соболезную

Невероятно!!! Полезность информации зашкаливает, спасибище!

Погодите, интересно. Вадим, я может пропустил, но почему основной браузер - Firefox? Просто любопытно. Хром с навесками в виде тулзов вроде как очень даже универсален. Поделись, плиз опытом Ps. Кто на Реакте - пригодится. В работе с AntD попадаются сюрпризы, которые выскакивают на мобилках и симулятор меня не раз выручал;)

@pepelsbey

2 жыл бұрын

Чтобы поддерживать разнообразие браузерных движков и кроссбраузерность своего кода. А ещё это браузер, в котором есть некоторые уникальные решения, которые помогают мне удобнее пользоваться вебом.

Разница между симулятором и эмулятором в том, что первый иммитирует только софт, который может быть на том или ином телефоне. Эмулятор же, в свою очередь, иммитирует как софт так и само "железо", то есть он более близок к реальному девайсу чем симулятор

Подскажите, на 5:54 что за клавиша АИЧ ?

@pepelsbey

2 жыл бұрын

Клавиша H (эйч), от слова hide (спрятать)

Посмотрела Ваше последнее видео о войне. Хочу сказать огромное СПАСИБО Вам, Вадим, за то, что говорили об этом и не молчали, как многие другие. Это очень важно! Надеюсь, что война закончится в ближайшее время. Как раньше уже никогда не будет, но мы теперь знаем, КТО ЕСТЬ КТО. И надежда о том, что в России есть такие люди как Вы, еще жива. Спасибо Вам.

@ghost8652

Жыл бұрын

Согласен. Моё сердце с вами, мои дорогие.

Мне стыдно, я не знал и не думал что есть такая возможность! Вадим, вы не устаёте удивлять - делясь своим опытом! Низкий поклон!

Эпл всегда был леворезьбовым) Так что да, для тестирования мак нужен.

@pepelsbey

2 жыл бұрын

Была бы у Chrome похожая доля - все бы на него жаловались. Главное, что нет нездоровой монополии.

Спасибо!

Хакинтош - это головная боль. Я ставлю мак ос на виртуальную машину. Делается это не сложно. Да, не так шустро как на реальном железе, но за то доступно всем. То ли ещё будет, когда мак ос перестанут делать для x86. Сейчас у меня Monterey, на virtualbox под линуксом. На винде работает чуть хуже.

@alevlako

2 жыл бұрын

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

Привет, подскажи плз как быть с плавающей панелью в сафари на телефоне при задании блока 100vh? Эта панель постоянно плавает и не получается настроить корректно.

@pepelsbey

2 жыл бұрын

По спецификации vh - это именно высота экрана без учёта панелей браузера, об этом стоит помнить. Проблемы бывают не только с vh, но и с vw, который не учитывает ширину полос прокрутки и можно легко получить горизонтальный скролл. В будущем это исправится с новыми единицами измерения svh, lvh, dvh, они уже в бете Safari 15.4 twitter.com/jensimmons/status/1494377603142197255

@artempronin

2 жыл бұрын

@@pepelsbey теперь осталось понять или дождаться как это фиксить в стандартом браузере от самсунга

У меня хакинтош под это дело поставлен на отдельный SSD диск, причем на Ryzen 7 3700. Только дата сбивается при переходе из Хакинотша в Венду.

@pepelsbey

2 жыл бұрын

Нелегально, хрупко (

@yuriyovdeyev685

2 жыл бұрын

@@pepelsbey Всё верно. Но это хотя бы дает возможность проверить и найти проблему на Сафари :) Работать на таком постоянно - ну его нафиг.

6:35 Ну, не знаю, не знаю... С первых минут подумал про user agent style sheet, и что там по дефолту стоит color: blue или типа того. Он постоянно и везде бесит, для этого существуют всякие css-reset. На ссылках тоже есть такое. И маржины-паддинги у половины тегов. Однако, чтобы у свг работал color, необходимо в свг коде прописать color=currentColor. Видимо, мобильный сафари работает в обход этого правила. Вот это уже стрёмно.

@pepelsbey

2 жыл бұрын

Всё в порядке с currentcolor, просто в браузерных стилях стоит голубой цвет для текста в кнопках

Макбук то не нужен. А вот iphone - да. Это видео только доказывает это. У меня старый айфон и ios-safari-remote-debug-kit для отладки. Правда там, действительно, целую статью можно писать по настройке, чтобы покрыть все нюансы такого подключения. Конечно, с макбуком было бы легче, но на Win/Lin вполне можно отлаживать.

@pepelsbey

2 жыл бұрын

Нужен вам макбук или нет - это вы сами решайте. Но то, что он позволяет получить вам все нужные браузеры без головной боли - это факт.

@Roman-of9pl

2 жыл бұрын

@@pepelsbey где же все то? Вы же сами показываете, что в iOS свои стили и баги там тоже свои бывают(тот же скроллинг). И пользователей айфонов более, чем дофига. Айфон - необходимое требование сегодня, МакБук - нет. Дебажить айфон можно и без него. С фактом, что проще будет купить ненужный девайс, а не настраивать костыли я и не спорю - каждый сам решает.

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

Приветствую Вадим. Когда возобновятся выпуски? Они просто необходимы

@pepelsbey

2 жыл бұрын

Когда закончится война и не стыдно будет говорить о фронтенде

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

@pepelsbey

2 жыл бұрын

Я стараюсь избегать ресетов и нормалайзов, это глобальные стили, от которых не хочется зависеть. Но иногда обращаюсь к нормалайзу как к сборнику рецептов.

@user-vu6hn4ul2i

2 жыл бұрын

@@pepelsbey странно, их задача, вроде, в том, чтобы не зависеть от офигенных идей разработчиков браузеров по поводу дефолтных стилей...

@proxima7199

2 жыл бұрын

Я работаю с разработкой Гибридных приложений (Angular + Ionic). Например, теже самые пуш нотификации работают только на реальных девайсах. Я работу с нативными плагинами ( трекниг беграунд локации, просто локация и тд) маст хев нужно проверять на реальных девайсах

Есть сервисы (не реклама) предоставляющие доступ к физическому устройству с Сафари и всеми другими кейсами. Можно, даже правильно, не иметь весь зоопарк устройств. А то вот жалуются что на Сяоми, когда ссылку открывают в телеграмм что-то там дёргается на встроенном китайском браузере... Хорошо что Китай один, но это не значит что я должен иметь по каждой железяке со всего мира.

@vladislavkuzevanov7536

2 жыл бұрын

Там тоже не все так гладко, как хотелось бы.

@mit7871

2 жыл бұрын

Ну там как правило всё лагает и платно, не очень дешево, проще девайс затарить или эмулятор

@user-vu6hn4ul2i

2 жыл бұрын

@@mit7871 зависит от задач. Если на постоянной основе, то лучше обзавестись (выбить из компании, аргументировать, что не могу проверить для господ с айфонами). А если разово, то хватит и триала, лаги можно потерпеть.

@Bnepeg3agpoT

2 жыл бұрын

Я сталкивался со случаем когда баг не воспроизводился в одном таком сервисе. Чтобы он появлялся, нужно было тыкать в реальный тачпад эпл устройства. Так что сервисы это конечно круто, но не панацея

Никуда не уверен но то что с Маком фронтендеру будет отлично супер это да. Все современные языки программирования. NodeJS/Go/Dart(Flutter) - без проблем под MacOS. Кросплатформенная Моб разработка этот тот случай что никуда. Андроид и Айос одновременно собирает только Мак. Системное программирование C++/C/Rust - тут понятное дело Linux. Вообще для бекенд разработки и Linux хороший выбор Dell Latitude GameDev - если десктопный то тут Одна ОС для Лаунча игр это Windows - соответственно тут какой то Lenovo Legion будет хорошим выбором

@alevlako

2 жыл бұрын

OpenCore позволяет накатить много разных осей на одну железяку. Если железяка - это мак, то все будут работать и так, а вот немак надо выбирать максимально совместимый с маком по железу, зато тут можно выиграть по мощи за те же деньги или по деньгам за ту же мощь )

Playwright с webkit иногда спасает, но не панацея, конечно. Боль.

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

@pepelsbey

2 жыл бұрын

Не пробовал! Спасибо за идею для видео

Еще есть в инете готовые образы для VMWare c macOS и XCode эмулятором. Для случаев "раз в месяц проверить" - пойдет. Иногда жрет проц 4 ядра на все 100%, похоже на баг, решения найти пока не смог.

@pepelsbey

2 жыл бұрын

Я просто как-то не привык пиратить ОС для тестирования

@user-ir5zd2jy9e

2 жыл бұрын

@@pepelsbey А я просто как-то привык для тестирования иметь возможность скачать легально триал и проверить что-надо)

@pepelsbey

2 жыл бұрын

Спиратить по-быстрому - это не триал, это спиратить по-быстрому )

Вадим, для ios работает и без шнурка, если ноут и телефон в одной сети;)

А что делать с хром на iOS Тоже бывают кейсы неприятные когда ТОЛЬКО на айфоне хром бредит(

@liringea

2 жыл бұрын

часто ещё потому что ставят chrome beta для ios

@danikp2162

2 жыл бұрын

@@liringea сам факт того что дебажить хром на мобильном iOS нереально

Отлично всё рассказали, сам лет 7 назад с этим столкнулся, посмотрел видос - прямо ностальгия. Только иметь реальный MAC совсем нет необходимости, Windows+VmWare/VirtualBox с легкостью решают эту проблему, да производительность, конечно, хромает - но для отладки верстки хватает с головой. Ну и как ещё одно решение, хакинтош - целая наука, на которую не вижу смысла тратить время, когда можно всё сделать за 5 минут на винде. Но если есть средства, то, да лучше купить макбук и не знать вообще проблем.

@yuriyovdeyev685

2 жыл бұрын

Поставить под Виртуалкой МакОСЬ на АМД процессоры это такой геморой, что просто слов нет. Я перепробовал разное - так и не встала. А вот на реальном железе АМД поставилась у меня за 20 минут без каких либо плясок. Тут мне повезло, нашлась соответствующая готовая конфигурация под мое железо, кто-то уже настроил.

@state_of_games

2 жыл бұрын

Ну согласись, что все это костыли, и ещё нужно знать как это устанавливать. А если не получилось, придется с бубном вокруг этого всего крутиться и прыгать. Сомнительное занятие, легче просто иметь макбук) тем более, если ты разработчик тебе либо могут выдать на работе, либо ты его сам купишь и он отобьется в первые два месяца)

Именно по этому купил air м1 но был приятно удивлен и автономной работой и функционалом - сейчас на Винду не возвращаюсь даже

Ты единственный у кого я включил колокольчик. И да, классное видео, Спасибо!

Принцип простой) реализация кончено больная боль) пока спасал browserstack) Думал о покупка Mac mini) а мониторы тоже поменять надо, потому что их ppi не подходит)

@pepelsbey

2 жыл бұрын

Свежий Macmini на M1 за 75 000 рублей вполне мощный и хороший вариант

@ermakamre

2 жыл бұрын

@@pepelsbey А монитор подходящий (4к минимум) к этому Macmini за сколько можно купить? MacOS же не умеет шрифты нормально рендерить на full hd мониторе.

Определенно стоит упомянуть, что проблема с дефолтным цветом кнопки в большинстве кейсов может быть решена reset-ом.

@pepelsbey

2 жыл бұрын

Не ресетом, а нормалайзом. Я лично избегаю глобальных стилей на проектах, но суть этого видео конечно же в другом: браузеры разные и нужно иметь возможность тестировать во всех.

Интересно что в пункте разработка в сафари айфон показывается - а сайты открытые в сафари не видны(

@artempronin

2 жыл бұрын

для этого в настройках сафари на телефоне надо включить веб-инспектор

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

@pepelsbey

2 жыл бұрын

Я стараюсь избегать ресетов и нормалайзов в своей работе - не хочется зависеть от глобальных стилей. Но иногда пользуюсь нормалайзом как справочником.

Да, у сафари с кнопками особые отношения)

@fayonthaarr

2 жыл бұрын

И не только с кнопками)

Дякую Дуже. Гарне відео. Проте емулятор частіше завсе для IOS не показує проблеми реального девайса на IOS тому це 50 на 50

Почему не использовать ngrok для этого всего?

@pepelsbey

2 жыл бұрын

Если вы про локальный сервер и IP-адрес, то это сильно проще, чем гонять туннели через интернет. В остальном это никак не помогает ни с эмуляторами, ни с устройствами. Но в целом - да, есть такой инструмент, иногда удобно :)

Я даже не подозревала, что так можно - отлаживать прямо на телефоне😶 воу...

Если система мощная, то VMWare выше крыши для тестов, производительность более чем приемлимая

@pepelsbey

2 жыл бұрын

Тут дело не в мощности, эмулировать macOS в VMWare просто нелегально, её нужно ломать для этого.

@ac130kz

2 жыл бұрын

@@pepelsbey да, есть такое)

Какая неожиданность, опять в браузерах все нормально, а в сафари THINK DIFFERENT

@pepelsbey

2 жыл бұрын

У всех браузеров есть свои особенности. Вопрос в том, знаете вы - их или нет. Можете ли проверить, понять и отладить - или нет. Видео об этом, другие стили для контролов форм - не баг.

@user-sr2ql5jr4c

2 жыл бұрын

@@pepelsbey Да, я полностью согласен. Комент к тому , что не удивительно что примером оказалась проблема в сафари

Да, пришлось научиться отлаживать в симуляторе ios. Вот прям на днях пытался решить проблему зависания скроллов внутри модалки. Оказывается мои пакетные функции body-scroll-lock на ios ставят body не overflow hidden, а position fixed. Получается fixed внутри fixed, возможно проблема в этом. А дело всё в том, что до недавнего времени именно на ios не работал overflow hidden на body.

а как ты добыл external ip? я че-то не могу понять

@pepelsbey

2 жыл бұрын

4:14 - локально запущен сервер Browser Sync browsersync.io/docs/command-line/

@pepelsbey

2 жыл бұрын

Или ещё так: npx internal-ip-cli --ipv4

Вадим возвращайтесь, нам Вас очень не хватает((((

А я надеялся тут будет волшебный способ запустить safari на винде))

@pepelsbey

2 жыл бұрын

Машина времени в 2007-2012 годы, разве что

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

@user-vu6hn4ul2i

2 жыл бұрын

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

@vladko9623

2 жыл бұрын

@@user-vu6hn4ul2i тоже пришёл к этой мысли)

Возможно что эмулятор позволяет полностью запустить копию той машины, которую вы пытаетесь эмулировать. А симулятор - просто симулирует какое-нибудь состояние какого-нибудь устройства :)

Использую browserstack, все сделано за вас, все платформы, все популярные браузеры, модели iOS, MacOS, Andriod, Windows. Так что это хорошая альтернатива всем этим танцам с бубном

@pepelsbey

Жыл бұрын

Хорошо, что у вас есть доступ к Browserstack, но это всё-таки не полностью заменяет тестирование на реальном устройстве - разве что позволяет не ставить эмуляторы. Ну или если у вас Windows, то даёт доступ к браузерам Apple.

сафари это боль, прошу знакомого, полключаюсь к его макбуку через удалённый рабочий стол и там уже отлаживаю

Вадим, куда пропал, все ли хорошо? Вот бы стрим там, или видос про верстку...

@pepelsbey

Жыл бұрын

Война идёт, Роберт, всё очень плохо. Пока не до вёрстки

@user-pe1ci6kg3m

Жыл бұрын

@@pepelsbey на веб-стандартах ведешь же подкасты, или это другое?

@pepelsbey

Жыл бұрын

Другое: туда я прихожу пообщаться с друзьями (это важно сейчас), это сравнительно просто записывать без картинки, плюс это не лично мой проект и решение вернуться было общим.

@dmitry.gashko

Жыл бұрын

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

Жаль видеть что ты перестал выпускать видео, надеюсь ты в порядке.

@pepelsbey

Жыл бұрын

Жаль, что война началась, а видео это ерунда kzread.info/dash/bejne/hqugzc6CmtmoaJs.html

А ещё... порой бывает так, что у реального клиента может быть iOs старой версии и там прямо печалити начинается, потому что только добавить нужную версию iOs в xCode - это та ещё жесть (а что-то и не поставить уже вовсе, если не "понижать" версию MacOS). Постоянно сталкивался с такой ерундой. Перешел на mac (правда изначально не поэтому)), но всё же пока не вижу больше никаких вариантов для тестирования, чтобы охватывать максимально возможное количество "кейсов". И да, это мы ещё до тестирования email-писем не добрались. Там совсем всё плохо до такой степени, что надо ещё отдельный windows-компьютер иметь, а не только mac.

В одном видео прям два удара по болевым точкам)) Нет айфона для отладки, и сегодня выломал юсб гнездо на своем телефоне

тобишь без xcode никак? и cli версия не катит?(

@pepelsbey

2 жыл бұрын

CommandLineTools обычно достаточно, я всегда всем говорил, что не нужно ставить Xcode. Но если нужен симулятор - вариантов нет.

@dimovich85

2 жыл бұрын

@@pepelsbey ну я как раз о симуляторе, эх, качаю уже...

@dimovich85

2 жыл бұрын

@@pepelsbey спасибо

Кажется десктопный сафари умеет эмулировать девайс мобильный и его баги или, по крайней мере, часть их

@pepelsbey

2 жыл бұрын

К сожалению, это просто ресайз окна, там нет ничего из мобильного браузера, насколько я знаю

@sergeygultyayev4828

2 жыл бұрын

@@pepelsbey в последний раз я там воспроизводил баг который только в мобильном сафари есть. Тоже раньше думал что это только ресайз

Эх, вот бы уже все пришли к единому нерушимому стандарту))) мечты-мечты)))

@pepelsbey

2 жыл бұрын

Это веб, тут есть единые нерушимые стандарты, а есть отдельные платформы, которые в праве иметь свой взгляд на удобство пользователей. Так всегда было и будет, просто примите )

@MadMike93

2 жыл бұрын

@@pepelsbey золотые слова)

Вадім, нам тебе не вистачає( Повернись буд-ласка

Единственное, что для Андроид Студио нужно много памяти - моему iMac прям было плохо

@pepelsbey

2 жыл бұрын

У меня, к счастью, 32 Гб на M1 Max, так что должно хватить. Но понимаю, что не у всех такая роскошь.

Надеюсь и жду что канал реанимируется.

Видео хорошее. Не понимаю, почему люди всего этого не знают. Это основы отладки. Как на работу вообще берут?…

@pepelsbey

2 жыл бұрын

Да ну не хвастайтесь вы так сильно :) Вы тоже чего-то не знаете, наверняка. И я чего-то не знаю. Давайте сосредоточимся на обмене опытом и не будем показывать пальцем.