#Web #frontend #HTML 欸，这不是抄原来 DIr 的么... 🤔

😃 那么，简而言之，我觉得有价值的信息：

def get_link(h); "https://tttttt.me/dsuse/#{h['debug']['no'] + 9511 + 20}"; end

+ 一共统计了 187 条消息。

2019-03-24 11:22 - 2019-04-05 20:06，一共两个星期的时间里，本频道 @dsuse

+ 有 #Telegram Hashtag 的消息，一共有 42 条，约有 20% 的消息被打上了标签
+ 含链接的消息，一共有 37 条，约有 19% 的消息被打上了标签
+ 链接和 Tag 都有的消息有 17 条，占总消息的 9%

map { |h| [h['body'].size, h] }.sort_by { |it| it.first }.reverse


map { |h| [h['body'].size, h] }.sort_by { |it| it.first }.reverse.first[1]['links'].size

+ 187 条消息里，最长的消息是这条，它有 4475 个字 — 连链接都有 25 条！ 🤪
+ 187 条消息里，折行最多的消息是这条，它有 4232 个字和 7 条链接。

sum { |it| it['body'].size } / size

+ duangsuse 的平均字数：359 字 / 消息

sum { |it| it['body'].lines.size } / size

+ duangsuse 的平均行数：11 行 / 消息

find_all { |it| it['header_type'] == 'REPLY' }.size
+ 过去的 187 条消息里，有 70 条都是回复，占总量 37%

find_all { |it| it['header_type'] == 'FORWARDED' }.size
+ 过去的 187 条消息里，有 45 是转发自其他频道或个人的，占总量 24%
当然，这 70 条都是回复本频道消息的。

a.uniq.map { |u| [u, a.count(u)] }.sort_by { |it| it.last }.reverse.to_h.each { |e| puts "#{e.first}: #{e.last}" }

+ 转发者和条数表如下：

IT 那点事 (YuutaW 鱼塔): 10
羽毛的小白板: 10
duangsuse Throws: 6
Rachel 碎碎念 (IFTTT): 5
Rachel 的消息发布站点 (Rachel Miracle.) via @like: 3
YSC 的频道: 2
duangsuse ¯\_(ツ)_/¯ |学渣 | 我爱学习 | ∈ [E²PROM, 范畴论]: 2
Doge: 2
YuutaW 鱼塔: 2
Rachel 碎碎念 (湘江一桥): 2
DogeSpeed广播: 1

😄 @haneko_daily 被转发的次数最多，继续努力！

sort_by { |it| it['hashtags'].size }.reverse

+ 具有最多标签的消息是这条，它有足足 8 条标签！

sort_by { |it| it['links'].size }.reverse.first
+ 具有最多链接的消息是这条，它有 25 条链接！同时也是字数最多的消息！

find_all { |it| it['header_type'] == 'A_PHOTO' }.size

过去 187 条消息里，一共有 29 条广播是单纯的一个照片 🖼

find_all { |it| it['header_type'] == 'A_ALBUM' }.size

过去 187 条消息里，一共有 5 条广播是照片集 📸

find_all { |it| it['header_type'] == 'IS_STICKER' }.size

可爱 🐱 的 duangsuse 在过去 187 条消息里使用了 28 个 sticker 抒发自己的感情，使用的表情这么多：

find_all { |it| it['header_type'] == 'IS_STICKER' }.collect { |it| it['ext'] }.yield_self { |r| r.uniq.map { |u| [u, r.count(u)] }.sort_by { |it| it.last }.reverse.to_h.each { |e| puts "#{e.first}: #{e.last}" } }

😔: 7
😳: 4
😲: 3
😡: 2
😑: 2
🙄: 2
😋: 2
😀: 2
😥: 2
🍹: 1
😐: 1

find_all { |it| it['header_type'] == 'HAS_FILE' }.size

duangsuse 在过去 187 条消息里发了 8 个文件，它们是：

find_all { |it| it['header_type'] == 'HAS_FILE' }.collect { |it| it['ext'] }

["axml.rb", "AndroidManifest.xml", "AndroidManifest.xml", "TextSort.kt", "RandomPicture.kt", "Vibrator.svg", "Vibrator.png", "Vibrator.svg"]

最火的 hashtags 组合：

collect { |it| it['hashtags'] }.yield_self { |r| r.uniq.map { |u| [u, r.count(u)] }.sort_by { |it| it.last }.reverse.to_h.each { |e| puts "#{e.first}: #{e.last}" } }

结果太长，在这里查看

所有 Hashtags：

