日志

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

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

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

    (更多…)
  • Chrome 扩展在页面执行 JS

    Chrome 扩展在页面执行 JS

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

    (更多…)
  • Welcome to Navlang

    Welcome to Navlang

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

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

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

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

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

  • 双11促销

    双11促销

    今年 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 碎碎念

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

    BaaS 的核心其实在于 ACL。

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

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

  • 哈哈哈,Strikingly 开始接入外包了

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

    上线了/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% 的工作无法开展,而必须放弃这个产品。

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

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


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

  • 回家换驾照

    回家换驾照

    驾照即将到期,回老家换。

    第一天。

    上午11点到,问,曰没号,下午来。遂去找咖啡馆办公。

    下午4点半到,说可以等,但是电脑坏了,不一定等得到。4:45 开始叫号,基本上没人。问之,答里面排着队,白天电脑坏了没办完。过了会儿,开始驱散门口排队人群。问,曰明日8点来取号。

    第二天。

    7点起床,吃饭打车,门口排队者约10人。8点,协警开门发号,幸得03一枚。

    8:30 开始办理。旁边违章处理一直在叫,我方换照没有动静。问之,曰电脑又坏了,赶紧去其它大队,也能办;别在这儿等,没点。

    如此动作一直持续了半个小时。我觉得其中有诈,犹豫再三,没走。半小时后,02,又10分钟,03。进去2分钟,搞定。

    结语:在老家办事儿需要各种社会经验。希望我的孩子们不需要这些社会经验。

  • WebSocket.onerror 没有错误描述

    WebSocket.onerror 没有错误描述

    用 WebSocket 时遇到一个问题:有时候连接出错,我希望把错误描述报告给用户,方便他们排除。但是尝试了好几种方法,都无法获得错误描述。

    于是只有 Google 之,发现了这个答案:https://stackoverflow.com/questions/18803971/websocket-onerror-how-to-read-error-description。原来是为了防止开发者利用 WebSocket 搞破坏,扫描特定条件下的网络,WebSocket 的 ErrorEvent 只包含一个 error,没有更进一步的描述。oncloseCloseEvent.code也只有 1006——非正常退出,这样毫无价值的信息。 

    所以我的处理方式是:建议用户按 F12 打开开发者工具看错误信息。

  • 在 Pug 模板中使用变量

    在 Pug 模板中使用变量

    我厂使用 Pug 作为 HTML 的预编译工具,写久了发现回不去了……Pug 写起来很高效,看久了习惯了阅读效率也很高,读了读文档,发现还有很丰富的可编程特性。于是我决定抛弃 Handlebars,以后都用 Pug 写模板了。

    这次我厂官网改版,我就用 Pug 替换了 Handlebars,于是 build 脚本一下少了几十行,非常爽。其实我早就想这样做,不过卡在一个点:使用变量。

    在 Pug 里可以这样使用变量:

    - var name = 'meathill'
    
    h1 hello #{ name }

    以上代码将输出 <h1>hello meathill</h1>。这种用法比较简单,不过在 extends模板的时候,把变量放到哪里就不知道了,官方文档也语焉不详,我反复试了很多次无果,最终还是靠搜索找到了答案,原来要这样:

    // Layout.pug
    html
      block vars
        p 注意,这个 block 是重点,它出现在前面,用来注入变量
      head
        title #{ title } | My site
      body
        block content
    
    // page.pug
    extends Layout
    
    block vars
      - var title = 'A blog'
      
    block content
      h1 Blog title
      p blog content
  • 理想的远程办公咖啡厅

    理想的远程办公咖啡厅

    昨天 @Easy 老师发了一条微博

    之前问过一个问题:「在共克时艰和消费降级的大背景下,有哪些行业和生意会逆流而上呢?


    昨天和墨多扯淡,他说搞一个「面向美元市场」但是「研发在国内」、「销售完全依靠网络」而且可以「远程办公」的「商业SaaS/APP」是最符合「时代的进程」的。

    因为:

    ① 收入直接是美金,扛贬值,无管制。

    ② 经济如果下行,国内成本会进一步降低。

    ③ 一线城市房租房价高涨,远程办公可以吸收足够优秀的同学去二三线城市。

    ④ SaaS/APP 不好搞的话,其实外包也行,但要做好外语沟通和客服。还可能需要一个外语好的产品经理


    我问他为啥不搞一个,他说懒

    我不太看好这个想法。原因如下:

    1. 想要做的正规,必须给国内的工作人员发工资,上社保。当然可以大家协商发多少人民币,多少美元,不过维持家庭开支钱不会少,多半整个工资都发掉了。
    2. 发币的话,我是信不过……
    3. 远程工作并不适合所有人,有些人(比如前文中的小弟)可能在办公室里能发挥100%的战斗力,回到家连一半都做不到
    4. 说了半天都跟项目无关,其实项目本身也有很大风险

    如果让我说,最合适的项目是做远程办公咖啡厅,类似 3W 咖啡或者车库咖啡之类。遗憾的是,这两家我都没去过,不知道里面办公是什么体验。不过我去过贝塔咖啡,咖啡部跟一般咖啡厅一样,并不舒服。结合我两年的远程经验,说一说理想的远程办公咖啡厅吧:

    1. 桌椅高度要合适。
    2. 可以租用显示器,借用笔记本支架。
    3. 可以租小柜子存放私人物品,不用太大,游泳池那种小的就行,放个充电宝、随手带的小物件之类。
    4. 咖啡符合一般品质,电信能达到星巴克品质。
    5. 交通方便,不需要营业太久。

    我觉得价格可以在星巴克基础上上浮二三成(咖啡30+,饮品40+),这样我也愿意接受。其实大部分需求共享工位都能满足,但是利用率太低,而且咖啡厅嘛,听起来 B 格高一些。