HTML editing issues

Editing
1

I have been experiencing a number of issues when attempting to edit HTML on a page. Now I could be doing something wrong so thought I would see if anyone had answers.

One issue is that as soon as I try and edit the code inside of Pinegrow a large orange box appears pointing out there are syntax errors. This is particularly irritating as it is obvious there are syntax errors as I am in the middle of editing. If I click on the apply to try and get around this I eventually get back but Pinegrow deletes the closing body and html tags, it does this every time.

Solution, edit outside of Pinegrow so I try using Visual Studio linked in to Pinegrow. This works to a point but there are new problems. The changes reflect in Pinegrow as expected but Pinegrow then points out that changes were made outside of Pinegrow, do I wish to reload the page. OK, I reload then whole sections of extra paragraphs appear on screen which are not in the code itself. Delete them in Pinegrow no chance it says “Can’t select element created at runtime” whatever that is supposed to mean. Only solution save and exit Pinegrow.

There are several other problems I have encountered with Visual Studio. Going back to old workflow of quitting Pinegrow doing all my editing in BBedit, then going back to Pinegrow for visual editing.

2

You would have to show examples of your code to get any real help.

Are you using Wordpress? BBedit is a web based text / html editor then the output is stored in a database.

Pinegrow does funky things with incomplete html / css.

My experience is that PG has a hard time with external code, pages not created originally in Pinegrow. Especially with content or portions of html generated dynamically. You can do it, just takes some finessing and the layout has to be put together in Pinegrow understandable way. If you have custom layout in multiple files over multiple folders such as something from a custom CMS then Pinegrow is useless in my experience.

You have to create a static html file, load that into Pinegrow, do your visual layout changes or mockup then split the html back out into it’s parts for the CMS or whatever setup you have.

3

Pinegrow is great for visual layout, creating and mocking up the front end visual look of the page(s).

Behind the scenes stuff with Javascript, Databases, server side code such as PHP… unless it is a one page loading site where the entire site is loaded from one page like wordpress then you are going to have to manually create a static page for Pinegrow to work with.

4

Thank you for reply. I agree Pinegrow is great for visual editing. I would also add that is a brilliant piece of software. The issue I have is its HTML editing, and the problem of it throwing out error messages when you are in the middle of editing something.
Also, what I believe is a bug. Say you manually add a new div somewhere inside the existing HTML page which has some existing divs. When you add the new div Pinegrow will add the closing div. Now remove that closing div, lets assume you want to add it later after you have made other changes, or you may which to combine your edit into an existing div. Pinegrow throws up an orange box saying the page syntax is wrong, which of course it now is. Click apply changes anyway which is what you want and Pinegrow now deletes the pages closing body and HTML tags, why?
Just the editing is my Pinegrow problem.

5

… and why not picking the DIV or any other available element up from the library, dragging it directly into the DOM tree (or into the workspace) on its dedicated place? I mean we’re talking about a visual supported app - this is one of the strengths (beneath others) - and one of the reasons picking up such concepts.

I understand the annoyance of those “error warnings”, but it’s primary there to protect people from handing out non-valid code.

Cheers

Thomas

1 Like
6

The answer that people are avoiding is that Pinegrow is absolutely flat out awful for editing HTML. It’s borderline unusable for anyone who wants to use it as a code first interface.

I understand the design decisions that keep it from being a workable HTML editor. I think it could be addressed by allowing two different modes of operation. An alternate mode of operation would disable a lot of the WYSIWYG visual editing features and use Pinegrow primarily as a preview engine so the text editor can be allowed to work the way most text editors work instead of it undoing and re-doing text snippets in erratic fashion and in such a lossy way.

This isn’t user error. It’s Pinegrow sucking at being a text editor.

7

So install Atom or Visual Studio, both of which integrate perfectly with Pinegrow, and are fine code editors. Pinegrow is MARKETED as a visual way to build/edit sites. If you want an HTML editor, why would you even buy Pinegrow in the first place???

8

When I want to just do plain HTML editing I switch over to BBedit, it does have a built in preview if required. I think it has been around for 25+ years and still going strong. Only on Mac though I think. I have also tried Visual Studio Code which does integrate into Pinegrow and is free, but did encounter some issues with edits not being saved. I would agree that Pinegrow is not great as an HTML editor, but in fairness this is not what it was primarily created to do.

9

Ah well, I don’t think it is a Code First kind of product.
But it does both, PARALLEL, pretty good!
But alas yes, The Editor side is missing some functionality found in proper, full Code Editors,
Like Search , and a system wide version, and it some is a bit buggy, for which I find the
Undo redo action to be the worst culprit.

if. you have several pages open and hit the undo button after working on a few of them, well, you seem to enter a world of non undoable…undos. Your goosed, its gone.

But , as was said, I guess this is PRIMARILY a visual layout tool and inspector … written by a coder who had… Code first… Code Editors and created this tool to ENHANCE what he already - a code editor.

The Code Editors still exist, and as Pinegrow isn’t meant to replace your workflow toolset, rather to compliment it, May I suggest you use both together?

It also doesn’t have an FTP client… again, use another tool with it for that.

Pinegrow is PART of your tool belt.
It Compliments the Code environment with a Visual Approach, adding the possibility to Get At the code, unlike some proprietary branded versions , or where you have to pay for addons (which just inject some code into a proprietary format you cant access , in order to have some easily added functionality when it FINALLY exports your code …to HTML and CSS and random advanced flavoured thing here

and as for BBEdit , I too was going to suggest that *or TextWrangler if your still running that) as

in your words, …

Pinegrow sucking at being a text editor.

well funnily enough…BBEdit says…

2019-02-19_13-37-11

Hee Hee

SO yeah, after 25 years it would be nice to see a plugin for that (I use it mostly) Along with SublimeText.

