diff --git a/www/public/site.css b/www/public/site.css index 008f7088d3..a458b6664c 100644 --- a/www/public/site.css +++ b/www/public/site.css @@ -29,7 +29,7 @@ code.snippet, samp { .ann { /* type annotation - purple in the repl */ - color: rebeccapurple; + color: orchid; } .autovar { @@ -37,6 +37,22 @@ code.snippet, samp { color: green; } +.str { + /* automatic variable names in the repl, e.g. # val1 */ + color: goldenrod; +} + +.str-esc { + /* automatic variable names in the repl, e.g. # val1 */ + color: cyan; +} + +.str-interp { + /* automatic variable names in the repl, e.g. # val1 */ + color: white; +} + + /* Used on on the different-names page. */ th, td { diff --git a/www/public/tutorial/index.html b/www/public/tutorial/index.html index cdfb56ca92..8197c3bc4d 100644 --- a/www/public/tutorial/index.html +++ b/www/public/tutorial/index.html @@ -19,8 +19,7 @@

This tutorial will teach you how to build Roc applications. Along the way, you'll learn how to write tests, use the REPL, and optionally annotate your types.

-

Installation

- +

Installation

Roc doesn't have a numbered release yet, but you can download a nightly release of the roc command-line executable from the Releases page (under "Assets"). After you unzip it, @@ -28,26 +27,22 @@ Mac or Linux, and on Windows).

-

You'll know it worked when you can run roc version in your terminal and see it print out some version information. If you get stuck, there are plenty of people happy to help if you open a topic in the #beginners stream on Roc Zulip Chat and ask for assistance!

- -

Strings and Numbers

- +

Strings and Numbers

Let's start by getting acquainted with Roc's Read Eval Print Loop, or REPL for short.

-

Run this in a terminal:

roc repl

If Roc is installed, you should see this:

The rockin’ roc repl

So far, so good!

-

Hello, World!

+

Hello, World!

Try typing this at the REPL prompt and pressing Enter:

"Hello, World!"

The REPL should cheerfully display the following:

-"Hello, World!" : Str # val1 +"Hello, World!" : Str # val1

Congratulations! You've just written your first Roc code!

-

String Interpolation

+

Naming Things

When you entered the expression "Hello, World!", the REPL printed it back out. It also printed : Str, because Str is that expression's type. We'll talk about types later; for now, let's ignore @@ -60,15 +55,22 @@ just there as a convenience.

Still, while we're talking about them, let's try it out. Put this into the repl and press Enter:

val1

You should see the same "Hello, World!" line as before.

-

You can also create your own names for expressions. Try entering these lines:

+

You can also assign specific names to expressions. Try entering these lines:

greeting = "Hi" audience = "World" -"\(greeting), \(audience)!" -

After entering that last one, you should see this output:

-"Hi, World!" : Str # val2 -

This

-

Arithmetic

-

Next let's try putting in a more complicated expression:

+

From now until you exit the REPL, you can refer to either greeting or audience by those names!

+

String Interpolation

+

You can combine named strings together using string interpolation, like so:

+"\(greeting) there, \(audience)!" +

If you put this into the REPL, you should see this output:

+"Hi there, World!" : Str # val2 +

Notice that the REPL printed # val2 here. This works just like +# val1 did before, but it chose the name val2 for this +expression because val1 was already taken in this REPL session. As we continue entering more +expressions into the REPL, you'll see more and more of these generated names. +

By the way, there are many other ways to put strings together! Check out the documentation for the Str module for more.

+

Arithmetic

+

Let's try putting in a more complicated expression:

1 + 1 2 : Num *