ssh
## 前言 最近在业务的开发中，业务方需要我们性能监控平台提供火焰图来展示函数堆栈以及相关的耗时信息。 根据 Brendan Gregg 在 [FlameGraph](http://www.brendangregg.com/flamegraphs.html) 主页中的定义： > Flame graphs are a visualization of profiled software, allowing the most frequent code-paths to be identified quickly and accurately >...
> 原文地址：https://sebastienlorber.com/atomic-css-in-js > > 翻译 / 润色：ssh 随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:**Atomic CSS-in-JS**。 在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。 由于我不是这方面的专家，所以我不会去深入探讨它的利弊。我只是希望能帮助你了解它的大致内容。 先抛出一个令人开心的结论，新的 CSS 编写和构建方式让 Facebook 的主页**减少了 80% 的 CSS...
## 前言 我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧去进行性能优化，或者更好的代码组织。 性能优化的重要性不用多说，谷歌发布的很多调研精确的展示了性能对于网站留存率的影响，而代码组织优化则关系到后续的维护成本，以及你同事维护你代码时候“口吐芬芳”的频率 😁，本篇文章看完，你一定会有所收获。 > 本文首发于「**前端从进阶到入院**」。关注我，带你进阶~ ## 神奇的 children 我们有一个需求，需要通过 Provider 传递一些主题信息给子组件： 看这样一段代码： ```js import React, { useContext, useState } from 'react'; const ThemeContext...
相信有不少小伙伴和我一样用github issues记录自己的blog，但是久而久之也发现了一些小问题，比如 - 国内访问速度比较慢 - 不能自定义主题样式等等 - 不能在博客中加入自己想要的功能 正好最近又在学nextjs，react做ssr的神器，nextjs提供了`next export`这个命令，如果不熟悉next小伙伴可以先去官网阅读一下 https://nextjs.org/docs#static-html-export nextjs的教程，推荐一下技术胖的免费视频教程 http://jspang.com/posts/2019/09/01/react-nextjs.html#p02%EF%BC%9Acreact-next-app%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BAnext-js%E9%A1%B9%E7%9B%AE 这个命令可以把react项目导出成静态html页面，这样在性能和seo方面考虑都是最优解。配合这个命令我就有了个折腾的想法，能不能把github issues导入到项目里，然后配合这个命令生成我的静态html博客呢。 ## 目标 配合nextjs实现一个命令把自己的github issues里的文章导出成自己的博客html页面。 这样的好处是 - 可以折腾 - 可以折腾 - 可以折腾 开玩笑的，真正的好处是 - 编写博客时可以利用github完善的编辑器。 -...
## 前言 我工作中的技术栈主要是 `React + TypeScript`，这篇文章我想总结一下如何在项目中运用 React 的一些技巧解决一些实际问题，本文中使用的代码都是简化后的，不代表生产环境。生产环境的代码肯定比文中的例子要复杂很多，但是简化后的思想应该是相通的。 ## 取消请求 React 中当前正在发出请求的组件从页面上卸载了，理想情况下这个请求也应该取消掉，那么如何把请求的取消和页面的卸载关联在一起呢？ 这里要考虑利用 useEffect 传入函数的返回值： ```js useEffect(() => { return () => { // 页面卸载时执行 }; }, []); ``` 假设我们的请求是利用...
## 前言 在大型项目开发中，经常会遇到这样一个场景，QA 丢给你一个出问题的链接，但是你完全不知道这个页面 & 组件对应的文件位置。 这时候如果可以**点击页面上的组件，在 VSCode 中自动跳转到对应文件，并定位到对应行号**岂不美哉？ [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) 就是应此需求而生。 使用非常简单方便，看完这张动图你就秒懂：  可以在 [预览网站](https://react-dev-inspector.zthxxx.me/) 体验一下。 ## 使用方式 简单来说就是三步： 1. **构建时**： - 需要加一个 `webpack loader` 去遍历编译前的的 `AST` 节点，在 DOM 节点上加上文件路径、名称等相关的信息...
## 前言 本文是 [Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19)](https://www.youtube.com/watch?v=k-A2VfuUROg&feature=youtu.be&t=1036) 这篇谷歌工程师带来的现代应用架构体系下的优化相关演讲的总结，演讲介绍了以下优化手段： - 预渲染 - 同构渲染 - 流式渲染 - **渐进式注水**（非常精彩） ## 应用架构体系 当我们讨论「应用架构」的时候，可以理解为通过以下几个部分组合来构建网站。 1. `Component model`...
字节跳动招人啦，实习和社招都有。可以选择你想要的业务线投递即可，内推简历通过率很高哦。各个部门都可以选择。 推荐我们的部门 Client Infrastructure，是字节跳动终端基础架构团队，面向字节跳动全业务线的移动端、Web、Desktop 等终端业务的基础架构部门，为公司业务的高效迭代，质量保证和研发效率和体验提供平台、工具、框架和专项技术能力支撑。研发领域包括但不限于 APP 框架和基础组件、研发体系、自动化测试、APM、跨平台框架、端智能解决方案、Web 开发引擎、Node.js 基建以及下一代移动开发技术的预研等，目前在北京、上海、广州、深圳、杭州五地都均设有研发中心。 ### 你可以做什么？ 我们能提供广阔的舞台让你的才华创造更大的价值： - 可以打造高可用的监控体系为全球化海量 App 保驾护航； - 你可以为字节跳动全系产品搭建高效一体化的研发平台和工具链； - 你可以钻研跨平台技术（Flutter）/插件热修/底层架构为全球全线 App 创造技术新突破； - 可以创造基础组件/基础库/中间件为数亿级用户量的 App 提供支撑； - 甚至你还可以自带创意，开创属于自己的移动中台方向！ - 不限于此，只要你酷爱技术，对技术有执着的追求，聪明上进，那么你就是我们所追寻的人才。欢迎加入我们，一起开建设全球顶尖的移动端技术平台，将字节跳动移动端研发质量、效率、体验提升到业界领先水平。...
中文技术文章阅读
记录一些让自己受益匪浅的文章。 https://developers.google.com/web/fundamentals/performance/why-performance-matters 谷歌性能优化文章 https://juejin.im/post/5c8a518ee51d455e4d719e2e 巧用 TypeScript系列 https://zhongsp.gitbooks.io/typescript-handbook/content/ TypeScript Handbook（中文版） 翻译好，内容全面，优于下面的教程。 https://github.com/joye61/typescript-tutorial 浅显易懂的TypeScript入门教程 https://juejin.im/post/5d9eff686fb9a04de04d8367 Vue3响应式系统源码解析-Ref篇 https://juejin.im/post/5da9d7ebf265da5bbb1e52b7 Vue3响应式源码解析-Reactive篇 https://juejin.im/post/5db1d965f265da4d4a305926 Vue3响应式源码解析-Effect篇 https://zhuanlan.zhihu.com/p/40311981 TS 一些工具泛型的使用及其实现 这篇文章记录了一些我对TS的偏门语法的疑惑点，非常推荐！ https://segmentfault.com/a/1190000015326439 TypeScript + React 实现一些复杂类型的React组件 对于TypeScript在React中的进阶用法受益良多。 https://juejin.im/post/5dc820a3e51d4509320d084d 在React中实现vue-composition-api...
## 导读 记得初学Vue源码的时候，在`defineReactive`、`Observer`、`Dep`、`Watcher`等等内部设计源码之间跳来跳去，发现再也绕不出来了。Vue发展了很久，很多fix和feature的增加让内部源码越来越庞大，太多的边界情况和优化设计掩盖了原本精简的代码设计，让新手阅读源码变得越来越困难，但是面试的时候，Vue的响应式原理几乎成了Vue技术栈的公司面试中高级前端必问的点之一。 这篇文章通过自己实现一个响应式系统，尽量还原和Vue内部源码同样结构，但是剔除掉和渲染、优化等等相关的代码，来最低成本的学习Vue的响应式原理。 ## 预览 源码地址： https://github.com/sl1673495/vue-reactive 预览地址： https://sl1673495.github.io/vue-reactive/ ## reactive Vue最常用的就是响应式的data了，通过在vue中定义 ```js new Vue({ data() { return { msg: 'Hello World' } } }) ``` 在data发生改变的时候，视图也会更新，在这篇文章里我把对data部分的处理单独提取成一个api：`reactive`，下面来一起实现这个api。 要实现的效果： ```js...