A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

[Draft Idea/Spec/Proposal] Minification of html through emmet

raphaellouis
2022-05-27

Hi all!

1. Context

  • “Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow”
  • “Emmet is a plugin for many popular text editors which greatly improves the speed with which you write HTML by allowing you to transform CSS-like selectors into full-blown HTML very fast.”
  • “Emmet abbreviation and snippet expansions are enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files, as well as any language that inherits from any of the above like handlebars and php.”

2. Features of Emmet

  1. HTML from CSS — You’ve already known how to use Emmet abbreviations: its syntax is inspired by CSS selectors.
  2. Dynamic Snippets — Each abbreviation is transformed in runtime: just slightly change its name to get a different result.
  3. Ultra-fast Coding — With Emmet you can quickly write a bunch of code, wrap code with new tags, quickly traverse and select important code parts and more!
  4. Customizable — Users can easily add new snippets and fine-tune Emmet experience with just a few JSON files.
  5. Platform for new tools — Dig into Emmet source code and re-use its modules to create your very own and unique actions.
  6. Highly Portable — Emmet is written in pure JavaScript and works across different platforms: web browser, Node.js, Microsoft WSH and Mozilla Rhino.

3. Reason

  1. Minifying the html speeds up page loading and results in happy visitors. In short, this process will remove unnecessary whitespace characters, newline characters, comments, and block delimiters from your code.
  2. My idea would be to use the emmet pattern to minify the html - emmet is easy to understand and looks a lot like regular expressions which is somehow interesting to maintain readability 3.There is not as far as I am aware of an official api to minify html 4.I would like to help the Wicg Discourse group on the html specification

3. Concept

3.1 before_minification.html

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

3.2 after_minification_with_emmet.html

(head>meta[charset=${charset}]+title\n "Title of the document"{${1:Document}})+body\n "The content of the document......"

References