Search for a command to run...
I am a computer engineering undergraduate highly interested in Data engineering, Artificial intelligence, Machine Learning and Natural language processing. I like exploring and learning new technologies and I will be writing various blogs here during my learning journey
No comments yet. Be the first to comment.
Part 1 of 2: This post covers building the foundational data pipeline for a healthcare claims analytics project called claims-pulse. We walk through realistic data generation, uploading to S3 using bo
Introduction Most data engineering tutorials hand you a clean CSV file and say, "Here, load this into a table." Real life is nothing like that. In the real world, your data source is an HTTP API that
Introduction In data engineering, efficient infrastructure management is as crucial as building robust data pipelines. As data volumes grow, scalability and resilience become essential for seamless processing and analytics. Kubernetes simplifies this...
Introduction In the era of big data, organizations generate vast amounts of unstructured data in formats such as JSON, CSV, and TXT files. Processing and analyzing this data efficiently is crucial for real-time decision-making. This project demonstra...
Image: Amazon Q Overview Today, in the vast landscape of technology, one fascinating area that's capturing everyone's attention is AI, especially generative AI. You've probably heard of generative AI tools like ChatGPT, DALL·E, GitHub Copilot, Midjou...
Once, I was watching a frontend design tutorial on YouTube and noticed that the tutor was typing HTML code really fast. When I looked carefully, I saw him typing some snippet like code which turned into HTML code automatically. Later, he mentioned that the code he was writing was Emmet. I then did some research on my own to learn about Emmet and was fascinated by it. So, now let me explain to you what Emmet actually is through this blog.
Emmet is a plugin for many popular text editors which helps in writing HTML code for your webpage. As mentioned in its official website, it is an essential toolkit for web-developers. Many text editors allow the user to store some commonly used code blocks which can later be reused. These code chunks are called snippets and help to boost productivity. But the main issue with snippets is that they should be manually defined by user and can't be extended in runtime. Emmet takes this concept to the next level, where snippet codes are CSS-like expressions that are dynamically parsed and output depends on what is typed in Emmet abbreviation. The syntax of these abbreviations are inspired by CSS and these abbreviations are parsed in runtime transformed into a structured HTML code block. Emmet is specially developed and optimized for web-developers whose workflow depends on HTML/XML and CSS, but can be used with other programming languages too. As Emmet is written in pure JavaScript, so it works across different platforms like web browsers, Node.js, Microsoft WSH etc.
I will now show you an example of how you can write a big chunk of code using a single line of Emmet.
<div id="home">
<div class="logo">LOGO</div>
<ul id="navbar">
<li class="navitem"><a href="" class="navlink">Item 1</a></li>
<li class="navitem"><a href="" class="navlink">Item 2</a></li>
<li class="navitem"><a href="" class="navlink">Item 3</a></li>
<li class="navitem"><a href="" class="navlink">Item 4</a></li>
<li class="navitem"><a href="" class="navlink">Item 5</a></li>
</ul>
</div>
#home>div.logo{LOGO}+ul#navbar>li.navitem*5>a.navlink{Item $}
Here, in this Emmet abbreviation every symbol has a meaning.
There are many other such symbols and syntaxes, and you can learn more about it from this cheat sheet.
Emmet Cheat sheet: Emmet Cheat Sheet
After reading this blog, I hope that you have now some more understanding about Emmet. So to conclude, Emmet makes web development much easier and I hope you all will be using this wonderful toolkit. If you want to learn more about it, do check references section. Feel free to comment below to express your thoughts.