OpenResty Inc 招聘前端工程师

我们 OpenResty Inc 的中国大陆子公司诚邀前端工程师加入。希望能和对前端技术有激情,有想法,有追求的年轻人一起构建优美而强大的各种 Web 应用。不要求非得是大牛,但需要有强烈的求知欲和强大的学习能力。可以致力于 Vue、d3.js/SVG、three.js/WebGL、WebExtensions、CodeMirror 等各种技术栈的创造性的前端工作。拥有一定的美感和品味。不拘一格,喜欢挑战。曾做过酷炫的前端应用可以展示给我们。我们不纠结学历、学校和公司工作经历。远程工作模式,工作地点随意。我们会签订正式的劳动合同,会提供五险一金。会提供丰厚的美国公司的期权。对于还在学校的同学,也提供兼职职位和毕业后的转正途径(如果能胜任工作的话)。欢迎有兴趣的朋友投简历到 talents@openresty.com 邮箱,记得附上自己最酷的作品哦。

发给我也可以 meathill@openresty.com。

使用 Proxy 添加魔术属性/方法

使用 Proxy 实现魔术属性/方法。

最近在开发我厂的 QA 工具时,遇到一个问题。我需要模拟 Puppeteer 的所有方法,以便兼容原先的 JS 文件。Puppeteer 提供一个 .asElement() 方法,可以把函数执行结果转换成一个伪 DOM Element(如果函数返回的就是 DOM Element 的话),然后我们就可以在 Node.js 里调用原本属于 DOM 的方法,比如 .focus()。Pupputeer 会替我们完成映射和函数调用,并且返回结果。

对于大部分对象来说,我只要模拟对应的属性、方法,然后用自己的函数实现功能即可。但是 DOM Element 有上百个属性和方法,手工实现一遍实在太低效了。必须寻找其它途径。

好在我之前看过 Proxy 的介绍,赶紧翻出文档和书又复习两遍,就大概知道怎么做了。

Proxy 类如其名,可以“代理”对某个对象的访问。你可以把他理解成明星的经纪人。明星成名之前都是自己处理一切事务,有了经纪人之后,大部分事务就由经纪人负责,但仍然有一些事情需要明星自己处理。

Proxy 的用法很简单,实例化时,把要代理的对象传进去,定义一下代理方法就好。

const obj = { name: 'meathill' };
new Proxy(obj, {
  get(target, property) {
    // 如果对象中有要求的属性或方法,则返回
    if (property in target) {
      return target[property];
    }
    // 没有的话,进行其它处理
    return 'hello';
  }
});

obj.name // 'meathill'
obj.age // 'hello'
obj.sex // 'hello'

接下来,比如我们访问 obj.foo,那么代理就会生效,它会先检查 obj,如果这个对象上本来就有 foo 属性,就会返回;如果没有,则会调用我们定义的方法来处理。

如此一来,我们可以定义一个 VElement 类,这个类可以实现一些特殊方法,比如 .type(str) 输入,.click() 点击等;然后用 Proxy 代理其它方法和属性,让对象进入插件 Context 执行。


Proxy 还有其它方法也很有用,尤其是 get 对应的 set ,以后再介绍。大家可以自己抽空研究下。

参考

  • 阮一峰的 ES6
  • 《深入理解 ES6》

远程工作一年半,聊聊远程的问题

远程工作中,地域和时间的距离,使得大家更注意沟通的效率。但实际上,冗余沟通在人际交往中占有非常高的地位,缺少冗余沟通会大大损害团队协作的效率。所以,远程团队必须重视补足冗余沟通。

2017年8月,我加入现在 OpenResty Inc.,开始我职场生涯第一次全职远程的工作。如今,一年半时间过去,我发现远程工作并不如我之前想象的那样美好,还有很多问题是我一开始没想到的,这里记录一下。

继续阅读“远程工作一年半,聊聊远程的问题”

近期用 webpack-dev-server 作代理的一些经验

使用 webpack-dev-server 代理远程服务器;修改 http header 以便本地登录;代理 WebSocket。

如今前端开发使用 webpack-dev-server 作为本地服务器已经是基本配置,加上 proxy 功能可以很好的应对 SSL、跨域、线上环境切换等需求。Vue CLI 3 里也做了相应的集成,用起来很方便。

继续阅读“近期用 webpack-dev-server 作代理的一些经验”

Chrome 扩展在页面执行 JS

记录下浏览器扩展开发时要在页面环境中执行 JS 的解决方案。

基于安全考虑,Chrome 扩展运行在一个独立的沙箱里,不能直接接触页面里的变量和实例。但有些时候我们必须在当前页面的环境里执行 JS,比如近期开发 Navlang 时遇到一个需求:修改浏览器环境里语言信息,实现语言切换。

继续阅读“Chrome 扩展在页面执行 JS”

Welcome to Navlang

