<commit_before># ICFP Tutorial - Justin's part

- Basic syntax
- Run button
- File storage features
- Language is currently untyped
- Simple HTML example
- Purposely trigger crash?
- Try a couple tools if wanted, perhaps rename?

# Steps

## Introduction

```
main =
  [ "div"
  , []
  , []
  ]
```

We can output HTML nodes by creating this tree structure:

```
main =
  [ "div" -- tag name
  , []    -- attributes
  , [ [ "h1"
      , []
      , [ ["TEXT", "Hello, world!"] ]
      ]
    ]
  ]
```

## Variables

We can introduce a variable:

```
name =
  "Justin"

main =
  [ "div" -- tag name
  , []    -- attributes
  , [ [ "h1"
      , []
      , [ ["TEXT", "Hello," + name + "!"] ]
      ]
    ]
  ]
```

## Bidirectional Programming 1

Uh oh! Formatting issue ("Hello,Justin!")! We can add the space in the output, and add the space to the "Hello, " string (not the name string).

```
name =
  "Justin"

main =
  [ "div" -- tag name
  , []    -- attributes
  , [ [ "h1"
      , []
      , [ ["TEXT", "Hello, " + name + "!"] ]
      ]
    ]
  ]
```

## HTML Literals

This tree is really clunky/annoying to type out, though... luckily, we have HTML literals! Notice the @ sign.

```
name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
  </div>
```

Now let's make a list of our favorite things.

```
name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      <li>Raindrops on roses</li>
      <li>Whiskers on kittens</li>
      <li>Bright copper kettles</li>
      <li>Warm woolen mittens</li>
      <li>Brown paper packages tied up with strings</li>
    </ul>
  </div>
```

Let's add some additional information to these list items.

```
name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      <li>I like raindrops on roses</li>
      <li>I like whiskers on kittens</li>
      <li>I like bright copper kettles</li>
      <li>I like warm woolen mittens</li>
      <li>I like brown paper packages tied up with strings</li>
    </ul>
  </div>
```

## Functions

That was a lot of typing! Let's abstract it into the function so we don't have to ever do that again in the future (change to "really like").

```
like x =
  <li>I really like @x</li>

name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      @(like "raindrops on roses")
      @(like "whiskers on kittens")
      @(like "bright copper kettles")
      @(like "warm woolen mittens")
      @(like "brown paper packages tied up with strings")
    </ul>
  </div>
```

## List Mapping

But we can do better! Let's make a list of our favorite things, and map over it:

```
like x =
  <li>I really like @x</li>

myFavoriteThings =
  [ "raindrops on roses"
  , "whiskers on kittens"
  , "bright copper kettles"
  , "warm woolen mittens"
  , "brown paper packages tied up with strings"
  ]

name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      @(List.map like myFavoriteThings)
    </ul>
  </div>
```

## Saving

Now let's save the file.

## Styles

We can modify styles, too:

```
like x =
  <li>I really like @x</li>

myFavoriteThings =
  [ "raindrops on roses"
  , "whiskers on kittens"
  , "bright copper kettles"
  , "warm woolen mittens"
  , "brown paper packages tied up with strings"
  ]

name =
  "Justin"

main =<commit_msg>Add HTML export step to icfp-tutorial-justin<commit_after># ICFP Tutorial - Justin's part

- Basic syntax
- Run button
- File storage features
- Language is currently untyped
- Simple HTML example
- Purposely trigger crash?
- Try a couple tools if wanted, perhaps rename?

# Steps

## Introduction

```
main =
  [ "div"
  , []
  , []
  ]
```

We can output HTML nodes by creating this tree structure:

```
main =
  [ "div" -- tag name
  , []    -- attributes
  , [ [ "h1"
      , []
      , [ ["TEXT", "Hello, world!"] ]
      ]
    ]
  ]
```

## Variables

We can introduce a variable:

```
name =
  "Justin"

main =
  [ "div" -- tag name
  , []    -- attributes
  , [ [ "h1"
      , []
      , [ ["TEXT", "Hello," + name + "!"] ]
      ]
    ]
  ]
```

## Bidirectional Programming 1

Uh oh! Formatting issue ("Hello,Justin!")! We can add the space in the output, and add the space to the "Hello, " string (not the name string).

```
name =
  "Justin"

main =
  [ "div" -- tag name
  , []    -- attributes
  , [ [ "h1"
      , []
      , [ ["TEXT", "Hello, " + name + "!"] ]
      ]
    ]
  ]
```

## HTML Literals

This tree is really clunky/annoying to type out, though... luckily, we have HTML literals! Notice the @ sign.

```
name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
  </div>
```

Now let's make a list of our favorite things.

```
name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      <li>Raindrops on roses</li>
      <li>Whiskers on kittens</li>
      <li>Bright copper kettles</li>
      <li>Warm woolen mittens</li>
      <li>Brown paper packages tied up with strings</li>
    </ul>
  </div>
```

Let's add some additional information to these list items.

```
name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      <li>I like raindrops on roses</li>
      <li>I like whiskers on kittens</li>
      <li>I like bright copper kettles</li>
      <li>I like warm woolen mittens</li>
      <li>I like brown paper packages tied up with strings</li>
    </ul>
  </div>
```

## Functions

That was a lot of typing! Let's abstract it into the function so we don't have to ever do that again in the future (change to "really like").

```
like x =
  <li>I really like @x</li>

name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      @(like "raindrops on roses")
      @(like "whiskers on kittens")
      @(like "bright copper kettles")
      @(like "warm woolen mittens")
      @(like "brown paper packages tied up with strings")
    </ul>
  </div>
```

## List Mapping

But we can do better! Let's make a list of our favorite things, and map over it:

```
like x =
  <li>I really like @x</li>

myFavoriteThings =
  [ "raindrops on roses"
  , "whiskers on kittens"
  , "bright copper kettles"
  , "warm woolen mittens"
  , "brown paper packages tied up with strings"
  ]

name =
  "Justin"

main =
  <div>
    <h1>Hello, @name!</h1>
    <h2>These are a few of my favorite things</h2>
    <ul>
      @(List.map like myFavoriteThings)
    </ul>
  </div>
```

## Saving

Now let's save the file.

## Exporting

We can also export our output as HTML!

## Styles

We can modify styles, too:

```
like x =
  <li>I really like @x</li>

myFavoriteThings =
  [ "raindrops on roses"
  , "whiskers on kittens"
  , "bright copper kettles"
  , "warm woolen mittens"
  , "brown paper packages tied up with strings"
  ]

name =
  "Justin"

main =
{'fraction_non_alphanumeric': 0.14990781449439797, 'fraction_numerical': 0.0062402496099844, 'mean_word_length': 2.5189620758483033, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 127, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4201770', 'n_tokens_mistral': 2731, 'n_tokens_neox': 2606, 'n_words': 848}