Инструменты веб-разработчика
Всем привет! В этой статье напишу об инструментах, которые сама использую в работе. Перечисляю практически все, которыми пользуюсь постоянно или периодически обращаюсь.
Для меня существуют три главных инструмента:
- редактор кода,
- программа для работы с макетом сайта,
- локальный сервер для разработки сайта в необходимой среде.
SublimeText 3 — удобный редактор кода (HTML, CSS, JS, PHP)
SublimeText 3
Дает возможность вносить десять изменений одновременно, а не одно изменение десять раз. Множественный выбор позволяет интерактивно изменять сразу несколько строк, легко переименовывать переменные и манипулировать файлами. В сочетании с Emmet позволяет писать код быстро, с автозаполнением тегов. Возможность изменения интерфейса под себя.
NotePad++ более простой, но тоже неплохой редактор кода. Им пользовалась до SublimeText, который дает больше преимуществ и повышает производительность.
https://notepad-plus-plus.org/
OpenServer – портативная серверная платформа и программная среда, созданная специально для веб-разработчиков. Легко устанавливается, настраивается и никак не тормозит систему.
Сейчас использую такие настройки сервера: Apache-PHP-7, PHP 7.0, MySQL 5.6.
Лет 5-6 назад пользовалась Денвером – тоже виртуальный сервер, но он в какое-то время перестал поддерживаться и быстро устарел.
Adobe Photoshop CC 2018 – для нарезки PSD-макета, обработки фото и картинок для сайта.
Adobe Photoshop CC 2018
https://www.adobe.com/ru/products/photoshop.html
Zeplin – хороший инструмент для работы с макетами, ускоряющий вёрстку за счет вывода уже готовых css-блоков. Пока продолжаю пользоваться Фотошопом.
FileZilla Client — это быстрый и надежный кроссплатформенный клиент FTP, FTPS и SFTP с множеством полезных функций и интуитивно понятным графическим интерфейсом пользователя. Нужен для публикации сайта в Интернет. Его можно отнести к четвертому основному инструменту.
https://filezilla-project.org/
Документация по языкам и инструментам
| http://htmlbook.ru | справочник HTML, CSS |
| https://jquery.com | документация jQuery |
| https://learn.javascript.ru | учебник JavaScript |
| https://sass-scss.ru/documentation/ | документация SASS |
| http://lesscss.org/ | документация Less |
| https://www.sassmeister.com | компиляция sass он-лайн |
| http://www.php.su | справочник PHP |
| https://www.yiiframework.com/doc/guide/2.0/ru | полное руководство по Yii 2.0 |
| https://getbootstrap.com/ | фреймворк для адаптивной верстки Bootstrap, скачать и посмотреть документацию |
| https://dwstroy.ru/stail/raznoe/emmet-shpargalka | отличная шпаргалка Emmet сокращений |
Шаблоны
| https://www.free-css.com | бесплатные HTML+CSS шаблоны |
Проверка кода на валидность
| http://validator.w3.org | HTML валидатор |
| http://jigsaw.w3.org/css-validator | CSS валидатор |
| https://developers.google.com/speed/pagespeed/insights | проверка скорости загрузки сайта для десктопных и мобильных устройств |
Песочницы / редакторы демонстрации кода
| https://codepen.io | песочница для работы с кодом |
| https://jsfiddle.net | песочница для работы с кодом |
| http://bennettfeely.com/flexplorer | поиграть с флексами |
Сжатие картинок и кода
| https://tinypng.com | сжатие PNG и JPG |
| https://compresspng.com | сжатие PNG и JPG |
| https://jakearchibald.github.io/svgomg/ | компрессор SVG |
| https://csscompressor.com | компрессор CSS |
| https://jscompress.com | компрессор JS |
WordPress
| https://ru.wordpress.org | WordPress – скачать последнюю сборку |
| https://codex.wordpress.org/ru:Main_Page | официальная документация WordPress |
| https://wp-kama.ru/ | документация, решения WordPress на русском |
| http://underscores.me/ | базовый шаблон (тема) WordPress для интеграции верстки |
PoEdit – программа для создания переводов из файла .po + компиляция в формат .mo
Генераторы
| http://placehold.it/ | генерация картинок и текста для наполнения сайта |
| https://ru.icons8.com/icon/set/whatsapp/all | генератор иконок |
| http://www.colorzilla.com/gradient-editor/ | генератор градиента |
| https://proto.io/freebies/onoff/ | генератор переключателей |
| https://www.fontsquirrel.com/tools/webfont-generator | генератор веб-форматов шрифтов |
| http://bouncejs.com/ | CSS-анимация |
Заключение
Без инструментов ни в одной профессии не достичь высокого качества и производительности, поэтому необходимо пересматривать арсенал инструментов, узнавать о новых и внедрять их в работу.
Информацию на этой странице планирую обновлять с появлением новых инструментов.