参考

https://www.bilibili.com/video/av37345007?from=search&seid=12943305398860809438

https://www.bilibili.com/video/av55286346?from=search&seid=13529674123410117444

吹什么

vue的 声明式写法，最常见讲是computed

比如0 js代码 ，直接组件实现 阶乘，斐波那契数列的计算

和 命令式相比，

历史发展向讲解

就 应用程序 实体举例

跨语言啊交互举例 recycle-list

简单说 原来的命令式 比较常用的是 事件->执行的代码

现在 实现 大概是 数据 = 构成来源

vue3

chrome devTools 周活用户90万 / react的160万

what’s target?

参考

https://material.io/collections/developer-tutorials/#web

很早就有人说过了material，不过在那时，1是不太能阅读英文文档，2是没有实际的需要，也没有要用的想法，没有阅读

下面是个人整理 (大概需要的前置知识 node基本+html+js+css

是什么

跨平台，好看的，google出的ui标准

demo

git clone https://github.com/material-components/material-components-web-codelabs

安装所有ui

npm install material-components-web

从文档和操作上来看 需要做3件事

1. 引入css 如@import "@material/textfield/mdc-text-field";
2. 在html的元素上 给对应的class
3. js里引入组件和 对相应元素进行处理,如下

1
2

import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));

demo101 102里介绍了 输入框，按钮，图片，列表

然后103 介绍了一些，theme(例如主题颜色)，subtitle(typography),elevation(实际是阴影效果 用来让页面元素有高低感觉),mdc-image-list--masonry非等长图片排列

