Alternative to Dreamweaver

[whitedragon101]

Does anyone have any suggestions of a dreamweaver replacement.

I have seen Coda 2 but I can't quite get the layout I can in dreamweaver. I don't use anything particularly fancy other than getting a nice layout to work with.


Because of the tabbed moveable panels I have :

Left:
A full height display of the files so I can quickly open and upload/download them.

Middle:
A top bottom split with a graphical preview of the page top and the webpage code at the bottom.

Right:
A full height panel with the CSS text file for editing.

 

[olup]

Does anyone have any suggestions of a dreamweaver replacement.

I have seen Coda 2 but I can't quite get the layout I can in dreamweaver. I don't use anything particularly fancy other than getting a nice layout to work with.


Because of the tabbed moveable panels I have :

Left:
A full height display of the files so I can quickly open and upload/download them.

Middle:
A top bottom split with a graphical preview of the page top and the webpage code at the bottom.

Right:
A full height panel with the CSS text file for editing.

you should check out visual studio code my Microsoft, good editor with lots of plugins and built in terminal, if you need it.

 

[whitedragon101]

you should check out visual studio code my Microsoft, good editor with lots of plugins and built in terminal, if you need it.

Thanks will have a look. Struggling to find a plugin for straight forward ftp plugin with a proper graphical interface I.e. Not just a command line

 

[olup]

Thanks will have a look. Struggling to find a plugin for straight forward ftp plugin with a proper graphical interface I.e. Not just a command line

there are ftp options available, but I haven't tried them out yet. Personally I use cyberduck and haven't had any complaints

 

[960design]

Does anyone have any suggestions of a dreamweaver replacement.

I have seen Coda 2 but I can't quite get the layout I can in dreamweaver. I don't use anything particularly fancy other than getting a nice layout to work with.


Because of the tabbed moveable panels I have :

Left:
A full height display of the files so I can quickly open and upload/download them.

Middle:
A top bottom split with a graphical preview of the page top and the webpage code at the bottom.

Right:
A full height panel with the CSS text file for editing.

Atom?
https://atom.io/

I use a 27" monitor and browser-sync to automatically keep the browser up-to-date with code changes on the right.
Atom on the left and 'full screen' browser on the right.

 

[HUGE AL]

Atom?
https://atom.io/

Been doing some research on Atom as I only used to use Dreamweaver to edit simple HTML/Java. Was wondering if there is a WYSIWYG preview included in the product. Came across:

https://atom.io/packages/atom-html-preview

So I would just download Atom, then go to this repo and download the "plugin," then enter the command line within Atom?

 

[960design]

Been doing some research on Atom as I only used to use Dreamweaver to edit simple HTML/Java. Was wondering if there is a WYSIWYG preview included in the product. Came across:

https://atom.io/packages/atom-html-preview

So I would just download Atom, then go to this repo and download the "plugin," then enter the command line within Atom?

I have not tried that one. I normally need all the screen real estate I can get for coding. I prefer to use my iPad for live preview or a second browser window for live preview using MacOSX Spaces, if needed. You can quickly swipe left, see the live preview, swipe right, back to coding.

I would recommend the following plugins ( right from inside Atom ):

1. emmet
2. atom-beautify
3. autocomplete-paths
4. linter
5. linter-csslint
6. linter-htmlhint
7. linter-eslint

I use node.js and browser-sync for preview on an iPad 10.5 as I develop.
Basically node.js will become a miniserver and you will tell browser-sync which files to watch.
Open your iPad to the external url. Now you can watch your iPad with a live preview as you code.

Works great in coffee shops or for instruction: code on the MBP and preview on the iPad ( airplay to a projector, for all to see ).

 

[olup]

Been doing some research on Atom as I only used to use Dreamweaver to edit simple HTML/Java. Was wondering if there is a WYSIWYG preview included in the product. Came across:

https://atom.io/packages/atom-html-preview

So I would just download Atom, then go to this repo and download the "plugin," then enter the command line within Atom?

basically yes, although you'll do yourself a bigger favor, if you either use some configuration with browser-sync via Gulp/Grunt as 960design suggested or if you prefer things to be simpler: https://github.com/tapio/live-server

