duangsuse::Echo
714 subscribers
4.24K photos
127 videos
583 files
6.46K links
import this:
美而不丑、明而不暗、短而不凡、长而不乱,扁平不宽,读而后码,行之天下,勿托地上天国。
异常勿吞,难过勿过,叹一真理。效率是很重要,盲目最是低效。
简明是可靠的先验,不是可靠的祭品。
知其变,守其恒,为天下式;穷其变,知不穷,得地上势。知变守恒却穷变知新,我认真理,我不认真。

技术相干订阅~
另外有 throws 闲杂频道 @dsuset
转载频道 @dsusep
极小可能会有批评zf的消息 如有不适可退出
suse小站(面向运气编程): https://WOJS.org/#/
Download Telegram
#Rust 🤔 try 不是 Rust 的新语法,而是宏展开规则
Rust 宏在词法检查后语法检查前展开,这个示例写了含无效代码的宏调用/不匹配的 macro_rules! whichever_compiles! 会被自动忽略

不对…… Rust 宏的语法怎么改了
name! { Rules } 就可以了吗,还真是挺 breaking 的啊
喜感密码,前端泄露
插入项目队列,打算写个能做 这个 梗图的 DOM/JS 纯前端工具
如果成功,可能考虑独立项目。 🤔

+ 是一个脚本化图像处理软件,比之前的文字模板图功能强大、交互性弱,但希望覆盖其所有功能
+ 必须能被URL引用,主要定义能通过URL传递

+ 能从 URL 或上传文件加载图像、能生成并打包下载图像、支持 GIF 帧的拆装
+ 支持 CSS filters ,支持 vcat 同高组合图纵切,支持 crop
+ 支持单输入多输出,能把输出图片分组,能选择置顶图(方便拆人图、引用一部分)之类的
+ 能在图片组编辑,替换/增加/删除,能重新组合被解 vcat 的图片(这样就能编辑组合图片)

+ 能利用 canvas 或 CSS position:absolute 之类的,可以贴文字什么的 就能实现这种 图的制作
+ 能利用 each() ,实现模板图/整齐表情包制作功能;初步推论以 each(imgs(":"), &= text(center()+xy(1,1), "Hello world", Image(W,H,getcolor(it)(0,0) )) ) 这种方法, center() 负责对 text 求 rect 并且与 img 的(上层) w,h 进行结合
+ 上例的 font 属性,应该存在作用域里
以这种方法,就可以制作变量为/含图片的模板图了。
+ 所以作用域是覆盖/重置保护的动态作用域,可能允许函数调用和重叠名的枚举
+ 必须简单,不能有多余或复杂的代码,合理的框架性函数要简练
t+ 先不做好看的界面,如果后期独立项目则允许 UI 细节代码
+ 基础表情包资源和图床什么的辅助工具可以后面再加,可视化调参能做到什么程度呢 🤔

预期难点在 GIF 二进制 IO 和表达式语言框架的设计,以及可视化参数编辑方法
我觉得比较可行的办法是为表达式语言添加强行列号支持,然后用户编辑文本加 pick() 就能选择偏移量

图片分组觉得用 grouped(:name, vcat(img("http://host/a.png")))grouped(:pinned, let(:g, group(:name), &= each(range(0,2), &= g[i]) ))) 比较好,不用特例语法就应该比较可定制
duangsuse::Echo
插入项目队列,打算写个能做 这个 梗图的 DOM/JS 纯前端工具 如果成功,可能考虑独立项目。 🤔 + 是一个脚本化图像处理软件,比之前的文字模板图功能强大、交互性弱,但希望覆盖其所有功能 + 必须能被URL引用,主要定义能通过URL传递 + 能从 URL 或上传文件加载图像、能生成并打包下载图像、支持 GIF 帧的拆装 + 支持 CSS filters ,支持 vcat 同高组合图纵切,支持 crop + 支持单输入多输出,能把输出图片分组,能选择置顶图(方便拆人图、引用一部分)之类的 + 能在图…
吃饭的时候稍微细化了一下最简 prototype 的设计,只考虑皮卡丘的那张粘不定高 header 的情况。

