Nolan's Blog

a PHP JS UI APP developer

HTML Character Code

Char Code Char Code Char Code Char Code Char Code
´ ´ © © > > µ µ ® ®
\& & amp; ° ° ¡ ¡   » »
¦ ¦ ÷ ÷ ¿ ¿ ¬ ¬ § §
• ½ ½ « « ¶ ¨ ¨
¸ &cedil; ¼ &frac14; < &lt; ± &plusmn; × &times;
¢ &cent; ¾ &frac34; ¯ &macr; &quot; &trade;
&euro; £ &pound; ¥ &yen;
&bdquo; &hellip; · &middot; &rsaquo; ª &ordf;
ˆ &circ; &ldquo; &mdash; &rsquo; º &ordm;
&dagger; &lsaquo; &ndash; &sbquo; &rdquo;
&Dagger; &lsquo; &permil; &shy; ˜ &tilde;
&asymp; &frasl; &larr; &part; &spades;
&cap; &ge; &le; &Prime; &sum;
&clubs; &harr; &loz; &prime; &uarr;
&darr; &hearts; &minus; &prod; &zwj;
&diams; &infin; &ne; &radic; &zwnj;
&equiv; &int; &oline; &rarr;
α &alpha; η &eta; μ &mu; π &pi; θ &theta;
β &beta; γ &gamma; ν &nu; ψ &psi; υ &upsilon;
χ &chi; ι &iota; ω &omega; ρ &rho; ξ &xi;
δ &delta; κ &kappa; ο &omicron; σ &sigma; ζ &zeta;
ε &epsilon; λ &lambda; φ &phi; τ &tau;
Α &Alpha; Η &Eta; Μ &Mu; Π &Pi; Θ &Theta;
Β &Beta; Γ &Gamma; Ν &Nu; Ψ &Psi; Υ &Upsilon;
Χ &Chi; Ι &Iota; Ω &Omega; Ρ &Rho; Ξ &Xi;
Δ &Delta; Κ &Kappa; Ο &Omicron; Σ &Sigma; Ζ &Zeta;
Ε &Epsilon; Λ &Lambda; Φ &Phi; Τ &Tau; ς &sigmaf;


Use php curl to send/get a https request with pem/p12/cert

Sometimes we must use cert file to visit site or api.
If you only have .p12 file, please use openssl to rebuild a pem file.

$ch = curl_init();

curl_setopt($ch,CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch,CURLOPT_URL, '');
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER, true);
curl_setopt($ch,CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch,CURLOPT_SSLCERT, '/common/client.pem');
curl_setopt($ch,CURLOPT_CAINFO, '/common/server.cer');

curl_setopt($ch,CURLOPT_POST, 1);
curl_setopt($ch,CURLOPT_POSTFIELDS, http_build_query($params));
$data = curl_exec($ch);



, , ,

Height equals width with pure css

I was looking for a solution for flexible elements which remain the aspect ratio when resized. Until now I used some Javascript for resizing the elements. But using the resize event and recalculate the height of an element is some kind of nasty and never felt right. Recently I found a solution in an article from A List Apart and a topic on StackOverflow, which works quite well.

<div class='box'> 
	<div class='content'>Aspect ratio of 1:1</div> 

Css Link this:
We use :before to set the height

	position: relative;
	width: 50%;		/* desired width */
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

But IE7 and below not work again..


, ,

Make A Back Button (iphone ios6 style) With CSS3


Always we need to make insert this button in our site. (be less in today)
so how can build it only with css3 ? Come with me

1. build html

<a class="back" href="#"><b>Back</b></a>

2. design a simple button style

