How You can Write 100 lines of code in 1 Minute!
This is what I learnt from my Google sponsored scholarship for Front-End Web Development in Udacity on how to write code faster.
I’ve noticed that coding is repetitive in nature and sometimes we just have to write the same code in 10 different lines. The format of HTML is too tedious to repeat, especially when you’ve to deal with it on a day-to-day basis. So to write your code faster read ahead. This is the basic format of HTML 5.
I am using Sublime Text 3 to write codes.
HTML format
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title></title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, repellat.</p>
</body>
</html>But what if I told you that you could write this code in a second? Yes, you can with Emmet! It is the most effective and efficient text-editor plugin you will ever find.
By using Emmet, you can make your life easier while writing HTML.
How do I download Emmet?
Once you’ve downloaded this package, restart Sublime. You can access it by launching the Command Palette and typing Package Control (Install Package). To open the Command Palette, press ⌘ + ⇧ + P (Mac) or Ctrl + ⇧ + P (Windows/Linux). In there, type Emmet and it starts downloading.
HTML Shortcuts
Initialization
Just typing ! or html:5 + Tab will give you the basic HTML format.
Class & Id
To add class <p class = "port"> </p> you can just type p.port . To add id use p#port .
div
div.container or .container will give <div class="container"></div> .
Headers
To put headers h1, h2, etc. just type h1{Food} and you will get <h1>Food</h1> . To nest headers, just try h1+h2 .
Reference
To give references a[href=#] will give you the anchor tag.
Nesting & Grouping
You can nest p>span^p and also group (.ali>h1)+(.lil>h2) .
Numbering
Numbering is also possible: ul>li.item$*3 .
So, I can combine them and write ul#nav>li.item$*4>{Item$} , which will give us
<ul id=”nav”>
<li class=”item1">Item1</li>
<li class=”item2">Item2</li>
<li class=”item3">Item3</li>
<li class=”item4">Item4</li>
</ul>CSS Shortcuts
- To specify the width, height and margin
w10 + h5p+ m5e, you will get
width:10px;
height: 10%;
margin: 5em;- Type
lg(left, #fff 50%, #000), and the output will be:
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);Lorem
You can also decide how many Lorem Ipsum texts you want, suppose I want 10. So, I can write lorem10 and also p*3>lorem5 will generate:
<p>Lorem ipsum dolor sit amet.</p>
<p>Corporis rerum qui temporibus, dolorem?</p>
<p>Sit natus assumenda inventore odio!</p>There’s a lot more to Emmet, check out the website and there’s also a cheatsheet available.
You can also use Color Highlighters, for sublime.
And, you can use Pigment, for Atom Editor.
If you all are wondering whether it will work in all the other editors, then the answer is YES!
Thanks for reading! If you liked this article, You can also give support here: https://buymeacoffee.com/divadugar
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
