Something like http://jsbeautifier.org/?
Also why Notepad++ on windows? Sublime Text works on everything.
I've recently started a new gig, and I'm going to end up owning all of their support articles. Unfortunately they're all a single line of goddamn garbage, and I'm finding it hard to pick back up on HTML AND pick apart what they've set up.
Can someone recommend a site that goes over proper formatting from a text editor (I'm using Sublime Text in OS X and Notepad++ in Win) that will allow me to separate based on paragraph breaks, list items, etc? The goal is to get the information formatted to where the other staff can make an update pretty easily if I'm gone for a release or if I'm too busy. I broke apart one or two of the links we have, but I'd like to know if there's a "proper" way to doing this before I dive in and edit 70+ articles and find out that I did it incorrectly.
Sublime Text is able to use lots of plugins, one of which is called Tidy. It will format documents for you automagically. I believe you can install it straight from Sublime Text, but I did it in OS X and not Windows.
The absolute best source formatting that I've ever used is in Dreamweaver, though. In fact, I keep the program installed JUST for the source format button.
Installation - Package Control
I highly recommend installing the emmet plugin (which you can do from package control and) as well. Shit will help set up html pages in a few seconds among other things. With emmet you type something like "html:5" (sans quotation marks) in the text document and then hit 'ctrl + e' and you get a yourself a basic html 5 scaffolding.
And there ain't nothing wrong developing on windows, but if you are doing stuff for linux based servers it is a bit of pain but you can deal with it.
Last edited by Mixtilplix; 01-03-2014 at 04:22 AM. Reason: it's package control (duh!)
By the way, Microsoft Expression Web is now a free product. It's comparable to Adobe's Dreamweaver. It has some nice formatting abilities, as well being a pretty nice HTML and CSS editor. Unfortunately development on the product has ceased so it's Intellisense feature doesn't recognize some of the newer HTML5 and CSS elements and properties. Kinda of a shame since I really liked the Expression series.
Microsoft Expression Web 4
It feels dirty and clunky. That being said, if ASP.NET is what your company uses, it sounds like your path is clear.
I would strongly caution you against using Microsoft Expression or Dreamweaver. Your best bet would to be use something like Sublime Text or Notepad++. If you use Sublime Text, be sure to install the package manager as it vastly improves the capabilities.
Last edited by Warrik; 01-11-2014 at 05:32 AM.
The point is, I have no desire to design a graphical front-end entirely with a designer. But maybe it's different for web development? I mean, I see some really beautiful HTML5/CSS3 sites out there and can't imagine someone doing it entirely with a text editor. I just assume the standard approach is to use something like Dreamweaver then drop down to code level for the fine tuning.
Last edited by ShakyJake; 01-11-2014 at 08:49 PM.
Anyways there is a lot you can do with CSS these days. I recommend that you familiarize yourself with CSS3 in particular. I don't know any design/development firms that use a wysiwyg editor these days. Devs either use a text editor (like Sublime Text) or an IDE.
There are a lot of frameworks out there that people will use as a foundation. Check out HTML5 Boilerplate, Modernizr, CSS Normalize, Skeleton, and as Mixtilplix mentioned, Boostrap (which was originally developed at Twitter, but is now open source). Best advice I could give you, regardless of platform, IDE or editor choice, would be to avoid WSYWIG's and learn to hand craft your content. The future dividends of your work will be infinitely better.
If you come from more of a pure programming background, there is a trap many fall into. HTML and CSS is deceptively simple on the surface, but building beautiful sites that can scale, or be responsive and performant while being sematic is an art.
If you are really interested in Front End Development, I'd highly recommend any of the following books:
Designing with Web Standards (3rd Edition): Jeffrey Zeldman, Ethan Marcotte - If you build for the web, you pretty much have to read this. Zeldman started the standards revolution and has helped shape the web of today.
A Book Apart, HTML5 For Web Designers
A Book Apart, CSS3 for Web Designers
A Book Apart, Responsive Web Design
High Performance Web Sites: Essential Knowledge for Front-End Engineers: Steve Souders - Another extremely important book that will shape how you structure your code
Read these blogs:
A List Apart: For People Who Make Websites
AddyOsmani.com | Articles for developers
Lea Verou | Life at the bleeding edge (of web standards)
Lastly, read this:
How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks - Don't let the title fool you, thats some serious shit right there that everyone who makes content for the web should know.
Last edited by Warrik; 01-12-2014 at 05:23 AM.
Thanks, Warrik! Fantastic compilation you've provided. I'm mentally giving you +nets right now.
Well, it looks like I have a library of things that I should start to get working on in the near future. Man, I wish I could give +nets still!
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.
There are extensions you can get for both Chrome and Firefox that will auto refresh on a file update, so you can use any editor you want and have a browser side by side to see changes automatically in a real environment.
just be thankful you don't have to wait for code to compile hehe.
LiveReload, 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 like Yeoman or if you really want to have fun, set up a local node.js instance with express.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.
Last edited by Warrik; 01-24-2014 at 12:13 AM.
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.
mmm.. not sure if serious. are there any other GUI better than VS for the .net platform? Also I tried eclipse for php and it was nice, but VS had better features.
Obvious choice is to build the GUI of your dreams in VB.
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.
Last edited by Needless; 01-30-2014 at 08:49 PM.
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.
Last edited by Needless; 01-31-2014 at 02:59 AM.
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.
Could you please include some advice and free resources for a absolute beginner ? I dont want to do software, just basic web design, and I have absolutely no ideea where to start. I would like to do it in a text editor, like the big boys, but i want some sort of plugin or something that would auto-complete the basic commands and automatically end the </body> tags and the like.
But first, do tell me, I am 36 years old, is it too late to learn webdesign ? And I cant draw a straight line, not even in Paint.net.... Should I forger about the whole thing ?
Emmet does look pretty sweet.
I'm not sure on the editor. I use Vim, which can do autocompletion/snippets, but it is really confusing editor to use if you're not used to it.
Use Codecademy to learn and then use Sublime Text 2/3 + Emmet plugin.
In regards to Codeacademy, its a good starter, but many people find themselves trying to "win" Codeacademy and often will miss fundamentals or overlook things. Just be aware.
One thing I really liked about Codecademy, at least with the jQuery exercises that I ran through, is that the last "project" was to create my own jQuery application. I honestly was pretty challenged and had to go back and review some of the exercises, but I finished by building a pretty functional slideshow type thing. I thought the course itself was incredibly informational.
I can see how people could get caught up in the badges and try to make it a competition, though. Mostly I just got addicted and tried to keep my streak alive, coding something new every day.
I'm not a web developer but I use https://netbeans.org/ I chose it because I got the PHP debugging to work with it, but I've found that it's very good at providing contextual help with html and css. Even something as basic as typing <p will provide a window with a few pages of text about the paragraph block. This is really helpful to someone who simply doesn't know the html or css tags.
MS stacks are basically in their own bubble. I honestly never see people using VS anywhere else frequently.
Last edited by Celestein; 02-25-2014 at 12:16 AM.
VS2005 is the best I've used for C++ (and obviously C#). 2008 and 2010 are like VS2005 but with features I don't use, a carat I can't change the color of and a ton of delay with most operations (I've used it on about 5 different PCs).
Eclipse is pretty good though, the best I've found for Java and it's reasonably good for C++. For linux it's the best C++ IDE I know of.
Last edited by Tuco; 02-25-2014 at 10:27 PM.
There are currently 1 users browsing this thread. (0 members and 1 guests)