Photoshop, notepad++ и бочка кофе в придачу, что ещё поможет верстать сайты быстрее и с меньшими затратами нервов?

Question

[grestifal]

Обновив свою технику уже в первый день я смог сверстать страницу 1 в 1 по макету (раньше оборудование не позволяло не то что Photoshop открыть вместе с редактором, даже Chrome не вывозил более 5 вкладок), но скорость оставляла желала лучшего, а именно:
1) После каждого обновления кода я перезагружал страницу, нет веб-разработки в реальном времени (кроме Dreamweaver) ?
2) Photoshop, пока использовал только пипетку, прямоугольник и лупу, ещё как использовать сию программу?
3) Чем вы ещё пользуетесь?

Comments

[Сергей]

Фотошоп заменить avocode. Удобнее в разы

[seosova]

Попробуйте Bracket - там хороший плагин для фотошопа, или любым редактором с live reaload - при 2к мониторе и 2-х окнах вряд ли что-то быстрее найдете. А так все зависит от уровня вертки. Но notepad++, конечно не плохая сама по себе программа, но в данном случае есть много профессиональных аналогов ( тот же atom, st2-st3, jetbrains) которые вам больше подойдут.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

Answer 1

[Rou1997]

WebStorm используйте, Notepad++ это явно не для быстрой верстки, кофе не поможет, это когда однажды нужно сделать срочную работу, сдать ее, и пойти пить совсем другой напиток, с обратным эффектом, а долговременно кофе не поднимет производительность, зато привыкание вызовет.

Answer 2

[Олег]

Emmet рулит

Comments

[seosova]

Да уже не представляю без него жизни. По большому счету не важно в каком редакторе работаете, со временем они становятся все сложнее и мощнее в зависимости от ваших задач, но Emmet реально наш спаситель. Спасибо Чикуенку еще раз!

[Deviant22]

Олег Олег
Ворует деньги. Берет заказы на работу, аванс - а потом на эти деньги забухивается или торчит. Соответственно никакой работы не получить. Абсолютно не компетентен - не рекомендую прислушиваться к его ответам, ни тем более любое сотрудничество с ним. Этот человек обыкновенный вор

Answer 3

[Max Medar]

gulp

Answer 4

[sim3x]

1) После каждого обновления кода я перезагружал страницу, нет веб-разработки в реальном времени?

так никто не делает. До написания кода ты уже должен видеть, как оно будет в браузере. Никто не запрещает использовать normalize сразу в макете

2) Photoshop, пока использовал только пипетку, прямоугольник и лупу, ещё как использовать сию программу?

csshat.com
rafaltomal.com/a-web-developerss-guide-to-photoshop
www.slideshare.net/akella/ss-33709531

3) Чем вы ещё пользуетесь?

emmet / dzen-coding -- 80% всего ускорения тебе даст именно он

сборщики -- гульп, грюнт, вебпак, позволяют в любой момент времени получать продакшен реади продукт
снипетты (live templates) в IDEA-like продуктах
sass/less/slylus

Как-то так верстают профи cssing.org.ua/2014/03/11/coding-live

А быстро верстать ты начнешь после того как попрактикуешься пару лет :)

Answer 5

[xmoonlight]

1. Пользуюсь includeHTML для шаблонов и SPA.
2. Для обновления реалтайм в браузере на ПК (и на Андроид/iPhone, можно и синхронно!) юзаю: Phongap Desktop (на папку проекта он поднимает веб-сокет)
3. Редактирую в FAR Manager 3 с плагином авто-подсказки ввода: AutoCompletion и разметкой кода FarColorer и плагином консольной эмуляции ConEmu со всеми фишками (screenshots)!

При сохранении кода по F2 - сразу видны изменения во всех браузерах, включая и мобилу.
PS: еще прям в браузере Chrome и FF можно полноценно править код и видеть
результат сразу.

