QQs'Note
0%

Posted on Edited on In

边框

  • box-shadow
  • border-image

    背景

    1
    2
    3
    4
    5
    #example1 { 
        background-image: url(img_flwr.gif), url(paper.gif); 
        background-position: right bottom, left top; 
        background-repeat: no-repeat, repeat; 
    }

    渐变

  • 线性渐变 liner-gradient
  • 径向渐变 radial-gradient

    文字特效

  • text-shadow

    转换 过渡 动画

    transform 转换 
    1
    2
    3
    4
    5
    translate() // 移动
    rotate() 
    scale() // 缩放
    skew() // 倾斜
    matrix() // 上述转换的综合
    居中：
    1
    2
    3
    4
    5
    position: 'absolute',
    margin: 'auto',
    top: '50%',
    left: '50%',
    transform: `translate(-50%, -50%)`,
    transition 过渡
    1
    transition:transform 0.5s
    将某个样式的变化加入一定过渡动画
    animation 动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    div
    {
        animation: myfirst 5s;
        -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
    }
    @keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
    }
     
    @-webkit-keyframes myfirst /* Safari 与 Chrome */
    {
        from {background: red;}
        to {background: yellow;}
    }

    transparent vs rgba(0,0,0,0)

优先级

  • 相同选择器 层叠覆盖
  • 具体、特异性强的选择器优先级高：类选择器 > 元素选择器

    中空元素

    clip-patch

    css实现toggle switch

    how to css switch
    tip：在html中 input:type=checkbox 天生具有bool特征 即以checked属性跟踪状态

    3d效果-prespective, xyz

    Css 3D

    HTML + CSS 实现点击旋转

    1
    2
    3
    4
    <html>
      ...
      <input type="button" class="csd-icon icon-refresh">
    </html>
    目标元素要改为input，因为要用到focus伪类
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .csd-icon.icon-refresh {
      width: 24px;
      height: 24px;
      padding: 0;
      cursor: pointer;
      position: absolute;
      border:hidden;
      background: url("data:image/svg+xml," + map-get($icon,refresh) + "") no-repeat top left;
      right: 0;
      &:focus{
        outline: none;
        animation: rotatefresh 1s;
      }
      &:active{
        animation: none;  
        //background: '#eee';
      }
      @keyframes rotatefresh {
        from { transform: rotate(0deg) }
        to {
            transform: rotate(180deg);
            transition: all 0.6s;
        }
      }
    }

    磨砂特效

    CSS秘密花园:磨砂玻璃效果

    减少异步

    使用形如background: url(‘../../icon.svg’)的样式无疑在渲染页面时又添加了异步调用，页面会出现从图片空缺到图片加载的’跳变’，可以用F12—Performance—Network：slow 3G
    如果是img:src可以直接把svg代码贴在页面上，优点是图像作为页面代码的一部分一次性从服务端获取，缺点是布局代码会被推至很下面，且svg代码的可读性比较差。
    另一种方式是将图片转为encodeURL贴在css中，这样使图片作为css的一部分从服务端获取
    css形如
    1
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox...");
    一个在线转换工具
    见URL Decoder
    将源码\…\贴入，进行转码
    另用scss的预编译过程转换
    见sass-svg

    box-sizing

    当元素特效使用2px border代替1px border时，发现元素宽高变化 布局略微‘抖动’
    应将box-sizing设为border-box
    另可考虑margin减1px
    另margin和box-sizing在flex布局下是无效的

前端小智 CSS特效

Container Query

Posted on Edited on In

资料

见知乎·Angular资料获取不完全指南

异步响应方法中更新数据，视图无法及时更新

解决方法：导入ChangeDetectRef

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { ChangeDetectorRef } from '@angular/core';

constructor(
    private changeDetectorRef:ChangeDetectorRef) { 
        // user token updated!
        this.userService.currentUserToken$.subscribe(res=>{
            if(res){
            this.logged = true;
            this.email = res['UserName'].value;
            this.changeDetectorRef.detectChanges()
            }
        })
    }
}

