YITA90的专栏

原创 《只管去做》读书笔记

原创 《情绪急救》读书笔记

原创 《金字塔原理》读书笔记

翻译 如何将你的项目迁移成 TypeScript

我们都曾遇到过，一个 JavaScript 开发的项目，发现了一个 bug， 调试了半天，发现问题原因是 undefined is not a function。我个人很喜欢 JavaScript，但随着项目功能的增多，代码会越来越多，某些问题会一次又一次地出现。 为了避免 undefined is not a function 类似 bug，我们可以为类型加定义。TypeScript就是来帮助我...

翻译 服务器计时 - 如何查看 iPlayer 的性能

对于用户来说，了解 BBC iPlayer 网站的加载时长，一直是一个巨大的挑战。幸运的是，浏览器目前有一系列功能可以帮我们弄清楚这件事。开发者工具在分析和监控浏览器性能方面特别有效，但是缺乏足够的方法来显示在从服务器接收响应之前花费的时间， 这就给了“服务器计时”挽救这一问题有了用武之地。这项功能已经开发了一段时间了，官方的 W3C 版本应用在 Chrome 65上，该版本于上周3月6日发布。...

翻译 分析一个React应用程序的性能

如何使用 React DevTools 和 React 的 Profile 来正确分析生产应用程序。The React DevTools是一款非常棒的软件，而且可以作为 Chrome 和 Firefox 的浏览器扩展，便于在随时随地链接 React 应用。React DevTools 最酷的功能之一就是它的分析功能。profiler 包括很多东西，本文不一一列举，但是会教你如何开始使用 Re...

翻译 什么是 TTFB, 为什么 TTFB 很重要

原文地址：https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/目录什么是TTFB神秘的TTFB我现在正在做一个客户项目，因为他们是一个电子商务网站，所以有很多方面的性能都需要关注：加载时间是一个重要的开始。开始渲染是用户快速查看信息的关键。（提示：这就是全部...

翻译 教你玩转数组 reduce

reduce 是数组迭代器里的瑞士军刀。 它强大到您可以使用它去构建大多数其他数组迭代器方法，例如.map()、.filter() 及 .flatmap ()。在这篇文章中，我们将带你用它来做一些更有趣的事情。 阅读前，我们需要您对数组迭代器方法有一定的了解。Reduce是迄今为止发现的最通用的功能之一Eric Elliott使用 reduce 做加法乘法还可以，可一旦要超出现有基础示例...

翻译 Netflix Web 性能案例研究

对于网页性能来说，没有完美的解决方案。简单的静态页面可以通过精简 Javascript 代码，进行服务端渲染来提高效率。复杂页面可以通过引用库，来提高。Netflix 是最受欢迎的视频流服务之一。自2016年在全球化以来，公司发现许多新用户不仅使用移动设备进行注册，而且还使用不太理想的设备进行登录。通过改进用于 Netflix.com 注册流程，使用预请求 JavaScript 的技术，开发人...

翻译 一个用于解决 React 常见问题的 Checklist

原文地址：https://logrocket-blog.ghost.io/death-by-a-thousand-cuts-a-checklist-for-eliminating-common-react-performance-issues/这是一份非常实用的，一步步解决 React 性能问题的清单。你想不想让你的 React 应用程序运行更快？想不想有一份清单来检查常见的 React...

翻译 使用 CSS Grid 实现表单布局的优势

表单布局和设计一直是网页设计和开发中令人头疼的一部分。 尝试过写 <select> 标签的样式，或者在所有浏览器中都居中一个 label 的人感触肯定更深。原文链接：https://www.sitepoint.com/css-grid-web-form-layout/在2016年，我写了一篇文章标题为 "Make Forms Fun with Flexbox"，文中指出了如何使...

原创 《情绪决定命运，不完美才美》读书笔记

情绪七步梳理法

原创 《高情商沟通术》读书笔记

高情商沟通术：

翻译 【译】页面生命周期API

‌ 现代浏览器有时在系统资源受限时，会出现页面卡死或完全丢弃页面的情况。 在未来，浏览器希望让用户可以消耗更少的资源和内存，更加积极主动地做这件事。页面生命周期 API，运行在 Chrome 68 中，提供了生命周期的钩子，你可以在不影响用户体验的情况下，安全的去处理浏览器响应。 接下来我们就详细的了解一下这个 API，看看你是否会在应用中尝试使用这些特性。 ​ 原文链接：https:...

原创 JS 基础知识整理

构造函数面向对象改变 thisJS 面向对象原型

翻译 ECMAScript 2016, 2017, 2018 新特性之必读篇

原文链接地址：https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70eJavaScript (ECMAScript). 版本的频繁更新，让我们很难去跟进又新增了哪些新特性。就不要说，找一些实用的代码示例。但在这篇文...

