使用SVG Morphing制作自己的加载动画

每一个需要让用户等待的应用都应该有加载界面,可以是简单的文本,比如加载中…,也可以是有趣的动画。当然,一个好玩的加载动画能够大大增加用户等待的耐心,谁喜欢枯燥的文字呢。所以,投入点时间寻找或者制作一个加载动画是很有意义的。感谢SVG和相关的动画技术,现在制作一款复杂的动画已经变得十分容易了。

这里我使用SVG的形变技术(Shape Morphing)来做一个简单的矩形、三角形、圆形变换的动画。

web2.0
2016.11.07
从零开始搭建一个ELKB日志收集系统

当今的软件开发多核以及分布已经成为了常态,基本上稍大型的应用都是多台机器分布式部署。分布式在提高性能的同时也带来了很多问题,今天我们只讨论一点,那就是如何处理多台机器线上系统的日志。

以我司的某个应用T为例,部署在了百度云5台机子上,其中一台拥有公网IP,使用了百度云提供的负载均衡服务。每次想要在日志中检索某个关键字时,基本步骤如下:

  • 打开五个shell,登陆拥有公网IP的那台机器
  • 在另外四个shell中分别登陆其他的内网机器
  • 对日志文件进行检索

misc
2016.10.21
从零开始搭建一个HTTPS网站

我们都知道HTTP是非常不安全的,不安全的根源在于HTTP是明文传输。你在谷歌搜索了一个关键词(假设Google使用HTTP),HTTP数据包从你的计算机传送到服务器的过程中,中间经过的任意一个设备都可以轻松解析你的数据包,获取你的关键词,你的隐私毫无保障。

你的信息被人获取只是明文传输的其中一个问题。总体来说,明文传输有三个问题:

  • 窃听:第三方可以获取你的信息。
  • 篡改:第三方可以修改你的信息。
  • 冒充:第三方可以冒充你的身份。

web2.0
2016.09.05
使用Dnsmasq搭建内网DNS服务器

在日常开发过程中,我们经常要配置各种 host,比如公司内部的各种服务,或者测试项目的时候暂时把生产环境URL配置到本地上等等。一般采取的方法都是每个人手动编辑自己的/etc/hosts文件。这个做法有两个缺点:

  • 手动编辑/etc/hosts文件非常麻烦,需要sudo
  • 工作量重复,团队内每个人都要配置一遍

misc
2016.08.20
Webpack Long Term Caching 101

缓存是Web中无法回避的话题,不仅因为缓存非常重要,能极大地改善用户体验,而且因为缓存很难做好。一旦生产环境出现了缓存失效,那就是一个十分棘手的问题。

在各种缓存的方案中,基于hash的Long Term Caching(永久缓存)在我看来是最简单也是最高效。每一个资源名称上都带有自身内容的hash值,然后全部设置为永久缓存永不过期。所有资源的索引文件全部设置为永不缓存。这样就保证了当资源更新时,资源名称会变化,索引文件会引入新的资源名称,也就保证了缓存永远不会失效。

这个处理方案显然和前端自身的编码没有关系,而是需要打包工具的支持。以下我们就用webapck为例,详细讲述怎样一步步实现Long Term Caching。项目最终的仓库long-term-caching-demo

web2.0
2016.06.25
使用Ngrok实现内网穿透

很多时候,我们都有这样的需求:需要将本地正在开发的服务暴露在公网上,也就是从外网直接访问我们本机上的服务。正常情况下,这是办不到的,因为我们的本机并没有公网IP,我们的本机处在内网当中。

这里需要顺手提及一个知识:NAT穿透。我们的机器一般都在路由器的内网当中,IP地址基本上都是192.168.x.x系列,我们并没有公网IP,那么如何访问外网呢?我们打开浏览器访问Google,Google与我们主机之间如何通信?假设我们主机IP为192.168.0.100,路由器LAN IP为192.168.0.1,WAN IP为211.22.145.234(这是一个公网IP),Google服务器IP为74.125.204.101。详细通信流程如下。

misc
2016.05.21
编写第一个Chrome插件——图床on微博

之前写博客需要的图片全部都是本地存储,非常麻烦。流程如下:先用截图工具截图(QQ截图就很好用),然后移动到目标文件夹,然后在markdown中输入绝对路径(jekyll生成站点以后路径会变化,所以不能使用相对路径)。除了麻烦以外,在markdown中编写时还是看不到图的,因为路径不对。

上次花点时间把所有的图片全部迁移到微博图床了。在chrome web store中搜索了一下,选了新浪微博图床。功能是可以用的,不过有一些问题,最让我无法忍受的就是一点击按钮就会弹出一个chrome的空白窗口,无法关闭,只有重启chrome才行,这个实在是忍无可忍。

闲话不说了,总之我发现这是一次绝佳的自己造轮子的机会。自己造自己用多好玩,所以我准备自己写一个chrome 插件,来实现微博图床的功能。起什么名字好呢,恩,这真是一个世界难题。想了半天,决定叫做“图床on微博”吧,是的,我是RoR粉丝。

web2.0
2016.04.06
Functional Reactive Programming 简介

推荐阅读:

HTML5Rocks有一篇关于Promise的经典文章,通过引入这样一个问题来说明Promise的优越性。问题如下:

我们需要渲染一个故事,首先我们获取故事的json,渲染标题(story.heading),然后再根据其中的charpter url,获取每一章的内容,并显示。中间出了任何问题,显示错误信息。

web2.0
2016.03.20
JavaScript Infinite Currying

很久之前曾看到一个很有意思的JS问题,

// 定义一个函数add,满足如下性质:
add(1) == 1
add(1)(2) == 3
add(1)(2)(3) == 6
...

var g = add(1)(2)
g(100) == 103
g(200) == 203
...

web2.0
2016.01.17
Browserify + SASS + BrowserSync + Gulp高效前端开发环境配置

之前开发的前端应用都是些比较简单的页面,开发的时候一般就是sublime,然后命令行里面启动sass --watch 以及 coffee --watch 就行了,修改代码以后自动编译,但是浏览器需要手动刷新。凑合着也能用,所以也就一直这样没有去理会别的解决方案了。

工作了以后,编写的应用规模变大了很多,而且前端的依赖也变得复杂了。传统的方式显然是解决不了问题的。这段时间,我一直在寻找一套高效的开发环境,要求如下:

  • 使用CommonJS进行依赖引用
  • ES6支持
  • React + JSX支持
  • SASS支持
  • 修改以后自动高速编译,即便是很大的依赖
  • 修改JS、HTML以后浏览器自动刷新
  • 修改CSS浏览器使用Style Injection刷新
  • 生产环境下合并压缩

web2.0
2015.09.24
Prev
2 / 3
Next