UPD: Brackets
(установлено, но не пользуюсь, т.к. еще пока есть баги в нём)
1. удобно редактировать стили в CSS, содержащиеся в другом файле в inline-режиме
2. "деревья" проектных папок и файлов - всегда под рукой.
3. реал-тайм отладка
(на gif-ке: live-редактирование страницы, открытой в браузере FireFox через Brackets: Ctrl+Alt+P)

Comments

[automatik]

what the fuck did i just see O_O

[Pavel]

its a joke ?

[xmoonlight]

automatik: Pavel: No, it's absolutely awesome!

[Swartex]

Мсье знает толк в извращениях (с)

[xmoonlight]

Swartex: сверим КПД?)

[Думай Головой]

более приятен глазу total commander и cygwin вместо виндовой консоли
профитаа от фара не вижу (или не знаю)

[Думай Головой]

вместо блокнота саблайм

[automatik]

xmoonlight: как по мне саблайм намного приятней и удобней, у меня он выглядит так: https://dl.dropboxusercontent.com/u/45181978/subli...

для консолей там уже во вкусу кому что нужно, мне putty хватает, cmd практически не юзаю

[xmoonlight]

Думай Головой: Far - это единое рабочее окно для всех файловых операций и для редактирования текстовых файлов.
Плагинами - расширяется функциональность до беспредельной!
"Килл-фишки" FAR-а:
1. это работа без использования мыши, (что очень экономит время, хотя функциональность "drag-n-drop" и подобная - полностью поддерживается).
2. туча hot-key'ов, чтобы быстро выполнять необходимые действия
3. системная консоль всегда под рукой, СВОЙ! многооконный режим (не windows окна!)
4. полностью настраиваемый интерфейс и система макросов.
5. позволяет назначать всё что угодно на обработку файлов для вызова из меню или по различным событиям.

Как бонус - Far может запускаться через SSH в удалённой терминальной сессии в ASCII режиме, по аналогии с Midnight Commander (mc на *nix-ах).

Самое главное - flat-дизайн из "коробки"))))

[Думай Головой]

надо теперь подумать ещё разок) хороший комбайн получается

[xmoonlight]

automatik: как-то пытался работать на Brackets - никак.... жду избавления от багов: иногда отваливается live-preview и много еще разного из-за ошибок в коде.
А так - вполне себе для работы над шаблоном.

[Swartex]

automatik: Что за тема для Саблайма?

[automatik]

Swartex: Boxy https://packagecontrol.io/packages/Boxy%20Theme

[Станислав]

Интересный вариант, особенно про консоль через ssh, но вообще изврат, в любой IDE будет все не менее удобно.

[mydarck]

Слов нет, одни эмоции. Такого я еще не видел за 10 лет работы. Наверно не там работал. Так то все, что тебе удобно, то и есть круто! Я если честно впечатлен.

[xmoonlight]

Станислав: ага. В IDE особенно удобно серв конфигурить и работать с файлами и архивами на удалённой стороне)))

[xmoonlight]

mydarck: До идеала, конечно, очень далеко, но самый близкий к нему (лично для меня) - это Far: по F3 - он никогда не спросит: "Выберите приложение для открытия этого файла", а просто возьмёт и тихо покажет содержимое. А при просмотре любого активного лог-файла - он открывает в режиме SHARED, что позволяет отслеживать изменения файла в Real-Time режиме (как будто смотрите консоль, где бегут строки)...
Притом, я могу указать: разный вьювер и/или редактор, расцветку, маску отображения для разных типов файлов...

Любой рабочий инструмент - должен требовать минимум действий от
пользователя и обеспечивать ИНТУИТИВНЫЙ ИНТЕРФЕЙС ЕДИНОГО ОКНА! Чем меньше переходов между окнами/приложениями, тем проще и быстрее достигается цель.

И, конечно, всё зависит от специфики выполняемой задачи.

[Станислав]

xmoonlight: говоря "Интересный вариант, особенно про консоль через ssh", я имел ввиду конечно же работу в вашей импровизированной IDE через консоль и ssh. Вообще же, если не нужен какой-то визуальный инструмент типа mc/far/etc, да, из IDE нет проблем подключаться что к локальному виртуальному серверу, что к удаленному, и проводить любые необходимые операции.

