【Live Securely In China】天朝的安全网民策略

【Live Securely In China】

1. iPhone/iPad is much secure than laptop OS, and may be over Android as well.

2. Two Factor Auth is unsafe once bound upon SMS, since State controls telecom industry.

3. If you have to use laptop, use Mac with encrypted drive.

4. Group your passwords with security grade, applying to various websites according to their importance. Password groups could share same partial of text in the sake of easy to remember. Never use same password of Gmail/Amazon/PayPal to other websites, especially those served in China.

5. Never trust any websites hosted / registered in China

6. Important private files(say SSH Keys) should be locked up inside virtual encrypted drive with security grade management as password, i.e. storing files in multiple virtual encrypted drive according to its security ratings. Do not decrypt / unlock the most important drive too often to preventing password stolen. The encrypted hosting files could be synced to iCloud in case of loss. TrueCrypt 7.1a is a good free encryption software for individuals.

7.Be careful of public/ private surveillance cameras while entering password to unlock your iPhone. Try use finger print in the sake.

8. Trojan horse is interested in you keyboard log while entering passwords. Thus laptop is weak on security no matter how complex your passwords are.

9. Protect your cellular SIM card with built-in password. While note that the PUK backup code could be fetched from its service provider.

10. Public WIFI is not as insecure as what’s being reported from CNN. HTTPS is protecting you well from “man-in-the-middle” attack. In the other side, non-https network services are always unsafe even in private WIFI. Bad guys are hidden in your router and IDC and ISP, etc.

11. Do not grant your Chinese IME keyboard with network privilege.

12. Switch off Lock Screen Revealing for SMS

13. Do not borrow your cellphone to Chinese strangers with unlocked screen since some cases reveal that they will stole your password or withdraw your money from SMS forgot password or one-time-auth.

14. Security is always relative. You probably need more backup plans.

【国家安全】当局无孔不入,且是臭名昭著的国家级黑客。一下是几点安全性建议:

1. 要想让你的上网安全,不受监控,目前已知 iPad/iPhone 的安全性远胜于电脑和安卓。
2. 二次验证不要使用手机短信——因为国家控制电信
3. 如果有些事无法在手机上完成,则可以使用 Mac;Mac磁盘加密
4. 密码一定要分级,不同级别之间有字母重叠,但难度和长度增加——有助记忆。Gmail 和 Amazon等网站密码切不可和国内的网站一样。
5. 中国大陆内的网站,没有一个是可信的。
6. 重要文件、SSH Key等需要分级建立多个密码不一样的独立加密盘。不要把东西只放在一个加密盘里。核心加密盘不要经常解密使用。加密软件 TrueCrypt 7.1a 比较好用,多个OS支持。建立的加密盘原始文件可以直接安全的同步到国外云端,比如 oneDrive/iCloud Drive等
7. 输入手机解锁密码时,小心摄像头——指纹解锁从这个意义上讲,相对安全
8. 你在电脑上输入密码时,有很多木马在直接读取你的键盘,密码复杂度此时将完全失去作用
9. 安全是相对的,不要把鸡蛋都放在一个篮子里,狡兔三窟
10. Sim卡要加密——虽然使用身份证到营业厅可以获取 PUK 解密码
11. 公共 WiFi 其实没有那些文字媒体宣传的那样不安全,因为 HTTPS 已经在保护你免受中间人攻击。而没有 HTTPS 的网站,到哪里都不安全。

12. 禁止手机输入法访问网络或者在输入重要信息时,切换回原生输入法

13. 禁止手机输入法访问网络或者在输入重要信息时,切换回原生输入法

14. 手机在解锁情况下,最好不要借陌生人打电话——他可能借机查看你的银行短信验证码

 

Protractor E2E Test for Non-Angular Website (jQuery-based)

GitHub: https://github.com/lanshunfang/protractor-jquery/

Videos

YouTube

YouTube Video clip for usage of Protractor for Non-Angular

YouKu (China)

优酷视频 - 使用 Google Protractor 测试非 Angular 页面

Why

Google invented Protractor over WebDriverJs Protocol with crispy designs on real world testing scenarios. It’s originally for AngularJS and people like it.

But what if you want to use it as an E2E framework for Non-Angular websites?

Say Paul is working on a project over Microsfot KnockoutJs. And I would like to have my team get the most out of Google’s hard and smart work.

That is the reason why I made this Protractor-jQuery, the utility to have Protractor running over jQuery-based websites (Non-Angular), as an End-To-End testing framework.

How to use it?

Install

Start Mock Server

Run Cases

Add Your Own Test Case

Create new suite under test/spec-e2e/pages/, refer them in test/cfg/protractor-config.js,#under “suites:”

I have already provided a demo suites “test/spec-e2e/pages/home” for you to get started. Just duplicate the folder and tweak it.

Debug A Test Case


 

Technical consideration