httpClient的任意方法(get、post)无法发送请求

所在模块未引入HttpClientModule

重复声明Directive

1
2
ERROR in Type NumberInputDirective in D:/ProjectX/src/app/common/number-input.directive.ts is part of the declarations of 2 modules: blablaA and blablaB Please consider moving NumberInputDirective to a higher module that imports blablaA and blablaB. You can also create a new NgModule import that NgModule in blablaA and blablaB

指令是可声明对象。 它们必须在 NgModule 中声明(declarations)之后，才能用在应用中。指令应当且只能属于一个 NgModule。不要重新声明那些从其它模块中导入的指令。

1
2
3
4
5
6
7
8
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberInputDirective } from '../common/number-input.directive';
@NgModule({
    imports: [CommonModule],
    declarations: [NumberInputDirective],
    exports:[NumberInputDirective]
export class SharedModule {}

angular.json “should NOT have additional properties(xxxx)”

因框架版本问题（归根结蒂是包版本差异问题），不支持xxx属性，如angular原生国际化配置v8与v9存在配置差异，查看文档应区分文档版本

关于升级

参考Angular 升级指南

另，@angular/cli和angular-cli 是两个东西，安装了后者可以使用部分ng命令，可知ng version是beta版本，ng update无效且报“does not match any file…”

issue 升级到9后，渲染中止，报“Uncaught SyntaxError: Strict mode code may not include a with statement”

见stackoverflow回答

remove from main.ts

1
export { renderModule, renderModuleFactory } from '@angular/platform-server';

npm ERR! Invalid package name “ngcc_entry_points.json”: name cannot start with an underscore
升级Angular过程中未知package错误 清理依赖重新安装

1
2
3
rm -rf node_modules
rm -f package-lock.json
npm i

css: ng-deep host-context

曾使用ng-inline-svg将svg模板嵌入angular模板(见svg)，插入方式使用的是其定义的指令

1
<div [inlineSVG]="'assets/image/icon.svg'"></div>

目的是使用类似
1
2
3
.nav-checked svg>path{
    fill:red
}

的方式实现动态图标样式
事实上，ng-inline-svg指令将宿主元素（div）作为组件锚点，用svg模板实例化为一个独立组件，宿主元素所在组件的样式无法作用到子组件
Angular官方文档中对于样式‘透传’有如下solution
1
2
3
:host ::ng-deep .nav-checked svg>path{
    fill:red
}

:host表示从本组件开始::ng-deep向下生效
见Doc：组件样式

参考ng-inline-svg issue#14

关于deprecated，是deep与w3c的草案曾用关键字冲突，然而其一Angular尚无替代方案，其二w3c已移除了相关建议，若将来协议落地，Angular亦无须重复实现这个feature(引述：StackOverflow：What to use in place of ::ng-deep)

:host-context可以根据组件外部元素来决定组件内的样式

1
2
3
<nav class="collapse">
<nav-header></nav-header>
<nav>

在NavHeader.component.less
1
2
3
:host-context(.collapse) .title{
    ...
}

Can’t bind to ‘ngForOf’ since it isn’t a known property of XXX

疑似升级至ng11后出现，多个modules，任意组件使用指令均可能报错，解决方法是在所在子模块手动引入CommonModule

1
2
3
4
5
6
7
8
9
10
...
import { CommonModule } from '@angular/common';


@NgModule({
    imports: [SharedModule, CommonModule],
    declarations: [...],
    providers: [],
})
export class ManageModule { }

Posted on Edited on In

须知，vscode是Electron应用，atom是Electron应用，GeForce Experience也是Electron应用，还有Skype。。。

本质是使用chronium浏览器内核和HTML实现应用程序UI，底层业务是基于js”粘合”的，即除了require nodejs native modules之外，还可以将基于其他技术生态的组件集成进来，这里会用到webpack打包。
得益于HTML UI开发的方便，和nodejs api的丰富，使得app 开发变得方便快捷，而且基于js实现了相当完美的跨平台，然而泻药如下：

  • 因为不可避免的打包浏览器内核，出品动辄100MB
  • 因为打包的是chrome家的内核，内存占用相当大

如果是windows平台的应用需求，wpf的产品将在体积，资源占用，安全的系统访问等方面碾压electron

迈步越过的坑：

构建项目框架

  1. 脚手架 npm i -g angular-cli electron
  2. 创建Angular项目 ng new ngelectron —routing
  3. package.json
  4. 主进程main.js

以angular-electron为例，npm run start过程，

1
2
3
4
"start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
"postinstall:electron": "node postinstall",
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve,
"electron:serve-tsc": "tsc -p tsconfig-serve.json",

  1. 调用postinstall (postinstall.js)修改angular的webpack target
  2. 随后运行ng serve
  3. 连接ng serve启动的localhost:4200
  4. 调用tsc编译main.ts此时生成了main.js
  5. 执行electron .

    webpack target

IPC

IPC 代表 Inter-Process Communication进程间通信。Electron 使用 IPC 来在main主进程和renderer渲染进程之间传递 JSON 信息。
main

1


render
1

资源打包关于asar vbscript

asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件，即可从其中读取任意文件内容。

逻辑中视为文件夹

1
2
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')

单例模式 单例参数更新

外观

无边透明,隐藏任务栏

1
let mainWindow = new BrowserWindow({ transparent: true, frame: false, skipTaskbar:true })

实践中发现透明还需另外设置
1
2
3
body{
    background:transparent
}

交互

保持置顶

1
2
3
win = new BrowserWindow({
   alwaysOnTop: true
 });

无窗口UI的拖动

设置响应鼠标拖动区域，用css标记-webkit-app-region: drag

参考官方文档: frameless window 可拖拽区域

electron-drag 方案

命令及参数

开发模式electron . [args]

1
args = process.argv.splice(2)

执行模式app.exe [args]
1
args = process.argv.splice(1)

electron-builder

部分配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"productName": "CSCportal",
  "directories": {
    "output": "release/"
  },
  // 额外打包的资源 不会打包到\resources\app.asar
  // 以下规则将文件单独打包到\resources\addon
  "extraResources": {
    "from": "addon/",
    "to": "addon/"
  },
  // 额外打包配置文件到根目录
  "extraFiles":["config.xml"],
  // 打包文件的parttern表达式
  "files": [
    "**/*",
    "!package.json",
    "!src/",
    "src/app/shared/*", // 打包main调用的模块（.js）
    "!src/app/shared/*.ts" // 忽略ts源文件
  ],
  // windows环境
  "win": {
    "target": [
      "nsis", // 使用nsis工具生成安装包
      "zip"   // 生成zip免安装压缩包
    ],
    // code sign（代码签名）
    "signingHashAlgorithms":["sha1"], // sign algorithms ['sha1', 'sha256']
    "certificateFile":"build/cert/XXXXX.pfx", // 证书路径
    "certificatePassword":"XXXXXXX",  // 证书密码
    "verifyUpdateCodeSignature":false, // 安装前是否验证签名可用更新（available update）
    "rfc3161TimeStampServer": "http://timestamp.digicert.com", // time stamp server
    "signDlls": true //是否签名DLL
  },
  "nsis":{
    "oneClick":false, // 禁用一键安装
    "perMachine":true, // 为所有用户安装
    "allowToChangeInstallationDirectory":true, // 自定义安装路径
    "include":"build/installer.nsh" // 包含脚本
  },
  "mac": {},
  "linux": {}
}

How to share costom .ts file between main.ts and Angular app

即将文件或目录添加到打包文件的parttern表达式中

nsis宏命令 installer.nsh

在electron-builder.json配置中引入.nsh脚本，脚本定义了NSIS打包生命周期中插入的宏指令

可插入宏：

  • customHeader
    可以配置NSIS的一些环境或运行条件，如显示详细信息框：
    1
    2
    3
    4
    !macro customHeader
      ShowInstDetails show
      ShowUninstDetails show
    !macroend
    详见调用源码
  • preInit
    This macro is inserted at the beginning of the NSIS .OnInit callback
  • customInit
  • customUnInit
  • customInstall
    安装
  • customUnInstall
    卸载
  • customRemoveFiles
  • customInstallMode
    1
    2
    3
    !macro customInstall
      WriteRegStr HKLM "SOFTWARE\Carestream Dental\CSCportal" "InstallDir" $INSTDIR
    !macroend
    uninstaller.nsh
    1
    2
    3
    !macro customUnInstall
        DeleteRegKey HKLM "SOFTWARE\Carestream Dental\CSCportal" "InstallDir"
    !macroend
    BUILD_RESOURCES_DIR and PROJECT_DIR are defined.

build is added as addincludedir (i.e. you don’t need to use BUILD_RESOURCES_DIR to include files).

build/x86-unicode and build/x86-ansi are added as addplugindir.
Caution! 我的angular-electron6项目中，仍然要手动载入plugin，写法同《NSIS插件》笔记中的代码

File associations macro registerFileAssociations and unregisterFileAssociations are still defined.

LogicLib.nsh默认已包含

All other electron-builder specific flags (e.g. ONE_CLICK) are still defined.

参考 electron-builder文档nsis部分 参考NSIS相关笔记

Caution!以上文档对应最新版本electron-builder,经实践v22.7.0可以返回build异常信息，应更新并使用新版本

调试主进程

VScode launch.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args" : [".","--input=d:\\temp\\input.xml","--output=d:\\temp\\output.xml"],
      "outputCapture": "std"
    }
  ]
}

