发表于

Z shell（Zsh）是一款可用作交互式登录的shell及脚本编写的命令解释器。Zsh对Bourne shell做出了大量改进，同时加入了Bash、ksh及tcsh的某些功能。
来自：wikipedia

使用zsh

MAC 默认自带了zsh，如果没有可以去自行安装：

首先查看是否有 zsh

cat /etc/shells

1
2
3
4
5
6
7
8
9
10
11
➜  ~ cat /etc/shells
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
阅读全文 »

发表于

背景是公司有个自定义定制衣服的项目，那为了做图设计需要讲一些可定制的图案P在纯色的衣服上，所以我作为一个前端负责人看到这种事情决定通过技术的手段去协助解决。

原本的计划是可以直接导入原图和定制图提供常用的图片处理方式去合成图片支持位置移动然后一键导出。

我以为的处理方式只是调下透明度、灰度这类针对单图的操作，但其实设计师大部分是用 正片底叠，然而正片底叠是要两张图重合的像素点去同时计算，这个就复杂了，然后我放弃了，然后同时被放弃的还有这个项目，Orz…

这也是第一个加班加点赶进度完成后，完全没开始运营就结束了的项目…

资料

这里收集了几个图片处理的开源库

发表于

更新内容的时候已经到了2020.03.06，当时实际问题产生和解决大概实在2018年，如今webpack已经到了5的版本，既然以前开过头还是梳理下内容，因为新冠肺炎在家呆着，没远程办公就在家看看整理下

多entry介绍

多entry只是相对于单页应用来说，常规的网站每个页面都是一个entry，单页和多页各有好坏，具体的看自己的场景适合哪种。
个人偏向多entry + entry内的单页应用，按大模块划分为一个个entry，entry内再做单页应用，当然小项目就不必要这么做…

过程中遇到的问题比下面这些要多的多，主要记录几个印象深刻的

预发布和生产等不同环境因为cdn地址不同需要重复构建的问题

项目有很多套运行环境，比如 开发环境、测试环境、预发布环境 。每一套环境cdn地址是不同的，所以导致不同环境都需要重新构建。

前期方案：

大致三个步骤，处理之后可以解决资源路径在不同环境下的正常引用。

  1. 动态配置 __webpack_public_path__ 可以解决js文件中导入的资源文件路径；
    1
    2
    3
    4
    5
    6
    7
    // publicPath.js 读取全局变量 
    __webpack_public_path__ = `${window.CDN_PATH || ''}/`; // eslint-disable-line

    // entry, 为每一个entry注入该文件
    {
        index: ['publicPath.js', 'index.js']
    }
阅读全文 »

发表于

遇到了一个只有在 ios chrome 浏览器才有有兼容性的问题，为了调试chrome for ios，我会的调试技能都用上了

这里的重点是通过 Mac 调试 ios chrome浏览器，真的没办法 inspect，感觉只能回到远古时代了。

Chrome inspect Safari 没问题
Chrome inspect windows chrome 没问题
Mac safari inspect ios safari 没问题

Chrome 官方的方案

IOS Chrome 73 之后的版本可以开启调试日志收集，浏览器访问 chrome://inspect 打开日志收集。

参见下面这个地址， 说了可以通过 Safari Web Inspector 调试 Chrome但需要一堆复杂的操作，所以在新版本Chrome浏览器中启用了该功能。

https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html

一些前端辅助的调试工具

如 weinre vconsole 类似都是通过js反馈出页面的dom、stroage、网络、console等信息，因为不是原生调试所以都没法断点。

weinre 作为一个老古董内置了一个http服务器，可以在局域网内查看，方便pc大屏查看。

最终使用了 weinre 调试页面，只需要在页面内注入一段js脚本即可将页面信息发送到内置服务器方便在PC上查看。

发表于

日常见过比较多的 babel-preset-vue ，@babel/preset-react，简单理解 preset 最终就是确定一个 babel 插件的集合，那你可以通过多种配置告诉 babel 你需要开启那些插件。

这里整个配置的思想和构建自己常用的eslint风格是一致的。

创建一个preset

这里首先你也要先创建一个package 方便推送到npm。

包名也必须以 babel-preset-* 开头，或者 scoped modules 以 @scope/babel-preset 前缀命名，规则和共享eslint一致。

这里需要配置 package.json dependencies 字段申明你的依赖。

然后一样创建index.js 导出你的配置，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = () => ({
    presets: [
        [require('@babel/preset-env'), {
            targets: {
                browsers: ['last 2 versions', 'ie >=9']
            },
            modules: false
        }]
    ],
    plugins: [
        require("@babel/plugin-syntax-dynamic-import"),
        [require("@babel/plugin-proposal-decorators"), { legacy: true }],
        [require("@babel/plugin-proposal-class-properties"), { loose: true }],  // 松散模式
        require("@babel/plugin-proposal-object-rest-spread")
    ]
});

