蓝湖不知道为什么打不开了,打开F12面板看到还有各种数据,,看到了他们有用到cache storage存图片,有机会试试:

• MDN
• indexDB

从结构来看

• app
  • module // 模块
    • imports // 导入的依赖模块
    • controllers // 控制器,处理请求
    • providers // 内部与元数据操作
• middleware // 中间件

typeorm

• 连上数据库,当表字段与实例不对应则会导致表结构重组,数据清空

• 阮一峰
• mdn
• can i use

资料:

• mdn font-face

• 张鑫旭 emoji

• 彩色字体

at-rule 在mdn上翻译为条件规则组,需要在顶层写,如果在某个里面写则无效,所以单一css中定义如@font-face是没有效果的.

github font-face 设定(方便以后来抄):

body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}

节流和防抖

节流意在解决连续事件,如往下滚动触拉多次懒加载的组件(使劲往下拖),那么懒加载几乎就等于没有,目前没有实践,但可以大致想象为: 当有个智障使劲往下拉的时候,依旧是空的占位模板,但是数据只加载到当前屏幕位置的一定范围即可,具体有待实践.

防抖意在解决帕金森用户的输入/自动保存/页面resize以及类似事件频繁触发问题:当输入一个字符就查询一次,为了防止服务器被玩坏,我们可以考虑设置一定时间查一次(显然太傻),所以设置为当输入停止一段时间在开始查等方式干预频繁的查询,具体依旧有待实践,

大致可以想象出需要怎么完成,具体还是要靠实践试试,但不难想象得到的结果.希望有更好的思路能再次提升对此的认识

由于setTimout并不是物理帧,所以每次的间隔不完全是delay所以...

Window.requestAnimationFrame 会在下个重绘前调用callback

window.requestAnimationFrame(callback);

callback会传入一个时间,它与立浏览器的刷新率绑定,那就是意味着是物理帧,即然物理帧那么就是完全相同的间隔,nice.

这里callback传入的时间, 在文档中提到了 performance.now()
从文档可得是一个高精度的浮点数时间,但是可能会由于浏览器策略会四舍五入为整数

场景(Mesh/Scene)
相机(Camera)
网格( 网格包含一个物体以及作用在此物体上的材质) (MeshBasicMaterial 材质)
渲染(Render)

全景图

根据这篇文章给出的全景图解构图片和描述,可知一种解法:

把所有图片构成一个几何封闭图形,然后把摄像机放在图形中心,然后移动摄像机给人一个全景的感觉.
可想当如果贴图足够多,能够拼接更多变成圆形的时候应该就是真正的360度全景图.
在编程时可能需要数学上的矩阵和向量相关的内容
内置库(Vector3,)

掘金这个文章也是提供了细致的介绍

通过css或three或svg完成

圆形以及方形都有不错的效果,但是还是有部分区域会有形变,不过是很重要

compares these 3 methods
Best Practices
what happened

http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927

要做一个滚动的骰子

• 最先想到的是three.js
• 再来是canvas(但是没整过,有机会再试)
• 最后是animation(能滚能动,大概可以把)

animation

个人以为摇骰子分为骰子的移动与滚动2部分组成,遂先完成滚动
codepen 地址

MediaDevices

use h5 media api: MediaDevices

• get media stream api: getUserMedia
• media stream

can i use

use input

<h3>image图片</h3>
<input type="file" accept="image/*" capture="camera">

<h3>image图片 – 多选</h3>
<input type="file" accept="image/*" multiple>

<h3>image图片 - 前置摄像头调用</h3>
<input type="file" accept="image/*" capture="user">

<h3>video视频</h3>
<input type="file" accept="video/*" capture="camcorder">

<h3>audio音频</h3>
<input type="file" accept="audio/*" capture="microphone">

在各个机型都可以点击 file 调用相册 和 摄像头拍照

1. 在老版本的安卓中，必须加上capture，否则只能调用相册
2. 在IOS中 加了capture，就只能调用摄像头不能调用相册
   判断ios，如果是ios就去掉capture属性.

<label>照相机</label> <input type="file" id='image' accept="image/*" capture='camera'> <br> <label>摄像机</label> <input type="file" id='video' accept="video/*" capture='camcorder'>
<input type="file" id="file" multiple>

let info=navigator.userAgent.toLowerCases();
if(info.match(/iPhone\sOS/i)){
　　dom.removeAttribute("capture")　　
　　}
 
读取图片(fileChoose即为input)
fileChoose.change=()=>{
　　let file=fileChoose.files[0],
　　reader=new FileReader();
　　reader.onLoad=()=>{
　　　　img.src=reader.result
　　};
　　reader.readAsDataURL(file)
}