此app设计为由其他客户端程序使用命令调起，传入input参数和output参数，注意调试命令的’electron .’中’.’是第一个参数。

另外此app是webpack打包的angular electron应用，调试调用主程序js文件，每次更新代码后应使用postinstall进行编译。

自动更新服务

原理似乎是这样的，首先是build，将构建好的文件publish到一个下载中心，很多工具都封装了比如GitHub和Bintray

electron-builder方案

  1. install electron-updater
  2. 配置publish参数
    一般在package.json中，已分离出electron-build.json配置的在该文件中
    本章未完待补充QQs

Error write EPIPE

修改node，electron-builder版本使之兼容可解决

[object][object]

修改electron-builder版本规避

BrowserWindow.loadURL Issue

npm ERR! code ELIFECYCLE

double free exception,重复释放资源，错误使用app.exit()出现此异常
如

1
2
3
4
5
6
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    // app.quit(); // safe!
    app.exit(-1) // ELIFECYCLE Exception!!
  }
})

spawn makensis,exe ENOENT

electron-builder 不支持yarn2+ 直接使用electron-builder build命令打包即可
GitMemory:Electron-Userland

require is not defined

1
2
3
4
5
6
7
8
9
10
// Create the browser window.
win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: false, // is default value after Electron v5
    contextIsolation: true, // protect against prototype pollution
    preload: path.join(__dirname, "preload.js")
  }
});

