Полезная информация

Общайтесь со знакомыми и друзьями в нашей группе в Контакте.

№112-12-2006 04:02:40

Vednier
Участник
 
Группа: Members
Откуда: В ауте
Зарегистрирован: 23-11-2006
Сообщений: 1430

Набор расширений для Web разработчика

Вот, появилась тут у меня необходимость - собрать в кучу полезные расширения для Вэбмастера :)
Вопрос прост - кто что может посоветовать?
Только, ради бога, никаких SEO тулбаров.
Я так уже пробежался каталоги расширений для разработки
https://addons.mozilla.org/search.php?cat=4&app=firefox&appfilter=firefox&type=E
но больно там всего много + есть расширения аналоги.
Набор нужен на максимально широкую функциональность, с охватом всего что только можно.


Свобода только тут - mozilla@conference.jabber.ru

Отсутствует

 

№212-12-2006 05:30:23

Shutnik
Happy Arch Linux User
 
Группа: Extensions
Откуда: Tyumen ✈ Dnipropetrovsk
Зарегистрирован: 12-11-2005
Сообщений: 3785
Веб-сайт

Re: Набор расширений для Web разработчика

я использую WebDeveloper, пока доволен...


Life's emblem here, in youth and vernal bloom,
But reason's finger pointing at the...

Отсутствует

 

№312-12-2006 10:20:56

arka
Участник
 
Группа: Members
Зарегистрирован: 10-08-2005
Сообщений: 183
Веб-сайт

Re: Набор расширений для Web разработчика

WebDeveloper + HTML Validator (для локальной проверки, но обязательно последующая проверка на validator.w3.org - расширение не всё отлавливает) + FireBug (если используются JavaScript'ы) + Live HTTP headers (смотрим все запросы, если нужно)

Отсутствует

 

№412-12-2006 11:44:34

klay
Участник
 
Группа: Members
Откуда: Россия, Москва
Зарегистрирован: 11-09-2006
Сообщений: 115
Веб-сайт

Re: Набор расширений для Web разработчика

Мой набор для разработки (естественно плугинов больше :) ):

WebDeveloper
HTML Validator
XPather
Server Switcher
RDF Viewer
NOScript
MeasureIt
JSView
JavaScript Debugger
Firebug
InspectThis
DOM Inspector
Domain Details
ChromEdit Plus
Aptana Debugger Service
EditCSS
Console2
View Dependencies
XPComViewer

Отредактировано klay (19-12-2006 20:19:43)


Fedora 7

Отсутствует

 

№512-12-2006 12:25:20

Dark-Demon
Участник
 
Группа: Members
Зарегистрирован: 20-02-2006
Сообщений: 1278

Re: Набор расширений для Web разработчика

inspect this меняем на inspect context. последняя встраивается вообще во все контекстные меню.


!

Отсутствует

 

№612-12-2006 15:03:54

vladmir
SeaMonkey - вот это браузер
 
Группа: Extensions
Откуда: НН
Зарегистрирован: 16-10-2004
Сообщений: 4630

Re: Набор расширений для Web разработчика

Я вот здесь коллекционирую, но тоже всё подряд.

http://fotoleto.ru/mozilla/web-development.html

Отсутствует

 

№712-12-2006 21:38:17

Quicksilver tears
Забанен
 
Группа: Extensions
Зарегистрирован: 13-06-2005
Сообщений: 4459

Re: Набор расширений для Web разработчика

==> Разработка.
Тема прикреплена.

Отсутствует

 

№813-12-2006 10:42:49

VictorS
Участник
 
Группа: Members
Откуда: г. Петрозаводск
Зарегистрирован: 16-03-2005
Сообщений: 140
Веб-сайт

Re: Набор расширений для Web разработчика

HTML Validator (для локальной проверки, но обязательно последующая проверка на validator.w3.org - расширение не всё отлавливает)

Кстати, иногда он и кое-что лишнее отлавливает. Он не любит чтонибудь такого вида:

Выделить код

Код:

<a href="javascript:...">...</a>

