Полезные онлайн сервисы

 

1. Jsfiddle - совместный кодинг

2. Favicongenerator - favicon под все устройства

3. fontsquirrel.com - генератор веб шрифтов

4. colorzilla.com - генератор CSS3 градиентов

 

<< назад

 

 

Настройка Sublime text 3

 

Ссылки

1. Документация

2. Хорошая презентация, если есть время погрузиться с головой

3. Как делать сниппеты

 

 

Сниппеты

 

Tools – new snippet

 

1. Вносим изменения, пример:

<snippet>

<content><![CDATA[

document.write($1)

$2

]]></content>

<tabTrigger>docwr</tabTrigger>

<scope>text.html</scope>

</snippet>

 

или

 

<scope>source.js</scope>

 

Где

$1 – первое положение курсора

$2 – второе, и т.д.

Docwr – сокращении, по которому вызывается сниппет

Text.html – тип документа, в котором виден сниппет

 

2. Сохраняем в

c:\Documents and Settings\kdn\Application Data\Sublime Text 3\Packages\HTML\docwr.sublime-snippet

 

3. Если нужно - экранируем доллар \$

 

Пример

==============================

<snippet>

<content>

<![CDATA[

console.log($1);$2

]]>

</content>

<tabTrigger>cons</tabTrigger>

<!-- <scope>source.javascript</scope> →

</snippet>

 

Плагины

 

1. Package Control - необходим для установки всех остальных

 

Для его установки:

● ctrl+` (открываем консоль)

 

● Вставляем в консоль следующий текст (для версии 3) - import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen('http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh!= h else open(os.path.join(ipp, pf), 'wb').write(by)

 

2. Для установки пакета: Ctrl+Shift+P (Cmd+Shift+P) > Package Control: Install Package (вводим название пакета):

 

● Emmet - сокращает время на ввод кода

● SideBarEnhancement - расширяет возможность сайт бара

● SyncedSideBar - синхронизирует SideBar с открытыми файлами по клику на них

● AdvancedNewFile - создаём новые файлы и папки при помощи горячих клавиш

● BracketHighlighter - открытие/закрытие любого фрагмента в коде

● jQuery - набор снипgетов для jquery

● AutoFileName - автозаполнение путей к подключаемым файлам

● CSSсomb - делает код красивым

● Gist - сохранение отдельных участков кода на github прямо во время редактирования

● SFTP - работа с ftp

 

Где лежат все установленные плагины?

C:\Users\User name\AppData\Roaming\Sublime Text 3\Installed Packages

 

 

<< назад

 

Настройка Atom

 

Ссылки

1. Документация: eng

2. Уроки по Atom: видео

 

Плагины

 

Для установки:

 

1. ctrl+` (открываем свойства)

2. нажимаем install (+)

3. в строке поиска ищем название плагина и устанавливаем

4. Важно! Перезагрузить редактор после установки плагина.

 

 

● autocomplete-plus - автодополнение элементов и атрибутов

● color-picker - позволяет подбирать цвет в редакторе

● emmet -сокращает время на ввод кода

● minimap - открывает мини окно для быстрого перемещения по коду

● atom-beautify - делает код более красивым

● file-icons - добавление иконок файлов

● javascript-snippets - сниппеты javascript

● git-plus - работа с git

● remote-edit - работа с ftp, sftp

 

<< назад

 

 

Настройка Brackets

 

1. Быстрая работа с Brackets (обучающий курс eng)

 

2. Список полезных расширений: File > Extension Manager: В поле Search вводим им расширения

 

● QuickFormTool позволяет в редакторе быстро вставлять элементы форм

● Emmet – расширение для быстрого кодинга (основанное на ZenCoding)

● Autoprefixer ­ используется для автоматического добавления префиксов, инструмент, который анализирует ваш CSS и добавляет / удаляет префиксы в случае необходимости. Это означает, что вы можете писать свой CSS код, не беспокоясь о том, какие префиксы вы должны поставить. Как только вы сохраните файл, это будет сделано за вас.

● LESS AutoCompile ­ это расширение создает автоматическую компиляцию LESS файлов после сохранения

● Indent Guides ­ показывает направляющие выравнивания в редакторе кода

● Response for Brackets ­ позволяет создавать отзывчивые и адаптивные дизайны для всех разрешений мониторов

● Gist Manager ­ позволяет осуществлять поиск и вставку сниппетов с сайта https://gist.github.com/

● Brackets SASS Code Hints ­ обеспечивает подсказки кода для документов SASS

● QuickDocsJS ­ обеспечивает быстрый доступ к каждой функции документации JavaScript

● Pixlr ­ Полностью функциональная профессиональная фото программа для редактирования изображений внутри Brackets

● Brackets ColorPalette ­ позволяет выбрать цвета из изображений и вставить в редактор

 

<< назад