Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joelnet/html-lang

HTML is a Programming Language!
https://github.com/joelnet/html-lang

Last synced: 4 days ago
JSON representation

HTML is a Programming Language!

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:

name:

gender:

height: cm

```

## 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.