Вредоносное ПО (malware) - это назойливые или опасные программы,...
С 15-ой версии Firefox на веб-разработчиков посыпались подарки. Добавлены новые инструменты отладки, улучшены существующие, появились новые функции. Начиная с 16-ой версии Firefox стал поддерживать практически все элелемнты CCS3 без префиксов
А теперь о каждом подарке отдельно и подробно
Адаптивный дизайн
Адаптивный дизайн - функция, с помощью которой возможно просматривать сайт с любого разрешения. Можно выбрать или из предустановленных основных стандартных разрешений, а можно настраивать самостоятельно.
Функцию можно вызвать сочетанием клавиш Ctrl+Shift+M Или из меню - Инструменты - Веб-разработка - Адаптивный дизайн
Как видите вкладка веб-разработки немного расширилась за счет добавленных функций. Но вернемся к адаптивному дизайну.
Подключить функцию просмотра сайта в различных расширениях можно на любой странице в отдельной вкладке, при этом остальные открытые вкладки не изменятся. Запущенная функция не мешает просмотру сайта, то есть можно переходить по ссылкам внутри сайта или по внешним ссылкам, и вкладка с адаптивным дизайном будет отображать любые страницы вплоть до отключения
Помимо предустановленных расширений, вы можете самостоятельно изменять расширения по своему усмотрению. С помощью двух ползунков справа можно увеличивать и уменьшать размеры.
Наверное не нужно отдельно говорить, насколько ценна внедренная функция для веб-разработчиков, ввиду того, что расплодилось различных устройств с различными расширениями. И каждому веб-разработчику или владельцу сайта важно знать как выглядит сайт с различных расширений. Особенно начинающим будет полезно
Отладчик JavaScript
Наряду с простым редактором JavaScript, с помощью которого было довольно удобно тестить, править и исследовать некоторые сценарии, появился более совершенный отладчик
Пользователи далекие от разработки скриптов могут с помощью этого встроенного инструмента исследовать сценарии на любой странице и получать список и содержимое скриптов
Поддержка без префиксов элементов CSS3
Начиная с 16-ой версии, Firefox полностью поддерживает (без префиксов) такие элементы как Градиенты, Трансформация, Анимация и Переходы
Firefox - первый браузер, который стал поддерживать новые технологии. Для остальных браузеров приходится лепить или префиксы или альтернативное отображение
Наглядно поддержку можно увидеть в хлебных крошках данного сайта (менюшка навигации над материалом). На примере страницы
CSS3 и HTML5 Новейшие технологии Градиенты в хлебных крошках нарисованы без префиксов. Пользователи 16+ версии FF будут видеть правильное отображение
Пользователи остальных браузеров будут видеть простое отображение
Наряду с этим добавлена поддержка тегов audio и video. Улучшена панель разработки, с 16-ой версии Mozilla Firefox появился вызов основных функций с помощью кнопок быстрого доступа, а так же командная строка для работы с клавиатуры
Естественно в этом обзоре представлены не все нововведения, но отображены все, которые по моему мнению могут быть полезными всем пользователям и самые понравившиеся конечно
Внимание! Частичное или полное копирование статьи без активной ссылки на источник категорически запрещено
Firefox содержит множество инструментов помогающие веб-разработчикам делать их работу. Многие люди до сих пор используют FireBug и не понимают, что у Firefox теперь есть свои собственные встроенные инструменты. В этой главе мы собираемся рассмотреть инструменты, наиболее полезные для разработки приложений под Firefox OS.
Если вы заинтересованы в получении дополнительной информации об этих инструментах и о том, какие другие хорошие инструменты появятся в Firefox, посмотрите страницу на MDN (правда, посмотрите ссылку, я подожду).
Введение в адаптивный дизайн
Общий рабочий процесс веб-разработки состоит в редактировании HTML-файл и перезагрузки страницы в браузере для просмотра изменений. Если вы не используете что-то вроде Grunt или Volo, то, как правило, нет необходимости в шаге компиляции или подобном. Firefox OS Simulator позволяет вам использовать тот же процесс, за исключением того, что эмулятор в настоящее время ограничен единственным разрешением (480x320). Это меньше идеального, если вы также разрабатываете своё приложение для работы на планшетах, фаблетах, гигантских телевизорах или чего-то ещё между ними.
Чтобы проверить, как ваше приложение будет выглядеть при любом разрешении экрана, вы можете использовать инструмент Адаптивный дизайн для изменения экрана (и области просмотра). Его можно включить через меню Инструменты -> Веб-разработка -> Адаптивный дизайн , как показано на рисунке ниже. При активации этого инструмента окно изменится, так что вы можете менять размер окна просмотра перетаскивая уголки или через список выбора.
Использование адаптивного дизайна особенно полезно при тестирования на медиа-запросы, так как это позволяет менять размер экрана и видеть, как ваш сайт реагирует на изменения макета в реальном времени. Другая замечательная особенность Адаптивного дизайна заключается в том, что вы можете сохранить предустановленные размеры. Если вы знаете размеры на которые ориентируетесь, тогда можно быстро проверить разные размеры без необходимости изменять размер текущего окна браузера.
На момент написания книги большинство телефонов на Firefox OS, которые находятся на рынке, работает в разрешении 480x320 и при плотности около 96 пикселей на дюйм. Тем не менее, вы должны ожидать, что это со временем изменится, как только новое оборудование Firefox OS станет доступным. Дисплеи, скорее всего, будут иметь больше пикселей и более высокую плотность (подобно дисплеям ретина от Apple).
Для надёжной работы вашего приложения в будущем не устанавливайте в CSS любое разрешение или плотность пикселей. Вместо этого вы должны использовать медиа-запросы и принципы адаптивного дизайна при создании приложений, которые приспосабливаются к любому размеру дисплея. Чтобы узнать больше об адаптивном дизайне я рекомендую следующие книги: Responsive Web Design и Mobile First .
В целом, адаптивный дизайн позволяет проверить наши веб-приложения, используя множество различных размеров экранов без необходимости изменения окна браузера Firefox. По моему скромному мнению, это один из самых полезных и доступных инструментов веб-разработчика, но у него есть одно большое ограничение: в настоящий момент нельзя проверить различные плотности пикселей (иными словами, увидеть, как ваш сайт будет выглядеть на дисплее ретина или лучше).
Инструменты разработчика
Инструменты разработчика Firefox похожи на FireBug и инструменты, доступные в других современных браузерах. С помощью этих инструментов вы можете выполнить и отладить JavaScript через консоль и манипулировать DOM и CSS на текущей странице.
Для вызова консоли, вы можете открыть Инструменты -> Веб-разработка -> Веб-консоль или щёлкнуть правой кнопкой на странице, выбрать Инспектировать элемент и щёлкнуть на вкладке Консоль.
Кроме консоли JavaScript есть много других доступных инструментов, таких как редактор таблиц стилей , монитор сети , профайлер JavaScript , отладчик JavaScript , инспектор страницы и многие другие.
В приложении, созданном в предыдущей главе, мы использовали консоль для проверки прогресса нашего приложения. Это довольно эффективный способ отладки наших приложений, но некоторые разработчики всё еще используют alert() во всём коде JavaScript в качестве «инструмента отладки».
Использовть alert() на самом деле плохо, потому что если разработчик забывает удалить alert(), то пользователи заплатят за это. Применение консоли позволяет избежать этой проблемы, потому что все сообщения выводятся безвредно (и молча!) в месте, к которому у пользователя обычно нет доступа. Использование консоли также означает, что вам не нужно удалять сообщения из кода, если этого действительно не хочется. Это может помочь в поддержании и отладке кода, если что-то пойдёт не так (так обычно делают с любым программным обеспечением!).
Изучение и правильное использование инструментов разработчика входящих в Firefox (или любого используемого браузера) это важный шаг в становлении хорошего разработчика. Вот почему я советую всем посмотреть ссылки выше и подробнее ознакомиться с различными инструментами доступных в Firefox.
Ещё один специальный инструмент, который не был упомянут выше, называется удаленный отладчик . Этот инструмент позволяет подключиться к телефону под управлением Android или Firefox OS и использовать инструменты разработчика для отладки кода, который выполняется на устройстве, в реальном времени.
Резюме
Эта глава посвящена краткому обзору инструментов разработчика входящих в Firefox. Использование этих инструментов делает процесс разработки проще, особенно, когда вы используете их совместно с симулятором Firefox OS. В следующей главе мы узнаем больше о Менеджере приложений и как его использовать наилучшим образом.
Сегодня 13 февраля 17-ого. История началась 3 дня назад. Собственно проблема появилась следующая. Есть каруселька (это тип слайдера), верстальщику компании «R&K» пришёл запрос, о том что каруселька не адаптивная, т.е. не сжимается как положено, при сжатии окна браузера по ширине. Баг выявлен в Firefox v50.1.0 32-bit, Win7 32-bit. При этом, на следующий день, появился странный телефонный звонок от заказчика, с сообщением о том, что всё работает, и благодарность за быстрое реагирование. Т.к. вёрстку вообще никто не смотрел, то люди почесали в недоумении репы и разошлись. Через два дня снова позвонил заказчик, и уже яростно/истошно/дико/люто начал орать, что вёрстка снова не адаптивная, и не ужимается в окно браузера при сжатии браузера. Вот тут-то люди призадумались и начали крутить вёрстку.
index.html
style.css * {margin: 0; padding: 0; font-size: 0; } /* сброс стилей */ div { margin: 20px auto; /* центрирование для тестов */ border: 1px solid royalblue; /* видимость блока для тестов */ /*display: inline-block; оригинальное значение div, для теста не нужно */ max-width: 450px; /* 300, 400, 450, 600, ширину перебирайте сами */ white-space: nowrap; /* что бы изображения были в линию */ /*overflow: hidden; оригинальное значение overflow, для теста не нужно */ } input { /*display: none; оригинальное значение display, для теста не нужно */ } img { width: 100%; /* адаптивное сжатие изображения */ }
Само собой все лишнее выпилено для тестов. Что бы ясно был виден смысл проблемы. Итак, обнаруженная проблема «адаптивной верстки» следующая:
Верстаем, верстаем, например то что выше, запускаем опять же в вышеприведённом браузере Firefox. Видим следующую картину, всё как и ожидается, например вот так.
Сжимаем окно, естественно «адаптивная вёрстка» жмёт и изображение, получаем вот это.
Всё в порядке? А не тут то было… Идём пить чаёк, курим, приходим обратно, открываем яндекс, читаем новости (почту, Хабр, рутуб и т.д.), открываем поглядеть нашу верстку, и изумлённо получаем вот это.
Теперь поймите правильно людей. Люди - это люди. Всё учесть невозможно. В мире багнутого ПО учесть всё - тем более невозможно. Сложилась следующая ситуация. Клиент открыл страничку в одной вкладке, сжал браузер, и получил то, что хотел. На следующий день он открыл страничку со второй вкладкой, и верстку расколбасило. При этом, верстальщик ровно так же не замечая вкладок - открывал по-разному и получал разные результаты. На количество вкладок никто не обратил внимания. Дошло до того, что начали приподымать чистую вёнду, смотреть там, начали рыть багрепорты на форумах мозиллы, начали искать странное поведение селекторов width/max-width и предпринимать ну очень фееричные и странные действия, про которые стыдно писать, но на количество вкладок снова и опять никто не обратил внимания. Более того, часа три никто не смог воссоздать баг, потому что открывали тестовую страничку на чистом браузере без вкладок. Были просто поражены тем, что баг исчез сам собой, но конечно же, стоило открыть страничку со вкладками, причем с определенными - баг выполз. Сутки люди имели наилютейший баттхерт, которого я в жизни не видел, сдобренный истошными воплями клиента. Разумеется, у людей начали немножко сдавать нервы, и дело чуть не дошло до откровенного мордобоя. Далее повесть рассказывать смысла нет, но догадаться во что выливаются подобные ситуации можно самостоятельно.
Пожалуйста, в мире багнутого ПО будьте внимательней и терпеливей. Это относится ко всем без исключения. Как к исполнителям, так и к руководителям. С заказчиков брать кроме денег, конечно же нечего, и им простительно.
P.S.: К верстальщикам не имею никакого отношения. Верстал 10 лет назад, слава богу быстро слез с этого непотребного дела. Получил себе эту проблему по телефонному звонку от знакомого, который всю голову изломал, решая оную задачку. Баг успешно воссоздан, верстка выше - моя. Верстка тестовая, никак не продакшн, ни в одном глазу. Специально позвонил еще одному знакомому верстальщику, слышит про этот баг впервые.
