

Show HN: WideArea – an expandable textarea - afshinmeh
http://usablica.github.io/widearea/

======
jenius
First of all, this is awesome. Great idea, can't believe it hasn't been around
till now, and will definitely be using it.

The only thing I could change here is the "x" icon when expanded. Someone
mentioned here that they would be unnerved hitting an "x" button with a lot of
text - this is definitely valid, I felt the same thing when trying it out. A
simple change to an "exit full screen" icon (like this
[http://findicons.com/files/icons/1667/iconic/32/fullscreen_e...](http://findicons.com/files/icons/1667/iconic/32/fullscreen_exit.png)),
would solve the problem nicely : )

~~~
afshinmeh
Nice! Thanks for the nice suggestion.

~~~
StavrosK
I will second it. I would also move it on the bottom right, as I didn't look
at it except with my peripheral vision and thought it was an X/close button.
When instructions said to click it, I went from "why would I click the close
button" to "oh, it's actually a fullscreen button" before I clicked it. I
never would have discovered it.

------
UnoriginalGuy
The fact it has no borders in "full screen mode" is really disorientating. I
like the concept but wouldn't use it because of the loss of visual feedback
(but full screen mode is optional which is fine).

As an aside: It is a shame this "breaks" Chrome's ability to let you re-scale
the non-full-screen box. So it is an all or nothing choice, you have to give
up something to get something...

It looks like you disabled Chrome's resizing on purpose too, which seems
unnecessary/annoying. Why break existing functionality just to add new
functionality?

~~~
fredsted
>It looks like you disabled Chrome's resizing on purpose too, which seems
unnecessary/annoying. Why break existing functionality just to add new
functionality?

That functionality can be re-enabled by changing the "resize" CSS style[0].

[0] <http://davidwalsh.name/textarea-resize>

------
mbreese
Wait, what? 2kb JS? 4kb CSS? Why does this take so much?

I use a similar fullscreen textarea toggle (actually an ACE editor), that is
very simple. For the Javascript, you just need to add a new class to the text
area. For the CSS, you need to make the '.fullscreen' class the following:

    
    
        .fullscreen {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
    

Now, this doesn't get you the little button in the upper right corner and the
styling for the full screen textarea, but it is very functional, very
configurable (just style with CSS), and quite small. Add a small button of
your own and let the browser do all of the heavy work, by just adding a CSS
class.

Oh, and this doesn't break Chrome/webkit's ability to resize the textarea when
not in fullscreen mode...

~~~
afshinmeh
Thanks, it's the first version and I'll fix this problems asap.

------
beggi
Very nice, going to use this in a project now, so thanks a lot for this. It
would be fully featured and extra sweet for me with some kind of lightweight
feature to save a local backup of entered text. :)

~~~
evilduck
Jquery required, but there's <http://sisyphus-js.herokuapp.com/>

~~~
proexploit
I also used Garlic.js (<http://garlicjs.org/>) in a project. Also requires
jQuery or Zepto but I was really pleased with it. Pretty lightweight.

------
btilly
For me the expanded text area takes over my whole window, but I can't type as
much text before hitting a line break as I can with the normal text area.

And when I'm typing into a browser, I'm usually replying to something. Being
able to read that thing I'm replying to as I'm typing has a lot of value to
me.

------
regularfry
Somewhat broken on android for me - maximise in landscape, rotate the phone,
and it goes Wrong. The text wrapping doesn't realign, and the close button is
left off screen.

~~~
afshinmeh
Thanks for report, I'm currently working on a better version for tablet/mobile
devices. Could you please report it on the Github issues?

------
aniketpant
Was this inspired by GitHub's new distraction-free comment feature? The
styling looks exactly the same.

------
websymphony
Github uses similar editor in their comments textarea. Very cool.

~~~
dybber
<https://github.com/blog/1379-zen-writing-mode>

------
daGrevis
I suggest to add key-bindings: <Control-Space> for going to wide-mode and
<Escape> for getting back.

~~~
afshinmeh
I really looking for a short-key for fullscreen mode but now you can use
Escape key for exiting the fullscreen mode.

------
grimtrigger
Looks cool. Not sure what i would use it for, though. Whats the use case you
had in mind?

~~~
afshinmeh
Writing with pleasure and keep focusing on writing. You can define your
preferred color scheme and more...

~~~
aytekin
You guys did a great job with this library. We have just added it to JotForm.
[http://www.jotform.com/blog/80-New-Editor-Options-for-
Text-A...](http://www.jotform.com/blog/80-New-Editor-Options-for-Text-Area-
Fields)

------
romaniv
Firefox and Chrome already allow you to re-size textareas. At the very least
this library shouldn't shut that functionality down.

~~~
Semaphor
Yeah, but it stays where it is. So if there are parts that would overlap it,
they do that. A particular example here is Reddit, in deeply nested threads on
smaller windows you can see maybe 30-40% of the textarea. Maybe someone will
make a Chrome extension out of this :)

------
jjmardlin
I've been using this all morning to write a blog post. Found it awesome!

I don't really know the better way, but when I have more than one page of
text, I end up with two scroll bars.

[https://dl.dropboxusercontent.com/u/37659951/WideArea%20-%20...](https://dl.dropboxusercontent.com/u/37659951/WideArea%20-%20Better%20Textarea.jpeg)

Non-ideal, perhaps a different style of scroll bar, or pushing it right to the
edge.

------
oftenwrong
Excellent. Nothing sucks more than having to use a tiny textbox or fiddle with
a resizeable one when you are trying to write something longer than a few
lines. It would be nice if it used localstorage to remember whether the user
prefers dark or light.

Personally, I prefer having my browser launch an external editor for
textareas. However, this is better for most people because it does not require
any installation or configuration.

------
joekarma
Love the control, but hate that the page's text is kept down to a dim 40%
opacity when the mouse isn't on top. I have weird mousing habits when reading
blocks of text (I move the mouse around and click random things), and it's
distracting to have the text fade out when my cursor ventures off course; I
practically have to squint to read what the ultralight and not-quite-opaque
text says when faded out.

~~~
afshinmeh
Ops! Thanks, I'll change it.

------
mgeraci
This looks great! One suggestion is that in full screen mode, the textarea
doesn't stretch across the screen (it's a centered column) but since there are
no borders it is hard to tell where the active area is. I think that clicking
on the empty space outside of the main column could give focus to the textare,
and that would have made it more clear for me.

~~~
afshinmeh
Thanks, good suggestion. It would be so better if you submit your suggestion
in Github issues.

------
tjbiddle
Bring back the ability to re-size the smaller box, and add a key board short
cut and this will be glorious :-)

