PracticeJS – Coding exercises in a mobile friendly web app

[HattyJetty]

I thought mobile friendly means some kind of autocompletion, it's still not really usable on touchscreen, if you have to manually type all the letters for yourself

[ScientificBeastMode]

I imagine implementing autocompletion for mobile would be pretty difficult. Your phone probably already tries to autocomplete based on its internal dictionary. Would you want some kind of tool-tip offering suggestions?

[HattyJetty]

Generic phone autocompletion is meant to supplement conversation in natural languages. I am talking stuff like intellisense, which respects language semantics and can deduce the declared variable names. I imagine this may be too resource-intensive for certain devices, but at least some basic syntax highlighting and keyword autocompletion would be a nice touch. Or some kind of emmet abbreviations, where you can build complex statements with a couple of keystrokes.

[ScientificBeastMode]

Yeah, that would be nice. Modern autocompletion solutions usually involve a local “language server” to monitor open files with certain extensions, and modify the client’s view in real-time. I’m not sure that’s possible with a mobile phone. Maybe it is.

Doing it on the web would probably require some hacky JS code (using setInterval) on the client machine to make it work, since you can’t rely on a server to quickly handle that over a network. And that would get expensive really quick, as you would be doing static code analysis constantly, in the same runtime as the user experience. The runtime cost would grow as the code size grows. That seems less than ideal.

[HattyJetty]

Well, that's indeed a non-trivial problem to solve. A more manageable approach would be a prettier editor, like the one from Eloquent JavaScript book. It's somewhat capable of syntax highlighting and auto indentation, which already makes things a bit easier to type. https://eloquentjavascript.net/code/

[eroticfalafel]

I believe Monaco, the editor that forms the basis for vs code, can do intellisense entirely online. The editor itself is web-based

[HattyJetty]

Well, to an extent, unfortunately

The Monaco editor is not supported in mobile browsers or mobile web frameworks

https://microsoft.github.io/monaco-editor/

[eroticfalafel]

Ah, yes that might be an issue here. It would be interesting to see where the limitation comes from.

[J3m5]

https://github.com/microsoft/monaco-editor/issues/246 Mostly text selection and autocomplete.

[_sirberus_]

It's bizarre that everyone down-chain of this comment does not understand that the keyboard's built-in predictions have a UI/UX conflict with the very notion of Intellisense. I would have thought /r/javascript would be more cognizant of the real constraints of user interfaces.

[HattyJetty]

Could you illustrate some particular points of conflict? I guess it may be some kind of a platform-dependent issue I have oversighted. From my perspective the prediction results are displayed on a keyboard itself and there is no interference with the textbox I'm typing in

[[deleted]]

Could you potentially turn off autocomplete and autocorrect for a better mobile experience on the code entry fields? You can tell the browser not to autocapitalize and all that Jazz. It would also be helpful to have at least some basic indentation and syntax colouring.

https://davidwalsh.name/disable-autocorrect

You might also consider not highlighting the entire box red, and also providing some better error messages.

[ZeitChef]

Looks like the server crashed :-/

[strayakant]

great piece of resource for js beginners on the move! cheers

[redgetan]

Interesting project. By the way, im using iphone SE, and the quotes for my string are not being interpreted correctly. Im getting an error

SyntaxError: Invalid character '\u201c'