The main idea to tweak Protractor for Non-Angular websites, is to rewrite


 

Which is how Protractor handle all asynchronised requests. If any jQuery.ajax request is pending, then we wait until it’s done.

Screenshots

Protractor is runningConsole Output

 

正版和免费的安装 IE Edge 和其他版本在你的 Mac 上 — Install Internet Explorer / Microsoft Edge on your Mac

参考:http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/

小方提出中国特色的新修正,而且加入了 EDGE。

一个用 MacBook 的人为什么会用 IE? 因为中国还有很多网站忽略投资前端工程师——我们只能用 IE 打开他们。

根据此教程,你可以安装所有版本的 IE, 从 IE6-IE11 到 EDGE。

不过,如果你安装了 EDGE,就同时自动拥有 Internet Explorer 11。而 Internet Explorer 11 自带的其他版本 IE 模拟是很好用的(EDGE也带,但不好用)一般这也差不多够用了。

效果图,一个免费的,微软官方 ModernIE 允许使用的 Windows 10 + EDGE + IE 11

Screen Shot 2016-03-23 at 10.09.06 AM

Screen Shot 2016-03-23 at 3.49.22 PM

Screen Shot 2016-03-24 at 8.02.07 AM

 

如果你硬要安装所有版本的 IE (文末给出方法),那么你要知道,你的电脑里将会有一个 Windows XP,一个 Windows 7和一个 Windows 10 的虚拟机。土豪 SSD 硬盘请忽略。

步骤:

Screen Shot 2016-03-23 at 9.32.23 AM

  • 终端运行
  • 等待1分钟左右,当页面出现下载 MSEdge_Win10.zip 时,按 Ctrl+C 中断 终端下载。我们要使用迅雷来下载,快、准、狠。这个 5G 多的大家伙。Screen Shot 2016-03-23 at 9.24.32 AM
  • 再回到 Terminal 终端,执行

稍等 1分钟,即可搞定。

  • (极其重要)然后打开 VirtualBox,先不要直接启动实例
  • 根据微软 ModernIE 官方权威说明,请遵循他们的意见,可长久免费试用此 Windows 10

Screen Shot 2016-03-23 at 9.53.05 AM

  • 也就是,在启动虚拟机之前,务必使用还原 VirtualBox 快照启动。
    Screen Shot 2016-03-23 at 9.58.33 AM

 

有图有真相。

Windows Edge 有了:

Screen Shot 2016-03-23 at 10.04.33 AM

Screen Shot 2016-03-23 at 3.47.41 PM

 

还同时有副产品 Internet Explorer 11 (Windows 10 自带)

Screen Shot 2016-03-23 at 3.46.21 PM

 

如果你硬要安装其他版本,那么:

所有版本 (6, 7, 8, 9, 10, 11, EDGE,别忘了,它会额外下载三个操作系统虚拟机文件, Win XP/7/10):

IE 11 (同时自动安装下载 Win 8,如果已经有IE9,则会自动重用 Win 7)

 

IE 10 (同时自动安装下载 Win 8,如果已经有IE9,则会自动重用 Win 7)

 

IE 9 (同时自动安装下载 Win 7)

 

IE 8 (同时自动安装下载 Win XP)

 

IE 7 (同时自动安装下载 Win XP)

 

IE 6 (同时自动安装下载 Win XP)

 

Everything are HTML components – 小谈 HTML 组件化与可视化的编程

从 AngularJS 1.0.7 开始,我们就拿它做项目。刚开始使用了 angular-seed 创建页面,结合 ng-controller 做了好多事。同时我们也用了 directive 做了些公用组件。

我们组在 retrospection 时,慢慢地有了对比。 ng-controller 做出来的东西都是大块大块的,彼此连动,组织很不清晰。而 directive 却是自成体系,透过组件嵌套和通信控制,我们可以做出任意的页面——而且还保证各个组件自己是独立、可测试和不受其他 Scope / EventListener 影响的。甚至,我们还总结出了一个原则:

Everything should be directives.


 

具体呢,举个栗子。

这个简单的 html 结构,是我们吃了很多亏之后总结出来了 (高仿样本)

你能看出什么门道?1. 组件化 2. 可视化 HTML 3. 可测试单元

1. 组件化

无需多言,bw-appnode 是一个组件,bw-table 与 bw-search 也是。这些组件彼此嵌套,也彼此独立,使用协议(Scope或者Service)通信。这样的好处非常明显。

比如我们现在还没有做好 bw-table ,服务器 Restful API 也还没有完成,但我们却可以独立开始开发 bw-search 。bw-search 自带独立的 UI 与复杂逻辑,其将对 bw-appnode 的假数据进行过滤,而 bw-table 则是渲染层而已,任何 bw-appnode 上面的变化,都会自动的 reactive 到 bw-table 里 (就是 Angular Scope 了)。

2. 可视化/具象化

