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
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.
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?
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.
Hand coding doesn't mean you don't use tools to do your job.
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
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.
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.
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).
I wish more websites were very basic. Too much Web 2.0 clutter in most of them now, that includes /.
Gopher is a sigh of relief vs. Web 2.0
Young buck is right.
It's a trade-off between speed and efficiency. The visual tools are faster for getting the page to look right, but horrible for the generated code. Hand coding takes longer but is much more efficient. The best of both worlds is to use a visual tool for the high-level layout, run it through an optimizer, and then hand-tweak the result for efficiency.
This turns out to be similar to the flow you'll experience "in the real world" working for a larger corporation. There will be a designer who uses the visual tool (if they make it past Photoshop) and then "throw it over the wall" to the developer who is left to clean up the mess. The developer will run it through an optimizer and then tweak the resulting code.
I will say that the Expression suite works really well in that it doesn't do horrible generated code and the tool allows you access to the underlying code. It's great for XAML, but it can do HTML, CSS, and Javascript.
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.
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
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.
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.
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
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 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.
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.
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...
I started out coding video games in C, then moved on to writing emulators in C++. These days I code in C#, and I think it's significantly more complex and elegant than C++. Pure C *can* have a simplistic beauty to it if you avoid the fucking typedefs, but C++ is the worst of both worlds -- too easy to lose track of what you're doing, and too abstracted to provide maximum performance.
OP is correct. The problem with WYSIWYG editors is that they don't operate well with dynamic content. They can work for dynamic content if you jump through enough hoops. But you are in constant danger of basically clicking the wrong button and destroying the flow of any logic you've put in, and having to rebuild . It costs more time to work with a wysiwig editor than it saves by helping in generating the design, unless you are doing an extremely simple page with no logic, and lots of design elements.
If the architect only wants static pages, or is using embedded Flash, for instance, to run the logic, then I imagine a WYSIWIG editor could work. But overall, I don't think there is a whole lot of value in him learning how to use those tools. To be fair I haven't invested a ton of time to be proficient in them, especially recent versions. As others have said, I think there are better IDE's than Notepad++, but thats definitely a matter of personal preference. I'd take Notepad++ over Dreamweaver any day.
Spending time learning a CMS, and how to integrate his code into that, has a lot more value than learning a WYSIWYG editor.
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.
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!