Как установить в Mozilla Firefox русскую версию Web Developer. Плагины Firefox для веб-разработчика

27.06.2019

Итак, вы решили стать Веб разработчиком . Вы знаете три магических термина HTML / CSS / JS и полагаете, что станете востребованным специалистом, как только освоите все три в совершенстве. Вы представляете, как будете учить их последовательно, один за другим. Заполните портфолио. Найдёте вакансию Junior. Утрёте нос сомневавшимся.

На самом деле, даже Фронтенд разработчик – вымирающий вид. Но не потому, что работы становится меньше:) Скорее – наоборот. Ежедневно растущая сумма знаний не оставляет шансов для широких категорий. Абстрактные «программисты» существуют только в фильмах о хакерах и в народном представлении. Так и фронтенд разработчики, постепенно, становятся абстракцией, разделяясь на всё более узкие специальности.

К сожалению, большинство рекрутеров плохо представляют специфику работы людей, которых они трудоустраивают. Сделаем скидку на то, что IT-рекрутинг тоже молодая дисциплина. Вольно или невольно – рекрутеры создают своего рода «дезинформационное поле».

Если у вас есть опыт аренды жилья, вы, вероятно, сталкивались с фразой «Интернет Wi-Fi». Риэлторы обожают это словосочетание. Не пытайтесь объяснить им, что Wi-Fi это способ раздачи от подведённого источника, и вас интересует именно последний. «Интернет Wi-Fi» может оказаться чем угодно: ADSL, 3G, оптоволокном...

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

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

Титулы вакансий

Web Developer

Синонимы: веб-разработчик , веб-инженер

Обычно, подразумевает использование каких-либо CMS. Некоторые люди на полном серьёзе считают, что начинающие используют «простые CMS», а эксперты – «продвинутые CMS». Хинт: если человек спрашивает – Какую CMS используете? у компании программистов в конференц-зале – вероятно, он полный нуб. И это не обвинение, а констатация факта. Серьёзные современные проекты не используют CMS, ну разве что в качестве вспомогательного инструмента. Wordpress для ведения блога компании – да, возможно. Wordpress в качестве магазина – уже сомнительно. «Социальная сеть на Joomla» – фантазии подростка. CMS имеют свое место на рынке, но они давно перестали быть «государствообразующим» элементом.

«Делать сайт на CMS» примерно тоже самое, что «клепать дизайны под ThemeForest». «Копейка рубль бережёт!» – Nuff Said.

Веб-инженер занимается контентом, «правит» вёрстку, делает разное и (occasionally) программирует. Web Developer – это низший уровень из всех возможных «веб-разработчиков». В случае с фрилансом, под веб-разработчиком , обычно, подразумевается «человек-оркестр», а точнее – «человек-батрак».

Срчно!!! Ищем терпеливого веба-разработчека!

CSS / HTML Developer / Markup Developer

Синонимы: верстальщик

Должность, на которой требуется верстать дизайн. Требования к знанию JS и программирования минимальные или отсутствуют. Желательно необходимо знание основ дизайна, т.к. дизайн почти никогда не переводится из PSD в HTML один-к-одному. «Pixel-Perfect» – фраза-«звоночек». Маркер менеджера-самодура, ни имеющего ни малейшего понятия о том, как работает браузер и замеряющего качество работы попиксельным (с зумом!) сравнением PSD макета и HTML страницы. Попытки объяснить разницу между рендерингом шрифта в фотошопе и в браузере, обычно, воспринимаются как «споры вместо работы». Избегайте «попиксельных» вакансий всеми силами.

Верстальщик всегда дорабатывает за дизайнером. Веб-программист всегда дорабатывает за верстальщиком. Соседние пары в этой цепочке почти всегда недолюбливают друг-друга по этой причине.

Иван не только знает всё о профессиях из этой статьи, но и поможет их освоить, составить правильное резюме и подготовиться к собеседованию.

FrontEnd Designer / Web Designer

Синонимы: веб-дизайнер

