Atom as a Dreamweaver 6.0 Replacement

I manage a website that was built with Dreamweaver 6.0. Dreamweaver 6.0 is no longer supported so I am looking for a replacement. I found Atom, and with a few packages it seems to be a good replacment. The feature I am missing most is “templates”. The ability create a template that once “set” cannot be changed in the code it is copied into, without changing the base template file itself. When changing the base template file, you are notified of the other files in the “project” that must be changed as well.

Thoughts? I really like Atom so far and it seems quite easy to use. So my question is, does this type of template capabilty exist? or might someone suggest a work around?


Thank you.


Atom 1.34.0, 64bit on Mac Mojave with the following community packages:

atom-html-preview 0.2.6

open-in-browser 0.5.2

remote-ftp 2.2.2

template-atom 1.1.0 (partially helps with question)

Would love to hear about any other Dreamweaver type functions people have invented/used with Atom (in case this is the wrong forum).

I learn a lot by reading other user posts. I am not experienced in Dreamweaver but I understand the basics.

In recent days I stumbled onto Emmet by reading this thread.

https://discuss.atom.io/t/atom-emmet-broken-right-out-of-box/63655/5

I’m sure that Emmet installed in Atom can be customised to expand short Dreamweaver snippets.
I found one explanatory blog here.

https://theblog.adobe.com/faster-coding-with-emmet-in-dreamweaver-cc/

I am writing Emmet snippets for other frameworks.

[P.S.] Giving some further thought to this requirement …

When changing the base template file, you are notified of the other files in the “project” that must be changed as well.

My suggestion is to try a package such as atom-watcher which might point to snippets.json and other like files and run a command on change.

Thank you for the reply. Emmet looks like a tool for writing “Macros” that expand when you use the Macro name in a line of code. (yes, Macro is an old school programming word). I may incorporate it into what I do, but Templates as defined in DreamWeaver act differently. To clarify:

You create a DW template to establish the look and feel of a webpage, and allow a “template user” to add content only in certain places. So I have a template that establishes page headings, buttons, footers etc, but content changes in the middle. When using the template I cannot alter the “template protected” content at all. If I chang e the template, then DW notifies me of all pages that use that template, and updates them to the new template look and feel. Subsequently, I upload all of the changed pages and get look and feel changes in minutes, not hours of changing every page that used that code.

Does that make more sense?

So Atom-watch will tell me if I changed a program, but not tell me if i change THIS program, all the others that should be changed.

thanks again for your tips!

I am on my own learning path to understand how to integrate emmet into my own development workflow. I understand the points you raise about being able to trace template links to compiled content and to reverse steps. That adds more complexity. And if you are in a multi-user environment you need to have different permissions for using templates.