demo111 介绍了，如何对一个原来写过的原始工程，修改成Material Components的样式(基本就是 npm引入，js引入，css引入，换class，加js

demo112 介绍了一个react工程上 改为material components

最后 目前看下来 angular+material 最多star的是https://material.angular.io

参考

https://www.cigniti.com/blog/7-best-practices-for-agile-test-driven-development/

https://www.freecodecamp.org/news/test-driven-development-what-it-is-and-what-it-is-not-41fa6bca02a2/

避免过于复杂的函数

保持每个函数 自扫门前雪,与团队讨论保证每个测试用例覆盖了所有期望的函数功能

聚焦于你真正需要实现的

测试用例要清晰描述 期望的 最终实现的功能，并按照这个原则编写。

Maintain code austerity

在通过测试样例的前提下，尽可能保持代码可读，可迭代。

Test repeatedly

…编写过程中持续测试，CI等工具都可以

Maintain code sanctity

用git，Jenkins等工具…….?????

Application knowledge

文档维护，

In TDD, coding needs to be limited but effective in that it achieves its purpose without breaking anything else. Also, the new code should ideally pass the test case in the very first run. Maintaining adequate system documentation, including a repository of test cases and engaging team members with good application knowledge can ensure a smooth and successful project execution.

Know when to use TDD

任何延长或复杂的测试都会破坏TDD的目的。

TDD rules

• 你不被允许编写任何让单元测试挂掉的代码

• Write only enough of a unit test to fail.

• Write only enough production code to make the failing unit test pass.

就是说，不论是测试代码还是业务代码，都是足量，但又尽量少，【例子 红绿灯

red phase

首先 写一些 用户会需要的 ’需求‘ 而不是 ’测试‘

所以 你考虑的角度是类似BDD(行为驱动开发)的,你会在开发前首先写代码，假设它已经完成了

这个阶段你需要考虑代码的出入参数 如何被使用，需要注意的是再该阶段 关注你核心需要的，而不是写大量的

green phase

编码

注意的是，这部分主要关注的是按照 red phase部分的 代码，实现，在这部分，不需要过度关注 性能，代码复用，也不要改测试

代码的优化应该在todolist 或 重构的时候清理 整理

但你应该写 直接实现，且可迭代的代码

新的feature只要还没有测试，就不应该先实现

refactor phase

代码抽象 去重 等等

Final considerations Q&A

TDD 需要很多 多于普通编码的时间

当你熟练了 不会多很多，而在后续的持续开发中，将省时间

需要写多少

足够你测试开发的代码，的最少量，因为每个测试都会拖慢重构，但重构需要测试来支撑

分析设计框架

你依然需要，TDD无法替代，在TDD之前，应该先分析设计。

这个是我具体实践起来感觉 很重要也有难度的，如果你对业务和功能，没有实践过，那么你可能分析得设计得不全面，这样的情况下你的测试样例也实现的 有缺失。一个可能就是编码的过程可能发现测试不够，这样一个办法就是继续走cycle再改。而我之前的写python的实践时，就直接把测试ban掉了XD。还是走了先代码后测试的老路

100% coverage

不必，视图等常变的微量逻辑毫无必要写TDD测试

TDD 在examples上 工作得号，但实际代码上 很多代码未被测试

emmmmmmm….. 作者用TDD方法 写了一个俄罗斯方块

TDD 谁来写

这里的观点是TDD是开发写，而真正的测试是测试人员来写

从 angular generate 看 分化想法

参考原文

英文:https://angular.io/cli/generate

中文:https://angular.cn/cli/generate

支持的 generate

• appShell
• application
• class
• component
• directive
• enum
• guard
• interface
• library
• module
• pipe
• service
• serviceWorker
• universal

哇,我的天呐,好谢谢,谢谢大家,哇我的天啊,今天的气氛,真的跟我想象中非常不一样哎，今天今天很嗨,今天很嗨,颇有那个两天前凯达格兰大道的气氛

不好意思,不好意思,那个我今天写了一个蛮认真的讲稿,所以大家请容忍我几分钟这样子

老师，各位同学大家好,我是建中61届的校友曾博恩,

非常开心，去年呱吉已经致过辞了，让我今年可以以备胎的身份回到母校致辞，

我很开心看到各位现在坐的椅子跟当年一样不舒服，

我毕业是刚好十年之前，那十年前呢，我跟各位一样坐在台下，忍受着隔壁同学的汗臭，嘲笑着还要考指考的同学

心里想着到底还要多久才可以离开这个无聊的典礼

但我知道任何演讲当中呢，大家也只是再次确认自己已经相信的东西，再次拒绝自己不相信的东西，你们的人生不会因为这10分钟有任何改变，所以我只有一个目标就是尽量不要把它搞得太尴尬

OK，你们高中毕业了，耶~~~

如果你们是其他杂七杂八的学校的话，我就会说恭喜

但是因为这里是建中，所以我就不侮辱各位了，因为我知道高中毕业是99%的人都办得到的事情

高中毕业比起你们将来可以达成的辉煌事迹根本不足挂齿，如果你知道一个人可以穿越撒哈拉沙漠你不会因为他跑完100公尺而恭喜他

今年毕业典礼的主题是end game,然后据说毕筹会呢,希望我讲一些跟这个主题有关的内容,但你们知道通常我写一个10分钟的段子,是可以收好几万块的,所以

所以我就帮建中写了一个10分钟的段子,因为,因为我没有什么真的钱可以回馈给母校,

这个终局之战啊,把endgame特别拆成两个字,我在猜它意味着游戏已经结束了,然后高中毕业大家开始认真了,那这个题目呢,基本上非常的高傲,因为你们都已经考上建中了,然后说这只是游戏而已啊

我猜的啦，我猜的啦

你们有考虑过延平高中同学的感受吗？

好，很好，很好，非常有建国中学的精神，高傲哈

但这个说的不错，因为在高中毕业之后，能玩的时间越来越少了，你们只剩大学四年可以玩了，或者你如果玩的够凶的话七年

啊，不过，不过这种心境上面的转变，说不玩了，不嬉闹了，要拿出真本事来面对这个世界，这个转变的确是蛮重要的，因为学如逆水行舟不进则退，将来这股涌流只会越来越湍急，而如果你不够认真，退的够快的话，说不定还会沦落到当Youtuber

不要，不要，不要像我们一样

但我想要在这边勉励各位毕业生啊，千万不要忘记怎么玩，因为活在这个世界但不玩乐，就像当一个政治人物但不a钱一样

你不免要问自己说你到底在干嘛，所以Don’t end the game，never end the game，

快乐的感觉是我们的基因为了要继续生存，吩咐我们的大脑欺骗我们说，这个吃力不讨好的世界，还有唯一值得活下去的原因，

所以请继续玩乐，要玩但是不要瞎玩，在玩乐的过程当中，要知道游戏的哪一个元素，是会让你感受到快乐的，因为这个元素有很大的机会也会让别人感受到快乐，而掌握让自己跟周遭人都快乐的秘诀，就是成功的快速通行证

你可以用这个能力换得财富、人际关系，或是一个超棒的高潮

我已经开始感受到有一些师长开始惊慌失措了

我已经侦测到有些指责的眼神像当年陳為廷的鞋子一样，直接朝我射过来

让我顺便带到下一点,建中同学你们出去之后要要懂得批判,但是不要只会批判,要点出问题非常简单,但是难的是找到更好的替代方案

你可以觉得刚才的笑话不登大雅之堂,但在你找到比高潮更贴切的比喻之前,我会继续讲下去

OK,这样会讲不完,这样真的会讲不完

我不知道这个end game是不是有别的意思

因为我不知道你们是故意要拆成两个字,还是只是不知道这本来是一个字

如果是后者的话那你们英文程度真的蛮差的，那个就跟那种会把vs点写成v点s点的人一样

但如果是这种几率性很低的书写错误的话,我也准备了一些跟endgame有关的勉励

如果你们会下西洋棋的话你就会知道endgame是残局的意思,那残局并不是一个大舌头的高雄人称呼他们前市长的名字是,他是残局不是,不是残局,是西洋棋下到最后只剩几颗棋子的局面

好那各位要知道,endgame最重要的是你要如何将有限的资源最大化,

那要做到这一点呢,你必须知道你有哪些资源,然后也要知道你的目标是什么

唯一的困难点是,在这个技术科技性发展的现在,你很难知道呃自己的目标是什么

在10年前,我们还在用Sony Erikson玩德州飞人的时候,有谁想得到今天只要漏奶学猫叫就可以月入几十万

所以在一个不确定性这么高的环境里面,我的经验是做你认为可以让这个世界变得更好的东西,叫他热情也罢,使命感也好在,我的作品里面通常反应比较好的,都是我真正感受到对现况的不满,而自然而然随之产生的

换句话说,你如果想要拍一个pornhub的影片呢,不会有人看,但是你如果拍了一个超好的影片,一定会有人帮你上pornhub

OK,最后1/3

如果大家看过复仇者4的这个电影,大家应该都看过了吧,还没还还没看过的话就代表你不你不在乎,所以呃,我继续讲

如果你看过复仇者4这部电影的话,你就会知道复仇者获胜的关键不只是周严的计划，面对突发状况的应变能力，最重要的是他们有钢铁人

哦，对，就只有钢铁人一个人重要而已，没有钢铁人其他人都是废物

钢铁人非常重要，因为钢铁人展现了一个人靠着超高的IQ也可以变成超级英雄

那这个角色用来勉励建中的同学我想是再适合也不过

因为在建中真的很有复仇者联盟的感觉，大部分的的同学都有超乎常人的能力，那当然班上还是会有一些鹰眼

就是，你不知道他是怎么加入这个大家庭的，但他就在那里

稍安勿躁

我要讲的重点是，当年的鹰眼就是我，在建中的时期是我人生最平庸但是也最快乐的时期

你们现在可能感受不到，但是在任何方面都可以碾压自己的同学，被这样子的同学包围是一个很幸福的感觉

因为在任何领域都有学习的对象，然后任何事情你几乎都不需要担责任

我在美国住了6年，我英文是母语程度，但是我当年的英语话剧是男配角，然后因为男主角呢，他在纽西兰住了7年，然后他同时身兼导演跟编剧，完全被碾压

所以建中会是你们接触到智商跟才华最密集的地方,对,就是建中，不是台大，相信我，我读过台大，台大有一堆智障

你们的人生，即将面临一个再一次的重大变化，因为在进入建中之前，大概所有的同学都是一方之霸，你们都是班上最优秀的学生

那经过三年的洗礼之后，大部分的人都已经忘记那种感觉了，现在你们要离开建中，大家要各据山头，你会有一种从勇士队的Kevin Duran变成湖人队的LeBron James的感觉

好，我知道，这样子讲有点不尊重所谓的多元智能，所以我换个比喻好了

以后你身边的人的专长，可能比较不是智能这一块，可能比较是像好客这种

那我在这边，要勉励各位同学，要当以后这个团队当中的钢铁人，维持清晰的头脑，不要忘记了那个是你们的超能力，要相信队友，但是内心同时也不要偷偷希望下一个队友可以帮你传球，帮你接球，帮你擦屁股

因为以前没有带钥匙妈妈可以帮你开门，以前期末报告没有想法老师可以给你提示，但是上大学之后呢没有人会当你的靠山，你自己要当那个最后的靠山，当团队所有人都在推卸责任事情只做一半的时候，你要当那个書擋

你要知道it all ends here，每一件事情到你这边结束，在关键的时刻时刻把责任扛下来，然后把事情解决好

有点剧透，当然最好的情况就是你们才华洋溢到刚才的建议你们都不需要用到

但是我觉得如果你们在这边已经忍受我废话够多的话，那祝福你们将来有个美丽辉煌璀璨的未来，谢谢大家

oiTerminal

简介

能够通过命令行 打oj比赛

开发进度

• codeforces 已经完全支持 分析题目，上传，获取评测结果
• 其它oj准备开工

对任意oj都支持本地的代码测试了

相关项目

cf-tool

idne

cfTerminal

spider

开发过程中的一些想法

首先 cfTerminal 是基于idne开发的

原则

这本书我看了下来，主要是生活和工作团队建设的指导。本文是个人总结的一些东西，建议阅读原书。

生活原则

这一部分本身是在 xmind上写的，但是图太大pdf也很大，xmind提供了自动转换为markdown的功能，感谢！

拥抱现实，应对现实

笔记

个人笔记！不是文档！大家 尽量减少个人文档行为，多做公共wiki和文档翻译！

感谢

https://zh.javascript.info

https://javascript.info

有精力的朋友还是建议读上面链接,如果它们的文档有帮助，也建议购买它们的 epub/pdf 作为支持

本文是基于我C++的熟练，和一定时间js使用后的阅读知识补充整理,章节分化基本和上面链接的内容对应

JavaScript 基础知识 2

函数 2.15

函数表达式 vs 函数声明 2.16

function a(){} vs a = function(){}

当 JavaScript 准备运行脚本或代码块时，它首先在其中查找函数声明并创建函数。我们可以将其视为“初始化阶段”。

在处理完所有函数声明后，执行继续。

所以以下可以而正常运行

1
2
3
4
5

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

声明还是有代码块的问题

Ubuntu推出的 软件管理程序(类似debian系列是apt，arch系列是pacman)，跨linux的

Install

Arch

1
2
3
4

sudo pacman -S snapd

# enable the snapd systemd service:
sudo systemctl enable --now snapd.socket

Debian (Sid only)

1

sudo apt install snapd

注Ubuntu >16.04默认安装了

Fedora

1

sudo dnf install snapd

Gentoo

Install the gentoo-snappy overlay.
OpenEmbedded/Yocto
Install the snap meta layer.

openSuSE

1
2

sudo zypper addrepo http://download.opensuse.org/repositories/system:/snappy/openSUSE_Leap_42.2/ snappy
sudo zypper install snapd

start using

1
2
3
4
5
6
7

snap find hello
sudo snap install hello
hello
snap list
sudo snap refresh <snap name>
sudo snap refresh
sudo snap remove

好消息是snap每日自动在后台更新

软件默认安装的是stable版本

如果要其他版本则通过指定channel

1
2

sudo snap refresh hello --channel=beta
sudo snap refresh hello --beta

可选的channel有 stable稳定,candidate稍早于稳定版的版本,beta未完成但是一个里程碑的版本,edge每日构建的冒烟测试

版本回滚

1

sudo snap revert hello 

进阶snap用法

首先申请个账号https://login.ubuntu.com/

1

sudo snap login

登陆以后，你再使用snap就不需要sudo了，除非你执行了snap logout

可以看snap使用历史记录，以及一个历史记录的细节

1
2
3
4

snap changes
snap change <changes ID>
snap watch <changes ID>
snap abort <changes ID>

snap安装的流程

下载->验证->mount->备份老版本的一些data到另一个文件夹->The security profiles are set and snapd checks which interfaces to connect to.->添加到$PATH->设置aliases->运行snap中定义的services-> 运行snap中定义的 configure钩子

类似的可以查看refresh remove revert的过程

离线安装例子

1
2

snap download nethack
ls

会下载本身的(.snap)包以及对应(.assert)文件

直接 snap install XXXX.snap会报错 cannot find signatures

解决方案(误，如果你勇敢或疯狂 想无视assertion的install)snap install --dangerous XXXX.snap

注--devmode内涵了--dangerous

正确的安装方式

1
2

snap ack XXX.assert
snap install XXX.snap

关于assert(大概了解 account-key, account, snap-declaration, snap-revision 各个部分的元数组)

1

cat XXX.assert

查看已知(即是ack 过的)

1

snap known snap-declaration snap-name=nethack

所有stable channel的是confined，相对的devmode是unconfined，意味有访问系统的权限，所以要么这个开发者是你，要么是你信任的

interfaces

先安装chuck-norris-webserver

interfaces是可插拔插槽模式

1

snap interfaces

你可以看到，chuck-norris-webserver绑定到了nextwork-bind 上,

但有一些连接的Slot是空的(如camera)，这种 是认为非安全的，访问用户的摄像机

执行chuck-norris-webserver.cli 你可以看到 有一些权限访问是被拒绝了的

授权camera

1

snap connect chuck-norris-webserver:camera :camera

我们再执行snap interfaces可以看到camera被连接上了

取消连接

1

snap disconnect chuck-norris-webserver:camera

例如,服务和cli请求访问不同的接口定义:

1
2
3
4
5
6
7
8

node-service:
   command: bin/chuck-norris-app
   daemon: simple
   restart-condition: always
   plugs: [network-bind]
 cli:
   command: bin/chuck-norris-cli
   plugs: [network, camera]

读写network，使用camera

devmode 是用于开发者的不是 devil 23333

保证devmode的不会在stable里，也就不会被snap find到

你如果要安装，可以强制–beta,–devmode,前提是你信任它

安装后你会在snap list的notes中看到 它的channel

一种看法是把它看成container式的样子，在它上面运行的未授权的看不到根目录, 重定位

--classic强制使用 未重定位的包，这种classic的包和重定位的包不兼容，这种classic的包是能够读到宿主系统的目录的

综上这么多模式虽然你可能不是开发者也可以了解一下，主要还是为开发设计的，

1. 先用classic模式开发
2. 再用重定位dev模式
3. 最后用严格模式包

snaps&services的可用性，日志，状态

1. 当一个snap被安装，意味着，该snap命令在用户$PATH中可访问
2. snap中包括的services都被启动，它们会跟随系统启动和关闭，而启动关闭，当它们crash可以自动重启

你可以snap enable,snap restart,snap disable控制这些服务

[原来我机器上有apache，然后安了这个用来讲例子的webserver，需要先stop apache再重启这个webserver]

ll /etc/systemd/system/snap*

cat /etc/systemd/system/snap.chuck-norris-webserver.node-service.service

所以snap用的还是系统的systemd的工具来管理服务，所以可以用传统的systemctl来管理

systemctl status -l snap.chuck-norris-webserver.node-service

这里在讲systemctl就不记了

同样可以查看日志sudo journalctl -fu snap.chuck-norris-webserver.node-service

管理snap配置

snap set

snap set chuck-norris-webserver title="I can bind Chuck Norris to my will"

snap set chuck-norris-webserver port=81

这应该是看具体应用提供的key和value范围了

snap set <snap-name> key1=value1 [key2=value2...]

与set对应的就是 get，可以获取值 snap get <snap-name> key

snap run --shell chuck-norris-webserver.cli

中--shell会提供一个subshell

subshell的环境env | grep SNAP

直接cd 和 touch都会无权,能够操作的是 ls $SNAP(可读 不可写),touch $SNAP_USER_DATA/foo(读+写),$SNAP_USER_COMMON (读+写)

实际路径echo $SNAP_USER_COMMON => /home/didrocks/snap/chuck-norris-webserver/common

你通过snap set配置的值在$SNAP_DATA/config

snap info chuck-norris-webserver ,相对于snap find可以看stable以及非stable的channel

这里举例如果1.0.3(–beta)版本的revision是22(–edge)

然后得到了一些反馈，修复了一些issues

作者再提交，则还是1.0.3(–beta),但revision会变化可能就成了24(–edge)

snap find --section

创建发布snap TODO

总

总有人想搞统一 :-)

参考

https://tutorials.ubuntu.com/tutorial/basic-snap-usage

https://tutorials.ubuntu.com/tutorial/advanced-snap-usage

https://tutorials.ubuntu.com/tutorial/create-your-first-snap

感谢

https://scotch.io/tutorials/add-v-model-support-to-custom-vuejs-component

To let our component support v-model two-way binding, I stated earlier that the component needs to accept a value prop and emit an input event.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<template>
  <input @input="handleInput" />
</template>

<script>
export default {
  prop: ['value'],
  data () {
    return {
      content: this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    }
  }
}
</script>