Ana Tudor 🐯Easily comment/ uncomment parts of code by removing/ adding a slash.
❌ DON'T
use `div`, `span`, other random elems for range `input` value displays/ rulers
✅ DO
✨use `output` for value displays & set their `for` attr to `id` of the `input` whose value they display
✨use `datalist` for ruler & set its `id` as the value for `input`'s `list` attr
#html #code #coding #tinyCodingTip #frontend #web #dev #webDev #webDevelopment
#tinyJStip Cycling stuff around in an array! Useful when generating polyhedron vertices starting from a vector for example.
Move last array item to the start:
`pop()` + `unshift()`
Move first array item to the end:
`shift()` + `push()`
#js #javascript #tinyCodingTip #code #coding #frontend #webDev #webDevelopment
#tinyCodingTip... but also super important!
Before filing bugs, thoroughly check your code for typos. Trust me.
I have started 2024 by embarrassing myself.
Two things I do a lot when coding:
1⃣ generating random values
2⃣ rounding (to a certain number of decimals)
Which is why this has to be one of my most used functions: generate a random number in the [min, max] interval with at most dec decimals.
#tinyCodingTip #JS #JavaScript #coding #frontend #webDev #webDevelopment
Also #tinyCodingTip: random uniform sphere surface distribution with polar coordinates!
u = rand(0, 1)
v = rand(0, 1)
❌ DON'T (pole clusters)
θ = 2·π·u
φ = v·π - π/2
✅ DO
θ = 2·π·u
φ = acos(2·v - 1) - π/2
➞x,y,z
x = r·cos(φ)·sin(θ)
y = r·sin(φ)
z = r·cos(φ)·cos(θ)
Pure CSS illustration of concept 😼
https://codepen.io/thebabydino/pen/yLzxdjj
#CSS #CodePen #3D #maths #geometry #mathematics #coding #frontend #webDev #webDevelopment #distribution
To create a random uniform distribution of particles inside a disc of radius R with polar coordinates:
❌ DON'T (we get middle clustering)
θ = rand(0, 2·π)
r = rand(0, R)
✅ DO
θ = rand(0, 2·π)
r = sqrt(rand(0, 1))·R
Illustrated with #CSS https://codepen.io/thebabydino/pen/ExwRZQj?editors=0100
Polar ➞ Cartesian coordinates: an interactive demo I coded to illustrate the relation. Drag slider handles that control the radial & the angular coordinates to see to see how x,y change!
https://codepen.io/thebabydino/full/KNxXZJ
So you have an rgb string and want to convert to hex?
Here you go! I personally like this better than the bitwise shift method (which I've used in the past too).
In case anyone is wondering. I'd assume the bitwise shift is faster. But it's not like I could ever *notice* a difference.
FYI: Per spec, if we only explicitly set one value for the background-size of a CSS gradient, the second value (along the y axis) *should*, per spec default to 100%.
I often didn't explicitly set that 2nd value to 100% because of this. Turns out, some Safari versions are not going to set it to 100% and that breaks gradient backgrounds.
Context: https://mastodon.social/@anatudor/109841427100391256
Am I evil? Yes, I am... this coding video just got to 666 views 😈 https://www.youtube.com/watch?v=fRF-K2HACgg
