Elixir Language Tour - learn Elixir in your browser with Popcorn (interactive tutorial)

This is awesome!

I reckon it will quickly become one of the first things we recommend to newbies so am pinning the thread to help get as much feedback as possible

Also loving the new Popcorn website! Very cool! Excited to see what people will use for!

Very nice. Intrigued to see where this is going.

I tried to write some code (on mobile) and saw the first letter in the input field is capitalized. Maybe this helps?

Heh, I just took a look at their site and found a scrolling bug in less than a minute. I’m not sure if I’m so good or I’m just so “lucky”.

At first I was a little worried seeing iex, but looks like the shell is running in browser. That’s truly amazing how much those people already achieved. What they claim is local-first and offline support features which makes it even more interesting.

I wonder if the language tour would still work when my connection with internet would be lost? Like if it works out-of-the-box or some support has to be added …

I would like to see a project where people can connect their accounts and write their guides or document a short code samples, so they can be linked and maybe even embedded on the forum … Something like a livebook blog would be truly amazing. Currently .livemd files can be hosted in the public git repo, but page like that would give them a huge boost in popularity.

Oh wait … since everything could just work in browser, imagine a simple integration with git, so let’s call it .popcornmd could be simply imported with 0 server work. Think that you enter myelixirtutorial.com/github/your-nickname/your-repo and you can link each file just like it would be a normal web page …

Looks great!

What bugged me though, the whole first chapter teaches people to write code that won’t pass neither CR nor Credo, like

# You can also omit braces:
IO.inspect 1 + 2, label: "Added 1 to 2"

The examples do really suggest omit parentheses in function calls which is considered to be a code smell.

I think it’s impossible to get a sophisticated scrolling logic completely right Could you share a screen recording? Can be DM

At first I was a little worried seeing iex, but looks like the shell is running in browser.

Yes it does, it’s written next to the terminal Maybe changing the prompt to browser_iex or wasm_iex would make it clearer?

I wonder if the language tour would still work when my connection with internet would be lost?

Yes, it already does! To reproduce, visit the language tour, run some code to make sure that the WASM is loaded, go offline and enjoy

I would like to see a project where people can connect their accounts and write their guides or document a short code samples

We want to make the Language Tour a library that people can use to create their own guides. How exactly it would work and how we prioritise it is still unclear, though. We surely need to improve stability before we do that, not to scare people off. For the content we prepared, we could more or less verify that it works.

Something like a livebook blog would be truly amazing

We were thinking about whether the current design (a split page) is better than just a livebook-like look I think we could support both

Think that you enter myelixirtutorial.com/github/your-nickname/your-repo and you can link each file just like it would be a normal web page …

Currently the main blocker for that is compiling dependencies. It’s not feasible with AtomVM yet, because compiling bigger modules takes a very long time. We need to figure out whether/how we can improve it. Thus, we’re probably going to require precompiling dependencies for the start.

What bugged me though, the whole first chapter teaches people to write code that won’t pass neither CR nor Credo

Yes, that’s because we put IO.inspect everywhere to show what the code returns. We found it quite unreadable, thus we skipped braces for the calls to IO.inspect. But when we skipped braces, we needed to explain it’s possible.

I know it’s not ideal and I’ll gladly accept ideas on how to print results in a better way

That said, personally, I think the right approach isn’t to add braces everywhere, but to use formatter and not worry about it at all. We’ll mention that in the ‘code style’ chapter that we don’t have yet

Fun fact: using IO.inspect won’t pass Credo by default as well, no matter if with braces or without

One idea could be to use livebook-like cells, which inspects the value of the cell without a need to use IO.inspect everytime.

Another idea could be to use dbg, which removes the need for a label and reduces typing.

PS: congratulations on the release! This is huge!

congratulations on the release! This is huge!

Thanks!

One idea could be to use livebook-like cells, which inspects the value of the cell without a need to use IO.inspect everytime.

Yes, we thought about it as well. It would help, but not entirely, unless we had lots of one-line cells, which would be poor experiece IMO. But to make it more like Livebook is an interesting idea, worth exploring.

Another idea could be to use dbg, which removes the need for a label and reduces typing.

For some cases, it would do, but oftentimes the label explains better than the code alone, and dbg doesn’t print the label at all.

Thanks for your input, for now, I’ll add a comment stating that in the real world you usually use braces

I personally find the code to often be the most useful explanation (in the context of debugging), and for me it removed the need to think of a label. Also I often just dbg(my_variable) which is quite clear with well-named vars. YMMV oc

It’s very easy to reproduce. Simply make popcorn small, then scroll once to make it bigger and finally it would be big even if you scroll down. You can see the video here (note: the link will expire in 2 days). No need for DM.

Well … how to said that … It was just my first idea that come to my mind. Like a red flag you got without thinking, because you remember dangerous case from past or something like that. That’s said avm_ prefix for everyone new (including me) does not says anything. Only when I was thinking about it more I’ve realised it could be a(tom)vm, but if you don’t know this naming then it means nothing, so it may be a bit confusing for new people who just want to see it in action without going into docs at start. Both suggested names are clear enough, local_iex makes sense too, but the browser is the simplest one.

Yeah, definitely both are worth to consider. This really depends on the style. Some examples would be cleaner one and some with the other way. Think that the script is divided into pieces and each have it’s own markdown description and maybe even some heading staff … The 2 column style is good for a long descriptions and none or a very short code comments in the code. Some people just prefer to learn part by part.

Oh, so you can’t make it parallel? Is 1.19 with MIX_OS_DEPS_COMPILE_PARTITION_COUNT not supported yet? I guess if it would be supported it could be set to some default and let be changed in some simple settings form. What is the delay for a new Erlang and/or Elixir version support? Are there other limitations?