[xmoonlight]

Станислав: возможно, я перестал доверять IDE при работе с удалёнными файлами/проектами, т.к. есть негативный опыт того, что при обрыве соединения ломались проекты на удалённой стороне :(
(+еще долгая компиляция, т.к. файлы тянутся с удалённого сервера)

Может подскажете что-то для web-разработки (php/css/js/html), что может править файлы на хостинге не закачивая их целиком туда и обратно, а закачивая только изменившиеся данные файла (которые отличаются от удалённой файловой области) или загружая в IDE только ту, над которой работают (просматривают)?
Желательно что-то по SFTP, например, как вот Syncovery делает (только встроенное в IDE нужно): https://www.syncovery.com/ru/overview/

[Станислав]

xmoonlight: я использую PHPStorm, он умеет в том числе и в SFTP. Не знаю, как он работает с файлами, закачивает только часть или как-то еще, знаю только, что у меня таких проблем никогда не возникало. В крайнем случае выдается ошибка о том, что синхронизация не может быть выполнена, и файл в проекте (локальном) остается в том виде, в котором он и был.

В целом я вообще использую во всех проектах длиннее пары часов git, через создание репозитория на удаленном сервере (Bitbucket, Github, свой удаленный - не важно), что занимает примерно одну минуту вместе с его клонированием в локальный проект. В итоге мне не важны проблемы с сохранностью как локального, так и удаленного кода и прочих ресурсов - все необходимое я пушу в репозиторий и оно там лежит в целости и сохранности.

Но если бы у меня вдруг была проблема с коннектом к удаленной машине из-за разрывов, то я бы наверное использовал такие варианты, на выбор:
1. Локальный виртуальный сервер, на котором тестировал бы и разрабатывал проект от и до, делая деплои на продакшн только после очередного успешного этапа разработки.
2. Удаленный тестовый сервер, на котором делал бы все то же самое, что в пункте 1, и потом все результаты работы закачивал бы на продакшн. Для пущей верности в обоих пунктах можно использовать что-либо для последующей сборки после деплоя, когда сначала закачиваются сорцы, и потом они уже через что-то вроде capistrano/etc заливаются куда надо, подставляются необходимые переменные окружения и конфиги и так далее.

Вообще же, я сейчас еще раз прочитал ваш вопрос и осмыслил его по-новому - возможно, вы имеете ввиду, что IDE должна работать с удаленными файлами/проектами, правя их прямо где-то удаленно? Если так, то это не правильный путь ни разу, всегда в IDE имеется локальная версия всех необходимых файлов, которые правятся локально и потом тем или иным образом попадают в ту или иную рабочую среду - командами IDE типа "синхронизировать", "закачать" или же некими скриптами, или созданием из файлов проекта папки проекта в виртуальном локальном хосте, и так далее.

Это гарантия сохранности проекта, плюс ради дополнительной сохранности можно использовать то, что я уже описал выше.

[xmoonlight]

Станислав: букв много, а ответа - нет: перечитайте ещё разок мой вопрос...

[Станислав]

xmoonlight: ответ на самом деле есть, и он заключается в том, что вы неправильно подходите в принципе к проектам, говоря о какой-то частичной закачке файла и прочем. То, что вы выдумали себе такую концепцию не значит, что она верная и что под нее в принципе производится какой-либо софт.

Или вы имеете ввиду не части файла, а в смысле что есть проект из множества файлов, а вам нужно работать только с парой из них, например?

[xmoonlight]

Станислав: нет, мне нужно именно обновление изменённого блока (или части файла). пример ссылки - я привёл.

[Станислав]

xmoonlight: вы привели пример софта, который занимается бекапами. Если же вы ищете IDE, которая будет делать аналогичное, то вряд ли вы что-либо найдете, так как вы не понимаете саму концепцию работы с проектом в IDE, в том ее виде, в котором она существует сейчас - в ней невозможна ситуация, когда произойдет некая потеря, которую вы не заметите или не сможете восстановить.

[xmoonlight]

Станислав: тогда это нужно делать с системой реал-тайм синхронизации, поддерживающей блочное обновление различающихся частей файла (файловых блоков) и работать с локальной копией из любой IDE.
Это "из коробки" поддерживается SFTP-протоколом (я тут просветился), но исключительно только в сторону upload!

[Станислав]

xmoonlight: эээ, в смысле синхронизировать с текущей рабочей версией сайта, верно? Или что с чем у вас в реалтайм должно синхронизироваться?

[xmoonlight]

Станислав: ну да. когда я жму "сохранить" в локальной папке, оно сразу же обновляет на хостинге.

[Станислав]

xmoonlight: не касаясь оправданности такого подхода в большинстве случаев, такая возможность есть в тех же продуктах от JetBrains (https://yadi.sk/i/0mUi6w6xwndPC). При этом их продукты проверяют закачанные файлы на идентичность с локальной копией в проекте, насколько я знаю (вижу, как в фоне проскакивают эти задачи).

Но вообще гораздо удобнее и безопаснее как раз не сохранять каждый раз на (рабочем) сервере изменения в коде, а либо синхронизировать их (https://yadi.sk/i/jKIPEX_swneiS), просматривая перед деплоем все вносимые изменения, либо уж загружать просто аплоадом, но только тогда, когда это необходимо. У меня все эти пункты, например, собраны в едином быстром меню, вызываемом по Ctrl+Shift+D (https://yadi.sk/i/jKIPEX_swneiS), с возможностью загрузки на сервер по умолчанию или на любой другой выбранный, и тд и тп.

При этом все изменения в локальном проекте сохраняются безо всяких сохранений, в любой момент закрыв проект, мы всегда его откроем после ровно в том же состоянии, что он был на момент закрытия, без каких-либо сохранений.

[xmoonlight]

Станислав: на шоте на JetBrains по SFTP что-то есть... (ветка правда свёрнута) но суть - понятна. Спасибо!

[Станислав]

xmoonlight: пожалуйста. И еще один шот, на прощание :)
https://yadi.sk/i/jhAPqh9Bwni9U

[xmoonlight]

Станислав: ну вот! я узнал что он (SFTP) умеет из коробки работать с блоками, Вы - подсказали IDE.
Вместе - 100% покрытие информации!
Мы - круты! :)

[Станислав]

xmoonlight: без вопросов, но я опять же повторюсь, что потерять данные или передать их не полностью и не заметить этого в IDE от JetBrains невозможно как из-за собственно принципов работы самой IDE, которая проверяет загруженные данные в любом случае (насколько я знаю, опять же), так и из-за принципов работы с самой IDE, то есть когда вы отказываетесь от загрузки кода по Ctrl+S на рабочий или какой угодно другой сервер и работаете:
либо с локальной копией проекта;
либо с локальной копией проекта и в режиме live - когда написанные изменения в коде сразу отображаются в браузере даже без обновления страницы;
либо с удаленным тестовым сервером, загружая туда тем или иным образом код и не боясь нарушить работу основного сервера, равно как и потерять код;
либо с удаленным пускай и рабочим сервером, но все равно через контролируемую загрузку кода только тогда, когда это требуется, а не просто по каждому сохранению локальной копии проекта.

[Станислав]

Станислав: первые два варианта - имеется ввиду, когда локально запущен веб-сервер и сервер баз данных, если таковой требуется, и в нем крутится ваш проект.

[xmoonlight]

Станислав: ОК! Всё-таки, хочу сразу и бэкап, и лайв-синхронизация с удалённым проектом и с возможностью использования (п.1 или 2) только тогда, когда пропадает интернет, а иначе (по-дефолту) - сразу на удалёнке чтобы все обновлялось...
Надо придумать/продумать грамотную схемку...

[Станислав]

xmoonlight: ну все это найдете без проблем. Бекапом является как бы сам проект, ну и как я писал выше, можно пушить в репозиторий удаленный какой-нибудь. Собственно, при вашем подходе, когда код сразу деплоится на продакшн, я бы крайне рекомедовал именно такой подход и побольше коммитов, в этом случае всегда можно будет оперативно откатиться на любое состояние проекта и собственно хранить сам проект как локально, так и в удаленном хранилище (Github, Bitbucket, свое).

Но уверяю, я сам прошел через путь осознания, что лучше работать не так, хотя изначально тоже очень хотелось как привык, нажал-сохранил и все улетело. Но в итоге это актуально в итоге только для мелких правок и исключительно когда работаешь над проектом один.

[xmoonlight]

Станислав: да. я работаю один.

Answer 6

[smiros]

у WebDesign Master на Ютюб-канале столько уроков!!! Я там черпаю инфу. Ну я к тому что он рассказывал как настроить Sublime Text. В джедай верстки 5 он вообще использует Gulp и рассказывает как его настроить... При том, что в самом галпе можно подключить livereload, то есть после сохранения файла index.html или сss страница автоматом отображается с изменениями.

Answer 7

[iBird Rose]

sublime text и ставишь какой нить livereload. ну и плагины для sublime text по вкусу.

Answer 8

[Максим Кудрявцев]

А почему никто Browsersync не вспомнил? Штука цепляется к Gulp и при каждом обновлении CSS / HTML автоматически без перезагрузки отображает изменения на странице. Если нужно перезагрузка, то Browsersync сам ее и выполняет. На loftblog еще видео было как его вместе с Gulp

Если сможете настроить свой роутер, то можно обновления сразу цеплять еще на смартфоне и планшете, которые в Вашей локалке.

Comments

[Александр Величко]

Можно и без галпа запускать, на ноде browser-sync start --config config.js и всё)

