[Locked] Emmet

[Damo_Quinn]

I am using Dreamweaver CC 2018, and it tells me that I can use Emmet to make my coding quicker.  When I click on the tip, it takes me to Dreamweaver Exchange, and I have to search for it, and here is the problem, it isn't there to be found.  I go to the creators website, Emmet.io, and click on download, and even then, it doesn't work.

How on earth, can I use Emmet, if Dreamweaver doesn't want me to use it??

Look forward to hearing the replies.

Damo

[Nancy OShea]

Is Emmet turned on in your Preferences?

At its simplest, open code view.  Type p followed by the TAB key.

Result:

<p>  </p>

Place cursor inside the <p> tags and type lorem followed by TAB key.

Result:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima optio, magnam molestias nisi quod minus natus, dolorum inventore earum at totam eius aliquid illum repudiandae? Adipisci laudantium doloremque, tempora aliquid.</p>

Sadly DW doesn't implement the entire Emmet catalog of shortcuts.  Only parts of Emmet are recognized in DW.

See Joseph Lowery's description below.

Faster Coding with Emmet in Dreamweaver CC | Adobe Blog

Nancy

[Damo_Quinn]

Nancy OShea  According to Exchange, Emmet won't be installed because I don't have Dreamweaver 11 or greater!!   I thought that Dreamweaver CC 2018 was higher than DW11! (according to DW (as I've just looked), I have DWv18)

[B i r n o u]

two fast points...

1 - in DW you don't have to install emmet, it is already installed... so as Nancy point at, just verify in the prefs setting if it is turn on

2 - I miss understand what means Nancy when saying that emmet is not fully installed, and that not all abbreviations are present ??? please Nancy which abbreviations are missing ?... AFAIK there is just a problem of emmet core engine (with the TAB key that can't be use in within the code and the multiple selection that does'nt work in Emmet)... but not with the abbreviation list... but if Nancy said it... so I'm certainly missed some ?

[B i r n o u]

by the way don't forget the https://docs.emmet.io/cheat-sheet/

[Damo_Quinn]

According to the preferences, Emmet is 'turned on', and yet, when I try it, it doesn't work.  If I do:

     div+navigation+ul [tab]

that will do this:

     div+navigation+ul [tab][tab]tab]

not this:

     <div></div>

          <navigation></navigation>

               <ul></ul>

[osgood_]

https://forums.adobe.com/people/Damo+Quinn  wrote

According to the preferences, Emmet is 'turned on', and yet, when I try it, it doesn't work.  If I do:

     div+navigation+ul [tab]

that will do this:

     div+navigation+ul [tab][tab]tab]

not this:

     <div></div>

          <navigation></navigation>

               <ul></ul>

That because its not fully implemented in DW, like most other programs I've tried anyway.

[B i r n o u]

I'm afraid this type of answer does not work in favor of emmet ...

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I'm afraid this type of answer does not work in favor of emmet ...

Even if that works there will probably be another emmet combination that doesnt work. Ive found that to be true in most of the editors that l have had the experience of using

To me its not an issue, it is what it is. If an editor doesnt support something that you regularly use, just write a snippet.

Personally l would not advise using emmet as a frequent way of writing code, it makes you a lazy and forgetful coder - use it or lose it is my philosophy. I wonder these days with all the plugins, extensions, frameworks available how many developers can actually code anything if they were taken away.

[B i r n o u]

nope, I don't quite agree, all the abreviations that I have use so far are really working... so if you compare the use of emmet to the employ of a snippet... well, 100% of the emmet use can be use without any trouble and could probably be faster than using a snippet

the only problem that I found in using emmet are posted in the DWBETA-4151103 and the DWBETA-4151022 bugs

now as you said, personally, if we talk about coders, according to you, I quote you "... it makes you a lazy and forgetful coder..." I will adive that "... it makes you a more responsive and fully focused coder on the algorythm and not on the written sentence..." ... assuming that an encoder uses a code editor and spends his day on the keyboard

