Make GIF of usage

[fregante]

We need a gif to put in the readme that shows how they users can benefit from GhostText. I made the video but it wasn't really thought out and people have told me Yeah it's cool, but why use it?

For us it's obvious, but some may not realize what they're missing:

• Multiple cursors
• Automatic formatting (like this bullet points list)
• Shortcuts (like ctrl+D)
• Autocomplete (like with Emmet and Hayaku)

  What I'm asking

Specific (quick) examples to type for each of those (and more). Eventually it might even replace the video altogether.

Autocomplete example:

Type emmet#works.here [tab]

Output: <emmet id="works" class="here"></emmet>

Here's an example GIF

[fregante]

By the way you can see an issue with the selection in Chrome at some point. We should probably just get rid of that feature, especially because right now it only works ST->Ch and not vice versa. IMHO the only thing that would be nice is to update the cursor's position, just so the user won't feel lost.

[Cacodaimon]

Yeah the video didn't show all the cool features, I will do a little script and record a video today.

[fregante]

Will you record it at double the resolution like mine?

[Cacodaimon]

Yeah I will set my desktop resolution down to 1280x720 this should archive the same effect.

[fregante]

No it's not the same. My desktop was at 1920x1200 but the windows were huge and visible even from the thumbnail. Let's figure out what to write first and let me do it

[Cacodaimon]

This is my new try making a video, the res is now FullHD, the GT icon is displayed in the browser, no OS elements are visible, it is only 1:30 short and shows three examples: markdown, SQL and Emmet… This might be too long as gif, but it is shareable via reddit, twitter…

https://www.youtube.com/watch?v=av7gp9qcViA&feature=youtu.be

[Cacodaimon]

It seems you are in holiday or in a project crunch time, I currently shared the video at reddit: http://www.reddit.com/r/webdev/comments/2eismv/ghosttext_use_sublime_text_to_write_in_your/

[fregante]

I didn't answer because I'd sound like a broken record: I said we should define what to do before making the video. The video can be better.

[Cacodaimon]

Then we had a communication problem here.

Yeah the video could be better, but even a better video could be better… Take a look at the first one this one was good enough to attract many people no matter how good or bad it was. Lets make and plan a better one when we have new features like this: https://github.com/Cacodaimon/GhostText-for-Chrome/issues/36 for example.

To cut a long story short, yes a better video could attract more people but I don't think it is worth aiming at the perfect feature video.

But I got two interesting comments at reddit :

What's the benefit of using this over Chrome's workspaces features?

and

I actually prefer brackets http://brackets.io

Both guys where thinking GhostText would be some kind of live HTML editing tool, if we make a new feature video showing features like content editable in combination with emmet could confuse the people another point might be changing the following text to be more accurate:

Use Sublime Text to write in your browser. Everything you type in the editor will be instantly updated in the browser (and vice versa).

What do you think?

[fregante]

That text is specific to Sublime Text, so he obviously said "I prefer ". It could have been "Use your text editor to write in your browser" as a generic title and that would have been avoided.

The other comment is just stupid and didn't even watch the video. It's obvious that it's not the same thing.

What do you suggest for the description? The only improvement I could think of is "Use your text editor to write comments in the browser" but it's restrictive, especially now that proper JS code editors are supported.

The video could be improved simply by following my previous comments:

• speed up the video
• use a HiDPI mode (which is not the same as just increasing the screen resolution)

plus, maybe:

• short scenes, with an intro slide describing what's about to happen.

Look at the short gifs this guy makes, they're easy to follow and very focused: https://twitter.com/umaar

The video could just be a sequence of multiple scenes like that. We can tap into a variety of large communities just by making community-specific gifs (and maybe merge them into a single video, which I'd simply avoid) for example:

• use sublime to type on StackOverflow (show off TextArea)
• use sublime to write on CodePen (CodeMirror)
• use sublime to write in WordPress (ContentEditable) and share it with WordPress authors
• … Tumblr theme editor (this is big)
• … GitHub

etc

[Cacodaimon]

What do you suggest for the description? The only improvement I could think of is "Use your text editor to write comments in the browser" but it's restrictive, especially now that proper JS code editors are supported.

Yes the comment part is too restrictive but I think that we don't have to mention that JS code editors are supported, I for my part was never interest why or how the code was highlighted when typing somewhere in web where a JS code editor was used. Maybe we should use a word which includes all possible supported element like "text box"?

Use your editor for live editing any text box in your browser.

The video could be improved simply by following my previous comments:

• speed up the video
• use a HiDPI mode (which is not the same as just increasing the screen resolution)

HiDPI is only available on Mac I think, my Linux does not support something like this. I personally dislike speeded up videos because they are hard to follow especially when there are multiple "chapters".

plus, maybe:

• short scenes, with an intro slide describing what's about to happen.

I like this Idea!

Look at the short gifs this guy makes, they're easy to follow and very focused: https://twitter.com/umaar

This is awesome, do you have any idea which software this guy uses for recoding the gif?

The video could just be a sequence of multiple scenes like that. We can tap into a variety of large communities just by making community-specific gifs (and maybe merge them into a single video, which I'd simply avoid) for example:

This is a great idea, but a single video containing some example (with the slides) is still great for sharing via YT…

[fregante]

Windows and OSX both have HiDPI. I can do the HiDPI video like I did before.

Sped-up videos are a necessity; no one is gonna watch a 2/3-minutes video of someone typing. You just need to "pause" on the important parts when recording the video: notice how I pause for half a second before selecting "GhostText" in ST, before clicking on "Install", before clicking on the icon, etc. It's really easy.

I for my part was never interest why or how the code was highlighted when typing somewhere in web where a JS code editor was used

That's not relevant, what matters is that the user can edit text on the sites that use those non-textarea editors.

[Cacodaimon]

Sped-up videos are a necessity; no one is gonna watch a 2/3-minutes video of someone typing. You just need to "pause" on the important parts when recording the video: notice how I pause for half a second before selecting "GhostText" in ST, before clicking on "Install", before clicking on the icon, etc. It's really easy.

As long there is no significant speedup during typing, because I think it's hard to recognize that the changes a done live when speeding up the video too much.

Windows and OSX both have HiDPI. I can do the HiDPI video like I did before.

If you find the time can you try a Firefox video?