What is advantage of using Atom vs Pinegrow solo?

For someone just starting into Pinegrow (bought Pro version this week), what advantages does Atom bring over just using the code editor built into Pinegrow?

While not code-phobic, I am code-nooby. (Just now doing W3 html and css tutorials - head is spinning). So would adding Atom to the mix introduce more confusion than it is worth at this time? Or is there something that Atom offers to make it worth the extra effort?

welcome to pinegrow, come on in.

Atom is one alternative… VSCode is another.

Both use a plugin to keep the editor connected and in sync with PG.

Both work virually the same.

I found VSC to have a bit more flexibilty and responsiveness to the way i want to work, but ymmv… defintiley try both before settling on one or the other.

The advantages are many. The code editor in PG is very basic with only the minium of features to help you see what your code looks like to the browser.

You will find more and more that somethings are just easier to do in a text editor than in PG, and having both at your finger tips gives you the best of both worlds .

a 2nd monitor comes in pretty damn handy too… i got a portriat oriented dell for $170 that made a huge difference in how i work in PG.

Also to your last point, i found VSC to be easier to tweek (and find what to tweek) than Atom

Thanks droidgoo. Appreciate the full and very helpful report.

I’m starting to think that adding a separate text editor will have to come later for me, seeing as I’m quite overwhelmed already with all the new stuff I am learning. I stand before a vast jungle, thinking, “Holy smokes where do I even start?” I think I’ll have my hands full for a while just trying to use Pinegrow, the one machete I’ve got. To try two-handed chopping is beyond my current talent level. But I’ll keep chopping. Hope to eventually work through to a clearing where I can see the sky again. Maybe then I’ll take a breather before I try adding a new tool. Thanks again. Appreciate ya.

If you have the real estate (a second monitor [or computer]) you might want to just watch as Pinegrow makes changes.

While chopping away, it’s usually good to have an extra set of eyes just in case Sasquatch happens to try 'n 'neak up ‘n ya’.

1 Like

PG is a bit like being dropped into the cockpit of a 787, but the best way to learn how it interfaces with the code is to have a code editor on and running in real time while you build.

for me taking one of the many online tutorials where you can literally cut and paste the code you are learning directly into PG and see how it translates it into a nice visual presentation for you.

it might seem assbackwards, but it really gave me a deep appreciation for what PG is actually doing for me behind the scenes and how best to take advantage of it’s power.

leaning how to code from INSIDE PG will give you a distorted picture of what’s happening with the code.

try duplicating in PG any of these free coding lessons you can find on scrimba.com

like this one

This is a great idea, about watching what happens while Pinegrow changes code. I will do some of that. Doesn’t seem backasswords at all.

Because right now EVERYTHING looks like a Sasquatch sneaking up on me. Or a 787 cockpit.

Thanks to both of you for your helpful replies


While the attitude is excellent, I miss in all those “advantage/disadvantage” discussions about apps a way more fundamental discussion which is:

“Am I enough prepared and organised for starting into the code world?”

The answer to this is mostly: “No - not at all”

The key into a successful and not so overwhelming start is literally content. Text written, such as a tiny business-plan for an existing (or even a imaginary one - such as the butcher next door) is inevitable.

You’re asking me why?

Excellent question! Because it helps you understanding the very basics of front-end dev, called HTML (five at the date of writing). How do I like to structure my text. What is a heading e.g. This avoids some nonsense statement such as “the limitation of headings” I picked up recently in another thread of this board.

Believe it or not: The inevitable thing in web is HTML - all the rest is theoretically mandatory.

All (nearby) elements are reachable within the library of PG (one of those strengths of PG). Start slow - make yourself clear what the essential elements are (header, main, footer, aside, paragraph, h1-h6, div) and what semantic/or non-semantic role they’re playing.

Certainly this structure doesn’t look quite well - however it is allowing you to see a logic within your lil storyboard. Ask something like: Who is doing what for whom and how and where and you have a logic structure to follow. It is semantically structured - not really visually. That’s then the next step: positioning and displaying the things as you want it. I invested a good year into it (back in the days of relative/absolute/float/clear) - which has been substituted by flex (grid).