I mentioned vs code by microsoft a few posts above, definitely worth checking out

 

[HUGE AL]

I have not tried that one. I normally need all the screen real estate I can get for coding. I prefer to use my iPad for live preview or a second browser window for live preview using MacOSX Spaces, if needed. You can quickly swipe left, see the live preview, swipe right, back to coding.

I would recommend the following plugins ( right from inside Atom ):

1. emmet
2. atom-beautify
3. autocomplete-paths
4. linter
5. linter-csslint
6. linter-htmlhint
7. linter-eslint

I use node.js and browser-sync for preview on an iPad 10.5 as I develop.
Basically node.js will become a miniserver and you will tell browser-sync which files to watch.
Open your iPad to the external url. Now you can watch your iPad with a live preview as you code.

Works great in coffee shops or for instruction: code on the MBP and preview on the iPad ( airplay to a projector, for all to see ).

basically yes, although you'll do yourself a bigger favor, if you either use some configuration with browser-sync via Gulp/Grunt as 960design suggested or if you prefer things to be simpler: https://github.com/tapio/live-server

I mentioned vs code by microsoft a few posts above, definitely worth checking out

So having absolutely zero knowledge of Atom or how the product works, what are your ideal steps I take after downloading the initial program? The browser-sync topic got me confused.

 

[olup]

So having absolutely zero knowledge of Atom or how the product works, what are your ideal steps I take after downloading the initial program? The browser-sync topic got me confused.

After the initial download you start customizing your code editor by installing packages that make development easier for you.
Here's how to install the emmet plugin for atom: https://atom.io/packages/emmet

browser-sync is a small tool that allows you to sync your code with what's output in the browser without having to refresh the page, it'll do that automatically. It does require some knowledge about node.js and the command line though.

 

[whitedragon101]

I have not tried that one. I normally need all the screen real estate I can get for coding. I prefer to use my iPad for live preview or a second browser window for live preview using MacOSX Spaces, if needed. You can quickly swipe left, see the live preview, swipe right, back to coding.

I would recommend the following plugins ( right from inside Atom ):

1. emmet
2. atom-beautify
3. autocomplete-paths
4. linter
5. linter-csslint
6. linter-htmlhint
7. linter-eslint

I use node.js and browser-sync for preview on an iPad 10.5 as I develop.
Basically node.js will become a miniserver and you will tell browser-sync which files to watch.
Open your iPad to the external url. Now you can watch your iPad with a live preview as you code.

Works great in coffee shops or for instruction: code on the MBP and preview on the iPad ( airplay to a projector, for all to see ).

Thanks

Do you know if there is a code completion package for JavaScript. E.g I love the way in Dreamweaver I can type

document.

In JavaScript and then it shows a list of all the next methods I could type. Then it narrows down as I keep typing so if I type

document.get

It now is only showing a list of the get methods. I can just use the up down keys to go through and return to add.

Is there a package that can do this kind of code complete for JavaScript and css in atom?

 

[HUGE AL]

After the initial download you start customizing your code editor by installing packages that make development easier for you.
Here's how to install the emmet plugin for atom: https://atom.io/packages/emmet

browser-sync is a small tool that allows you to sync your code with what's output in the browser without having to refresh the page, it'll do that automatically. It does require some knowledge about node.js and the command line though.

Very helpful. Appreciate it!

 

[960design]

Do you know if there is a code completion package for JavaScript...

Atom comes with a autocomplete-plus already built in, I think. You could try ternjs. I haven't used it, but it seems pretty popular.

I dislike autocompletion libraries as they often get in the way.
Good luck and post back here if you find something awesome. It may help another.

 

[HUGE AL]

browser-sync is a small tool that allows you to sync your code with what's output in the browser without having to refresh the page, it'll do that automatically. It does require some knowledge about node.js and the command line though.

Is the browser-sync the same as "atom-browsersync 0.2.0"? When I searched for "browser-sync" inside Atom, it came back with, "browser-plus"

 

[960design]

Is the browser-sync the same as "atom-browsersync 0.2.0"? When I searched for "browser-sync" inside Atom, it came back with, "browser-plus"

