Phoenix Live Head
HTML Head manipulation for Phoenix Live
Provides commands for manipulating the HTML Head of Phoenix Live View applications while minimizing data over the wire.
The available command actions support a variety of utility operations useful for HTML Head manipulation. Such as setting or removing tag attributes and adding or removing CSS classes.
A special feature is the use of the {dynamic} tag in values. This saves data over the wire by only sending the dynamic part of an attributes value.
DO NOT USE THIS LIB…
…would for sure draw your attention. This lib is rather low-level. When you use it, consider publishing a convenience lib with higher-level functions or request one in this topic. Data minimization rules can be added to this lib on request.
Convenience libs currently available:
Showcase / Tryout / Demo
There is an example app available for inspection. This example app is using the higher-level Phoenix Live Favicon which depends on Phoenix Live Head.
Data minimization
The lib minimizes data over the wire to make sure it can be used in low bandwidth conditions and for very large scale apps. Those few bytes of most head changes might not look like a large payload but when you have a low bandwidth connection or 2 million clients in one chat room* every byte counts.
So this lib:
- merges head events per element
- substitutes some known element- and attribute names
- provides the {dynamic} placeholder
As a result this is the information for updating 2 favicon links (32x32 and 16x16):
- reset all favicon attributes to their initial values (reset)
- set
{dynamic}placeholder in href-attributes of all favicons to ‘green’ - set class-name of all favicons to ‘green’
# 84% reduction! (54 bytes instead of 335 bytes).
"hd", {
"f": ["i", ["d", "h", "green"], ["s", "c","green"]]
}
]
As a result the favicons change from:
<link rel="icon" sizes="32x32" class="custom" href="images/some/completely/different-32x32.png">
<link rel="icon" sizes="16x16" class="custom" href="images/some/completely/different-16x16.png">
to
<link rel="icon" sizes="32x32" class="green" href="images/green/favicon-32x32.png">
<link rel="icon" sizes="16x16" class="green" href="images/green/favicon-16x16.png">
