Hi everyone!
We just released the Elixir Language Tour guide – an interactive intro to Elixir.
The guide itself is written in Elixir and runs fully in your browser – all of this thanks to Popcorn 
The guide is in fact an interactive version of the Elixir’s Getting Started guide - a part of it is covered, for now.
We’re looking forward to your feedback - if you like it, we’ll extend it further!
Happy hacking 
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
livebookblog 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-repoand 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?
What is the delay for a new
Erlangand/orElixirversion support? Are there other limitations?
We currently only support Elixir 1.17.3 and OTP 26.0.2 That’s because we need to patch the Erlang and Elixir stdlib to make it work on AtomVM. Support for other Elixir versions won’t be a massive effort, but for now, we want to support one fully. See the blog post or the talk if you’re interested - they’re pretty up to date.
Oh, so you can’t make it parallel?
Since compiling a module can take minutes, it won’t help I think there are serious bottlenecks there, and we need to figure it out before we move forward.
I’ve been playing with it, super cool! It makes me want to find an excuse to use Popcorn for something
One feature request: make the divider between the instructions on the left and the code/results on the right drag-able. The code’s width is currently fixed to half the screen width which feels cramped on my screen.
I also 2nd the feedback that all the IO.inspects distract from the examples and that something similar to Livebook cells would be preferable.
Wow 
very nice! I really enjoyed trying it out.
I don’t know how much data it consumes downloading the WASM blob, but usage was smooth and fun!
I tried on my phone and noticed two possible improvements:
I first read the first page and when I clicked “next” I landed at the a page with only the code example and results area, took me some time to realize I needed to scroll up to read the page text. Scroll position preservation makes this behavior the same for all page transitions.
For the execution history, I don’t know what it was meant for, but I found it confusing that it shows history for all executions globally, so when I see the long list of past executions I cannot tell what page it related to (other than comparing to the code in each page).
Thanks again for the guide and for
Just looking at the Popcorn site even makes me think back to the marketing conversation a while back.
This is so cool and this is the kind of thing that brings in new people (Livebook too).
We need more cool things like this that show off the ecosystem and the cool stuff that can be built. We get really excited about cool things within the community but that’s because we know the language. More things like this that don’t require knowing the language beforehand makes it easier for us to engage with other developers outside the community.
Very cool, congrats on the launch! Can’t wait to play around with this 
Not sure if this is known but in the iEX, pressing tab causes a crash unless it can successfully autocomplete what you’re typing. E.g. typing Str and then pressing tab will autocomplete to String. But if there are multiple options, it’ll crash.
avm_iex(2)> Aborted()
worker sent an error! https://popcorn.swmansion.com/wasm/AtomVM.mjs:1: RuntimeError: Aborted(). Build with -sASSERTIONS for more info.
Super cool, we’re just starting some internal training on Elixir, and this will definitely be a resource we use!
Thanks for putting this together!
Wow, this looks really cool, @mat-hek! I love the idea of learning Elixir directly in the browser with an interactive guide — makes it so much easier to get hands-on without having to set up anything locally.
I’m definitely going to give it a try and see how the Popcorn-powered tutorial feels. Excited to see how you expand it in the future — interactive learning like this is a game-changer for picking up a language quickly. Thanks for sharing!
© Copyright Elixir Forum | Terms | Privacy & Cookies
