2018年05月_YooHoeh

原创前端优化——预加载篇

预加载1.什么是预加载资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。2.为什么要用预加载在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就...

2018-05-31 16:38:58 32772

原创前端优化——懒加载篇

懒加载1.什么是懒加载懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。2.为什么要用懒加载能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，...

2018-05-31 16:38:43 16021 3

原创一行代码教你屏蔽你的博客广告

一行代码教你屏蔽你的博客园博客广告 “博客园”三个字加在标题会无法通过审核，看来有py交易CNBlogs（博客园）是国内知名科技类博客，博客首页可定制性是他的一大特点。博客园允许博主自己添加HTML、CSS甚至可以申请添加JS，让自己博客更有个性。但是当你点击查看博客详情的时候会发现博客页面底部被添加了广告笔者通过自己探索发现可以通过一个简单的方式屏蔽这些广告，下面是过程...

2018-05-30 23:55:40 2547

原创一步一步教你给博客主页添加自定义炫酷效果

一行代码教你屏蔽CNBlog博客广告CNBlogs（博客园）是国内知名科技类博客，博客首页可定制性是他的一大特点。博客园允许博主自己添加HTML、CSS甚至可以申请添加JS，让自己博客更有个性。笔者试过定制CSS，让我没想到竟然还支持keyframes动画，真的是很贴心了，可以让博主充分发挥自己的创意进行定制。笔者使用keyframes动画添加了掉雪糕动画笔者将在这里分享实现这...

2018-05-30 21:49:53 2296

原创让资源管理器变得像Chrome一样标签化

让资源管理器变得像Chrome一样标签化前段时间WIn10开发者预览版发布了更新通知，其中一个主要特性就是给资源管理器添加了标签化的功能。习惯了各种浏览器便捷的标签化管理，早就想要这个实用的功能了。在设置里开启预览体验计划但是呢，目前想体验这个功能必须申请微软的开发预览版身份，而且目前还没有官方中文支持版本带有这个特性，那么有没有什么办法可以提前体验到这个功能呢...

2018-05-30 19:02:14 14854 1

转载深入浅出 SVG

前言据悉，8月18号将在广州举办中国第一届React开发者大会。今日早读文章由@Starrier翻译分享。正文从这开始～SVG 是优秀且令人难以置信的强大图像格式。本教程通过简单地解释所有需要了解的知识，为您提供 SVG 的概述。介绍尽管在 21 世纪初被标准化了，SVG（Scalable Vector Graphics的缩写）是近年来的一个热门话题。SVG 已经被...

2018-05-30 11:05:55 828

翻译雅虎军规——网页开发35条准则

Make Fewer HTTP Requests 减少HTTP请求Use a Content Delivery Network (CDN) 使用内容分发网络（CDN）Add Expires or Cache-Control Header 添加过期或缓存控制标题Gzip Components Gzip组件Put Stylesheets at Top 将样式表放置在顶部Put Scrip...

2018-05-29 17:47:18 2213

原创解放F5——React开启模块热更新

解放F5——React开启模块热更新在一个正在开发的应用中，刷新页面将会降低你的生产效率：你必须得等待页面加载完毕。一个大的应用可能会花很多秒钟才能刷新完页面。使用 HMR（模块热替换）可以避免这个缺点。使用 HMR 最大的好处是你可以保持应用的状态。设想你的应用中有一个对话框，其中包含很多步骤，而现在你正在第三步当中，基本上这就特别奇怪。如果没有 HMR 的话，当你更改源代码的时...

2018-05-29 16:50:15 1277

先简短的介绍一下我自己吧，我是一个前端学习者，虽然我基础知识也学了比较好，但是许久不用的知识就像流失的水，很容易就忘。在这次蚂蚁金服的电话面试里面认识到了自己很多不足的地方吧。虽然在阿里内推后的人才观的问题里面我觉得自己做的还是很不错的，但是在真正的编程题里面，才发现自己的编程其实需要更加的提升。接下来就分析一下这次蚂蚁金服的电话面试的题目吧，其实这些题目我也都知道基本的答案，但是回答的时候终...

2018-05-29 16:36:13 7313

原创多角度对比 ES5与ES6的区别

