#dom #css #win
#tools https://lyft-colorbox.herokuapp.com/ hsl小色板
https://kiwibrowser.com/ 支持调试器 安卓
https://webhint.io/ 最佳实践
https://fontsource.org/
https://icon.kitchen/
http://monitor.sh
gaoding.com 在线ps
https://tool.retiehe.com/ 托管

https://vaadin.com/components/vaadin-date-time-picker/html-examples #ui

#web #css #tool 草，直接用散点transform:画吗..
https://petertyliu.github.io/toaster/

#math 如果你要在终端展示图片(RGB亮度->灰度)，就需要将稠密的浮点切成区间编号。 绿 floor(x*a)/a 在a=2 时将0~1切成2份，a=10 相当于保留1位小数(1.0内含10阶)，而 红 round 会切成4份，即数组a. a[floor(v*n(a) )]
#CSS #web 提供了 #rgb , #rrggbbaa 的 rgb(255,.) ，以及 hsl(Hdeg S%L%) 扇形选色方式，注意这不是冷知识.. color picker 都支持按色相、饱和、亮度选色， backdrop-filter:hue-rotate(1deg) 也是有的
CSS1 仅支持VGA颜色，后来有了 X11-SVG 标准色集
CSS4 支持 rgba(r g b /a) 空格格式和浮点数

相比之下，弱鸡的 #Java AWT 和 #Python PIL 就没有简单、统一可玩的API ，awt 只有光谱 CIE XYZ 这样低层的概念， getHSBColor 和又能大写又能小写的 static RED 这些……emm

#cg 在「擦拭」位图A->B渐变里，t=0~1 , 当前帧=(1-t)A+tB ；先绘制A, 再以 mask(t) 叠上B
遮罩mask 内最黑的部分代表B最先出现部分，随着t递增 所有像素渐变到B

柔和度=0 时 mask 内只有0,1 二态，所以AB中间的线(如果mask=横向渐变)很锐利
=1 时会用尽alpha色域(一般256色)渐变

#DontKnow 一如既往的Y-up 座标系(左手比枪xy, 中指z) 。 原来向y旋转是要改变x角度吗..向z旋转要改变y, 角度z 就是相对x了，对横长方体不明显..

正方体有6面，十字架展开 tp lt ft rt 凸字形:最上=顶面, bm bk 底和后，相信类似3D盒动画大家见过 --_- 。它们的 #CSS transform:
rotateX(90deg) translateY(-50%)
rotateY(90deg) translateX(-50%)
translateZ(2em)
rotateY(-90deg) translateX(-50%)
rotateX(-90deg) translateY(-50%)
translateZ(-2em) rotateY(180deg)
顶底(i=0,-2) 的角度是对应的，轴=X
前后(2,-1) 移动轴=Z —只是前后次序
左右(1,-3) 轴=Y

当你正面(xy)正方体，它可以在X/Y=横纵 距一个外点旋转(xy位置改变)，Z 就是四方本身的倾斜度
X不是横向旋转，而是“所有点绕X轴转”

然后通过 rt-lt{width} bk-ft{} 这些调参

它给每个对象创建CSS .cub-19 .face 我最佩服的..
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations
woc, Moz 这太厉害了，加速率弹球动画、alpha拖影合成，还包含位图处理，不愧是最知名的MDN啊，还有一个500行(上面 Java 版本)的渲染器 raycaster ！太牛了吧，而且也提到了 ZIM和P5.js ，梦幻联动

为啥动苏喜欢画图呢 🤔 因为图形里有许多参数是可以抽提比率增减的。尽管看起来很傻(用矢量图软件更好 没啥意义)，却非常放松。

#css ninepatch 边角吗.. https://css-tricks.com/almanac/properties/b/border-image/ 虽然很可爱但莫名有点土 😂

https://caniuse.com/css-snappoints #web
#dontknow #CSS Scroll Snap