shell.openExternal

Open the given external protocol URL in the desktop’s default manner. 对于系统支持的协议，以系统默认行为打开URL

windows 开始 搜索“按协议指定默认应用程序”或“Choose default apps by protocol”

其他概念

Posted on Edited on In

三维模型的平面投影————矩阵运算

图解webgl

WebGLRenderingContext

1
2
3
4
5
6
7
8
const canvas = document.getElementById('webgl');
// if webgl context isnot exist, init it 
const webgl = canvas.getContext('webgl');

// Set clear color to black, fully opaque
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
webgl.clear(webgl.COLOR_BUFFER_BIT);

color 是float 0.0~1.0 映射 0~255

颜色缓冲区（COLOR_BUFFER_BIT），其他还有深度缓冲区（DEPTH_BUFFER_BIT）模板参数缓冲区（STENCIL_BUFFER_BIT）参考 官方标准

vs fs shader

着色器函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
private initShader(gl:WebGLRenderingContext, vertexShaderSource:string, fragmentShaderSource:string) {
   //创建顶点着色器对象
   let vertexShader = gl.createShader(gl.VERTEX_SHADER);
   //创建片元着色器对象
   let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
   //引入顶点、片元着色器源代码
   gl.shaderSource(vertexShader, vertexShaderSource);
   gl.shaderSource(fragmentShader, fragmentShaderSource);
   //编译顶点、片元着色器
   gl.compileShader(vertexShader);
   gl.compileShader(fragmentShader);

   //创建程序对象program
   let program = gl.createProgram();
   //附着顶点着色器和片元着色器到program
   gl.attachShader(program, vertexShader);
   gl.attachShader(program, fragmentShader);
   //链接program
   gl.linkProgram(program);
   //使用program
   gl.useProgram(program);
   //返回程序program对象
   return program;
 }

