Are there drag-and-drop WYSIWYG editors for Web 2.0-style UIs? Do people ever touch raw HTML these days? What's some good starter (preferably project-based) learning material out there? Are the courses offered by Treehouse any good?
I'm coming from an app and games developer background, so while I'm well-versed in native development I have only a very vague understanding of what the web stack looks like.
For structure/content: raw HTML, or less commonly a language that compiles to HTML (Haml, Jade, etc.).
If the HTML is being rendered and served from the backend, you might use a templating language like Django's templating or Jinja (Haml and Jade also have these features).
If you are creating an application that does a lot of AJAX, you will also often use a JavaScript templating system like Handlebars.
For styling: raw CSS, or fairly commonly a CSS pre-processor like SASS, Less, or Stylus. Very often you will use a CSS framework like Bootstrap or Foundation to give you pre-made forms, buttons, grids, and other essentials.
For logic/interaction: JavaScript. Many people will also use compile-to-JS languages like CoffeeScript, TypeScript, or ClojureScript (in decreasing order of frequency). There are a lot of libraries/frameworks that can be used here. Most commonly you'll use jQuery and jQuery UI widgets. For more complex applications, single page app frameworks like Backbone, Angular, or React come into play.
Build process: For more complex projects, build tools like Grunt or Gulp to watch for changes to the filesystem and re-compile files (typically when you're using CoffeeScript or a CSS preprocessor), to package everything for deployment (minifying JavaScript, etc), and to run tests.
Packaging: Often you'll use a tool to keep track of modules/packages. These tools are quite different. Bower, RequireJS, Browserify, Component, and other tools occupy this space.
Often you'll use Node's npm to keep track of build process and testing packages!
Testing: For testing you'll often see frameworks like Jasmine or Mocha/Chai for unit tests/integration tests. For end-to-end tests you might see things like Selenium (run tests in a browser window). There are also test-runner frameworks like Karma.
Debugging: Chrome's developer tools (or Firebug/Firefox/Safari).
For someone starting out this is probably overwhelming. The important things to realize are that:
1) No one uses all these tools
2) Most of these tools are only useful for large complex codebases with large teams.
2) The most common stack is raw HTML, raw CSS, raw JS, jQuery, jQuery UI, Bootstrap, no build process, no packaging, no testing.
If you really like strongly typed languages, and want to try out a new platform, check out Google Dart.
1. An HTML/CSS editor (FireBug for FireFox)
2. Network Traffic Monitor (Foxmeter for Firefox)
3. Cookie Manager (Advanced Cookie Manager)
4. User Agent Switcher (for Firefox)
5. Modify Headers (optional)
6. Javascript Console
Those are your tools for debugging, writing some things.
Technologies you will have to learn...
1. jQuery
2. MVC framework
3. API/JSON content calls
4. AJAX
5. Cookies (same/cross domain)
To add to your list jsfiddle.net is a great tool for testing out small features and experimentation.
You'd be better served making a native app that integrates with a RESTful web api on the backend.
You still get the reach that the web provides, while having access to all the presentation and graphics goodies you get in a native app environment.
JS frameworks: jQuery, AngularJS, BackboneJS
CSS frameworks: Bootstrap, Foundation
and tons ready-to-use solutions on Github.
Treehouse was decent when it launched, and I imagine it's improved a solid amount by now.
If you're coming from a development background, you'll do fine.
If you're building true front-end apps, you're going to want to look at Angular or Node.
If the back-end does the heavy lifting, they become less important.
Node is a non-browser run time for JavaScript. Node has nothing to do with front-end apps.
I would have thought that writing raw HTML would be a bit like writing raw WinForms code these days, or writing XAML by hand instead of using the forms designer.
Note that's the narrow application of visual editors I'm thinking of here - laying out buttons, binding events to buttons, binding data to elements, etc; not the "create a pretty looking page and have it spit out horrible HTML" type stuff.
If you want to go WYSIWYG, I think Dreamweaver is keeping up fine with times and it's still one of the most complete tools https://www.adobe.com/products/dreamweaver.html
But these days thanks to the evolution of the web itself, a lot of modern online tools are coming out. For example check the power of https://webflow.com/ I believe that being these new tools "indier" and lighter, they have the chance to keep up faster with the new technologies and best practices of web design!
Of course the best is - before using these tools - knowing about what the best practices (in terms of code) those tools are implementing (if they are) in their rendered code. For example you should learn about how much Twitter Bootstrap [http://getbootstrap.com/] simplified layout design for web for since a couple of years now, and then maybe you will recognize those tools using it in the code they generate, and then you'll feel you can take over by yourself and further change things at your need. Another example is jQuery.
Also, in my opinion, some kind of new fundamental learning/building facilities these days are "developer tools" that come with browsers (Firefox and Chrome). For example check https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto... You don't know how much you can learn from using them!
But, If you want to get to know even more, and start a journey in a path of learning nothing worked more for me as than this little big interconnected learning path: http://www.bentobox.io/
Hope I updated you a bit with times, good luck! :)
- initially hidden
- meant to be rendered as part of a larger whole
- needs to be a specific element, have a specific structure, have a specific ID / class
- contains serverside code / include that renders additional HTML
- is actually a domain template language such as Mustache or Smarty that the tool may not understand
- is greatly changed by CSS (which may itself need to be compiled, such as in the case of LESS or SASS)
WYSIWYG tools usually can't grok the context of cases like that and if you try to use them, they end up taking more time than it would to simply write out the HTML oneself.
