
How Math Helped Me Write Less Code and Made Our App Faster - redonkulus
http://yahooeng.tumblr.com/post/76324905222/how-math-helped-me-write-less-code-and-made-our-app
======
vjeux
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.

I'm working on a blog post about it. In the meantime you can look at other
image layouts I wrote about:
[http://blog.vjeux.com/category/image/](http://blog.vjeux.com/category/image/)

~~~
skj
That sounds very interesting. I look forward to the post. Is there any rss-
like feed?

~~~
jewel
If you paste that URL into a feed reader it should find the feed link from the
page source.

It's [http://blog.vjeux.com/feed](http://blog.vjeux.com/feed), in case your
feed reader doesn't do that for some reason.

------
drakaal
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.

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:

[https://www.mashape.com/stremor/automatic-image-crop-and-
res...](https://www.mashape.com/stremor/automatic-image-crop-and-resize)

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.

~~~
mlvljr
You could actually specify options for the images when they are cropped, like
"crop-center" or smth -- that would allow to center a photo around the eyes,
and a landscape around the horizon line center.

Now, add a face (and landscape) recognition to this, properly optimize, and
get a (deserved) as-smart-and-powerful-as-google feeling down your spine :)

~~~
drakaal
You didn't play with it. It does object detection. It is as "smart and
powerful as google". That's kind of our thing. We are smarter than Google, and
working on the more powerful thing.

If you give it a pic with you off in the corner it will crop around you. If
you give it a pic with a laptop sitting on the right third it will crop around
that. It is pretty smart.

~~~
mlvljr
You could speak of that from the start :)

------
bbx
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 "Pinterest-like" layouts.

Keep in mind though that some simple techniques that require(d) JavaScript can
(now) be achieved with CSS only. I'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's
height, whereas the browser's rendering engine could actually achieve it way
more efficiently and with only a couple of lines of CSS code.

------
rsxzi

      var h_c  = (q_b - q_a + r_a * p + (r_b + r_a) *
                 ((p + q_a - w) / r_a - p)) /
               (-r_b - r_b / r_a * c - c);
      
      var h_b  = (p + q_a - w) / r_a - p + (1 + c / 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;
    

Up next - How Self Obfuscation Secured My Position As a JSPro!

~~~
chrismorgan
The real code would of course be accompanied with explanation of what the
variables all are, the procedure used, how the matrix can be reduced, etc. Any
things like this will inevitably, _sans_ comments, be difficult to make head
or tail of. That doesn't mean that they're bad techniques.

~~~
jheriko
> Any things like this will inevitably, sans comments, be difficult to make
> head or tail of.

perhaps true (maybe). but if the variables were named properly we would at
least have a decent idea of what the expressions actually are - even if we
can't then infer what they are for from that information.

imo that is precisely what a comment is for - explaining an algorithm or
things that look unusual, not merely explaining what a variable is - which imo
is precisely what a variable name is for.

~~~
pessimizer
Sometimes what variables represent is too complicated to be expressed in a
variable name. If you insist that all variables be semantically intelligible
without reference to the part they play in the entire algorithm, you may be
committing yourself to a less efficient algorithm that isn't any more
flexible.

Is there something wrong with code that is too dense to be self-documenting,
especially if you're willing to write and distribute a paper to explain it?
Would you understand "pivot" in quicksort if you hadn't read a description of
how quicksort works?

------
noelwelsh
Interesting write-up. I'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.

Somewhat related, I came across an interesting method to resize images called
"seam carving". 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:
[http://en.wikipedia.org/wiki/Seam_carving](http://en.wikipedia.org/wiki/Seam_carving)
There are nice demos on Youtube as well:
[http://www.youtube.com/watch?v=6NcIJXTlugc](http://www.youtube.com/watch?v=6NcIJXTlugc)
Now imagine doing this on the front-end (might be possible now in real-time)
and the layouts this would allow!

~~~
eru
> Now imagine doing this on the front-end

Like, in the browser?

~~~
noelwelsh
I can't tell if you're being sarcastic or not, so I'll give you the benefit of
the doubt.

Yes I mean in the browser. The convolution (edge-detection) is definitely
possible in WebGL, and the dynamic programming algorithm probably is, so you
could probably get sufficient performance in the browser to do this on
multiple images in real time.

~~~
eru
Not sarcastic. I just didn't know whether you meant the browser or eg the last
layer of, say, PHP before it leaves the server.

------
est
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?

~~~
sethkojo
Nope, I personally think it's bad design in that there is too much color in
too many places. I don't know which stories are important and which aren't.
Worse yet, I can't even read the headlines because the pictures are so
distracting.

The linear model is much easier to parse since the stories are sorted. The
grid model is not inherently worse, but they would need a better understanding
of color to make it work. Maybe a bit less saturation to give prominence to
the headlines?

~~~
Consultant32452
There's a difference between "pretty" and "useful." IMHO the Yahoo Food site
is pretty while sites like Reddit and Hackernews are useful. There's a place
for both, and each will attract a different market and use case.

------
RyanZAG
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'll have
to re-work on the entire set of equations. The constraints based method they
talk about after is much better, though.

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

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