.back {
	color: #FFF;
	text-decoration: none;
	position: relative;
	display: block;
.back b{
	display: inline-block;
	font: bold 13px/26px Tahoma;
	height: 27px;
	padding: 0 10px 0 10px;
	background: -webkit-linear-gradient(top, #FFAF44, #F28000);
	background: -moz-linear-gradient(top, #FFAF44, #F28000);
	border: 1px solid #CB741D;
	border-radius: 5px;
	text-shadow: 0 -1px 0px rgba(0, 0, 0, .4);
	box-shadow:inset rgba(255,255,255,.2) -1px 1px 1px;


3.bulid a arrow with :before

	content: '';
	display: inline-block;
	width: 20px; /* 20 * √2 = 28 */
	height: 20px;
	-webkit-transform-origin: 0 0; /* set ratation point */
	-moz-transform-origin: 0 0;
	-webkit-transform: scaleX(0.8) rotate(45deg);  /* rotation 45 deg */
	-moz-transform: scaleX(0.8) rotate(45deg);
	background: -moz-linear-gradient(-45deg, #FFAF44, #F28000);
	background: -webkit-linear-gradient(-45deg, #FFAF44, #F28000);
	border: 1px solid #CB741D;
	border-radius: 3px 5px;
	position: absolute;
	left: 0px;
	top: -1px;


4. adjustment

.back b {
	border-radius: 3px 5px 5px 3px;
	border-left: 0;
	position: relative;
	z-index: 2;
	z-index: 1;
	left: 2px;


da da da ~~~~..



Plupload Event parameter

Init(up) // After plupload initialization

PostInit(up) // After Init

QueueChanged(up) // Before FilesAdd or FilesRemove

BeforeUpload(up, file)

Error(up, err)

FileFiltered(up, file) // Before Fileadded

Fileadded(up, files)

FileRemoved(up, files)

FileUploaded(up, file, res)

UploadComplete(up, files) // After all files uploaded

UploadFile(up, file) // After one file upload start

UploadProgress(up, file)


HTML 5 little cookbook


Voice input :

<input type=”text” x-webkit-speech />

Get picture form Camera :

<input type=”file” accept = “image/*; capture=camera” />
<input type=”file” accept = “video/*; capture=camcorder” />
<input type=”file” accept = “audio/*; capture=microphone” />

Send sms to people :

<a href="sms:18005555555?body=Text%20goes%20here">Send SMS</a> 

Tel somebody :

<a href="tel:18005555555">Call us at 1-800-555-5555</a>


, , ,

CSS3 transition

W3C: CSS Transitions

W3C 中对 Transitions 是这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡. 这种效果可以在鼠标单击/获得焦点/被点击或对元素任何改变中触发, 并圆滑地以动画效果改变CSS的属性值. ”

其实广泛的解释是, 当一个dom的style从A变为B时, 值的变化过程.

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]

transition 是一个复值属性, 可以接受多个属性变化的设定. 以逗号隔开.



Bower: A Javascript package manager

What’s Bower?

HomePage :
GitHub :

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management,while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.


Why to use Bower?

We often need jQuery and some Plugins in our project. Sometime we need a new plugin with a new version jquery, sometime we need update our project something for a new idea like HTML5? Mobile?
So we want to update it! but which packages should be updated and which version should be choose for us.
Bower did it.


, ,

My New WordPress Plugin – wp_upload_rename

My New WordPress Plugin – wp_upload_rename

Plugin :
Github :


Sometimes we forgot change our file to a available name. So the plugin can help you auto change your upload file.
I will add a filetype option of setting in next version.
And a rename popup before the file upload if you change setting in future, default value is post_name.


, , ,

Backup 备份一下自己的Vim设置/插件


先生成tags文件,在命令行下进入到你的项目文件,执行命令:ctags -R,在当前目录下就会生成一个tags文件,生成tags数据库索引,在gvim中执行:

set tags=/home/cry/test/tags

需要进行函数名、变量名、结构名、结构成员补全时输入 Ctrl+X Ctrl+O, (
需要头文件名补全时输入 Ctrl+X Ctrl+I,
需要文件路径补全时输入 Ctrl+X Ctrl+F,
需要跳转到函数的定义处 Ctrl+] 或 Ctrl+左键单击






xptemplate:代码片段补全 使用“Ctrl+l,”代码补全




Design 关于web设计及前端的命名

作为一个高效的开发队伍, 我们应从网页的设计开始就引入标准化的定义名.
利用约定俗成的命名规范, 让设计/前端/开发之间达成共识.
正如我见过无数的前端的Class命名都是这样 body-left-nav-ul-1
(*゜ロ゜)ノ我根本想象不出它可能会在哪里, 所以就要不停的开debug模式, 在浏览器里搜索…




, ,

PHP 与C# Soap通信(Web Services)

一上来掀桌要闹哪样…嘛,其实跟SOAP无关, 而是C#
C# 提供的 Web Services 方案坑死了多少非 C# 的程序员不得而知.. 只是觉得这个好麻烦啊好麻烦…

(还有很多百度的大神们, 注意你们的文章是否是针对Web Services的, 它与SOAP是完全不一样啊!

简单地说, 一个客户端的 Web Client 要请求 Web Service 仅仅是通过 XML+SOAP 去完成通信.
但在开发的时候, 就需要另一个东西对该 Web Service 的功能/参数等等进行约束.
这就是 WSDL. WSDL 通常是由一个 UDDI 发布端进行更新或维护.
(至于WSDL变更后是否会验证, 就请各位自行测试了.
也就是说, 作为PHP端, 既要作为一个 服务管理者 又要做一个 数据提供者. 以上.


, , ,

较新的文章.. 以前的文章..

Powered by