LY
LY
> [不可思议的纯 CSS 滚动进度条效果](https://github.com/chokcoco/iCSS/issues/43#issue-397226076) 问题先行，如何使用 CSS 实现下述滚动条效果？ [](https://user-images.githubusercontent.com/8554143/50879370-a5cc2900-1415-11e9-89ba-40713de326f5.gif) 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？ [](https://user-images.githubusercontent.com/8554143/50879649-a1544000-1416-11e9-826f-15bbde1346ee.png) ## 分析需求 第一眼看到这个效果，感觉这个跟随滚动动画，仅靠 CSS 是不可能完成的，因为这里涉及了页面滚动距离的计算。 如果想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。 好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点： -...
## 解决方案 直接在 `package.json` 里加 `"homepage": "."` ( since `[email protected]`) 或者 `"homepage": "http://myuser.github.io/myproject"` ## 参考文档 1. [基于create-react-app的打包后文件路径问题](https://segmentfault.com/q/1010000009672497) 2. [create-react-app CSS and JS path](https://stackoverflow.com/questions/38565538/create-react-app-css-and-js-path/)
react开发过程中，经常会需要动态向元素内添加样式style或className，那么应该如何动态添加呢？？？ ### 一、react向元素内，动态添加style 例如：有一个DIV元素， 需要动态添加一个 display:block | none 样式， 那么： ```jsx 此标签是否隐藏 ``` 或者， 多个样式写法： ```jsx 此标签是否隐藏 ``` ### 二、react向元素内，动态添加className 比如： 1、DIV标签中，没有其他class，只需要动态添加一个.active的className，来显示内容是否被选中状态，则： ```jsx 此标签是否选中 ``` 2、如果DIV标签本身有其他class，又要动态添加一个.active的className，来显示内容是否被选中状态，则： ```jsx 此标签是否选中 ``` 或者，使用ES6写法（推荐使用ES6写法）：...
- [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) - [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin) > 用于读取 `tsconfig.json` 配置文件，解决使用 `ts-loader` 使用 `alias` 的功能
### 自动切图工具 这里切图推荐一个插件：Cutterman，更多切图工具介绍请移步：[扶朕起来，朕还能切](https://w3ctrain.com/2016/07/13/cut-image/) #### [Cutterman](http://www.cutterman.cn/zh/cutterman) 是个国产的切图工具，广告语就叫“最好用的切图工具” > Cutterman致力于改善设计师的工作效率,为设计师提供优秀、高效、实用的技术解决方案, 解放双手。让创意不再有界限, 让设计更专注! - 支持多倍图 - 多种格式 - 多图层导出 - 可以设置固定大小 - 操作简单 - 免费，只需要注册个账号即可 #### 一键切图，真正解放双手 Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！ [](https://camo.githubusercontent.com/e0306a6f5d74dab8ac3a947e0568dfd18dc563a1/687474703a2f2f63646e2e6375747465726d616e2e636e2f2f6375747465726d616e2f696d616765732f6375747465726d616e2f73616d706c65312e676966) ### 几款强大的标注工具 #### 1、标你妹...
1. 移动端适配1px问题 构建1个伪元素，将它的长宽放大到2倍，边框宽度设置为1px,再以transform缩放到50% ```css .radius-border { position: relative; } @media screen and (-webkit-min-device-pixel-ratio: 2) { .radius-border:before { content: ""; pointer-events: none; /* 防止点击触发 */ box-sizing: border-box; position: absolute; width: 200%;...
> 转自 [2018大厂高级前端面试题汇总](https://github.com/yygmind/blog/issues/5) 本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。 面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。 PS：文末有GitHub链接，欢迎各位Star。 #### 阿里 - 使用过的koa2中间件 - koa-body原理 - 介绍自己写过的中间件 - 有没有涉及到Cluster - 介绍pm2 - master挂了的话pm2怎么处理 - 如何和MySQL进行通信 - React声明周期及自己的理解 - 如何配置React-Router - 路由的动态加载模块 - 服务端渲染SSR...
> 转自：[全新Chrome Devtool Performance使用指南](https://zhuanlan.zhihu.com/p/29879682) 运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。 ## **让我们开始吧** 在这篇指南中，我们会用Performance工具去分析一个现有的在线DEMO，然后教会你怎么去分析，从而找到性能瓶颈。 1. 打开Chrome的匿名模式。匿名模式可以保证Chrome在一个相对干净的环境下运行。比如说，你安装了许多chrome插件，这些插件可能会影响我们分析性能表现。 2. 在匿名模式下打开右边这个链接，[DEMO](https://googlechrome.github.io/devtools-samples/jank/)，这个网页就是我们要用来分析的DEMO。这个页面里都是很多上下移动的蓝色小方块。 3. 按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 来打开Devtools  ## **模拟移动设备的CPU** 移动设备的CPU一般比台式机和笔记本弱很多。当你想分析页面的时候，可以用CPU控制器（CPU Throttling）来模拟移动端设备CPU。 1....