Ray Han


  • 首页

  • 分类

  • 归档

  • 标签

  • 公益404

第三方可参考框架

发表于 2017-02-24

[未]1.Stormpath 简化移动和前端身份验证的客户端API
https://docs.stormpath.com/client-api/product-guide/latest/index.html

Sublime-Text插件

发表于 2017-01-28

EditorConfig(代码格式管家)

用于对各个不同项目间代码的格式进行统一管理

JDBC・ODBC経由のDB2アプリケーションで全角ダッシュ―などが文字化けする件の解決方法

发表于 2017-01-11

在项目中遇到DB2的日文字符集与微软的日文字符集不一致,导致读取的字符出现乱码的情况。

JDBC・ODBC経由のDB2アプリケーションで全角ダッシュ’―’などが文字化けする件の解決方法(DM-03-037)
MS変換対応_2011.11更新版.pdf
「全角ダッシュ’―’などが文字化けする問題」のDB2 jccドライバー使用時の対応方法のご紹介
alternate_conv_jcc.pdf

如何在MacOS上打开没有Certification的App

发表于 2017-01-11

因为开发的原因,经常会使用一些开源的App软件,这些软件本身并没有经过Apple的认证,直接通过某种在代码外部加一个壳的形式在各个系统中使用。

加上MacOS本身对于软件的安全检测比较严格,所以此类软件打开时需要稍微费一些功夫。

现象:
打开软件,显示此软件已损坏,无法打开,请把软件移至垃圾桶。

解决办法:
1.在Console输入

1
sudo spctl --master-disable

2.打开系统偏好设置->安全性与隐私,确认允许从以下位置下载应用中已经选中Anywhere.

3.右键点击软件,选择打开,此时软件可正常打开

4.因为此步骤仅需第一次打开软件时需要,并且为了系统的安全,最好输入下面的命令行关闭此策略

1
sudo spctl --master-enable

Flex的Grow,Shrink,basis

发表于 2016-12-22

Flex作为CSS布局的萌新,提供了很多以前大佬已经实现和无法实现的功能。

Grow:

占据主轴的剩余空间
如果一行中有A B C三个容器,A的flex-grow=1, B的flex-grow=2场合,剩余空间会被分成3份填充到A和B中

Basis

为Width的替代品并且有限度比Width高

Shrink

当子容器的总宽度超过父容器时,设定Shrink来对各个子容器的压缩比例进行设置
tips:flex环境默认是不换行的,即使父容器宽度不够也不会,除非设置flex-wrap来换行

ECMAScript 6学习笔记

发表于 2016-12-01

let和const

变量的解构赋值

解构赋值好难,暂时还没转过来弯

字符串的扩展

###

AngularJs学习

发表于 2016-11-15

AngularJS基础

Angular的表达式

  • 作用域:
    属性表达式是对应于当前的作用域的,不像Javascript对应的是全局window对象。
  • 允许未定义值:
    执行表达式时,AngularJS能够允许undefined或者null,不像Javascript会抛出一个异常。
  • 没有控制结构:
    你不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
  • 过滤器(类似unix中的管道操作符): 你可以通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。
  • 不能定义函数
  • 不能使用正则表达式
  • 不能使用new操作符新建对象
  • 不能使用按位操作符,逗号和void关键字
    如果想使用更复杂的语句,可以在controller的函数中定义后,在view中调用该函数。
    如果想自己指定一个angular表达式,可以使用$eval函数。

作用域

Angular不使用javascript的eval函数,而使用$parse服务执行其表达式。
在Angular代码中无法直接访问window和location等全局对象。目的是为了减少全局命名空间的污染而导致的恶心的BUG。
作为替代的,可以使用$window和$location。
你也可以使用this关键字访问当前的作用域对象。

内置过滤器:

currency, date, filter, orderBy等
如何创建自定义过滤器?
->app.filter

要注意这里不是或操作符!

