Welcome Message Fiddle


CTRL + A then Backspace? I guess I could add a button too…


Don’t worry about it if you don’t want to. You technically built it for PC browsers. I was using it with iOS Safari. Its a better editor than the one welcome messages have…


Today I learned if you build something people will use it on a phone…

I’ve updated it yet again :slight_smile: You should find it a better experience on your phone now, and maybe also on a PC.


Very true. I was thinking of something similar the other day. I usually try to make my HTML web projects resize, and make the buttons easier to tap with how small the browser window gets. I was thinking about how welcome messages are simmilar. They are going to look differen’t on a phone than on a tablet since phones are smaller. For example, I took the navigation bar you gave me, and added a media rule so it would resize when someone is using a phone (see image below).

If I didn’t make the welcome message resize, the 3rd button would not display correctly on mobile phones.

Back to your fiddle web app, By any chance maybe you could have differen’t previews? One for tablets, and one for phones? Depending on how a welcome message works, people may want or need to make it look differen’t for different sizes. :slight_smile:

Also, about the mobile usability, it is much better. But on my iPad Air running iOS 11, I am unable to tap, hold, and be able to select the code in the editor. This is why I wasn’t able to clear the text that was already in it before. Also, I can’t paste any of my own code into the editor. The buttons are grayed out, and I can’t select anything in the editor, so I can’t use the tooltip buttons. By any chance you can fix this? :slight_smile:

EDIT Ok, that was weird. Now I can paste the code in. But I still can’t select the code. The tooltip appears for half a second when I tap and hold the text, but doesn’t stay long enough to use the buttons on it. It is kinda important that I be able to select it, because I was trying to replace a link with another one, and it wouldn’t let me…

I just found a problem where on iOS, if you hold down the backspace key, it just keeps refreshing the preview rather than keep deleting code.

I noticed that it refreshes every time you add or remove a key, when hidden. What is really bad is when you have a JavaScript alert box, it pops up every time you add or take away something from the code, even when its suppose to be hidden. I guess I will just have to resort to removing the JavaScript alert from the code and add it later.


I think this is a bit too far out of scope for me to do. It would be a pain to make work for people on smaller devices (what would a tablet look like on a phone?) and if you are on a desktop, all browsers have built in dev tools that can do this better than I could.

I looked into this a bit, and found I have the same issue… however it seems to be a problem with the Ace editor I use to show line numbers / errors. I looked around some more and found that CodeMirror seems to have better mobile support. However, it does not (directly) show errors in your code… the syntax highlighting just goes weird. Do you think it’s worth it to change?

Actually, it seems you just have to turn on linting - I’ll probably switch

Hmmm… sounds like I should maybe make a manual run button instead of refreshing as you type… not sure how else to fix this.

And that’s why you don’t use alert boxes :wink:

Currently it will refresh after you have stopped typing for half a second. On mobile devices, yea, that’s probably once per key press… Another good argument for an explicit run button.


Took me longer than I expected, but I’ve made a few changes.

  1. Use CodeMirror instead of Ace - this has made it easier to use on touch devices
  2. Add a Run button - click this to update the iframe.

I thought I was also going to be able to get linting for CSS & JS working too… but unfortunately it seems CodeMirror can only lint one language per editor… :frowning:


i find this immensely frustrating with the new editor, that it is not a set width like the old one.
it makes it nearly unusable.


Yikes… I thought I turned on word wrap. I’ll fix that!


Ok, I can highlight text now on mobile, but only one small segment, like one word. When I tap select all, it doesn’t work. I can’t copy my welcome message code into the welcome message…


It’s been ages since I updated this, but when I last left it, I had broken the autosave feature.

I fixed this bug today and it will now save your work on every keystroke.


This tool just got an update since Chrome’s XXS auditor got smarter… and broke it.

Share URLs are now shorter since they are run through a compression algorithm before being saved.