Math and front-end | Hacker News Reader

Math and front-end

chenhuijing.com

113 pointsadishaporwal20 comments

He's talking about basic arithmetic. Sums. Averages.

(Front end design ought to have more math behind the scenes, like a constraint solver, and less arithmetic visible to the web designer.)

I was also a bit disappointed to find basic arithmetic. There is more. I was expecting something like an algorithm for a tile layout like https://masonry.desandro.com/ or https://github.com/d3/d3-hierarchy#treemap. In terms of animations, understanding linear algebra can help you take full advantage of CSS matrix and matrix3d transforms. Certain parallax effects can be done done better with trigonometry...

When you're implementing a user interface, you typically have some "design" or model of how it should work in your head. The main challenge is translating this intuitive model into a formal model that the computer can interpret for you. Math can definitely help you with this!

I think we should be emphasizing mathematical knowledge in front-end design and implementation, not trying to hide it under the covers. The better you are at math, the easier it is for you to implement the correct system for the design you want, and the less you have to compromise the design to fit the systems you have at hand.

IIRC Apple had a svg layout system that used integer programming for optimizing layout.

At least, the dot graph layout language uses integer programming to lay out it's graphs.

How would one express those constraints? I think it's more efficient to let a human designer figure out some approximation of decent design and usability.

The way it's done in 2D sketch programs such as the sketch feature of Fusion 360 or Autodesk Inventor. Graphically. I've discussed this before on HN. All the modern CAD systems do this.

It took decades to get CAD GUIs right, but now they're quite good. They solve a far harder problem than web design. Look to them for guidance.

It's a completely different problem. CAD tools are modeling the physical world, so physical constraints make sense. UI designs often include completely non-physical dynamics that would be difficult to model using CAD-like constraints.

iOS Auto Layout is an example

Tantek Çelik did some of this experimentation, amazingly, over a decade ago (2001). Right-click for his CSS: "A Study of Regular Polygons" http://tantek.com/CSS/Examples/polygons.html

I pretty much just abuse flexbox to make things go where I want them to. It's nice to see how you'd calc all these things though!

Off topic, but are there any accessible resources to learn: 1. How fonts get rendered? What happens when I present browser with a font file and some utf-8 bytes, how does it convert this into viewable text.

2. Once browser creates DOM and CSSOM how does it use this information to create the view that I see?

Here's a good resource:

https://developers.google.com/web/fundamentals/performance/o...

Hey nice resource but this is more of a tutorial on how to optimize font loading etc... >The browser performs layout and paints content to the screen. This is the step I want to understand more thoroughly..

I'm surprised at the lack of talk about matrices with regards to frontend for animation.

Game developers have to know far more math than web developers. Basic game developers need to know trig and matrix math cold. Advanced game developers need differential equations for physics engines, some topology for mesh handing, and AI for NPCs.

I find the font on this site pretty annoying to read.

Same, and this seems to happen so much on different websites that I made this bookmark:

    javascript:(()=>{document.querySelectorAll("p,div,article,section,ul,ol,li").forEach(x=>{x.style["font-family"]="Verdana";x.style["font-size"]="16px";});})();

It selects all tags that generally contain content and sets the font to Verdana, with a font size of 16px. Whenever I get to such a site, I just click the bookmark and it's readable.

You may also read it on Medium: https://blog.logrocket.com/math-and-front-end-context-is-so-...

You have control over what your computer does. You don't have to accept things you don't like. Change it.

Sure! For example I commanded my browser to close this page.

Reply on news.ycombinator.com