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

Обновив свою технику уже в первый день я смог сверстать страницу 1 в 1 по макету (раньше оборудование не позволяло не то что Photoshop открыть вместе с редактором, даже Chrome не вывозил более 5 вкладок), но скорость оставляла желала лучшего, а именно:
1) После каждого обновления кода я перезагружал страницу, нет веб-разработки в реальном времени (кроме Dreamweaver) ?
2) Photoshop, пока использовал только пипетку, прямоугольник и лупу, ещё как использовать сию программу?
3) Чем вы ещё пользуетесь?
  • Вопрос задан
  • 5702 просмотра
Решения вопроса 3
Rou1997
@Rou1997
WebStorm используйте, Notepad++ это явно не для быстрой верстки, кофе не поможет, это когда однажды нужно сделать срочную работу, сдать ее, и пойти пить совсем другой напиток, с обратным эффектом, а долговременно кофе не поднимет производительность, зато привыкание вызовет.
Ответ написан
Комментировать
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
MedVedar
@MedVedar
e-commerce developer
gulp
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 13
sim3x
@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

А быстро верстать ты начнешь после того как попрактикуешься пару лет :)
Ответ написан
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
1. Пользуюсь includeHTML для шаблонов и SPA.
2. Для обновления реалтайм в браузере на ПК (и на Андроид/iPhone, можно и синхронно!) юзаю: Phongap Desktop (на папку проекта он поднимает веб-сокет)
3. Редактирую в FAR Manager 3 с плагином авто-подсказки ввода: AutoCompletion и разметкой кода FarColorer и плагином консольной эмуляции ConEmu со всеми фишками (screenshots)!
ConEmuAero.png
При сохранении кода по F2 - сразу видны изменения во всех браузерах, включая и мобилу.
PS: еще прям в браузере Chrome и FF можно полноценно править код и видеть
результат сразу.

UPD: Brackets
(установлено, но не пользуюсь, т.к. еще пока есть баги в нём)
1. удобно редактировать стили в CSS, содержащиеся в другом файле в inline-режиме
2. "деревья" проектных папок и файлов - всегда под рукой.
3. реал-тайм отладка
(на gif-ке: live-редактирование страницы, открытой в браузере FireFox через Brackets: Ctrl+Alt+P)
0b320ee6b0df44cfbe63748efe7c47d4.gif
Ответ написан
@feuer81
у WebDesign Master на Ютюб-канале столько уроков!!! Я там черпаю инфу. Ну я к тому что он рассказывал как настроить Sublime Text. В джедай верстки 5 он вообще использует Gulp и рассказывает как его настроить... При том, что в самом галпе можно подключить livereload, то есть после сохранения файла index.html или сss страница автоматом отображается с изменениями.
Ответ написан
Комментировать
iiiBird
@iiiBird Куратор тега Вёрстка
Пока ты спишь - твой конкурент совершенствуется
sublime text и ставишь какой нить livereload. ну и плагины для sublime text по вкусу.
Ответ написан
Комментировать
kumaxim
@kumaxim
Web-программист
А почему никто Browsersync не вспомнил? Штука цепляется к Gulp и при каждом обновлении CSS / HTML автоматически без перезагрузки отображает изменения на странице. Если нужно перезагрузка, то Browsersync сам ее и выполняет. На loftblog еще видео было как его вместе с Gulp

Если сможете настроить свой роутер, то можно обновления сразу цеплять еще на смартфоне и планшете, которые в Вашей локалке.
Ответ написан
FaNiska
@FaNiska
Web Dev
У Adobe есть замечательный бесплатный сервис. https://assets.adobe.com позволяет доставать картинки и копировать стили у элементов макета. Попробуйте, скорость вертки однозначно увеличивается
Ответ написан
Комментировать
@03megapixel
Brackets.
youtube.com
Надеюсь поможет.
Ответ написан
Комментировать
@ferdasfarmazone
Верстальщик!
хм..не знаю, как кто, но зачем перезагружать страницу после каждой дописанных пару строчек кода?
я, например, могу сразу написать html-разметку, потом ~90-95% CSS-кода, а потом через devtools в хроме подгоняю под perfect pixel.
а так, для "быстрой" верстки советую вам скачать SublimeText3, установить следующие плагины:
- Emmet (для быстрого написания html,css);
- Tag (для изъятие классов с выделенного участка кода).
Ответ написан
Комментировать
lightalex
@lightalex
Brackets однозначно! (если мы говорим именно о верстке)
Канал на ютубе на котором автор расскажет как подготовить редактор для удобной работы
Главное преимущество Brackets это live-режим верстки
С двумя экранами это самое то!
+ очень удобно что ты можешь реализовать любой функционал в этом редакторе
Очень удобная система плагинов
Есть конечно и минусы
Присутствуют некоторые баги, но это все решается перезагрузкой программы
За целый рабочий день в среднем перезагружаю редактор 1-2 раза
Для меня не критично
Ответ написан
Комментировать
webrevenue
@webrevenue
Веб-дизайнер и SEO оптимизатор
Я обычно верстаю в Brackets с установленным в него Emmet, сам Brackets из коробки показывает не закрытые теги (это удобно), а плагин Emmet помогает быстро писать код. Notepad++ пользуюсь только в случае когда нужно к примеры в 40 файлах поменять пути (к примеру при переносе сайта на cms с локального веб сервера (к стати пользуюсь опен сервером, так как в нем все самое свежее PHP7 и т.д.) на хостинг (найти и заменить, указываем папку с сайтом, заменяем)
Ответ написан
Комментировать
bemdev
@bemdev
bem.info

верстать статику быстрее некуда без писанины и все по бэму
Ответ написан
Комментировать
noys
@noys
красноглазик
FarManager + Colorer + Win-keys macros
plaginy-dlya-far-manager-890.jpg
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы