Причины, по которым все веб-разработчики должны использовать Firefox

Перевод статьи Ibrahim Nergiz: Calling all web developers: here’s why you should be using Firefox

Я не знаю, какого вы возраста, но как человек, который родился в конце 80-ых, я помню взлёты и падения Firefox.

Firefox был представлен как open source конкурент для Internet Explorer. Он был прекрасным, так как имел различные опции. Например, пользователи могли добавить в него дополнительные возможности с помощью различных расширений или изменить визуальную тему. Все это любили.

Однако, спустя пару лет в игру вступил ещё один участник. Назывался он, как вы должны были догадаться, Chrome. Chrome начал распространяться с ошеломляющей скоростью. Более того, Chrome использовали настолько много людей, что он стал самым ценным активом Google. Я уверен, что многие из вас пользуются им прямо сейчас, пока читают этот текст.

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

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

Дэниз, из команды разработчиков JotForm, недавно заметил:

"У меня есть компьютер с последней конфигурацией Macbook Pro. Когда я работаю (с активными инструментами разработчика Chrome), то батарея садится очень быстро."

Если вы тоже разработчик, то должны были это заметить или услышать от кого-то их ваших знакомых.

Возможно, вы даже зашли дальше и подумывали о том, чтобы сменить браузер.

И здесь в дело вступает новый и улучшенный Firefox - Firefox Quantum.

В 2017, Quantum был запущен для пользователей Android, Linux, iOS, Mac и Windows. Спустя 10 лет после того, как Mozilla представили свою первую версию Firefox.

В то время, как Quantum имеет новый современный дизайн, говорят, что он загружает сайты в два раза быстрее, чем Firefox 6, а также использует на 30% меньше памяти, чем Chrome.

После 10 лет в разработке Mozilla нашли новые способы отличить свой браузер от конкурентов без потери производительности. Неплохое достижение.

Поэтому, чтобы получить максимальное преимущество от компьютерной производительности, 4 миллиона строк кода были переписаны с помощью таких передовых технологий как Servo, Rust и Quantum/Stylo.

И это окупилось.

По-моему мнению, Firefox Quantum имеет лучшую производительность по сравнению с другими браузерами.

И вот почему...

Новые технологии

WebAssembly

Запуск больших, красивых или сложных приложений онлайн - это мечта многих разработчиков. В дополнение к недавнему скачку технологий по обработке фото и видео, 3D редактирования игр, а также VR/AR, ожидания онлайн-пользователей значительно возросли.

Такие Javascript движки, как Google V8, Mozilla SpiderMonkey и Microsoft Chakra были разработаны как раз для того, чтобы достичь лучшей производительности для такого рода операций.

К концу 2017-ого года стало возможным запускать Unity и Unreal Engine проекты внутри Firefox. А теперь такой поддержкой занялись и другие крупные браузеры.

A-Frame and WebVR

Одной из самых больших недавних инноваций является Виртуальная Реальность, или VR. А с помощью мобильных устройств, браузеров и таких продуктов как Oculus Rift и HTC Vive прогресс не стоит на месте.

Mozilla сыграли большую роль в развитии WebVR, а также старательно работали над тем, чтобы дополнить её своим новым веб-браузером. Спасибо A-Frame (поддерживаемый Mozilla), что отличный фреймворк для работы с WebVR уже доступен для нас.

Project Common Voice

Apple Siri, Microsoft Cortana, Amazon Echo, и Google Home создали свою запатентованную технологию распознавания речи для своих продуктов.

И угадайте что? Mozilla запустили Common Voice - open source проект, цель которого сделать технологию распознавания речи доступной для каждого.

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

Firefox Devtools

Читая обо всех тех изменениях, что я перечислил выше, вы вряд ли будете удивлены, когда я скажу, что для инструментов разработчика тоже был создан ряд улучшений. Одна из них - debugger.html. Преимущество его в том, что это open source проект, размещённый на GitHub, поэтому каждый может поспособствовать его развитию.

