Anran758's blog

以下主要是优化方面的回顾。

使用 React 进行项目开发也有好几个项目了，趁着最近有空来对 React 的知识做一个简单的复盘。

记录 Hexo 升级或使用时遇到的问题和一些解决方案。

我们知道 Github Pages 是 Github 免费提供给用户展示页面的一项服务。当我们完成项目开发后，想将页面部署到 Github Pages 时，该要怎么操作呢？

可以在 GitHub 的储存库设置中设置用于展示页面的分支，该分支只保留构建后的静态资源，也就是源码与编译后的静态资源分离。按照传统的做法是：手动运行编译命令，编译后再复制到指定分支中。这样操作很繁琐，但使用 Travis CI 持续集成服务之后就可以不用操心这些事了。

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它对于前端工程师来说可谓是如雷贯耳，基本上现在的大型应用都是通过 webpack 进行构建的。

webpack 具有高度可配置性，它拥有非常丰富的配置。在过去一段时间内曾有人将熟练配置 webpack 的人称呼为 “webapck 工程师”。当然，这称呼只是个玩笑话，但也能从侧面了解到 webpack 配置的灵活与复杂。

为了能够熟练掌握 webpack 的使用，接下来通过几个例子循序渐进的学习如何使用 webpack。

以下 Demo 都可以在 Github 的 webpack-example 中找到对应的示例，欢迎 star~

总结关于计算机网络原理常见的计算方法。

上篇文章介绍了 flexbox 的属性与示例，本文再通过几个 flex 布局的案例来体会 flex 布局的特性带来的便利和问题~

互联网早期实现布局是需要通过多种不同属性组合才能实现我们想要的布局。

比如常见的垂直居中，刚接触 css 的朋友看到 vertical-align: middle; 这个属性可能就会认为它就是用于垂直居中的，但实际上并没有那么简单。如果想要通过该属性来实现垂直居中，还需要其他小伙伴配合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.container {
  width: 200px;
  height: 200px;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  background: #e44b27;
  white-space: nowrap;
}

/* 该伪类是实现垂直居中关键 */
.container:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.content {
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  text-align: left;
}

1
2
3

<div class="container">
  <div class="content">我想居中！</div>
</div>

这样看来，为了实现垂直居中布局，我们还得打一套组合拳才能出来才行，是不是看起来有点麻烦的样子？

W3C 在 2009 年提出的 Fiexbox(flex) 布局草案，就是针对用户界面设计优化的 CSS 盒模型。如果使用 flex 布局来实现上面的垂直居中布局的话，可以简化为：

1
2
3
4
5
6
7
8
9
10
11
12

.container {
  width: 200px;
  height: 200px;
  border-radius: 6px;
  color: #fff;
  background: #e44b27;

  /* 使用 flex 布局 */
  display: flex;
  justify-content: center;
  align-items: center;
}

1
2
3

<div class="container">
  <div>我想居中！</div>
</div>

修改后的代码就显得更精简了，也不需要其他小伙伴来搭把手。布局的事情就让 flex 家族自己来解决即可。

前一篇我们介绍了如何使用 Hexo 框架及 Next 主题搭建博客。这次来聊聊如何安全的更新博客与主题的版本。

JSON 是一种轻量级的数据交换格式，它有键值对集合(js 中的对象)和数组两种结构。JSON是一个通用的格式，在前后端语言中都能跟该 JSON 打交道。

有时候我们需要将 JSON 格式输入至页面展示的需求，其中还需要保持一定的索引，那么该如何实现呢？

有时候我们希望有一个受控的博客，来记录或分享一些东西。这个博客的主题内容由你自己来决定，可以是技术分享(编程、汉化分享等)，也可以是生活感想。

前段时间更换了设备，正好趁着这个机会来记录一下适合前端开发的一个环境，以及推荐提高效率的应用。

最近在 ant design pro 的项目遇到了一个奇怪的问题，在输入命令行npm run start:no-mock后，发现预期发出POST请求变成了GET请求，状态码是301永久重定向。而在使用mock数据中不会出现这种问题。

在做微信登录的时候，希望能在本地能够测试登录。这里使用的是微信开放平台的网站应用微信登录, 与微信公众平台不同，微信开放平台并没有提供测试号的服务，因此在调试起来会十分的麻烦。比较传统的方法就是部署上测试服务器上专门先测试这一个接口。但从流程上来说，会比较麻烦，不够高效。下文将分享另一种测试的过程。

在一些需要用户填写资料的业务场景中，有时会让用户选择某个业务的范围，这时就需要用到滑块进度条。然后你们最爱的产品经理会说，给我整一个颜色可控，滑块按钮可大可小，滑块边框也要可大可小的滑动条来..

最近做了个H5微信支付的需求，记录一下所遇到的一些问题。。

在小程序的文档中我们得知，wx.saveImageToPhotosAlbum 是用来保存图片到相册的。

但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径，不支持网络图片路径，意味着我们不能直接调用这个接口。。

在工作中也做了好几个小程序项目了，正好抽空将小程序开发的一些知识重新整理一下~

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上。可以这么说，在国内，是个前端都知道这个玩意是干嘛用的，毕竟它还是出自于国人之手。

虽说如此，但是Echarts涵盖的类型实在是太广了，它给我们提供了很多配置项，但呼之而来的问题是会有点让刚接触的人有点茫然… 哪些参数是必要的？哪个参数又跟什么地方的key值相对应，缺失后就无法正常的显示…

因此就来专门讲一讲这配置项的坑以及如何通过组件的方式正确的”食用“。

一般我们翻阅百科的时候，如果文章过长的话，就不太方便找到我们想要的资源。此时有一个定位导航的话，那可真是帮大忙了~今天，就来聊聊这种常见的锚点定位导航的原理以及是如何实现的。