Highlighted

[Locked] Emmet

Explorer ,
Dec 23, 2017

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

2.4K

Likes

Translate

Translate

Report

Report
This conversation has been locked.

[Locked] Emmet

Explorer ,
Dec 23, 2017

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

2.4K

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Explorer ,
Dec 23, 2017

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Explorer ,
Dec 23, 2017

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
LEGEND ,
Dec 23, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Explorer ,
Dec 23, 2017

Copy link to clipboard

Copied

Nancy OShea Nah, it doesn't, but I don't mind. Just was curious as a friend was talking about it.  When do you think Emmet will be fully compatible with Dreamweaver CC 2018??  Are Adobe and the developers still working together to get it fully compatible??

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

In all candor, I have had other problems with 2018 such that I reverted back to 2017.   So Emmet works fine for me!   I don't know when or if they'll get all the bugs worked out of 2018.    We can hope .

In the meantime, please submit you bug reports so these get logged in the official database.  See screenshot.

CC-submitBug.jpg

If you want to revert to an older version, you can do that from your CC Desktop App by clicking on Other Versions as shown below.

CC-DesktopApp.jpg

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Dec 23, 2017 1
Explorer ,
Dec 23, 2017

Copy link to clipboard

Copied

Thank you for your help, Nancy OShea

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

in fact it works like a charm... it is just because you have an extra space at the end of your abreivations... just remove it and be sure to hit TAB just after the very last caracter of your abreviation

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

nancy just be aware that the + sign create siblings, the chevron &gt; sign create childs....

so using one or the other is not question of making the abreviation work... but a final aim in the DOM tree model

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

I'm curious to see who find this answer usefull??? arf arf....

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

Damo ?... did you try removing the extra space ???

I've tried on different system, and it works...

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
LEGEND ,
Dec 24, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Dec 24, 2017 1
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
LEGEND ,
Dec 24, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
LEGEND ,
Dec 24, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
LEGEND ,
Dec 24, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
LEGEND ,
Dec 24, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
LEGEND ,
Dec 25, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Dec 25, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

And here is the link to Emmet 12.2 documentation.

https://docs.emmet.io/abbreviations/

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Dec 23, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

now folks... this thread is very nice... but ...

although I am an atheist and I do not believe for a long time to santa claus ... I have a lot of friends who have just arrived at the office and my hedonistic libertarian side attracts me to increase my propensity to party.

I wish you all a happy holiday season... see you ...

Likes

Translate

Translate

Report

Report
Dec 24, 2017 2
Explorer ,
Dec 24, 2017

Copy link to clipboard

Copied

Hey B i r n o u​, I'm sorry, I have been away from the laptop as I was having a Star Wars marathon with my wife.  But, I have decided to just wait for Adobe to realize that Emmet isn't working with DW2018 and fix it.  I expect that I'll have a very long wait, so shouldn't hold my breath.  This has been an interesting topic, I am guessing, so I am happy to keep it going, if you guys like it to stay alive??

I am currently building my website using DW, so it should be ready in February when I publish my autobiography!!

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

cool... did you try removing the last white space at the end of the abreviation... is this still not working that way...?

Likes

Translate

Translate

Report

Report
Dec 24, 2017 0