1
{{ greet | upperCase}}

可以通过冒号来给过滤器传递参数,比如,将123显示成带有两位小数的形式

1
123 | number:2

$event

在ngClick或ngFocus这样的指令(Directive)中可以传递$event对象。
当页面中引入了JQuery时,$event对象是JQuery Event Object。
否则,$event对象是jqLite对象。顾名思义,angularjs自己实现了一套JQuery的精简版。

一次绑定

当表达式是以::开始的场合,此表达式被视为一次绑定。也就是说在此表达式获得值(non-undifined)后,$watch函数不会再更新此表达式的值。

1
{{::name}}

一次绑定的用处

原因主要是为了减少浏览器资源的占用。

Value stabilization algorithm

此处不懂

引导程序

To be continue.

注入器

参考文章

通过injector.annotate来推测参数
使用injector.invoke来进行实例参数注入

  • angular会在定义的函数原型链中添加$inject属性,此属性中放置函数的参数名称

    1
    2
    var aController = function($scope, greet){};
    aController.$inject = ["$scope", "greet"];
  • 另一种注释方式为内联注释,这种方式的优点为在对代码进行压缩时不会收到影响。否则$scope和greet可能会被转义。

    1
    angular.module().controller("MyController", ["$scope", "greet", function($scope, greet){}]);

    注释函数用于提取指定函数的参数
    var injector = angular.injector([‘ng’]);
    injector.annotate(function($q,greeter){})

由此可见,最安全的方式为使用最下面的方式,但是此方式写起来略显繁琐。还好还有各种第三方应用的支持。
譬如可以使用ngMin来对文件进行解析并转换,他会做如下的转换。

1
2
3
4
5
angular.module().controller("MyController", function($scope, greet){});
=>
angular.module().controller("MyController", ["$scope", "greet", function($scope, greet){}]);

作用域

下面的文章写的很好,对于JavaScript的原型继承说明的很到位。
参考文章
AngularJs的四个作用域还不算完全看懂,需要实战演练和再次理解。
AngularJS存在四种作用域:

  • 普通的带原型继承的作用域
    ng-include, ng-switch, ng-controller, directive with scope: true;
  • 普通的带原型继承的,并且有赋值行为的作用域
    ng-repeat,ng-repeat为每一个迭代项创建一个普通的有原型继承的子作用域,但同时在子作用域中创建新属性存储迭代项;
  • “Isolate”作用域
    directive with scope: {…}, 该作用域没有原型继承,但可以通过’=’, ‘@’, 和 ‘&’与父作用域通信。
  • “transcluded”作用域
    directive with transclude:true,它也是普通的带原型继承的作用域,但它与“Isolate”作用域是相邻的好基友。

控制器的单体测试

使用karma进行测试,简单使用了一下,看起来很爽。等待学习。

自定义组件

指令

ngSrc标签阻止了浏览器向非法的目的地发送HTTP请求。
此句话的意思是

Watson学习

发表于 2016-11-15

AlchemyAPI

介绍

支持企业和开发人员构建相关应用程序,用于理解 Web 页面、新闻文章和博客中的内容和文本上下文。例如,开发人员可以使用 AlchemyAPI 执行以下任务:提取任何可公开访问的 Web 页面、发布的 HTML/文本文档或预先定义的新闻文章库中提及的人员、地点、公司和其他实体。

  • AlchemyLanguage
    AlchemyLanguage 是通过自然语言处理提供文本分析的 API 的集合。借助 AlchemyLanguage,您可以使用以下任何功能:Keyword Extraction、Entity Extraction、Sentiment Analysis、Emotion Analysis、Concept Tagging、Relation Extraction、Taxonomy Classification 和 Author Extraction 等。您可以使用 Watson Knowledge Studio 基于特定领域(例如,法律或财务)培训自己的定制模型。

  • AlchemyData
    AlchemyData News 每天对 30 万条英语新闻和博客内容建立索引,并通过自然语言处理和视觉识别进行充实,从而开展极具针对性的搜索和趋势分析。现在,您可以像使用数据库一样查询世界上的新闻来源和博客。有了 AlchemyData News,您就可以:检索匹配特定观点、关键字和分类等的文章;识别关键事件,例如,收购或人员变更;通过单个 API 调用创建全部趋势线。

