enhance-starter-project VS awesome-tagged-templates

With all this in mind, one of the first side projects I spun up for myself after joining Begin in 2022 was to investigate how we could make responsive images easier for users to author in their Enhance projects. While by no means revolutionary, the core concept was to make a configurable, standards based, single file component available to users, which would simplify the implementation of responsive images in addition to eliminating the need to generate arbitrary image variants by hand. I (and my colleagues at Begin) went through multiple iterations and proposals for this project, weighing everything from the pros, cons, and most compelling use cases of the Image and Picture elements, to different component signatures, options, and patterns for configuration.

It’s 2024, and you are about to start a new project. Do you reach for React, a framework you know and love or do you look at one of the other hot new frameworks like Astro, Enhance, 11ty, SvelteKit or gasp, plain vanilla Web Components?

If you disagree with this article, maybe try out Enhance in anger and let us know what you think.

The other file in that example is JS, and interestingly it uses a plain template literal without an `html` tag or anything to help with language tools and syntax highlighting

https://github.com/enhance-dev/enhance-starter-project/blob/...

When zx first appeared, it was a tiny esm script that just proposed a new idea for how child_process.spawn API could be enhanced with string template literals.

The template combines HTML and JavaScript. To understand this approach, consider how PHP pages are generated. In PHP, code is embedded within the HTML. Similarly, this library leverages JavaScript template literals to achieve the same objective. From the definition: "Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates".

The numbers we are printing are monetary values so they are missing a decimal value and a currency symbol. One way we can do this is by using JavaScript template literals to append and prepend the pieces we are missing.

Tagged templates[0], the language feature that enables this, were introduced in ECMAScript 2015 apparently – arguably at least somewhat new in the lifespan of JavaScript. :)

Java is getting a similar feature with template processors[1]. It would be nice to have it in Python as well – i.e. not just f-strings, but something that (like tagged templates) allows a template function process the interpolated values to properly encode them for whatever language is appropriate (e.g. shell, SQL, HTML, etc.).

[0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

[1] https://openjdk.org/jeps/459

References: Template literals (Template strings)

We are using a string template literal to create the tag and the ${} syntax to provide string interpolation, that is, substituting the values of href and altText into our string.

In TypeScript, a string literal type is a type that represents a specific set of string values. For example, the type "red" | "green" | "blue" represents the set of three string values "red", "green", and "blue". Template literal types allow you to perform operations on these string literal types using the same syntax as template literal strings in JavaScript.

The example also showcases the use of inline templates, employing JavaScript Template Literals. The JSON data obtained from the GET request is accessible through the "data" variable.

These are called "tagged templates": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...