[osgood_]

My own personal experience, not in DW l have to admit, says otherwise. So l would not be at all surprised if emmet was not fully functional in DW. Just because you have not yet come across a key combination that doesnt work doesnt mean it doesnt exist given there are hundreds of emmet abbreviations.

As for using emmet extensively i fully believe that it does not focus or make you more responsive. Repetative coding, although can be boring to some, or just plain laziness for others, focuses you and makes you more responsive to code patterns and code writting. Using any automated process long term will damage your capability to cope without it.

Its like the person who walks 100 meters  to collect their paper in the morining as opposed to the person who jumps in ther 4 x 4 and sits on their bum eating burgers for breakfast. Which one in the long term is going to be more agile and responsive?

[B i r n o u]

once again, I continue this discussion just because initially the vision indicated seems to me to be too subbjective and FWIT unfounded.

To be able to say this is not good, I think that it is possible, but it must, in my opinion, be strongly supported and come from a well-founded experience ...

without wanting to offend you , you do not seem to be an avid user of Emmet, (nor Sass, Grunt, or any other tools born from the production of the industry of the ten last years) ... and in this case it seems to me that it may be responsible only to be less categorical and closed on his point of view declaring that thos technos are wrong and bad. (it remind me something from the dark middle age... (</joke>))

We have to always keep in mind those who seek to discover, or to inform themselves and whose doesn't know anything about the subject...

let's go back to the discussion ...

the metaphor with the 4x4 is quite wrong.... why ?.... just because to achieve the same task, walking for getting paper,... (by the way what are the relation with burgers and breakfast in this scenarii... they appear only in 4x4 version) ???? anyway...  it not only changes tools but it also change technology and also objectives ...

all this makes for the novice who does not know Emmet a truncated and downright subjective vision.

I think the same approach, always staying on the idea of ​​having to walk 100m to pick up his paper, would be to compare Emmet to a pair of walking shoes like Assics, or Kalenji, (perhaps in other countries people will get better Nike, Reebok...) ... so having those shoes will help by acting on the grip of walking, or the comfort over long periods of use, or other helpers like having a bag that will allow us to carry the paper... and so on...

so the metaphor should help newbies to understand that tools like Emmet are here to help to produce HTML, or CSS, in the writing process, not to replace the way we concieve the algorythm, nor divert us from what we want to produce ... nothing is product (invented) for us ... we do and control it... always

if we write bullshit, the code from the abbreviations will remain bullshit ... if the approach is good, the product code should be good.

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

once again, I continue this discussion just because initially the vision indicated seems to me to be too subbjective and FWIT unfounded.

To be able to say this is not good, I think that it is possible, but it must, in my opinion, be strongly supported and come from a well-founded experience ...

I'll be the judge of if l have well founded experience or if its good or not  when analysing a workflow, not you, or though you can have of course have your opinions as to if l have or not.

Emmet is not rocket science to understand and make a personal judgement or form opinions.

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

without wanting to offend you , you do not seem to be an avid user of Emmet, (nor Sass, Grunt, or any other tools born from the production of the industry of the ten last years) ... and in this case it seems to me that it may be responsible only to be less categorical and closed on his point of view declaring that thos technos are wrong and bad. (it remind me something from the dark middle age... (</joke>))

We have to always keep in mind those who seek to discover, or to inform themselves and whose doesn't know anything about the subject...

That would be true but you are basing your assumptions that l have not explored the workflows you mentioned, sass, grunt, pig, neat, nuts, burbon, etc etc For the most part they are overkill and used without any real idea why they are being used for a large group of developers who have seen some tutorials who unfortunately think that is the only workflow regardless of the simplicity of the projects they are working on.

I am an avid follow of many popular youtube channels and follow these developers using such workflows to teach when they are not really required at all. Anyone, without too much coding ability, following these channels would think without sass you cant use css, similarly without installing this or that helper file the project cant be built. The one which stunned me last week was a chap installing something called parcel to pull in a randon quote from an API json file, something that jQuery could do in a couple of lines of code instead of 30 lines of complex coding. If it saves 0.222 seconds wtf, who cares on a small simple project which most websites are..