hs = s.flatten.find_all { |it| it.is_a? Array }.flatten.map { |s| s.tr(" ", "") }
"#" + hs.uniq.join(' #')

#Android #zhihu #KDE #Low #Haha #life #tech #tencent #WeChat #weibo #share #tools #dev #Markups #Telegram #Hack #aop #Huawei #通知 #Freedom #sysadmin #GitHub #travis #CI #Sysadmin #Linux #Coolapk #Web #frontend #HTML #China #school #Microsoft #Life #VisualStudio #-} #OOP #web #geekapk #doge #CS #fix #CSharp #School #blog #recommended #bin #backend #Kotlin #Java #Share #svg #blogPOst #PL #JVM #Moha #code #ALgotithm #DuangsuseSB #GeekApk #SQL #Learn #wiki #Mozilla #ES6 #JavaScript #MoHa #Paper #haha #dotnet #bad #OOP_Delegates #Parallelism #dotNet #Csharp #Windows #performance #Channel #weekly #linux #Ruby #Project

以及他们的消息覆盖个数：

hs.yield_self { |r| r.uniq.map { |u| [u, r.count(u)] }.sort_by { |it| it.last }.reverse.to_h.each { |e| puts "#{e.first}: #{e.last}" } }

太长，这里看

== 非线性查询（当然和算法上那个没有关系啦，就是复杂一点的查询）

// 收集所有单 / 双数索引

ar = []; ar2 = []

i = 0 // 0 2 4 6
while i < self.size; ar << self[i]; i += 2; end
i = 1 // 1 3 5 7
while i < self.size; ar << self[i]; i += 2; end


aa = ar.zip(ar2)

我们将比较相邻两消息之间的关系。

aa.zip(aa.map { |ms| ms.last['published'] - ms.first['published'] }).sort_by { |p| p.last }.reverse

间隔最长的两条消息是这条和这条，间隔 44880 秒（12 小时）

b.map { |h| [h.last, h.first.first['body'].size ] }.map { |a| a.last / a.first }.select { |it| not it.nan? and not it.infinite? }.sort.reverse

平均打字速度：7 字 / 秒 🤔

受到解析度（只到分钟）和浮点运算准确度的影响，有很多消息都是在间隔一分钟内发完的，统计结果可能不正确。

好啦，还有什么别的信息，请大家自己来发掘呗（ 😝 比如说，我熬夜发过多少消息。

#HTML #Web #Frontend #stat

#life #dev duangsuse 落实 10:30 准时睡觉『政策』。 🐱

考虑到健康原因（不让自己的努力白费），每晚 10:30(h:m) 必须立即睡觉

== duangsuse::Echo 参考 #Telegram hashtags

duangsuse::Echo 常年利用 hastags 标记消息所含知识领域，并且，这也会为未来 Echo 频道进行简单准确的数据统计带来可能（不然，我也有其他手段，比如 NLP、统计预测）

以下是新的标签实例（不区分大小写、不能保证消息只含这些标签）：

== 消息平台部分
#Telegram #zhihu #Github #so #Coolapk #book #wiki

== 注释部分
#life #China #School #Statement #lib #recommended #low #fix
#project #blog #share #Learn #paper
#dev #tech #art #meetUp #conference
#Moha #Haha
#gnu
#Microsoft #Mozilla #WeChat #QQ #Weibo #Tencent #Baidu #Ali #Qihoo
#tools #code

== 程序设计语言部分
#Kotlin #Java #JavaScript #JavaScript_ES6 #TypeScript
#Rust #Go #Swift #Dart #Crystal
#Ruby #Python #Perl #Tcl #Lua #PHP
#C #D #Cplusplus #CSharp #Objc
#Pascal #Fortran #Delphi #Ada #Basic #VisualBasic
#Scheme #Haskell #Scala #Clojure
#TeX #Graphviz
#Octave #Matlab
#Shell
（有些写出来是为了鼓励我去写，其实不一定真的写过）

== 软件平台部分
#Android #Windows #Win32 #MacOS #Java #Java_JVM #CLR #Qt #GTK #Tk #WxWidgets
#CSS #XML #JSON #KDE #Postgres #dotnet

== 软件技术领域部分

#backend #sysadmin #frontend #sysadmin_net

#OI #CS #IT #Informatics