Answer 9

[Ник В]

avocode

Comments

[Станислав]

Да, помогает порезать быстро, но он платный, кого-то это может смутить. Для Ps есть плагины, выполняющие подобные функции, гуглить ek128_storm_plugin, рядом с ним остальные найдутся в обзорах.

Answer 10

[Fanis X]

У Adobe есть замечательный бесплатный сервис. https://assets.adobe.com позволяет доставать картинки и копировать стили у элементов макета. Попробуйте, скорость вертки однозначно увеличивается

Answer 11

[03megapixel]

Brackets.
youtube.com
Надеюсь поможет.

Answer 12

[Василь Бойко]

хм..не знаю, как кто, но зачем перезагружать страницу после каждой дописанных пару строчек кода?
я, например, могу сразу написать html-разметку, потом ~90-95% CSS-кода, а потом через devtools в хроме подгоняю под perfect pixel.
а так, для "быстрой" верстки советую вам скачать SublimeText3, установить следующие плагины:
- Emmet (для быстрого написания html,css);
- Tag (для изъятие классов с выделенного участка кода).

Answer 13

[lightalex]

Brackets однозначно! (если мы говорим именно о верстке)
Канал на ютубе на котором автор расскажет как подготовить редактор для удобной работы
Главное преимущество Brackets это live-режим верстки
С двумя экранами это самое то!
+ очень удобно что ты можешь реализовать любой функционал в этом редакторе
Очень удобная система плагинов
Есть конечно и минусы
Присутствуют некоторые баги, но это все решается перезагрузкой программы
За целый рабочий день в среднем перезагружаю редактор 1-2 раза
Для меня не критично

Answer 14

[Алексей Голягин]

Я обычно верстаю в Brackets с установленным в него Emmet, сам Brackets из коробки показывает не закрытые теги (это удобно), а плагин Emmet помогает быстро писать код. Notepad++ пользуюсь только в случае когда нужно к примеры в 40 файлах поменять пути (к примеру при переносе сайта на cms с локального веб сервера (к стати пользуюсь опен сервером, так как в нем все самое свежее PHP7 и т.д.) на хостинг (найти и заменить, указываем папку с сайтом, заменяем)

Answer 15

[lex bem]

bem.info

верстать статику быстрее некуда без писанины и все по бэму

Answer 16

[noys]

FarManager + Colorer + Win-keys macros