Особенно если в javascript еще каких-нибудь HTML-сущностей (как &#123;) напихано.

Мой набор:
HTML Validator
IE View
OperaView
DOM Inspector
WebDeveloper
Console2
JavaScript Debugger

Отредактировано VictorS (13-12-2006 10:43:56)


"Не показывайте мне дорогу, а научите как найти ее самому."

Отсутствует

 

№913-12-2006 12:47:46

Dark-Demon
Участник
 
Группа: Members
Зарегистрирован: 20-02-2006
Сообщений: 1278

Re: Набор расширений для Web разработчика

Кстати, иногда он и кое-что лишнее отлавливает. Он не любит чтонибудь такого вида:

RTFM. амперсанды надо заменять на &amp;


!

Отсутствует

 

№1013-12-2006 14:09:43

VictorS
Участник
 
Группа: Members
Откуда: г. Петрозаводск
Зарегистрирован: 16-03-2005
Сообщений: 140
Веб-сайт

Re: Набор расширений для Web разработчика

[offtop]
Dark-Demon, не стоит писать о непонятных вещах. ;)
&#123; = {
&amp;#123; = &#123; != {
Не могу найти конкретную страничку на которой видел такое. :( Причем внизу красовалась кнопочка на валидатор на w3c.org, которую я для проверки нажал и оказалось что все успешно валидируется.
[/offtop]

Отредактировано VictorS (13-12-2006 14:10:08)


"Не показывайте мне дорогу, а научите как найти ее самому."

Отсутствует

 

№1113-12-2006 16:46:05

Dark-Demon
Участник
 
Группа: Members
Зарегистрирован: 20-02-2006
Сообщений: 1278

Re: Набор расширений для Web разработчика

VictorS, в приведённом тобой коде всё валидно...


!

Отсутствует

 

№1213-12-2006 17:52:27

VictorS
Участник
 
Группа: Members
Откуда: г. Петрозаводск
Зарегистрирован: 16-03-2005
Сообщений: 140
Веб-сайт

Re: Набор расширений для Web разработчика

Dark-Demon, вот страничка:
http://home.onego.ru/~victors/test.htm
Понял о чем предупреждает расширение - о пробелах в URI. А http://validator.w3.org/ на них реагирует спокойно.

Отредактировано VictorS (13-12-2006 17:52:54)


"Не показывайте мне дорогу, а научите как найти ее самому."

Отсутствует

 

№1324-12-2006 16:23:32

Vednier
Участник
 
Группа: Members
Откуда: В ауте
Зарегистрирован: 23-11-2006
Сообщений: 1430

Re: Набор расширений для Web разработчика

Вот, не сочтите за глупость, отрыл себе в последнее время пару полезных вещей:

1)MeasureIt, https://addons.mozilla.org/firefox/539/
Очень удобная линейка для Фокса, выводит кнопку на статусбар, нажимаешь её и тянешь измеритель расстояния (аля GIMP)
Длинну показывает тут же.
Одновременно с этим блокирует доступ к странице, чтобы что-то лишнее не нажать.

2)CSSViewer, https://addons.mozilla.org/firefox/2104/
При запуске расширения показывает CSS свойства любого элемента на который наведешь курсор. И не надо лазать в код.
Минусы - тормозит, текст выводимый в расширении слишком мал, чтобы удобно читать.

3)Colorzilla, палитра цветов в стиле NVU (портирована оттуда)
Удобно, но в последнее время FireColor кажется поудобнее.

4) Palette Grabber, https://addons.mozilla.org/firefox/2290/
Очень удобно создавать палитры прямо из цветов сайта.
Потом можно архибыстро стилизовать картинки под едлиную цветовую гамму.
Работате с Фотошопом, PSP, Fireworks, и что самое важно для меня  -  GIMP

кроме того - RainbowPicker - реализация Пипетки из графических пакетов.

Table2Clipboard - НОРМАЛЬНОЕ копирование таблиц в буфер обмена.

UrlParams - быстрый доступ к параметрам GET запросов