Nice work!

~~~
afshinmeh
Sure, thanks for the feedback.

------
pkfrank
Very cool. Reminds me of <http://www.ommwriter.com/>. I like using minimal
text editors like this when I'm brainstorming or making a first pass at
something; good for simple, distraction-free writing. Cheers

------
electic
This is awesome but it would be great if it also expanded as you type. Like on
Facebook when you are typing a status update that is long. The box expands
vertically as you type. Neat feature. If it could do that, this thing would be
rock solid.

------
INTPenis
Reminds me of Hallo.js, which uses the Randy js library if I'm not mistaken. I
used it to make a blog for my elderly father. The goal was to make the posts
easily editable.

Edit: s/Randy/Rangy/

------
spindritf
I like it.

I'm assuming you can style colours, width of text in the wide editor, etc?
Going back to the small window with an "X" would be a bit unnerving with lots
of text typed in.

~~~
afshinmeh
Yeah you can simply create your preferred color scheme and use it. I will
release more better version next days and also an small blog post to how write
an color scheme for WideArea.

------
Pezmc
How does it handle multiple textboxes on the same screen?

~~~
afshinmeh
You will have only one fullscreen-ed textarea at the same time.

------
Deestan
Advice: Put some contrast on the page text even when not mouse-over'd. I
shouldn't have to strain my eyes to read the main page text.

~~~
ndr
I could't have said it in a better way.

------
durkie
You guys do great work! This is the third thing from your group in probably as
many months that is simple, clean, and useful. Thanks!

~~~
afshinmeh
Heeeey :) Thanks man.

------
instakill
How would you go about populating the full-screened text-box if the regular
text-box has no placeholder text?

------
AndreasFrom
Perhaps this would also be useful as a browser extension so it could be used
across the Internet.

~~~
afshinmeh
I'm agree.

------
jjmardlin
Wow, what an excellent zen writing resource. Will be using for longer writing
projects I'm sure!

~~~
afshinmeh
Glad to hear.

------
atacrawl
Very nice work. Any plans of adding the ability to automatically go fullscreen
on focus?

~~~
afshinmeh
Yeah sure, for next versions.

------
nej
I'd like this if the back button resized the textarea back to it's normal
size.

------
BillSaysThis
@afshinmeh Would this work with CodeMirror?

~~~
afshinmeh
Yes, it should work with CodeMirror also.

------
netcraft
it also breaks if you hit tab while expanded.

~~~
afshinmeh
Thanks for the bug report. It would be really good if you submit it on Github
issues.

------
Oculus
Awesome job!

------
dylanhassinger
gorgeous

