Better Web IDE

Added something extra this morning. Menu support for icons :)

1 Attachment

Guys just want to say that this looks really great, I'm sure you will sell more Espruinos just on the looks of this new IDE!

If I could have only one wish - please don't change to some stupidly small fonts like in the current WebIDE.

@graf I think the minimum we go down to is around 12pt in some locations (the titlebar / options text), but if there is somewhere in the current IDE you really find small, do let us know and we can try and make sure we make it better in this version.

Gordon has already added the ability to change the font sizes in the code areas though, so hopefully between that and the new design, we shouldn't have anything too small.

Matt

Brilliant - thanks! All merged in. Great news about the CSS positioning - I'll have to take a look at how it's done. It's one of those things that always seems like it should be possible, but that I never manage to get the hang of.

Sorry - I work basically 11-12 hour days all week on Espruino, so I absolutely have to take the weekends off or i'd go insane :) Annoyingly that's when everyone else starts using Espruino though...

Please can some of you give this a try? I'd like to get some input so I can get this one put on the Web store ASAP :)

@mattbrailsford any reason we're not allowing the pane splitter to be moved just by dragging the horizontal divider any more? That seemed really neat - much easier to move by clicking and dragging on all that 'dead' space there.

@gordon no particular reason, other than I switched the splitter for mine so we could toggle the orientation + stop it being dragged of the edge. I'll add it to my list to take a look at.

Matt

PS Should we add these as issue on github so we can keep track of what needs doing?

@mattbrailsford thanks! Yes, it's probably best to switch to the GitHub issue tracker - it gets difficult otherwise :)

I could better like the old design, the new is black in black, not good. It takes too much space up vertically to send load and clear and so on. Move it back to the top.

Hey @frida, sorry you aren't a fan. Which bits are you referring to regarding "black in black"? I tried to keep things high contrast with white icons on dark backgrounds to make things easily discoverable, but if you think something isn't right, I'd be interested to know which bits.

Regarding the icons, I think this could be argued either way. In the initial design I found them to be too small and fidley, where as I've tried to make them more prominent / easy to hit and more logically grouped by context.

One idea I just had though that might help if you aren't a fan is to add hot-key commands to allow you to perform actions with the keyboard. Do you think this would help?

I know you aren't going to please all the people all the time, but it would be nice to see if there is a middle ground that could be had.

Matt

First of all, I like the design that Gordon have made.
The icons Gordon have made is fine on my 14" screen, and the constrast is fine too.
I need the full width, so the 2 large vertically bars with icons on, black in black, they fill to much.
About the hot-key, I am fully satisfied with icons on the top bar. I need the full width. What is under the hood, I do not care, I'm a beginner in javascript, but I like Gordon's ide as it is, so do not drive me away.
If you like your own ide, it is fine with me, no hard feelings from me.
I like people who can program, but most do not think of the users who will use those programs.

Hi @Frida unfortunately it looks set to be the new design for the Web IDE, so some bits may just have to be gotten used to.

That said, I have just implemented a "compact mode" so all the icons can be shrunk to half the size in order to maximize on space. I hope this is a good enough compromise.

Matt

1 Attachment

@Frida: Yes, we are going to move to the new IDE. I hope @mattbrailsford's recent change makes it more usable for you though.

Personally I found that on small screens (like a netbook) the old Web IDE was a disaster when accessing things like the settings menu for flashing - this one should be miles better. If you absolutely can't bear the new one, the old one will always be available here though

I know you might like the old one but I've had a lot of complaints :( At the end of the day, I can put years of effort into Espruino itself (and have!) but what most people see when they use Espruino is the Web IDE, and if that looks outdated and clunky then they'll get a bad impression of it.

@mattbrailsford I've now moved the major_refactor branch onto git master now.

@gordon great stuff, I'll work off master moving forwards then. Glad you are happy with it all.

Wow, that looks great. Great to See the web IDE will improve soon!

The new Web IDE is looking fantastic! I agree that it will boost sales. It appears and performs on a higher level than the old one. Thanks for the hard work!

The new IDE is a MASSIVE improvement, on just about every level.

Three issues I found:
When you first connect, the green bar pops up right where the first line of the console is. Could it go at the top, so we don't have to click through it or let it time out to see what is being typed into the console?

Advanced Optimizations option in minify doesn't work - it sends the code to the espruino, but the Espruino doesn't like what it's done to the code, and gives tons of errors.

About page has no version information about the web IDE itself (discovered when I tried to check the version to specify what version I was testing on for this post). I'm using the version from ~1 week ago, not sure if it has been updated since.

Also - it would be really nice to be able to set a local directory that the IDE would look for modules in before checking online - it would make it a lot easier to develop, test, and modify modules

Anyway, yeah - the new IDE is much better - Great job. Thank you!

Hey DrAzzy

The notification bar has been updated to only show on the right hand side already (yes, it was annoying :))

I'll add issues for the other items and take a look when we have a second.

Thanks for testing and reporting issues though. Really glad you like it too.

Matt

Blockquote

@DrAzzy just added the version number now :)

1 Attachment

@DrAzzy - thanks for the feedback. Please can you post some code examples of stuff that doesn't work with Advanced Optimisations in https://github.com/espruino/EspruinoWebIDE/issues/65? It could be a bug in Espruino rather than the IDE.

The problem with terminal stopping to listen (or stop to receive) seems to be Chrome related. This happens very often from terminal window, not only after connecting. Is there any known bypass, which can run in the background ?

@JumJum I believe it is because characters get lost in transmission - I'm not sure there is any way around it short of just slowing things down. It's frustrating because it appears to be just some PCs on newer versions of Chrome. Chrome pre-M33 didn't seem to have this issue.

But yes, Throttling could be set to affect only normal console, and not the flasher.

I'm pretty sure, we have at least 2 problems, may be 3.
1st happens mostly after connecting. The function to get process.env is waiting for characters very long, nothing happens. So it runs into timeout and switches back to previous listener. And now something magic sends the missing chars. I changed timeout to 1 minute, and the same happened.
2nd is the problem of sending code to Espruino and running into errormessages. Backdoor for this is to use slow mode. Here both problems are in contact. Whenever 1st problem appears, Web IDE will not recognize the board, and therefore switches to slow mode. Interesting is, that flashing a new version runs in fast mode without problems.
3rd is similiar to 1. After sending reset from terminalwindow, sometimes only parts of the messsage are in the window. In this case it helps to type a space. After that, missing part is received.

Another thing I ran into (unless this has been fixed - didn't have a chance to update IDE to latest) - The IDE will refuse to send code to the Espruino if it has a require() for a module that the IDE can't find online - the IDE should warn the user (this could be part of the syntax checking) that it can't find the module, but let them send the code anyway - because the module could be on the SD card.

For cases like yours I follow Gordon using a variable instead of a string.

var n = "myModule";
var x = require(n).....

This way, the Web IDE will not recognize the module and therefore will not miss it.

For cases like yours I follow Gordon using a variable instead of a string.

Yeah - and that's what I do. I just think it's really weird that I have to confuse the IDE in order to make it get out of my way and send the code I told it to. When that message first came up, I was mystified, looking at the little popup message trying to figure out where to click to tell it to 'ignore' or 'skip' or 'send anyway'.

Yes, I've filed a bug for that and will fix it soon.

It should still show a warning IMO - I've had a few people complain when they mis-type the module name and get a cryptic "filesystem not ready" error.