Conversation

将自然语言界面添加到您的应用程序,以自动与您的最终用户交互。常用的应用程序包括虚拟代理和聊天机器人,可在任意渠道或设备上进行集成和通信。通过简单易用的 Web 应用程序来训练 Watson Conversation 服务,其目的在于使您可以在应用程序和用户间快速构建自然对话流程,部署可扩展且节省成本的解决方案。

Concept Expansion - Beta

介绍

Concept Expansion 对文本进行分析,并基于上下文学习类似术语(字词或短语)。它可帮助用户迅速从文本片段数据集创建词典(一组相关术语)。输出可用于提供对数据的进一步理解,并改进文本。

Document Conversion

介绍

IBM Watson™ Document Conversion 服务将单一的 HTML、PDF 或 Microsoft Word™ 文档转换为标准化的 HTML、纯文本或一组可用于其他 Watson 服务的 JSON 格式的答案单元。

Language Translation/Language Translator

介绍

希望动态翻译新闻、专利或会话式文档?希望立即以多种语言发布内容?或者希望讲法语的员工能立即发送英文邮件?您可以使用 Watson Language Translation!将 Watson 服务连接您的代码,您即可通过以下域/语言对来利用该服务的功能:

  • 新闻域
    英语与巴西葡萄牙语、法语、意大利语或现代标准阿拉伯语互译;西班牙语与英语或法语互译

  • 会话域
    英语与巴西葡萄牙语、法语、现代标准阿拉伯语或西班牙语互译

  • 专利域(高级)
    巴西葡萄牙语、中文、韩语或西班牙语翻译为英语

  • 语言识别
    将纯文本识别为使用以下某种语言进行编写:南非荷兰语、阿尔巴尼亚语、阿拉伯语、阿塞拜疆语、巴什基尔语、白俄罗斯语、保加利亚语、孟加拉语、波斯尼亚语、中文、繁体中文、捷克语、楚瓦什语、丹麦语、荷兰语、德语、希腊语、英语、世界语、西班牙语、爱沙尼亚语、巴斯克语、波斯语、芬兰语、法语、古吉拉特语、希伯来语、印地语、海地语、匈牙利语、亚美尼亚语、印度尼西亚语、冰岛语、意大利语、日语、格鲁吉亚语、哈萨克语、高棉语、韩语、库尔德语、吉尔吉斯语、立陶宛语、拉脱维亚语、马拉雅拉姆语、蒙古语、挪威语(巴克摩)、挪威语(尼诺斯克)、旁遮普语、波兰语、普什图语、葡萄牙语、罗马尼亚语、俄语、斯洛伐克语、索马里语、瑞典语、泰米尔语、泰卢固语、土耳其语、乌克兰语、乌尔都语、越南语

Natural Language Classifier

介绍

Natural Language Classifier 服务应用认知计算方法来返回语句或短语的最佳匹配类。例如,您提交了一个问题,该服务将返回最佳匹配答案的键,或者返回应用程序的后续操作。通过在训练时提供一组代表性字符串以及一组正确的类(每个字符串有一个或多个正确的类),可创建分类器实例。训练后,新的分类器可以接受新问题或短语,并返回排名靠前的匹配项,每个匹配项都具有可能性值。

Personality Insights

介绍

Watson Personality Insights:Personality Insights 从交易和社交媒体数据中获取深入洞察,发现能够最终影响购买决定、购买意向和购买行为的心理特质;可用于提高客户转化率。

Retrieve and Rank

介绍

