I'm developing an app that teaches programming and I need your help
52 replies, posted
Hey!
For the past year I've been working on a web application that has a goal to provide an easy way to get started with programming.
It uses a custom programming language and editing environment. Think of this whole thing as a stepping stone before transitioning to Java, Ruby or Python.
The code for exercises can be edited and run directly in the browser, no need to download or install anything.
Please take a look and tell me what you think.
http://wisest.one
I opened up the introduction and I already have no idea what I'm looking at.
And I've been programming for 8 years.
Have you taken a look at the instructional video linked in the introduction comments?
I did not even know there was one.
It is not clear what the purpose of the website even is to begin with, as the UI does not reflect it at all.
Yes, you can see that one text out of many says "introduction", but even once you jump there you're straight in some sort pastebin-ish interface with a foreign structure and controls that are unnecessarily detached from the elements they affect.
Fiddling with random keys and clicking on text that doesn't look like links, they might find that the page is not actually all just text, but interactive, only to be told at the end of the string of comments that there is also a guide and that to actually do something they'll be going to a different view entirely.
Making the user explore to figure out what it is they're looking at (instead of the interface being self-explanatory) is bad UX and will reflect negatively in user retention.
This is especially important since you're planning on providing a guide to beginners, who have a short attention span and will move on to the next (user friendlier) tutorial.
First of all, I would like to let you know that I appreciate your feedback, a lot.
Did you try editing and launching the program? Does the whole idea make sense to you?
Is there a reason why you're using a completely original programming language? Especially one that has so much superfluous and scary syntaxing for even the most basic "Hello world"? I feel like this is more intimidating and perplexing than just sending someone to an online python interpreter. https://www.python.org/shell/ has a great tutorial with an interactive, working python shell. Which I feel is really intuitive, and is directly useful in building skills toward programming with python.
The UI definitely needs to be reworked to be more obvious on what to do, the comments telling me to edit the code while the code is not editable is pretty annoying.
When I just got started with programming I thought that most of the beginner tutorials are kinda boring. Most frequently they are all about printing stuff to console.
The idea here is to teach basic programming techniques through the series of interactive and visual projects. If you ever heard of Processing (http://processing.org) then you will know what I mean.
Another point is that a dynamic language like Python makes it impossible to provide a comprehensive code completion. Having a decent code completion helps immensely.
In general, watching a video or listening to audio as a tutorial is an instant nope from me.
Why though?
Unless it's a tutorial for something that is auditory or visually based (ie: 3d modeling, video editing, audio editing, and so on), a text and image-based tutorial is the best format to actually use. Most people feel pressured to move at the tutorial's pace when it's a time-based tutorial rather than working at their own pace to figure things out better too.
I see your point, but in this particular case the video is showing how to use the UI. I actually tried to write this in text, but it turned out to be rather long and hard to digest.
https://www.youtube.com/watch?v=jyKzkzGVwBE
then use screenshots with arrows or something.
Ultimately, UI shouldn't require much explanation, let alone a video. Personally I think it would be better to have some kind of drag and drop (mouse control) or just a regular text editing window
If you want to be an efficient programmer you need to forget about the mouse, everything can be done through a keyboard. It really is incredible how a few shortcuts can save a tremendous amount of time.
That's a value judgement and has nothing to do with learning to program. You can make a webapp about learning to code or a webapp about learning vim but if you try to do both then people won't like it
I personally don't think it's useful to teach someone a pseudo/teaching language when you can teach them a real applicable one. Sure some of the skills transfer, but I feel like it would damage someone's learning when there's much less documentation and help threads compared to some standard languages. It might give them the impression that they can't search up stuff for help.
As for the interesting visual aspects, why not use something like LOVE 2D, Pygame, WebGL, or Unity? All of them use powerful languages with a very clear-cut worfklow. (Unity probably being the most confusing, with Love 2D being the most basic.) I feel like a tutorial could be much more powerful when it's built on the shoulders of giants. If the user needs help with any of these "engines", there's a plethora of youtube and stack overflow help available in many languages. WebGL is possible to keep embedded in the web browser as well, though I feel like whether it can embed or not shouldn't really come into consideration.
Though it's probably too late to re-do the entirety of the training app, it is something to think about.
Finally I agree with Fate, me and many others aren't going to watch a youtube video to figure out how to use the app. If a video is required to know how to use it, then you probably need to rethink the UI.
At home I use nvim, and at work VS and a whole lot of clickies. Would say I'm equally productive on both, not as if programming is about typing 24/7
For an user point-of-view, what's the benefit of using your website, against something like codecademy, etc? It would feel a bit too much to have to watch a video on how to use an UI, and then learn a custom programming language on top of that just for a tutorial (especially since they'll need to learn another language to actually do stuff with, outside the tutorial). If someone's stuck, google also won't be of help here.
The custom programming also raises other concerns. If this is someone's first programming experience, they won't know what's custom or not (!). For example, on comment 7 of your first lesson, you mention:
Remember that global objects have an asterisk in front of their name.
Now imagine this very same person taking a CS course, on their way to their first C class. Needless to say there'll be confusion (dereference/deref operator in C++). (Another small example is how you use # for every lvalue but not for rvalues, making it feel very ambiguous for a newcomer on what's a variable to begin with)
There's more I could comment but people above have done a much better job than I have, such as
1. if the UI isn't intuitive and quick to learn, then it needs to be rethought as nael pointed out
2. custom language is confusing for both learning & retained knowledge (people taking this tutorial will need to learn another language after, syntax conflicts)
3. why would an user use this instead of a well-known service? Is there anything you plan on doing to make this a differential? (hackerrank did this really well imo)
Not to be rude but you really shouldn't teach programming with some over-complicated made up language that has no applicable use case. That hello world example perfectly shows that the language uses odd syntax and symbols for apparently no reason.
No one cares if you use mouse with keyboard or just keyboard...
If you want to be an efficient programmer you need good knowledge of math and physics and ability to write logic using the given programming language and ability to solve the problems, that's the only thing your employer would care about.
You don't even need fancy text/code editors.
You definitely won't need physics knowledge unless you work on games or robotics (or certain high-tech fields).
Maths is definitely helpful though, even if I'd say that programming usually doesn't use it explicitly.
A good UI is one you don't have to teach. But for a learning application, it needs to be simple enough that someone can learn through interaction. What works in this case is making a tutorial project.
It's a step by step of instructions on the process of completing work etc.
If your UI needs a video, it sucks. Everything else not covered would go in a knowledgebase / FAQs etc.
If your aim is to teach people to program, you make it sound like a fucking abysmal learning curve
Knowing shortcuts does not make for an efficient programmer, knowing how to write optimised and maintainable code makes an efficient programmer.
Starting through Unity would be hard.
Let's say I want to teach python through some sort of graphical library like the ones you've mentioned.
Just to get started you need to:
Download and install an editor like Atom or Sublime
Download and install Python binary
Download and install a package manager like pip
Likely need to install git
Install the graphics library through the command line
My goal was to provide something that allows you to begin programming NOW. Just open a webpage, read the instructions and start building stuff.
Go for Javascript then. The language has its issues but it requires zero setup since it just requires a browser and it'll be easier to integrate it with your site.
Have you ever used Canvas API? You need a solid grasp of JS before getting your hands on it.
Don't start with the canvas api then? lmao. Just because there's relatively advanced api's to use doesn't mean you have to use them.
As I've mentioned before, the whole idea revolves around building visual stuff instead of just fiddling around with DOM.
I mean stuff like this:
Portrait Painter
It was actually one of the very first parts of Javascript I learned. For basic things, including learning programming, it's really not all that bad at all.
And you don't necessarily need to rely on a canvas either if your main focus is to teach programming anyways. You can fairly easily setup a pseudoconsole if you know what you're doing which would allow you to present console output, such as errors, without having to make the user open their browser console.
On top of that Javascript is an easy to learn and flexible language and many of the concepts used in Javascript are frequently used in other languages as well, they just tend to be somewhat more complicated. So Javascript is actually a good starting point in that regard.
Then you can write a small helper/wrapper library for using canvas.
This stuff looks really advanced for something you'd be using to teach programming.
Library needs to be downloaded, put in the proper directory, properly linked in the HTML file. Seems quite tedious to me.
Sorry, you need to Log In to post a reply to this thread.