На наше щастя, дотримання веб-стандартів означає, що браузери, які використовують розробники, здебільшого сумісні з браузерами, якими користується велика частина звичайних користувачів. І це дуже важливо, тому що все, що розроблено для Firefox в 99% випадків буде працювати в Chrome. IE більше не пріоритет для більшості розробників. Він застарів і використовується для завантаження інших браузерів. Edge зараз теж ніхто всерйоз не сприймає.
Firefox люблять не тільки через безпеки і конфіденційності. Firefox, завжди був, здебільшого, проектом, що просуваються співтовариством користувачів (хоча на прикладі Wikipedia «спільнота» стало занадто зарозумілим). Серцем моделі розробки спільноти є підвищення якості користувацького досвіду. Говорячи по-іншому, проекти, рухомі спільнотою, часто ставлять потреби користувачів на перше місце. Корпоративні ж проекти ставлять в пріоритет корпоративні потреби. Для розробників це означає, що в мережі можна знайти безліч безкоштовних інструментів для спрощення своєї роботи. Здебільшого ці інструменти набагато легше, ніж більшість платних варіантів.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Недолік очевидний - інструмент вимагає підключення до мережі (якщо ви, звичайно, не змогли клонувати платформу Thimble на локальний сервер). Другий недолік - на ньому не можна публікувати свої комерційні проекти, так як платформа не розрахована для професіоналів.
Як і з більшістю проектів Mozilla, документація Thimble досить мізерна, особливо в плані того, що можна і що не можна. Розробники думають, що ви прочитаєте правила використання, що можна назвати досить сумнівним припущенням, навіть якщо всякий веб-менеджер, який використовує онлайн рішення для розробки, повинен це робити.
У правилах використання є дуже важлива частина, де говориться, що ви даєте Mozilla безкоштовну ліцензію на все, що публікуєте на їхній платформі, а також даєте свою згоду на повторне використання та редагування вашого продукту іншими людьми. Очевидно, що після цього ви не захочете публікувати свої професійні проекти на цій платформі.
X-RAY GOGGLES
Діти завжди хотіли отримати рентгенівські окуляри, але на жаль такі технології (по крайней мере, реально працюють) занадто дорогі для звичайних дітей. X-Ray Goggles від Mozilla не покажуть вам, що носить шкільна медсестра під верхнім одягом, або що у шотландського садівника під його кілтом, але за допомогою цього інструменту можна побачити, як працює веб-сторінка, а також відредагувати код, щоб він працював по -іншому. Це набагато крутіше, ніж всякі збочення, правда?
Первинне призначення інструменту з професійної точки зору - пісочне моделювання для тестування змін до існуючих дизайнах без необхідності вносити моментальні зміни. Все дуже просто, для установки досить перетягнути кнопку X-Ray Goggles на панель закладок. Для активації натисніть кнопку, для виходу натисніть ESC.
Проте, експертів бентежать ті обмеження, які пов'язані з розробкою тільки під мобільну інфраструктуру. Цей інструмент в основному націлений на залучення підлітків до бренду Mozilla, а також покликаний допомогти вчителям виглядати круто (вчить їх розмовляти на мові мобільного веб-розробки).
SCRATCHPAD
Інструмент для написання і тестування коду JS. Консоль дозволяє за раз виконувати тільки один рядок скрипта, що сильно обмежує можливості. У той же час в scratchpad можна вводити скільки завгодно рядків. Активується в будь-якій вкладці Firefox натисканням Shift + F4.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
RESPONSIVE DESIGN MODE
Ця функція вбудована прямо в Firefox (вона так само є в Chromium і Google Chrome). З її допомогою можна перевіряти макети сторінок під різними дозволами на одному екрані. Інструмент неідеальний (для всіх браузерів), але підійде для більшості сценаріїв, щоб перевірити однакове відображення сайту. Режим адаптивності в Firefox активується простим натисненням Ctrl + Shift + M. Повернутися до нормального режиму повторним натисканням.
Змінювати макет можна за допомогою ряду кнопок, розташованих над макетом. Перша кнопка зліва схожа на «закрити вікно», з її допомогою можна вийти з адаптивного режиму. Далі йде список, що випадає, де можна вибрати шаблони дозволів, задати нове або (не рекомендується) видалити існуючий шаблон дозволу зі списку. Праворуч від списку розташована кнопка перемикання між портретним і альбомним режимом. Далі йде кнопка симуляції подій торкання екрана. Остання кнопка робить скріншот.
WEB DEVELOPER TOOLS EXTENSION
За замовчуванням цього інструменту в Mozilla немає, це розширення для Firefox Кріса Педеріка. У розширенні запакований величезний асортимент інструментів, які підходять під всі ваші потреби. З його допомогою можна:
вмикати і вимикати що-небудь;
змінювати CSS сторінки;
змінювати поля форм на сторінці;
знімати маски з полів типу password;
витягати докладну інформацію про зображеннях;
досліджувати DOM елементи;
змінювати розмір екрану;
переглядати макети в адаптивному режимі краще, ніж у вбудованих методах;
І ще багато чого.
Найпростіший спосіб описати це розширення - швейцарський ніж серед інструментів розробки. Він хороший багато в чому, що вам потрібно, але все інструменти заховані до тих пір, поки вони вам не знадобляться. Отримати до них доступ можна за допомогою правою кнопкою миші в контекстному меню, також є панель інструментів. Панель інструментів набагато краще.
FIREFOX DEVELOPER TOOLS
Велика частина функціоналу Firebug тепер доступна безпосередньо у вбудованій панелі розробника, в якій також є консоль. Панель схожа і працює за принципом панелі в Chromium і Google Chrome. Інтерфейс неінтуітівнимі, і поки ви освоїте і зрозумієте всі функції, ви наробите купу помилок.
Недосвідчені користувачі можуть не помітити одну з функцій - командний рядок JS внизу консолі, вона ніяк не позначена. Вона працює краще версій в Chromium / Chrome, але їх реалізація, що додає миготливий курсор прямо в консоль, набагато очевидніше.
MEASUREIT EXTENSION
Простіше встановити прекрасний Screen Ruler від Ian McIntosh, але у розширення Measureit від Kevin Freitas є перевага. Він вміє одночасно вимірювати ширину і висоту, і він більш точний. Корисний інструмент для вимірювання чого-небудь у вікні браузера. У деяких версіях Firefox інструмент не працює, це може бути через конфлікт з іншими розширеннями. Спробуйте відключити розширення перед установкою.
COLORZILLA EXTENSION І EYEDROPPER
Обидва або один з інструментів повинні бути у кожного дизайнера, тому що з їх допомогою можна швидко знайти колір з будь-якого пікселя в браузері. Також можна використовувати GColor - Gnome інструмент, який робить те ж саме, але в ньому є можливість отримати зразок кольору з будь-якого вікна, не тільки з браузера. Перевага ColorZilla і Eyedropper перед GColor в тому, що вони показують збільшений вид пікселя, від якого отримано колір.
Активується інструмент кліком по іконці eyedropper, після чого курсор змінюється на шаблон у вигляді хрестика (ColorZilla) або велику лупу (Eyedropper). Наведіть курсор на вікно і знайдіть піксель, колір якого хочете отримати. Клацніть лівою кнопкою миші для копіювання кольору в буфер обміну (в форматі hex), після чого розширення автоматично закриється.
Це лише помічники, вони не зроблять все за вас
Ви залишаєтеся розробником, вам все ще потрібно виконувати свої обов'язки. Ці інструменти, якщо використовувати їх правильно, спрощують завдання. Вони можуть допомогти різними способами, а для більшості людей деякі з них взагалі не приносять користі, незважаючи на найщиріші наміри з боку Mozilla. У мережі є й інші інструменти, краще описаних в цій статті, однак зазвичай краще використовувати ці. Іноді корисно знати, що є безкоштовний інструмент від Mozilla, який можна використовувати, якщо виникне необхідність.
Редакція: Команда webformyself.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі