Similar projects and alternatives to juice
Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.
Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
Collect and Analyze Billions of Data Points in Real Time. Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
juice reviews and mentions
Announcing Vituum - Template engines and more in Vite
4 projects | dev.to | 30 Aug 2022
In-lining Styles Client Side
7 projects | dev.to | 11 Nov 2021
And it in-lines tagged HTML wonderfully. Works well.
Immediately disconcerting is the npm documentation for this package. It says simply "Inspired by juice" and fails to tell us why the authors felt that embarking on a new project was worth their while. It hints at the fact that it's better than Juice in some way or other (why else start a new project inspired by it?), but lays no claim as to if or how that might be the case. A dark horse.
Still, it also depends on cheerio, and so falls a little short of a native solution but worse, it does not provide us with any suggestion as to run-context (server side or client side).
So for my needs, it goes respectfully into the too-hard basket. Failed, in a sense, by the poor quality of its own introductory presentation. An irony, because there is some nice documentation there, just not a nice introduction that spells out whether it runs client-side or not, how to if so, and how it's different from Juice and why we'd use it. All the obvious questions I have surfing in on it.
document.styleSheetsprovides us with a collection of
CSSStyleSheet.rulesin turn provides all of the
CSSStyleRulesin use and
Element.matches()tells us if
CSSStyleRule.selectorTextapplies to a given element.
window.getComputedStyle()provides rapid access to the complete set of computed styles. That is, crucially it has taken all those styles that position things relative to the browser window and calculated where, in real coordinates it landed. Among other things. Crucially, it also has resolved all of CSS variables. It describes what an element actually looks like on the screen, rather than in the abstract CSS.
We can use the style sheets and the computed styles to update the style attribute of each element and then, when all is done the
outerHTMLare available for the the
text/htmlMIME parts respectively.
Given we're in-lining styles, and we don't want to actually change the element in the DOM (we're just aiming to copy it to the clipboard in one form or another), we have to take a copy of the DOM element and in-line the styles on that. We have to use the computed style from the source element however as it is rendered on screen and the copy is not (hence has not got computed styles). To wit, we will have a source and target element one that is in the DOM and provides computed styles, and one that is not in the DOM and receives in-lined style attributes.
But ... performance, performance ... turns out that it's not slow, but it's not fast either, let's take a look at performance next, before we dive into an actual code implementation of the above schema - next week's article.
Automattic/juice is an open source project licensed under MIT License which is an OSI approved license.