Looking to learn HTML formatting

ShakyJake_sl said:

Here's the thing, I'm not interested in drawing boxes and buttons on the screen like Photoshop. What I would like is an output window that will render the HTML as I type the code. It's annoying to constantly flip back and fourth between the editor and browser hitting refresh.

Microsoft's Expression Web does a decent job of this as you can do a split view. But since development has ceased it doesn't recognize some of the newer CSS3 styles.

Click to expand...

the problem with the preview panes is that they rely on the OS' built-in browser. it's most often times not representative of what it will look like out in the wild. i use sublime text with the view in browser plug-in. shift control v and it opens the browser you have set as your default.

just be thankful you don't have to wait for code to compile hehe.

I found this site Googling around:

Scratchpad - Realtime HTML and CSS Editor

Might be better out there, but this would serve the purpose I was looking for.

Lenas_sl said:

> Hates on WYSIWYG
> Recommends a WYSIWYG

...

Click to expand...

Except Coda isn't a WYSIWYG.

ShakyJake_sl said:

Here's the thing, I'm not interested in drawing boxes and buttons on the screen like Photoshop. What I would like is an output window that will render the HTML as I type the code. It's annoying to constantly flip back and fourth between the editor and browser hitting refresh.

Microsoft's Expression Web does a decent job of this as you can do a split view. But since development has ceased it doesn't recognize some of the newer CSS3 styles.

Click to expand...

Here is what I would recommend, and how I develop: you have your browser open on one side of the screen and your IDE/Text Editor on the other and useLiveReload, or if your on a mac,CodeKit. Instantly refreshes your browser each time you save your file so you can see a REAL preview in the browser. It's extremely important that as your coding, what your using as a preview is a true representation of how the browser will render your markup. Anything else just won't cut it and will possibly create a nightmare of work for you if you finish a bunch of code using the IDE/Editor preview only to open it in a real browser and see shit ain't lining up, broken layout, etc..

Trust me, there is not a IDE/editor today that has a live preview you can truly trust. Use your browser.

Something like CodeKit is awesome as it will handle SASS or LESS for you should you go down the CSS pre-processing route, a template language like Jade, as well as things like Bourbon or Compass. Also look into scaffolding tools likeYeomanor if you really want to have fun, set up a localnode.jsinstance withexpress.js, which will give you a ton of flexible and highly scalage headroom with which to play with.

Todays Front End Developer has SO much more power available it's silly.

Warrik_sl said:

Except Coda isn't a WYSIWYG.

Click to expand...

Sure it isn't.

Definition_sl said:

WYSIWYG is an acronym for "What You See Is What You Get". In computing, a WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editingappears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, web page, or slide presentation.

Click to expand...

Just because you can't grab things in the live preview and drag them around doesn't mean that it doesn't match the description.

Warrik_sl said:

Also look into scaffolding tools likeYeomanor if you really want to have fun, set up a localnode.jsinstance withexpress.js, which will give you a ton of flexible and highly scalage headroom with which to play with.

Click to expand...

Lol he is just getting into HTML and you are recommending that he jump in node.js. Baby steps. Learn HTML along with CSS, then get into some basic javascript. Learn your basic programming idioms and ideas. Learn what you need to learn to do your job. No sense in filling your head with a bunch of detritus that is just going to distract you while doing your work. If you do decide to keep on doing this eventually your skills and knowledge will evolve. Just takes time.

Mixtilplix_sl said:

Lol he is just getting into HTML and you are recommending that he jump in node.js. Baby steps. Learn HTML along with CSS, then get into some basic javascript. Learn your basic programming idioms and ideas. Learn what you need to learn to do your job. No sense in filling your head with a bunch of detritus that is just going to distract you while doing your work. If you do decide to keep on doing this eventually your skills and knowledge will evolve. Just takes time.

Click to expand...

Well, he said he did have experience writing C# and WPF, so it sounds like he has good programatic experience.

Warrik_sl said:

Well, he said he did have experience writing C# and WPF, so it sounds like he has good programatic experience.

Click to expand...

Fair enough.

Adobe Brackets(open source) does some of this.

lendarios_sl said:

I have the artistic skills of a 4 year old, luckily i focus more on the backend part, and for that Visual studio is the best programming tool there is.

Click to expand...

You poor deluded bastard! You have Stockholm syndrome.

lendarios_sl said:

I have the artistic skills of a 4 year old, luckily i focus more on the backend part, and for that Visual studio is the best programming tool there is.

Click to expand...

Here is an AMA on reddit you should read. It will help you to cope:Orgasm and Arousal During Rape or Sexual Assault

Coda 2 has minor abilities to preview your content, but there is by no means any WYSIWYG functionality. Hell i've never actually even attempted to use it for that purpose.
You silly silly man Lenas.

WYSIWYG is by definition that preview pane you're talking about. It's an approximation of what's going to happen when you open the file in its native environment. The phrase by itself has no connection to tools that give you the ability to edit your code inside of that preview. What you see [in this window] is what you'll get [in a browser] (approximately).

Having the ability to preview your file ON AN IPAD, even though 99.99999999% of the users would never actually use this functionality, you discredit a phenomenal piece of software because "LOL XDDDD ITS TECHNICALLY WYSIWYG!"

What do you think of when you think of a WYSIWYG editor? the ability to code an entire file by hand, and have the option you'll never use to preview it in a shitty preview window that doesn't actually work?
or the ability to drag and drop a form with inputs onto a blank white canvas and have a "functional" html file when you save it?

Hmmmmmm, I wonder.

Don't get mad because I'm right. I never said there was anything wrong with them in the first place, just thought that it was funny you said stay away from them and then suggested one. I own Coda; I don't use it but I own it. When I think WYSIWYG, I think of a live preview inside of my coding application, because that's all I've ever used them for. Even when I was being taught, I said fuck that drag and drop bullshit.

Also, for iPads/phones I use the iOS simulator that comes with Xcode.

You're all a bunch of pussies if you don't use Vim. Only real men use the command line!

Lenas_sl said:

Don't get mad because I'm right. I never said there was anything wrong with them in the first place, just thought that it was funny you said stay away from them and then suggested one. I own Coda; I don't use it but I own it. When I think WYSIWYG, I think of a live preview inside of my coding application, because that's all I've ever used them for. Even when I was being taught, I said fuck that drag and drop bullshit.

Also, for iPads/phones I use the iOS simulator that comes with Xcode.

Click to expand...

WSYIWYG in the traditional sense is not a preview pane. Its having the ability to visual place elements on a caves and have the IDE generate the code for you. Dragging divs and tables around.