ПС
Я заметил, что на АМО очень слабо категоризированные расширения.
Например, есть куча расширений для работы с http протоколом..надо бы в кучу собрать


Свобода только тут - mozilla@conference.jabber.ru

Отсутствует

 

№1404-08-2010 19:00:59

Damien
Участник
 
Группа: Members
Зарегистрирован: 30-07-2010
Сообщений: 3
UA: Firefox 3.6

Re: Набор расширений для Web разработчика

Человек помощи просит!
помогите ему..

http://forum.mozilla-russia.org/viewtopic.php?id=45450

Отредактировано Damien (04-08-2010 19:02:34)

Отсутствует

 

№1514-04-2012 13:00:01

bidlocoder
Участник
 
Группа: Members
Зарегистрирован: 30-09-2010
Сообщений: 52
UA: Firefox 11.0

Re: Набор расширений для Web разработчика

execute JS

Отсутствует

 

№1602-10-2016 21:59:15

Dorian
Забанен
 
Группа: Members
Зарегистрирован: 27-09-2016
Сообщений: 81
UA: Firefox 49.0

Re: Набор расширений для Web разработчика

Поделюсь свои набором расширений для Web разработки:

1. Дополнений
FireBug - основной инструмент, инспекция html, javascript, css, консоль, cookie и др. хранилищ, запросов
FireBug имеет множество дополнений тут список, впрочем часто они устаревают, много бесполезных.
Ещё в FireBug есть функции логирования и команды командной строки. О них надо знать любому разработчику.

ColorZilla - инструменты для подборки цветов.

Web Developer - много инструментов, от линейки до автоформатирования javascript, отключения куков, css, валидации и др.

2. Специальные дополнения
Специальные дополнения часто делают разработчики JavaScript фреймворков. Они заточены под конкретный фреймворк: ReactJs, AngularJS и другие.
Если такое дополнение существует только под Chrome [chrome], то можно использовать дополнение для его запуска под Firefox: Chrome Store Foxified

3. Встроенные инструменты
До недавнего времени было намного больше дополнений для разработки. Сейчас их стали забрасывать потому что появилась сборка Firefox на основе тестовой версии предназначенная специально для разработки. И она очень удобна: Firefox Developer Edition
Большой минус этой сборки: она часто глючит. Поэтому на практике нужно держать обычный Firefox с отдельным профилем для разработки.
Обязательно загляните в настройки, там много опций.

4. Оптимизаторы JavaScript
Существуют так называемы "оптимизаторы JavaScript". Они заменяют имена переменных на более короткие, удаляют лишние символы. (сокращая файл)
Более продвинутые заменяют некоторые куски кода на более быстрые варианты.
Лучшим оптимизатором считается оптимизатор от Google: Closure Compiler Он написан на Java, но есть и онлайн версия.

Анализаторы кода JavaScript на ошибки: https://en.wikipedia.org/wiki/List_of_t … JavaScript

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

Оптимизаторы JavaScript
Closure Compiler Service - оптимизация и анализ кода
UglifyJS - аналог Closure Compiler Service
Online JavaScript beautifier - форматирует код (аналог встроенного в Firefox инструмента)

Сервисы для обмена кодом (можете сохранять код, а потом давать ссылку кому-нибудь)
Gist
Pastebin
ZeroBin

Сервисы куда можно сохранить код и сразу посмотреть результат его работы (как страницу в браузере)
JSFiddle
CodePen
Plunker
js.do

Подбор регулярных выражений и просмотр результата их работы
Regexper
RegExr

Git сервисы, системы контроля версий (можно сохранить свой код как на википедию, часто их используют как социальную сеть для общения) - это основа программирования :D
GitHub
bitbucket
savannah

Обфускаторы - запутывают внешний вид JavaScript кода, при том что работает он по прежнему (это тот же код написанный другими символами)
jjencode
aaencode
JSFuck
По этой теме советую статью: Обфускация JavaScript / Хабрахабр