group 可以做在 URL 参数里,像 ?src=url(:a.png)&g:parts=pattern(:vcat, 15)&g:pin=ary(parts[0],parts[1]) ,依然实现了「组合数据」与「用户可突出选项」的功能

参数没必要带上 img(), imgs() 这样的图片源,本来就是 filter chain 的模式,只需要做成 crop(x,y,w,h)vcat(other) 这样的参数化单项列表即可,本来带坐标的 filter(:grayscale)(x,y,w,h) 类描述可能要多括号,但如果用 10y15 这样的坐标形式和 10y15w5h5 的 rect 就没问题了

可编辑的问题,只需给 filters 的每一项加上 code 里的 arg offset ,允许访问 .argsptrCodeArgs() 能 set 就可以了
如果没有参数,自动在输入图显示每项类型(point,rect,select)编辑器, onchange 时重 render() ,添加编辑单个 filter 的菜单操作

组编辑的问题,要有 add/remove/replace 操作和多选,全反选(这个纯 UI 问题)

一切处理链都可重建,所以不需要特别判断最后一个操作到底是什么。重建操作存在于 output group 上,输出是 src= 里被自动命名的图片。对于可重建而言, crop() 做的相当于只让下部操作在特定区间执行,所以它在重建时只用把结果粘贴回原位。

接受 rect 的 crop() 可以 crop(0,5) 省略 wh 的这样用,也可 crop(,,0,-10) 的隐含 w/h 偏移量
(0,5) 这种东西实际上是 tuple。 考虑进一步拓展,如果用 xy 或 wh 变量的话,可以 crop()+xy+(1,2) 这么用
如果要 center 文字,可用的表达式似乎是 center(:D, text)+("black", "Hello")
它需要当前 wh 和 text 的 wh ,后者只能通过专门的 box_text 计算 🤔

不过这种函数的编辑器怎么兼容呢…… 好像需要适配 code pos
Forwarded from 每日 AWESOME 观察
isomorphic-git
纯 js 实现的 git 库,可以实现正常 git 所有的功能且完美兼容。如果你想用 js 操作你的 git repo,这是最好的选择,因为它不依赖你本地的 git 安装。它甚至不依赖任何nodejs api,还可以在浏览器使用虚拟文件系统工作。
https://github.com/haml/html2haml 🤔 从 HTML 反向回 haml 吗 当然还是要做的