I could add much more, but I hope you got the gist: Divide the monster into smaller chunks. As the Chinese saying: “If you are in a hurry, walk slow!”

Personally I think, that an app is not a question of advantage, it’s a question of convenience and experience. We’re building one web and all apps are doing a least one and the same thing. Nothing more, nothing less.



Your point is well taken, Thomas. HTML is king. I’m trying hard to catch up. Taking every tutorial I find, mostly found on this board. And there’s some great ones being recommended. It’s just overwhelming right now, and my questions are all so basic. But it’s coming along. I’ll get there. Meanwhile, to quote an old joke, it keeps me “busier than a one-legged man in an ass-kicking contest”.

This board is super helpful. (Both for keeping me busy, and for teaching me stuff. Each question answered generates another question.)

Dumy question about using this board: Can someone please point me to a tutorial (I couldn’t find it in the faqs) on how to do basic things like:

  • flag someones name with that little grey box
  • when specifying a website, it comes up in a box
    Stuff like that. Yeah, I know, basic.
    Learnin’! (never done a board before)

simply hightlight the text you want to quote before you hit the “reply” button.

url’s automatically get put into a box, as far as i can tell.

So EASY!! (Had to try it)
Thanks a ton!

1 Like

also, if you use the @ symbol, then write their name… it should auto select their name as you type part of it.

and , if you get to the stage where you want to post bits of code, this is handy:-

and as for the actual topic, advantage of …etc,
there are a pile of text editors!
free and paid.
the topic of many flame wars :slight_smile:

Find one you like (obviously, there are the chosen new kids on the block) and play with it.
Literally, that!

The pinegrow Text editor is pretty good, but its just a basic editor. and lacks some features (like a lot that the big editors can do)
But, instead of spending AN AGE…developing the dogs danglies of text editors…which is a monumental task itself, they have opted to plugin to already existing, incredibly powerful FREE editors.

These can do a pile of other stuff like, project wide find and replace, refactoring (changing the name of something , EVERYWHERE, in the file or project if you so wish) multi cursor edits (edit in several place at the same time… spooky (first appeared with SublimeText btw… :slight_smile: hint)
and shedloads of other stuff.
and they have OTHER plugins, for life reloading of browsers as you type (which PineGrow does anyway) and all sorts of magic.

So play with a text editor and find some tutorials on it, setting it up, adding the necessary plugs for say, web development etc etc and just tinker.

While doing the PG thing :slight_smile: and learning all that jazz.
then connect them and just carry on doing the content and code side in that, see how it goes and if its for you and if you really need it.
You can get A LOT done with the PG text editor, but it all comes down to workflow.
If you end up using a text editor for other things too, (prose, other languages etc) then you will end up using all its shortcuts for speed and adding plugins to add functionality and your speed picks up.
You will then miss these, when you go back to the basic PG editor.

So you use it WITH PG , via the plugin and Tada! you dont miss a beat, you just carry on as normal, without missing stuff that your used to doing.

And loathe as I am to endorse Microsoft for anything, their editor is ok (read, **Pretty fantastic for a free product - if it was a paid product it would be mint too!) and it seems less laggy than Atom… which had some performance issues… and since MS now OWNS Github (spits!) - which produced the Atom Editor, AND… MS has already released VSCode… there is one obvious outcome.

Of course, MS says they will continue the BOTH Editors …and NOT drop Atom…ever…in favour of their own VSCode editor, to keep both camps happy …however that seems highly unlikely considering

So… You might wish to check out a different editor for PG Plugin support (hint, VSCode - while we wait for a SublimeText plugin :slight_smile: …ooh! yet another hint maybe? :). )

Thanks a ton @schpengle for a very complete response to the orig topic. This is super helpful.

and while I’m testing:
Following link is found in the post you mentioned above. (Mostly only added this to test the link insertion mentioned by @droidgoo and it seems to work)

