Photoshop, notepad++ and a barrel of coffee to boot, what else will help you build websites faster and with less nerves?

Question

Programming

Having updated my technique already on the first day, I was able to make a page 1 in 1 according to the layout (previously, the equipment did not allow not only Photoshop to open with the editor, even Chrome did not take out more than 5 tabs), but the speed left much to be desired, namely:
1) After every code update I reloaded the page, no real time web development (except Dreamweaver) ?
2) Photoshop, while using only an eyedropper, a rectangle and a magnifying glass, how else to use this program?
3) What else do you use?

Answer 1

Use WebStorm, Notepad++ is clearly not for quick layout, coffee will not help, it is when one day you need to do urgent work, turn it in, and go to drink a completely different drink, with the opposite effect, and for a long time coffee will not increase productivity, but it will cause addiction.

Answer 2

1) After every code update I reloaded the page, no live web development?

nobody does that. Before writing the code, you should already see how it will be in the browser. No one forbids using normalize immediately in the layout

2) Photoshop, while using only an eyedropper, a rectangle and a magnifying glass, how else to use this program?

csshat.com
rafaltomal.com/a-web-developers-guide-to-photoshop
www.slideshare.net/akella/ss-33709531
emmet / dzen-coding -- 80% of all acceleration will be given to you
by assemblers -- gulp, grunt, webpack, allow you to get production ready product
snippets (live templates) in IDEA-like products
sass/less/slylus
at any time How- this is how the pros do it cssing.org.ua/2014/03/11/coding-live

Answer 3

1. I use includeHTML for templates and SPA.
2. To update realtime in a browser on a PC (and on Android / iPhone, you can also synchronously!) I use: Phongap Desktop (it raises a web socket to the project folder)
3. I edit in FAR Manager 3 with the input auto-suggest plugin: AutoCompletion and FarColorer code markup and ConEmu console emulation plugin with all the features ( screenshots )!
When you save the code using F2, you can immediately see the changes in all browsers, including mobile.
PS: even right in the Chrome browser and FF, you can fully edit the code and see
the result immediately.
UPD: Brackets
(installed, but not used, because there are still bugs in it)
1. it is convenient to edit styles in CSS contained in another file in inline mode
2. "trees" of project folders and files are always at hand.
3. real-time debugging
(on a gif-ke: live-editing a page opened in the FireFox browser via Brackets: Ctrl+Alt+P)

Answer 4

WebDesign Master has so many tutorials on YouTube channel!!! I get info there. Well, I mean that he told how to set up Sublime Text. In Jedi layout 5, he generally uses Gulp and tells how to set it up ... Despite the fact that you can connect livereload in the Gulp itself, that is, after saving the index.html or CSS file, the page is automatically displayed with changes.

Answer 5

sublime text and set what thread livereload. well, plugins for sublime text to taste.

Answer 6

And why did no one remember Browsersync ? The thing clings to Gulp and on every CSS/HTML update automatically displays the changes on the page without reloading. If a reboot is needed, then Browsersync does it itself. On loftblog , there was another video like it with Gulp
. If you can set up your router, then you can immediately catch updates on your smartphone and tablet, which are in your local area.

Answer 7

avocode

Answer 8

Adobe has a wonderful free service. https://assets.adobe.com allows you to get images and copy styles from layout elements. Try it, the speed of the turn is definitely increasing

Answer 9

brackets.
youtube.com
Hope it helps.

Answer 10

hmm .. I don’t know how anyone, but why reload the page after each added a couple of lines of code?
for example, I can immediately write html markup, then ~ 90-95% of the CSS code, and then adjust it to perfect pixel through devtools in chrome.
and so, for a "fast" layout, I advise you to download SublimeText3, install the following plugins:
- Emmet (for quick writing html, css);
- Tag (for removing classes from a selected section of code).

Answer 11

Brackets for sure! (if we are talking specifically about layout)
A YouTube channel where the author will tell you how to prepare the editor for convenient work
The main advantage of Brackets is the live layout mode
With two screens, this is it!
+ it’s very convenient that you can implement any functionality in this editor
Very convenient plugin system
There are, of course, some disadvantages
There are some bugs, but this is all solved by restarting the program
For a whole working day, on average, I restart the editor 1-2 times
It’s not critical for me

Answer 12

I usually type in Brackets with Emmet installed in it, Brackets itself shows non-closed tags out of the box (this is convenient), and the Emmet plugin helps to write code quickly. I use Notepad++ only when I need to change the paths for examples in 40 files (for example, when transferring a site to cms from a local web server (by the way, I use an open server, since it has all the latest PHP7, etc.) to hosting ( find and replace, specify the folder with the site, replace)

Answer 13

bem.info
_

Answer 14

FarManager + Colorer + Win-keys macros