Created with Sketch.
Created with Sketch.
首页
发现
小书
登录
注册
×
注册小专栏
通过微信登录
通过微博登录
通过Github登录
通过邮箱
注册
、
登录
友情提示
Login FAQ
.
×
邮箱登录
通过微信、微博、Github 登录
登录
×
邮箱注册
通过微信、微博、Github 登录
注册
icon_photo_1
Created with Sketch.
WingMrL
就职于CVTE，r̶e̶a̶d̶y̶-̶t̶o̶已经成为vim党，喜欢各种奇技淫巧、源码分析、最新技术
100 / 140
就职于CVTE，r̶e̶a̶d̶y̶-̶t̶o̶已经成为vim党，喜欢各种奇技淫巧、源码分析、最新技术
关注 3
被关注 21
获得赞 151
Created with Sketch.
Created with Sketch.
Created with Sketch.
Created with Sketch.
+ 关注
取消
确定
个人书籍
个人专栏
读书笔记
读书是一个风险低、收益大的投资。 我很庆幸现在就发现了这个秘密。 在这里，会记下我读过的书，简单写写我的观点。
已发表 4
订阅数 16
前端开发漫谈
前端开发之路，道阻且长，行则将至！ 吾之所学所历，愿与诸君共享！
已发表 29
订阅数 90
文章
订阅
回复
喜欢
WingMrL
in
前端开发漫谈
ReactSVG 在项目中的实践
首先说下我们使用 SVG 的场景，其实很简单。就是页面上会有一些比较小的 Icon，比如什么XX勾勾之类的，图标很小，又不想用 png，如下图： 有两个需求： 希望这个图片放大的时候（或者在高清屏下）...
WingMrL
in
前端开发漫谈
0x 0004 - 架构设计的目的
三月份目标，读完极客时间李运华老师的《从 0 开始学架构》以下是我的笔记： 0x 0004 - 架构设计的目的 读完这篇文章和底部所有大神的评论，提炼三句话： 1. 架构设计的主要目的是为了解决软件系统...
WingMrL
in
前端开发漫谈
0x 0003 - 架构设计的历史背景
三月份目标，读完极客时间李运华老师的《从 0 开始学架构》以下是我的笔记： 0x 0003 - 架构设计的历史背景 我就知道，肯定会说架构产生的背景。存在即合理，那么究竟为何是合理的，这首先肯定是介...
WingMrL
in
前端开发漫谈
0x 0002 - 架构到底是指什么？
三月份目标，读完极客时间李运华老师的《从 0 开始学架构》以下是我的笔记： 0x 0002 - 架构到底是指什么？ 还没看这篇文章的时候，对架构了解像是上一篇所说的一样，是个很高大上的东西。动不动就...
WingMrL
in
前端开发漫谈
0x 0001 - 开篇词
三月份目标，读完极客时间李运华老师的《从 0 开始学架构》以下是我的笔记： 0x 0001 开篇词 | 照着做，你也能成为架构师！架构？ 架构设计与程序设计不一样。 不是看看 API 就可以开始写代码，李运...
WingMrL
in
前端开发漫谈
《技术人的管理之路》读后感
有些同学说订阅了《前端开发漫谈》，我却把文章写到另一个专栏上，又想骗钱~，为了照顾大家，我复制一下~ 以下是原文内容： 其实这本书在今年的 1 月份，也就是过年前就看完了。当时只是发了个...
WingMrL
in
前端开发漫谈
让人窒息的 Git 操作
目录 到底发生了什么？ 这件事会带来哪些影响？ 排查原因，是谁操作的，做了哪些操作的？ 复现步骤是什么？ 原因是什么？ 后续如何避免？ 到底发生了什么 这个窒息的 Git 操作就发生在前一个星期！...
WingMrL
in
读书笔记
《技术人的管理之路》
其实这本书在今年的 1 月份，也就是过年前就看完了。当时只是发了个朋友圈，收获了一波点赞，还没来得急写读书笔记。 计划呢，这个读书笔记是在 2 月份里面写的，但由于疫情(是真的有影响，毕竟在...
WingMrL
in
读书笔记
《精力管理》
我是从一篇文章：《对于精力的思考》上看到这本书。觉得文章不错，我就转发给我女朋友看，没想到她直接把书买下来了： 全书主要讲的是精力的重要性、精力的组成、以及精力如何训练和管理。全...
WingMrL
in
前端开发漫谈
记一次 Node 内存泄漏的定位与修复
有一天，我们生产环境的容器突然被杀掉，重启了。这个过程没有任何的征兆，第一反应就是为什么呢？以前不会的呀！最近也没改什么！ 经验告诉我要去查查 内存 or CPU 的情况，果不其然：（PS 纵坐标...
WingMrL
in
前端开发漫谈
关于 SEO，前端开发能做什么？
0x 00 前几周接了需求，需要为我们的大卫熊英语做一个官网。 做之前，也有考虑网站的 SEO ，以及其他方面的因素，最后选择了 Next.js。好了之后，一跑分，非常 Nice ： SEO 100 分！哇！有点飘了！ 但是...
WingMrL
in
前端开发漫谈
优雅地在 React 上使用 CSS Modules
张师傅让我们学习一波 Electron，于是又搞了一波 Webpack 的打包配置。 大概要支持 React、TypeScript 吧，当搞到样式的时候，就要配置一波对 scss 的打包了。 为了解决 class 冲突的问题，当然是义无反顾的选...
WingMrL
in
前端开发漫谈
0x 0001 - 开篇
下面是我的笔记： 浏览器三大进化路线第一个是应用程序 Web 化 随着云计算的普及和 HTML5 技术的快速发展，越来越多的应用转向了浏览器 / 服务器（B/S）架构，这种改变让浏览器的重要性与日俱增，视频...
WingMrL
in
前端开发漫谈
你的 Lodash 真的按需加载了吗？
Lodash 作为一个工具库，其实用性已经是众所周知的了，应该都有用到吧？ 对不起，我们项目没有用到！ 客官，且慢 ~~ 如果没有的话，那也可以看看，说不定某一天你就会用上了。哈哈 Lodash 提供了很多...
WingMrL
in
读书笔记
《重新定义团队-谷歌如何工作》
重读中....
WingMrL
in
读书笔记
Hello, World
万事开头 Hello, World ! 近一两年，陆陆续续读了十来本书。 一开始是强迫自己读的，后来慢慢才发现读书的好处，也慢慢地喜欢上了读书。 额，上面这句话，曾经也有人这么跟我说过，以说明读书的重要...
WingMrL
in
前端开发漫谈
一次 background-image: linear-gradient 的妙用
这个属性相信大家都不陌生了，就不作过多的介绍了，简单来说就 线性渐变 。 之前用 radial-gradient 写过一个 啥是佩奇，效果如下图： 这次用来写一个背景，也不足为奇。 大家都知道在 iOS 上，浏览页...
WingMrL
in
前端开发漫谈
Babel 的原理分析 与 一个问题的灵魂考究
问题背景 两天前，我的导师给我们上了一课[邪眼笑]。哈哈，不是大家想像中那种，只是做了个分享而已，一个关于 JavaScript AST 的分享。 AST 有人不知道的吗？来，我们贴个链接：抽象语法树（ASTs）。 ...
WingMrL
in
前端开发漫谈
子元素 100% Height 不会撑满 flex:1 的父元素
看到这个标题与封面，估计你想进来怼我一下。 且慢 ~~~ 我来解释一波 。 先来说明一下这是个什么情况： .container 是一个为 display: flex; 的父元素，里面有一个 flex: 1; 的自适应宽高的子元素 .child-item ，...
WingMrL
in
前端开发漫谈
Lerna - 一个管理 npm 包的管理工具
关于 Lerna 的理解，标题上写的是：一个管理 npm 包的管理工具，不知道这样理解有没有问题，所以大家可以先不去理会这个解释。 官方的解释是这样的： Lerna is a tool that optimizes the workflow around managing mult...
WingMrL
in
前端开发漫谈
设计模式六大原则
今天终于想看一下程序设计的一些理论性的东西了。 上一年年底的时候，才接触到这六大原则，是我们的头分享的。（一不小心暴露底子了，哈哈。） 其实我一开始就只知道个设计模式而已，也买了两...
WingMrL
in
前端开发漫谈
Next.js 源码窥探 之 next start
过完年回来一直在赶项目，停更了 20 天了，抱歉啊！ 另外，Next.js 的源码窥探系列也会更新得慢一些，因为项目需要，要优先去学习别的框架。 不过无论如何，后面的更新尽可能不被项目耽误，趁着发...
WingMrL
in
前端开发漫谈
微信 H5 适配 iPhone X 的正确姿势
问题 先来看看 iPhone X, iPhone XS, iPhone XR, iPhone XS Max 的尺寸： 上图截自：https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 可以看到，iPhone X 和 iPhone XS 的尺寸是一样的，都是 375 * 812，且都是 3 倍屏，...
WingMrL
in
前端开发漫谈
Next.js 源码窥探 之 启动命令
首先来看看 Next.js 的启动命令有哪些，根据官方文档，一共是有以下 5 个命令： next next dev next start next build next export 其中，next dev 和 next 是一样的效果。 其源码 ( 版本是 8.x.x ) 的目录如下： 可以看到...
WingMrL
in
前端开发漫谈
初探 Next.js
Next.js 是什么 Next.js 是一个 非常简洁 的 React 应用 的 服务器端渲染 框架。官网：https://nextjs.org/ Next.js 的优势是什么 默认开启服务端渲染； 自动代码分割； 基于文件系统的路由； 基于 Webpack 打包并支持 ...
WingMrL
in
前端开发漫谈
能够干掉鼠标的 Vim 编辑器
Vim 是啥 Vim 是一个 Linux 下的编辑器，现代的很多编辑器也支持 Vim 模式。我个人比较喜欢的 VSCode 是支持的，看看那熟悉的光标： Vim 为什么强大 运指如飞； 所思即所得； 常用的操作，一个键完成。 IDE ...
WingMrL
in
前端开发漫谈
啥是佩奇？
前两天被一个叫做《啥是佩奇》的视频刷屏了。放张照片让大家回忆一下： 如果不知道的同学呢，可以点击：《啥是佩奇》什么是佩奇啊高清完整版-国语720P 看完这个视频，相信你也想实现一个属于你...
WingMrL
in
前端开发漫谈
如何用 VSCode 随心所欲地调试 Node 程序
Node 程序的调试应该是老生常谈了，有各种各样的工具。不过我自己用得最多的是 VSCode 的 Debug 功能。 如果你也在用 VSCode 开发的话，我觉得 VSCode 的 Debug 功能用起来就很方便了，安利一波。 比如说我们...
WingMrL
in
前端开发漫谈
模块调试，怎么少得了这个命令
相信大家多多少少都搞过那么几个 npm 包，但不知道大家有没有发现，在开发的时候调试起来不是很方便。曾经的我是这么干的：(先汗颜一下) 1.蹭蹭蹭修改一波； 2.然后 push 到 npm 服务器； 3.再重新 npm ins...
WingMrL
in
前端开发漫谈
当 HTTP 302 遇到 Safari，坑就出现了！
简单地说一下 HTTP 302 。 302 Found，原始描述短语为 Moved Temporarily ，是HTTP协议中的一个状态码(Status Code)。可以简单的理解为该资源原本确实存在，但已经被临时改变了位置；换而言之，就是请求的资源暂时...
WingMrL
in
前端开发漫谈
用最轻松的方式，学会 React Hooks
前几天在微信公众号：前端早读课，读了两篇文章，分别是： 【第1493期】 React 的今天和明天（图文版）第一部分 【第1494期】 React 的今天和明天（图文版）第二部分 第一部分讲了 React 的现状、使命等...
WingMrL
in
前端开发漫谈
不到 2KB 的 JS 居然使白屏时间增加 200ms ！
看到这个标题，我也是震惊了！但现实就是这么残酷，还好经过一个小小的优化之后呢，这个 JS 的下载时间缩短到不超过 10ms。是的，就是不超过 10ms。看到这里的时候，估计你是这个表情： 来！看看庐...
WingMrL
in
前端开发漫谈
Hello, world.
先来一篇 Hello world 表明身份，毕竟程序员的处女作都叫 Hello world 嘛。这篇不讲技术，讲一下怎么入坑前端吧。 大学期间，转过 3 次方向。 一开始我是写 Java 后台的，以写 SQL 闻名整个宿舍（只有 4 个人...
Created with Sketch.
top
Created with Sketch.
