blog
blog copied to clipboard
cssmagic
CSS魔法 - 博客
> ### 前言 > > ESLint 是目前最主流、最强大的 JS 代码校验工具。当我们的代码触发了 ESLint 的报警规则时，ESLint 就会提示错误。 > > 本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则，帮助你顺利地把既有代码迁移到 ESLint 的保护之中。 ## `no-fallthrough` > 禁止在 `switch`/`case` 语句中使用穿透特性。 我们在 JS（以及大多数类 C 语言）里写 switch/case...
> ### 前言 > > ESLint 是目前最主流、最强大的 JS 代码校验工具。当我们的代码触发了 ESLint 的报警规则时，ESLint 就会提示错误。 > > 本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则，帮助你顺利地把既有代码迁移到 ESLint 的保护之中。 ## `no-empty` > 禁止出现空代码块，比如 `if`/`else`/`for`/`catch` 等代码块都在报警之列。 比如下面这个判断语句，`if` 块就是空的： ```js if (foo)...
> ### 前言 > > ESLint 是目前最主流、最强大的 JS 代码校验工具。当我们的代码触发了 ESLint 的报警规则时，ESLint 就会提示错误。 > > 本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则，帮助你顺利地把既有代码迁移到 ESLint 的保护之中。 ## `no-return-assign` > 禁止 `return` 一个赋值表达式。 虽然函数允许 `return` 一个赋值表达式，但这种写法令人困惑： ```js function...
> ### 前言 > > ESLint 是目前最流行、最强大的 JS 代码校验工具。它不仅可以帮助我们统一代码风格，更重要的是，它还可以帮助我们发现代码中可能存在的错误。 > > 当我们根据自己的需要设置好 ESLint 的报警规则，并集成到编辑器（或构建工具）之后，ESLint 就开始为我们服务了——在开发时（或构建时）对我们的代码给出校验结果、提示错误。 > > 在 ESLint 提供的这些规则中，有些是可以一键自动修复的，而有些则需要我们手工介入，针对性地修复有问题的 JS 代码。 > > 本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则，帮助你把既有代码顺利迁移到 ESLint 的保护之中。 ##...
> ### 简介 > > 有时候需要向新同学科普前端，又不知道如何下手？先把这篇图文分享丢给他吧！ > > 本文改编自魔法哥为 “百姓网 2016 暑期实习生训练营” 所作的前端入门讲座。此讲座面向在校大学生，内容比较初级，高手请飘过～  大家好，今天的分享主要分为以下三个部分。  由于目前计算机专业还没有为 Web 前端技术设立专门的课程，每位同学对前端的了解程度也不一样，今天的讲座会以最浅显的方式来为大家介绍 “前端”，帮助大家建立一个基本的概念。 ## 前端是什么？  在回答这个问题之前，我想到了一道面试题： > 当我们在浏览器中输入网址并按回车之后，接下来会发生什么？  我们来简单地看一看 “网页展现” 的整个过程。...
*** > * 本文改编自笔者在 “携程 C4 技术沙龙” 所作的分享《Web UI 框架设计：点击事件怎么绑》。 > * 此次分享的视频版已发布： https://www.bilibili.com/video/BV1p541127JF/ *** ## 引言 前端之所以被称为前端，是因为它是整个 Web 技术栈中距离用户最近、直接与用户进行交互的一环。而网页界面与用户的交互通常是通过各种事件来达成的；在各种事件之中，**点击事件** 往往又是最常见、最通用的一种界面事件。 本文将介绍我在 “点击事件绑定” 这一场景下的进阶之路。 ## 背景 我是一个前端小兵，我在一家互联网公司做做一些简单的业务开发。 某一天，我接到了一个需求，做一个抽奖功能。公司里的前辈们已经完成了业务逻辑，而且已经提供了业务功能的接口，只需要我制作页面并完成事件绑定即可。 ## 实践...
# 魔法哥 QCon 2018 复盘（上）：如何做一场 “有趣 + 实用” 的技术演讲 > **摘要**：一场技术演讲如何兼具**趣味性**和**实用性**？它是如何 “从零到一” 打造出来的？这篇文章大概是你所能找到的最真实的心路历程了。 ## 缘起 大约是今年夏天的某一天，贺老提醒我 QCon 上海站开始筹备了，鼓励我去做演讲。正好当时我在研究区块链和 DApp，感觉这个方向非常适合前端工程师，于是就向前端会场的出品人（蚂蚁金服的沉鱼前辈）申请了一个主题名额。 我的演讲主题定为《为什么前端工程师更应该掌握区块链 DApp 开发》，与我写过的 [一篇博客文章](https://github.com/cssmagic/blog/issues/79) 同名。虽然已有同名文章，但作为一场技术大会的演讲，表达的方式和内容必然会有很大不同。因此，我不仅重新来过，甚至还在筹划过程中几近崩溃。 ## 第一版 做一场演讲，首先需要梳理出主线。而这个演讲的主线，显然是要把前端工程师引入 “DApp 开发” 这个新的领域之中。但，问题来了，区块链并不在前端工程师的既有技能范畴之内，如何在这种缺失背景的条件下带领听众走完主线？...
> #### 摘要 > > 魔法哥在 “QCon 全球软件开发大会” 2018 上海站的演讲广受好评。为让这个演讲发挥更大的价值，本文尝试以图文配合的方式还原现场讲解，尽可能为读者呈现原版体验。 > > 以下图文混合排列，你不用分辨每段文字是配合上图还是下图的，只管顺序阅读即可。 ***  大家好，很高兴在 QCon 的讲台上和大家见面！  首先自我介绍。虽然大家都叫我 “魔法哥”，但实际上我的完整网名叫 “CSS魔法”。在各大社交网络都可以找到我。 两年前，我翻译过一本书，叫《CSS 揭秘》。这本书堪称前端领域里的重量级著作，中文版已经累计售出一万七千多册。我也很荣幸，能为前端技术社区做出一点微小的贡献。 总的来说，我就是个 “写 CSS 的”。然而今天主题是关于区块链的，为什么一个 “写 CSS...
> #### 摘要 > > 魔法哥在 “QCon 全球软件开发大会” 2018 上海站的演讲广受好评。为让这个演讲发挥更大的价值，本文尝试以图文配合的方式还原现场体验。 > > 在实战环节中，我们将和小明一起做出自己的第一款 DApp。实战案例清晰简洁，覆盖完整的开发流程，带你轻松跨入区块链应用开发的大门。 *** （本文是演讲的下半部分，建议您先读完 [上半部分](https://github.com/cssmagic/blog/issues/97) 再阅读本文。）  在做好准备工作之后，小明终于开始动手了！  我们回顾一下传统 Web App 和 DApp 的架构图。 在开发传统 Web 应用时，我们一般会先确定后端接口。同理，在开发...
# 如何正确接收 GitHub 的消息邮件 ## 背景 我厂的开发流程通常都是基于 GitHub 的。在 GitHub 上 review 代码，也是我日常工作的重要组成部分。对我来说，在 code review 过程中最讨厌的莫过于，我在 pull request 或 commit 下面评论或 @ 人，往往石沉大海，没有回音。我事后追问当事人，他们的回复往往是 “不知道你 @ 我了呀～”。 这让我非常恼火。所以，我决定写篇文档给所有人看，避免他们漏看重要的 GitHub 消息。此后在 GitHub...