Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joelnet/html-lang
HTML is a Programming Language!
https://github.com/joelnet/html-lang
Last synced: 6 days ago
JSON representation
HTML is a Programming Language!
- Host: GitHub
- URL: https://github.com/joelnet/html-lang
- Owner: joelnet
- Created: 2021-10-01T23:53:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-03T22:43:55.000Z (almost 3 years ago)
- Last Synced: 2024-08-01T19:55:07.214Z (3 months ago)
- Language: HTML
- Size: 842 KB
- Stars: 303
- Watchers: 9
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML is a Programming Language!
HTML is now a Turing complete programming language with the `html-lang` library.
`html-lang` is experimental and currently in development. So that means don't go slipping this into your production site! Proceed at your own risk!
`html-lang` features no build step, no bundling, no webpack configs. Open up your HTML, include the script and start writing HTML.
At only 5.7kB (gzip) in size, `html-lang` is a tiny but powerful framework.
## Why?
Most frameworks are designed to be template engines. These typically mix their template language and JavaScript. Meaning you write and tie together both.
While `html-lang` is similar to quite a bit of existing tech out there, the focus of this library is to bring that programming feel to HTML.
This allows you to stay inside the framework.
## Install
Include the script tag into the `` section of your HTML.
```html
```
## Variables
Variables are globally scoped.
```html
```
## Computed Values
The computed value syntax has a `:?` at the end of the Variable name.
```html
```
## Output
Display a Variable
```html
```
## If / Conditional
```html
X is GREATER than 10!
```
An `else` can follow an `if` element.
```html
X is GREATER than 10!
X is NOT GREATER than 10!
```
## Loops
A `for-of` loop will loop through all the items in the collection, setting the item to the variable specified.
```html
```
A `for-in` loop will loop through all the items in the collection, setting the index to the variable specified.
```html
```
`for-of` and `for-in` can be combined together if they both point to the same collection.
```html
-
.
```
## Subroutines
A Subroutine can be created to run common tasks. Subroutines take no arguments and return no values, but do have access to the variables.
## Fetching Data
```html
Loading...
Error:
```
## Examples
### FizzBuzz
```html
FizzBuzz
```
### TODO List
```html
add
-
X
```
### Dialog
```html
Hello Dialog!
```
### More Examples
- [Memory Game](https://codepen.io/joelnet/pen/BadymQz)
- [Calculator](https://codepen.io/joelnet/pen/porzEPv)
## Alternatives
- [Alpine.js](https://alpinejs.dev/) — Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.