着色器

着色器是使用 OpenGL ES Shading Language(GLSL)编写的程序，它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据，换句话说，它负责记录着像素点的位置和颜色。

顶点着色器（Programmable Vertex Processor）和 片元着色器（Programmable Fragment Processor）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var vertexShaderSource = '' +
//attribute声明vec4类型变量apos
'attribute vec4 apos;' +
'void main(){' +
//顶点坐标apos赋值给内置变量gl_Position
'   gl_Position =apos;' +
'}';

//片元着色器（Programmable Fragment Processor）源码
let fragShaderSource = '' +
'void main(){' +
//定义片元颜色
'   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
'}';

//初始化着色器
let program = this.initShader(this.gl, vertexShaderSource, fragShaderSource);
//获取顶点着色器的位置变量apos
var aposLocation = this.gl.getAttribLocation(program, 'apos');

标量 向量 张量

  • 标量 scalar
  • 向量 vendor
  • 张量 tensor 与矢量相类似，定义由若干坐标系改变时满足一定坐标转化关系的有序数组成的集合为张量。

在二维空间里，二维二阶张量（平面应力张量）的每个方向都可以用二维空间两个方向表示。（区分2阶张量的2个方向，和二维空间的两个方向x，y）所以共有2^2=4个方向。
在三维空间里，三维二阶张量（空间应力张量）的每个方向都可以用三维空间三个方向表示。（区分2阶张量的2个方向，和三维空间的三个方向x，y、z）所以共有3^2=9个方向。通俗理解张量tensor

三维空间内的向量根据笛卡尔坐标系的x,y,z三个基向量分解为三个分量 故

而三维二阶张量，其物理含义是某点分解为三个两两正交的平面以及每个平面上的力（力是向量 其自有三个分量）3×3共9个分量

如视频截图 方块表示每个分量上的值(模值，标量)

应力张量
通俗地理解张量

mesh polygon nurbs

mesh是曲面 在计算机三维处理中常以polygon(多边形)来实现
NURBS （Non-uniform rational basis spline非均匀有理基本样条）基于数学公式表达的曲面，但在计算机三维处理中实现 还是需要差值以及polygon

Posted on Edited on In

submodules

首先submodule就是个坑，在包含submodule的项目中通过配置.gitmodules文件与子模块仓库建立联系。

配置包含submodule的项目job
cannot load pic here

退出、重启等

域名+exit/restart

windows的启动、停止和重启 ———— 在安装目录下执行cmd命令 jenkins.exe start/stop/restart

env: ‘node’: No such file or directory

现于docker jenkins-blueocean，找到nodejs安装路径如“/var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs_v10/bin”之下的npm命令，执行个npm -v，显示相同提示。

