enhance.dev
awesome-tagged-templates
enhance.dev | awesome-tagged-templates | |
---|---|---|
18 | 26 | |
72 | 92 | |
- | - | |
9.2 | 10.0 | |
5 days ago | about 3 years ago | |
JavaScript | ||
- | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
enhance.dev
- Enhance – The HTML first full stack web framework
-
Introducing Enhance Movies
We are excited to present our non-trivial learning application, Enhance Movies, designed to highlight the exceptional web development experience you get from Enhance. Our movies app is built with Enhance and The Movie Database API. With a strong focus on simplicity, performance, progressive enhancement, and offline local development capabilities, this application is set to transform your understanding of what can be done by focusing on the web platform.
- Enhance.dev
-
Above the Clouds With the New Enhance Landing Page
Those of you who’ve visited the Enhance website recently may have noticed a big change: we launched our first proper landing page! Although this project was primarily my baby over the last couple months, a lot of other folks were involved — from the stellar (and heartwarming) design & illustrations by Dani Raskovsky, to art and content direction by our very own kj, and additional ideas and feedback from the rest of the Begin team. We’re all thrilled to have this project out in the world, and we hope you’re as delighted as we are with it.
-
Full-stack Web Apps Without React
Enhance is relatively new, even compared to some of the newer tools we're talking about in this post, having been released in August 2022. It is an application framework that supports server-side rendering via Lambda functions.
-
Redefining Developer Experience
Once you’re familiar with the basics (or if you are already and want to take them further), Web Components offer a standards based methodology for creating custom reusable components. As previously mentioned, Web Components require JavaScript to run in the browser by default, and their class based interface can take some getting used to. Enhance, our HTML first framework, steps around this issue by providing you with a standards compliant way to render custom elements on the server, only requiring you to interface with the Web Components JavaScript API when progressive enhancement is called for. Plus, we’ve got a really cute mascot. Give Enhance a try today!
-
Why does everyone "suddenly" hate Single Page Apps?
There are so many remarkable new approaches like Astro, Qwik, 11ty and Enhance built around HTML-first promise that leverages the platform. If you decide to try out Enhance, please let us know what you think, as we’d love the feedback. Follow us on Mastodon and join our Discord.
-
Uploading files with HTML forms: Part 2
In Part 1 of this series we covered the HTML first solution to uploading files. In this we have made some small improvements with JavaScript. The full example repository with the code in this post can be found here: https://github.com/ryanbethel/thumbnail-upload-example. Try out enhance.dev for your next project. It has pretty much everything you need to build a functional web app.
-
Maintain scroll position across page loads without an SPA
To solve the scroll jumping we can monitor the scrollTop setting for the sidebar and restore that location if we reload the page. Enhance.dev uses custom elements to build reusable components. The is one of those components. One of the benefits of custom elements is that we can easily attach JavaScript progressive enhancement behavior in a script tag defining that element.
-
What's next on your JavaScript framework radar for 2023? (Front End)
https://enhance.dev is really powerful. Can do **way** more than a lot of the current frameworks with much less code.
awesome-tagged-templates
-
Building a Dynamic Client-Side Blog with Secutio & Bootstrap
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".
-
Number and Currency Formatting in JavaScript using Intl.NumberFormat
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.
-
Bun 1.1
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
-
JavaScript Template Literals
References: Template literals (Template strings)
-
A React Developers Guide to Writing Enhance Components
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.
-
TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality
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.
-
Exploring Secutio Task by Task. Setting "Events" Like Stylesheets!
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.
-
The Bun Shell
These are called "tagged templates": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- AI for Web Devs: Your First API Request to OpenAI
- Java String Interpolation final in Java 23
What are some alternatives?
arcdown - A small stack of Markdown tools configured using some preferred conventions for creating technical content rendered and served from a cloud function.
rewrite-styled-components - Rewrite library styled-components in ~ 60 line code
enhance-movies - A demo application built with Enhance, the HTML first framework. Powered by Begin and The Movies DB.
dom-examples - Code examples that accompany various MDN DOM and Web API documentation pages
enhance-styles - Functional utility classes
bnx - zx inspired shell for Bun.
exalt - A JavaScript framework for building universal apps.
enhance-starter-project - file based routing metaframework for blazing fast custom elements
astro - The web framework for content-driven websites. ⭐️ Star to support our work!
dax - Cross-platform shell tools for Deno and Node.js inspired by zx.
wc-icon-rule - A spicy horizonal rule
gptcli - ChatGPT in command line with OpenAI API (gpt-3.5-turbo/gpt-4/gpt-4-32k)