背景 业务代码中， 会涉及到大量从window读取自定义属性， 如何声明 window 很重要 解决方案 1) 重新声明 window 类型 window 本质上是 Window 类型， 那么直接可以通过全局声明重写 global 是 ts中关键词，所有在 global 闭包中的会自动提升至全局。 此处必须用 interface 因为 interface 有自动合并的能力 2) 局部as 适用于临时解决 3) xx.d.ts 重写 所有 d.ts…
背景 idea 版本之间个人配置在跨版本升级时， 经常容易丢失。此处记录下 如何配置, 以防丢失 inlay hints 中文意思镶嵌提示 开启后变量后面有相关的类型显示，但是会导致在开发过程中闪动和文案超长，大幅降低阅读性 通过 settings -> Inlay hints -> 关闭 types 解决 Reference https://www.jetbrains.com/help/webstorm/inlay-hints.html#enable_inlay…
The Open Graph protocol 属于 SEO 中的一部分， 在支持 og 协议的社交平台中把链接转为卡片渲染，能极大增加网页链接被点击率。 本文通过升级当前文档系统集成 og 标签，从而更进一步了解 og 协议 标签说明 og:title 卡片标题 og:description 卡片描述 og:url 点击链接 其他一些标签详见文档 绝大部分社交平台不会执行 js, 故标签的生成必须在服务端 应用 使用 react-helmet 注入 关联 meta…
前言 近期在项目中集成软电话插件，遇到不少小问题， 其中iframe播放问题花了较多时间， 此处整理下 media 自动播放 简单来说， 是浏览器限制自动播放。下面是官话 解决方法: iframe设置标， 这种方式适合能操作容器页面的情况， 使用时会有权限提示， 需要用户手动允许 保证iframe同源，即容器域名和iframe域名一致。 Reference Chrome autoplay
背景 ts 中关键词和特殊， 最近深入了解了下， 下面作为笔记 is 作用 关键词用于类型推断， 和类似， 区别是可以在函数里面使用， 用于函数的返回定义, 改变的是整个上下文 is 的使用 典型的判定类型方案， 若期望使用更精准的类型， 不要简单在函数做出 boolean 类型， 而是设置入参为 期望的类型， 那么后续闭包中该对象会自动解析成 的类型 Reference using-type-predicates
背景 最近在调研长期定投的货币，btc,eth,sol,dot 是最终的几个选项，以下是通过一些资料查询总结的一些共同，不同点。 现状 eth 主打智能合约, 仅此于 btc, 当前唯一可能超越 btc 的币种，成熟且稳定， 风险相对较小。现阶段依然处于 1.0(pow)中，未来能否顺利过度到 2.0(pos)是其保持地位的关键。 sol 核心功能为速度快，官网描述交易处理量上限可以为 710,000 tps, 是所有链中最高的。 交易手续费对比 eth…
背景 有些程序没有遵守代理规范， 使用自定义的方式发起网络请求，这样会导致 clash 即使开了全局代理也无法实现网络代理。 这里就需要传统 vpn 中使用的虚拟网卡实现真正的全局代理 设置 TUN https://docs.cfw.lbyczf.com/contents/tun.html TAP https://docs.cfw.lbyczf.com/contents/tap.html 2 种方式均试过， 个人感觉区别不大 TUN TAP 的区别 TUN 协议会代理网络…
背景 近期项目国际化中， 需要根据语言使用不同的代码样式, 例如引号，句式，排版等。 使用 语言标签可以通过 meta 标签引入 也可以通过 优先级规则和 css 保持一致 css 中获取 总结 css lang 伪类能解决一部分 js 需要做的逻辑判定问题， 减少代码复杂度。 但是 lang 无法解决所有问题，有时候还是需要应用 js 处理一些内容和布局问题。 css-in-js 方案更适合灵活页面，推荐 styled-components 可以把 css 变量变为 js…
背景 近期公司产品需要嵌入第三方平台，需要和平台页面进行一部分信息通讯，广泛使用了 , 本文主要介绍 postMessage 的使用和注意事项 使用 targetWindow targetWindow 需要为一个 window 对象， 常见使用方为 window(同页面之间,实现 pubsub) window.parent(或者 window.top) 向父级推送消息 window.frames[0].contentWindow(向 iframe 页面通讯) window…
背景 最近装机时，内存条无法实现神光同步，经过多方资料查询发现是软件配置问题。 硬件设备 主板 华硕 z690 hero 铂金统治者 ddr5 5600 同步方法 安装 asus aura, icue 需要先安装 asus aura, 然后安装 icue. 然后打开 icue 找到内存，最新版本的 icue 已经默认全局控制打开了 若 icue 无法显示内存， 需要到 bios 中 (AI Tweaker -> Tweakers Paradise -> SPD Write…
背景 ts 中和都是常用类型， 在实际开发中经常混用，顺着双休总结下 2 者的区别 interface 只能描述 object 基础数据类型， 只能用 type 声明, 比如 , , interface 可以重名, type 不可以 实际运行时，重名的 interface 会自动合并, interface 不像 type 可以使用 & 合并功能 interface 可以继承， type 不行 type…
背景 mac 系统或者 ios 浏览器均有过度滚动(弹性滚动)的情况，后续所有的系统均支持了弹性滚动, 本文探讨如何禁用此特性 非 safari 浏览器 通过使用 禁用弹性滚动. 除 safari 外，所有的浏览器均支持(不支持的浏览器本身也不支持弹性滚动) safari safari 滚动只作用于 , 元素, 仅需禁止其滚动, 然后让其子元素滚动。 结论 综上，需要彻底解决问题 假设 html 如下 那么需要设置 css 为如下 Reference can i use…
背景 以前，写过一个自定义 react render 的仓库 ，核心通过 react-reconciler 实现 ract 中生命周期来实现自定渲染。现 react hooks 已经大面积使用，是否可以继续使用上述方法实现自定义渲染？ 如下是个人尝试 初始工程 react-reconciler 各版本之前不兼容， 当前例子为 0.26.2。 也是因为这个原因， 直接升级 react 版本可能会导致错误 将旧 render…
背景 typescript 配置项很多，不像 js 有固定语法，实现一种功能根据配置有多种写法，配置不同会出现不同的 语法错误。本文主要分析主要的参数，提高自我对 ts 的理解能力 更准确的强烈推荐使用官方文档, 本文只是阐述个人的理解 compileOptions target 编译结果版本，ts 本身可以直接替换 babel 编译代码，个人更喜欢使用 babel, 故 ts 的作用仅仅用于 typings。target 作用不大, 用 es…
背景 埋点分析通常使用图片或者 xhr, 但在一些特定条件下有可能无法正常发出请求，例如埋点记录页面关闭。sendBeacon 就用于这种特定的场景使用 使用方法 其中 就是请求地址，可以是任意有效的 Post 数据类型。 与 xhr 不同，不会产生跨域问题。 常用方法: 在离开/隐藏页面发起埋点 ie11 不支持 Beacon API Reference sendBeacon
背景 今年币圈牛市，filecoin 也大涨。 filecoin 挖矿也是热门话题， 但是网上很少有资料讨论个人挖 filecoin 本文主要总结下个人挖 filecoin 的可行性分析 为什么个人要挖 filecoin ipfs 被誉为点对点的网络协议，通常来说 p2p 下载(例如迅雷,电驴)能大幅提升用户下载的速度和文件的 可靠性， 但是需要所有用户成为节点但成为节点的用户没有任何收益。 filecoin 就是解决这个问题而出现的, filecoin 就是 ipfs…
虚拟货币常见术语笔记 常见货币 btc: 最原始货币，虚拟货币核心价值 eth: 应用层货币，创建 defi 应用 etc: 以太经典, eth 1.0 就是 etc bnb: 币安智能链交易货币，与 eth 类似, 但均以币安交易所为核心 fil: FileCoin 是一个文件存储系统, 是 web3.0 的基础构成 收益方式 pow: 工作量证明机制，通过 cpu, 显卡，矿机计算能力决定分配数量 pos…
在天朝查资料总有被墙的时候， 此时通过dns 查询真实地址可以快速简易翻墙 国内可以访问 https://tool.chinaz.com/dns/ 查询 Reference google dns
css text-overflow中与block中使用方式略有不同， 此处记录下。 背景 文本无法overflow本质原因是flex布局下子元素非直接文本导致， 如果直接文本和普通block没有区别。 以上能正常 但是， 若flex下存在子元素如下 解决方案 使用 Reference issue produce
背景 在移动设备中， 右对齐弹性布局 会导致水平滚动失效。可以通过如下方式修复 不使用，用替代 另外可以通过设置 direction: rtl 实现， 但实际不实用 Reference overflow-auto-not-working-with-justify-content-flex-end
在触摸设备中滚动和 touch 其实是同时触发的，这在实际编程中带来了很多不便。css 中用于控制触控的行为 usage none 禁用所有的手势操作， 由开发者自己控制滚动。 常用于在移动设备中实现拖拽能力 或者 事件中默认无法通过使用 e.preventDefault() 禁用滚动，必须设置此 css 才可以解决， 详见 auto 默认值 reference scrolling-intervention
程序架构设计或多或少需要流程图，流程图的绘制因人而异。 使用 markdown 能用接近于编程的视角绘制流程图，更能体验逻辑正确. 本文主要基于 mermaid 绘制流程图 安装 mermaid 提供多种安装方式, 一般与 markdown 解析器能都完美集成。 当前博客基于 gatsby 实现，通过插件即可直接接入 画法 详细的教程在官网有说明，这里只介绍一些通用的规则 第一行用去声明图类型 则为线框图, 如果后续有参数如 表明是改图标的参数 graph class…
背景 最近在阅读一些底层库时，发现都会使用操作符，而不是。 和我个人经验略有区别，故查询了些资料，作为 2 者对比。 共同点 都支持es6 symbol 不同点 操作符会返回 true 原型链中的属性, 不会。所以, 无法获取 es6 中 class getter, settor 中的字段 主要区别如下表 in hasOwnProperty Symbols ✅ ✅ inherited properties ✅ ❌ es6 getter/setters…
什么是 cookie? cookie 是后端可以存储在用户浏览器中的微小数据块。用户跟踪、个性化以及最重要的身份验证是 cookies 最常见的用例。 Cookie 有很多隐私问题，多年来一直受到严格的监管 在这篇文章中，我将主要关注技术方面：您将学习如何在前端和后端创建、使用和使用 http cookie。 配置后端服务 使用 express 搭建简易后端服务 你将会启动一个 web 服务，通过访问 localhost:3000 会看到页面内容如下 谁能设置 cookie…
前言 react hooks 底层机制参考了 algebraic effects，但在网上搜索这个词汇，大多都是偏学术的，我不擅长谈论学术，只能根据个人经验对 algebraic effects 做一些相关思考 什么是algebraic effects 简单来说， 其实就是 的一种变体。 algebraic effects 主要解决2个问题 抛错后无法继续执行 上述代码若入参缺失， 会直接停止执行， 导致后续 方法不被执行。algebraic effects…
背景 最近读到Dan Abramov的一篇文章, 提到 , 深有同感。 在我刚开始学习编程时，似乎对任意代码都迫切的希望重构它，以展现自己学到的新东西，虽然有时候的确成功了，但是在重构之后，总会有一些没有考虑到的问题出现，为此总是懊恼，如何才能下次避免。 想法的由来 这些不停优化的想法来源于学校, 老师总是告诉学生不要重复自己(DRY…
背景 用于将特定的 commit 合并到分支，是以一个 commit 为维度。故一般用于将其他分支固定内容 合并到 master, 常用于临时发布或者 hotfix。 merge 是以一个分支为维度 usage 或者仅仅将内容 add, 不进行 commit Reference git cherry pick
背景 无法执行git pull , 报类似于 usage 由于本地和远程 origin冲突，故需要删除本地下.git/refs/remotes/origin下的所有文件 一般这个问题发生在windows中，mac我暂无出现过。 Reference github issue
背景 本文主要介绍一下 react hooks 在开发中基础用法。内容按照方法归纳，使用方式可以想见官方文档，主要以 技巧为主 技巧 所有 hooks 严禁动态添加 react hook 实现原理类似于事件注册机制, 在组件首次初始化时会确定顺序，不可改动。 hooks 依赖中来自组件外或 setState 可以不写入依赖 在组件中的 setState 在 react 内部保证了 immutable hooks useState 与 class 组件中 state…
问题描述 今天突然发现所有 input 输入框无法输入， 初步排查原因是会自动失去焦点 原因 添加了 user-select 的样式 ios 若改值设为 user-select: none; 那么会导致无法选中的情况。 android 没有问题 方案 重新设置 css Reference input-field-ios-safari-bug-cant-type-in-any-text webkit-issue
现代前端构建工具层出不穷，webpack 是当前最流行的构建工具。但是如果希望打造高效可靠的前端工程，必须根据需求思考这些 工具的优缺点。 webpack 简单易用，需要了解一些前端基础构建流程，简单配置即可达到可用状态。webpack 其实为资源打包器, 在复杂项目中，需要通过各种 loader 相互协作对不对资源进行处理 实现项目构建。webpack…
systemjs 背景 与传统 webpack 开发时构建不同, systemjs 着重于运行时构建。故 systemjs 更适合大规模零散开发集成项目。 systemjs 历史其实比 webpack 更久远, 最早用于 angularjs 模块集成。最近由于 chrome 最新版本支持一下子重新受到了关注 特性介绍 运行时加载 systemjs 类似于 amd…
背景 react 我最喜欢使用什么状态管理库？这里是我对现有流行开源库的理解和比较 setState 对新人最友好,最简单的。在 16.8 之后 出现解决了 react 组件模板过多的问题，大幅减少 了代码量，但是在复杂组件中与 class 模式相比代码相对难以维护 优点 简单易用 不依靠 react 版本 适合 ui 组件开发(0 外部依赖) 缺点 代码冗余且丑陋 state 和 prop 逻辑冲突 state 入门容易，用好很难 context…
背景 我需要从 git 下载一个模板, 但是又不像要.git 文件。 usage git 本身不支持该功能，但是可以通过 rm 手动移除 不是必须的但是可以尽量减少下载的内容量
我作为新人对中小型公司与大公司的区别 背景: 最近由于职业发展来到了一家一线的互联网公司, 入职 1 个月，给我的总体感受是压力山大,真正的挑战与机遇并存。 我在老东家要做的事情 早 9 晚 6，固定双休，0 加班 编码，每天平均大概 2 小时 技术自由建设，只服务我个人 我在新东家要做的事情 早 9 晚 9，固定双休 白天开会，晚上编码 轮子已经完善，开箱即用 相较于老东家，新东家每天都是忙忙碌碌的。工作都是充实的，业务压力山大。挑战与机遇并存 Reference Why…
背景 最近遇到一个线上解码 bug, 默认的 转码乱码，初步查明原因是因为 仅支持编码，而我们使用的底层库返回的为(unit8Array)数据 解决办法 使用实验阶段的 处于实验阶段, ie 浏览器需要使用 polyfill Reference The Encoding Standard defines encodings and their JavaScript API polyfill encoding api String.fromCharCode
背景 我需要回滚在许久之前被废弃的模块。 usage 通过 git GUI 很难查看一个被删除文件/目录的 git 历史记录，故只能使用命令行 这应该是极少遇到的情况 然后就可以通过 gui 回滚对应文件 个人更倾向于使用 GUI 操作 git, 因为对我而言, GUI 更精准且易用。但是 GUI 只能适用于大多数场景，特殊场景只能用命令行解决。另外，我不惧怕深入一样东西, 前提是是否值得。 Reference How to Recover a Deleted File…
常用命令集合 Commands Command Description Install a package Remove/Uninstall a package Upgrade a package --- --- Unlink Link Change versions --- --- See what versions you have More package commands Command Description List versions…
在 mogul 实现image 组件懒加载图片时, 第一次接触到该 API, 当时由于开发紧张，故没有深入研究，现在有点空余时间，深入研究一下 Intersection Observer API 用途 图片,内容懒加载 窗口无限滚动(当滚动到页面底部时, 自动加载更多资源,实现无限滚动) 以前我通常使用监听滚动时间, 然后基于 和 综合判定是否需要加载更多资源 react…
背景 前端业务系统遇到性能问题主要有 3 种 网络请求过多 dom 滥用 Big O notation 数组循环 算法过多 本文主要解决 Big O notation 问题 另外 2 种情况 , 的问题，我会另外写一篇文章总结 在实际业务中, 往往从服务端获取的数据不是真正 UI 想要的，故必须对数据进行一个操作(过滤，排序，格式化等)。然而, UI…
背景 wireframes中文为线框图。线框图主要用于页面框架设计, 完成具体目的 Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. wireframes…
过年在家，闲来无事，总结一下我为什么使用 react 的原因。 背景 起初, 使用 react 的原因很简单：公司项目需要迭代, 原有技术(jquery)已无法满足需求, 故需要切换为更现代的框架技术(angular, react, vue, knockout)。 由于小公司，没有能力做不同框架之间的调研，只能通过查询科技新闻(2015)，选择了 react。现在回想起来, 盲选的结果不错。 现在个人认为: 重大核心技术选择, 需要以大厂、开源、Do One Thing…
背景 我最终打算将我的项目慢慢向 typescript 迁移了，不是因为原生 javascript 不好，而是遇到了其无法解决的问题。如下是我总结的原因 手写文档太痛苦 我当前使用手动写文件来实现客户端代码的自动补全和提示, 这种方式不论在 webstorm, 还是 vscode,效果相当不错。起初，这没有什么问题。但是随着版本的迭代, 我发现如若修改一点点的内容，我必须手动 去修改相关文档。而这原因导致我多次重新发布版本。故我希望将文档和代码合并, typescript…
背景 在现代持续构建系统中, 都是使用私钥登陆。最近在使用这种方式登录时, 遇到无法登录的情况。最后了解原因是自己对 ssh 理解不够所致。 重现方式 这这篇外网的资料中有完整的教程， 如何使用私钥登陆,如何您在一台全新机器中使用 生成 ssh 私钥, 然后按照上述教程操作，你会发现无法登陆服务器。 troubleshot 起初, 我认为 ssh 使用私钥登陆 linux 时, 只要与服务器的 .ssh/id_rsa…
个人 docker-compose 笔记 Basic config example Common commands Config file reference Building Ports Commands Environment variables Dependencies Other options Advanced features Labels DNS servers Devices External links Hosts Network External…
API keys vs OAuth vs Jwt API Keys: 适用于开发者快速开发 早先在现代 API 中, 只有 API Keys。 API Keys 是所有实现中最简单的。你只要登录你的服务，找到 API Keys, 接下来就是超级管理员了。 OAuth Tokens: 适用于获取用户数据 OAuth 不需要用户登录服务中获取当前的 API Keys, 用户只要使用现有的账号登录即可。例如使用 Google 账号登录 Postman…
背景 最近在做一个服务集成的项目，需要将一个第三方的日志服务系统直接接入我们现有的日志系统中，第三方服务支持Bearer授权访问，故 最后解决方案是前端直接调用第三方服务获取数据。但是遇到了鉴权的问题, 最后获知是导致的 Origin 的来源和作用 经查询资料, Origin是Referer头的升级版, 常用于CORS或者非、请求(MDN 的说法有误，不是只有 )相关的服务端身份检验 个人觉得，这个 Origin 头绝大部分都用于 CORS FAQ…
背景 最近手头项目不多，抽空将公司底层的一些代码重构了一下，试着想要加入单元测试(unit test)，之前总听大神说单元测试多么好，但是一直没空了解。当前总共有 2 中测试模式, TDD 和 BDD， 这里总结一下他们之间的优势和缺点。 TDD TDD(Test-driven development…
在 es6 import 在 babel 转换后会变成 node 的 require。这点大家都知道。同时, 大家对 required 的机制只有大致了解。 例如, , 会获取 node_modules 下的 jquery。但是获取的具体规则却不是很了解。 require 规则 resolve 规则 如何解析路径的规则 X 是核心模块(core modules) 如果 X 是核心模块, 例如 fs, path, 那么直接返回核心模块 X 是第三方模块(thrid party…
es7 的 Proxy 虽然问世很久了, 但是在实际业务开发中很少使用。对他一直了解很少。这次通过深入了解响应式编程,顺便深入学习一下 Proxy。 Proxy 主要用于控制一个对象变量的增删改查的行为(取值, 赋值, 枚举, 方法调用等) 不推荐在常规业务代码中使用 usage : 监听的对应, 通常是一个 object 对象 : 相关(陷阱)集合, 类似于 React 中的生命周期 有很多相关方法, 精力有限不能一一讲解，主要解释一下响应式编程需要用到的几个 traps…
最近在做一个内部工具项目时，需要前端根据情况请求不同接口地址, 但是后端接口不支持跨域访问，故只能通过 nginx 代理 nginx 配置 必须启用， nginx 会读取自定义 header monitor_proxy_api 在 ajax 请求中, 只要携带请求头 monitor_proxy_api 即可将其值代理 Reference nginx-passing-back-custom-header
nginx 是前端常用的服务器, 配置 location 是一项必须掌握的技能。如下是我整理的一些常用 location 常用配置 单页面配置 proxy location nginx location 共有 可选前缀方式。 假如有如下配置 如果没有任何 prefix, 当所有其他路由都不满足时，会执行配置 会使用严格模式,只有当请求为”/“时才访问。并且其优先级最高 ，的区别为:是大小写不敏感(case-insensitive), 大小写敏感(case-sensitive…
背景 npm scripts存在很多脚本, 例如 , 等等。但是 npm 还支持很多在 package.json 中定义的 hooks 脚本 这里介绍一下常用的脚本 prepublishOnly 适用于执行 npm publish 之前, 你需要运行脚本, 例如构建代码 prepare 适用于执行 npm publish 或者 npm install, 我当前没有想到什么好的应用场景。 postpublish 用于 npm publish…
你也许注意到,有时我们访问网站, 也许会出现样式破裂, 或者报错的情况。通常, 导致这些问题的原因是错误的使用 cache control policy…
问题描述 由于历史或者误操作原因, 可能很多人会将一些个人配置文件加入 git。后期优化代码时, 又将这些文件放入 中 你会发现这些 ignore 的文件依然还会被 git 跟踪，故使用如下方法可以完美解决 例如 : 它会将所有.idea 配置文件全部删除(不会删除实体文件,只是删除 git 缓存) Reference How to make Git “forget” about a file that was tracked but is now in .gitignore…
在研究 create-react-app 源码之中, 已经了解到其所用的 webpack-dev-server 插件内部使用 proxy-http-middleware 作为 proxy 工具, 但是最近遇到一个问题，行为表现和 proxy-http-middleware 不一致。经过研究, 最后整理如下 问题描述 存在如下代理 查询 http-proxy-middleware…
最近一直在折腾构建, 遇到很多 yaml 配置文件。但是我对 yaml 不是很熟悉, 经过一些简单学习有了一些初步的个人见解, 如有不对, 请指正 YAML YAML 在配置文件广泛的使用, 其主要优势 允许注释: yaml 相较于 json 最大的优势 self reference: 使用anchors实现 没有一堆无意思的标识符, 例如 , , JSON JSON 格式在前端非常普遍, 它属于 YAML 的一个子集 serialization: 可序列化(这对 API…
package.json 中存在一些特殊字段, main,jsnext:main,module 的区别。经常使用 npm 发布包时会用到他们。 但很多人无法理解具体区别，故在此阐明。 main: main 字段指明包的入口文件位置,默认 index.js。这里的文件应该放置 commonJs(cjs)模块, 如果源码需要被编译才能使用,那么此处的文件就必须已经被编译了 jsnext:main: 有一些工具,例如 webpack…
LLVM是一组模块化和重用编译和工具链技术, LLVM 使得开发中能够简单的创造编程语言。 当我们首次见到React, 它介绍他是。当你深入了解其内部,React同样也可以被称为LLVM用来构建UI。它让开发中能够简单的构建声明式UI。 如果你问为什么你要使用声明式UI, 因为他更容易阅读,编写, 管理和测试，以及深度测试(100%单元测试), 手动管理更新UI是笨重和容易出错的, 但是类似于React的工具能够做的更好。 React一开始用于web…
背景 程序员学会翻墙是必备的技能之一, 但是这2年以来,vpn基本被封杀完了，所以只能自己动手使用shadowsocks搭建服务。 安装条件 1台可以访问google的linux服务器 安装 服务器端 我们使用配置文件启动 然后写入如下内容 然后启动服务 启动服务 停止服务 然后你的服务就安装完成了 客户端 安装对应操作系统下的客户端,以mac为例 安装完成后, 打开服务器, 然后按照上方config.json配置中的内容，输入相关信息后, 即可访问google…
最近需要使用 Hapi 开发一些后端的相关东西, 但是 nodejs 的 require 让我很不爽, 故查询了一些办法能够直接使用 es7 import 语法 目标: 在代码中使用 使用的是前端思维, 不知道有没有其他更好的办法 require nodejs: v8+ yarn/npm 安装 @babel/core : babel 核心 @babel/polyfill : 一些语法的 polyfill @babel/register : @babel/core…
背景 接触 react 差不多快 3 年了, 一直都是用的客户端渲染, 最新在做个人博客网站,所以对 react 服务端渲染进行了初步调研, 总结一下该何时使用 ssr SEO: 搜索引擎优化 数据预处理页面: 例如 个人博客, 门户首页, 产品宣传页面, 高访问量页面 SEO 众所周知, react 项目由纯 javascript…
前言 本文主要介绍 , 使用版本 前端开发会遇到一种棘手的情况: 渲染大量数据。首先, 这种情况要分析是否可以避免, 大致有如下的方式: 服务端分页 减少一次返回的数据，前端可以使用列表或者表格的形式展现, 表格展示一般使用分页, 列表的话, 监听 onscroll 事件, 当快触底时, 加载更多数据 前端假分页 获取的数据也许是第三方的数据,没有提供切片相关的接口, 只能前端分页。适用方式和服务端很类似,表格和列表均可适用(列表使用有点会有点奇怪) 图表渲染 svg…
是一个固定的代码格式化程序。如果您再也不想担心代码格式化，请在编辑器中安装 Prettier，它将为您处理格式化。 Prettier 从您的代码中创建一个抽象语法树，并使用它来编写根据一组规则格式化的新代码。 这是我安装 , , 的过程, 目标自动格式化代码,统一团队开发规范 安装版本为: (v1.15.3), (v1.3.1), (v8.1.0)，(2018.3.2)不同版本也许会不一致 安装 prettier webstorm…
背景 因为之前一直在 windows系统上,shell很少接触。但是最近切换到了macos, 发现不熟悉shell做事没有效率。故只能学习一下。 这是我从 devhints复制的 shell 学习资料, 用作记录。 shell里面 基本 必须出现在每一个shell脚本之前 Variables 定义变量 String quotes 字符串 Shell execution 字符串中引用变量 See Command substitution Conditional…
最后, 查看 这里定义了整个CRA需要用到的路径 这里面情况很特殊, CRA 存在一种eject的情况, 会把所有配置暴露出来, 让用户自己修改。故我会忽略eject的情况, 代码会变成如下： 不考虑 eject 后的path代码
webpack配置解析 承接上篇create-react-app 源代码简析(1) 是整个 CRA 的核心。这一版本 CRA 将开发和生产的 webpack.config 合 2 为 1, 虽然精简了代码量, 但使得阅读难度大大提升 变量设置, 组件引用 CRA 中 webpack.config.js 配置说明说的很完善, 我只会添加一些个人见解和简单翻译 这篇webpack配置可以算是webpack的经典配置, 包含大量的插件使用, 非常适合收藏
centos阿里云服务器登录警告 如何解决: 在文件 添加这2行 l
前言 简称为 , 之后均用 表示 是个多包仓库, 我 fork 了一份(地址), 以便追溯。 核心包: 简析版本为, 发布日期为 2018-11-01 由于我不熟悉, 故相关部分会会不准确,请见谅！ 是功能强大的自动化前端构建工具, 但是配置复杂多变。将配置隐藏起来,适合新入门的开发者。 另外一种使用场景为需要同时在多个项目中开发, 又想保证不同项目配置统一, 是一种不错的选择。为了能在工作中用好, 所以需要深入了解去实现源码,故作此笔记。 项目目录介绍 整个 CRA…
目标: 我想要从电脑A(Alice)自动登录到某台linux服务器B(Bob), 不需要密码. 因为你需要在CI环境下运行脚本 怎么做 首先需要登录电脑A， 生成一个ssh key, 注意不要输入 然后需要将上面生成的 添加到服务器B中 现在你就可以不用密码从A登录B
背景 最近由于公司需求, 需要向 npm 推送不少包, 但是包的版本管理很麻烦。于是就寻找有没有什么高级一点的办法，首选是自己写脚本, 然后发现了 semantic-release semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes and…
背景 css-in-js 在 react 中非常流行, 本文主要介绍如下几种，基本能覆盖当前前端环境下主流 css-in-js 方案 css-modules styled-components jss radium css-in-js 优势 所有的样式全部组件化, 符合 react 的设计思维 使用 js 代替其他预处理工具, 充分发挥 js 的能力。 避免全局变量样式冲突 code split css 代码分割能够按照 js 逻辑分割，不需要编写额外的 css…