Самизнаетекто™. От специалиста требуется знание визуального дизайна (возможно, дизайна интерфейсов), знание типографики, владение Photoshop. Знание JS, обычно, не требуется.

На западном рынке, дизайнеры обычно занимаются и вёрсткой. Во-первых современная вёрстка, с учётом респонсив- и адаптив- приставок и анимаций посредственно описывается статической картинкой. Вы часто видели дизайнера показывающего анимацию и мобильную версию? Я тоже. Обычно, их возможности ограничиваются выбором из библиотечных анимаций (подобранных программистом!). Во-вторых (но по той же причине), настоящему специалисту часто оказывается проще сделать дизайн сразу в виде вёрстки. Зачем делать работу X + Y, если можно обойтись Y?

На нашем рынке, ввиду технологического отставания, дизайнеры и верстальщики – разные люди.

Interface Developer / UI-UX Designer

Похоже на предыдущий вариант, но с упором на дизайн интеракций. Специалисты на этой должности, обычно, много общаются с программистами, с клиентами, с менеджерами, потом опять с программистами... По этой причине, желательно знание основ разработки ПО и коммуникативные навыки. Очень часто, вакансия также требует знания специфики мобильной разработки, т.к. двух UI/UX экспертов нанимают довольно редко. Имейте в виду, что по этому направлению сложно найти материал для самообучения, что может идти как в плюс (меньше конкуренция) так и в минус (сложнее освоить). Если же вы способны учиться на примерах – проблем быть не должно.

Mobile / Tablet FrontEnd Developer

Должность для разработчика, специализирующегося на мобильных устройствах. Требуется знание специфики платформ IOS и Android. React Native – современный вариант этой специализации, позволяющий использовать веб-технологии для создания нативных приложений. Хинт: веб-приложения, гибридные приложения, нативные приложения и нативные приложения на веб-технологиях – это всё разные вещи.

FrontEnd Developer / Engineer

Синонимы: фронтендщик, фронтенд-разработчик

Обобщённое название должности для разработчика, владеющего HTML / JS / CSS. Обычно встречается в небольших компаниях, где на одного человека возлагается широкий спектр задач. Знание дизайна, вероятно, не требуется, но будет идти как бонус. В современных условиях, всё чаще заменяется на титул конкретной технологии: jQuery Developer , Backbone Developer , React Developer , Angular Developer ... Умения программировать и верстать входят в пакет требований.

JS Developer / FrontEnd Programmer

Синонимы: JS разработчик * / JS программист

То же, что и предыдущее, с большим упором на программирование и меньшим на вёрстку и дизайн. Вообще, термин Developer (Engineer в меньшей степени) вместо Programmer , может означать что программирования будет меньше, а «всякой всячины» – больше. Кроме случаев, когда язык программирования указан явно (JS developer ~= JS programmer).

JS Developer может означать и FullStack (см. ниже). В этом случае, компания, вероятно, планирует определиться с вашей специализацией позже – когда будут ясны ваши сильные и слабые стороны. Или же когда иные рабочие места распределятся. Поэтому, JS Developer почти всегда идёт в паре с Junior или Senior / Middle .

FrontEnd SEO expert

Редкая должность, на которой требуется оптимизировать HTML код согласно требованиям и пожеланиям поисковых систем (Google / Yandex). Специфические знания: микро-форматы, микро-разметка. Учитывая, что SEO вымирает и заменяется классическим маркетингом – рекомендую избегать всего, что содержит данный акроним. Если поиск работы не ваше хобби, конечно.

FrontEnd Accessibility expert

Упор на оптимизацию сайта под специальные ридеры (например, для людей с ограниченным зрением). Исключительно редкая должность. Занесена в Красную книгу. Встречается только на крупных проектах.

FrontEnd Dev. Ops

Должность для специалиста по вопросам сборки, автоматизации, интеграции фронт-енд приложений. Встречается, преимущественно, в крупных компаниях, т.к. подразумевает довольно узкий спектр задач. Актуальные знания: Webpack / Gulp / Grunt. Со временем, у вас начнут спрашивать чем вы, собственно, занимаетесь...