翻译 使用设备检测（Device detection）的 JS 服务端渲染（SSR）

原文链接：https://mobiforge.com/design-development/javascript-server-side-rendering-with-device-detection服务器端渲染有何优势？自从由 JavaScript 框架负责页面渲染后，就出现了在生成页面之前，需要下载和执行一大堆 JavaScript 来获取资源的问题。在移动设备处于弱网情况下的时候，或者老旧的

翻译 Base64 编码和性能，第 2 部分

原文链接： https://csswizardry.com/2017/02/base64-encoding-and-performance-part-2/这是这篇文章的第 2 部分。阅读第 1 部分。阅读这篇文章之前我会默认你已经阅读过第一部分。如果没有，我建议你先去阅读一下第一部分。在样式表中插入 Base64 编码的内容资源（主要是图片）引起争议之后，我决定收集一些数据。 我做了一个简单的测

翻译 Base64 编码和性能，第 1 部分

原文链接：https://csswizardry.com/2017/02/base64-encoding-and-performance/作者：Harry Roberts 来源：CSS Wizardry本文一共分为两篇。阅读第 2 部分。几年前我们只是单纯的考虑，“减少请求数量”，使页面加载速度更快。虽然这是一个合理化的建议，但实际上，我们还可以通过合理的分配资源的请求数，来达到我们的目的。Ba

翻译 元素查询：未来的响应式设计

原文链接：https://webdesign.tutsplus.com/tutorials/element-queries-the-future-of-responsive-web-design–cms-26945媒体查询是现代网页设计的重要组成部分，但他并不总是完美的。在这篇文章中，我们将看看许多人一直在争论的关于响应网页设计的未来 “元素查询” 的理念 。前言Ethan关于响应式设计 的文章的

原创 大纲

微信公众平台|小程序 官方大纲学习图

翻译 如何使用CSS栅格布局创建一个简单页面布局

如何创建一个简单的布局与CSS网格布局如果你从未涉猎过印刷设计，你可能就不知道网格布局的思想起源。网格是用来定位一个页面上的设计元素的精确测量工具。这种想法经常被用来在网页上进行内容组织和统一，提升用户的视觉体验。网页设计刚起步的时候，设计和布局都是是相当简单的， 包含头部，侧边栏，内容区域和页脚。现在，随着网络的演变，网页的布局也变得更加复杂，我们也有了更多的网页设计师来摆平他们。我们经常需要大量

原创 《高难度谈话》读书笔记

《高难度谈话》笔记整理

翻译 从今天起开始使用 CSS 属性 calc()

原文地址：Getting Started With CSS calc()四年前，看了CSS3 Click Chart这篇文章之后，我第一次发现了calc() ，我当然非常高兴能够看到，基本的数学运算-加法，减法，乘法和除法-能够在CSS中应用。大部分人可能会觉着预处理就可以实现逻辑运算。但是预处理器只能同单位的运算，如角度单位，时间单位，频率单位，分辨率单元和固定长度单位。而calc()可以实现混

翻译 CSS3的nth-child选择器

原文链接：https://grack.com/blog/2015/01/09/abusing-css3-selectors/如果你对这篇文章感兴趣，可以了解更多的有关 CSS4 的知识来提升自己。CSS3的:nth-child 和 :nth-last-child 选择器的神奇之处，不仅仅是可以替代 :first-child 和 :last-child 选择器，它还可以匹配更为复杂的子元素，比如

翻译 CSS传送门

你不一定必须使用javascript才能在浏览器端构建惊心动魄的3D效果的项目。在这篇文章中，我将介绍一种纯CSS实现的复杂的动画效果。传送门在线演示地址,Github源码地址原始视频视频展示了3D动画场景的构建，美化及动画效果。这篇文章我们将使用CSS3重绘这个传送门视频。重点介绍人物从一个门穿到另一个门的过程。下面是原始视频：这个视频在第一次发布的时候，就深深的印在了我的脑海中。传送门（创始人

翻译 如何使用 PostCSS 在样式表中处理图片

原文链接： https://css-tricks.com/images-in-postcss本文摘自guest网Aleks Hudochenkov。Aleks 在这里给我们展示了POSTCSS在前端开发中，所擅长的领域。 也就是，越少的去用CSS。你即将看到各种与处理图像的PostCSS插件。最后，我敢肯定你能够想像POSTCSS在CSS中的重要性。我们平时也一直在用CSS处理图片。但我们甚至可能

原创 关于css元素居中

关于css 居中分析图

原创 客户端存储结构图

根据慕课网视频整理总结，留为己用，如有不对的地方，欢迎拍砖。