about w3c capture attribute

falsy不是false,从mdn中提示到是上下文中被认定为false的值.

if (false)
if (null)
if (undefined)
if (0)
if (0n)
if (NaN)
if ('')
if ("")
if (``)
if (document.all)

** 注意,这里有一个特例: document.all,它也是false,mdn中有提到 **

而与他相对的是Truthy如果一个值不是falsy那就一定是Truthy

然后我发现一些有意思的情况:

[] == false => true => 我真没想到这货看着浓眉大眼居然是个falsy?
false == null => false 
false == undefined => false => 好吧unll和undefined互相勾结排斥其他人

当然如果是===那么除了NaN其他都只认自己

falsy和Truthy比较概念,怕是说出去都没什么人知道

进入gitlab的bash

• 双击容器，在"终端机"种新增bash
• docker exec -it container_name bash

修改gitlab配置文件

• gitlab.yml
• gitlab.rb

更新配置

gitlab-ctl reconfigure

mdn
掘金

CommonJS

加载：同步。
体现为： require 和 exports。

// file A
...
exports.model = model

// file B
require("./A").model
...

AMD

加载：异步
体现为：define和require。

// define(
//     module_id /*可选*/,
//     [dependencies] /*可选*/,
//     definition function /*用来实例化模块或者对象的方法*/
// );

define(
    'model',
    ['math', 'graph'],
    function(math, graph) {
        plot: function( x, y ){
            return graph.drawPie( math.randomGrid( x, y ) );
        }
    }
);
...

.mjs and .cjs

https://nodejs.org/api/esm.html

相关资源:

• ws

• websockets api

• 张雪峰ws聊天室

以ws + websockets api简单实现收发消息,需要登录角色等参考张雪峰koa + ws创建应用

css-doodle 规则图形绘画

当我需要在页面上显示一个pdf的文件时,我尝试使用embed,根据mdn所述写一个testing.html没有问题,当放到项目中没有发出pdf文件请求暂时不知道发生了什么有待后续查证,同时使用object标签尝试结果相同,最后不得不使用iframe成功.

此时iframe中使用的也是embed,那么问题来了,为什么embed没有发出请求呢?
暂时搁置,等待后续....

关于babel提到的Monorepos不知道是什么意思,得到以下文章给予我一定提示:

• https://www.toptal.com/front-end/guide-to-monorepos

• git

接着到了架构问题

• 前端架构有哪些核心问题
• 自动化版本发布(semantic-release..)
• 自动复查代码工具(Danger...)
• 持续集成工具(Travis CI...)
• 代码质量工具(Code Climate...)
• 自动化(图片压缩，代码压缩、混淆、部署)

要做什么

• 体系设计
• 工作规划
• 监督跟进
• 代码质量
• 所需的时间和工作量
• 工作流
• 技术可行性

表现为

• 代码
• 流程
• 测试
• 文档

获取当月总天数

• easy

new Date(year, month, 0).getDate();

• normal
  得到这个月最后一天的时间,从这一天获取的天数就是总天数

about date

看到上面写0的操作,然后我试了试:

new Date(2020, 2, 31)

得到的月份是2,但是得到的天数也是2,然后我注意到:
在MDN的中文版是有这个提示的:

当Date作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1)，它们都表示日期2014-02-01（注意月份是从0开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10)，都表示同一个时间：2013-03-01T01:10:00。

new一个月份的第0天其实就是最后一天?然后我试了试

new Date(2020, 2, -1).getDate(); // 28
new Date(2022, 2, -1).getDate(); // 27

那么看起来如果非1-当月最大天数的话,会被调整,如果小于等于0则从后往前,如果大于最大天数则其实已经是超出的时间了

发生了什么:
切换分支报错: cannot create directory: Permission denied

方法1:

1. 关闭编辑器在该文件下的命令行等,
2. 右键改文件夹属性,只读打勾去掉应用
3. 更改应用于文件夹子文件夹和文件,确定
4. 等待
5. 打开命令行,编辑器,运行项目
6. git checkout可用

后续:
我不想每次都关掉那么多,然后我给文件夹设置权限

1. 右键文件夹-安全-编辑--允许全勾
2. 右键文件夹-安全-编辑--添加-高级-立即查找-选择everyone-确定
3. 右键文件夹-安全-编辑--选择everyone允许全勾
4. 应用
5. 等待

后续again:
似乎好像还是在切换的时候出现权限问题,但是我停止运行项目,然后在切换,就可以了

over....

mdn

link