Grow your CSS skills. Land your dream job.

Question about Design view vs Code editor

  • # January 25, 2013 at 4:06 pm

    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?

    # January 25, 2013 at 4:10 pm

    The browser is your live mode :)

    # January 25, 2013 at 4:13 pm

    The best way to learn HTML/CSS/Javascript is to create small projects from scratch.

    # January 25, 2013 at 7:22 pm

    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](http://livereload.com/ “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](https://github.com/NV/chrome-devtools-autosave “Chrome Autosave”)). Play with these ways and soon, you’ll realize that Dreamweaver is too clunky and you’ll start using other lightweight code editors! ;)

    # January 26, 2013 at 6:01 am

    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++?

    # January 26, 2013 at 7:49 am

    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.

    # January 26, 2013 at 7:54 am

    > 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.

    # January 26, 2013 at 8:53 am

    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.

    # January 26, 2013 at 9:30 am

    > 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.

    # January 26, 2013 at 1:59 pm

    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.

    # January 26, 2013 at 2:37 pm

    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](http://www.binaryturf.com/text-editors-top-10-text-code-editors-web-developers/ “”)

    # January 26, 2013 at 2:42 pm

    Design vs geek mode… your choice. Use what makes you comfortable and get you the best results. Validate, validate, and validate.

    # January 26, 2013 at 3:46 pm

    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.

    # January 26, 2013 at 6:08 pm

    @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](http://brackets.io/ “Brackets”)!

    # January 26, 2013 at 10:31 pm

    @JoshBlackwood ,

    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.

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".