Анализ браузера - какие он передаёт данные внешнему наблюдателю
https://www.browserleaks.com/
https://panopticlick.eff.org/
http://ip-check.info/
https://amiunique.org/
http://browserspy.dk/
http://ip-check.info/
https://www.doileak.com/
http://www.rexswain.com/httpview.html
http://tools-on.net/

Анализ настроек сайтов и серверов - показывает правильно настроена безопасность сайта (и др. настройки) или нет
https://observatory.mozilla.org/
https://securityheaders.io/
https://www.ssllabs.com/ssltest/index.html

CSS визуальные редакторы
В них уже готовый макет в котором через ползунки, меню и подобное можно настроить: форму, цвет, градиент и подобное. Затем скопировать уже готовый код, чтобы не подбирать CSS свойства мысленно во время вёрстки. Таких сервисов множество, используйте google для их поиска.
Вот несколько примеров:
http://www.cssmatic.com/border-radius
http://www.cssmatic.com/gradient-generator
http://css3gen.com/css-transform/
http://css3gen.com/css-3d-transform/

Leet speak
Заменяют буквы в тексте на похожие по начертанию символы. Используются для декорации или сокрытия спама.
http://textinvert.ru/
http://www.sherv.net/weirdmaker.html
https://eeemo.net/

6. Отдельные программы
6.1 Для подборки цвета также можно использовать отдельные программы. Например существует программа с открытым кодом: gpick
6.2 Всяческие графические редакторы .HTML и .CSS, где результат можно сразу увидеть. В том числе с множеством инструментов для работы с такими CSS библиотеками, как Bootstrap. Они здорово ускоряют работу. Их ищите и подбирайте под свой вкус.
6.3 Графические редакторы. В разработке вам может понадобиться работать макетами и изображениями.

В теории вы можете использовать любой open source редактор:
krita, pinta, MyPaint - рисовалки
Inkscape - векторный
Darktable - редактов фото, аналог Adobe Lightroom и Apple Aperture
Scribus - верстка буклетов и книг как в Adobe InDesign, PDF, призентации и т.д.: scribus-template - дополнительные шаблоны
Blender - работа с 3D анимацией (а вдруг? :D)
GIMP - аналог Photoshop к которому можно установить дополнительные инструменты: gimp-data-extras, gimp-plugin-registry

На практике в множестве случаев используют платные редакторы с закрытым кодом: Photoshop (в основном 2D графика), Adobe InDesign (типографская верстка журналов, книг и т.д.), Adobe Lightroom (редактор фото), CorelDRAW (векторный).
Вам просто пришлют макет в таком формате, который правильно открывается только в платном софте. И мало кто вас будет спрашивать хотите вы покупать платный редактор или нет. :D Тем более, что они чаще всего действительно удобнее, более развиты и имеют меньше ошибок (не считая Blender - он хорош).

7. Ссылки
Огромный список сервисов: 400 потрясающих бесплатных сервисов
http://www.w3schools.com/ - отличные уроки и справочники по js, css, xml, html, sql и другим на английском
http://www.tutorialspoint.com - аналог w3schools.com
https://developer.mozilla.org/ - ищите тут свежие сведения о js и css
https://msdn.microsoft.com - тоже бывает отлично описано то, чего нету у других
https://learn.javascript.ru/ - неплохой ресурс на русском
https://webref.ru/ - справочник по CSS и HTML на русском
JavaScript Гарден - быстрое введение в стандартный js
airbnb/javascript: JavaScript Style Guide - примеры того, как правильно писать на js и как не надо, ориентируется на новые редакции js
Выразительный JavaScript: Введение - хорошая книжка

Примечение
1. Для использования сайтов выше, как справочника, набирайте в гугл: "site:developer.mozilla.org <что_я_хочу_найти>"
2. Лучшие сервисы - англоязычные. На многих из них есть примеры кода и результат их работы, так что не бойтесь использовать их даже, если не знаете английского языка.

Отредактировано Dorian (07-10-2016 15:05:49)

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2011 Mozilla Russia
Язык отображения форума: [Русский] [English]