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 条评论
登录 后参与评论

相关文章

  • 20180811_ARTS_week07

    https://medium.freecodecamp.org/prototype-in-js-busted-5547ec68872

    Bob.Chen
  • Canvas画图-鼠标涂鸦

    之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),后面又写了使用SVG实现的方法 一个比想象中更骚气的圆-svg实现, 这篇继续学习和Canv...

    Bob.Chen
  • Python 做图片清晰度识别

    如果之前了解过信号处理,就会知道最直接的方法是计算图片的快速傅里叶变换,然后查看高低频分布。如果图片有少量的高频成分,那么该图片就可以被认为是模糊的。然而,区分...

    Bob.Chen
  • Windows 安装 NVM 原

    1. 从 GitHub 上下载 nvm 的 Windows 安装包 nvm-setup.zip

    北漂的我
  • MySQL中两个小的优化案例

    今天介绍两个优化案例,一个是关于min和max这种函数的,另外一个是关于count这个计数函数的。

    AsiaYe
  • GitBook + Typora + Git 编写电子文档

    近期使用Typora编写文档的时候,写一些篇章比较短的文章还好。但是当篇章过长,标题目录过多的时候,那样就会导致阅读效果很差。

    Devops海洋的渔夫
  • 第十八章:SpringBoot项目中使用SpringSecurity整合OAuth2设计项目API安全接口服务

    恒宇少年
  • 文件倒排索引算法及其hadoop实现

    什么是文件的倒排索引? 简单讲就是一种搜索引擎的算法。过倒排索引,可以根据单词快速获取包含这个单词的文档列表。倒排索引主要由两个部分组成:“单词”和对应出现的“...

    triplebee
  • 【Node.js】使用 nvm 管理不同版本的 node 与 npm

    在我们的日常开发中经常会遇到这种情况:手上有好几个项目,每个项目的需求不同,进而不同项目必须依赖不同版的 NodeJS 运行环境。如果没有一个合适的工具,这个问...

    魏晓蕾
  • 高德纳:2015十大战略性IT趋势

    大数据文摘

扫码关注云+社区

领取腾讯云代金券