I'm fairly new to this industry(8 months), and I still rely on Dreamweaver 's design mode to select the code that I want to edit (I use the code or split view while designing)- very simple, just click on the element that needs to be worked upon and the code gets highlighted in code view.
What I'm curious about is this -
Almost every forum that I visit gives a thumbs down to Dreamweaver and a Thumbs up to code editors such as Sublime text2, even though it appears(I'm not sure) that these code editors do not have a design mode. How do coders manage to edit their code or someone else's(if they're unfortunate enough to complete someone's pending work?). Often there are hundreds of lines of code.
If these editors do not have a Design mode, what advantages do they have over free text editors such as Notepad++? The design mode to edit code is the only real advantage that I've had, while using DW.
Am I learning html the wrong way? Am I missing something? Is there something these experts know and have implemented that I'm not aware of or not following?
Well, just like @JoeBrooks said, you can just set up your text editor and your browser to be side by side. Then, every time you update your code, just refresh the browser. There are apps/plugins to do this automatically such as Live Reload. Another way is to use the Developer Tools of your preferred browser to make live changes to your website (however, you'll have to migrate these changes back to your code editor). This is good for small changes. However, there is a app/plugin that updates the code editor's code as you edit the website in the Developer Tools (Developer Tools Autosave). Play with these ways and soon, you'll realize that Dreamweaver is too clunky and you'll start using other lightweight code editors! ;)
What about editing code? How does one edit code in a editor such as ST2? Supposing the page has hundreds of lines of code - how does one quickly find the exact div, para, ul that needs editing? DW's design mode allows us to simply select the element and the code gets highlighted.
(however, you'll have to migrate these changes back to your code editor). This is good for small changes. However, there is a app/plugin that updates the code editor's code as you edit the website in the Developer Tools (Developer Tools Autosave).
This almost appears like a drawback in other editors (if one has to rely on the browser to find the code to edit) as opposed to DW being clunky. Is there no other way that's built into the system?
I need to quickly find a way to practice on a different editor - I work from an office and plan to start taking home projects too - I need to find a good editor that's also reasonable on the pocket - DW's unaffordable as of now.
What is the best editor that's reasonable on the pocket and what is the best way to edit code?( I've described the situation - sometimes I get to work on someone else's page and it's almost impossible for me to know the exact code that needs editing without it getting highlighted - How do you guys jump to the exact line that needs editing, on your editor? Quickly?
I just tried the 'inspect element' method - there are no line numbers - just the div and the html and css - even if I rectify it on the browser , how am I going to find the exact code and line number on an editor like notepad++?
If you write your HTML in a way that's easily-readable, you shouldn't need to find where an element lies in the code - it should be easy to tell from its surroundings. Try adding comments to your HTML files describing what's happening and then see if you can read it better.
If you write your HTML in a way that's easily-readable, you shouldn't need to find where an element lies in the code - it should be easy to tell from its surroundings.
So there's no way to do it other than rely on the clarity of comments/class names? I would still have to scan through the comments and ids would I not? (as opposed to directly jumping on the highlighted code?). I'm trying to understand how you guys do it so that I can learn the same.
And what if I have to edit someone else's code? Sometimes I am asked to make design modifications in an existing page that not only has html but php too.
I think the issue might be that I at least don't quite understand the problem, probably because I'm so used to not using the design mode the way you are. This is not supposed to be a mean comment, just a reflection on why it might appear that you are getting unhelpful answers - the way to do it "right" is so ingrained that it's hard to explain.
I use a pure text editor (gedit) when I work on the code, and the browser to view it. Depending on what it is I want to do with the element (your question isn't too clear there - are you looking at CSS or the HTML structure?), I generally use either firebug or the code inspector in Chrome to find the div/whatever and it's structure.
I then go over to the Sass file (CSS if not using a pre-processor) and target the particular element I want to target, or go into the particular file that has the bit of code I'm needing (tracking it down through the files first, if necessary), and then just search for whatever I've found that is a "hook" to find it.
If the design modifications are purely CSS, then the above suggestion of using some kind of live code inspector to find it, and then search the file(s) relevant.
The reason that people give Dreamweaver thumbs down has to do with it having a tendency to breed bad habits in people who are not experienced enough to see bad practices, such as suggesting designs using tables rather than the better ones. It is also possible (I haven't used DW for quite a few years, at least partly due to the cost) that it has gotten better and people are just used to it not being that good for more professional designs.
I'm so used to not using the design mode the way you are. This is not supposed to be a mean comment, just a reflection on why it might appear that you are getting unhelpful answers
I'm alright with any kind of comment as long as it's constructive - even vicious criticism about my methods and coding style. I'm just trying to improve and be like everyone else and I am baffled by how others do it - hence the thread.
your question isn't too clear there - are you looking at CSS or the HTML structure?
Both, actually. I know jumping on a specific class is fairly easy in the stylesheet - just use control + F.
But on an html page,If the page is small and the comments are well defined, then it is somewhat easy. But what if it's a huge page that has hundreds of subsections and the comments/classes are not that well defined or are even absent/inline styling? How do you know the exact code that you have to jump to , to make the edit? I've already explained how I do it in dreamweaver - the code gets highlighted - so even if there are no comments or even classes, I can make edits quite easily. How do I do it on a text-editor?
The browser itself is a design mode where we locate the code by right clicking on the element and finding its html . So I'm really not sure how the information is transferred to a text-editor.
First, off, I'd like to echo Melindrea in saying that I'm not trying to be mean, and that I'm having to wrap my head around what you're asking because I think we're all so used to working directly with code and nothing but.
Now, I understand your question, but I personally feel that using Design View fosters bad working methods, for exactly this reason. It allows you to freely jump around your markup with no real knowledge of the actual code. In my opinion, if you're working on a project, it's your business to know your code without the help of graphical UI 'map.'
The browser itself is a design mode where we locate the code by right clicking on the element and finding its html . So I'm really not sure how the information is transferred to a text-editor.
It's not. You use the in-browser tools to discover the element you need, then you use that information to find it in your text editor.
There are features in code editors like Sublime Text 2 (long live the command palette!) that make it easier to jump to specific section of your code, as long as you know what element you're looking for. If it has a class or ID, you're golden. Hit Ctrl+R and start typing the class name. Use Chrome Developer Tools to figure out which element you need to manage, if you're not familiar with the code.
Beyond this, if for instance the code is horridly written with inline styles and tables, or maybe an email newsletter template where these things are necessary, it really takes a lot less time than you might think to just scan the code visually for the element you need. If you can write the language, reading it should be second nature.
Why not try not using Design View for the next week? Just cut it out of your workflow altogether, and learn to manage without it. I think you'll find that it doesn't really slow you down much, once you adapt to other methods of finding what you're looking for, and you'll likely find that you become a better coder, with better habits that will lead to you personally writing more readable, easily maintainable code.
A good text editor provides features such as colour coding different languages and highlighting syntax errors in your code. Another useful feature is that it will enable you to hide portions of code you're not working on thereby making it easier to find the section you are working on.
I use TextWrangler which is free. There are others such as TextMate, Notepad++ which I've heard good things about. Some are free, some not, and you will need to choose one that works on your set up. Google text editors for web developers or something similar - this will get you started
One thing that might help you is Code Folding, which is a feature of some editors. It let's you hide (fold) the contents of some HTML elements, which will make the page easier to navigate at a glance.
No offense taken. Like I said, any kind of comment is fine as long as it stays within the context of the discussion.
It's not. You use the in-browser tools to discover the element you need, then you use that information to find it in your text editor.
I use the design mode for that exact same purpose (use the 'look' of the page to know what needs to be edited) - the only thing is, I get to reduce the extra step of having to look for the code in the source view - my code, or anyone's code simply gets highlighted . For coding , I use the source view and very rarely, the split view.
If it has a class or ID, you're golden. Hit Ctrl+R and start typing the class name.
But multiple elements can have the same class names, can they not? Sometimes as many as 20-30 elements.
Why not try not using Design View for the next week? Just cut it out of your workflow altogether, and learn to manage without it. I think you'll find that it doesn't really slow you down much, once you adapt to other methods of finding what you're looking for, and you'll likely find that you become a better code
So I guess this is it. There really isn't a faster way of finding the element that needs to be worked upon in other editors - with practice, I'd be intuitively led towards the right element, regardless of the fact that there may be 20-30 elements with the same class names, the element or para could be inside a table, or even inline styled? I'll be able to locate my code even if it's hidden or mixed with the code of other programming languages of which I have no clue? (like PHP)
I tried working purely on code for a day or two (notepad++), and the problems that I encountered are what's being mentioned.
Which other code editor has a reasonably good design mode that also allows you to highlight the code on clicking the element? I've already explained that DW is not an option for home use - it's too expensive for me as of now.
Notepad++ has that - and it does help to an extent - but if the elements are not clearly defined , I still encounter the same problems, especially with huge pages. And I'm not sure how you guys do it when the html is located within php code.
I'll give 'Brackets' a try. Thanks. But I was really trying t understand how you guys manage - and the answer that I've got, so far, is that with practice , I'll be able to read code better.
So I guess that is the answer. I'm not sure how that makes other editors better than DW though - if practice is what's going to help with my work, I could have stuck even with notepad without syntax highlighting and autocomplete! Special features are supposed to make work faster, are they not?
All I can say is this. Just use what you comfortable working with. That's all that matters. At the end, no one will ask you what tool you used to make the final product you delivered, but whether the product is of great quality or it sucks and didn't meet customer expectations, that's what will matter. After all, the tool is as good as the person using it.
I personally tried many editors and IDEs and I didn't find a perfect one. I always wish I could be able to combine features from different editors/IDEs to make what would be perfect for me, albeit this is not possible. A compromise has to be made somewhere. The editor / IDE you choose should not be based on what is currently cool, but what serves you best at this time.
I would even go a step further and say that what is best for an experienced developer is less likely to be best for a new developer like yourself.
If using DW design view to find the code that you want to edit is an important feature for you then stick with DW. As you are getting more experienced it will become easier for you to find the code without a design view. At the same time you will start wishing that you had features that are not available in DW. Then it will be time to switch to something else.
It's not quite design view, but the navigator in Coda lets you see everything in your document and jump to it. In CSS, the list items even render with the CSS applied to them!
Except that I can't afford Dreamweaver - I only use it on my office system. I'm looking for something reasonable for home use - if I have to take independent projects, I'll need a good system at home. Notepad++ is alright for coding, but it's a nightmare to jump to a specific code to edit something.
Has anyone used Mirabyte Web architect? It seems interesting, and I think I'll be able to do what I've mentioned here. And at $70, it seems like a decent price too.
Edit: Kompozer seems to have it too. And it's free!
I'm fairly new to this industry(8 months), and I still rely on Dreamweaver 's design mode to select the code that I want to edit (I use the code or split view while designing)- very simple, just click on the element that needs to be worked upon and the code gets highlighted in code view.
What I'm curious about is this -
Almost every forum that I visit gives a thumbs down to Dreamweaver and a Thumbs up to code editors such as Sublime text2, even though it appears(I'm not sure) that these code editors do not have a design mode. How do coders manage to edit their code or someone else's(if they're unfortunate enough to complete someone's pending work?). Often there are hundreds of lines of code.
Am I learning html the wrong way? Am I missing something? Is there something these experts know and have implemented that I'm not aware of or not following?
The browser is your live mode :)
The best way to learn HTML/CSS/Javascript is to create small projects from scratch.
Well, just like @JoeBrooks said, you can just set up your text editor and your browser to be side by side. Then, every time you update your code, just refresh the browser. There are apps/plugins to do this automatically such as Live Reload. Another way is to use the Developer Tools of your preferred browser to make live changes to your website (however, you'll have to migrate these changes back to your code editor). This is good for small changes. However, there is a app/plugin that updates the code editor's code as you edit the website in the Developer Tools (Developer Tools Autosave). Play with these ways and soon, you'll realize that Dreamweaver is too clunky and you'll start using other lightweight code editors! ;)
What about editing code? How does one edit code in a editor such as ST2? Supposing the page has hundreds of lines of code - how does one quickly find the exact div, para, ul that needs editing? DW's design mode allows us to simply select the element and the code gets highlighted.
This almost appears like a drawback in other editors (if one has to rely on the browser to find the code to edit) as opposed to DW being clunky. Is there no other way that's built into the system?
I need to quickly find a way to practice on a different editor - I work from an office and plan to start taking home projects too - I need to find a good editor that's also reasonable on the pocket - DW's unaffordable as of now.
What is the best editor that's reasonable on the pocket and what is the best way to edit code?( I've described the situation - sometimes I get to work on someone else's page and it's almost impossible for me to know the exact code that needs editing without it getting highlighted - How do you guys jump to the exact line that needs editing, on your editor? Quickly?
I just tried the 'inspect element' method - there are no line numbers - just the div and the html and css - even if I rectify it on the browser , how am I going to find the exact code and line number on an editor like notepad++?
If you write your HTML in a way that's easily-readable, you shouldn't need to find where an element lies in the code - it should be easy to tell from its surroundings. Try adding comments to your HTML files describing what's happening and then see if you can read it better.
So there's no way to do it other than rely on the clarity of comments/class names? I would still have to scan through the comments and ids would I not? (as opposed to directly jumping on the highlighted code?). I'm trying to understand how you guys do it so that I can learn the same.
And what if I have to edit someone else's code? Sometimes I am asked to make design modifications in an existing page that not only has html but php too.
I think the issue might be that I at least don't quite understand the problem, probably because I'm so used to not using the design mode the way you are. This is not supposed to be a mean comment, just a reflection on why it might appear that you are getting unhelpful answers - the way to do it "right" is so ingrained that it's hard to explain.
I use a pure text editor (gedit) when I work on the code, and the browser to view it. Depending on what it is I want to do with the element (your question isn't too clear there - are you looking at CSS or the HTML structure?), I generally use either firebug or the code inspector in Chrome to find the div/whatever and it's structure.
I then go over to the Sass file (CSS if not using a pre-processor) and target the particular element I want to target, or go into the particular file that has the bit of code I'm needing (tracking it down through the files first, if necessary), and then just search for whatever I've found that is a "hook" to find it.
If the design modifications are purely CSS, then the above suggestion of using some kind of live code inspector to find it, and then search the file(s) relevant.
The reason that people give Dreamweaver thumbs down has to do with it having a tendency to breed bad habits in people who are not experienced enough to see bad practices, such as suggesting designs using tables rather than the better ones. It is also possible (I haven't used DW for quite a few years, at least partly due to the cost) that it has gotten better and people are just used to it not being that good for more professional designs.
I'm alright with any kind of comment as long as it's constructive - even vicious criticism about my methods and coding style. I'm just trying to improve and be like everyone else and I am baffled by how others do it - hence the thread.
Both, actually. I know jumping on a specific class is fairly easy in the stylesheet - just use control + F.
But on an html page,If the page is small and the comments are well defined, then it is somewhat easy. But what if it's a huge page that has hundreds of subsections and the comments/classes are not that well defined or are even absent/inline styling? How do you know the exact code that you have to jump to , to make the edit? I've already explained how I do it in dreamweaver - the code gets highlighted - so even if there are no comments or even classes, I can make edits quite easily. How do I do it on a text-editor?
The browser itself is a design mode where we locate the code by right clicking on the element and finding its html . So I'm really not sure how the information is transferred to a text-editor.
First, off, I'd like to echo Melindrea in saying that I'm not trying to be mean, and that I'm having to wrap my head around what you're asking because I think we're all so used to working directly with code and nothing but.
Now, I understand your question, but I personally feel that using Design View fosters bad working methods, for exactly this reason. It allows you to freely jump around your markup with no real knowledge of the actual code. In my opinion, if you're working on a project, it's your business to know your code without the help of graphical UI 'map.'
It's not. You use the in-browser tools to discover the element you need, then you use that information to find it in your text editor.
There are features in code editors like Sublime Text 2 (long live the command palette!) that make it easier to jump to specific section of your code, as long as you know what element you're looking for. If it has a class or ID, you're golden. Hit Ctrl+R and start typing the class name. Use Chrome Developer Tools to figure out which element you need to manage, if you're not familiar with the code.
Beyond this, if for instance the code is horridly written with inline styles and tables, or maybe an email newsletter template where these things are necessary, it really takes a lot less time than you might think to just scan the code visually for the element you need. If you can write the language, reading it should be second nature.
Why not try not using Design View for the next week? Just cut it out of your workflow altogether, and learn to manage without it. I think you'll find that it doesn't really slow you down much, once you adapt to other methods of finding what you're looking for, and you'll likely find that you become a better coder, with better habits that will lead to you personally writing more readable, easily maintainable code.
A good text editor provides features such as colour coding different languages and highlighting syntax errors in your code. Another useful feature is that it will enable you to hide portions of code you're not working on thereby making it easier to find the section you are working on.
I use TextWrangler which is free. There are others such as TextMate, Notepad++ which I've heard good things about. Some are free, some not, and you will need to choose one that works on your set up. Google text editors for web developers or something similar - this will get you started
Design vs geek mode... your choice. Use what makes you comfortable and get you the best results. Validate, validate, and validate.
One thing that might help you is Code Folding, which is a feature of some editors. It let's you hide (fold) the contents of some HTML elements, which will make the page easier to navigate at a glance.
@Krish1980 If you'd like to see all of the CSS that pertains to a certain segment of HTML code or a single element, then I recommend Brackets!
@JoshBlackwood ,
No offense taken. Like I said, any kind of comment is fine as long as it stays within the context of the discussion.
I use the design mode for that exact same purpose (use the 'look' of the page to know what needs to be edited) - the only thing is, I get to reduce the extra step of having to look for the code in the source view - my code, or anyone's code simply gets highlighted . For coding , I use the source view and very rarely, the split view.
But multiple elements can have the same class names, can they not? Sometimes as many as 20-30 elements.
So I guess this is it. There really isn't a faster way of finding the element that needs to be worked upon in other editors - with practice, I'd be intuitively led towards the right element, regardless of the fact that there may be 20-30 elements with the same class names, the element or para could be inside a table, or even inline styled? I'll be able to locate my code even if it's hidden or mixed with the code of other programming languages of which I have no clue? (like PHP)
I tried working purely on code for a day or two (notepad++), and the problems that I encountered are what's being mentioned.
@dswift512
Which other code editor has a reasonably good design mode that also allows you to highlight the code on clicking the element? I've already explained that DW is not an option for home use - it's too expensive for me as of now.
@rosspenman
Notepad++ has that - and it does help to an extent - but if the elements are not clearly defined , I still encounter the same problems, especially with huge pages. And I'm not sure how you guys do it when the html is located within php code.
@srig99
I'll give 'Brackets' a try. Thanks. But I was really trying t understand how you guys manage - and the answer that I've got, so far, is that with practice , I'll be able to read code better.
So I guess that is the answer. I'm not sure how that makes other editors better than DW though - if practice is what's going to help with my work, I could have stuck even with notepad without syntax highlighting and autocomplete! Special features are supposed to make work faster, are they not?
the chrome developer tools are your friends! http://webdesign.tutsplus.com/tutorials/workflow-tutorials/faster-htmlcss-workflow-with-chrome-developer-tools/
just right click on any element and "inspect".
All I can say is this. Just use what you comfortable working with. That's all that matters. At the end, no one will ask you what tool you used to make the final product you delivered, but whether the product is of great quality or it sucks and didn't meet customer expectations, that's what will matter. After all, the tool is as good as the person using it.
It is perfectly fine to use Dreamweaver.
I personally tried many editors and IDEs and I didn't find a perfect one. I always wish I could be able to combine features from different editors/IDEs to make what would be perfect for me, albeit this is not possible. A compromise has to be made somewhere. The editor / IDE you choose should not be based on what is currently cool, but what serves you best at this time.
I would even go a step further and say that what is best for an experienced developer is less likely to be best for a new developer like yourself.
If using DW design view to find the code that you want to edit is an important feature for you then stick with DW. As you are getting more experienced it will become easier for you to find the code without a design view. At the same time you will start wishing that you had features that are not available in DW. Then it will be time to switch to something else.
It's not quite design view, but the navigator in Coda lets you see everything in your document and jump to it. In CSS, the list items even render with the CSS applied to them!
Coda is Mac-only, though.
@Zoom
Except that I can't afford Dreamweaver - I only use it on my office system. I'm looking for something reasonable for home use - if I have to take independent projects, I'll need a good system at home. Notepad++ is alright for coding, but it's a nightmare to jump to a specific code to edit something.
@rosspenman
That looks fantastic, but I don't have a Mac :-(
Has anyone used Mirabyte Web architect? It seems interesting, and I think I'll be able to do what I've mentioned here. And at $70, it seems like a decent price too.
Edit: Kompozer seems to have it too. And it's free!