JavaScript Developer Toolkit - Emmet


This is a second article about JavaScript developer's toolkit and today we're going to talk about Emmet. If you've missed the first article about the useful tools for JavaScript developers, have a look at it here.

What is Emmet?


Essentially it gives you shortcuts you can type that expand into full HTML or CSS. Like nav>a*5 will expand into a <nav> tag with eight links inside it with empty hrefs. 
<nav>
 <a href=""></a>
 <a href=""></a>
 <a href=""></a>
 <a href=""></a>
 <a href=""></a>
</nav>
Or, try div.module*2>p*2>lorem and press tab. Firstly it will convert div.module*2 into two <div> elements and associate them with a module css class. After that it will look at >p*2 and create two <p> elements. In the end >lorem will fill the paragraphs with famous lorem ipsum text. Take a look at the produced code below: 
<div class="module">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     Accusantium aliquid, autem eligendi explicabo possimus
        similique vitae! Asperiores ducimus ea illum perspiciatis
        placeat similique soluta, totam! Alias aut maiores
        omnis quo.
    </p>
    <p>Ab alias aspernatur eius, ex natus non obcaecati quo
     veritatis voluptatem voluptatum? Ab assumenda consectetur
        deserunt, doloremque ea et odio. Animi beatae eaque facere
        itaque nemo nobis obcaecati quis sequi.
    </p>
</div>
<div class="module">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     Ad aperiam eos esse explicabo nostrum, numquam rem
        veniam. Blanditiis commodi cum error eum incidunt ipsam
        laboriosam natus quod veritatis voluptate, voluptatibus?
 </p>
    <p>Ab architecto atque deleniti dicta dolor dolores, enim
     explicabo ipsum, libero natus nulla officiis, rerum
        tempora temporibus unde! Aliquid aspernatur eaque fuga
        molestiae nisi omnis quis repellendus reprehenderit sunt
        voluptatum.
    </p>
</div>
There are also a bunch of editor navigation shortcuts like move to the next edit point, reflect css value, split/join tag and more. All of them are beautifully demonstrated on Emmet documentation section and even can be played with.

Emmet works with various code editors and is already bundled-in with Webstorm. It can as well be easily installed on Sublime Text, of which we talked in our previous article.

Check out for the next article in the series of developer toolkit. In fact I think I'm going to keep the tradition and post an article about the useful tools every first weekend of the month.

Comments

Post a Comment

Popular posts from this blog

CAP Theorem and blockchain

Image
In theoretical computer science, the CAP theorem states that it is impossible for a distributed data store (such as a blockchain network) to simultaneously provide more than two out of the three guarantees: Consistency, Availability & Partition tolerance. CAP Theorem – the parts C: Consistency – At any given time, all nodes in the network have exactly the same (most recent) value. A: Availability – Every request to the network receives a response, though without any guarantee that returned data is the most recent. P: Partition tolerance – The network continues to operate, even if an arbitrary number of nodes are failing. Due to the nature of distributed data stores (such as blockchain), Partition tolerance is a given fact; there will always be failing/unreachable nodes in the network (not least because of the unstable nature of the internet). CAP Theorem states that one has to choose between C (Consistency) or A (Availability) when in the presence of P (Partition): Av...
Read more

Length extension attack

Image
What is length extension? When a Merkle–Damgård based hash is misused as a message authentication code with construction H(secret ‖ message), and message and the length of secret is known, a length extension attack allows anyone to include extra information at the end of the message and produce a valid hash without knowing the secret. Quick sidebar, before you freak out: Since HMAC does not use this construction, HMAC hashes are not prone to length extension attacks. So, a length extension attack is a type of attack where an attacker can use Hash(message1) and the length of message1 to calculate Hash(message1 ‖ message2) for an attacker-controlled message2, without needing to know the content of message1. Algorithms like MD5, SHA-1 and most of SHA-2 that are based on the Merkle–Damgård construction are susceptible to this kind of attack. Truncated versions of SHA-2, including SHA-384 and SHA-512/256 are not susceptible, nor is the SHA-3 algorithm. A bit more details ...
Read more

Contract upgrade anti-patterns

Image
A popular trend in smart contract design is to promote the development of upgradable contracts . To be fair, existing techniques to upgrade contracts have flaws, increase the complexity of the contract significantly, and ultimately introduce bugs - even in the Zeppelin contract upgrade strategy. In this article, we are going to detail our analysis of existing smart contract upgrade strategies, describe the weaknesses we have observed in practice, and provide recommendations for contracts that require upgrades. In a follow-up blog post, we will detail a method, contract migration, that achieves the same benefits with few of the downsides. An overview of upgradable contracts Two ‘families’ of patterns have emerged for upgradable smart contracts: Data separation, where logic and data are kept in separate contracts. The logic contract owns and calls the data contract. Delegatecall-based proxies, where logic and data are kept in separate contracts, also, but the data contr...
Read more