https://github.com/00000o1/- Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions For + Enterprise + Teams + Startups + Education By Solution + CI/CD & Automation + DevOps + DevSecOps Resources + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} 00000o1 / - Public * Notifications * Fork 1 * Star 28 Hyphen - An elegant custom element base class 00000o1.github.io/-/ License Apache-2.0 license 28 stars 1 fork Activity Star Notifications * Code * Issues 1 * Pull requests 1 * Actions * Projects 0 * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Security * Insights 00000o1/- This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. boss Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags Name already in use A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch? Cancel Create 1 branch 0 tags Code * Local * Codespaces * Clone HTTPS GitHub CLI [https://github.com/0] Use Git or checkout with SVN using the web URL. [gh repo clone 00000o] Work fast with our official CLI. Learn more about the CLI. * Open with GitHub Desktop * Download ZIP Sign In Required Please sign in to use Codespaces. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @00000o1 00000o1 Fix example src link ... 44664bb Nov 5, 2023 Fix example src link 44664bb Git stats * 25 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time examples Fix example src link November 6, 2023 00:08 -.js Remove debug logging November 5, 2023 22:28 .gitignore Initial commit November 5, 2023 14:25 LICENSE Initial commit November 5, 2023 14:25 README.md Simplify overview November 5, 2023 22:24 index.html Fixed bug in mobile safari. Closes #2 November 5, 2023 17:45 package-lock.json V 0 November 5, 2023 14:50 package.json Good v.0.0.2 November 5, 2023 17:43 View code [ ] - What great developer ergonomics? Introduction and Code Example Non-technical Introduction Developer Overview Example Code Our manifesto Why use Hyphen and how to use Hyphen? How can I learn even more Inspirations aka I'd like to thank the Academy... Bonus Section Just for Creatives I'd like to contribute! What can I do? Setting up the dev environment General Contribution Guidelines The Upside-Down aka Bonus Section Just for Meanies I'm preparing to comment about this and want to be mean, what's the bad news? Begun, the flame war has I'm unsatisfied that the above is sufficiently negative, what other bad news can you give me? Bonus Section for Acolytes and True Believers I have decided to pledge my life to your cause and throw everything I've got on your bandwagon. How can I best organize? README.md - Hyphen - A custom element base class for great developer ergonomics. What great developer ergonomics? * * `${template} literals` * * inline=events * Minimal boilerplate * Small class size It's important to remember that what constitutes great ergonomics, like great sports car seats, varies for individuals. While there may be some things we can all agree on, other things may be harder to. It's good to keep this diversity in mind when evaluating any project. Introduction and Code Example Non-technical Introduction Hyphen is a client-side JavaScript file that helps web developers easily make and manage custom parts of a website, like buttons or menus, without dealing with complicated code. It makes the usual tricky parts of web development simpler so that developers can build websites faster and with less hassle. Developer Overview Hyphen simplifies the creation of custom Web Components, which are a standard for reusable user interface elements for web pages. It does this by providing developers with a base class that streamlines the integration of state management and templating, thus addressing common challenges such as verbose syntax and complex lifecycle handling typically associated with native custom elements. Hyphen is also very short, making it easy to build on as a custom element base for your applications. Example Code In this example, we create a MyGreeting element that uses Hyphen's base class to manage its state and respond to user interactions. This element displays a greeting message that changes when the button is clicked, demonstrating the dynamic capabilities of Hyphen with minimal coding required. Hyphen Example With Hyphen, you get a streamlined workflow for your custom elements where the usual complexities are handled for you. Our manifesto We want to build something that works for you. Or, rather, some of you; but not all of you. We are very comfortable with that tradeoff, and you should be too. However, if you care enough to be passionate, then please use or contribute if you like Hyphen, or please use or make something else if you don't. Either way, please be respectful and considerate to anyone you're dealing with. Why use Hyphen and how to use Hyphen? The aim is to minify the keystrokes required to use custom elements, while providing other great ergonomics, too. You template with state properties directly, no state. prefix required. You use JavaScript template literal syntax, not another DSL. For events you use inline event handler syntax, with some syntactic sugar to let you use instance method names directly in the attribute. Finally, we support void custom elements in templated values, and automatically expand these to their correct final form with end tags. How can I learn even more Study the examples in index.html to fully learn the current system. Ask questions in issues if you need more help! Inspirations aka I'd like to thank the Academy... Hyphen is inspired by: * React * HTMX * LitHTML * Svelte * Angular * Brutal.js * Good.html * VanillaView * Years of coding experience and knowing what we want Bonus Section Just for Creatives I'd like to contribute! What can I do? Please consider adding some more examples to index.html. Examples are essential for learning about Hyphen, filling bugs and adding features. Another way to contribute is to browse current issues. Setting up the dev environment 1. Clone the repo. 2. Run npm i 3. Run npm test Note: npm test may fail if you don't have localhost certificates. You could make these with letsencrypt, but you can easily just run server -p 8080 to run a dev server on 8080. General Contribution Guidelines In general, empathize with others and remember this is a meritocracy of ideas, yet with clear goals. We may reject your ideas because they don't align with our aesthetics and ergonomics, but that doesn't mean your ideas are "bad". If your ideas are good and support our goals, we gladly include them! --------------------------------------------------------------------- The Upside-Down aka Bonus Section Just for Meanies I'm preparing to comment about this and want to be mean, what's the bad news? We use: * regex to parse inline handlers and void tags * with and eval for magic templating Some people consider them dangerous and want to outlaw their use. We consider them powerful and useful. with, eval and regex are ways to simplify our code and deliver great ergonomics. Begun, the flame war has Pick your side, we don't care. What we do care about tho, is good developer experience. Plus, it's kind of fun to flirt with danger now and then, don't you think? Where's your spice of life? [?] I'm unsatisfied that the above is sufficiently negative, what other bad news can you give me? This is in alpha. You probably don't want to use it for production unless you can handle the risk. You can help imporve it's stability with constructive and respectful pull requests and issues. --------------------------------------------------------------------- Bonus Section for Acolytes and True Believers I have decided to pledge my life to your cause and throw everything I've got on your bandwagon. How can I best organize? We're not a cult and not looking for recruits, sorry. If you're passionate enough to care, contribute! But this is a meritocracy of ideas, yet with clear goals. We may reject your ideas because they don't align with our aesthetics and ergonomics, but that doesn't mean your ideas are "bad". If your ideas are good and support our goals, we gladly include them! About Hyphen - An elegant custom element base class 00000o1.github.io/-/ Resources Readme License Apache-2.0 license Activity Stars 28 stars Watchers 2 watching Forks 1 fork Report repository Releases No releases published Packages 0 No packages published Languages * JavaScript 70.2% * HTML 29.8% Footer (c) 2023 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time.