More so this chap who is obviously brilliant at sucking up small doses of just about any workflow you can name then goes on to say 'well why would l produce this using jQuery' and yet uses Bootstrap for his main website, a front end framework which requires jQuery to function. Theres a whole load of crap and misleading information being put around wben it comes to workflows as far as l can make out.

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

let's go back to the discussion ...

the metaphor with the 4x4 is quite wrong.... why ?.... just because to achieve the same task

Bootstrap achieves the same task as writing responsive code yoursef but you learn nothing about responsive design or coding by pressing buttons or using snippets of code not written by yourself, that has to be bad. Whilst emmet is not on a par with Bootstrap as you do need to still use your brain to remember the key combinations its not something  thats actually going to help lay the foundation of understanding solid coding patterns. Similarly can be said if you use the code hinting completions consistently, eventually you will forget how to write them should you need to do do. Apply that to extentions and plugins and you have a whole bunch of modern day zombie developers who are putting together work using coloring by numbers techniques.

https://forums.adobe.com/people/B+i+r+n+o+u  wrot

I think the same approach, always staying on the idea of having to walk 100m to pick up his paper, would be to compare Emmet to a pair of walking shoes like Assics, or Kalenji, (perhaps in other countries people will get better Nike, Reebok...) ... so having those shoes will help by acting on the grip of walking, or the comfort over long periods of use, or other helpers like having a bag that will allow us to carry the paper... and so on...

so the metaphor should help newbies to understand that tools like Emmet are here to help to produce HTML, or CSS, in the writing process, not to replace the way we concieve the algorythm, nor divert us from what we want to produce ... nothing is product (invented) for us ... we do and control it... always

Problem is  lm not seeing that happening, newbies don't actually want to learn anything correctly if they dont have to, especially when its all handed on a plate to them in the way of emmet, frameworks, extensions etc. That leaves them with very little knowledge, no real skills or ability to do much besides as l previously said color by numbers. Personally thats not something which l feel is desirable if its ones intention is to have a long term career in web development.

[B i r n o u]

the few tens of lines you have just written, show very brilliantly the art of speaking and of knowing how to answer completely beside the real question which reminds one is Emmet ...

you have not answered at all ... is it for fear of having to admit that emmet can actually be useful, as demonstrated in the examples... that besides you did not take the pain to comment ... thank you

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

the few tens of lines you have just written, show very brilliantly the art of speaking and of knowing how to answer completely beside the real question which reminds one is Emmet ...

you have not answered at all ... is it for fear of having to admit that emmet can actually be useful, as demonstrated in the examples... that besides you did not take the pain to comment ... thank you

Never said it cant be useful. Anything in small doses can be useful but l would not recommend drinking a bottle of wine each evening, you become dependent upon it, which was really my initial point. I prefer a workflow that largley depends on ones own skills, without using crutches if possible.

I did not respond to your post demonstrating emmet as l didnt see what point that proved and l already knew what emmet was and know how it works, without having the 'cat in the hat' approach, thanks anyway.

[B i r n o u]

once again the real question is discarded and you answer completely aside it ... I liked the example of wine ... consume Emmet in moderation ... which in itself does not mean anything ... said on ... make websites ... but beware do not abuse HTML ....

so if you read back some message ago when I posted the demos... the question was , I quote "... could you please tell me where it drives coders to become lasy... of where that will damage their capabilities ????... "

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

once again the real question is discarded and you answer completely aside it ... I liked the example of wine ... consume Emmet in moderation ... which in itself does not mean anything ... said on ... make websites ... but beware do not abuse HTML ....

so if you read back some message ago when I posted the demos... the question was , I quote "... could you please tell me where it drives coders to become lasy... of where that will damage their capabilities ????... "