#stat #ann #ann_dnn #machl
#math #math_linearAlgebra #math_discrete
#se #se_dia #se_ci #se_ee
#comm #net #www #web #http #html #mail #wireless
#circuit #embedded #os #db #db_relAlgebra #SQL
#bin #encoding #encoding_audio #encoding_image #encoding_video #encoding_text
#hpc #parallelism #distributed #simd #gpgpu #crypto
#pl #pl_plt #ce_vee #ce #ce_optimize #fp_monad #fp_proof #fp #oop #oop_arch #sp #parser
#algorithm #struct #lists #maps #sets
#security #security_lowlevel
#signalProc #nlp #phonetic
#cg #cg_dip #cg_3d #cg_2d #cg_lowlevel
#gui #gui_animation #gui_layouts #cli #visualization

#html #frontend duangsuse 想顺便学习一下 HTML/CSS 🤔

<html>
<head>
  <meta charset="utf8" />
  <title>Title</title>
  <link rel="stylesheet" href="main.css" />
  <style src=""></style>
</head>
<body>
  <div class="container">
    <h1>Title 1</h1>
    <h1><pre>Code</pre></h1>
    <h2 class="green" onclick="document.location=....">» Enter «</h1>
    <a style="color: green" href="...">» Enter «</a>
  </div>
</body>
</html>

刚才居然连 charset 都忘记指定了...


然后 CSS：

selector {, selector} '{' { rules } '}'

其中使用了 .class CSS 类 selector 和 tagName selector, 以及 nesting selector

Rules 就是 rule 们

key: value ['!' important];

value 可能是 string 或者 enum 或者 array 或者 int 或者 percentage 或者 color 或者 dimen

使用了这些 CSS property:

width: percentage
height: percentage
padding: dimen
margin: dimen

这是盒模型布局基础，padding 和 margin 也可以加 '-' start | end | top | bottom

display: enum

在 body {...} 里取值 table，这是盒模型渲染模式

color: color

然后是 font 调整

font-weight: int
font-size: dimen
font-family: array

font-family 是正序排列可选的 fallback font name array

然后是 align

text-align: enum
vertical-align: enum

对齐

text-decoration: enum
white-space: enum

border

border-radius: dimen
background: drawable

看几个有意义的 rule

pre, code {
border-radius: 15px;
background: rgba(0,0,0, 0.05);
color: #FFFFFFAF;
padding: 15px;
white-space: pre-wrap;
}



.content a { text-decoration: none; }

body { display: table; }
.container { display: table-cell; vertical-align: center; text-align: center; }
.content { display: inline-block; text-align: center; font-size: 18px; }

padding 就是 content 和 border 之间的距离，是 dimen。

#web #html 之前的盒模型参考这里; 这次花了多久呢... 足足有 20 分钟！太长了呢...

#web #html 使用 JQuery，CDN 是 CDNJS (Cloudflare)

#HTML #JS #FP #Algorithm

#HTML #web #canvas

#HTML #code 大概学习了下 read image 和 canvas 的基本用法

#HTML #code #parsing #algorithm 本以为很快就行的，结果想了半天调试了半天😂，最后一个不是因为十进制移位和数据视口费时，反而是 tailcall 循环忘了加 return，真是眼高手低啊