So they are MUCH lighter footprints Than Atom or VSC
I’d love to use them with Pinegrow, especially Sublime, more so than BBEdit.
due to its advanced configurations, awesome plugin community ,support and it being Multi Platform.

Been asking for this for a few years now.

So, yeah, If you want Code first approach…
DO a code first approach, with a decent code editor.
They provide plugins for 2.
it would be GREAT if there was more! I’ve looked at the plugins and the dev is beyond my current skillset.

Use Pinegrow for the fannying around with the Visuals, but it also does other stuff to speed up your workflow,
Like the whole Wordpress thing
And now the Customise Bootstrap Themes
as well as Components
and all the other Hyper bolea stuff.

And Visuals… awesome for thet, with clicking classes on and off etc etc. you get the idea if you have used it much.

Although I’m not sure if partials still exist… they were implemented in 2.X, dissapered in 3
not sure if they ever returned, if you code/create along those lines, b
but people here have mentioned that they still work with absolute paths.

Either way,
Its not.a super duper Text editor, but it’s great for most stuff and a cursory glance, but no, its not a power editor and it would appear that the Devs realise that, but created plugins for some funky ones (maintained by teams for Hundreds!) so that their team of …4… could carry on with the Visual approach.

Frankly< I think they have found a good balance.
…notwithstanding the lack of the SublimeText Plugin and the Erratic Undo/Click-n-Pray function.

10

@hyperlinked There are Pinegrow extensions/plugins available for these 2 code editors (Atom and VS Code), to let them work together with Pinegrow. See this documentation for more info:

1 Like
11

If you want an HTML editor, why would you even buy Pinegrow in the first place???

I was looking for ways to accelerate my workflow on simple projects that don’t have heavy duty requirements. I don’t do a lot of easy projects so ironically they often take me significantly longer than they should because my tools and process don’t favor that type of work.

I wanted something that was better suited for a mostly plain ol’ HTML type of project that retained some familiarity with my normal way of working so I wouldn’t have to spend a couple of hours relearning how to use it every time I need to set up something quick and dirty.

I tried a bunch of different hybrid editors and Pinegrow appeared to be exactly what I was looking for until I realized how badly the undo/redo behaved. As atilla suggested, pairing something like BBEdit would resolve some of the pain and I’ve actually resorted to doing that… except I’m a TextMate guy.

Still, it’s not a great experience to use two separate programs like this. I didn’t know that I could get integration with Atom. Thanks for recommending that Marf. I’ll give that a try right away.

12

Thanks for pointing out the Atom integration, Marf. That addresses my key issues.

13

your welcome…oh plugins…did I not mention plugins>?
like about 7 times :slight_smile:

14

No problem!

Maybe sometimes a short and direct answer is enough,
and is easier to read and follow than a longer post with too much side information…
:innocent: :wink: :stuck_out_tongue_winking_eye: :heart:

15

Ugh, Atom + Pinegrow isn’t such a great combo after all. Pinegrow still gets in the way. It works better than Pinegrow’s text editor, but Pinegrow is clearly messing with the normal behavior of Atom. After saving in Atom, the cursor jumps to the bottom at random and the undo and redo when Atom is talking to Pinegrow also loses steps in some situations.

16

I think u have to make sure auto save is disabled in Atom.

And you had a longer post. as your initial Post. wasn’t really terribly specific

  • it just sucks maaaaan*

So I was covering several avenues.
I wont bother for you next time :slight_smile:

17

This depends if you are a code first or visual layout first designer.

For code first you really need to use a separate editor such as Atom, Visual Studio Code, Brackets, Notepad++, phpStorm, webStorm or something else.

In Pinegrow click on the support --> settings menu item at the top of the application.

Uncheck Save backup files… I do this because PG causes a mess in my projects if I let it save backups.

Uncheck Auto-Format HTML code

Scroll down to the “sync” section and either disable or enable “Auto-reload files when changed outside of Pinegrow.” - This and the Auto-format html is the majority of the issues when editing html outside of pinegrow WHILE pinegrow is running with the same file also open.

Make sure any other settings are enabled or disabled to your preferance including anything like Emmet or CSS features that change the code inside of Pinegrow automatically.

2 Likes
18

At this stage you are primarily editing in your preferred editor or IDE and using Pinegrow to check the visual placement. I find that using Chrome’s Inspect feature along side Atom or Notepad++ works very well for this use case and during the coding stage I don’t really have Pinegrow open. The only thing I don’t have is the auto reloading of the page which is such a horrid time consuming thing to have to actually manaully press the refresh button. Joke.

What I like about Pinerow though is having multiple screen sizes open at the sametime and then when I save in Atom, or whatever, the screens reload. Though I have the integration plugin disabled at this stage and just go for the auto refresh thing to do it’s thing.

19

This discussion has been informative as well as confusing. I am evaluating PineGrow coming from Webflow and Oxygen. PineGrow looks interesting because I want a hybrid of visual and coding. I was actually going to try to incorporate Visual Studio Code today. I found this thread by searching PineGrow, Emmet.

I am really a newbie playing catch-up to code and binge-watching videos on YT. I haven’t come across anything that does what PineGrow appears to do (from what I have found).

It looks like Terry44 haa some advice on settings that I somewhat understand. Any other advice to someone new looking at PG for a true hybrid? I was not expecting to read that PG was horrible at HTML. Thanks!

21

I have been designing websites for 24 years now first with a simple editor, then with Homesite (sad of its demise) and since then various html editors. Pinegrow has definitely helped me transition to responsive websites. However, because I’ve always coded I slip back into these old ways because my knowledge base is html. Would be nice if Pinegrow editor was up to the standards of other editors just to please us “Old Guys”

1 Like