If you cant see what is in front of you then that is not my problem. Taking too many short cuts is lazy in my opinion, particularly if you come to rely on doing so, its also dangerous to ones ability to learn. Another example as you seem to like them  - l can buy a packet of cake mix or make the cake myself. I know which workflow lm going to learn more from.

[B i r n o u]

as always your exemple is beside the reality of what it is... Emmet doesn't package , or mix, anything ready to be use for you...

YOU have to write your own HTML from scratch, and YOU have to mix, to create your own DOM, your personnal model... but instead of having to write a lot of repetitive characters (see the examples of demos I gave, it's always repetitive), emmet develops them for you ...

it is always, your writing, your thinking, your strategy, your algorythmie ...yes... still have to have them, I concede

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

as always your exemple is beside the reality of what it is... Emmet doesn't package , or mix, anything ready to be use for you...

Not really if you think deeper about what is happening. The person who uses the short cut, a cake mix, learns nothing much, unlike the person who takes the time to fully understand the ingredients they are working with.

I dont apologise for writing code, its the basis of what a good developer does and personally l believe adds to their ability to be able to cope with situations better than those developers who prefer to take the lazy approach to coding.

[B i r n o u]

when you say the person using the shortcut, and that you refer to a cake mix ...again you're wrong ... like for the 4x4... the exemple is innapropriate

sorry ... you are really wrong and you completely miss understanding what emmet is ...

first it is not a shortcut... but an abbreviation... which is not really the same stuff

and

the purchase of a cake mix implies that we buy a mixture of ingredients already chosen and therefore imposed ... we could compare this to the use of a component like Bootstrap for example, but not at all to Emmet.

Excuse me for being insistent on this point, but this is the one you seem to ignore and not understanding since the beginning of this discussion ...

if I decide to create a list of 10 elements containing a title and a description, in HTML I can choose either for a unordnonned list or a definition list...

whatever that I write it in HTML

<ul><li><h1>title</h1><p>description</p></li></ul>

<dl><dt>title</dt><dd>description</dd></dl>

or using emmet

ul>li>h1{title}+p{description}

dl>dt{title}+dd{description}

at the end it will return exactly the same composition...except that when using HTML and if one have to repeat the task 10 times, it will take longer... and then one if has to modify it... one will have more complexity to handle it... instead of directly regenerated the abbreviation

it is us developer who decide the ingredients that are placed in the mixture ... and not any mix preparer on which we have no control.

so since HTML and emmet are the same, so why go for one rather than the other ... well, as I said above, just because emmet allows us not only to go much faster, but also to go back, and easly change the deep structure ...

as you like metaphor...

why use an electric screwdriver to screw screws while any manual screwdriver can just handle it as well ... well we say that the handyman will accommodate well and will be happy, while the professional does will not ask the question ... and in both cases it is they who will choose where to place the screw, which model , and how many of them,but not any prepared tool kit al ready made

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

Excuse me for being insistent on this point, but this is the one you seem to ignore and not understanding since the beginning of this discussion ...

if I decide to create a list of 10 elements containing a title and a description, in HTML I can choose either for a unordnonned list or a definition list...

whatever that I write it in HTML

<ul><li><h1>title</h1><p>description</p></li></ul>

<dl><dt>title</dt><dd>description</dd></dl>

or using emmet

ul>li>h1{title}+p{description}

dl>dt{title}+dd{description}

at the end it will return exactly the same composition...except that when using HTML and if one have to repeat the task 10 times, it will take longer... and then one if has to modify it... one will have more complexity to handle it... instead of directly regenerated the abbreviation

Thats exactly my point. If you regularly write code long-hand l believe it will give you a better uderstanding of real code structures and real code patterns which is very helpful because you dwell on what you are actually doing, there is more time to understand, whereas using an automated process like emmet is not using real code patterns or structures, plus it just happens, generally you dont care how it happened or why it happened. The very point is doing things again and again will reinforce your code writing skills. Yes it is boring but there is no gain without pain in my opinion. Its probably why lm pretty good at coding to be honest. If l just sat here and pressed buttons, took short cuts l think l would be less capable.

Of course if there is a faster shorter way then most will gravitate towards that solution but it usually comes at a premium. Laziness and the lack of passion for what one does is part and parcel of life these days unfortunately, so really l expect nothing less. It doesnt stop me trying to reverse it though and teaching good fundamental workflows which will benefit in the long run.

https://forums.adobe.com/people/B+i+r+n+o+u

as you like metaphor...

why use an electric screwdriver to screw screws while any manual screwdriver can just handle it as well ... well we say that the handyman will accommodate well and will be happy, while the professional does will not ask the question ... and in both cases it is they who will choose where to place the screw, which model , and how many of them,but not any prepared tool kit al ready made

Its not the same, in web development you need to have a good understanding of code if your expectations are to have a career in that field, that can only be achieved by repetitively and regularly writing it. There are no short cuts. Sure if you want to use a script to remove blank lines of code quickly why not, you are not learning anything by sitting there and taking each line of blank space out manually, similarly use an electric screwdriver.

[B i r n o u]

I do not want to offend you, but I understand from reading you that either you do not want to admit the obvious, or you do not really understand what you're talking about ...

there is nothing automatic in emmet, and you must write HTML in emmet and most importantly you must think about what you write.

if you do not understand HTML, you can not use emmet ... it's a must ... but you seem to want to ignore it or get around it

I'm sorry I can not continue in this discussion, I really have a job ...

this discussion should be constructive, and for that it would be necessary that what is evident in the nature of the tool is understood and assimilated ...

what does not seem to be your case (once again, do not take offense) let some time goes and come back later to read  what you've written ... and you will understand what I mean and point to finger .... well, I hope so ...

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I do not want to offend you, but I understand from reading you that either you do not want to admit the obvious, or you do not really understand what you're talking about ...

It could also be you cant understand a simple quite clearly written response which unfortunetly unless it agrees with your thoughts you find difficult to cope with?

https://forums.adobe.com/people/B+i+r+n+o+u

there is nothing automatic in emmet, and you must write HTML in emmet and most importantly you must think about what you write.

if you do not understand HTML, you can not use emmet ... it's a must ... but you seem to want to ignore it

Sure emmet automates the process of writting the code, there are no  closing tags when writing emmet, youre not wrting the code in full are you? Emmet use a different approach. Id be really interested to see how many developers using emmet could write a complete doctype or even a stylesheet link without the aid of emmet. How many have forgotten because of a depedency on an automated workflow, which concerns me. If l asked them to work in a coding environment which did not support emmet would they be up to speed or lacking as a result of using an automated workflow? These are the questions lm asking. You dont know

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I'm sorry I can not continue in this discussion, I really have a job ...

this discussion should be constructive, and for that it would be necessary that what is evident in the nature of the tool is understood and assimilated ...

what does not seem to be your case (once again, do not take offense) let some time goes and come back later to read  what you've written ... and you will understand what I mean and point to finger .... well, I hope so ...

It would be more positive if you were not so patronizing, that  just comes across as desperation. I fully understand what l have written, but thank you for your concern

[B i r n o u]

just to be sure that we talk about the same Emmet... here are some demos ... could you please tell me where it drives coders to become lasy... of where that will damage their capabilities ???? please ?

12.24.2017-15.47.46

[Nancy OShea · Accepted solution]

Try replacing those plus signs with chevrons > and it should work.

div>nav>ul  TAB

<div>

    <nav>

        <ul></ul>

    </nav>

</div>

Or with IDs and classes  -  div#myID>nav.menu>ul.top  TAB

<div id="myID">

    <nav class="menu">

        <ul class="top"></ul>

    </nav>

</div>

And lets add 5 lists with anchors.

div#myID>nav.menu>ul.top>li*5>a  TAB

<div id="myID">

    <nav class="menu">

        <ul class="top">

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </nav>