#HTML #js #css #docs 如何创建分屏
[html - Split in half vertically and horizontally second flex item - Stack Overflow](https://stackoverflow.com/questions/49550792/split-in-half-vertically-and-horizontally-second-flex-item)
[How To Create a Two Column Layout](https://www.w3schools.com/howto/howto_css_two_columns.asp)
[How To Create A Split Screen](https://www.w3schools.com/howto/howto_css_split_screen.asp)
[Split.js](https://split.js.org/)
🤔今天才知道 CSS flexbox 不是用来创建 responsive 的，只是可以创建随意缩放而良好排版的嵌套盒
responsive 要靠 @media 指定覆盖条件，浏览器支持好

https://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea 这个用 Selection/Keyboard API
<hr> <label> 这些标签和 resize, outline 的CSS熟悉 都是新学的啊，看来还是得做了才知道。

https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not
#web #dev 触屏支持
吃一堑长一智，这个下次就有经验了……😅 #recommended #html

#HTML #JS #DontKnow 你知道吗？ 🤔
HTMLElement 的 remove() 和 replaceWith(e1) 都不需要手动拿 e.parentElement ，只有 insertBefore(e1, e) 需要在 parent 上
如果不用 JQ ，可选注册 document "DOMContentLoaded" 或 window "load" 事件

element 和 node 的区别在于，前者只能是 <a> <b> <div> 这样的元素，后者可以是 #text 文本标签。

HTML 里基于 XML 的部分有三种情况： <meta charset="UTF-8"> 的单独标签、 <div></div> 的配对标签(with childNodes)、 <link rel="stylesheet"/> 的折叠(collapsed)标签，有些配对标签也有折叠形式，但折叠和 no children 是不同情况。

有许多方法可以缩写 HTML ，最常见的是基于 CSS 选择器的 emmet.io 和基于缩进的 模板语言 #Ruby slim-lang.com ，而 DOMParser 本身也支持兼容解析修正一些不完整的文档。
想在社交平台分享自己的网站， OpenGraph 了解下？

- !!"" 和 !!0 、 !![] 都是 true ，第一点往往造成隐患 必须详细检查
- undefined == null ，所以有时用 === 区别严格相等性
- JS 最不常用的两个关键字： delete o[k]; 和 v=with(o,o1) { attr }

许多时候：
如果用 e.onclick = 的简写，在任何地方的(其他)脚本重复注册时会导致覆盖，所以尽可能用 addEventListener
JS 里较短参数的函数兼容较长处的类型限制（允许无视参数），但在调用时省略默认参数可能造成性能问题，在绘图/大批/频繁处理时，需要多用图形界面的 profiler

#html #meme #recommend 草，估计是 codegen 弄的
后面还改了半天 color
不知道右上角是不是直播，还是改的梗，反正牛逼啊……

#java #service #html #轻松一刻
https://tttttt.me/Javaer/560626

#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 继续前进，类似的魔法还能有价值吗？

#html #learn #dontknow 谈谈 IE 时代开始的 XHTML, HTML4 相关的格式之争吧。

<!DOCTYPE html> 为什么和 <!-- 那么像？其实这个标签是 HTML5 才引入的，类似 ES5 的 "use strict"; 它只是「使用新版格式」的标记

早先的时代，web就好像 (Linux 用户所见的) man pages ，HTML 就像今天看到的 markdown，并不严谨，并没有被广泛采用的规范（对 UI 而言，人杂是 web 的缺陷；心乱是 mobile 的缺陷；框架多是 desktop 的缺陷）

HTML 2,3,4 都是 retro-spec ，即先被广泛实现再有标准，而规范的制订主要是帮助兼容「含错误的网页」（真的搞不懂一些人成天爱 -webkit -moz -egde 前缀 CSS1,3 标准属性的是干什么）

比如说， <br> 和 <br/> 及相同模式的 hr,dt,p 标签，对一些浏览器可能显示，另一些无法兼容，这就导致了客户端（用户代理）差异，而规范统一了错误兼容法，即 HTML 的格式。

W3C 尝试以 XML 规范 HTML ，它指定了 application/xhtml+xml 的强制错误检查格式，但被写惯非 XML 兼容扩展的开发者拒绝了，无奈只能允许用旧 application/html 分发文档，不进行错误检查，只是做了 xml schema 规范。
所以说一些上个时代的网站(比如 gnu.org)声称自己支持 XHTML 1.0，只是说兼容了此规范，并不代表没有使用 undefined behavior 的错误兼容。当然随后 1.0 的附录 C 被取消， xhtml+xml 也不能用了(不向后兼容)

Apple WebKit 和 Gecko, Chrome与Opera 合作的 Blink 等新渲染器取代了 MS IE 的时候， W3C XHTML 2.0 尝试复辟检查的老路，并且完全向 XML 靠拢(众所周知很多应用协议基于 XML 数据建模)，竟不向后(前进者的背后!)兼容了！于是 Mozilla&Apple 发起了 WHATWG 规范组，它设计了现在被广泛使用的 HTML5 ，现有引擎支持 H5 不会 break 现有的网页。

#js #html
duangsuse:
对了 L ， chrome.runtime.postMessage 的 content/page script 独立你是怎么做的，那个是送信 JSON 一样对吗

duangsuse:
很多事情了…… 主要是 html 的
头很晕，任务队列越来越长，可能马上就要做不到了

一些是对 DOM API 的一些是对数据绑定的，还有几个动画的…… 总之就是非常令人没得话说

duangsuse:
不知道你有没有用到，有人专门做了什么 MessageManager 来弄这个搞得心态有点浮
你用过吗，有什么建议，比如(所用的等效) API 和 URL 上的

rxliuli:
毕竟这种 postMessage/onMessage 的 api 对于开发者很不友好

duangsuse:
我觉得很合理啊，就是 onMessage 可以封一下变成 await 而已
上次那个人直接是做成像 TCP 一样带 transfer num 的格式…… 真的有糊到我

duangsuse:
现在想想 pagescript send/on message 的是太灵活了，其实我就想加载个数据之类的，那么 req/resp C/S 模式就很合适
不然手写 send/recv 也可以但是不优雅，就是单向请求 设计上不可能反过来

#statement #Web #html #dev