CSS毛玻璃效果

先放源码:

.content {
    background-color: rgba(0,0,0,0.3);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

另外有两点需要注意:
1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。

CSS毛玻璃效果

来试试wordpress自己的客户端

很偶然的发现wordpress出了这么一个客户端程序,这两天没事时间体验了一下。

首先介绍一下如何安装吧:

第一步:wordpress这个客户端依赖官网的一个管理插件jeypack,安装方法很简单,直接在wordpress插件管理器里搜索安装就好了,然后可以根据自身需要设置一下,具体我就不废话了,傻瓜式的,很简单;

第二步:自己网站装好jeypack之后,打开客户端主程序,用wordpress官网的帐号登录(是你在wordpress官网上注册的帐号哦,不是你自己网站的管理帐号),然后根据提示绑定好自己的网站就ok了。

然后,这个客户端功能还是很全的:标签管理、页面管理、用户管理、分类管理、菜单管理等等,应有尽有,在线上能改的,这里都可以改。速度那还用说,比线上好太多了~

之前用过一段事件的window live writter,那时候感觉用wlw写文章就已经很享受了,虽然wlw已经六年没更新了,但用端写总比用页面写舒服很多。如今wp的官方端忽然出现,真是惊喜啊,而且这么丰富的功能,完全可以不用线上改任何东西了,超赞~!

另外jeypack还支持邮件写文章哦,在jeypack设置里生成一个邮件地址就可以了,然后随时随地,发个邮件,就变成一篇漂亮的文章啦,小伙伴们快来用用吧~~~

来试试wordpress自己的客户端

这是通过邮件发布的文章

哈哈,发现个新功能
可以直接通过邮件来发布文章啦,这里简单测试一下,线下编辑文章是很舒服的,比线上的编辑器好用太多了~
不过直接通过邮件来写的话,就没有办发定义标签、图片信息了,so~通过邮件只适合记录一些小的段子,大篇幅的还是老老实实的用线上的编辑器吧,或者用wordpress官方的客户端,之前还用过window live writter,这个也还好,只是这个软件已经六年不更新了。。。

这是通过邮件发布的文章

IOS下body绑定click事件的bug

今天在做项目的时候,遇到了一个特别莫名奇妙的问题:
我在写动态创建出来的模块点击事件的时候,经常会用到事件代理,把click事件绑定到body上,然后今天忽然发现,这么绑定事件在ios却没有效果,各种浏览器都不行。

为了消除其他代码的影响,我写了一个超级简单的页面,然而结果还是不行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            html,body{height: 100%;width: 100%;position: relative;background-color: green}
        </style>
    </head>
    <body>
        <div style="position:absolute;height:300px;width:300px;background:red;top:100px;left:100px;">

        </div>
        <script type="text/javascript">
            document.body.addEventListener('click',function(e){
                alert(e.target.tagName);
            })
        </script>
    </body>
</html>

经过测试
1.IOS各版本都存在这个bug,包括ihone、ipad、touch
2.IOS下的各种浏览器无一幸免
3.window,document,body 绑定click事件,都不会被触发

这真是莫名其妙的设定。。。

不过还好,屏蔽掉的只是click,touchstart等其他事件还是可以用的
如果需要把事件代理给body处理的话,click是没办法用了,改用touchstart或者模拟的事件tap吧

另外这里介绍一下tap:

click事件在移动端本身是带有300毫秒的延迟的(有的浏览器貌似要有500ms,其实具体多少也不太好测,通常大家都说300,那就300吧),这个问题会导致click事件在移动端相应很慢,如果大量点击交互的话(比如拼图游戏等),用户体验会特别差,为了解决这个问题,于是诞生了这个tap。

tap其实是一个组合事件:一个touchstart+一个touchend事件,tap事件的设定是延迟很小的,完全避免了click在某些场景下存在的延迟问题。

但是,tap的出现,同时又带来了另外一个问题:击穿!就是当一个浮层上有点击关闭这个浮层的效果时,如果我们使用的tap事件,那就会在点下并抬起的瞬间,这个浮层的display直接设置成none,这时候tap事件虽然进行完了,但是300毫秒之后,还有一个click在那等着,这时候浮层关闭了,这个click事件就会被传递给这个复层下面的内容,下面如果是个链接,那页面就会跳转到这个链接所指向的页面~

为了解决tap带来的新bug,我一般会用下面这种办法(tap执行的时候给body设置pointer-events:none,取消掉所有元素的鼠标及触屏行为,500毫秒之后重新设置pointer-events:all):

//阻止击穿
function preThrough(){
	document.body.throughTimer && clearTimeout(document.body.throughTimer);
	document.body.style.pointerEvents = 'none';
	document.body.throughTimer = setTimeout(function(){
		document.body.style.pointerEvents = 'all';
	},500);
}
IOS下body绑定click事件的bug

canvas文字换行–小插件

插件说明:
canvas 描述:canvas对象(目前只支持dom)
message 描述:需要输出得文字
maxWidth 描述:文字最大得宽度(超过此宽度将换行)
top 描述:开始输出文字的纵轴坐标(基于canvas原点)
left 描述:开始输出文字的横轴坐标(基于canvas原点)
lineHeight 描述:文字行高
fontSize 描述:字体大小
maxLine 描述:显示的最大行数(超过则输出’…’)
color 描述:文字颜色
fontFamily 描述:字体

插件太简单了,不写例子了…

下面是源码(或转至https://github.com/mulianju/2016/blob/master/src/Components/DrawText.js):

function DrawText(options) {
    var _this = this;
    _this.opts = {}

    for (var ele in _this.defaults) {
        if (typeof options[ele] !== 'undefined') {
            _this.opts[ele] = options[ele];
        } else {
            _this.opts[ele] = _this.defaults[ele];
        }
    }
    var allWords = _this.opts.message.split('');

    _this.nowLine = 0;

    _this.cutWords(allWords, _this.opts.maxWidth);
}
DrawText.prototype = {
    cutWords: function(allWords, maxWidth) {
        var _this = this,
            tempText = '',
            shiftWord = '',
            ctx = _this.opts.canvas.getContext('2d');
        ctx.font = _this.opts.fontSize + 'px ' + _this.opts.fontFamily;
        ctx.fillStyle = _this.opts.color;
        // p = document.getElementById('q'); if (!p) {     p = document.createElement('p');     p.id = 'canvasTextTemp';     p.style.cssText = 'opacity:0;position:absolute;top:0;visibility:hidden;left:0;pointer-event:none;z-index:-1;font-size:' +
        // this.opts.fontSize + 'px;white-space:nowrap'     document.body.appendChild(p); } p.innerText = '';

        for (var i = 0; i < allWords.length; i--) {
            if (!allWords.length)
                return;

            if (ctx.measureText(tempText).width < maxWidth) {
                shiftWord = allWords.shift()
                // p.innerHTML += shiftWord;
                tempText += shiftWord;
                if (!allWords.length) {
                    // tempText = p.innerHTML;
                    _this.drawWords(tempText);
                    // p.remove();
                }
            } else {
                allWords.unshift(shiftWord);
                // p.innerHTML = p.innerHTML.substr(0, p.innerHTML.length - 1); tempText = p.innerHTML;
                if (_this.nowLine + 1 == _this.opts.maxLine && allWords.length) {
                    tempText = tempText.substr(0, tempText.length - 1) + '...';
                }
                _this.drawWords(tempText);
                _this.nowLine += 1;

                if (_this.nowLine < _this.opts.maxLine) {
                    _this.cutWords(allWords, _this.opts.maxWidth)
                }
                // p.remove();
                return;
            }
        }
    },
    drawWords: function(tempText) {
        var _this = this,
            ctx = _this.opts.canvas.getContext('2d');

        ctx.fillText(tempText, _this.opts.left, _this.opts.top + _this.nowLine * _this.opts.lineHeight * _this.opts.fontSize, _this.opts.maxWidth);
        ctx.closePath();
    }
}
Object.defineProperty(DrawText.prototype, 'defaults', {
    value: {
        canvas: document.getElementById('canvas'),
        message: 'Please enter your text~',
        maxWidth: 520,
        top: 0,
        left: 20,
        lineHeight: 1.5,
        fontSize: 32,
        maxLine: 4,
        color: '#000',
        fontFamily: window.getComputedStyle(document.documentElement)['font-family']
    }
})
canvas文字换行–小插件

git常用 命令

查看、添加、提交、删除、找回,重置修改文件

git help <command> # 显示command的help

git show # 显示某次提交的内容 git show $id

git co — <file> # 抛弃工作区修改

git co . # 抛弃工作区修改

git add <file> # 将工作文件修改提交到本地暂存区

git add . # 将所有修改过的工作文件提交暂存区

git rm <file> # 从版本库中删除文件

git rm <file> –cached # 从版本库中删除文件,但不删除文件

git reset <file> # 从暂存区恢复到工作文件

git reset — . # 从暂存区恢复到工作文件

git reset –hard # 恢复最近一次提交过的状态,即放弃上次提交后的所有本次修改

git ci <file> git ci . git ci -a # 将git add, git rm和git ci等操作都合并在一起做

git ci -am “some comments”

git ci –amend # 修改最后一次提交记录

git revert <$id> # 恢复某次提交的状态,恢复动作本身也创建次提交对象

git revert HEAD # 恢复最后一次提交的状态

查看文件diff

git diff <file> # 比较当前文件和暂存区文件差异 git diff

git diff <id1><id1><id2> # 比较两次提交之间的差异

git diff <branch1>..<branch2> # 在两个分支之间比较

git diff –staged # 比较暂存区和版本库差异

git diff –cached # 比较暂存区和版本库差异

git diff –stat # 仅仅比较统计信息

查看提交记录

git log git log <file> # 查看该文件每次提交记录

git log -p <file> # 查看每次详细修改内容的diff

git log -p -2 # 查看最近两次详细修改内容的diff

git log –stat #查看提交统计信息

tig

Mac上可以使用tig代替diff和log,brew install tig

Git 本地分支管理

查看、切换、创建和删除分支

git br -r # 查看远程分支

git br <new_branch> # 创建新的分支

git br -v # 查看各个分支最后提交信息

git br –merged # 查看已经被合并到当前分支的分支

git br –no-merged # 查看尚未被合并到当前分支的分支

git co <branch> # 切换到某个分支

git co -b <new_branch> # 创建新的分支,并且切换过去

git co -b <new_branch> <branch> # 基于branch创建新的new_branch

git co $id # 把某次历史提交记录checkout出来,但无分支信息,切换到其他分支会自动删除

git co $id -b <new_branch> # 把某次历史提交记录checkout出来,创建成一个分支

git br -d <branch> # 删除某个分支

git br -D <branch> # 强制删除某个分支 (未被合并的分支被删除的时候需要强制)

 分支合并和rebase

git merge <branch> # 将branch分支合并到当前分支

git merge origin/master –no-ff # 不要Fast-Foward合并,这样可以生成merge提交

git rebase master <branch> # 将master rebase到branch,相当于: git co <branch> && git rebase master && git co master && git merge <branch>

 Git补丁管理(方便在多台机器上开发同步时用)

git diff > ../sync.patch # 生成补丁

git apply ../sync.patch # 打补丁

git apply –check ../sync.patch #测试补丁能否成功

 Git暂存管理

git stash # 暂存

git stash list # 列所有stash

git stash apply # 恢复暂存的内容

git stash drop # 删除暂存区

Git远程分支管理

git pull # 抓取远程仓库所有分支更新并合并到本地

git pull –no-ff # 抓取远程仓库所有分支更新并合并到本地,不要快进合并

git fetch origin # 抓取远程仓库更新

git merge origin/master # 将远程主分支合并到本地当前分支

git co –track origin/branch # 跟踪某个远程分支创建相应的本地分支

git co -b <local_branch> origin/<remote_branch> # 基于远程分支创建本地分支,功能同上

git push # push所有分支

git push origin master # 将本地主分支推到远程主分支

git push -u origin master # 将本地主分支推到远程(如无远程主分支则创建,用于初始化远程仓库)

git push origin <local_branch> # 创建远程分支, origin是远程仓库名

git push origin <local_branch>:<remote_branch> # 创建远程分支

git push origin :<remote_branch> #先删除本地分支(git br -d <branch>),然后再push删除远程分支

Git远程仓库管理

git remote -v # 查看远程服务器地址和仓库名称

git remote show origin # 查看远程服务器仓库状态

git remote add origin git@ github:robbin/robbin_site.git # 添加远程仓库地址

git remote set-url origin git@ github.com:robbin/robbin_site.git # 设置远程仓库地址(用于修改远程仓库地址) git remote rm <repository> # 删除远程仓库

创建远程仓库

git clone –bare robbin_site robbin_site.git # 用带版本的项目创建纯版本仓库

scp -r my_project.git git@ git.csdn.net:~ # 将纯仓库上传到服务器上

mkdir robbin_site.git && cd robbin_site.git && git –bare init # 在服务器创建纯仓库

git remote add origin git@ github.com:robbin/robbin_site.git # 设置远程仓库地址

git push -u origin master # 客户端首次提交

git push -u origin develop # 首次将本地develop分支提交到远程develop分支,并且track

git remote set-head origin master # 设置远程仓库的HEAD指向master分支

也可以命令设置跟踪远程库和本地库

git branch –set-upstream master origin/master

git branch –set-upstream develop origin/develop

 

文章转载自:http://www.cnblogs.com/cspku/articles/Git_cmds.html

git常用 命令

ubuntu 常用软件收集

编程工具:

vs code //大微软开发的,很神奇的支持linux和mac,非常好用

sublime text3  //默认安装不支持中文输入,设置很麻烦,自行百度吧

atom //相对vs code来说个人感觉更成熟一点

图片编辑

gimp //photoshop 的linux代替品,功能很强大

即时通讯

qq //大腾讯一直拒绝开发linux版的qq,所以linux只能用wine来模拟安装

安司密信 //逼格还不错,用户很少(没朋友用,你能跟谁聊天呢)

技术论坛

http://forum.ubuntu.org.cn/

ftp

filezilla //认识这个软件是从windows开始的,linux版同样好用

管理工具/系统相关

app grid //相当于软件管家的角色,比ubuntu自带的软件中心东西多太多了,管理软件很好用

 

办公

wps//良心软件,很意外会开发linux版,很稳定,很好用,比自带得libra好用得多

其他

wine + playonlinux //模拟环境,理论上可以执行windows的所有应用(依赖的安装比较麻烦)

 

先记录这么多,随时更新

ubuntu 常用软件收集

禁用chrome自动填充用户名密码

为了方便用户,各种浏览器会对网页做一些自认为“smart”的优化,谷歌也不例外

但是,这种优化,再某些时候会给前端带来一堆的问题,就比如说这个自动填充用户名密码

禁用自动填充:

标准写法:

input添加autocomplete=”off”属性//chrome不支持

chrome兼容:

在表单顶部写一个隐藏的容器(form标签内部)


<div style="display:none">
    <input type="text" value="" />
    <input type="password" value="" />
</div>

另外,自动填充还会带来一个样式的问题:chrome会把自认为是用户名密码的表单,设置成黄色背景

form

通过chrome自带开发者工具,我们可以看到这个input的样式表里多了一个伪类的样式

user agent

看到这个,我们就放心了,原来只不过是一条css样式,so,我们只要自己写一行样式规则,来覆盖掉user agent里的样式规则,那就可以了呗~

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: transparent!important;background-image: none;color: rgb(0, 0, 0);}

然而,我们想的太简单了,我们甚至给这个样式加了一个important,chrome也承认了我们设置的样式优先级要更高,但最后chrome还是忽略了我们写的样式,固执的坚持自己的背景色

computed

这简直是 无耻!

对于这样的事,前端的小伙伴还是没有放弃斗争,于是,各路大神总结出了下面的写法

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

参考:https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

禁用chrome自动填充用户名密码