An Old dog learning new tricks -
Welcome to Alex's Midway
Google XSS game - Level 1
Recently I've been reviewing Frontend basics and came across this XSS game made by Google Security Team, I believe. Although it was…
ReadMac桌面端webview打开页面失败排查
背景 公司产品的Mac桌面端使用webview打开公司PC端主页，主页上有多个Tab。 其中一个Tab（以下简称A Tab，对应地址以下代称为：https://correct.domain.com）可以跳转到我负责的PC端页面（以下简称B页，对应地址https://correct…
Read手写bind
前端知识复习 code snippet Function.prototype.bind 标准 When the bind method is called with argument thisArg and zero or more args, it performs the…
Read手写instanceof
前端知识复习 code snippet instanceof 标准 If Type(target) is not Object, throw a TypeError exception. Let instOfHandler be ? GetMethod(target…
ReadVue实例方法的this指向
背景 做Code Review的时候遇到一段Vue的SFC代码，需要在mounted生命周期里绑定document的scroll事件 下面这段代码的问题有哪些？ 另一个例子 再看一个其他例子 答案 第一个console输出的是Vue实例 第二个console…
Read手写new
前端知识复习 code snippet 根据MDN，new主要做了4件事情 The new keyword does the following things: Creates a blank, plain JavaScript object; Links (sets the…
Readbackground-image踩坑
现象 用了一个雪碧图，图片的真实宽高是 112px*22px，对应了 4 种情况下的 4 个图标 A,B,C,D, 每个分别是 28pt*22pt，折算到两倍屏就是 14pt*11pt 的图标尺寸。 @1x，@2x，@3x 整数倍 dpr…
Readscroll事件踩坑记录
背景 使用Vue重构一个jQuery的H5/PC页面，一个列表组件实现滚动加载更多的时候踩了个坑。 现象 没有触发滚动 开始是把滚动事件绑定在列表组件的父级元素，然后发现无论如何都无法触发滚动事件 实现父元素滚动的布局导致了刘海屏下的一个兼容性bug 让html和body…
Read手写Array.prototype.every
前端知识复习 code snippet array.prototype.every 标准 Let O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). If IsCallable(callbackfn…
Read手写Array.prototype.pop
前端知识复习 code snippet array.prototype.pop 标准 Let O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). If len is zero, then Perform…
Read手写Array.prototype.push
前端知识复习 code snippet array.prototype.push 标准 t O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). Let items be a List whose…
Read手写Array.prototype.some
前端知识复习 code snippet array.prototype.some 标准 Let O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). If IsCallable(callbackfn) is…
Read手写Array.prototype.forEach
前端知识复习 code snippet array.prototype.foreach 标准 Let O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). If IsCallable(callbackfn…
Read手写Array.prototype.filter
前端知识复习 code snippet array.prototype.filter 标准 Let O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). If IsCallable(callbackfn…
Read手写Array.prototype.reduce
前端知识复习 code snippet 先看 array.prototype.reduce 标准 Let O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). If IsCallable…
Read手写Array.prototype.map
前端知识复习 code snippet 废话少说，先看 array.prototype.map 标准 Let O be ? ToObject(this value). Let len be ? LengthOfArrayLike(O). If IsCallable…
ReadBGP Hijacking
reference:https://www.cloudflare.com/learning/security/glossary/bgp-hijacking/
Read国际化和本地化初步
写在前面 公司项目网站改版在即，需要扩充国际化和本地化支持。 查资料看了下这两个东西，理清了一些概念，简单记录一下。 国际化和本地化 根据wiki的说法，国际化与本地化（internationalization and localization…
Readweb性能优化指标解析
写在前面 1.sequence request - server responds - domContentLoaded - load Choose the metrics web.dev/user-centric-performance-metrics 2.1 Is there…
Read响应式图片优化
写在前面 图片消耗了网页流量的50%（中位数），移动端图片消耗了大约900Kb - httparchive.org, 2020.01 图片优化的…
Read多语言的判断优先级
写在前面 最近增加Node多语言的支持，后端获取语言参数的优先级有点不清楚 特意查了些文档，在这里记录一下 优先级 Domain: 顶级域名（TLD, Top Level Domain），如.cn, .de等 Subdomain: 子域名，如cn.amazon.com…
ReadHTTP缓存小结
常见相关HTTP Header HTTP 1.0 Pragma 与HTTP 1.1 Cache-Control对等，为了兼容而存在； 如果Cache-Control同时存在，Pragma会被忽略； 通常设置为Pragma: no-cache; HTTP 1.1 Cache…
Readnginx基本配置
三个主要字段 http，server，location location配置 优先级 = ^~ ~ ~* / 反向代理配置 proxy_pass gzip配置 案例
Read配置Nginx和WebpackDevServer支持开发环境热更新和https域名访问
开始之前，先推荐一个工具网站 用于测试配置文件中location匹配，感觉很方便 Nginx location match tester： https://nginx.viraptor.info/ 背景 node…
ReadVue使用provide-inject特性注入皮肤配置
背景 H5页面主题皮肤切换，有2条路线，一是使用css实现，一是使用js实现。 其实需求很简单，希望组件本身可以和皮肤主题解耦，这样至少有…
Read使用eslint+prettier+husky规范项目代码风格
写在前面 项目配置 ESLint eslint babel-eslint eslint-config-airbnb-base eslint-plugin-vue eslint-config-futu eslint-plugin-import, 不认识webpack…
ReadVue中v-if和v-show遇到的小问题
同一个页面有多个相同组件，根据配置分别控制显隐，使用v-if时始终都只有第一个组件能取到props，第二个没有被初始化
ReadES2015-ES2020
1. TC39 工作流程 - 标准一般每年6-7月发布 2. ES2015（ES6）：常用特性 2.1 模版字符串 2.2 解构赋值，rest/spread操作符 2.3 Symbol / Iterator / Generator 3. ES2016（ES7） 4. ES…
Readmac终端中文显示数字编码的设置问题
问题描述 新部署的服务器，查看git commit message不显示中文了，全是各种数字编码，而旧服务器显示一切正常，这显然是编码问题了。 原因 简单google了一下，发现是服务器字符集和本机字符集不匹配。 输入locale查看本机的配置，发现LANG和LC_ALL…
ReadHTML中自闭合Vue组件的bug
写在前面 今天犯了个低级错误，页面新增加了一个vue组件，因为是直接在html里写的（需要用php的后端直出，没有用vue单文件的写法），在使用自闭合标记写法的情况下这个组件没有直接渲染，而是把它后面的div…
Readnginx配置的一个小错误
写在前面 最近一次帮同事找错误的经历，虽然最后发现是很低级的错误，但是过程挺有意思 问题描述 之前搭建的新管理后台项目A上线了，搭档想在本地调试，于是按照文档配好了nginx配置文件，本地启动项目，按域名访问却被重定向到了另一个项目B的页面 排查过程 检查项目A的ip…
Read部署node管理后台遇到的几个问题
写在前面 核心服务扩容，之前预定分配给node管理后台用的服务器不能用了。 不得不重新申请了一台服务器部署，结果部署成功后业务一直运行不起来，花了3天才排查到原因，真是尴尬。 这里记录一下，留作备忘。 背景信息 开始安装又卸载node…
Read前端二年
很多年以后，我可能仍然会记得2017年7月某个下午的那场谈话。 入职第一天，项目负责人笑眯眯的给我说，公司项目有了变化，临时前端缺人，需要我支持一下。就这样，本以为做java后台开发的我，误打误撞进了前端的门。 从什么前端知识都不会，到可以使用react-native…
ReadJSBridge的一点总结
写在前面 最近做了几个混合App开发的需求，涉及到了JSBridge，记录一下 一点总结 webview的URL最大长度，跟使用的浏览器内核有关，和客户端同学测试过是8182个字符，和chrome标称的长度一致，所以我司webview内核用的应该是chrome
ReadPM2遇到的一个小问题
写在前面 这篇是大概一个半月前部署node项目时遇到的一个小问题，写下来备忘 问题描述 部署完毕，运行报错的时候才发现服务器没有pm2.config.js配置的文件路径 ssh…
Read一个关于babel的愚蠢错误
TL;DR babel不会打包node_modules里的文件，所以引入组件时，必须用组件打包后的代码 问题描述 npm install安装了公司内部组件之后，使用时import了源文件，然后项目打包报错: ... UglifyJS unexpected token: punc…
Read移动端网页调试技巧
写在前面 这是4个月前的一篇工作记录，是上一篇Charles使用的扩展版。 因为平时用Mac，所以只列出了Mac调试不同移动端的情况，windows没有涉及。 在Mac下调试App常用3种手段： USB调试 使用腾讯开源的vConsole 使用Charles调试 USB…
Read使用Charles抓包移动端网络请求
写在前面 这是4个月前的一篇简要工作记录，重新编辑整理了一下，算是自己技能成长的一个见证。 可以抓包移动端网络请求的工具很多，windows下有fiddler和wireshark，Mac下有Charlse和Surge for Mac（Surge iOS版甚至可以在iOS…
Readnode开发遇到的一个小坑
写在前面 大前端之路又迈出了坚实一步。 leader架不住我们前端切图仔的各种游说，终于决定了上node。马上就可以写node接入层了，后端哥们可以专心开发微服务，切图仔们也可以想要什么数据字段就用什么了，毕竟求人不如求己。 leader给我分配了搭建框架的任务，以公司内部koa…
Read一次App内页的bug溯源
写在前面 上一篇博客中提到的业务，这次引发了另一个bug 背景信息 上一次的H5页面上线有段时间了，客户端同学终于赶上了进度，把页面用到了App里更多的地方。 这次bug的主角是2个页面，一个列表页（以下简称L），一个详情页（以下简称D）。L由内嵌webview为容器，作为App…
ReadCDN缓存不同步：一次线上调试的经历
写在前面 这是大概3个月之前的一次线上调试过程，最后排查到的原因很简单，但调试过程让我认识了所谓“线上环境复杂”是什么意思。 背景信息 这是入职后接手的第一个H…
ReadJavaScript中的原型链
原型链的前提规则 原型链关系试验 试验的一点解释 原型链关系图 原型链的前提规则 任何对象都拥有__proto__属性，指向其 构造函数 (constructor function) 的 原型 (prototype) 对象 例： 假设有数组对象 a…
Read判断有序数组B是否为有序数组A的子集
富途面试遇到的手写算法题： 2 个有序数组 A 和 B，只含有数字，每个数组内的元素都有可能重复。请写一个函数，判断 B 是否为 A 的子集。如果是，返回 true；反之，返回 false…
Read[LeetCode 1] Two Sum
Given an array of integers, return indices of the two numbers such that they add up to a specific target. You may assume that each input…
Read[LeetCode 278] First Bad Version
You are a product manager and currently leading a team to develop a new product. Unfortunately, the latest version of your product fails the…
Read[LeetCode 88] Merge Sorted Array
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: The number of elements initialized in…
Read[LeetCode 461] Hamming Distance
The Hamming distance between two integers is the number of positions at which the corresponding bits are different. Given two integers x and…
Read开始刷leetcode
可能是今年 flag 里包含项目最多的一个，今天正式开始 leetcode 刷题，目标是 7 月 31 日之前至少刷完一遍。 leetcode 官方放出了一个 top interview questions list，一共 151 题： easy 共 49 题 medium…
Read2018总结与2019希望
近期因为家里各种事情的耽误，一直没有时间完成这篇总结与希望。新的一年已经过完 1/12，这篇姗姗来迟的文章还没开始就有点过时了。 2018 年总结 工作 阅读 代码 2019 希望 2018 年总结 如果要用一个词概括我的 2018，那么这个主题词是：“转型” 工作 201…
Read用Gatsby重写了博客
花了 3，4 天，用 Gatsby 断断续续的重写了之前的博客，现在是 SPA 了，哈哈哈。Gatsby 包装了各种插件，用起来挺方便，最关键是不用自己配置 webpack 了，省事不少。当然了，新东西 bug…
Read[译]写给恐龙的现代Javascript指南
写在前面：这是一篇译文，是原作者系列文章的第一篇，第二篇主题是 CSS , 第三篇是 HTML。 作者：Peter Jang 原文名：Modern JavaScript Explained For Dinosaurs 原文于 2017 年 10 月 19 日发表于 medium…
Readparameter与argument
以前一直迷迷糊糊的，parameter 和 argument，形参和实参，这 2 个概念中英文完全对不上，现在终于弄清楚了 parameter： 函数声明中用来占位的参数名，中译“形参” 其实它就是 placeholder，翻译成“参数占位符”更容易理解 argument…
Read恶趣味构造函数
date: 2018-10-29 引子 带返回值的构造函数 一点引申: 单例模式 引子 理论上说，只要对函数使用new语法，任何function都可以作为constructor创建新实例，但是如果function…
Readtypeof与instanceof
typeof instanceof typeof typeof可以用来测试变量的类型，语法是typeof myVariable，返回值为变量类型的字符串。一般来说，基本类型会返回描述基本类型的字符串，而对象则返回'object'字符串，但是有…
Read几个JS高阶函数的简单底层实现
高阶函数 Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.every Array.protytype.some Array.protytype.reduce…
Readarray.indexOf和array.includes
date: 2018-10-03 一点微小差别 为什么 结论 参考文献 一点微小差别 indexOf 和 includes 都可以用来判断数组是否包含某个元素，二者到底有什么区别呢？看一个例子: 为什么 二者内部使用的算法不同： indexof…
ReadIEEE-754标准与JS中的number类型
title: 'IEEE-754标准与JS中的number类型' 引子: 0.1+0.2===0.3 ? Number类型的二进制表示 二进制小数与二进制科学记数法 IEEE-754双精度浮点数 存储结构 计算方法 特殊情况 浮点数的误差 十进制转浮点数 舍入 0.1+0.…
ReadJS中的隐式转换
date: 2018-09-21 基本类型隐式转换 基本类型转换为Boolean类型 基本类型转换为String类型 基本类型转换为Number类型 对象隐式转换为基本类型 基本类型隐式转换 基本类型转换为Boolean类型 隐式转换相当于调用Boolean(value…
Read相等操作符
引子 操作符运算规则 全等操作符判定规则 - Strict Equality Comparison(SEC) 相等操作符判定规则 - Abstract Equality Comparison(AEC) 对象转换基本类型规则 - Object To Primitive(OTP…
Read使用json-server搭建API模拟服务器
--先挖坑，有时间再填-- 超简单服务器 20 秒 done(只用于数据测试) 自定义 API route 复杂 API 模拟服务器实现 结合 Fake.js 实现随机数据 API 模拟服务器
Read使用FlatList(ScrollView)的一个小问题
问题描述 列表 FlatList 直接放在 View 里面，无法 pull to refresh 原因排查 因为 FlatList 基于 ScrollView 和 VirtualizedList 封装，查看了 ScrollView 的官方文档说明 Keep in mind…
ReadCST与GMT的差别
date: 2018-05-15 问题描述 排查过程 CST & GMT 冷知识 问题解决 反思 问题描述 今天偶然发现了一个问题，JAVA 后台返回的时间字符串解析后居然比原始数据差了 14 个小时 后台时间字符串：Thu Feb 17 16:31:52 CST 201…
Read一次搞笑而深刻的bug调试
问题出现 APP 某个页面加载时访问了 2 个 API，两者的返回数据都分别有type字段，用于区分对应的数据列表中项目的类别，前端界面再根据类别渲染不同的界面 这个时候问题出现了，第一个 API 一切正常，第二个 API 返回列表本应全是type=…
Readnull和undefined的比较
相同点 均为基本类型 都属于“假值”，用Boolean()转换类型后都为false 使用==进行比较时，二者相等 看 2 个可能会遇到的情况： 例 1 中，这几个值在 if 语句中都会被隐式转换为boolean类型，而且恰好都为假值，取反之后均为真，因此 三个 if…
ReadAndroid模拟器访问本地web服务的url
不会自己搭mock server的前端不是好前端。 后台开发和前端开发不能完全实现同步，一直停下等后台是要出问题的。 于是基于json-server搭了一个 API 本地测试服务器，却遇到了一个莫名其妙但极其简单的问题，简单记录一下，避免以后二次踩坑。 TL;DR Android…
ReadRN Animated API使用
RN 也用了小一段时间了，之前都着重实现功能+赶工期，交互体验方面基本无暇顾及。 最近项目周期不算太紧，于是小小试验了一下 Animated 的 API，模拟器上的效果还不错。 简单记录一下 API 的内容，以后备查： ---先挖坑，以后再填--- 组件 自带的有Animated…
ReadReact-Navigation中去掉header下的阴影
StackNavigator 在navigationOptions里修改headerStyle TabNavigator 在tabBarOptions修改style 代码 最好在navigator定义时设置navigationOptions…
ReadAndroid键盘遮挡问题
有时候需要键盘遮挡住屏幕的一部分，有时候不需要，可以配置android\app\src\main\AndroidManifest.xml文件 android:windowSoftInputMode="adjustResize"可以让键盘推起页面 android…
ReadNative Module xxx tried to override xxx native module错误解决办法
安卓下又报了个错误 Native module SplashScreenModule tired to override SplashScreenModule for module name SplashScreenModule. If this was your…
ReadRN0.53+react-native-splash-screen3.0.1，Android启动闪退
splash-screen 这个 RN 插件挺好用的，升级之后启动 Android 版 APP 就闪退 查了 issue 之后发现是文档没更新，在按照说明操作之后，还需要做额外调整： 插件 github 地址 MainActivity.java…
Read实现自定义tabbar component
需要覆盖 tabbar component 如果是 bottom 模式，就需要覆盖 tabbarBottom 如果是 top 模式，就需要覆盖该 tabbarTop 参考这里
ReadReact-Navigation中tabNavigator去掉指示线
bottom 模式的 tabBar 也出现了 indicator（就是选中某个 tabbar icon 的时候，出现的那根线，一般是出现在 top 模式下的） 感觉很烦人，想去掉，开始自然想到把这根线调为透明 发现不管用。 查了一下 issue，发现了下面这个解决方案： 搞定！
Readantd-mobile引用错误解决办法
问题： 创建 APP 代码完整框架的时候，因为升级到了 2.x 版本的antd-mobile，报了下面错误 但是运行时出现依赖 react-dom 的错误 "Unable to resolve module react-dom from /Users/xiesubin…
ReadRN0.53找不到remote debugger解决方案
更新： 换了 0.53 版本的 RN，目前 android 遇到的,而且只有模拟器，真机调试都不会有以下问题 现象： 直接打开调试会找 10.0.2.2:8081/debugger-ui/，但是这个地址并不能连接成功 解决方法： 手动修改地址为http://localhost…
Readreact-native-init以指定版本创建project
RN 版本升级太快，现在以指定版本的 RN 重构老 APP 用 init 创建的格式如下 react-native init yourProject --version react-native@0.53
ReadStackNavigator Header增加“返回”按钮
StackNavigator 自带了 navigationOptions 属性，但必须以静态对象申明 实现有 3 个要点： navigationOptions 对象里，创建{param}常量，然后 headerLeft 或者 headerRight…
Readheader title在Android下不居中问题的解决技巧
页面用了 stackNavigator，header left 加了一个 button，header titleStyle 也设置了居中 iOS 下没有问题，但是在 Android 下发现 title 向右偏移 系统版本 RN 0.47.2 NODE 8.4 NPM 4.6.…
Read