Slashdot Mirror
Ask Slashdot: Value of Website Design Tools vs. Hand Coding?
An anonymous reader writes "I am pretty computer literate, and have a son who is extremely computer savvy. He taught himself C#, Javascript, built his own desktop with his Christmas and birthday money two years ago and is an avid reader of stackoverflow, reddit and many forums. He recently was asked to design a website for an architect, and likes to code by hand using Notepad++ and the Chrome developer tools. He uses CSS and Javascript libraries, but is convinced that all visual editors (Dreamweaver, Expression Web and so on) are only for extreme beginners and create non responsive, non compliant sites. I argue with him that while handcoding abilities are essential and great there is a value in knowing and using WYSIWYG editors. We agreed that having slashdot weigh in would be useful — comments appreciated on either the approach or good tools he can and should use."
hand code it efficiently and your site uses less code, which means search engines can crawl it faster.
WYSYWIG is for those who have visual talent
hand coding is for those who want it functional
if you can do both, you're very talented, and probably underpaid
I'd be happy to get rid of hand coding.
WYSIWYG like Dreamweaver always write code that is hard to read so when you have to edit something manually it's a PITA. Also Dreamweaver tries to fix what you edit manually. Also DW etc all aren't always 100% compliant in their browser view, so things look great there and crappy elsewhere.
I see Dreamweaver code, I expect nothing but pain.
I like Panic's Coda, which is more of a web project oriented IDE than a Design Tool.
Skot Nelson music is my saviour / i was maimed by rock and roll
My experience with WYSIWYG editors mostly consists of having to come back after and maintain the site. It has invariably been a mess. Half of my effort is spent organizing the code before I can work with it. I'm sure a graphical editor can be written to create clean code, but I've yet to see one. Then again, many developers create the same kind of problems when coding by hand...
Hand coding is great, especially if you don't want to have to lay out the money for design tools, but if you already have access to them, use the design tools instead. You can save a ton of time using Dreamweaver's templates when designing a site. Also, if you use a split view, you can see the changes you make in HTML & CSS almost immediately. You still need to know how to hand code to be able to get through some really tricky parts, but let the design tools do most of the work for you, then tweak manually.
Taking guns away from the 99% gives the 1% 100% of the power.
Designers will always upvote WYSIWYG editors. Hardcore hackers will always defend coding themselves, instead of drag-and-dropping and following wizards.
If you try to make a hacker use wizards to design a website, he'll fail, and the opposite also applies.
As long as he's adept as using the tools he's using, then he'll most likely succeed. Personally, I prefer to code the website myself. Why? Because I can see the code completely, and understand what's happening, and what every line means. I can always fix any bug found, because I know where it lies. If I had used some tool to generate it, there'd probably be parts of the code that I wouldn't understand and wouldn't know how to fix.
Asp.Net, which I assume your son has dabbled in, knowing c# and all.
Couldn't imagine building an asp.net site using notepad++. He's right about expression blend and the like. They are utter garbage and serve no useful purpose.
Imagine trying to program the software you use in machine code, without any tools to aid? Maybe back in the early days, it was done this way, but today everyone uses the necessary tools if you want your software / website to get noticed. Unless your website is very basic, in which case it will probably never get noticed.
-- By all means let's be open-minded, but not so open-minded that our brains drop out.
Probably a copy of Homesite (do not laugh!) or a couple other more recent apps that do a fairly good job in the same vein. Topstyle is a default though... I've yet to see a better CSS coding tool in terms of library and standards controls.
-rt
Hand coding is the only way to go. Modern web pages integrate HTML, CSS, and several different javascript libraries. They contain div's with dynamic content updated via AJAX. They are often built with templating libraries such as Rails' ERB, meaning you have code (conditional statements, for example) mixed into your page's HTML.
DOM structure matters - with a WYSIWYG tool like Dreamweaver, you have no control over the actual content of the page unless you go into HTML mode and basically use it like Notepad.
Your son is doing it the right way. If you want to save time, build a personal library of javascript libs and CSS snippets that you rely on. But skip the dedicated editors. You lose much much more than you gain.
Looking for a Rails developer in Chapel Hill?
Use the tools to auto-generate the code, and thus save time, but then clean-up the final result to your own personal tastes. This is what I do with VHDL or Verilog. (Also a good way to learn new techniques from the generation program.)
My AC stalker: " I personally agree with your posts most of the time, but that won't keep me from modding you troll"
It's been a while since I've used a WYSIWYG editor, I had to go back through and clean out a lot of unnecessary garbage from the HTML and make a few modifications. For some complex designs, it worked better than doing it all in a text editor but those were more the exception than the rule.
I code lean and mean html and css by hand. Visual Studio has IntelliSense for css (and javascript) which is nice and speed things up a bit.
And your skillset is?
Something like Dreamweaver is only really useful for polygon image maps in the rare instances that they are needed (I recently had to make one of those 'select your region on this map' links); for anything else, any competent developer or designer should be able to create layouts that work with arbitrary and abstract components - if the developer changes the data to show different or more/fewer modules on a page, the design should already compensate; if the designer changes the design, the developer should be outputting code in a standard format that should already work with the design
Using a CMS will allow him to use the CSS customizations he loves, and javascript as well, while giving the architect something they can maintain after he's gone. Many drupal developers now prototype in drupal gardens (drupalgardens.com) exporting it when they're done or have reached the limit of the hosted environment. Either way, lynda.com has tutorials on the three major CMSes (wordpress, joomla, and drupal) as well as how to choose. Dreamweaver is a useful tool, but CMSes are a much better way to go. --Sam
Surely a CMS-based system is the most efficient and maintainable approach?
If I was paying somebody to construct a site for me, you can bet that long-term extensibility and maintenance are going to be *very* high on the list of requirements.
Hand-coded websites, made by enthusiastic amateurs, don't fill me with confidence that both of these requirements will be fulfilled.
You guys are reversed from the typical roles I would have expected. It sounds like your kid is a developer at heart, not a designer. Those tools you want him to use are for designers, which is why he doesn't like them. He doesn't think that way.
Find him something he can do as a developer, since it sounds like that will be where he's comfortable. There are too many "website design" people out there anyway.
Although one might feel a greater sense of accomplishment after hand-coding an entire website, it can become a gruesome task to modify it and keep it up-to-date. I know this, first hand, because during my days of learning PHP, MySQL, Javascript, and CSS, I spent countless hours on a single website design. After I finished, I sort of "left it alone" and haven't really updated it since.
It just makes more sense to learn how to effectively use WYSIWYG / CMS platforms due to the massive amounts of time that one would save in the long run. I'd encourage him to keep learning both styles.
My guess is Objective-C and butt humping.
There is absolutely no value in using a WYISWYG if your making any type of website beyond a small staicsote. If he he knows C# hes already using visual studio, and the skills learned using an IDE and its debugging tools are a much greater asset than learning to painfully try to force some WYSISWYG editor from slaughtering your code.
Hand coding will always have the upper hand for the competent. Especially when incorporating new technologies and techniques. Good code/system design, IDEs with syntax highlighting and other helper functions, build/verify tools (grunt/jslint/etc) and frameworks are the things that will accelerate developement. Frameworks like jQuery UI will take care of different browser hacks like design tools can help with, for example.
His skillset? Gettting first post on Slashdot, of course.
"website coding" is very much like womens high fashion clothing. All that matters is what it looks like and who's promoting it. All form, no substance.
Therefore making engineering style analysis is a complete waste of time. It's like arguing which womens wedding dress is more structurally sound, or making the primary design decisions about womens fashion shoes by doing a finite element analysis. You're going about it wrong.
That said, it seems very difficult to do anything involving CGI without knowing how to hand code, so you'd best learn how. Not impossible, no, but you have to restrict yourself to weird brittle workflows and dependencies, or restrict yourself to weird platforms. Will an architect's website involve anything CGI related? Probably not.
Most likely just a huge whomp of content free shiny flash and animation. The kind of place I'd go to solely to find the "contact us" page and assume anything so highly polished is a waste of time to look at. So whatever is trendy and cool looking is the way to go. Which probably means WYSIWYG editors.
"Science flies us to the moon. Religion flies us into buildings." - Victor Stenger
I agree with your son, I have been professionaly building websites (backend and frontend development) in gedit for about 6 years now, so i might be a bit biassed. But _building_ websites with WYSIWYG editors (in "visual" mode) just makes you fight the markup the editor generates. It is also slower, since you will need to go to different menu's etc to set basic properties etc.
That being said, using a WYSIWYG editor for adding images and text is a different story, I still have not found an example of a program that generates (imo) nice html but it can save some time. (though zencoding is a better way to save as much if not more time in my opion).
The debate of WYSIWYG tools versus hand coding is like the debate as to what language to use.... and one size does not fit all. If the only tool you have is a hammer, everything looks like a nail.
Is there "great there is a value in knowing and using WYSIWYG editors"? Yes... he certainly should know them, and probably sometimes use them. Without that experience, he can't make an informed decision on when to use them and when to not.
Is using a WYSIWYG platform the wrong choice sometimes? Absolutely.
Also, at some point you will inevitably sacrifice performance for lower development resources (i.e. your time) and use a WYSIWYG where you would rather hand code, if time, money, and resources were unlimited. Knowing the pluses and minuses of different WYSIWYG environments is the key to making the best choice among them, and when to use them.
It has been some time since I did web development, but I remember many WYSIWYG editors that you could configure to view the source on one side and the result on the other. Thus you could see what you did while handcoding, or could create a prototype quickly with the editor and find the parts that neeeded refinement.
Troll much?
WYSIWYG is good for ballparking things. I prefer to get the general layout established visually and then duck under the good and tweak the code until things are exactly how I want them to look.
Young buck is right.
The thing about WYSIWYG editors is that they can be used by people even with little to none experience and is a good entry if you have not encountered web development before. They also allow for rapid prototyping and often have inbuilt facilities to handle project management as well (which can become an issue for bigger projects. They do however generate quite a bit of useless code and tweaking some minor details by hand later on can be a bit fiddly.
Some say that you can just as well remove the extra code later on, but I find it that it's easier to just start on your own from scratch (or template) and build the website how you see fit. True, it takes more time initially and you are going to make some mistakes that could be avoided with WYSIWYG editor, but in return you are familiar with all the inner workings of your website and can modify any component relatively quickly (not to mention that you get more experience in web development this way).
Have your son install Joomla, buy a 1 or 3 site license from Rockettheme.com, use their plugins and add-on tools, and then spend his time on customizing a professional-quality template. 98% of the work that he's proposing to do has already been done for him, and done by people who have years of design work and bug-fixing under their belts.
...is an avid reader of stackoverflow, reddit and many forums.
Frankly, Stackoverflow is probably the only good one and if he's doing C# and other MS tech, the MSDN Forums are another place he should hang.
As far as everything else is concerned - let him work and create the way he wants to. If he wants to do something stupid like code in emacs (I kid! I kid!) then let him.
I argue with him that while handcoding abilities are essential and great there is a value in knowing and using WYSIWYG editors.
Absolutely! 1. It'll help him with employment - a buzzword to add to his resume.
2. Many times I use WYSIWYG editors to to do the grunt work for me and then I go back and tweak code where needed. I have to say that these days, those editors are pretty damn good. And I'd also like to add, one day - someday - this typing code will disappear. I think it's ludicrous that in this day and age of powerful computing and GUIs and touch screens that we're STILL typing?! NeXt had this awesome drag and drop application builder years ago and it seams that Jobs didn't take that with him to Apple. What was deal?
Application programing should be as easy as using a TV or your cable box.
Save the intense coding and whatnot to the systems, tools, and system and "programing" guys.
WYSIWYG editors are great for beginners. but, as most everyone has pointed out, they invariably generate messy code. once you've gotten past the beginner stage, you need to get your hands in the code and learn to do things properly. i realize that designers are often quick to say that you should use an editor, but lets look at it this way- would you take carpentry advice from a plumber? probably not. so why would you take advice on coding a website from a designer? and as for using the tools to generate the code, then going back and cleaning up, personally i find that to be more work than just doing it right the first time. hand coding isnt hard, and the more you do it, the faster you get at it.
In industry there is typically a line between designers and coders, designers work with css and html in a WYSIWYG editor, while coders ensure that back-ends and javascript are performing the functions required of a web application. As a coder who sometimes ends up doing designs I can absolutely say there is nothing humble about adjusting html and css and refreshing in chrome to see if the changes were what you expected.
Ask your son how he fine tunes a layout, if he is an adjust/refresher then his ideology behind WYSIWYG is out a perceived self-eliteness.
I could craft a Table cell-by-cell but why should I when I can get a simple tool to do it for me. Foundation coding skills are essential but you also got to see the realities, and some tasks are quite simply a waste of time to do manually.
WYSIWYG editors are a waste of time. You may like what you see on the screen when you create your design but the code that it generates it complete crap. And when you use a WYSIWYG editor you ALWAYS will have to go into the code to fix, change and alter things here and there. And since the generated code is complete crap, it makes it a pain in the ass. I'm a professional web developer and I don't ever use WYSIWYG editors. Ever. Waste of time.
At least with respect to Dreamweaver -- it's a piece of crap.
It is best to handcode, or use frameworks and templating libraries that have been hand-coded. They create code that is human-legible, and the more time spent actually coding the better a programmer he'll become.
Not saying there aren't good graphical tools to *help*, Firebug is an invaluable resource in figuring out what has gone wrong. Selenium is great for automating tests in the browser and actually run them in the browser, while Zombie lets you run some of the tests faster but in a fake browser in a Node.js environment.
But editing your website ought to be done with a good text editor or IDE, because you should be abstracting repetitive tasks into functions (that Dreamweaver could never understand).
Well, I'll start off by saying that your son sounds very smart and gifted -- although it also sounds like he is at that very special age where he knows everything. I too experienced such youthful bliss and ignorance but the only cure was time and experience. I might have even made similar claims that all visual editors are detrimental in some form or fashion. I have found myself shying away from absolutes like this and, actually, find it difficult to determine when something is "visual." Is the color scheme in my VIM and EMACS windows a "visual" editor? I find myself today locked in a love/hate relationship with several that I am running as I write this. I think the best course of action for you is to remind your son that nobody ever wrote a heavy integrated development environment with the intent of completely removing the burden of coding on the developer. Also, a solution that takes you 90% of the way quickly but still requires you to write out and augment that final 10% is still more useful than starting with nothing at all. I suggest you and your son work through the Rails 3 tutorial using scaffolds. This is an example where something from the command line augments your ability to stand up web applications quickly. I also suggest you do exercises with Eclipse (or I guess Visual Studio Express if he uses C#) and try to import 10 or 20 libraries into the project. Doing this with an IDE is much friendlier than doing this from the command line or hand writing ant/maven scripts.
... but then again, there's no reason to shirk productivity in the name of purity. When I was writing huge monolithic classes with no dependencies in college, I was doing everything in VI. Those days have passed, I must write modules that exist in a massive hierarchical tree for many teams now. I depend on IDEs and their integration with various other tools ... and I'm not ashamed to admit it.
There's nothing wrong with doing everything by hand
My rule of thumb is to let editors do the mindless work for you, but never let them do so much that you don't understand exactly what it is that they're doing. If you do allow them to do something so complicated you cannot understand it, you enter into dependence that cannot be undone. You will find yourself unable to augment the automation further and left with 90% solutions and unfinished projects.
Perhaps another line of reasoning to use with him is to ask him to write a windows program using just 0s and 1s or hex in a hex editor. When he cannot do this, ask him why he is okay with C# augmenting his abilities to control the computer. Then ask him why he draws the line there and why not allow more code (IDEs and their plugins) to do more work for him. Sure, everyone draws a line in the sand and sticks to it. I've met kernel hackers that don't even trust compilers. If your son chooses that path, then let him choose his own path.
My work here is dung.
(What follows is ironic as I am building a WYSIWYG web page tool.)
WYSIWYG editors are an unnecessary abstraction that keeps the developer firther away from their medium. They are useless as soon as soon as you want to do anything complicated or modern. They cannot keep pace with standards and techniques, and add a dependency of a third party tool. Their output is always more cumbersome and convoluted than hand-edited code. Knowing how to use one does not aid a developer's understanding of the web (though knowing how to code aids a user of those editors).
Its a terrible place with terrible people. Avoid at all costs!
As with most things, the correct approach is a balanced one. Going to extremes on either side of the issue with invariably result in negative consequences.
Having an in-depth knowledge of html, css and javascript is crucial to effective web development and design. Having design/graphical tools let's you step back from the code and see things in a "big-picture" light, allowing you to create innovative designs that you probably wouldn't have considered otherwise.
I generally use both approaches. I like to use Artisteer to generate random designs to get concept ideas (I'm not a graphic designer). When I find a concept I like, I take the generated results and convert them into the final code I want. Here's an example of that approach: Master Iron Company
Sometime I take the hand-coded approach if I'm just playing around and experimenting. Here's an example of that: MotorTap (a product I developed, and make the web site for).
Drinking habits can be dangerous. You can choke on the cloth and the nuns will wonder where their clothes are.
I argue with him that while handcoding abilities are essential and great there is a value in knowing and using WYSIWYG editors
Don't get me wrong, I like the idea of tools that provide real-time feedback of the "end product'. To date I have not seen a web editing tool that actually is WYSIWYG.
There is value in these tools if you have zero desire to become adept at making web pages / web applications, ie you're doing a school project.
If you actually want to make something decent, the WYSIWYG editor is going to hold you back. This is especially true WHEN the proprietary firm that creates your editor changes their interface.
Background: I've been a web developer since 1994 and have tried multiple visual editors from the beginning. And try to keep an open mind about new ones. But have yet to be impressed by the final outcome.
What you see is all that you get with a WYSIWYG. You can design and move things around for a template, then build a website from that template(s). But when it comes to redesigning, adding functionality, or updating the website that was built entirely with a visual editor, things get messy very quickly. A visual editor doesn't know what the developer is building and for what purpose, so it attempts to work around the browser quirks in a redundant manner. This leads to extra JS and CSS libraries, snippets, and junk that isn't always necessary. For a secondary developer, all of this extra junk becomes confusing and will cause major headaches.
Am I completely opposed to visual editors? No, but it is essential for any designer/developer to learn the mark-up first. Then, if it's essential for a specific project to learn how to use a WYSIWYG editor. But to always maintain a vigilant eye on what mark-up is being dumped on the pages.
-vert-
love the penguin
Tools have their limits in some things, and what they do, they may do well but hit the wall on some specifics, and their code may not be optimized for performance. That being said, hand coding is VERY limited, for several reasons. First, self taught people tend to have gaps in the knowledge and practices of the areas they have studied, no matter how talented. There will be things that any hand-coder will try to do a specific way that is familiar to them, where better, if more complex, options exist through the tools. The most important thing about hand-coding is this: it is virtually unsustainable over time. I know that is a very broad statement, and will raise the hackles of some excellent and talented coders, but anyone that has done any long term support will tell you than out of the hands of the original coder, hand-coded systems fail in one important area - no one else can go in and fix them when they break, and even the original programmer will find it difficult to support a site he hasn't touched in a year or more. If he wants to hand code, teach him to comment everything, period. External documentation, commented code, clear process identification and threading are as essential to the success of a hand coded site as the code itself, but most coders will admit that this is something they do as an afterthought at best, and they consider a nuisance and a distraction from the project. The simple truth is this; if you cannot explain it on paper well enough that someone with no access to you or your thought processes can see what you have done and make the necessary changes or repairs, what you have built is, in the long run, a throwaway. Talent means a lot in creating a good site, with or without the tools. Tools provide a level of "documentation by process" that enables someone using that tool to look at a site and understand its internal processes. Very few hand coders, in my 30+ years of experience, can or do provide the same level of sustainability and the problem of the essential application or process that the developer has long since moved on from is an axiom in the IT world. It is not that tools or hand coding are either one better than the other in the end; the result is much more than the page view, and that needs to be addressed, either by using the tool, or doing the documentation the hard way. Without that, great work becomes great problems over time.
Visual Studio 2010's designer works decently. If I am working in Webforms, I typically rough it out in the designer with dragndrop, then tweak it in the code. This works pretty well. Every once in awhile the designer craps out on a particularly complex page. In general this "roughing out" stage is only the beginning of a UI anyway though, so it is not like it makes that big of a difference. As far as VS 2010 goes, the designers for Winforms, WPF, and Silverlight are way better than Webforms designer, but it does the job OK to save a bit of time prototyping.
Basically, on any platform, if you know what the fuck you are doing, hand coding is going to be where you end up going anyway. Designers cause more problems than they are worth past the prototyping stage. How could you even make a WWYSIWYG for any sort of dynamic website (aka most stuff these days)? WWYSIWYG is pretty much confined to static small business sites by its very nature. With the advent of tools like Wordpress that are even easier than WWYSIWYG, there just is not much point.
When I initially start working on a website or webapp layout and design I like to use WYSIWYG to set the initial stage and design the first forms.
But after that it's all hand coding - WYSIWYG editors create too much noise and clutter in the end that you have to modify or remove by hand.
I do like Dreamweaver, but I don't use it much.
Your son is correct, no professional (I've ever met or spoken to) uses WYSIWYG editors. I used to use dreamweaver as my code editor, but never even looked at the non-code view. Now I use sublime text for all my code editing
I am probably one of the least technically inclined people codewise to visit and post on the Slashdots, but I have done my fair share of websight design throughout the years and I end up doing everything back-end in Notepad++. The design I do in whatever image editor is suitable, then I assemble the pieces in Notepad++ afterwards. I have also used Notepad++ when doing PHP and creating and maintaining simple image galleries and so on. When given the choice I have done things hand coded and pushed it through the W3C and as soon as it is validated and tested in a whole lot of browsers I give it back to the client and run for the hills.
Less filling! Tastes great! LESS FILLING!!! TASTES GREAT!!!!
WYSIWIG Pros - For a general audience. Relative ease of use, fast results.
WYSIWIG Cons - Manual overrides difficult. Cross-browser compatibility issues. Ties the site maintenance to a specific vendor (barring a full rewrite).
Hand-Coding Pros - More & complete control over all elements. Site maintenance not tied to a vendor.
Hand-Coding Cons - Steeper learning curve. Not for a general audience. Longer development time (generally).
Design tools are fine for making mock-ups of sites and can be good for designers to quickly get their points across. But for the actual creation of a website, they're terrible. Hand coding is the only way you will get readable, easy-to-edit, flexible, efficient code. If this website your son is designing is more than a page or two of static information then he is right in wanting to do it by hand.
I think you will find it addresses this question.
Sincerely,
A. Coward
With hand coding, I can do anything. With WYSIWYG, you tend to do the more tedious stuff more often because the tools make it easy.
With hand coding, I can always go back and modify something later. With WYSIWYG, the HTML it generates is generally so obfuscated that you need to use a tool to maintain it, and often you are effectively locked into a tool because many tools confuse each other with constructs that only they understand for editing.
Dear poster, ask yourself if you are really entitled to opinion in this argument. It sounds like your son has things figured out, and you don't.
I also second other posters who mention CMS. If he is so excited about C# he may try Visual Web Developer Express and poke around Microsoft web development ecosystem. They got some nice toys, like WebMatrix. I myself would stick to vi, gimp and browser built-in tools when I work with WordPress or some such CMS. I fancy Opera recently, but all major and free browsers have descent developer tool-kits. Everything else is redundant.
A few years ago I tried kompozer. It seemed to keep clean code and give access to low level stuff. However, I think development has stalled.
If your son is competent at coding, I think he should take a look at the following book: "Don't make me think" by Steve Krudge. Then do some design by using pencil and paper or a tool like the "Pencil" addon for firefox. Once the design is there, then code using a tool that does content assist or intellisense for html, css & javascript. I don't know anything about "beautiful design", but I think he should try to learn this area from design people. Once all of the ingredients are there, he should become kind of "invincible".
Why would you curse your children by indoctrinating them into the Microsoft ecosystem?
It sucks, it's a minority technology (i.e. the various Java platforms are the dominant business technology) and Microsoft is on the way out.
TFS:
He taught himself C#
Perhaps a better parent would discourage such efforts. If he doesn't study The True Language, he's a blasphemer and the books he's been reading should be burned.
Holy wars aside, learning OOP goes beyond the syntactical sugar of the actual language.
More Twoson than Cupertino
Let him code it himself; it'll be much cleaner than using something like Dreamweaver.
Instead, some more useful tools to introduce are: ...)
- IDE's (Aptana, for example, a 'tuned' Eclipse specifically for webdesign)
- Backend frameworks (Django, Ruby on Rails,
It's not that tools like DreamWeaver are ALWAYS the wrong tool -- they can be useful for graphic designers with little computer knowledge -- but your son is a programmer, a tinkerer, who uses advanced editors, likes to understand stuff he builds in detail, and is not afraid of programming and editing by hand. I'm willing to bet anything that he will create better looking, more reliable, more standards-compliant and more correct webpages in less time if he learns the basics of modern HTML/CSS than he would if he mucked around with DreamWeaver and the like.
I'm not a web-developer, but I have a fleeting knowledge of HTML (most of it from early 90s) and CSS (most of it from early 00s). My girlfriend is a designer and asked me for help with a web page she is developing. Nothing complex, but quite meticulously laid out, lots of pictures, hover-effects, menus, and the like. It took her many weeks of hard work to produce the GIMPed designs for me to work on. In less than a weekend, I had it running in all major browsers using nothing but vim, and this includes looking up most of the needed stuff on the internet. The code is clean, reusable, validates (both HTML and CSS), and works in all major browsers (I might need to add some IE6 workarounds, but I probably won't bother, let it burn).
So anyone who is a coder should be able to pick the basics up in a couple of days, and this will be infinitely more useful in the long run than learning the quirks of a Web design program.
In my work (developing Smart TV SDKs) I try to convince people that they should focus on performance, and that frameworks - the more advanced version of easy dev tools - can(not always ofcourse...) lead to bad sites. While wysiwyg, being even more simpler than frameworks, can help get quick results, it is only to be used as a stepping stone.
Basically I would create something using Dreamweaver, then look at the html, then change the html to see how it changed the page.
I think at the end of the day it depends on what you're doing, though. For very simple sites, a website design tool can produce clean code, depending on how you've configured it, and it'll be faster to use a GUI for a simple site than anything else. But the more complicated your design gets, the more junk it's going to throw in to get it to look the way you want. And these days so many websites are database driven that website design tools are a lot less useful than they used to be. Most of the time I don't create websites, I modify templates... and that means moving around php fields and changing divs and then mucking about with cascading stylesheets. I've lost track of the GUI apps these days, so I don't know if they've adapted to this new world, but when I started using WordPress and Drupal, Dreamweaver got a lot less useful.
At one point in time, when I'd largely abandoned design tools altogether, I still kept Dreamweaver around because it had the hands-down best search and replace tool I'd ever encountered, and I could use it to search and make changes in entire directories of css, html and php files.
Eviscerati.Org: All Hail the Eviscerati
A web page is a data structure made of HTML, and then apply some CSS (or a lot), and later you might want to add some unobtrusive javascript.
That is a very complicated process.
At work, I tell the graphics designer don't ever worry about the technical stuff, just use photoshop or whatever he likes to create the pages he desires. The advantages of this is he would focus on design not coding. When the design is out, I would let him create the basic HTML with a few guidelines, such as tables are for tabular data, use ul for menus, and always have alt attributes for images. The HTML will be modified by developers and CSS applied. I will never expect a graphic designer to understand HTML and especially CSS. If lots of developers can't have a grasp on CSS, it is harsh to expect designers to understand it.
Most HTML + CSS pages produced by designers whether by hand or by WYSIWYG editor are shit. They got rewritten anyway. The process of 1. HTML, 2. CSS, 3. Javascript really don't need too much WYSIWYG. The only value I can see in WYSIWYG editors is when we are on a tight schedule, maybe the designer could make some page quickly for us. Unfortunately, the lack of knowledge in CSS would probably make the result look really bad.
I got rid of all WYSIWYG a long time ago.
As an independent web application developer. I receive visual mockups from a designer (in Illustrator, Photoshop for example), and convert them (by hand) into maintainable web pages, as far as the HTML/CSS is concerned.
It takes a little longer to create the initial HTML layouts and CSS, but in the end, it's much easier for me to quickly update and maintain over time. Things are 'built' and formatted exactly as you need them to be, and keeps things much more efficient in a number of ways.
It seems to depend on what your needs are, and how complex the design/app you're working with, etc.
"I don't even see the code anymore. I just see blond, brunette, redhead..."
No matter what tool I use, I end up in notepad at some part of the process.
Sorry, but your son is now ahead of you in this area. Your advice is now irrelevant. Let him me and maybe you might learn something.
It sounds to me like your son, like me, is not going to spend a lot of time designing sites. I've helped with the occasional site done in a WYSIWIG editor. Every time, I have a steep learning curve and when I come back to it 2 years later because the owner needs a hand again I have to learn a new version of the software in which they have inevitably moved something on the menus, changed the layout of the controls, etc. It's a royal PITA. Sure, if your son is going to code a site a month a WYSIWIG package may be worth the effort, but I'm betting he has better uses for his time than designing sites at this point in his life.
I am a developer first, but I also consider myself a designer. Those who are grounded in manual coding know that a WYSIWYG design tool creates unreadable and almost unmaintainable code. This makes it especially difficult when you are trying to debug something, though firebug does help. While I recommend against WYSIWYG tools, there is a middle ground...IDEs. IDEs, such as Eclipse, allow you to mess with the code and even have design views so you can see it as you build it. They also offer autocomplete for those times when you arent' quite sure what attributs are availabe in which tags. So, while it may not make creating pages as easy as a WYSIWYG tool, it gives you more than a standard text editor. Plus, Eclipse is free.
The way I code is to hand code it using heavy Intellisense (Visual Studio). I would never use drag and drop, per se, though. The other half of the equation is being able to check the results quickly in the preview mode. But if someone is ABLE to hand-code, a WYSIWYG editor is worse than superfluous - it will slow you down significantly as you have to go back and clean out the cruft, or struggle to troubleshoot why something is not behaving correctly.
I thought you were talking about websites. Suddenly we're talking about PDFs? WTF?
Nobody is ever going to invent a WYSIWYG editor for websites.
I've never used a WYSIWYG editor for any website and nobody worth their salt ever would. So your kid is correct and is learning it the right way.
However, what is just as essential (imho) as knowing how to code it all by hand is having a good grasp of graphic design and user experience. If you are able to master both you are a rare breed and extremely marketable in today's world.
The only real design tools you need to design websites is a copy of Photoshop and a good text editor. Everything else is basically fluff.
I find notepad and similar tools to be a bit constricting. A tool like jetbrains webstorm / phpstorm helps me keep track of my web projects and debug with ease.
I make my living by making websites. We generally split the process into several parts:
Designers don't know how to code, HTML/CSS people usually know enough programming to code a dynamic template (that's why template engines like Smarty or HTML::Template were invented). Programmers don't even know how to use Photoshop and generally know a little about CSS so they can connect JavaScript if necessary, but not enough to know all the quirks of e.g. Internet Explorer 6 or absolute vs relative positioning.
WYSIWYG tools have no place in such process. They stand in the way, as the code they generate is usually not standards compliant, doesn't work cross-browser, etc. Also, some things are just too hard or impossible to do with WYWIWYS tools. Modern websites have very complex HTML structure and often use CSS libraries. Trying to force an editor into submission is usually harder and more time consuming then just writing your own code.
Design in a tool for designing. Photoshop is the choice of pros. I use Inkscape when I want to play with some designs and create mockups. Works very well and is free (beer & speech).
Code in a tool for coding. Anything from Vim to Coda to Notepad++ to DreamWeaver's code editor will do.
It's cool for your son to try to both design and develop and a website, but in the long run, he will have to chose one and stick to it if he wants to make it. In the professional world of web development, designers usually don't go near the code, and with a reason. If he is artistically inclined, then designing is good, but coding will be a distraction. If he is technically inclined, then designing a proper website will be too hard for him. He is better off just buying (or downloading for free) a PSD template and using it instead.
No one really builds raw HTML web sites anymore. Just about everything out there is run on a CMS of some kind. WYSIWYG tools will only get you so far since you'll have to break up the code into discrete chunks for inclusion in a set of templates anyway.
However, when trying to play with ideas and iterating over many different concepts, WYSIWYG tools can save a lot of time. They're good for rapidly creating code mockups that you can then look at in an actual browser (photoshop mockups just don't cut it these days). A good responsive prototype will still require some hand coding because no WYSIWYG editor out there right now is even remotely caught-up to current best practices, but they can still make quick iteration over visual concepts go a lot faster than doing everything by hand.
Starting a set of mockups and design concepts in WYSIWYG is fine. But when it comes time to actually build your site, you'd better be working in code or you'll end up with sub-optimal results.
(Posting AC because I'm at work and don't log in, not because what I'm about to say is controversial...)
If you use a Mac, get Espresso (free trial version available to test it out). I switched to it a while ago and it's a beautiful blend of hand-coding and fantastic WYSISYG preview. It's a wonderful combination of simplicity and power, imho. After using it on some personal projects, I got my company to switch to it as well and I will not be going back to Dreamweaver unless forced to do so. I highly recommend it. My two cents.
Use a Web CMS (Wordpress or Drupal) and pickup a book on building your own theme. Using an IDE would probably be the most sane approach. A lot of the starter themes supplied are already setup pretty good for SEO and some are even on their way to Section 508 compliance. This lets you concentrate on design and functionality (through add-on modules) without reinventing multiple wheels.
Save the handcoding for a hobby -- just like I save screwing with old hardware as a hobby (as much fun as my IBM AT is to play with) -- use modern tools and a modern approach to do real work.
But the first step, should be what are the customer's requirements and figure what tools best fit that job.
In the real world, you don't always get to pick your assignments or your editor.
If your son must work with an editor, he needs to know what type of output it produces. He needs to be able to sit in front of any tool and use it. His preferences are different from his skill set. His preference is for hand coding, which is good. His skill set should include his field's popular tools, because that's expected of him as a professional. He will be asked about what would be best, and he will need to actually be able to explain the pros and cons of both tools.
He'll also be working with existing sites, and handing off his work to others, and even working on contracts where he doesn't get a choice. If his client is an overworked Dreamweaver site creator, and he needs a site pumped out in Dreamweaver because someone else will maintain it, then clearly hand coding won't work. If he's maintaining a complex legacy site, most likely he'll be hand coding.
The key here is that the real world isn't one way or the other. It's a messy mix of both and neither.
First a note "When you write: WYSIWYG editors" i asume you talk about using them as graphics designers with drag/drop and not just as fancy html editors.
First: No I don't think there is any value in "knowing and using WYSIWYG editors" if you already know html. If you know html then writing html is at least as fast as using a WYSIWYG editor. But there are really 3 reasons that most sites are not made with a WYSIWYG.
1: What happens when the architect want to edit the text on the site, or want to add an other page to the top menu? Then you need a cms system, and converting a handwritten html document to a cms theme is relative simple. Converting from WYSIWYG to a theme is hell.
2: Javascript: If you want to apply any simple javascript transformation such as "read more", enlarge image on click. Fade part of the page down or anything else, then doing that on the WYSIWYG is very difficult, because you don't know how the dom look.
3: And to make matters much worse. The current implementations of WYSIWYG sucks. It's like the software developers have accepted that there software vil not be used to do design of highend websites, so they have given up any quest to produce valid small and valid html. And they miss the features such as third party cms system theme integration which would actuelly make them usefull.
Then I scrap it and code it manually once I know how I want it to be, I can change my mindset and work on fuunctionality.
I find it's very difficult to be productive when switching mindset again and again so I make sure I do it as little as possible.
If using the GUI tool saves you time (or other costs) over the completely lifespan of the content produced, go for it. (An example might be a party announcement that's viewed by three dozen people for a week and then never needs to be seen again.)
If using the GUI tool would save you up-front time while designing, but would increase the cost of maintaining or updating the site, use it for prototyping but not for the deployed version. (Examples are easy to imagine, especially if you collaborate on the design with less technical people.)
If using the GUI tool wouldn't save you any time at all, then mess around with it in your spare time so that you know what to expect when you encounter others who use it, content produced with it, et cetera, but don't use it on real projects (or, not unless you have spare time and don't "bill the customer" for the extra time you're burning). (Heck, you might spot a way to build a more useful GUI tool that makes you filthy rich.)
Web professional here. We hand code everything. A design tool might be fine for a one-off (IF you can get everything to look right in the tool!), but it doesn't allow the same control hand coding does. HOWEVER the main thing is one of maintenance. ANY web site that is the least bit popular will go through changes. This is much easier in a human written piece of pain html.
Hand written pages are lighter (IE: Smaller. That matters on a busy website).
Hand written pages can be written to be fully www3c compliant; I have yet to see a tool that can do that.
Also a lot of web frameworks use some type of templating system. Those are written manually.
I don't know where you live; but tell your son to pick up a programming language and a web framework. Two good ones are Ruby on Rails and Python with django.
Here in Atlanta they are dying for decent Ruby developers! Even if he is in high school or college, picking up coding at $50/hour beats working at McD's for $8.50...
Hajo Monogamy: Belief so strong that millions of people end perfectly good relationships in order to start a new one.
There's always a tradeoff between doing a job well and doing a job quickly, and clients generally want something in the middle of the spectrum, i.e. they aren't willing to pay through the nose to get it perfect when they could get something "good enough" for much less. If you are doing a site that's getting millions of hits a day, you might want everything hand-coded and optimized; but bandwidth and processor time is cheap compared to the labor required to optimize a website, so most of the time you're better off quickly throwing something together that works using an editor. The less hours you work to get the job done, the higher hourly rate you can charge: the clients will still end up paying less overall, and you'll have more time for other projects.
Twitter Bootstrap and the likes are the way to go IMO. Even though initial creation time might be a tad faster with WYSIWYG tools, it's a pain to AJAXify, optimize for speed and size, request count and maintain in the longer period of time. It is also almost impossible to use diff tools and source version control software on machine-generated code. And, everyone that would like to modify the page needs an expensive piece of software.
Design tools: worthless
Hand coding: priceless
I don't want to sound rude, but C# is for literally retards... Tell him to learn C and C++ so that he knows something about programming...
If you ask on /. the battle for editors is already lost. After all most people here use Linux and are fans of the command line so it is obvious that they will be anti-WYSIWYG tools.
I personally believe visual editors are really helpful and an IDE (as opposed to Notepad++) is a must.
Back in the day when I was in my first semester of computer science I tought that the language you picked was everything, I even egaged in "religious" war in forums where all did was show up my ignorance. Understanding the computing model behind most modern computers (Von Neumman machines) and the set of abstractions that industry uses to modularize software components (OO, actually a computing model all by itself) is sufficient and necesary to become an apt programmer. If he taught himslef C# Java should be no problem, C, C++ and Objective C should come with a little more effort throw in a little formal education and he can become one of us morlocks writting and supporting the automatized logic infraestructure of society as a way bring bacon home, or if he is really gifted he can become of the choosen ones that add a little to the catalogue of verified mathematical truths.
I use Dreamweaver as a better editor. I don't really use the WYSIWYG part of it but all the nicities like templates, editable regions and links management. When i create a new website i go generally in manual coding and define where my editors could update the page with the editable regions and stop them messing with the code of the page structure (but they can use the WYSIWYG features of DW for their editing). The templates make it easier to do changes globally in the website and the link managment reduce greatly the risk of broken links when moving/deleting things.
There comes a time when every son surpasses his father. Sounds like it's already happened for you.
I think of it like the falling green code in The Matrix. Once you really know what you're doing, you can look at HTML and see the page itself. I don't even see the DIVs, all I see is...blonde, brunette, red-head...
good text editors let you do this too. i use textwrangler on os x, and it's great for directory find and replace.
Rethink the question in these terms: is writing code in C++ really coding, or is it only coding if you write it in assembly?
I'm being deliberately provocative here, but I think it's worth reframing your question in this way to see the what you're really asking. If you are writing a huge application, you're better off writing it in C++, and only tweaking things in assembly when you need performance.
In a huge website, you're really better off using a CMS like Drupal, and tweaking the HTML and CSS in your templates. To do this properly, you really do need to know HTML and CSS cold; but you shouldn't be spending all of your time on a large website in the code editor.
Remember - the perfect is the enemy of the good.
For a small site with limited functionality WYSIWYG is probably fine. A bit more complicated and WYSIWYG with some hand customization is also fine. But if you were building slashdot then handcoding is the only way to go. All that will happen with WYSIWYG on a big site is that you will take X amount of time to be 90% done and then you will fight the code for 2X time and then redo the whole thing by hand in 10X time. Or worse without a complete redo you will end up with a spaghetti bastard that never really works.
I agree with many that hand coding a site makes a lot of sense especially when a bright person can innovate and do things a design tool does not understand. A tool that can handle basics through many hand coded iterations would be great, but I have not seen an example of that yet, especially when using JQuery and the like (putting down a graphical div is pretty meaningless). That being said, I use Visual Studio (VS) do do all my JS debugging, and also use it to look at DOM objects as well as JQuery objects on the fly. Things like breakpoints, object inspection and call stack GUIs help me out quite a bit. I am not a VS advocate per se, I just have it and it works well. Other plugins and tools that provide the same benefits are fine I'm sure.
Because C#, Linq, the .NET Framework, Visual Studio and the surrounding ecosystem of developer tools (RedGate, Altova, Devart) is better than everything else.
... but what I really loved about Dreamweaver find and replace tool was the way you could conditionally setup when to replace text and when not to... and to use wild cards to only replace certain pieces of code, all in a very user-friendly interface.
I mean, you can do all this with most S&R tools if you're very familiar with regular expressions, but I'm not, and I find them very hard to parse. Dreamweaver let me see the search visually and in comparatively plain English, which made it very easy to troubleshoot. It was fantastic.
One gig I spent most of my time using Dreamweaver to scrub HTML code in documents that were imported from MS Word into Frontpage. As soon as I figured out everything I needed to remove in one document (admittedly that took a few hours) I used Dreamweaver to create a huge search and replace action that I then pointed at a directory and let run for an hour. Problem solved. They'd given me a week to get it done. :)
Eviscerati.Org: All Hail the Eviscerati
To put it bluntly: your son knows what he's talking about and you do not. He is on the right path and you are unwittingly sabotaging him.
I've been developing for the web since the 90s, and in all that time, I've never met somebody who works full-time as a web developer who does not hand-code. The "WYSIWYG" editors are a last resort for people who do not know how to code. If he wants to do this professionally and he follows your advice, he'd be turning himself into a laughing stock.
What value? You say there's value, but you don't say what you think it is. It's not getting a job - I certainly wouldn't hire a "developer" who used these. I've never needed to use them myself in almost 15 years of working as a developer. Nobody has ever asked me to use them. So where's the value?
Bogtha Bogtha Bogtha
Most developers I know myself included would never use WYSIWYG for anything other then prototyping layouts. That said I typically work with Dreamweaver in code view largely because it has decent site wide search, has pretty decent navigation features, supports subversion and handles code syncing reasonably well not anything I would pay what it costs for but since it was a company purchase and it does the job good enough not to piss me off, I use it.
"I don't necessarily agree with everything I say." - Marshall McLuhan
There is nothing wrong with using high-level tools rather than, every day and every hour, getting bogged down in the details. In a basic sense, at first you (rather than your son) appear to have the right idea.
But you have to use the right tools, and the fact that you would recommend "visual editors" or use the absolutely web-alien acronym of WYSIWYG, suggests you don't know what the right tools are. And guess how you learn what tools are good: by learning the details that you hoped to not get bogged down in, and letting your self get bogged, even if briefly. That is the only way you will ever see the patterns which cry out for being generalized. If you don't do that, then you will never know what the problems are, which tools are intended to solve. And not knowing that, is what leads to people pounding in screws with a soldering iron. Or, in this case, using pseudo-WYSIWYG editors to write web pages.
If he's hand-writing web pages, then he still some day may get there. You, OTOH, are actually further, because you thought flexibly about using tools rather that doing everything by hand (good!) and took a step, but in the wrong direction (away from leveraging power, toward a more labor-intensive approach).
"Believe me!" -- Donald Trump
The closest thing I use to a "website design tool" these days is jsfiddle. Hand-coding but with a tight loop between editing something and seeing how it looks.
TROLL ALERT..
The only thing that really makes any sense from your comment.
"learning OOP goes beyond the syntactical sugar of the actual language."
The true language? Sure, whats that; Assembly? Oh were you referring to C? Or how about B?
Fact is: Code the way you feel most comfortable/best results. Be it an IDE or basic text editor. Learn the new 'languages', they help with faster development. HOWEVER, it is good to know at least one lower level language, just in case. Most important, dont limit yourself to one market by excluding MS based tools/languages as the troll suggests.
HAHAHAHAHAHAHAHAHAHAHA...*gasps*...hahahaha...ahaha...when can I buy your DVD?
Seriously, I've yet to see a WYSIWYG that did anything but create timewaste by having to first learn it's interface then spend time getting around it's interface when it comes to the inevitable real world scenario requiring you to do things the WYSIWYG designers didn't account for.
I do however love IDE's and use Aptana Studio 3 for Rails, PHP and HTML5 development. With that framework, I use HAML to speed up my HTML generation, since it's a nice short-hand format that produces compliant HTML and XHTML and SCSS that allows for the use of mixins, functions and variables in CSS, as well as coffeescript for Javascript.
Yes, all these things have to be compiled, which is no biggie and I notice the time savings by using these shorthand syntaxes with high reusability and environment integration are indeed significant. And these things DO NOT require a specific IDE, they can be installed as commandline tools via Node.JS and some quick helper shell scripts can be created to handle the compiling or you can use tools like grunt.
Hear me out before your dismiss this. I've done quite a bit of web design and prgramming, which as most of us know actually is different. I tend to use a WYSIWYG program (Dreamweaver) to set my canvas (ie open tags, headers, etc) and then proceed to hand write both my CSS and my actual HTML/PHP while watching it evolve in the design window. This means less time refreshing a browser window to watch progress and evolve my design and more efficient coding, for me at least. I think there are benefits of both styles and it seems to me that those who focus solely on one style always miss something whether in design or code efficiency.
For simpler static pages, a visual editor or CMS will probably be faster.
For anything complicated, you'll want to hand-code. The people that write "web applications" with fancy client-side behavior, server-side databases and things like that are going to be hard-coding everything.
It's like the difference between being a dental assistant and a dentist. They're two different jobs in the same field.
The smaller sites that you can throw together with Dreamweaver or a CMS won't pay as well, but they'll be easier to do and it'll probably be easier to self-employ. If you learn how to code instead of point-and-click, you can do a lot more and make a lot more money, but you'll probably end up doing a lot of it on a team.
YMMV, naturally. For me, I'm a software engineer, so I'm more comfortable coding. So much so that I hand-code whenever a small site design project comes my way. It's never been worth the effort for me to get to know any of the WYSIWIG stuff
WYSIWYG write awful code. Hand coding is much better.
Teach your son a lesson, let him make web sites in notepad.
He will learn good things from the practice and when he gets tired of doing things in a gratuitously time consuming and repetitive way he will learn a WYSIWYG tool.
A child learning basic skills with a screw driver and an erector set is a good thing. Eventually, if that kid goes into a blue collar field s/he will use a power screw drive if s/he is bolting things together all day.
It is the IDE I chose to use and has worked quite nicely. I can edit HTML, CSS, and PHP files like usual and easily sync with SVN. Still, I more often use TextPad and Toroise SVN and achieve the same results - keeping in mind I am doing fairly straightforward things (and I am sure I am missing out on all sorts of cool IDE stuff).
When considering WYSIWYG tools, CMS systems, and language framework suite, it really comes down to this:
Is the end-product something you want your name on, when it comes to security, and when it comes to someone else, or even yourself, coming back to maintain it later. Assessing the security of code spit out by a tool, especially a closed source tool, is very difficult and time consuming. Sometimes you can get by on the efforts of others who have gone before you and tested the waters, but then you have to assess the wisdom and professionality of the crowd that is giving that tool a thumbs up -- there are plenty of vibrant communities of people writing awful and insecure code because nobody in the community cares about security or maintainability.
So if an opensource tool, or a closed-source tool that has an open bug reporting process, looks useful, you have to spend time looking at the mailing lists and old bug reports to see what issues were fixed, how long they went unnoticed in the code, how casual the attitudes of the developers were towards serious problems, and how casually bad code might have been allowed to enter the codebase. Also you have to look at whether the APIs presented by the tool are constantly in flux, or whether newer APIs are properly chunked and rolled out with ample consideration towards creating a smooth upgrade path via backward compatibility.
Again, this is a lot of work -- as much as learning a programming language. The reason you would want to do it is if you really think that you'll be designing a whole lot of websites over your career and also will be free to choose your frameworks, rather than being forced into using the PHB's favorite. In that case, a person who has both coding competence and can benefit from a stable, effective, and mature toolset will run circles around a coder that invents everything from scratch on every project.
However if you will be working on PHB's terms, you are best off sharpening your raw coding claws, because about the only thing you can rely on to stay constant is the availability of a good text editor. PHB's change their minds a lot and like to hop around to the next greatest thing.
Someone had to do it.
I've been doing web development for over 15 years, and from my experience, the answer depends on what it is you are building.
WYSIWYG editors (dreamweaver etc...) are good for churning out simple, targeted, cookie cutter sites (e.g. online catalogs, blogs, forums etc...). You can do them fast and quickly. They are good at building straight forward templated designs. WYSIWYG editors are great at abstraction and getting things up quickly, so if you don't care about how it works "underneath" and just need to bootstrap something in a hurry, they'll do just fine. Where these tools fail is in flexibility and maintenance. If you want to target more than one or two browser variants and meet CSS, usability or accessibility standards - it's going to be a hindrance rather than a help to use a WYSIWYG editor. Code produced by these tools is always a nightmare to maintain, it's usually a garbled mess and littered with unnecessary junk. WYSIWYG editors are great if you "go with the grain" and do everything the way the tool is designed to do it, but the minute you need step "outside the box" and do something even just a little different than the way the tool expects it to be - you are in for a world of headaches and unnecessary work.
If what you are building is anything like a large complex site or a real web application, or if you are breaking ground on something new that hasn't been done before, then handcoding is definitely the way to go. Notepad++ is a fine workhorse for such a situation, with all the available plugins it can rival some of the best IDEs out there. If you want to learn more about the underlying bits and pieces, then handcoding is the way to go, there's no better way to learn. If you are working on new and innovative ideas, you really do not want to be hamstrung by using someone else's idea of how things are supposed to work.
In short:
Use WYSIWYG for
Use handcoding for
IDEs get in the way. The only benefit is code completion, so just use Sublime or Coda. Notepad++ blows dong. Get a Mac, XCode blows them all away. It uses graphical crap only for what you need, and then gets out of the way.
I run a small web development company with about 10 employees. All our developers use Notepad++ (or equivalent) and our designers use Photoshop.
I've coded even 70 page websites by hand. It's just not worth it to use any tool. I've never seen an autogenerated code in my entire life that is remotely useable. One lonely nbsp inside of a paragraph tag and it's a piece of crap as far as I'm concerned. I do use the link management and other nice tools in dreamweaver and the realtime preview with split view but other than that, it's hand coded.
If you get super fast at typing, there is no GUI in the world that can set the height, width, border, and background color faster than typing it all inline inside a style tag yourself.
I spent the last 10 years sitting in front of Visual Studio all day, writing C# (since 2002) and LINQ (since 2008) and you are just wrong, so incredibly wrong. It's only better because you paid lots of moolah for it and it makes you feel all fuzzy. You know like cocaine. The recruitment pimps also pay better because you're tied into the ecosystem.
Give me C, Valgrind and Vi and I'll run rings round anything the Microsoft ecosystem can do, but I'll earn half as much and I won't get my warm fuzzy feeling.
Now there's the truth.
If you are doing a small static or mostly-static site then a templated website created in Dreamwaver or similar is a totally viable approach. There is less to go wrong than with a CMS but it offers similar benefits in terms of content creation, so long as there is only one content creator. Nothing more complex than a single page should be done without a template or a CMS, because otherwise you're just wasting your time for the sake of purism.
"You're right," Fisheye says. "I should have set it on 'whip' or 'chop.'"
The answer is: NEITHER!
He needs to learn how to generate HTML, CSS, JavaScript, etc, as the output from some application, written in Python, Perl, Ruby, Scala, Java, Clojure, etc. Even Common Lisp or Erlang! Then, he can generate dynamic pages that respond directly to user supplied parameters.
Do you think that amacon, eBay, slashdot, etc., have thousands of developers coding pages by hand, or (horror) Dreamweaver? Of course not. Have him learn how to generate HTML the way the big boys do.
Back in a previous job at Boeing, I built a website (Intranet) for configuration control of engineering documents plus delivery to the shop floor. I wrote all the SQL, Perl and HTML with ....
vi.
Have gnu, will travel.
Hand coding web pages is like hand-forging car parts. Yeah, you might have a 1% prettier piece, but it's in a place where nobody will ever see it and you have to take on maintenance for it. Hand coding is for people that like that sort of thing, but as a supervisor I'm not going to let my people waste their time and my money because of ideological purity. It simply doesn't scale. My web app has an API, and dream weaver makes my people access it consistently, as well as reuse and version control parts.
Handcoding is the only loved-by-god sacred way, do not try to polute your web pages with unholly WYSIWYG or else...
I've used probably a majority of most web tools (WYSIWYG's too). I started out back in 99 building my first website using one of AOL's tools even. Dreamweaver before it was owned by adobe, bluefish, notepad++, expression web, etc. About 5 years ago I found myself ditching even Dreamweaver (mind you, I used the WYSIWYG editor of this for maybe a month when I first started, and then stayed in coding view only for the rest of that time), and moving over to Visual Studio for web development. I specialize in front end, and VS is not a front end geared tool. Now days I'm using Eclipse with Aptana, and Git to the moon. It doesn't matter what languages you know, how fast you learned them, what order you learn them in. What matters is how you utilize that knowledge and experience to make your next project better. How do you make the next one better? Learn best coding practices and optimization techniques. How do you learn best coding practices and optimization techniques? Well you can start by ditching the WYSIWYG's, permanently. They're rubbish in the professional community. Also worth mentioning: I do my fair share of hiring. When I'm not hiring for assistance on my own contracts, often the companies and clients I do work for will ask for my recommendations. If you walked in and told me you used Dreamweaver and liked the WYSIWYG, I'd probably laugh at you, then about you as you walked out the door. Give it 5 years and add an extra 2 years of debugging and correcting some BS someone else created using a WYSIWYG, and you might then know what I'm talking about. The only time a WYSIWYG editor should be used IMO, would be a case of something like TinyMCE in the admin side of a CMS for derp-face end users. Even then, they never seem to be able to find the paste-from-word tool to strip out mso bullshit. Your best bet is to learn to code and forget WYSIWYGs even exist.
Well, I make a living (and a very good one) porting java apps to C#. I see the world opposite to you - since oracle bought sun, companies are running away.
I use a WYSIWYG editor all the time. I have Notepad++ open in one window, and Chrome in the other. I right click on any element that shows up incorrectly, and select "inspect element". I can then edit it until it's right, and preserve my changes in Notepad++ in the other window.
I've never heard of Dreamweaver though. The name sounds like this program I used to use ten years ago that caused endless nightmares.
The days of hand writing all HTML and CSS are long gone for 90% of the world's website. Go use a framework - Wordpress or Drupal or Joomla or something. It'll look a hundred times better than you could hand code and if you do it right, you'll be done in a few hours. It's an informational website, so you should spend more time on making it look pretty than anything else.
----- obSig
I prefer controlling the coding but use an HTML editor (not WYSIWIG) to reduce they amount of keyboarding. I still have complete control of the code and it is easy to read when done. A decent HTML editor will also have the ability to use a split screen to see the results of your work as you go. Coffee Cup HTML Editor works for me, there are other good ones.
Sorry for the wall of text, I did put some line breaks in that! Also worth mentioning, have your kiddo look into stuff like LESSCSS or SASS. http://lesscss.org/ You won't see this stuff out of the box (maybe some limited support with plugins) in any modern WYSIWYG, but its awesome. Most modern websites are leaning JS/jQuery heavy too, which was part of why I made a decision to switch over to Eclipse and give that a crack. Aptana Studio can be added as a plugin, and it makes IMO 'HTML5' development that much easier. See http://www.aptana.com/
Know the code, never presume any tool knows or uses it well - doubly so when you are new to the language yourself. GIGO is never more true than with the web - if the architects' site is at all important, or the designer's reputation, do it the right way or step back and let a professional handle it. The architect will likely want a professional appearance, standard code, support for browsers and search engine ranking (this last bit is almost certainly beyond any person new to writing code for web sites). Honestly, I think you'd both be better off doing some casual projects of your own before taking on a professionals' web needs.
Best wishes to you both.
-a hand-coder of web sites for 20 years.
My high school computer engineering teacher always reminded us that it's easier when you have the right tool for the job. Using a Philips screwdriver to pry a paint can open isn't going to work very well.
In the same way, visual editors, text editors, debuggers, etc. are tools. What you, and your son really need to ask is given a situation, is which tool works best for the job? It's not about inferiority, it's about recognizing in what situations does it have its strengths, and other tools have their weaknesses.
You can expand this mindset to management as well, but you may not want to refer to your employees as tools. A good manager will recognize the strengths of his/her staff and use his/her employees appropriately. If an employee is under performing, it's quite possible the manager is not using that "tool" correctly (not always true, but good managers will ask this). Sounds like your son might be progressing down the entrepreneur route, so this would be a good lesson to keep in mind.
Baver
mod up
I object to power without constructive purpose. --Spock
Screw comfortable, if you want to be productive you will eventually need an IDE.
I object to power without constructive purpose. --Spock
Netscape Composer 4 lyfe.
DRM: Terminator crops for your mind!
I teach at a design school so I hear this debate all the time. Most of the serious web designers I work with will give these things a try but none of them live up to their expectations. Adobe Hype is the one that's getting a lot of attention at the moment. The GUI tools can be really good for prototyping and now that "Apps" are mostly HTML5 etc. It's pretty useful for a designer who just wants to whip up a quick click-dummy that the customer can poke around. But in the end, if this is any kind of serious site, you will need to open up an editor and write HTML, CSS and JS.
Hasn't this kid ever heard of vi? What is the world coming to?
I've been doing web design and development for somewhere around 10 years, professionally (professional meaning I got paid a liveable amount to do it). I used to be in the same boat; I avoided anything but a nice syntax-highlighting text editor for years. About 3 years ago I started using Dreamweaver more and more, though (mostly at my day job). Its debugging and large site management tools make it a real burden-reducer. I don't use any code generating abilities, preferring still to hand-code my work, but Dreamweaver does simplify it when I'm developing and maintaining multiple large websites.
When I'm doing personal stuff, I actually use Geany quite a bit.
Call me Crazy, but Shirley he was being facetious for the sake making the same point you have, but with a tiny bit more sarcasm. American much?
I've been a web developer for 16 years now and I can only agree with your son on this. The markup written in HTML is way better handled by hand, as is the CSS. JavaScript is where the logic comes in. It's a programming language like any other and you as the coder could benefit from a IDE that allows refactoring, debugging, code completion etc, but I haven't seen anything yet that I really liked int his regard. There is also Dart, a replacement for JavaScript that fixes many of its problems, that comes with it's own IDE, which is way more full-featured than anything I've seen so far for JavaScript itself. (Dart is then compiled into JavaScript so that it runs in all browsers.)
I have worked on many a website, and I don't care to spend time working on browser quirks and CSS issues. I prefer to download Wordpress, install it on the hosting server, point to the database, build the site skeletons, then enable the customer to edit their own text and photos. If you don't own a company with some interns to help do the maintenance, that part is worse than the design itself.
In Wordpress, the time is spent picking a theme, customizing the colors, writing the content, editing photos, and the more meaty stuff. Less time on the code itself. It has a WYSIWYG editor, or you can write the pages in HTML. Then add the pages into the Menus and the page can be done without rewriting a bunch more code in the future. I turn off the blogging feature and hide the blog menus mostly, because Pages are more like web sites with static pages. The word-press add-ins are handy too, but many are buggy.
Good for your son; he well on his way. But I would suggest getting better tools, such as a syntax-sensitive editor (I don't know how he can stand Notepad). I suggest that he look into other FLOSS tools like GIMP and Inkscape. And learn how to use git!
Don't stop where the ink does.
Tools like Dreamweaver and Frontpage used to (kind of) work in the 90s, but the HTML they produce is dead code because it's such a mess that nobody will ever touch it. It's throwaway HTML. Now these programs are long dead and buried. They were only for non-coders (designers and homepage creators) anyway. If your son knows how to write HTML, more power to him. I hope he never uses a WYSIWYG tool. The only thing that makes sense is text editors with syntax-sensitive autocompletion and helper macros, but you don't really need that.
If he chooses to play with a template based framework, avoid Slash. Slashdot might be fun, but the open project is long dead and unmaintainable on any modern distro.
What You Get from these tools is only What You See. No structure, no semantics. Good luck with search engines. And don't even think of reading/editing the code they produce.
The one that allows you to do the most work in the shortest amount of time.
The tool may provide you WYSIWYG functions; but doesn't have to in order to be useful.
Useful functions that I look for:
Multiple files open
Find between files
Find the defination of a function
Version control & tracking
Code formatting & highlighting
Code intellitype functionality
"Teach a man vim, and he'll never want to use..." ...a computer again.
Every decent editor has a way to view the code, so there's no reason to feel constrained to any sort of generated code. As a developer, I am perpetually in a mixed mode. It is quite valuable in terms of navigating complicated pages to find that one random label for a text change, as well as seeing how a change to the corresponds to the markup affects a page immediately. In addition, decently built GUI's can prune down innumerable options to only things that are relevant to the task at hand, versus an auto-complete of 800 options on an element.
That said, I rarely to never use the drag and drop ability of the GUI editors, as the code they generate has the most god awful formatting and tends to have needless bloat.
Millions long for immortality who do not know what to do with themselves on a rainy Sunday afternoon. -- Susan Ertz
When I developed our enterprise web application for allowing our users to submit requests right into our CRM application I used Visual Studio. The code behind would be impossible to use since its a propitary CRM and no documentation availble to me. Its hard to know witch functions there is without Object Explorer. And I can tell you VS Nuget are GREAT for producing functional code quickly. I dont have to care how to make something work someone have already done it.Im a coder and not a designer so i like funtions and functionallity. I just add our corporate CSS theme to the application and standard compliant Nugets. For me VS helps add complex funtionallity with ease. Want captcha, charts, texteditors and paypal/facebook integration? There is a nugets for that. It does not matter if your code is HTML5 is compliant the browsers are not. Use JQuery to help you get good looking webpages. Dont code it your self, Microsoft/Google add code to jquery to help your webpages functions good on their browsers. /Fredrik
Very few tools integrate HTML, JS, CSS, and a back-end scripting language extremely well (VS is nice, other editors not so much). And Chrome's dev tools are top-notch, and outweigh *any* existing comparable IDE's for what it does. He's very right in choosing the tools he has.
To get philosophical, the best IDE is the one your son uses most efficiently. If that's notepad, vi, emacs, or carrier pigeon, then let him be.
I sell drupal sites for fast deployment for less, while I make my own projects on my own time using various text editors like notepad+. So as a hobby, your son should keep doing what he does. But as a job, customers usually want everything they see on every other site: login system, blog, forum, image uploads, file uploads, statistics, email notifications, captcha, twitter facebook integration, comments, site administrators, wysiwyg editors, ajax, browser compatibility, sql injection proofing, etc.. and they want it all working like a charm like tomorrow!!! Anyway, my final advice would be not to teach him computing at all, it's a dead end, cheap job, only to be seen as a hobby.
the perfect tool!
No one has mentioned BlueGriffon. I believe one of its aims is to create good/standard code.
Has anyone had experience with it and the code it creates?
I was with you up to l that vi nonsense. Emacs FTW!!!
0xB315AA8D852DCD3F3DCA578FD2E0BF88
Yaaah!!! 5 points for Notepad++!! :-)
You have to be partially fluent in Dreamweaver type tools because soon or later someone will ask why you don't use them...
Things that people forget to look at
1 - What does the employer/client want you to use? The company may have a method they want you to use, for various reasons that you must adapt to. Or a client may want to have it in a method that they can modify later, with some tool. There may be standards or policies guiding the development process as well.
2 - The site may have special requirements, eg. database driven, etc.
3 - Legal Liabilities, have you made sure not to weaken the security of the site, through bad coding practices. Also if you copy code from another site, is there any copyright claims attached to it.
I know I am forgetting a great deal more, but the biggest thing for me is to gather requirements, what do they need, and want, and what is the end user suppose to see and get from their experience. Once you have enough information, you will know if you need to use something like dreamweaver, or you can code it yourself, or you should use some off the shelf software to provide the user experience.
When developing web pages, it's good to "rough up" a design using graphics tools and possibly even a little dreamweaver. But in the end, these tools are all broken.
These days, until a single "non-living" standard can be agreed upon and put into use across the board, then web development tools are all going to lead to broken code in one way or another.
So as with anything else, there's "design" and then there's "construction." Create your design with the tools you love to use. Then, set it aside and base your construction from the design and project specifications.
This is how you get both good design and good functionality.
I favour emacs too. I also know enough vi to get along when working on a machine with vi and no emacs. And don't belittle those who've decided to go with vi as their primary editor.
Take all this advice and throw it out for a moment. When you have a site that needs done, think about what development tools you 'feel your oats' with. Those are the right ones...for this project...for now. I have always used a smattering of hand-coding tools and a smattering of visual tools. Sometimes I just need that polished slick look I can get quickly from a visual tool, not always a whole platform or IDE but sometimes just a freebie, or even something brand new. The most important thing is, if you are going to be doing this by yourself, as a sort of self-made consultancy or what have you..summer money while you are attending college etc. then do whatever it takes and use whatever it takes to get the job done the way the guy with the MONEY wants it done. Sometimes I'll use a visual tool like Dreamweaver or Artisteer just to get a quick design and then use this as a template and code the entirety of the site by hand. Sometimes I use Notepad++ sometimes I use an IDE. You, after a dozen or two middle-of-the-road projects, will discover those development tools that just simply say 'I can do anything with just these 4..now I'm set' ...until HTML5 undergoes mitosis and now you have two standards to deal with...but this program only supports that one and that IDE can only do this....
Point is...development is an ongoing...well...development. Tools and technologies will change (rapidly)
"Evil man makes you kill me...evil man makes me kill you..even tho..we're just families apart.."
I agree that handcoding is better unless it is a simple project that can be done by someone internally... Reading and analyzing WYSIWYG page is a PITA... And versioning and analyzing past changes in WYSIWYG is a PITA++
unless your output is merely on a browser... then the only real handy feature is syntax highlighting (which gedit does quite nicely), and for those that despise php, consider that assp is infinitely worse. i also do compiled languages as well (delphi is the most efficient environment as far as I'm concerned) but php is good for quick and dirty tools that don't have enough fat in the budget for fancy guis.
I'm sure there have been many different editors discussed but for just pure HTML editing I like HTML-Kit. There are several listed here http://www.techsupportalert.com/best-free-html-editor.htm#htmlkit but I've found it very easy to use plus you can see what your code will look like in different browsers. If he wants to do C# programming though I would recommend Microsoft's Visual Web Studio.
I don't know why anyone would want to hand code a bunch of tables.. dreamweaver also does more then just the code, it checks all the links and it will update links if you change the file structure. I hope he has at least tried Dreamweaver.
Is there an Expression Web Express edition? Or is it Express Web Expression? Even if there isn't, MS ruined the future possibility with that name. MS's naming has sharked the jump.
Table-ized A.I.
For small websites hand coding is an option, but for serious commercial work it has major drawbacks.
#1 - The Internet is no longer a sideline marketing strategy. Marketing people (the guys who understand the customers) need the ability to build and experiment with their own websites. They also need to turn out new web pages in minutes rather than days, and this simply isn't possible if they have geeks doing everything for them. You don't need to be a type-setter to use Microsoft, and similarly businesses need the ability to change websites without learning a bunch of web protocols and technologies.
#2 - Page load time is becoming a critical factor for commercial websites, and extensive research shows it has a direct effect on sales. It's so important that Google now include page load times as a factor in their page rankings. It's rapidly moving from the "nice to have" into the "absolutely essential" category for serious any online business.
Effective Web Performance Optimization (WPO) involves dozens of optimizations that often turn pretty hand-readable code into complex, unmaintainable jibberish. Getting a page to load in 1.5 seconds is easy for simple pages on small websites, but optimizing larger projects requires CDNs, browser-side caching, late image loading, minification, spriting, uglifying, and a bunch of other dirty tricks. There's barely one hand-coder in a hundred who know how to do this work, and it's a boring, time consuming process. It's not really a job for a human, and negates virtually every reason you hand coded to begin with.
#3 - Mobile devices are the new frontier, and businesses need to produce web content in an ever increasing number of formats. Responsive Design allows a single page to be viewed in multiple formats, but in many cases is a lowest-common-denominator approach that is a compromise on every device. Rather than create 3+ websites (desktop, phone, tablet), many users would prefer the ability to reuse 'pieces' of web code across multiple different device-specific pages.
To address these three challenges, there's a new breed of products coming out that allow programmers to develop widgets (containing whatever cool HTML, CSS, Javascript and server side tricks they desire) that can be dragged and dropped to create webpages using a Design tool. At publish time, the design metadata is then used to generate and optimize the production code, much like a compiler. Many of these widgets can be reused across pages, and across projects.
It works well for everyone - the marketing guys have self-service, and the programmers don't have to do boring "move it three pixels to the left" work.
Of course, some hard-code developers will always want to do it all by hand, and they'll justify it in much the same way as assembly language programmers criticized the first compilers fifty years ago - it's not as flexible, I don't like the code it produces, etc, etc... In reality though, when was the last time anyone on Slashdot read machine code?
Emacs is an excellent operating system - all it's missing is a decent text editor. ...Saaay, has anyone implemented a version of vi that runs in Emacs?
DRM: Terminator crops for your mind!
So much Dreamweaver hate. Just because an army of noobs and designers who have never programmed use it does not mean it's a bad tool. I put Dreamweaver in Developer mode and have used it off an on for over 10 years to work on all kinds of sites. Joomla, Drupal, tables sites, custom portals using JSP and JSTL, javascript out the wazoo, etc. I do not use the WYSIWYG view for anything other than to navigate the code on occasion.
I've always been happy with it an got my work done efficiently. Like most tools it doesn't do anything you don't tell it to do. It's not going to magically screw up your code while you sleep.
...GYWISYW.
Still find vim+browser+firebug more productive.
viper - http://www.informatik.uni-hamburg.de/RZ/software/emacs/viper/viper_3.html
A small piece of me weeps when I see this.
Let him do it as he wishes and stay out of his ways. Why would you want to argue and impact his talent by reducing his freedom of expression?
If he is smart enough to handwork code and debug in the browser (many do, on all levels, let be honest) but you feel you could not do the same without a visual aid or frameworks, it just proves evolution is working. Be proud and let him work.
Worthy response. I work inside the Microsoft ecosystem. But also know about many, many other languages. From Fortran and LUA to JAVA, Objective-C.
C# is an ISO standard. The parent clearly doesn't know the difference between standards and Microsoft products.
Bad programmers develop this way of thinking when you only know or care to know PHP/Java.
Yup, it's a windows operating system, masquerading as a text editor. Wonder why they never just rebranded it HURD...?
mark
Not to criticize the question, at all, but this is sort of a non-issue at this point, I think.
Namely, for the convenience of you and your clients, you really should use a CMS, not a hand-coded HTML site.
I would suggest WordPress, and further would suggest using Elegant Themes, for many reasons -- ET's recent themes are "responsive" to different screen sizes, including tablets and smartphones (which will comprise the majority of web traffic in 12-18 months); ET's recent theme designs are clean and have a contemporary look (which is especially important when you don't know exactly what qualifies as contemporary in web design, e.g., white-on-white); ET offers good support; their themes are easy to install and customize, including via innovative and simple forms; they are quick and convenient for you and/or client to update, which is essential for a website's success these days, and you don't want to handcode what will eventually be an unsuccessful site; with WordPress, you can link the site to social media accounts automatically, as long as handling a billion other tasks that can be handled via plugins easily and well.
And, make no mistake, just customizing a CMS based site takes as much time as designing an old, static, hard-to-update HTML site did in years' past. You just end up with something much, much more powerful.
That said, I still use Homesite 5 for offline coding/customizing chores, daily, but most coding these days is done online, via the CMS' online editors. Understanding basic HTML and PHP is very, very helpful, even with WordPress and ET handling much of the initial work.
So, for these reasons, I suggest you ride that wave.
try to convince him to start building everything in blocks and objects like all things, it quickly turns into a versatile cms if you really got the head for it. Being able to reuse his dabblings for different sites/projects with only minor adaptations should save time and can't be bad for ego. (im not a pro myself, it just makes sense to me that way and we all like playing lego don't we)
Free speech was meant to be free for all... how can anyone grow up in a nanny state ?
Leave the kid alone and let him work! You are obviously a skill-less moron so don't push your philosophy on your son who is obviously smarter than you are.
Your son can use whatever tool he wants. But he will use it in text editing mode.
Sublime text2 is my new aptana, apatana was my new dreamweaver.
Real web devs don't use wysiwyg's it's not going to work.
With an editor he will get code completions and svn intergration etc. That's why you use them. Not for wysiwyg shite