Nolan's Blog

a PHP JS UI APP developer

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, 'https://api.xxxxx.com:443/');
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);
curl_close($ch);

var_dump($data);

继续阅读》

, , ,

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> 
</div>

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


.box{
	position: relative;
	width: 50%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.content{
	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

Bildschirmfoto-2011-12-05-um-11.29.44

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;
	float:left;
	margin-top:-8px;
	margin-left:5px;
}
.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;
}

QQ截图20140520104830

3.bulid a arrow with :before


.back: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;
}

QQ截图20140520105620

4. adjustment


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

20140520110345

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

Tag

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 : http://bower.io/
GitHub : https://github.com/bower/bower

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.

bower

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 : https://wordpress.org/plugins/wp-upload-rename/
Github : https://github.com/page7/wp_upload_rename

wp_upload_rename

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设置/插件

插件

ctags:
先生成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+左键单击

NERD_tree:一个文件管理工具

project:一个项目管理工具

winmanager:界面管理

Emmet.vim:zenCoding工具,前段必备

git-vim:git工具

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

下载:vim_2014_1.zip

继续阅读》

,

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

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

design

name_html

继续阅读》

, ,

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端, 既要作为一个 服务管理者 又要做一个 数据提供者. 以上.

继续阅读》

, , ,

Github 简单的安装与使用教程

一直以来都是做公司项目,根本没机会做几个开源项目.导致我的github账号下都没有几个项目.
(国内二线城市相对于一线, 整个互联网的认知都略显落后…
近来发动小伙伴都上github去做做汉化, 开发插件啥的, 结果小伙伴都不会用这厮…所以写出来传授一下吧…

一.Github介绍

Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中。(就像我们的SVN一样

GitHub可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性。为一个项目贡献代码非常简单:首先点击项目站点的“fork”的按钮,然后将代码检出并将修改加入到刚才分出的代码库中,最后通过内建的“pull request”机制向项目负责人申请代码合并。已经有人将GitHub称为代码玩家的MySpace。

原文: http://www.eoeandroid.com/thread-274556-1-1.html

快去注册账号!!

继续阅读》

, , , ,

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

Powered by WordPress.org.