前端漫记

原文——Squash commits into one with Git

本篇介绍一个很棒的能将多次修改合并起来的方法，尤其是在将他们共享出去之前

在 Git 中，你可以使用强大的 interactive rebase（交互式 rebase）将多次提交合并成一次。这是我常用的一个很方便的工具；我经常通过将多个临时的小的提交合并成一次提交，然后将整理好的代码 push 给远端。

字体设计基础

【字体设计基础】系列翻译自 typeworkshop.com，每篇文章都配有精美的插图，用于解释设计字体时会遇到的一些基础的问题。这些内容只解释了一些基础概念，不会深入讨论复杂的内容。

Same size for all! To optically align all characters on a line, they cannot not have exactly the same mathematical height. For example the triangle on this drawing has to be higher than the rectangle. If this is not the case, the triangle will for sure look smaller than the rectangle. While creating a typeface, you want all the letters to have the same height.

一视同仁！！为了让所有字体在视觉上对齐，它们就不能采用恰恰相同的尺寸。比如说，上图中的三角形必须的高度必须大于矩形。否则，三角形就会看起来比矩形小。在设计字体的时候，我们往往想要所有的字母定义同样的高度。

Also round forms have to exceed the baseline to be optically the same. If the circle would have exactly the same mathematical height as the rectangle, it would look smaller than the square. This doesn’t only count for basic forms like triangles, circles and squares. It’s essential in type design, because they apply to every single character in a typeface. Then it even doesn’t matter if you’re designing a latin, cyrillic or greek font. It’s a basic principle for any kind of shape.

同样的，为了使圆形看起来和矩形相同大小，就必须得让圆形超出基线。如果圆形的高度和矩形完全相同，就会看起来比方形更小。这种情况不仅适用于像三角形，圆形和方块这样的基本形状。这是字体设计的基本原则，整个字体中的所有字符都适用这套原则。甚至不论你正在设计拉丁，斯拉夫还是希腊字体，这种效果都同样适用。这是所有形体都必须遵循的基本原则。

我终于不用再花时间在终端，浏览器和编辑器之间往返来回了。难道不是所有人都在这么做吗？

在这篇教程中我会教你用 Visual Studio Code 的 debug 功能为你的 React 工作流赋能。你会学到如何如何将 VSCode 和 Chrome 连接起来，这样你就可以做到直接从 VSCode 调试浏览器中的代码了😎

可能会碰到这样的情况，你想要将本该在 HEAD 之前提交的修改通过 git commit --amend 提交追加到 HEAD 上了。这样，就需要回滚你刚刚完成的操作，然后将它应用到正确的提交上。对于简单的修改，你可能会发现 git reset -p 很方便。很多情况下修改的内容太多，并且和前面的提交交织在一起，你可能会需要 git reflog 帮忙。

原文– Gitflow Workflow

Gitfow 工作流是一个 Git 工作流设计，第一次是被 Vincent Driessen at nvie 发布并收到欢迎。Gitflow 工作流 定义了一个严格围绕项目发布的分支模型。它提供了一个用于管理大型项目的稳定框架。

Gitflow 完美地适合于具有计划性发布周期的项目。这种工作流不会添加任何超出 特性分支工作流 所需范围之外的新概念或者命令。相反，它为不同分支分配了非常详细的角色，并且定义了如何以及合适他们应该交互。除了 feature 分支，它为准备阶段，维护阶段和记录版本阶段使用了独立的分支。当然，你也可以充分利用所有特性分支工作流的优势：拉取请求，独立实验，以及更多高效合作。

原文：Ten minute introduction to MobX and React

MobX 是一个简单的，可扩展并且经过实战考研的状态管理解决方案。这篇教程将会花10分钟时间教会你关于 MobX 的全部重要概念。MobX 是一个独立的库，但是大多数人会将它和 React 组合使用，本篇教程也将关注这种组合的用法。

原文– Where there is no CSS4 - explaining CSS Levels

​ 我们已经有了 CSS1 和 CSS2，我们甚至还有过 CSS2.1，后来我们接着有了 CSS3，CSS3 真的存在吗？这篇文章将会快速介绍当今 CSS 是如何制定版本号的。

本文不会过多介绍基础知识，而是把重点放在原型的各个难点上。

大家可以先仔细分析下该图，然后让我们进入主题

JSONP的原理就不细说了，就是利用script可以跨域的特点来实现跨域，首先我们考虑一个最简单的jsonp，就是简简单单创建script标签，
添加url的功能，如下：

1
2
3
4
5
6

function jsonp(url) {
  const script = document.createElement('script');
  script.src = url;
  script.type = 'text/javascript';
  document.body.appendChild(script);
}

In javascript, every object has a constructor property that refers to the constructor function that initializes the object.

Sounds nice: it makes constructors sound static like classes in Java. Even the new Constructor() syntax looks like it. And it seems true:

1
2
3

function MyConstructor() {}
var myobject = new MyConstructor();
myobject.constructor == MyConstructor;     // true

But life isn’t that simple:

1
2
3
4
5

function MyConstructor() {}
MyConstructor.prototype = {};
var myobject = new MyConstructor();

myobject.constructor == MyConstructor;  // false