https://www.browsersync.io/

browser-sync is a separate package. You run it via command line, pointing to the files you want it to watch and it will take care of refreshing the page. You can use browser-sync with any and all web application development environments, or even notepad. Every time you save the file, the web page will refresh automatically to show the changes.

I use an iPP10.5 sitting off to the side for viewing the changes as I make them.

 

[sripriya2691]

• Quanta Plus
• Aptana
• CoffeeCup HTML Editor
• OpenBEXI
• Bluefish
• Microsoft Expression Web
• Amaya
• Microsoft Visual Web Developer.

 

[HUGE AL]

https://www.browsersync.io/

browser-sync is a separate package. You run it via command line, pointing to the files you want it to watch and it will take care of refreshing the page. You can use browser-sync with any and all web application development environments, or even notepad. Every time you save the file, the web page will refresh automatically to show the changes.

I use an iPP10.5 sitting off to the side for viewing the changes as I make them.

So how do I configure this in Atom?

Can I just use https://atom.io/packages/atom-browsersync?

I just want to edit some simple html code look at the changes I'm making as I'm making them -- just like I was able to do in Dreamweaver.

Appreciate the help.

 

[960design]

So how do I configure this in Atom?

To answer, I would need to know exactly what 'this' you are referring to. If I may guess, this = browser-sync. You do not configure browser-sync within Atom. It is a combination of applications: node-js, functioning as the local server and the browser-sync package injecting something like a meta http-equiv="refresh" into the code you are currently working one. The parameters for browser-sync are setup upon initialization via the terminal application

Can I just use https://atom.io/packages/atom-browsersync?

I have not used this package. But it looks like a wrapper to start up and stop the browser-sync server. Once you have everything installed, this could possibly save a couple of terminal keystrokes.

I just want to edit some simple html code look at the changes I'm making as I'm making them -- just like I was able to do in Dreamweaver.

browser-sync + node.js will do just that. Fortunately this is not baked into a proprietary product, so you can tweak it just the way you want. Unfortunately, this freedom ups the learning curve, just a bit.

Why not just use Dreamweaver for the simple changes, just as you've always done?

 

[whitedragon101]

To answer, I would need to know exactly what 'this' you are referring to. If I may guess, this = browser-sync. You do not configure browser-sync within Atom. It is a combination of applications: node-js, functioning as the local server and the browser-sync package injecting something like a meta http-equiv="refresh" into the code you are currently working one. The parameters for browser-sync are setup upon initialization via the terminal application

I have not used this package. But it looks like a wrapper to start up and stop the browser-sync server. Once you have everything installed, this could possibly save a couple of terminal keystrokes.

browser-sync + node.js will do just that. Fortunately this is not baked into a proprietary product, so you can tweak it just the way you want. Unfortunately, this freedom ups the learning curve, just a bit.

Why not just use Dreamweaver for the simple changes, just as you've always done?

For me Dreamweaver is still the best solution but its the price and subscription model I don't like.

I'd like to give my money to a competitor to get a similar or better product at a reasonable one time price. Affinity are doing exactly that with Affinity Photo and Affinity Designer taking on Adobe Photoshop and Illustrator
I wish there would be company like Affinity taking on Adobe for Dreamweaver.

 

[960design]

For me Dreamweaver is still the best solution but its the price and subscription model I don't like.

I'd like to give my money to a competitor to get a similar or better product at a reasonable one time price. Affinity are doing exactly that with Affinity Photo and Affinity Designer taking on Adobe Photoshop and Illustrator
I wish there would be company like Affinity taking on Adobe for Dreamweaver.

Developers ( okay, maybe just me ) like options. We all have different workflows. I like being able to tailor my workflow and single page application development needs. I work in XCode everyday. While it is much easier to assist someone else having issues ( everything is setup the same ), the workflow is what it is. I do not have the ability to streamline it for my development needs.

 

[HUGE AL]

Why not just use Dreamweaver for the simple changes, just as you've always done?

The copy I have is CS4. Am totally against Adobe's subscription service.

 

[960design]

The copy I have is CS4. Am totally against Adobe's subscription service.

Hear, hear! Immediately moved to alternatives and haven't looked back.