How Math Helped Me Write Less Code and Made Our App Faster

Pro-tip: if you express your layout as a tree composed of horizontal split, vertical split and images then you can come up with a general linear system of equations that you can feed to any solver (basically just inverting a matrix) to get the layout.<p>I&#x27;m working on a blog post about it. In the meantime you can look at other image layouts I wrote about: <a href="http://blog.vjeux.com/category/image/" rel="nofollow">http:&#x2F;&#x2F;blog.vjeux.com&#x2F;category&#x2F;image&#x2F;</a>

We did a similar thing a while back when we had a similar layout on an early news site. Then I used math to make our code smarter instead.<p>Rather than having lots of weird image sizes dictate my layout, I decided to have my weird layout dictate my image sizes. The result was this:<p><a href="https://www.mashape.com/stremor/automatic-image-crop-and-resize" rel="nofollow">https:&#x2F;&#x2F;www.mashape.com&#x2F;stremor&#x2F;automatic-image-crop-and-res...</a><p>Yes. This really does crop images for any aspect ratio. Automatically. Yes, if you try and make a picture that is just your face be 1080 tall and 90 wide it will likely choose just your nose. What do you want it to do in that scenario? this is meant for taking 4:3 and making them square, or 16:9 and making them 9:16, not for taking 16:9 and making it 1:4. But it will try its darnedest.

Being able to come up with elaborate equations to draw a layout is a smart way to tell the browser how to dynamically resize and position a set of elements. It has, for example, helped me design custom &quot;Pinterest-like&quot; layouts.<p>Keep in mind though that some simple techniques that require(d) JavaScript can (now) be achieved with CSS only. I&#x27;m thinking about how to center vertically and horizontally a fix-sized box, or how to make an element take up the whole height of the viewport (without messing with the scrolling). I myself used to rely upon JavaScript calculations to retrieve dynamically the viewport&#x27;s height, whereas the browser&#x27;s rendering engine could actually achieve it way more efficiently and with only a couple of lines of CSS code.

<p><pre><code> var h_c = (q_b - q_a + r_a * p + (r_b + r_a) * ((p + q_a - w) &#x2F; r_a - p)) &#x2F; (-r_b - r_b &#x2F; r_a * c - c); var h_b = (p + q_a - w) &#x2F; r_a - p + (1 + c &#x2F; r_a) * h_c; var h_a = -p + h_c - h_b; var w_c = c * h_c; var w_ab = q_a + r_a * h_a; </code></pre> Up next - How Self Obfuscation Secured My Position As a JSPro!

Interesting write-up. I&#x27;m assuming there is a fixed number of images to fit into the layout which makes the problem a lot easier. Otherwise a bin-packing approach might be warranted.<p>Somewhat related, I came across an interesting method to resize images called &quot;seam carving&quot;. It uses a dynamic programming approach to remove rows or columns that seem uninteresting. The end result is that the important parts of the image are retained when the image is resized. The wikipedia page is fairly good: <a href="http://en.wikipedia.org/wiki/Seam_carving" rel="nofollow">http:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Seam_carving</a> There are nice demos on Youtube as well: <a href="http://www.youtube.com/watch?v=6NcIJXTlugc" rel="nofollow">http:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=6NcIJXTlugc</a> Now imagine doing this on the front-end (might be possible now in real-time) and the layouts this would allow!

Am I the only one who think the layout of Yahoo Food and Yahoo Tech is much more difficult to read than linear ones like Reddit or Hacker News?

Those equations look straight out of a book on how not to code layouts. If you need to tweak it to add an extra slot in the bottom right one day, you&#x27;ll have to re-work on the entire set of equations. The constraints based method they talk about after is much better, though.

Yippee! Finally - a real world programming challenge that looks like a problem from Project Euler!

It must not have worked; there are no double-talls to be seen anywhere on Yahoo Tech or Yahoo Food...