
Show HN: Expounder – A small JavaScript library for more engaging tutorials - StavrosK
https://skorokithakis.github.io/expounder/
======
bart3r
My advice would be to somehow indicate exactly the text that was expounded -
maybe with a faint underline or something. When it expands out, it's sometimes
difficult to track the exact words that suddenly appear.

~~~
StavrosK
Ah, good idea. Right now you get a fade, but that's easy to miss. Of course,
the intent is that the expounded text becomes a part of the overall paragraph,
so you shouldn't _need_ to know what was just expounded, you just read on, so
there's definitely a balance there.

Also, the text is very very easy for the website owner to style, with just a
single CSS rule.

EDIT: I've added some styling information to the page, thanks.

~~~
NicoJuicy
This is the first time i heard about
[https://gitcdn.xyz/](https://gitcdn.xyz/) while checking your page source.

That's actually a smart idea for a CDN :)

~~~
StavrosK
Yep! We were using rawgit initially, but it went down on the first day for
hours, so we changed to that instead.

------
amk_
Interesting. I personally like to use sidenotes for this type of thing on my
website; it's nice to be able to scan the sidenotes for additional info
without clicking on anything. On the other hand, they really don't work on
mobile. BigfootJS[0] is the nicest footnote-inliner I know of that also works
gracefully on small screens (unpaginated media); if you haven't seen it, take
a look.

Feedback for this library:

\- It would be cool if you could set a few preset levels of expansion (TL;DR,
expert, beginner, ELI5) and toggle them at the top of the page.

[0] [http://www.bigfootjs.com](http://www.bigfootjs.com)

~~~
StavrosK
Thanks for the feedback, the tiered approach is also something I considered,
although with a different method. You would tag things with a number from 1
for outermost to N for innermost and then let the user expand to the specific
level. I haven't yet tried that concept, but I probably will soon!

------
polm23
This is an old idea in Hypertext called Stretch Text (since 1967!):

[https://en.wikipedia.org/wiki/StretchText](https://en.wikipedia.org/wiki/StretchText)

Every so often someone hears about the old hypertext theory and implements a
Javascript or CSS version, but this is honestly one of the nicest
implementations I've ever seen. Good work!

------
Kinnard
This seems like something that could impact the nature of composition. I
wonder if writers would write differently if they knew they could "expound".

~~~
harel
Surely if you write with expounding in mind you'll take that into
consideration in your text. You DO write the expanded text after all...

~~~
Kinnard
No, I don't believe I do. I think this could be implemented into a blogging
platform— a new medium.

~~~
ponyous
Lol yeah, I feel like I want more examples to read. Easy way to filter data
you already know. I think I could learn so much faster with this if texts are
written properly.

~~~
StavrosK
I used it in "normal" usage here:

[https://www.stavros.io/posts/building-cheap-home-
sensorcontr...](https://www.stavros.io/posts/building-cheap-home-
sensorcontroller/)

EDIT: I've added a "real-world examples" section to the page with the above
included.

------
rawnlq
(As someone who can't write concisely (without inserting a lot of
(unnecessary) context)) I would love (to use) an automated version ((of this)
so I can just write with full context (and let people choose the level of
details they want (to read))).

I would love an automated version.

------
Negative1
Wouldn't a tooltip give the same information while taking up less space and
not messing up your carefully setup layout?

------
ivan_ah
Very nice, reminds me of telescopictext.

Here's an example that explains magnetic fields:
[http://www.telescopictext.org/text/pFjkqQY9bmfvQ](http://www.telescopictext.org/text/pFjkqQY9bmfvQ)

~~~
StavrosK
That's pretty much the same context, but I think the demo is lacking. For
example, clicking on "magnetic" replaces it with "B", which confuses me even
more. There's also at one point a link on "be", which is just baffling. What
is there to explain about "be"?

~~~
ivan_ah
Fully agree. Your semantics of "expounder" and "expounded" spans is much more
coherent.

It's a new modality, but I think it has a lot of potential: I love
explanations with "multiple levels" in general...

------
kaishiro
I feel like this could be a really interesting tool for wikis. It'd be neat to
be able to read what is, essentially, an executive summary of a topic, but
then be able to drill down into a path of discovery that you're interested in.

~~~
StavrosK
That's one of the reasons I developed this. You could essentially go into as
much detail as you wanted in the topic you wanted. Of course, the writer must
be careful not to overdo it, because sometimes the reader _does_ want to just
read everything, but it'd be great for things a reader might be familiar with,
or that not everyone will find interesting.

~~~
kaishiro
Yeah, nice work! I dig it.

------
watson
Reminds me a little of what Wait But Why is doing in his articles - e.g:
[http://waitbutwhy.com/2016/03/cryonics.html](http://waitbutwhy.com/2016/03/cryonics.html)
(look for "New to WBW? Open these.")

------
p0larboy
(Click -> Tool tip) works better IMO. The sudden append of words threw off my
reading rhythm.

------
steveklabnik
I've used something similar for talking about complex code examples. You can
show only the current line you're talking about, but have a button to expand
out the full example. it's pretty great. Excited to give this a try!

------
GroSacASacs
How does a screen reader handle that ?

~~~
StavrosK
I'm not sure (I'd appreciate some feedback by someone who uses one), but I'd
think it would just read the whole text. Depends on what it does with hidden
text.

~~~
GroSacASacs
I recommend reading [https://en.wikipedia.org/wiki/WAI-
ARIA](https://en.wikipedia.org/wiki/WAI-ARIA)

------
visarga
Great, a nice little used UI pattern. Now when will my Expounder Wikipedia
viewer come?

------
harel
Very nice and clever. I like it it fits seamlessly into the text.

------
ChristianBundy
I _knew_ that name looked familiar! Small world.

~~~
StavrosK
Haha, you bastard :P

