使用CSS mask 实现图片的斜线拼接

每次必说题外话

话说貌似好久没有写技术文章了,自从娃娃出来后,很少能有时间做技术研究,思考的时间也不足。不过有得必有失,世上事也就酱紫了。但是作为一个前端攻城师,不写代码,不研究技术,是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个CSS问题,一直很喜欢CSS的,能CSS解决的问题绝对不用JS,于是就抽时间整整看。

什么是斜线拼接

回到本文主题上,”斜线拼接“是我自创的词语,因为我也不知道怎么描述这个需求,o(╯□╰)o,实际的效果是下面所示:

眼力好的筒子应该就能发现,上面这张图是两个帅锅拼接在一起的,看中间的斜线。

但是呢,刚接到这个需求的时候......

肿么安装Effect Game

Effect Game的安装还是很麻烦的, 原作者用的时代比较久远, 有很多软件包在新的linux系统上都可能有兼容问题, 这里做个安装记录方便后人查阅.

环境准备

fedora 21

能翻墙的比较快的网络

Effect Game的需要运行在linux系统里, 理论上任何linux发行版都可以, 但是我在ubuntu上折腾了好久, 总归还是放弃了.

各个发行版虽然内核一样, 但是各种软件包可能不一样, 名字也可能不一样, 包管理工具也不一样, 所以环境这里, 还是建议用 fedora 21, 而且不能用最新版, 最新版的fedora把 yum 给替换成了 dnf,......

谈前端工程师的职业规划

在敲下这个标题的时候,心里好虚。话说我一直不太喜欢发表这些看上去很假大空的文字,每个人的职业规划都是独有的,不具有太大的可复制性,把自己的经历放出去,容易误人子弟。只是最近很多师弟们(别问我为什么都是师弟,我想静静……也不要问我静静是谁!)问起这个,也就根据自己的经历发表一下对前端工程师的看法吧,“我说的都是错的”,仅供参考。另:本篇是纯文字,密集恐惧症换成勿入!

从我接收第一份前端需求开始,到现在也有五个年头了。自己也从一个愣头青变成一个快到而立之年的大叔,时间真的是哗啦哗啦的快。这五年里,其实可以分成三部分:1~2, 3~4, 5。more

1~2 吸吸吸,疯狂的吸取知识

......

在浏览器端用JS创建和下载文件

前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等)。

但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:

<a href="file.js">file.js</a>

用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。more

HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只......

千方百计加速Web之加速DNS解析

通常情况下,做移动开发时,如果要向后台请求数据,都会直接使用TCP通信。但实际上一来HTTP比TCP简单易用多了,二来有很多现有CGI如果要进行改造得花很大功夫。还是会有使用HTTP请求来拉取数据。

在做Android QQ二维码时,扫描到二维码字符串,就是把该字符串用HTTP传给后台,后台解析后返回给客户端,客户端再进行下一步处理。在提交测试后,测试同事发现,在移动网络上,DNS解析会经常失败,导致二维码扫描功能不可用。功能测试不通过,导致无法发布。同时测试喜欢在清空DNS缓存和屏蔽了DNS解析的情况下,二维码解析功能仍然可用。因此这里增加了如下处理:

进入“扫一扫”的界面时......

【代码分享】根据类型智能提取参数

如果你是个Javascript程序员,那一定经常写下面的代码:

function funcA(url, params, callback, option){

if(arguments.length == 2){

//funcA(url, callback);

if(typeof params == 'function'){

callback = params;

params = {};

}else{

//funcA(url, params);

//......

}

}else {

//......

}

}

当参数变化形式比较少的时候还没问题,当你的方法想对多种传参形......

Compiler@NodeJS(三)- 自定义命令

_接上篇:Compiler@NodeJS(二)- 强大的管道_

本来早就应该写这篇文章的,只是忙的时候忙,闲的时候懒,导致拖了这么久。

不管内置多少命令,需求总是千变万化的,这时候内置命令就不够用了,需要使用者自己编写一些命令。现在来看看怎么做。more

一、内置命令

先来看看内置命令的文件结构是怎样的:

+--- compiler

+--- cmds

+--- copy

+--- concat

--- index.js

--- README.md

每个命令都是cmds下面的一个单独目录,如copy、concat等等。每个命令下面都必须有一个index.j......

让Java跟Javascript更加亲密

在移动App开发中,为了快速迭代,通常都会使用Native+Web的模式开发。具体来说就是使用Java提供接口,使用WebView控件嵌套Web页面来实现UI和交互。

在Android中,Java可以很方便的提供接口给WebView中的Js进行调用,只要以下一行代码就能搞定:

mWebView.addJavascriptInterface(new JavascriptInterface(), "custom_name");

这样,JavascriptInterface的所有声明为public的方法,都能被mWebView中的Js通过以下方式调用:

w......

从网页监听Android设备的返回键

最近搞Android项目的时候,遇到一个比较蛋疼的需求,需要从Client App调用系统浏览器打开一个页面,进行杂七杂八的一些交互之后,返回到App。如何打开浏览器和如何返回App这里就不说了,有兴趣的童鞋可私下交流。

之所以说这个需求蛋疼,是因为Android有个物理返回键啊……返回键啊……键啊……啊……

用户按下返回键后,预期应该跟点击页面上的返回键一样——返回App。然而这个返回键的被按下的时候网页完全不知道啊(onbeforeunload不算),找不到直接的办法去监听,愁死我们这全苦逼程序员鸟~

虽然啊不能直接监听,曲线救国的办法,还是有滴。more

......

Commons-Fileupload组件的一些坑

Java Web中经常需要用到文件上传,比较有名的组件就是Commons-Fileupload、COS、SmartUpload(几年前的记忆了,不知道还是不是……)。

前段时间做个Android需求,需要从客户端POST图片到Server(用了Commons-Fileupload),结果它死活解析不出文件来。

组装成的表单内容如下:

--abcdefghijklmn

Content-Disposition: form-data; filename="name"

Content-Type: content/unknown

abc.jpg

--abcdef......

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