IBM Watson Retrieve and Rank 服务通过结合使用搜索与机器学习算法来检测数据中的“信号”,帮助用户找到与查询最为相关的信息。此服务基于 Apache Solr 而构建,开发人员可将其数据装入该服务,根据已知相关结果对机器学习模型进行培训,然后利用此模型,基于最终用户的问题或查询向这些用户提供经过改进的结果。

Speech To Text

介绍

Speech to Text 服务可将人类的声音转化为书写的文字。凡需要在语音文字与其书写文字之间建立起桥梁的地方,包括通过语音控制嵌入式系统,生成会议和电话会议的抄本,以及听写电子邮件和注释时,都可以使用语音转文字服务。此服务简单易用,它使用机器智能将有关语法和语言结构的信息与音频信号合成知识相结合,从而生成更准确的抄本。目前提供以下语言和功能:

  • 可用语言
    英语(美国)、英语(英国)、日语、现代标准阿拉伯语(仅限宽带模型)、中文普通话、葡萄牙语(巴西)、西班牙语、法语(仅限宽带模型)

  • 元数据
    接收 JSON 响应中的元数据对象,包括置信度分数(按字)、开始/结束时间(按字)和替代假设/最好的 N 个(按短语)。现在提供了一个新选项,可按连续时间间隔返回一些备选词语。

  • 移动 SDK(测试版)
    移动 SDK 现在可支持在 iOS 和 Android 设备上进行本机交互。

  • 关键字识别(测试版)
    用于在音频流中搜索一个或多个关键字的可选功能。返回的元数据包括所找到的每个关键字实例的开始时间、结束时间和置信度分数。关键字识别功能目前是免费提供。

Text to Speech

介绍

Text to Speech 服务可通过处理文本和自然语言来生成合成音频输出,并配以适当的节奏和语调。它提供多种语音:

  • 英语(美国)
    2 种女声;1 种男声(Watson 的语音来自 Jeopardy)

  • 日语
    1 种男声

  • 移动 SDK(测试版)
    移动 SDK 现在可支持在 iOS 和 Android 设备上进行本机交互。

  • TTS 定制 API(测试版)
    允许客户创建最多可包含 2 万个单词发音的定制字典。定制字典目前是免费提供。

Tone Analyzer

介绍

人们在日常沟通中会表现出各种语气,例如,愉悦、悲伤、愤怒以及随和。此类语气可影响不同上下文中沟通的效果。Tone Analyzer 使用认知语言分析,识别语句级别和文档级别的各种语气。随后,可以使用获得的洞察结果来优化和改进沟通。它可从文本中检测出三种类型的语气,包括情绪(愤怒、厌恶、恐惧、愉悦和悲伤)、社交倾向性(开放性、尽责性、外倾性、随和性和情绪程度)以及语言风格(分析型、自信型和不确定型)。

Tradeoff Analytics

介绍

用户在考虑影响决策的多个存在冲突的目标时,可通过 Tradeoff Analytics 作出更好的决策。可以使用此服务,帮助作出更为复杂的决策(例如,使用什么对象作为抵押),还帮助作出更常见的决策(例如,采购什么笔记本电脑)。Tradeoff Analytics 使用 Pareto 过滤技术,在多个标准中识别最佳替代方法。然后,使用多种直观的分析方法,帮助决策制定者研究一组最佳替代方法之间的权衡。这可确保所选选项遵循影响决策制定者的目标和标准。

Visual Recognition

介绍

发现视觉内容中的含义!分析图像以获取场景、对象、人脸及其他内容。选择现成的缺省模型,或创建您自己的定制分类器。找出集合中的相似图像。开发用于分析图像或视频帧的视觉内容的智能应用程序,了解某个场景下发生的情况。

  • 常规分类
    生成可描述此图像的类关键字。使用自己的图像,或从公众可访问的网页中抽取相关图像 URL 进行图像分析。

  • 人脸检测
    检测图像中是否有人脸。该服务还提供有关这些人脸的年龄段和性别的一般性指示。

  • 视觉训练
    创建独有的定制视觉分类器。使用该服务来识别常规分类无法使用的定制视觉概念。

  • 相似图像搜索 (BETA)
    上传后搜索整个图像集合,找出看起来相似的图像。