[noryb009/AalibTranslator: A basic translator for Haiku that translates bitmaps into ASCII art using aalib](https://github.com/noryb009/AalibTranslator) Haiku 是一个操作系统 😓
github.com/elbongurk/aalib
[python-aalib/aalib.py at master · jwilk/python-aalib](https://github.com/jwilk/python-aalib/blob/master/aalib.py)
[masahino/mruby-aalib](https://github.com/masahino/mruby-aalib)
[aalib.js/aalib.js at master · moriyoshi/aalib.js](https://github.com/moriyoshi/aalib.js/blob/master/aalib.js#L3129) 感觉有点 C transpile 的感觉,可是 API 不一样,除了内联 font bytearray 很蠢其他倒没啥

https://github.com/stroucki/bb 指环、软体、 mandelbrot 集的动画
https://github.com/artyfarty/bb-osx 构建方法: touch README; aclocal && automake --add-missing && autoconf && autoupdate; ./configure && make

如果显示 X font open fail ,就只能 -driver curses
如果 sound 导致 bb 卡住的话,据我看了下只有 main.c 里有几行支持代码是基于 libMikMod 的,它的 panel config (kw: tolower) 实际就是在 edit md_mode bitflags 和 samplerate ,只能 ./bb &ffplay bb3.s3m 直接播了
ffplay bb.s3m -hide_banner -nodisp &./bb -driver curses
(如果最后退不出, fg 一下 ffplay 的 [N] job num 再 Ctrl-C

: This s3m has been made by Dawn Music for the demo called "BB". This s3m is especially dedicated to my girlfriend Eva. She's so far from me and I spend so much time without her. I'm waiting for you, Sandqueen. I want you to want me just like I want you. Your little man. Composed:April 1997,Dawn

另外这个在 metadata 里公开表白,真是虐到我了,程序员的爱情 😳

这个人除了会绘制和计算机图形学,还很熟悉 C, linux 和二进制,是标准的「那个年代的程序员」
现在看起来我也有这种倾向了,好怀念啊

最关键的是 DEMO 动画里的数学渐变、文字缩放和粒子路径规划和 aalib 本身的技术吧,真的太细节了。 一个就吊打「新世纪」的所有 UI 动画呢
想想现在要看 text bitmap 就需要用 canvas 先画下
#js #code [doge] 哈!手机上一次就写对了
const swap=(k,a,b)=>{ let va=a[k]; a[k]=b[k]; b[k]=va; },
hook=(o,op_tab)=>{
let old={};
for (let k in op_tab) { swap(k, old, o); let f=op_tab[k]; o[k]=function hooked(...args) {args.push(old); return f.apply(this, args)}; }
let attrs = Object.keys(op_tab);
function undo() { this.attrs.forEach(k => swap(k, old, o)); }
return {attrs, undo};
}

function add(a,b) {return a+b}
h=hook(window, {add: (a,b,old)=>{console.log(a);return old.add(a,b)}})

不过有个问题, 不能同时兼容 prototype ,没 bound
好耶!是元编程

const
swap=(k,a,b)=>{ let va=a[k]; a[k]=b[k]; b[k]=va; },
boundCopy=(!!Proxy)? (o,ks)=>self=>new Proxy({}, {get: (o1,k)=>o[k].bind(self)}) : (o,ks)=>self=>{ let bound={}; for (let k of ks) Object.defineProperty(bound, k, {get: ()=>o[k].bind(self)}); return bound; },
hook=(o,op_tab)=>{
let old={}, attrs = Object.keys(op_tab);
for (let k of attrs) { swap(k, old, o); let f=op_tab[k]; o[k]=function hooked(...args) {args.push(boundCopy(old, attrs)); return f.apply(this, args)}; }
function undo() { this.attrs.forEach(k => swap(k, old, o)); }
return {attrs, undo};
}


orig(this).fn 这样用:
let hooky = {
log(...ho) { hookAll(...ho, (...args,orig)=>{ console.log(args); let res=orig(this)[ho[1]](...args); console.log(res); return res; }); },
breakIf(p, ...ho) {},
stopIf(p, ...ho) {},
onValues(op, ...ho) {},
insts: {},
saveInstances(...ho) {}
}


妈耶…… 看来还是包装下比较好😓 这个代码不可能短

#GitHub 上找了半天最终发现 https://github.com/bnoguchi/hooks-jshttps://github.com/buddyspike/easy-intercept 是可以用的,另外还有三四个标准研究性的 intercept 和一大堆只能针对 XHR API 的🌚👍

https://github.com/search?p=4&q=JS+intercept&type=Repositories
你前端还是你前端,复用都懒得做🌝🤔

"JavaScript 能表达的程序最终都会被写出来"
前端娱乐圈
Media is too big
VIEW IN TELEGRAM
ffmpeg -i 2021-03-09\ 07-10-22.mkv -ss 2 -to 7:14 -i Projects/bb-osx/bb3.s3m -map 0:v:0 -map 1:a:0 bb.mp4
#sysadmin #linux #bash VPS 一键安装多分区系统脚本(草 还有 mysqli #php #security
Forwarded from AlPlank (yuuta 230103978)
方法名居然还 ::
Forwarded from AlPlank (yuuta 230103978)
笑死。
duangsuse::Echo
#js #web #DontKnow DOM 小提示! 😘 1. with(e.parentNode){ insertBefore(e1, e); removeChild(e) }可以用 e.replaceWith(e1) 替换 2. e.remove() 等于 e.parentNode.removeChild(e) 3. children, firstChild, prevElementSibling 不会获取到 text node 而 childNodes, parentNode, nextSibling…
#html #dom #API #doc #dontknow
https://duangsuse-valid-projects.github.io/Share/HTMLs/school/ 🌝新写了个弹球动画,我真是 HIGH 到不行,赛高哩HIGH哒≈

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats

还有之前的剪贴板我也查了
document.querySelectorAll("[contenteditable]").forEach(e=>e.onpaste=(ev)=>{ e.execCommand("paste",false,ev.clipboardData.getData("text/plain")); })

[在线Html编辑器粘贴过滤技术详解(一)_weixin_33910460的博客-CSDN博客](https://blog.csdn.net/weixin_33910460/article/details/89910701)
[JavaScript如何获取粘贴事件的剪贴板数据(跨浏览器)? - 问答 - 云+社区 - 腾讯云](https://cloud.tencent.com/developer/ask/186776)

另外在找的时候我发现一个 1k star 的 JS DOM 变动静态库,思想挺有意思的,不用 MutationObserver 和 NodeIterator,TreeWalker (document.createXXX(e).nextNode() ) 什么的,而是利用了自定义 @keyframes 的事件 animationStart 。 API 类似 inotify , on(selector,op) 这样

https://github.com/muicss/sentineljs
然并暖,到 DevTools events/debugger 面板看看 DOM Events 的归类就能发现有一大堆 DOM 变动的事件支持嵌套次序🌚
$0.addEventListener("DOMSubtreeModified",console.log); $0.getRootNode().body.setAttribute("contenteditable","")
稍有常识的人不难看出,如果我们的 API 继续前进,类似的魔法还能有价值吗?
duangsuse::Echo
#html #dom #API #doc #dontknow https://duangsuse-valid-projects.github.io/Share/HTMLs/school/ 🌝新写了个弹球动画,我真是 HIGH 到不行,赛高哩HIGH哒≈ https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats 还有之前的剪贴板我也查了 document.querySelectorAll("[…
#Web #Learn #meme
了解单独、配对、折叠三种标签形式及 &; escape,会创建、访问节点和常用 attribute 、事件和 on 简写;擅长动态加载、拼接资源如 link 和 script;会利用 form 和 meta,link 标签
能利用 CSS 做 responsive design 、用元素 state 伪选择器做交互动画,会使用 flex 和 grid
了解 HTTP 的 URL, Header 和 Cookie 性质,善用 XMLHttpRequest 和 fetch API
会用 PJAX 和 iframe 做复杂的跨页共享应用
从不编写冗余 HTML ,总能通过 JS API 实现文本翻译等灵活文档变形功能
擅长使用各种(简化性)模板语言、jsx, mdx,以及 emmet.io 等快速开发工具。
随意滥用新 pointer events 不加 polyfill 导致多种客户端上交互无法使用
张口闭口 DOM 和 ES6 而不谈 HTML 和 JS (ES6就是新JS)
乱用 Chrome-only 的 getEventListeners API 和极其 cutting edge 的 Element.getAnimations
膜拜 URL,MIME 和 URI,base64 以及 DevTools 的便利但几乎从不好好使用它们
滥用 strike 删除线
从不区分 ins,u; del,s; em,i 和 visibility:hidden; display:none; 和 br,pre; textContent/innerHTML; onload,DOMContentLoaded; firstElementChild/firstChild 也搞不清 append 与 appendChild 有什么区别
在网页里直接放 ES6 甚至 ES2016 的屑(提示: 对应关系 n-2015+6)
Forwarded from 羽毛的小白板
吐血
Forwarded from AlPlank (yuuta 230103978)
发现我的代码还是 int32_t(
中枪了