可以替换 splide.com 用js模拟的拖拽轮播图，可grid化，配合 anim-timeline:scroll(#id) 可实现滚轮ppt驱动动画 🌚👍

CSS 相比 YAML 把 03:01 解析为24小时制秒数😅就好得多https://ruudvanasseldonk.com/2023/01/11/the-yaml-document-from-hell

另外，DOM的resize和visible(Intersect) 也是有Observer 的
DOM和CSS就是多元化 #UI 实际上的标准

http://jsbin.com/rubukabida #css 🌚突然心血来潮 复刻drakeet的知识星球之一
(没事玩玩 我也不记得他了。几年过去啦，也祝各位 #android 开发者越过越好 )
当然，web上是有1行完成的方法，但排版对齐不方便。我花6行
#code 我编程是自带框架的🌝，我不把可复用部分计入行数。总js有30行

大体10min 就写完了，移植paint花了半小时，兼容CSS花了4小时.. 确实， houdini.how 问题还不少.. 比如fill不能是线性渐变😅
TypedOM 支持上的问题让我对Chromium 的粉丝滤镜碎了一地.. 也可以说Firefox直接支持bg元素更好吧。 css4联动js上 常绿浏览器的支持都很烂

#web 此页思路：
0. Paint(f参数px和颜色集var), dragPin(ul, f_e_e0) 垫片
1. 用hsl(rand()turn 50% 70%) 🌈填色
2. tap 填N颜色，tap2s 给ul重排序乱序
3. rbRoll彩虹🌈卷 是靠N个梯形向下叠底 --lAng 底边更长 来倾斜。 #css 线性渐变就足够实现这个
4. drag f(e,e0) 会被保存，排完序自动重做用户排序😂: Bad在Good前,.

没错，[]上无需算法，全靠DOM。这逻辑2行实现，很普通的调用重做。靠 #py 都不会这么容易.. 学元编程很值
不然连1次 “f(a,b)” 如何记忆调用到[] 都不知道惹，有母语(JS)优势利于设计


另外，动苏对曾经伤害的人道歉。 就当是政治正确？🙏

把更多时间拿来思考、实现，而非写代码与争论
既然 #ai 把码字的工作抢了（是的..就训练集的质量来看 较冷门的lib 更大的项目 只要肯交流 也迟早能被半自动编程，人的工作本就是打磨设计啊🤪）
就好好享受生活（摸鱼）呗

我是喜闻乐见的🌝👍，中国存在着一些“你看不懂我NB”的特色现象，但读不懂也可能是读者sb，但由最擅长文字把戏的AI来教， 文章是否立论明确，以及低创文章的过滤 就不会碍眼了，从长远看 利于中文互联网

#cg https://www.shadertoy.com/view/wsXyD8 纯frag voxel渲染3d物体
https://www.shadertoy.com/results?query=delaunay 三角剖分(另 trianglify.io .基于delaunator和chromajs
quasicrystals准晶体
https://github.com/darobin/quasi/blob/master/examples/zm0.6S7.png

http://drawcall.github.io/Proton/#examples 粒子框架 支持圆形碰撞

#cg #CSS https://splidejs.com/ 。WebGL( 远不如 #recommend #tool https://gl-transitions.com/editor/morph
https://d.design/ 3d

https://codepen.io/zadvorsky/pen/PNXbGo 小鱼
https://tympanus.net/Development/PolygonalTransitions/ 三角形
https://webgl-image-slider.webflow.io/demo-2 极座标

#cg #CSS https://splidejs.com/ 。WebGL( 远不如 #recommend #tool https://gl-transitions.com/editor/morph
https://d.design/ 3d

https://codepen.io/zadvorsky/pen/PNXbGo 小鱼
https://tympanus.net/Development/PolygonalTransitions/ 三角形
https://webgl-image-slider.webflow.io/demo-2 极座标

#android #js #css 也支持移动端弹性动画了 https://fullystacked.net/posts/linear/

#js Nuxt vs Next https://twitter.com/chiahao_node/status/1664346321892016128?s=20

#js #cg Scratch式demo canvas 绘制
顺便推荐开源函数图 + #css houdini.how （.. 入门2D绘制时实现过，当时啥SVG和GL都不懂

许多demo我做过.. 包括 Bezier曲线 我有1行实现版, Koch雪花, 弦图, Mandelbrot(隐函数,=距离函数)
(还有个2023版的 Bezier算法

sin,cos 可视化, 果冻状的扫把树, 太阳系Ring动画 也做过 🥳

— #statement
顺手翻了以前做事情的态度， 感觉曾经很热血，喜欢背书单（完全不像我），代码量很足。其实一直有热情是好事。
想起做过 C lib.so hook, asteroids,snake 这些街机游戏 ， 觉得忘记的东西有点多

按曾经我的编程眼光，即便是在AIGC的革命下，也会觉得 Java 系的样板代码非常优美规范
像 @Path("/posts") fun getPostsForUser(@Param("user") user: User ) 这种把函数名删掉都不影响语义的框架..😆

现在的Web后端=给SQL语句注册HTTP路径和JSON验证 ，ORM=对跨语言RPC的窄化，已经失去创造力了……

但今天我是API的封装者、定义者，而不太做应用；大概这就是我加入编程的理由。我和独立开发者都不是为了“复现”而编程、不为了“理解”而写文，所以不像PL人，我乐意打发AI完成甚至所有的编写，毕竟我们追求的是高于代码的进步、和可持续创作的环境，而非持续把半条命摔在门槛上
“任何人都可以成为程序员” —黄仁勋

我敲代码，不是为了有“钱途”或拿到“特异技能点”，不是为了不“被替代”，仅仅是朝夕相伴。我甚至不觉得自己是程序员，但我很讨厌给工作造成麻烦的、计算机特有的无趣的概念

真希望有了更好的语言后，让这些几何与算法变成20行左右的片段，这样无论如何也不会忘记，甚至能像上面一样做成 Demo Gallery。唉

https://github.com/cunarist/rinf
https://www.visioncortex.org/vtracer/
由螃蟹驱动的位图描边转矢量工具 #tool svg

https://www.lummi.ai/
https://github.com/adobe-webplatform/shaderdsl

有趣
有趣
http://topcoat.io
搞点传统的 #css
https://github.com/Web-Media-Foundation/infrastructure/blob/master/packages/ogg-polyfill/src/OggVorbisPage.ts #js #bin

隔壁实现完了 Vorbis 的解码前端（只带解编码元信息，不带解成 PCM 的部分），八百多行

https://t.me/im_RORIRI/17034
#statement
其实也不难，只要你知道你程序依赖的领域、最小的功能是啥，解决问题必须先确定范围；知道自己在干什么、与旧案有何区别、又为何不同，才配叫工程。

比如二进制吧，像bmp那样用一个struct就能parse的东西很少，因为C拿指针掩盖了带长数组、也无常量池等规范，但继续用 u/int32_t 那样的概念也没意义，不如叫 +-1 2 4 8 吧。甚至C bitfield也应该拿bitflags换了。
凡是用不到的专业概念，比如bitsize，全部抛弃掉，这样才有机会
避开前人留的坑

除了 read(bView, ['*', [4 4,'Num2 x y']]) 这样的带长数组，struct的json化也可以基于Proxy，以实现0copy序列化、push、sort啥的

总之就是确定最小问题是什么，然后组合、复用、降低复杂度来换算法的高效能

#parser #css concrete syntax tree。CST 与 AST 相比，它将完整包含源代码中所有的 token 与 trivia 信息。以上面的代码为例，CST 会包含 { } 等 token 信息，甚至是注释、空白都会有。这对于实现 formatter 来说无疑是极为方便的。
https://blog.gplane.win/posts/raffia-and-malva.html