FrontEnd Testing / QA

Должность для специалиста по тестированию / контролю качества фронтенд приложений. Встречается в крупных и средних компаниях. Актуальные знания: юнит-тесты, функциональные тесты, A/B тесты, ручное тестирование и автоматизация. Коммуникативные способности входят в список требований.

Многие люди ошибочно полагают, что «тестировщик» – более простая работа, чем «программист». Да, иногда встречаются вакансии где можно «кликать по ссылкам» и «составлять отчёты». Но это исключения.

Заставить Selenium NightmareJS гулять по приложению, создавая скриншоты и выполняя регресионные тесты не так уж и просто. Ведь это, по сути, фуллстек разработка. Работа ведётся сразу в нескольких средах (Electron + Chromium) и требует хороших фундаментальных знаний.

FullStack Developer / Engineer / Programmer

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

FullStack делится на две категории: FullStack-JS и всё остальное . В первом случае, как несложно догадаться, на сервере и на клиенте используется JS. Во втором случае – на сервере используется Ruby / Python / PHP.

Для начинающих, чтобы не распыляться между разными языками и платформами, настоятельно рекомендую отдавать предпочтение первому варианту (по возможности). Учить сразу несколько языков – работа на износ.

FullStack JS предполагает использование феб-фреймворков на базе NodeJS. Это может быть монолитный фуллстек фреймворк (типа MeteorJS), реактивный бекенд с минималистичным клиентом (типа HorizonIO) или сборка из независимых библиотек (типа KoaJS + ReactJS). Все они имеют свои преимущества и недостатки.

FullStack JS часто используется в приложениях реального времени: чаты (а-ля Slack / Gitter), финансовые приложения (масштабируемость, PayPal...), игровые сервера. Возможность пушить информацию на клиент (создавая риал-тайм) практически «из коробки» – основной двигатель роста этой технологии.

Architect

Высший градус классического программирования. Любая вакансия со словом Architect предполагает Senior специалиста и, вероятно, не представляет интереса в краткосрочной перспективе для вас, дорогой читатель.

Lead

Вакансии лида бывают очень разные. Сколько компаний – столько разных лидов. С другой стороны, этот тот случай, когда человек определяет место, а не место – человека. Для начинающих – интереса не представляет, т.к. Junior Lead – такой же нонсенс как Junior Architect.

NodeJS Developer / Backend JS Developer

JS бекендщик. «Великий и ужасный» NodeJS – что только не говорили по его поводу. Восхваления, обвинения в «хипстерстве» – было всё...

Влад Мержевич

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

Установка происходит довольно просто, достаточно зайти браузером Firefox на сайт автора и нажать «Download», после чего вы будете перемещены на сайт, где надо щёлкнуть по «Добавить в Firefox» (рис. 7.1).

Рис. 7.1. Добавление в Firefox

Также можно зайти напрямую на страницу с расширением.

После добавления появится окно с предупреждением (рис. 7.2), жмём кнопку «Установить сейчас» и процедура установки закончена.

Рис. 7.2. Установка Web Developer

Ещё одним способом установки разных расширений является использование меню Инструменты > Дополнения . В окне поиска набираем «web developer», жмём Enter , в списке ниже появится нужное нам дополнение (рис. 7.3).

Рис. 7.3. Окно с дополнениями Firefox

Само расширение выглядит как строка меню над вкладками (рис. 7.4), также оно доступно через меню Инструменты > Web Developer . Включать/выключать панель можно через меню Вид > Панели инструментов либо щелчком правой кнопки мыши по панели расширения.

Рис. 7.4. Web Developer в браузере

Пройдёмся по пунктам меню Web Developer.

Отключить кэш