However, very roughly, I would approach this as a series of expansion stages:

  • emmet snippet (you refer to a macro) will expand into code
    e.g. html:5 followed by tab

  • the expanded snippet can have further include statements nested (I use php include for my own development, but you could use other html includes … https://www.w3schools.com/w3js/w3js_html_include.asp)

  • the process can draw on snippets/includes/templates through a localhost server to keep track so that changes can be tracked (again for my own PHP ends I am using php-server). The template authentication might be added here.

  • one branch of my development workflow will use Laravel blade templates but again this draws on PHP world.

These are very rough ideas. But the tools are there for the job.

Definitely following this for sure. I was also searching similar and end up on this forum. Also, Hi! I am new to this forum. Would like to learn and share a lot things in the future.

Wouldn’t it be more straight forward to use an editor-agnostic templating system, rather than locking yourself into another editor? With static site generators thriving these days, there are plenty to choose from.

In the end it all depends on the programming languages you’re working with, but here are some choices to pick from:

You’ll see that most of these work pretty much the same, are easy to understand and are well supported.

2 Likes

I’m now branching to explore another option … writing templates in markdown drawing on ideas from pandoc. Markdown works nicely with markdown-preview-enhanced.

e.g. https://htmlpreview.github.io/?https://github.com/tajmone/pandoc-goodies/blob/master/templates/html5/github/GitHub-Template-Preview.html#task-lists

I like using one editor, and adopting languages accordingly. I like to build pages, or code from the ground up, but not recoding things I can turn into a template (fixed you can only add code/page material in designated places) or Macros (generate code or pages by changing input variables).

The thing I would like to see in Atom, is mode of operation that would allow declaration of special “start and stop” keywords with normal HTML inbetween them (this would be the template). Then in normal edit mode, ATOM’s editor would be unable to modify anything inside the Start and Stop keywords (protect the template from change when inide code that includes it). This template would then be used in multiple pages. For instance a header or footer shared across pages. the editor would be able to add code between the Start and stop keywords to any extent,

The next function would be a simply query (easiest implementation) that would list any component in a project that uses the template. The next function would search thru the project and replace instances of named template with a new, changed template.

I suppose one could use project wide search and replace to accomplish the replace function that is a bit unwieldly.

I’m positive that what you want doesn’t exist as an Atom package. It’s not impossible for it to exist, but it’s highly unlikely that it will in an environment like Atom where most of the functionality is driven by community members writing fun tools for themselves as opposed to a commercial product by a big company like Adobe. There are quite a few features that would need to be implemented to keep track of templates, and as you correctly suppose, that includes developing a “super-markup” schema to go around the HTML and keep track of what is a template and what isn’t. My guess is that Dreamweaver probably uses XML for that purpose, and then has an export function that merges the template and content parts together when you actually want to put your page on a server.

The problem of how to keep content and layout separate has been solved in multiple ways, and the Dreamweaver solution isn’t the only one. However, you can’t do it with pure HTML unless you have an editor like Dreamweaver. Most sites you see out in the wild use PHP, JavaScript, or Python to achieve that objective. For instance, in React (a JS library built by the engineers at Facebook), you define individual components as JavaScript functions and, when your site is rendered, those components all get built together as seamless HTML. You can have a Layout component that contains your header and footer, and have the content be generated based on the URL the user is trying to access, and then all you have to do is add a bunch of content components for each page you want to use.

If you’re fine with adopting new languages, I’d say that now’s the time to start. Vanilla HTML has limitations, and Dreamweaver has always circumvented some of these limitations through special features, but there are other ways to achieve the same end that don’t rely on DW being DW. Any editor can be used to write React code and any browser can run it provided you install the correct dependencies. I’m not pushing React specifically, but it’s what I’ve worked with most recently and can thus talk about most easily from a conceptual standpoint. This site explores the world of static website generators, which use a variety of programming and templating languages to do the same thing of building a layout and stockpiling content, then outputting a functional site where you can freely add or change content without messing with the layout. Any of those programs would achieve the same end that you did with Dreamweaver, with the benefit of already existing and being used by a bunch of people. If what you want were to be implemented into Atom, it would take a fair bit of expertise and coder hours to make happen.

Some further ideas …

I am refining my own composition workflow using templates as follows …

First install pandoc to make pandoc cli accessible in Atom scripts.

Create a folder for each html page to be created from concatenated templates.

Inside each folder create a number of templates (one template might be a block of scripts, another template might be a div block of content and so on). My templates are written as markdown files. (template01.md, template02.md and so on). However fragments can be written as html blocks.

Inside each folder include a python script compose.py which is as follows … the array of args will expand to as many as required to be concatenated into a single output.html file.

#!/usr/bin/env python

import subprocess

# define fragments

arg1 = ‘pandoc’
arg2 = ‘-s’ 
arg3 = 'template1.md'
arg4 = 'template2.md'
arg5 = '-o'
arg6 = 'output.html'

# Set up the echo command and direct the output to a pipe
p1 = subprocess.Popen([arg1, arg2, arg3, arg4, arg5, arg6], stdout=subprocess.PIPE)

# Run the command
output = p1.communicate()[0]

print output

Note: see amended advice in next post not to use -s option which injects more pandoc html code than might be needed.

Applying script or process-palette to compose.py we can compose the output.html.

Now note also that pandoc allows custom templates to be incorporated into the compose.py script.

https://github.com/jgm/pandoc/wiki/User-contributed-templates

Here for example is a bootstrap template.

https://github.com/tonyblundell/pandoc-bootstrap-template

Note that the compose.py script will need to be changed to add new args to the args array.

I have not developed ideas for the stated requirement to protect templates. But I would look at setting file template read/write permissions so that only admin user can effect changes to templates. As a sole developer I don’t have such authentication issues. But I can see that it is important in a multi-user setup. There is an Atom package chmod which might be useful.

[P.S.] Be aware of the many other options available in pandoc commands. For example reveal.js presentations can be created and different output formats can be generated.

1 Like

Expanding further … for anyone still reading this …

I have now used the proposed pandoc workflow to generate my first widget to render in index.html.

My earlier suggestion to use the -s argument (-standalone) should be amended to not use this -s argument if more basic html requires to be output. The standalone (-s) option injects a lot of additional html from pandoc. I have modified the python script to use these basic args.

arg1 = ‘pandoc’
arg2 = ‘01.md’ # html fragment
arg3 = ‘02.md’ # html fragment … add more as required
arg4 = ‘-o’
arg5 = ‘index.html’

See options 1, 2, 3 here.

https://pandoc.org/demos.html

However this generates basic html with entities as unicode characters. I have read that this is because pandoc needs to handle output formats other than HTML. I stripped these out by using sed function to apply multiple sed patterns to index.html.

Developers might experiment with this api for using html fragments to create widgets in an electron index.html page.

https://jqueryui.com/selectmenu/

I am trying other js frameworks for ui widgets to be embedded in index.html.

A Dreamweaver like UI can now be developed with the usual library of panels (drop down menus and the like) embedded in index.html.

I would have simply updated Dreamweaver and continued with what I knew.

One argument, although the OP is on Mac.
Dreamweaver is only available (at a price) on Windows or Mac and not Linux.
I’m on Ubuntu.

I don’t think paying for an editor like Dreamweaver makes sense unless you’re a professional, but I also wouldn’t hire or trust any professional who only knows how to build a site in Dreamweaver.

Prior to Dreamweaver I just created/modified pages using html and whatever editor I had available. (I moved from windows to mac midstream, so editors changed). It was not difficult, but when I found Dreamweaver, it made life much easier. Mundane tasks become a few keystrokes, and finding/changing anything became very easy. Purchase price was decent because we are a non-profit. I like the way Dreamweaver tracks changes across modules that use templates.
I don;t want to continue with Dreamweaver because I’m not willing to pay Adobe a monthly fee to use something that has no new function I care to use. If was on Windows still, Dreamweaver would probably work to the end of time. However my opinion is that I can’t trust Apple to do the samething…hence time to find a replacement that runs anywhere (hence, Atom for now).

You may not trust a develop who only knows Dreamweaver, but, you can’t build much in Dreamweaver if you don’t already know the in’s and outs of webprogramming to begin with.

My opinion: why pay adobe a montly fee to use software that pretty much works fine as of version 6.0 of Dreamweaver? In my opinion, changes being made to adobe bring little value to me for the cost…and in some cases, may get in my way.

Back in my Macromedia/Adobe days, we used Dreamweaver too. Now I’m working with mostly the same folks, and we use Atom. What I did in place of templates was to create a set of Dash snippets for the various page blocks, so the team can pretty much just insert those and write the contents. It’s worked well for us.

“Back in my Macromedia/Adobe days, we used Dreamweaver too. Now I’m working with mostly the same folks, and we use Atom. What I did in place of templates was to create a set of Dash snippets for the various page blocks, so the team can pretty much just insert those and write the contents. It’s worked well for us.”

So you understand my problem, and have what sounds like a work around. If a snippet was changed, did you then have to manually work thru a project to find and replace the changed snippet? or did you have a method of automating that process?..thanx for the reply!!

Does not importing snippet (as opposed to writing snippet) get around this requirement?