deep.html
2.1 KB
#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 要靠
https://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea 这个用 Selection/Keyboard API
[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熟悉 都是新学的啊，看来还是得做了才知道。Stack Overflow
Split in half vertically and horizontally second flex item
Can please someone point me out how can I split out second flex item vertically and horizontally like I have in image below ?
I managed to split in half one big box but I failed making it the same...
I managed to split in half one big box but I failed making it the same...
https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not
#web #dev 触屏支持
吃一堑长一智，这个下次就有经验了……😅 #recommended #html
#web #dev 触屏支持
吃一堑长一智，这个下次就有经验了……😅 #recommended #html
Stack Overflow
`pointermove` event not working with touch. Why not?
I have this pen:
https://codepen.io/anon/pen/eyKeqK
If you try it on a touch-screen device (f.e. visit the pen on your phone) you'll notice that when you drag, the white light (the little sphere)...
https://codepen.io/anon/pen/eyKeqK
If you try it on a touch-screen device (f.e. visit the pen on your phone) you'll notice that when you drag, the white light (the little sphere)...
#HTML #JS #DontKnow 你知道吗？ 🤔
HTMLElement 的
如果不用 JQ ，可选注册
element 和 node 的区别在于，前者只能是 <a> <b> <div> 这样的元素，后者可以是
HTML 里基于 XML 的部分有三种情况：
有许多方法可以缩写 HTML ，最常见的是基于 CSS 选择器的 emmet.io 和基于缩进的 模板语言 #Ruby slim-lang.com ，而
想在社交平台分享自己的网站， OpenGraph 了解下？
-
-
- JS 最不常用的两个关键字：
如果用
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 里较短参数的函数兼容较长处的类型限制（允许无视参数），但在调用时省略默认参数可能造成性能问题，在绘图/大批/频繁处理时，需要多用图形界面的 profilerogp.me
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
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
还有之前的剪贴板我也查了
[在线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 (
https://github.com/muicss/sentineljs
然并暖，到 DevTools events/debugger 面板看看 DOM Events 的归类就能发现有一大堆 DOM 变动的事件支持嵌套次序🌚
稍有常识的人不难看出，如果我们的 API 继续前进，类似的魔法还能有价值吗？
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","") Share
School
🐕 duangsuse’s shared files(e.g. productive software projects, documents)
#html #learn #dontknow 谈谈 IE 时代开始的 XHTML, HTML4 相关的格式之争吧。
早先的时代，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 现有的网页。
<!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 也可以但是不优雅，就是单向请求 设计上不可能反过来
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 也可以但是不优雅，就是单向请求 设计上不可能反过来