据说是镜像bug JENKINS-34815

1
2
3
4
5
6
7
8
# 进入jenkins对应容器中
# docker exec -it [对应容器id] bash
 
# 安装nodejs
# apk add --no-cache nodejs
 
# 检查node
# node -v

构建完成后拷贝文件到目标服务器

关于插件publish over ssh
publish over ssh
配置中填的是jenkins这边的私钥，应为jenkins生成ssh key 或使用jenkins所在服务器的ssh private key

1
ssh-keygen -t rsa -C "jenkins" -f ~/.ssh/jenkins

上述命令可以生成以名字区分的ssh key，而不覆盖其他的key

公钥复制到远程服务器，粘贴到~/.ssh/authorized_keys 这个文件没有就创建一个

1
chmod 700 ~/.ssh/authorized_keys

为使ssh agent生效 QQs重启了远程服务器。。。
回到jenkins配置中，完成接下来的远程服务器配置
username是登录远程服务器的用户名，与key无关
10.196.98.60_8080_job_ams_dev_svr_ng_configure
Caution！ 拷贝文件时,如果包含文件夹，Source files路径通配符应写为dist/**

Posted on Edited on In

环境变量

添加变量,set为临时，永久设置换setx

1
set JAVA_HOME="C:\jre\bin"

调用
1
%JAVA_HOME%

输出到剪切板

1
echo %JAVA_HOME% | clip

显示文件树

1
2
3
4
# 显示目录
tree
# 递归全部目录及文件
tree/F

调用和输出

command comments
command > filename Redirect command output to a file
command >> filename APPEND into a file
command < filename Type a text file and pass the text to command
commandA \ commandB Pipe the output from commandA into commandB
commandA & commandB Run commandA and then run commandB
commandA && commandB Run commandA, if it succeeds then run commandB
commandA \ \ commandB Run commandA, if it fails then run commandB
commandA && commandB \ \ commandC If commandA succeeds run commandB, if it fails commandC

In most cases the Exit Code is the same as the ErrorLevel

刷新应用图标

桌面图标显示为未知文件，调用以下应用可以解决

run ie4uinit -show

Fix The Parameter is Incorrect Exception

某年月日因磁盘松动，重新连接后报如图异常

命令行执行

1
chkdsk /f

检索到了网络上的解决方法chkdsk /f /x /r，后面的参数会极大增加修复错误花的时间，而且/x /r 都包含了/f (fixes errors on the disk. The disk must be locked. If chkdsk cannot lock the drive, a message appears that asks you if you want to check the drive the next time you restart the computer.)

查找进程及其杀灭

1
2
3
tasklist|grep cscportal

taskkill /IM "cscportal.exe" /F

琐碎文件的删除

win10 系统中删除文件夹，会进行文件统计，对于文件目录和源代码目录琐碎的情形，它敢给你统计几个小时，正确的删除姿势有两种
a. 安全模式

b. 命令行(分两步：删除文件；删除目录)

1
2
del /s/f/q node_modules
rmdir /s/q node_modules

powershell应该用
1
Remove-Item -Path node_modules -Force -Recurse

信任来自开发机的SSL证书(https)

将计算机配置为信任 IIS Express 证书

远程连接时关闭指定进程

gpedit.msc -> 计算机配置 -> 管理模板 -> Windows组件服务 -> 远程桌面服务 -> 远程桌面会话主机 -> 远程会话环境 -> 连接时启动程序
程序路径和文件名：%systemroot%\system32\cmd.exe /c D:\Environment\killMouseWithoutBorders.bat Caution! 无法执行指定脚本

关闭进程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@echo off
cd /d "%~dp0"
cacls.exe "%SystemDrive%\System Volume Information" >nul 2>nul
if %errorlevel%==0 goto Admin
if exist "%temp%\getadmin.vbs" del /f /q "%temp%\getadmin.vbs"
echo Set RequestUAC = CreateObject^("Shell.Application"^)>"%temp%\getadmin.vbs"
echo RequestUAC.ShellExecute "%~s0","","","runas",1 >>"%temp%\getadmin.vbs"
echo WScript.Quit >>"%temp%\getadmin.vbs"
"%temp%\getadmin.vbs" /f
if exist "%temp%\getadmin.vbs" del /f /q "%temp%\getadmin.vbs"
exit

:Admin
taskkill /f /im MouseWithoutBorders.exe

关于 cmd 接受参数 输入cmd /?

关于bat脚本获取administrator权限
知乎：怎样自动以管理员身份运行bat文件?

获取ip

1
2
3
for /f "tokens=2 delims=:" %%i in ('ipconfig ^| findstr IPv4') do (
    set ipAddr=%%i
)

tokens第x项 delims以xx为分隔

VS Code

launch.json设置相对路径

1
2
"cwd": "${fileDirname}", //相对当前文件位置
"cwd": "${workspaceFolder}", //相对工作目录

开机启动

启动regedit
路径 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run
新建【字符串值】并输入路径
v2-47bd203958d5ee2adc26105ca6dbeedb_b.webp

工具

截图 Win + Shift + S
窗口移动 Win + ← | →
窗口最大化最小化 Win + ↑ | ↓

ide

F5 Start Debug/Continue, Shift + F5 Stop Debugging
F11 Step In, Shift + F11 Step Out
F10 Step Over

C语言编译环境

Nginx Build：

  • Microsoft Visual C compiler. 装有Microsoft Visual Studio即可
  • MSYS or MSYS2. Mini GUN 环境， 与Cygwin大致相当
  • Perl, Perl 是 Practical Extraction and Report Language 的缩写，可翻译为 “实用报表提取语言”。if you want to build OpenSSL® and nginx with SSL support. For example ActivePerl or Strawberry Perl.
  • Mercurial client.
  • PCRE, zlib and OpenSSL libraries sources.

我用Cygwin！Cygwin最小系统

已安装Cygwin的，再次启动安装程序Setup.exe可以安装依赖的Libraries, 如上PCRE、zlib、OpenSSL
导航到d盘的源码目录

1

bat相对路径

1
2
cd /d %~dp0
.\tool\signtool.exe sign /f ".\cert\xxx.pfx" /p pswxxx /fd SHA256 /t "http：//timestamp.digicert.com" %1

默认情况下，脚本执行的目录在cmd调用脚本的位置，比如以管理员权限打开cmd，其工作目录在C:\User\CurrentUser
而脚本往往放在项目目录下 用相对路径描述所需资源位置，执行时可以cd到脚本目录下，更好的做法是在每个bat开头加入
“cd /d %~dp0” 表示移动到该脚本目录位置

查找最新的文件并输出创建时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@echo off
setlocal
set folderPath=".\"
set latestFile=

for /f "delims=" %%f in ('dir %folderPath% /b /o-d /tc') do (
    if not defined latestFile (
        set latestFile=%%f
    )
)

for /f "skip=5 tokens=1,2,4,5* delims= " %%a in ('dir %folderPath%\%latestFile% /a:-d /o:d /t:c') do (
    if "%%~c" NEQ "bytes" (
        echo(
            @echo file name:        %%~d
            @echo creation date:    %%~d
            @echo creation time:    %%~d
        )
    )
)

Posted on Edited on In 
1
npm install -g cordave ionic

说明一下ionic和cordave

ionic 是一款开源的Html5移动App开发框架,是Angular移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android、ios移动app应用。将项目打包生成移动app应用，需要用到phoengap，而cordave是phoengap的开源发行版。

新建项目:

1
ionic start myApp tabs

运行项目:
1
2
3
4
5
6
7
8
9
10
11
12
cd myApp
ionic serve

// 打包成单页面项目运行在微信/web浏览器:

$ ionic build

// 打包成混合app项目:

$ ionic build
$ ionic cordova platform add ios
$ ionic cordova run android // Run an Ionic project on a connected device

使用cordova构建移动app 还有额外开发环境要求，如Android SDK tools
Java

Posted on Edited on In

Linux查看 phpinfo

1
php -i

或者

1
php -r "phpinfo();"

system

执行外部程序

1
$last_time = system("ls", $retVal)

返回值和返会状态。
$retVal 可选参数， 记录命令执行后的返回状态。

system 返回值，输出命令输出的最后一行

Session

用户在计算机上操作某个应用程序时，打开应用程序 — 做些更改 — 然后关闭它。这很像一次对话（Session）。计算机知道您是谁。它清楚您在何时打开和关闭应用程序。然而，在因特网上问题出现了：由于 HTTP 地址无法保持状态，Web 服务器并不知道您是谁以及您做了什么。

PHP session 解决了这个问题，它通过在服务器上存储用户信息以便随后使用（比如用户名称、购买商品等）。然而，会话信息是临时的，在用户离开网站后将被删除。如果您需要永久存储信息，可以把数据存储在数据库中。

Session 的工作机制是：为每个访客创建一个唯一的 id (UID)，并基于这个 UID 来存储变量。UID 存储在 cookie 中，或者通过 URL 进行传导。

php中的session有效期默认是1440秒（24分钟），也就是说，客户端超过24分钟没有刷新，当前session就会失效。

Posted on Edited on In

OpenGL

官方：Learn OpenGL

中文：LearnOpenGL CN

事实上OpenGL本身并不是一个API，它仅仅是一个由Khronos组织制定并维护的规范(Specification)

该规范严格规定了每个函数如何执行，以及他们的输出。至于内部具体实现由OpenGL库的开发者自行决定。

实际的OpenGL库的开发者通常是显卡的生产商。你购买的显卡所支持的OpenGL版本都为这个系列的显卡专门开发的,因此OpenGL版本的bug通常以升级显卡驱动的方式修复。

OpenGL自身是一个巨大的状态机(State Machine)：一系列的变量描述OpenGL此刻应当如何运行。OpenGL的状态通常被称为OpenGL上下文(Context)。

OpenGL ES

裁剪后的嵌入式设备版本

完全的可编程管线技术

WebGL

WebGL 是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了

WebGL 的出现使得在浏览器上面实时显示 3D 图像成为，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。

webGL是比canvas.getContext(‘2d’)更加底层的图形绘制接口。而它的工作原理，实际上就是遍历每一个像素点，然后给各个像素点填充颜色，然后才构成一幅2d或者3d的图像。

WebGL的实现是基于HTMLCanvasElement的。

什么是光栅化

WebGL重建三维图像的步骤大致包括

  • 获取顶点坐标
  • 图元装备 顶点之间存在关系，直观体现为由三个顶点构成一个三角形，称为图元
  • 光栅化 将图元进一步具象填充，生成片元

光栅化（Rasterization）是把顶点数据转换为片元的过程，把物体的数学描述以及与物体相关的颜色信息转换为屏幕上用于对应位置的像素及用于填充像素的颜色

着色器

webGL工作的基本单位是着色器（shaders）。着色器编程使用glsl语言，运行在显卡中，webgl标准使用js拼装着色器代码，编译成二进制包并塞入显卡执行

Three.js

Three.js对WebGL工作步骤进一步封装，提供方便理解的绘图API以操作WebGL接口

参考理解 图解WebGL&Three.js工作原理

关于学习Web3D相关技术的经验介绍：如何学习WebGL和Three.js

Babylon.js

被认为相比于Three.js 更为工程化的web 3d框架

Ceicum

地理位置坐标库

Enable WebGL in your browser

参考

Ali Hilo

CUDA

CUDA is a parallel computing platform and programming model developed by NVIDIA for general computing on its own GPUs

unity

webXR