阅读全文 »

发表于

针对移动端的适配方案目前大部分都是使用淘宝的 flexible
通过动态的根节点 font-size 和 rem 单位来做适配，不过是通过dpr 做了缩放，而实际上缩放并不和适配方案有关系，只是可以解决多倍屏下的0.5px像素问题，所以我们自己在移动端是去掉了根据dpr做缩放方案。
在面试的时候聊到移动端适配就会问下为什么要缩放，然后最近被人告知淘宝的方案没有缩放了，发现升级了，所以今天就整理下下移动端的适配方案；

如下所有的页面宽度都指：页面css宽度

淘宝旧的缩放实现方案：

代码大致如下三个步骤：

  1. 根据配置或者默认方法获取当前的 dpr 和 缩放比例 scale
  2. 然后设置页面的meta viewport做好页面缩放，写入 html data-dpr 属性
  3. 根据页面的 css像素宽度/10 * dpr 得到跟节点 fontSize 的值。（不过这里在一些奇葩的webview内导致设置的fontSize和计算出来的不一样，导致页面不能刚好全屏，可以通过下面的解决方案兼容）
阅读全文 »

发表于

平时在日常开发的过程中，难免自己会找到自己之前项目的 eslint 配置，然后复制粘贴过来，为了解决这种问题，这里介绍如何构建一个自己习惯的eslint规则包到npm。

创建一个共享 eslint config

首先创建一个 npm package，package 名必须为 eslint-config-xxx，或者 scoped modules 以 @scope/eslint-config 前缀命名。

比如：eslint-config-myConfig、@lljj/eslint-config、@lljj/eslint-config-myConfig 都是可以的

然后创建你的规则文件，如 index.js，同时配置 package.json main 字段指向该文件。

index.js 需要导出一份eslint 配置即可， 如：

阅读全文 »

发表于

在意识里一直知道js for in 是无序的，从来没仔细看过具体是怎么样的无序法，
之前看到有同事在做一个需要去重同时排序后取出前三个的场景，
使用了 Object.entries 直接排序一个对象，借助了排序的形式来处理
然后取出前三条数据的使用方式，这里来详细下测试下 for in 的排序问题

测试一些 key 的形式

Object.keys和for in 循环返回顺序一致，这里统一通过keys 测试
只关注 ie9 以上的现代浏览器

纯数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Object.keys({
3: '3',
4: '4',
312: '312',
2: '2',
12: '12',
1: '1'
})

const chromeOrder = ["1", "2", "3", "4", "12", "312"]; // chrome v70
const nodeOrder = ["1", "2", "3", "4", "12", "312"]; // node v10.16.0
const safariOrder = ["1", "2", "3", "4", "12", "312"]; // safari
const ie11Order = ["1", "2", "3", "4", "12", "312"]; // ie11
const ie9Order = ["1", "2", "3", "4", "12", "312"]; // ie9

现代浏览器都是保持一致，按数字从小到大

阅读全文 »

发表于

又到了招聘旺季，互联网寒冬，公司招聘已经停止了好几个月，趁着这次准备面试知识点，也对自己做一个简单的知识点大纲梳理，也算是自己的一次学习计划，希望可以逐步把相关知识点涉及的细节都能逐步更新完善和学习。之前的阿里云忘了续费，内容没备份之前的东西都找不回了，好在域名还在直接换到coding的pages服务，重新开始做些技术相关的记录。

前端面试考察整理

  • 基础前端专业知识
  • 框架能力
  • 进阶：设计模式 安全 性能 模块 工程 等
  • 大前端：Node native
  • 解决问题的能力 （一个人的不同点就来自于你解决问题的能力）
  • 学新能力
  • 团队协作沟通和管理经验

整理了一些问题的维度和大的知识点，以及目的，方便在面试的时候使用，自己每次会控制在40分钟 - 1小时，下面的问题作为参考，实际主要看简历面试者会什么

考察点：工作经验

问题：

  • 做过的大项目有哪些？ 项目中担任的角色 ？ 遇到问题一般如何解决
  • 团队规模？ 合作人员 ？
  • 使用相关的技术栈？解决了什么问题？

目的：

考察工作经验是否符合目前的工作，以及在开场先介绍一些自己比较熟悉的东西，容易打开思路吧，也可以判断出之前在团队内说承担的角色，决定后面问题的一些偏重点。

考察点：基础专业知识

阅读全文 »