This guide seems helpful. (At least for code noob like me. This stuff is ALL new to me.)

[removed link as it came out GIANT-ified and I don’t know why. But @schpengle repeated it below]

Gee, look at me learning.
Thanks everyone for their help.

1 Like

Uh, oops. How’d that turn so GIANT? (Sorry to disturb the Force.) What did I do wrong?

Well hows that for timing?
I just got in the house through the monsoon now :slight_smile:Welcome aboard :slight_smile:

Did you type the address with your Thumbs?
…NEVER use. your thumbs
Coding errors 101 :slight_smile:

And, humour aside, there is a lot of great stuff on Treehouse.
they also have some good stuff on Sublime text

,note the tiny image :wink:

copy-paste (from the header (or whatever its called) at the top of the webpage. Mac/Safari

glad SOMEBODY’s getting some rain. none here in 3 weeks. everything getting crispy. supposed to rain Monday

so what did I do to GIANTify it?

were you employing some form of accessibility tools for the partial sighted…totally blind?

just to annoy you…>

hee hee
When your scribbling in the window on the left… your output in the forum, should appear in the window on the right. Just check to see if you mangled something in your original post.
…ie, after your post, click the little pencil icon underneath it and then you can edit your original post… fiddle with your link, copy and paste it again and see if you have missed a little something.

also, do you know that there. is a Slack channel for PG too?

ideally this is more for real time conversational support, but tbh, it doesnt really work that way, unless you pair up with someone to chat with them on there as it can be rather quiet/delayed.
but…ive not been on it for aaaages, but it can be quite exciting to be connected when doing this sort of learning stuff,

Also, again, … I have just started to experiment with the VSCode… Live plugin ecosystem.
that is, it has in app commmunication for code sharing!
instant messaging and

holy cow.
so you can share your code/repository,
text chat to someone
speak to them at the same time.

that is pretty spectacular>

of course that’s because they want everyone to share their code… store it on GitHub
Steal it :slight_smile:

Just going to swim to my truck to get my external hard drives…in case it dissolves.
…I hope the roof is made of sterner stuff

Only annoying part is me screwing up. Still not sure what I did to cause the BIG.

Mac/Safari - copied link from the top nav bar for that web page - pasted it into the post

How else should I be doing it instead?

(and sorry to be taking time for something so unimportant - but I just don’t want to do it again)

and thanks for the note about editing - I had wondered how that worked - and I hadn’t noticed the pencil thingy. Thanks!

and yeah, this isn’t really live chat, just happened to catch you at the right time. Thanks for all your efforts. Stay dry

All good and WOW. that took me 15 mins to get there and back and plug in
an external HDD.

I really must try harder :slight_smile:
But anyway, with pinegrow,
learn that, tinkering about, play with the draggy droopy stuff, learn the interface, its quirks
there are two, one for Frameworks (aka Bootstrap… use this FIRST to adjust BS things)
then, if it just cant get your BS things to where you want them,
use the CSS Editor panel to style stuff more radically - and store them in an external CSS sheet.
NEVER modify the original BS style sheets… worlds of pain await, when you update stuff if this is done.

and , play with PG’s native text editor.
If it does everything you want at this level , GREAT! just carry on with it.

Also play with some text editors.
write code in PG, write the same code in the Text editors, play with their color themes, change fonts, line spacing, all sorts of environment stuff,
then as you learn more you will try and do more.

things that then speed up your coding like emmet - its a plugin that adds rocketesque speed ninja coding skills. -but PG text editor has PUG …which Ive never used.
So just been looking it up and OH! its not a short hand …thing.

Its a templating engine…er ok… and it was formally known as Jade
…umm ok again

have a foreigner to explain.
there are lots of them/us about :slight_smile:

so, pug and Emmet (the former is an awesome html short hand that you can add plugins in your editors of choice ot accomplish) I always wished for this in PG, but, the external text editors can use it via plugins.
SublimeText has a nice one :smiley:

ps…>Ive been struggling to find any decent docs on PUG
but here’s something