班会第 58 期

[ufologist]

• 技术

  • Tether

    • A positioning engine to make overlays, tooltips and dropdowns better
    • a small, focused JavaScript library for defining and managing the position of user interface (UI) elements in relation to one another on a web page.
    • Some common UI elements that have been built with Tether are tooltips, select menus, dropdown menus, and guided tours

    Popper.js

    • a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element.
    • The engine is completely modular and most of its features are implemented as modifiers (similar to middlewares or plugins).
    • zero dependencies. No jQuery, no LoDash, nothing.

  • 如何优雅安全地在深层数据结构中取值

    在我们的Javascript中，往往用对象（Object）来存储一个数据结构。如果这个结构非常复杂，那么想要安全优雅地取出一个值，也并非简单。

    // props.user &&
    // props.user.comments &&
    // props.user.comments[0] &&
    // props.user.comments[0].blog.title
    var props = {
        user: {
            comments: [{
                blog: {
                    title: 'test'
                }
            }]
        }
    };
    
    function safeGet(obj, nestProperties, defaultValue) {
        return nestProperties.reduce(function(currentObj, property) {
            return (currentObj && currentObj[property]) ? currentObj[property] : defaultValue
        }, obj);
    }
    safeGet(props, ['user', 'comments', 0, 'blog', 'title']);
    
    // 柯里化
    function safeGetCurrying(nestProperties, defaultValue) {
        return function(obj) {
            return nestProperties.reduce(function(currentObj, property) {
                return (currentObj && currentObj[property]) ? currentObj[property] : defaultValue
            }, obj);
        };
    }
    var getUserFirstCommentsBlogTitle = safeGetCurrying(['user', 'comments', 0, 'blog', 'title']);
    getUserFirstCommentsBlogTitle(props);

    最具有函数式代表的JavaScript库－Ramda

    R.path(['user', 'comments', 0, 'blog', 'title'], {});

    其他选择

    • _.get(object, path, [defaultValue])
    • object-path

  • 为什么我们选择了superagent 而不是 request

    request依赖于opts参数来告诉request 如何发起这次请求,但是superagnet 通过对象的方法来描述这个是一个什么样的请求. 虽然两个库都朝着语义化的方向前进,但是明显superagent做的更好一些.

    讨论这个问题的时候更像是之前大家对grunt和gulp的比较.事实证明gulp这种更加语义话的描述任务的方式,更被大家所接受,而grunt这种基于配置的方式逐渐淡出历史舞台.

    // request
    request({
        method: 'POST',
        url: '/api/pet',
        headers: {'X-API-Key': 'foobar'},
        body: {name: 'Manny', species: 'cat'},
        json: true
    }, function(error, response) {});
    
    // superagnet
    request.post('/api/pet')
           .set('Content-Type', 'application/json')
           .set('X-API-Key', 'foobar')
           .send({name: 'Manny', species: 'cat'})
           .end(function(error, response) {});

  • gulp-sass安装失败的解决办法

    我们安装gulp-sass的时候经常会安装失败, 无法下载果然还是网络问题, 使用 cnpm 轻松解决: cnpm install gulp-sass --save-dev

  • puer 监控不到以版本号命名的文件夹下文件的变化

    如果文件夹以版本号来命名, 例如文件夹名字为: 1.0.0, 会造成 puer 不去监听该文件夹下文件发生的变化, 导致不会自动刷新页面.

  • 基于 Vue 全家桶的项目实践 @Monine

    涉及自动生成基于 router 配置的菜单栏和面包屑, 可以参考 element-ui-admin 项目.

    当然了, 其他方面可以参考的也尽管去参考, 在项目实践过程中发现有问题的地方可以及时提出来, 让我去改进

  • Vue.js 全家桶高还原网易云音乐

    2018级的小前端... 看看前端的压力啊 http://oyhfe.com/resume

• 产品

  • 月活8.89亿背后：微信工程师细数兼容测试经验 | WeTest腾讯质量开放平台

    2017年4月，企鹅智酷公布了最新的《2017微信用户&生态研究报告》。报告数据显示，截止到2016年12月微信全球共计8.89亿月活用户，新兴的公众号平台拥有1000万个。微信这一年来直接带动了信息消费1742.5亿元，相当于2016年中国信息消费总规模的4.54%。

    目前国内很多硬件厂商，对于Android版本，深度定制自己的ROM、系统版本，例如小米的MIUI、华为的EMUI、联想的VIBEUI等。这就是N个厂商乘以M个版本，导致的版本数量爆炸，牵引出各种适配问题。

  • UI 设计师未来的全新工作方式？React - SketchApp 新手上路

    React - SketchApp 是一个开源库，为设计系统量身定制。它通过将 React 元素渲染到 Sketch 来连接设计和开发之间的鸿沟。

    做出一个高效组织的设计系统并且进一步弥合开发和设计之间的鸿沟，是很多团队都想做到的事情。有的团队在试图通过 Sketch 自动导出布局，有的团队如蓝湖在优化 Sketch 的项目管理。大多数这些努力都是围绕基于视觉的设计软件 Sketch ，总体思路都是试图让开发的边缘靠近设计，而很多项目都证明了让开发贴近设计有着越来越高的边界成本。

    Airbnb 开创了一种新的可能——让设计面相开发，让设计行为本身就在前端框架中发生，同时还能一并解决经典设计体系所固有的系统管理成本过高的问题。这无疑让我们在这个新生体系中看到了巨大的潜能——面相开发设计是否是未来设计到开发的终极答案？