Minimize an HTML page with inline CSS using whatever novel techniques you can think of without affecting the presentation of the document.
Write a microservice to consume the HTML, save an email document to a database with the original and transformed versions of the document, and send the transformed result in an HTML email to a specified recipient.
- You MAY use any language.
- You MAY use any HTML or CSS parsing libraries.
- You MUST NOT use any libraries specifically designed to minimize HTML or CSS.
- You MUST implement at least 3 strategies.
- You MUST NOT use removal of comments or whitespace or any of the examples as one of the required strategies.
- You SHOULD NOT spend too much time on it.
- You SHOULD write tests.
- You SHOULD open source it.
- You SHOULD ask questions if anything is unclear.
Consider the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>Rebelmail Code Challenge</title>
<style>
h1 {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<p><span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<style>
span {
font-family: monospace;
}
</style>
</body>
</html>One strategy may be to combine the style elements into one:
<!DOCTYPE html>
<html>
<head>
<title>Rebelmail Code Challenge</title>
<style>
h1 {
font-family: monospace;
}
+
+ span {
+ font-family: monospace;
+ }
</style>
</head>
<body>
<h1>Hello world</h1>
<p><span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
- <style>
- span {
- font-family: monospace;
- }
- </style>
</body>
</html>Another strategy may be to then combine similar declarations into a single selector:
<!DOCTYPE html>
<html>
<head>
<title>Rebelmail Code Challenge</title>
<style>
- h1 {
- font-family: monospace;
- }
-
- span {
+ h1, span {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<p><span>Lorem ipsum</span> dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
</body>
</html>Good luck!