А теперь давайте рассмотрим по порядку каждую возможность debugger.html.

Общее - исследовать элемент

Смена темы

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

Есть даже отдельный пост со сравнением используемых этими темами цветов.

CSS Grid

Одна из последних инноваций в CSS - это CSS Grid Layout. С новыми инструментами разработчика вы можете увидеть ваши 'display: grid'-элементы. Вы также можете включить или выключить такие возможности, как нумерация строк, названия областей или бесконечное растягивание строк.

Box Model

Свойства maring и padiing в элементах иногда могут стать запутанными. С новой 'box model'-структурой отображения элемента, вам будет намного проще увидеть и изменить занимаемое элементом место, в частности свойства margin, padding и border.

CSS-переменные

Ещё одна CSS-инновация - это переменные. Не смотря на то, что ещё не все браузеры поддерживают переменные, их использование без сомнений только возрастёт с течением времени. Как должно быть понятно из названия, вы можете привязывать значения к переменным. Хотите узнать, какое значение хранится в переменной? Просто наведите на неё мышь.

Добавить/убрать класс

Нажав кнопку .cls на правой стороне панели инструментов разработчика, вы можете легко добавить или убрать CSS-классы выбранного вами HTML-элемента.

Hover

Когда вы нажмёте расположенную возле .cls кнопку, то сможете легко протестировать поведение элемента при срабатывании hover-, active- и focus-состояний.

Font Family

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

Анимации

Анимации - это отдельная популярная разработка. В моей статье ‘How to use CSS animations like a pro’ я написал короткое ознакомление с анимациями. Вы можете проиграть анимации медленнее или отследить как они двигаются.

XPath

Кто-нибудь из вас должен был слышать термин 'скрапинг данных' (метод извлечения данных из сети). Если вы хотите использовать скрапинг для извлечения какого-то контента из веб-страницы, вы можете легко обнаружить местоположение нужного вам элемента с помощью XPath. Вы можете увидеть то, что я имею в виду в гифке выше.

Консоль

Логи консоли

Когда мы переместимся в раздел консоли, вы можете легко исследовать элементы. Также, структура дерева делает выделение объектов куда проще, а также не даёт им исчезать из поля зрения.

Console.group

А вы знали, что вы можете сделать events более организованными и разборчивыми с помощью console.gruop() и groupCollapsed()?

Debugger

Точки остановки

Хорошие инструменты для дебаггинга Javascript незаменимы. С помощью точек остановки вы можете изучить ваш код более подробно.

Карты источников

SCSS, WebAssembly, TypeScript, Babel... эти JavaScript- или CSS-сборки становятся очень популярны. Однако в результате код, который отображается в браузере выглядит немного иначе, чем тот, который был написан изначально. Вы можете работать с источником оригинальных файлов с помощью карт источников.

Поиск функций среди всех проектов

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

Редактор стилей

В этом редакторе вы видите всё, что вы написали для вашего CSS, вплоть до точек остановки.

Производительность

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

Мониторинг сети

CSS, JavaScript, картинки и многие другие ресурсы загружены в окне мониторинга сети. Здесь вы можете посмотреть, корректно ли отображается ваша страница в браузере.

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

Хранилище

Мы используем cookies или локальное хранилище для хранения информации о наших пользователях, когда они посещают наш сайт.

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

Подведение итога

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

Например, если вы хотите посмотреть презентацию Apple Keynote в сети, то вы сможете открыть эту страницу только с помощью Safari. А если вы захотите сменить iOS на Android, то вам придётся распрощаться с iMessage.

Но Mozilla Firefox не является частью этого запатентованного 'огороженного сада'. Поэтому сменить ваш браузер на Firefox куда проще, чем сделать что-то из примеров выше.

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

Дайте Firefox шанс.

P.S.

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

Статью перевёл Дмитрий Хирш