
Math and front-end - adishaporwal
https://www.chenhuijing.com/blog/math-and-front-end/#%F0%9F%8F%80
======
Animats
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.)

~~~
anothergoogler
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.

~~~
Animats
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.

~~~
panic
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.

------
JAdamMoore
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](http://tantek.com/CSS/Examples/polygons.html)

------
Waterluvian
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!

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

~~~
g_delgado14
Here's a good resource:

[https://developers.google.com/web/fundamentals/performance/o...](https://developers.google.com/web/fundamentals/performance/optimizing-
content-efficiency/webfont-optimization#optimizing_loading_and_rendering)

~~~
kgoutham93
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..

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

~~~
Animats
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.

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

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

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