过去两天,我厂在杭州召开了 OpenResty Con 2018,很多 OpenResty 的社区的小伙伴分享了很多使用 OpenResty 的心得。春哥也分享了 OpenResty(包括商业公司 OpenResty Inc)接下来的计划和未来的方向。说实话我已经很长时间不参会也不关心会了,因为很多会营养太少,商业太过。不过我不得不说,我厂的会干货真的多。

回到主题,我也趁机搞了一个闪电演讲,介绍我厂的小语言之一——Navlang。遗憾的是,准备的不算充分,时间也比较短,所以介绍的不够清楚,导致好几个同学来问细节。

既然已经公开我以后也会分享一些实现细节和心得。感兴趣的同学可以先看 Slide:

开发这个语言的时候,我不太适应 Perl,也不太适应在春哥的要求下写代码,所以表现并不理想。如果有机会我还是希望能继续贡献 feature。

另外,受到 Navlang 的启发,我觉得可以搞一个 TechLang,用编程的方式录制视频教程。将来有机会搞一下。 

双11促销

今年 SF 官方没啥动静,我自己来。

今年 SF 官方没啥动静,我自己来。

SF 讲堂五折

讲堂名称链接
jQuery, Backbone, Vuehttps://segmentfault.com/l/1500000008694676
Promise 的 N 种用法https://segmentfault.com/l/1500000008757392
Web 永恒不变的主题:布局——Box,Flex,Gridhttps://segmentfault.com/l/1500000008879826
写 CSS 也要开脑洞:万能的 `:checked + label`https://segmentfault.com/l/1500000008950435
前端面试攻略:JavaScript 排序与搜索https://segmentfault.com/l/1500000009956817
前端必备技能:CSS 预处理工具 Stylus 详解https://segmentfault.com/l/1500000010125848
前端面试攻略:肉老师的面试题详解https://segmentfault.com/l/1500000010971105
前端面试攻略:避免求职中的“非战斗减员”https://segmentfault.com/l/1500000012807670
职场新人必修课(1) —— 实习社保个税等https://segmentfault.com/l/1500000014575853
职场新人必修课(2) —— 创业股票贷款买房晋升考评等https://segmentfault.com/l/1500000015205261
一起挣外快吧——环境搭建+万能的WP+前端如何玩转WPhttps://segmentfault.com/l/1500000015754431
系列讲堂:实战组件开发——手机日历https://segmentfault.com/ls/1650000014717120

B站视频

本来就是免费的……

https://space.bilibili.com/7409098/#/video

BaaS 碎碎念

暂时没时间写完整,零散记一些吧。

BaaS 的核心其实在于 ACL。

因为 BaaS 把获取数据的机制下发到客户端,所以 BaaS 和传统应用最显著的差距就是在哪里处理数据的可视性问题。传统应用里,哪个用户看到哪个数据是后端处理的。而 BaaS 里,则是前端、后端、ACL 一起确定的,而且通常情况下,ACL 设计的好,前端后端的验证步骤都可以省去。

小程序云不支持后台,无法使用。

哈哈哈,Strkingly 开始接入外包了

2B 工具,必须满足客户100%的需求,才有生存空间。所以建站工具在现有技术基础和框架下,没有完全成功的可能。

上线了/Strikingly认证开发者资格申请表


上线了/Strikingly 是一款简单易用的网站和小程序营销类SaaS工具。我们是第一支被硅谷最知名孵化器Y Combinator录取的中国团队,获得了来自顶级投资机构1750万美金投资。目前用户遍布全球200多个国家和地区。我们有百万级用户和各种定制开发的项目。成为我们认证的开发者,你可以接我们开拓出来的项目单子。我们看重的是长远的合作,一起赚钱并累积到各种门户行业的专业知识背景。我们的客户包括:Microsoft、阿里巴巴、Uber、招商银行、渣打银行和众多中小企业等等。

http://apply.sxl.cn/

随着 HTML5 一声炮响,网页进入“更富的体验”阶段,基于 HTML 的建站工具也涌现出来,比较知名的有 Strkingly、WIX 等。——早年更多,不过很长时间这条赛道一直比较冷清,所以慢慢都死了。

我之前做过两个建站工具,这种东西和 2B 产品一样,开始的时候很容易,20% 的时间可以完成 80% 的功能,然后就很开心,觉得胜利在望。然后就找用户来试用,结果用户就会提出一些 20% 的需求,然后你去实现,发现再用一倍的时间也做不出来……

与 2C 的产品不同的是,后者用户会觉得有 80% 的需求被满足,赚了,继续用这个产品(当然也是因为大部分 2C 产品是免费的);而 2B 的用户因为 20% 的工作无法开展,而必须放弃这个产品。

所以解决方案就是雇人。有人在,什么需求都能做。但是结果就是公司一直扩张,原本几个人全远程,结果也不得不租办公室才能管理这么大的开发团队了。

然后需求还是做不完,又不想丢失客户,干脆,接入外包商吧!于是就出现开头一幕。


其实写这篇就是为了说:所有建站工具,在现有的技术基础和框架下,都无法满足普适的需求。当然,我们可以做一些辅助自己的工作,或者满足本厂的需求。