20181111_ARTS_week20

本周算法题 Letter Combinations of a Phone Number,看了一篇介绍 :empty 和 :blank 为选择器的文章,分享了 vue 工程编译生产版本时添加图片压缩的方法,分享了一点关于买专栏的想法。

Algorithm

/**
 * 
 * Letter Combinations of a Phone Number
 * https://leetcode.com/problems/letter-combinations-of-a-phone-number
 * 
 * @param {string} digits
 * @return {string[]}
 */
var letterCombinations = function (digits) {
    const mappings = {
        '2': ['a', 'b', 'c'],
        '3': ['d', 'e', 'f'],
        '4': ['g', 'h', 'i'],
        '5': ['j', 'k', 'l'],
        '6': ['m', 'n', 'o'],
        '7': ['p', 'q', 'r', 's'],
        '8': ['t', 'u', 'v'],
        '9': ['w', 'x', 'y', 'z']
    };

    if (!digits || digits.length === 0) return [];
    if (digits.length === 1) {
        return mappings[digits];
    }

    let result = [];
    let set1 = letterCombinations(digits.substr(0, 1));
    let set2 = letterCombinations(digits.substr(1));

    for (let i = 0; i < set1.length; i++) {
        for (let j = 0; j < set2.length; j++) {
            result.push(set1[i] + set2[j]);
        }
    }

    return result;
};

console.log(letterCombinations("23"))

还挺有意思的一个题目,因为输入的位数不确定,用递归把每个数拆出来,搞定。

Review

When to use the :empty and :blank CSS pseudo selectors

https://medium.freecodecamp.org/empty-and-blank-53b9e96151cd

作者介绍了 :empty:blank 两种 CSS 伪选择器。 简单来说, :blacnk:empty 好用,因为 :blank 可以忽略元素间的换行或者空格之类的,:empty 就必须要两个元素中没有东西才能匹配上,比如 <ul></ul>,所以 :empty 的适用性没有 :blank 强,但是 :blank 的兼容性没有 :empty 好,基本只有 FireFox 能支持(惨)

Tip

vue-cli 打包编译时 -webkit-box-orient: vertical 消失的解决办法。

这周遇到个很奇怪的问题,vue 项目 dev 的时候没问题,到编译 prod 版本之后 -webkit-box-orient: vertical 属性就被删掉了,造成页面显示混乱。

dev 版本 ok,prod 版本有问题,那问题肯定出在 webpack.prod.conf.js 里,差异点是 prod 版本会对 css 压缩,使用的是 optimize-css-assets-webpack-plugin 这个插件。

既然问题找到了,解决方案自然呼之欲出。

最好的方案是修改 package.json 文件中的 browserlist 字段,这个会涉及 autoprefixer 的行为。

// package.json 源配置
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

  // 修改为
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ios >= 8",
    "Android > 4.1"
  ]

告诉 autoprefixer 我们要兼容 iOS 8 还有 Android 4.x,让它别乱删我们的东西。

然后重新编译,就搞定了。

当然,你把 optimize-css-assets-webpack-plugin 的配置注释调也可以,但是个人不建议这样做,因为各个组建间难免有重复的样式代码,或者共同引用同一段样式的,如果没有 optimize-css-assets-webpack-plugin 会有大量冗余代码。

Share

这周双11,极客时间也做了不少活动,专栏打折力度也挺大的。其实对于学习这件事情还是要有辨别能力,虽然我一般会先看看介绍,试读,然后瞄一下目录看看是否是自己感兴趣的话题,但也买到几个感觉内容比较水的专栏。

慢慢自己也摸索了一个『指导原则』。涉及具体语言基础知识的要好好考虑,比如小程序之类的,自己看文档完全可以搞定的,就不要再去买专栏了。

学习是一件好事情,但不要用战术上的勤奋去掩盖战略上的懒惰,多学通用思想,不要拘泥于一两门语言,或者一两个工具框架。

祝双十一快乐

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(三):iOS 技术 (中) - 腾讯ISUX

1995
来自专栏CSDN技术头条

流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑

我们经常见到这么一些场景: 微博的列表页面; 各类协同工具的任务看板,比如 Teambition。 ? 这类场景的一个共同特点是: 由若干个小方块构成; 每个小...

2506
来自专栏程序员宝库

爬虫抓取的门道——来看这篇

本文首发于我的个人博客,同步发布于SegmentFault专栏,非商业转载请注明出处,商业转载请阅读原文链接里的法律声明。 web是一个开放的平台,这也奠定了w...

4349
来自专栏即时通讯技术

腾讯技术分享:Android版手机QQ的缓存监控与优化实践

对于Android应用来说,内存向来是比较重要的性能指标。内存占用过高,会影响应用的流畅度,甚至引发OOM,非常影响用户体验。因此,内存优化也向来是行业内的重点...

1532
来自专栏编程

小白零基础编程到大佬级别是怎么学习Python的?

程序员在普通人眼里就像魔法师,一个脚本轻松抢几十盒月饼(虽然最后被开除),一个插件解决春运抢票难题,几十行代码搭建一个 Web 网站,用微信自动和妹纸聊天,在程...

3357
来自专栏逸鹏说道

新浪微博UWP版-实现‘分享功能’的艰难路

索引 介绍 遇到的问题 寻求帮助 最终的解决方案 最终效果 介绍 在整个Team的共同努力下,在众多WPer的期待下,Weibo UWP版终于正式发布了。有关W...

3619
来自专栏vue+shiro

基于vue(element ui) + ssm + shiro 的权限框架

现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目,网上有句话说,语言框架迭代太快了,我学不动了,不如回去搬...

7722
来自专栏编程微刊

2018前端越来越流行的的技术

1495
来自专栏斑斓

工具 | 我们推荐的高效工具

几天前,ThoughtWorks China咨询师团队召开了一次团结的大会,成功的大会。为期三天的会议,分享的内容并不亚于坊间举行的技术大会,包含了敏捷组织转型...

3256
来自专栏逸鹏说道

2014年国内最热门的.NET开源项目TOP25

如果知道.NET项目在开源中国的git上所占的比重只有5%的话,为什么这个《2014年国人开发的最热门的开源软件TOP 100》榜中.NET项目那么少就是情理之...

4017

扫码关注云+社区