Anran758's blog

计算机网络原理学习笔记。

最近项目需要做 Accessibility 的处理，在这段时间的接触了很多无障碍相关的技术。除了基础的 ARIA 和相对单位的影响等基础知识外，本篇想介绍一下比较实用的 Accessibility Parsing tools。

软件工程相关笔记。

二叉树数据结构的学习与笔记。

最近遇到了个按需请求数据的需求，非常适合用于讲解闭包与链式设计的例子，故来分享一下思路。

接下来对 React 性能相关的问题进行知识回顾。

使用 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微信支付的需求，记录一下所遇到的一些问题。。