display: flex

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

想要了解更多关于 display: flex 的信息，请参考MDN

下面三个小游戏可以帮你更快了解 Flex 布局的 核心概念：

• Flexbox Defense
• FLEXBOX FROGGY
• Flexbox Zombies

网格布局：CSS Grid Layout

CSS Grid Layout(中文翻译：网格布局，也叫 CSS Grid 或 Grid) 引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

0 缘起

之前有次面试被问起 connect 方法是如何把 store 的 state 传递到 Component 的，当时没有回答到点子上，拖到现在终于强迫自己坐下来搞清楚这个事情。

1 API

先看看官方文档关于 connect() 方法的说明：Connect · React Redux | 中文版

大概翻译一下：
connect() 方法把一个 React 组件绑定到 Redux store 上。
方法返回一个新组件，新组件包含所有传入组件需要从 store 上获取的数据或者向 store 触发的方法
connect 不会修改组件，而是返回一个新的绑定组件包裹原组件。

1

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

更多内容请参考官方文档。

0. 背景

前端开发过程中，与后端约定接口标准之后，双方同时开始开发，可能会出现后端没有 Ready，但是前端已经需要使用接口的情况。这时候就需要 Fake 接口。有几种方式：

这里介绍一下使用第三种方式的一个实现方法：YApi，可以去这里体验。
YApi 是 node + mongoDB 项目，本篇介绍一下自己使用 Heroku 和 mongoDB Atlas 免费部署 YApi 的过程。

1. 注册帐号

https://cloud.mongodb.com/ 提供免费的 mongoDB 数据库服务
https://www.heroku.com/ 提供免费的 node 程序托管服务

参考：https://www.valentinog.com/blog/webpack-tutorial

Webpack 4 更新不短时间了，简单做个整理。

本文演示基于仓库：https://github.com/mrzzcn/webpack-playground

1. 完全 0 配置的模块化打包利器

习惯了webpack.config.js的同学可能不知道这个变化，Webpack 4 默认不需要配置文件了，在一个没有配置文件的项目里运行webpack会默认查找./src/index.js，输出到./dist/main.js。内部使用了一个默认配置文件主要内容如下：

1
2
3
4
5
6
7
8
9
10

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'main.js'
  },
  ...
};

源码：https://github.com/mrzzcn/webpack-playground/tree/step-0

原文：Hardening Website Security – Part 1: HTTP Security Headers

简介

感觉每周都会出现新的个人信息被盗事件，原因是某一家公司网站被黑了。

大部分攻击都是通过社会工程学诱骗某些用户主动提交一些信息，黑客借助这些信息获取更高权限并最终获取个人资料。

如果你想要在21世纪运营一个安全的网站，你需要遵循一些安全准则，我会写一个系列专栏说明这些安全准则，这是第一篇。

1. 含义

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

下列方式会创建块格式化上下文：

• 根元素或包含根元素的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 strict 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
  Read more »

Javascript 新增了 arrow function 和 class，这两者的概念可参考：arrow function，类。
React 里面的方法想要在JSX中使用，必须手动绑定 this，有些人会在这儿使用箭头函数简写掉 this.method = this.method.bind(this); 这行代码，本文作者对这种写法进行了分析，原文在此：Arrow Functions in Class Properties Might Not Be As Great As We Think

ECMAScript 5 (ES5)：ECMAScript 的第五版修订，于 2009 年完成标准化。这个规范在所有现代浏览器中都相当完全的实现了。

ECMAScript 6 (ES2015/ES6) / ECMAScript 2015 (ES2015)：ECMAScript 的第六版修订，于 2015 年完成标准化。这个标准被部分实现于大部分现代浏览器。可以查阅这张兼容性表来查看不同浏览器和工具的实现情况。

ECMAScript 2016 (ES2016/ES7)：第七版 ECMAScript 修订.

ECMAScript 2017 (ES2017)

对常用的API作个简单说明(按需引入polyfill), 点此查看Github链接原文

简单整理一下多人同一远程仓库git工作流模式。

1. 初始化本地仓库

1
2
3
4
5
6

// 已有项目
git clone git@github.com:mrzzcn/mrzzcn.github.io.git

// 新建项目
git init

第一次写读书笔记，一是加深自己的印象，二来方便以后查阅，毕竟纸张没有搜索功能。如果你也喜欢这篇文章欢迎转载，但本文代码版权属于《JavaScript语言精粹》，小部分代码扩充是为了演示代码效果。