Отключает встроенный кэш браузера. Обычно изображения и копии просмотренных страниц сохраняются браузером на локальном диске для экономии времени загрузки. При повторном открытии страницы, браузер сравнивает локальную копию с оригиналом и если они совпадают, то загружается локальная копия. В некоторых случаях происходит загрузка локальной версии страницы, даже при изменении оригинала. К примеру, в настройках браузера может быть установлена проверка каждые два часа, обновилась ли на сервере сохранённая в кэш страница. Впрочем, Firefox не позволяет проводить тонкую настройку кэша наподобие Opera.

Обновить страницу в обход кэша можно также комбинацией клавиш Ctrl +F5 , она поддерживается всеми браузерами.

Java - язык программирования, разработанный компанией Sun Microsystems. Небольшие программы на этом языке (так называемые апплеты) используются для расширения функциональности веб-страниц. В Firefox встроена поддержка этого языка, которую можно отключить через этот пункт меню. В версии Firefox 3.6 не работает.

Отключить JavaScript

Язык программирования, предназначенный для работы скриптов - интегрированных с веб-страницей программ. JavaScript широко используется при создании веб-страниц для расширения их функциональности, например создать различные меню, формы, эффекты и др. Если выбрать пункт Отключить JavaScript > Полностью , то вся функциональность на сайте перестанет работать. Этот пункт меню можно использовать для проверки работы сайта без скриптов, а также для обхода различных ограничений, которые устанавливают авторы сайтов, вроде отключения работы правой кнопки мыши. Web Developer говорит, что нет таких ограничений, которые нельзя было бы обойти.

Отключить META-переадресацию

С помощью тега можно осуществить автоматическую переадресацию на указанный документ через определённый промежуток времени. Для этого используется тег и значение Refresh атрибута http-equiv (пример 7.1).

Пример 7.1. Автоматическая переадресация

Переадресация

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

Отключить минимальный размер шрифтов

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

Чтобы установить минимальный размер шрифта, выберите в меню Инструменты > Настройки... , откройте панель Содержимое и щёлкните по кнопке Дополнительно в группе Шрифты и цвета. Вы можете выбрать минимальный размер шрифта из выпадающего меню Наименьший размер шрифта .

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

Отключить цвета страницы

Выключает любые цвета, заданные с помощью свойства background или background-color . Затрагиваются также фоновые рисунки, которые установлены с помощью background .

Отключить блокировщик Popup

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

Отключить прокси

Под прокси понимают обычно сервер или программу, позволяющую подключаться к Интернету, а также с целью создания запросов от имени других клиентов. Если в настройках Firefox (Инструменты > Настройки.. , панель Дополнительные , вкладка Сеть , кнопка Настроить ) стоит «Использовать системные настройки прокси», то этот пункт неактивен.

Отключить Referrers

Referrer это один из заголовков протокола HTTP и позволяет получить адрес страницы, с которой пользователь пришёл на сайт. Если вы печётесь о безопасности своих данных, включите этот пункт.

Кукисы или куки, как их называют на жаргоне, это небольшие текстовые файлы на локальном компьютере, в которых сохраняется полезная для сайта информация. С помощью куки можно запомнить имя пользователя, его статус и другую информацию, которая используется на сайте. Firefox задаёт настройки куки через меню Инструменты > Настройки... , панель Приватность . В целях безопасности вы вообще можете отключить приём куки с сайтов.

Сами куки представляют собой набор некоторых параметров:

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

Отключить Cookies

Отключает приём куки с сайтов.

Удалить Cookies сессии

Куки часто применяются для проверки аутентификации пользователей. После ввода имени и пароля генерируется уникальный код, сохраняемый в куки. При повторном посещении сайта идёт проверка данного кода, и если он совпадает с серверным, то сайт «узнаёт» пользователя. Выбор этого пункта удаляет все сохранённые сессии.

Удалить Cookies для домена

Удаляет все куки для сайта, который в данный момент открыт в браузере.

Удалить Cookies для пути

Удаляет все куки для сайта, путь которых совпадает с путём сайта открытого в браузере.

Информация о Cookies

Открывается дополнительная страница, где в табличной форме представлены все куки с данного сайта. Их параметры можно отредактировать или вообще удалить куки (рис. 7.5).