<story><title>Fold the DOM like paper</title><url>http://oridomi.com/</url></story><parent_chain></parent_chain><comment><author>dmotz</author><text>Author of OriDomi here. Really excited to see this at the top of HN.&lt;p&gt;I recently pushed out version 1.0 with some new features that make OriDomi easier to use.&lt;p&gt;It now has an internal queueing system so you can chain up effect sequences instead of dealing with callback handlers. [1] What looks like a chain of synchronous calls will now be deferred and sequenced automatically, e.g.:&lt;p&gt;folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold();&lt;p&gt;Secondly, OriDomi elements are now fully responsive, meaning they adapt to changing dimensions caused by media queries, window resizing, etc. You can see this behavior with the demos by resizing your browser, or on the current iteration of my personal site. [2]&lt;p&gt;Finally, there are two new methods that make it easy to do custom folding behavior and content manipulation, .map() [3] and .modifyContent() [4]. The former lets you pass your own function to define folding based on input angle and panel index.&lt;p&gt;It&amp;#x27;s still relatively lightweight with zero dependencies and 7.6KB gzipped and minified. More than anything, a testament to what you can do with the modern browser API.&lt;p&gt;Looking forward to seeing what else people do with it. Check out the annotated source [5] for a look at how it works.&lt;p&gt;[1] &lt;a href=&quot;http://oridomi.com/#queueing&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;oridomi.com&amp;#x2F;#queueing&lt;/a&gt;&lt;p&gt;[2] &lt;a href=&quot;http://oxism.com&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;oxism.com&lt;/a&gt;&lt;p&gt;[3] &lt;a href=&quot;http://oridomi.com/#custom&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;oridomi.com&amp;#x2F;#custom&lt;/a&gt;&lt;p&gt;[4] &lt;a href=&quot;http://oridomi.com/#content-manipulation&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;oridomi.com&amp;#x2F;#content-manipulation&lt;/a&gt;&lt;p&gt;[5] &lt;a href=&quot;http://oridomi.com/docs/oridomi.html&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;oridomi.com&amp;#x2F;docs&amp;#x2F;oridomi.html&lt;/a&gt;</text></comment>
<story><title>Fold the DOM like paper</title><url>http://oridomi.com/</url></story><parent_chain></parent_chain><comment><author>vanderZwan</author><text>Funny coincidence, I just started a casual discussion about origami and programming with some friends yesterday:&lt;p&gt;&lt;i&gt;So, my friend Torsten (who is really into papercraft and origami) explained to me the purity hierarchy within the papercraft community.&lt;/i&gt;&lt;p&gt;&lt;i&gt;At the bottom is having to cut the paper and use glue in your creations.  One level above that is if the form requires only cutting or tearing. Getting more and more pure is the form known as kirigami, which involves cuts but is made from a single sheet of paper as the base. At the top is origami - no glue, no cuts, only folds (although I&amp;#x27;m not sure if there is such a thing as higher order origami), and ideally only one sheet of paper.&lt;/i&gt;&lt;p&gt;&lt;i&gt;The comparison with functional programming (&amp;quot;no glue and cuts&amp;quot; and &amp;quot;no state&amp;quot;) is so obvious I&amp;#x27;m surprised I&amp;#x27;ve never seen it in the wild - maybe because programming has more in common with algebra, whereas origami is geometric?﻿&lt;/i&gt;&lt;p&gt;Although mostly unrelated to this library, we &lt;i&gt;can&lt;/i&gt; conclude that some of the effects in OriDomi should be in a section called KiruDomi. ;)&lt;p&gt;Actually, from a usability perspective, I see a problem with using those effects, like &amp;quot;twist&amp;quot; and &amp;quot;fracture&amp;quot;: once scrambled, it is not obvious from the shape in which way to drag to unfold again, unlike with an effect like &amp;quot;stairs&amp;quot;</text></comment>