ES5与ES6的对比不同点整理1.Default Parameters（默认参数）es6之前，定义默认参数的方法是在一个方法内部定义var link = function (height, color, url) { var height = height || 50; var color = color || ‘red‘; var url = ...

2018-05-28 21:54:42 1959

转载 fetch添加超时时间

fetch添加超时时间其实为fetch添加超时时间很简单,需要用到Promise.race()方法.Promise.race() 方法将多个Promise包装成一个新的Promise实例.var p = Promise.race([p1,p2,p3]);上面的代码中,只要p1,p2,p3中有一个实例先改变状态,p的状态就跟着改变,而那个率先改变的Promise实例返回值就传递给...

2018-05-28 13:39:37 5778

转载程序员玩的游戏

程序员在忙完一天的工作(编码)以后，适当的放松一下自己，玩玩游戏，锻炼身体等等。下面我给大家推荐一些程序员玩的游戏。希望大家可以放松心情。Robocode这款游戏相信很多程序员都知道。游戏主页:http://robocode.sourceforge.net/ Robocode是2001年7月在美国IBM 的Web alphaWorks上发布的坦克机器人战斗仿真引擎。与通常玩的游...

2018-05-27 21:49:51 11876 1

原创教你用Windows自带工具给优盘/移动硬盘添加密码

教你用Windows自带工具给优盘/移动硬盘添加密码本文中优盘，移动硬盘和分区操作方式一样，为方便描述，下文将只说优盘优盘成了很多人每天都会用到的工具，有时候自己优盘会存着一些不希望别人看到的文件，要是一不小将优盘丢失了就完蛋了。这个时候给自己的优盘添加一个使用密码就是一个很好的解决方式。市面上有很多可以给优盘上锁的软件，一方面解密加密不方便，另一方面这些软件绝大部分都是需...

2018-05-27 18:03:40 4601

原创卡在checking installable status

npm install卡在checking installable status笔者在使用NPM过程中经常会用到npm install命令，发现有时候会卡在checking installable status不动，在网上搜寻了各种解决方法之后在这里做一个记录。原因修改过仓库源（淘宝源之类的）远程仓库连接旧的npm缓存与项目冲突解决方案打开资源管理器，地址栏输入 ...

2018-05-27 17:03:05 10614 3

原创 React Native小白入门学习路径——五

React Native小白入门学习路径——五序 “哦天呐！” 这句话成了我在实验室的座右铭，老师可能觉得我们都是大神吧，都还在看着基础就给布置了那么多任务：写一个RN的TDD测试的Demo，对项目添加两个issues，要求每个人都写一个实现issues的Demo……组员一个个都在吐槽老师安排的任务太超前。大家在群里问学长怎么弄测试，学长礼貌的回了一句说 ...

2018-05-27 09:32:49 389 5

原创纯CSS实现展开列表

效果预览以下为源码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><style>*{ padding:0;

2018-05-26 20:37:04 5945

原创使用纯CSS制作展开合并立方体特效

显示效果源码<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css动画练习</title></head><style>bod

2018-05-26 20:30:16 658

原创提高博客浏览量（SEO）的几个小技巧

提高博客浏览量的几个小技巧添加分级标题多添加标题可以通过SEO（搜索引擎优化）提高百度等搜索引擎收录你的这篇博客的机率，这里需要了解SEO的一些知识：你的文档格式会被转换成HTML 格式，其中标题被转换成&lt;h&gt;标签,搜索过程中搜索引擎会优先匹配HTML文档中以下标签&lt;h1&gt;&lt;/h1&gt;&lt;h2&gt;&lt

2018-05-26 17:12:49 1155 1

翻译如何使用TDD和React Testing Library构建健壮的React应用程序

如何使用TDD和React Testing Library构建健壮的React应用程序当我开始学习React时，我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序。每次我想测试它时，我都会用Jest的 Enzyme来渲染一个组件。当然，我绝对滥用快照测试功能。那么，至少我写了一个测试吧？您可能听说过编写单元和集成测试会提高您编写的软件的质量。另一方面，不好的测试...

2018-05-26 15:29:48 3623

原创超详细Gitlab Runner环境配置中文教程

配置GitRunner环境GitLab Runner 是一个开源项目，它用来运行你定制的任务（jobs）并把结果返回给 GitLab。 GitLab Runner 配合GitLab CI（GitLab 内置的持续集成服务）协调完成任务。本文将记录将一台闲置的iMac mini配置React Native的runner环境。其他平台可以参考https://docs.gitla...

2018-05-26 10:39:22 44909

原创苹果电脑截图快捷键

配置GitRunner环境GitLab Runner 是一个开源项目，它用来运行你定制的任务（jobs）并把结果返回给 GitLab。 GitLab Runner 配合GitLab CI（GitLab 内置的持续集成服务）协调完成任务。本文将记录将一台闲置的iMac mini配置React Native的runner环境。其他平台可以参考https://docs.gitla...

2018-05-25 13:34:34 3229

转载快速学习MarkDown语法及MarkDown拓展语法

使用Markdown编辑器写博客Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q插入链接 Ctrl + L插入代码 Ctrl + K...

2018-05-25 08:01:52 1271

原创 React Native小白入门学习路径——四

上一周一直在弄着老师布置的各种任务，再加上要做的都还没做完。所以上周的总结到现在才写完发出来。。真的觉得老师太高估我们这些菜鸡了。也许是我太着急了，在自己还没有足够储备去完成自己的项目，总觉得先找一个简单项目跟着做一遍会更快的入门。看着许多的博客里面写着项目开发经历都想着要自己去尝试敲一下，到后面发现博客里的版本很古老，采用了一些已经启用的组件或者方法去开发，现在想再重新跟着学价值不大。尝试弄了两...

2018-05-23 23:20:43 246

原创 Error watching file for changes: EMFILE

运行reactnative项目时在编译过程中报错Error watching file for changes: EMFILE故障原因：是升级后watchman不可用了，需要重装watchman。解决方案第一种解决方案是打开终端后依次键入以下命令：1.卸载原来安装的watchman:brew uninstall --force watchman2.删除原来的安装文件: rm -rf /usr/lo...

2018-05-21 15:24:34 629

原创 ReactNative用指定的真机/模拟器运行项目

使用模拟器运行项目：命令行中React native项目目录下键入react-native run-ios会启动iOS模拟器，默认是使用iPhone6，如果想要试用其他版本的模拟器则需要在react-native run-ios后携带参数–simulatorsimulator后指定模拟器的名字，注意需要添加双引号。例如启动iPhone7react-native...

2018-05-21 13:48:12 4403

原创 Unable to find utility "instruments", not a developer tool or in PATH

在调试ios上的项目的时候出现报错 unable to find utility "instruments", not a developer tool or in PATH报错原因：升级过xcode或者xcode多版本共存下没有设置默认版本解决方案：打开xcode，选择切换到Locations,在command line tools 中选择你需要用的版本此时完全退出xcode，再次尝试run-i...

2018-05-21 13:35:53 1858 2

转载常用正则表达式模板

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字...

2018-05-18 14:17:17 4287

原创 ESlint开发环境配置

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误，是JS开发过程中极佳工具，这篇文章将以WebStorm为例告诉你如何在本地配置ESlint环境。首先，确保你的Node.js版本 (>=4.x), npm版本 2+。这里有两种安装方式：全局安装（学习过程推荐）:全局安装在自己的电脑上，以后别的项...

2018-05-18 09:38:13 5714

原创 React Native小白入门学习路径——三

迷茫，真的迷茫。或许是自己努力的还不够吧，在学习的过程中遇到了很多问题，自己尝试借助搜索引擎解决问题，无奈国内的教程写的还很基础，涉及到稍微具体一点的问题时讲解就比较少更新也比较慢，绝大多数还是很早之前的版本下的处理方式。满满的还总结出一个结论，绝大多数讲入门的教程都还是停留在2016年，大概是RN刚火起来的时候吧，大家都会把自己的经验总结出来。自己在RN社区里找到的一些技术大牛也没...

2018-05-12 19:06:46 1531

原创 ReactNative 常见红屏黄屏及终端报错

刚开始接触RN,总是会遇到各种红屏黄屏报错，红屏是fatal error(程序无法正常运行)，黄屏是Warming(非致命错误，程序可以运行但是存在潜在问题可能在某些情况下将导致fatal error)。我会在这里记录下我遇到的比较典型的问题，不定时更新，一方面方便别人参考学习，一方面也给自己做个记录归纳。The development server returned response error...

2018-05-12 10:01:09 5082

原创 React Native小白入门学习路径——二

万万没想到，RN组仅剩的一个学长也走了，刚进实验室没几天就被告知这样的事情，一下子还真的有点接受不了，现在RN组就成了为一个没有前辈带的组了，以后学习就更得靠自己了吧。唉，看来得再努力一点了。这一周大概了解了一下RN体系的组成，真的像学长说的那样，RN入门比较不容易，对新手不友好，需要另外学很多东西，虽然有JS的底子，但也仅限于一些控制结构的写法和数据组成之类的能用到，也可能是因为自己之前没有好好...

2018-05-07 15:46:26 456 3

原创 React Native小白入门学习路径——一

前言过去这段时间一直忙着实验室考核任务，拼尽全力完成了自己的任务之后。正准备开始高强度的实验室的学习的时候，实验室组织了新老生交流会，这也应该是头一次这么近距离的面对大四前辈交流想法。感觉自己受益颇深。之前出于兴趣也了解过一些RN,但也只是限于知道基础的一些概念，所以感觉自己和大家一样，都是在学一样新东西，我并没有觉得自己有什么优势。原来的学习经历只是让我有机会去拓宽一下我的视野，但还没有达到让我...

2018-05-07 15:43:16 372 1

YooHoeh的博客