缘由一:我们习惯于把很多的功能使用 JavaScript 事件绑定的方式实现。慢慢地,点击了一个按钮会发生什么,我们只能猜,或者辛辛苦苦的去跟踪源代码。而到底一个 Dom 节点上的  JavaScript 事件监听器有几个,我们也很难察觉——每个工程师都可能在 JS 文件的任何地方给某个节点添加上不可预期、天花乱醉的监听事件。

缘由二:还记得你初学 HTML5 时,相关牛文告诉你它为什么要增加那么多新标签么?比如 section/article/video等。因为这样,HTML 页面与功能就可以更加“可视化”和“组件化”了。

第一,“可视化”。“可视化”就是一看代码就知道这个是干什么的(Chrome Developer Tools Inspect、Google Crawler 精准搜索)。

这里讲的 HTML5 标签“可视化”,严格意义上讲,应该叫“语义化”,不过我觉得“可视化”这个词更 Cool。前端么,几个人会在乎语义不语义,HTML结构读了通顺不通顺,分析起来合理不合理?好看和干脆(Crispy, Handy, Intuitive)很重要——主要*看*气质;两者,语义化就是“看了就明白”的意思,所以干嘛不用“可视化”这词替代呢?;

第二,“组件化”。就是一个标签就渲染出自己的一套独立行为与 view (Web Component / Shadow-Dom的题中之义)。

我们很多人都曾近乎引颈渴望:如果从 HTML 上面就可以看出这一段 HTML 片断/页面块 是干什么的,是何等的奇妙和方便啊—— 不好意思,这忽然想到了另外一个术语,“描述性编程”,在此也可见一斑,门当户对。

在我们的例子中,顶级节点有一个新的 directive,叫

顾名思义,这个就是用来拿服务端数据的。在 Server 还没有做完时,在它里面直接拿的是静态的数据 (使用Promise resolve),拿到数据之后,直接将之存为 bw-appnode 上的 一个 Scope 属性。

而更有意思的是,由于这个节点是独立的另外一个 directive,我们可以在上面考虑更多复杂的逻辑,比如 ajax 数据缓存处理等。我们坦然地对这个组件说,“反正你就干这事,要怎么干,你慢慢想;想做多精,就做多精;要做多细,就做多细;一辈子你一个人只做一件事,就不相信你做不好”。另外,这个节点还可以用在其他地方——想想,要 appnode 数据的,可不止于这个 bw-appnode 页面。不过呢,我这里不是说, Component 的主要目的是为了做重用——这个明显不是本文要谈的。

3. 可测试单元和 jsDoc

这里讲的不是单元测试,而是测试单元。显而易见,上面的任何一个 Component 都可以独立拿出来做测试。我们只需要引入相关的 directive 的 js 文件与 view html 文件,就可以在另外一个独立的页面测试空间,给这个 directive 做全面细化的 UI 测试 (Protractor驱动)。测试用例、数据环境,想加就加,想改就改。完全不用担心耦合问题。

而既然是组件化, jsDoc 也好写多了。一个 directive,一个 module 定义,便于观看,颜值高,清晰度强。


当我们把这个经验(Everything should be directives.)总结出来之后不久几个月,我们就发现 Angular2 / React 的团队其实早已经意识到这个原则的重要性,他们默默地调整了一切。

在 React / Angular2 看来,一切都是组件。在写一个新的 SPA 时,你首先要做的,就是把你要做的页面划分成不同的嵌套的组件。

借用别人的图举个栗子。

component_example

一目了然,不言而喻。不过多说一句,划出组件之后,你还要决定是使用 Scope 通信,还是使用 Publish/Subscribe 通信;另外是串页面(容器组件)的 Router 抽象层,是这种组件化编程不得不提到的——一句话:用现成的 Router 都太弱,你应该用自己发明的 Router。这里不再多谈,喜欢了解,就找小方。

下面有几个好资源与童鞋们共享。

Facebook React: Step 1: break the UI into a component hierarchy

AngularJS: Component Based Thinking in AngularJS

AngularJS: Refactoring Angular Apps to Component Style

 

最后再来一个给力的,别人做的东西。

component_refac

让 Component 革命中关村和硅谷的前端吧。

后记:

我当前使用的是 Microsoft KnockoutJS,然而,从 Angular/React 得来的经验,已经彻底的革命了我们的 KnockoutJS 云应用。

Component,成功人士的不二之选。

小方,中关村软件园,Mar. 18, 2016。转载请标明出处。

IMG_1336

A plnkr for you to get started with RequireJS + KnockoutJS + BootstrapCSS + jQuery, with KnockoutJS nested Component and CSS animation support

It’s pretty hard to work on KnockoutJS on a real world project with better folder organisation on Plunker.

Here it is:

With RequireJS / Bootstrap / jQuery / CSS3 Animation involved.
Also, it brings data diff/sync/throttle util for you to communicate with server in a faster way — think about Git.