判断请求来源

发表于 2016-09-22

I am late here, but this might help someone looking for the answer. Typically servletRequest.getRemoteAddr() works.

In many cases your application users might be accessing your web server via a proxy server or maybe your application is behind a load balancer.

So you should access the X-Forwarded-For http header in such a case to get the user’s IP address.

e.g. String ipAddress = request.getHeader(“X-FORWARDED-FOR”);

Hope this helps.

前端CodeGuide

发表于 2016-08-31

Code Guide by @AlloyTeam

AlloyTeamalloyteam.github.io/CodeGuide

命名规则

项目命名

全部采用小写方式,以下划线分隔。
例:my_project_name

目录命名

参照项目命名规则。
例:image, js, css

HTML文件命名

参照项目命名规则。
例:error_report.html

JS文件命名

参照项目命名规则。
例:account_model.js

CSS文件命名

参照项目命名规则。
例:retina_sprites.scss

HTML

语法

缩进使用soft tab(4个空格);
嵌套的节点应该缩进;
在属性上,使用双引号,不要使用单引号;
属性名全小写,用中划线做分隔符;
例:data-attr
不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);
自动闭合标签:area、base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
不要忽略可选的关闭标签;
例:</li> 和 </body>。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>

HTML5 doctype

在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;
虽然doctype不区分大小写,但是按照惯例,doctype大写 (关于html属性,大写还是小写)。

1
2
3
4
<!DOCTYPE html>
<html>
...
</html>

lang属性

根据HTML5规范:

应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里;

在sitepoint上可以查到语言列表;

但sitepoint只是给出了语言的大类,例如中文只给出了zh,但是没有区分香港,台湾,大陆。而微软给出了一份更加详细的语言列表.aspx),其中细分了zh-cn, zh-hk, zh-tw。

1
2
3
4
<!DOCTYPE html>
<html lang="en-us">
...
</html>

字符编码

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为’UTF-8’。

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
...
</html>

IE兼容模式

注:在移动端不需要考虑此处
用 <meta> 标签可以指定页面应该用什么版本的IE来渲染;

如果你想要了解更多,请点击这里;

不同doctype在不同浏览器下会触发不同的渲染模式(这篇文章总结的很到位)

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>

引入CSS, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。

HTML5 规范链接

  • 使用link
  • 使用style
  • 使用script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="code_guide.js"></script>
<!-- In-document JS -->
<script>
...
</script>

属性顺序

属性应该按照特定的顺序出现以保证易读性;

  • class
  • id
  • name
  • data-*
  • src, for, type, href, value , max-length, max, min, pattern
  • placeholder, title, alt
  • aria-*, role
  • required, readonly, disabled

class是为高可复用组件设计的,所以应处在第一位;
id更加具体且应该尽量少使用,所以将它放在第二位。

1
2
3
4
5
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">

boolean属性

boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;

更多内容可以参考 WhatWG section on boolean attributes:

boolean属性的存在表示取值为true,不存在则表示取值为false。

1
2
3
4
5
6
7
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>

JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时,需要尽量避免多余的父节点;
很多时候,需要通过迭代和重构来使HTML变得更少。

1
2
3
4
5
6
7
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">

实用高于完美

尽量遵循HTML标准和语义,但是不应该以浪费实用性作为代价;
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

12
Ray Han

Ray Han

行成于思,毁于随。

18 日志
18 标签
GitHub
Links
  • Jerry Qu
  • 阮一峰
© 2016 - 2017 Ray Han
由 Hexo 强力驱动
主题 - NexT.Pisces