Coco
区块链在 2018 突然就爆发了，区块链工程师招聘也是异常火爆。长期混迹币圈，又是个人兴趣所向，遂打算学习一下区块链方面的编程技术。 如果你也感兴趣，可以和我一起，从零开始学习以太坊编程。 废话少说，直接开始教程。 ## 安装 truffle ### truffle 是啥？ Truffle 是一个以太坊智能合约开发框架，利用它可以方便地生成项目模板、编译合约、部署合约到区块链、测试合约等等。 [Truffle官方文档可以戳这里。](http://ethereum.mochain.info/basic/install-and-use-truffle.html) ### truffle 能干啥？ 1. 内置的智能合约编译，链接，部署和二进制文件的管理。 2. 快速开发下的自动合约测试。 3. 脚本化的，可扩展的部署与发布框架。 4. 部署到不管多少的公网或私网的网络环境管理功能 5. 使用EthPM&NPM提供的包管理，使用ERC190标准。 6. 与合约直接通信的直接交互控制台（写完合约就可以命令行里验证了）。 7....
在区块链领域，我们经常会听到这些与链有关的名词： + 公有链 + 私有链 + 联盟链 + 跨链 + 侧链 这些区块链有着各自的特点和不同场景应用。本文作为科普文，带大家了解一下： ## 公有链 公有链是指全世界任何人都可以随时进入到系统中读取数据、发送可确认交易、竞争记账的区块链。公有链通常被认为是“完全去中心化”的，因为没有任何个人或者机构可以控制或篡改其中数据的读写。 公有链一般会通过代币机制来鼓励参与者竞争记账，来确保数据的安全性。比特币、以太坊都是典型的公有链。 **举例说明**：例如 比特币，以太坊，门罗币（Monero），达世币（Dash），莱特币（Litecoin），狗狗币（Dodgecoin）等等都是公有链。 **适用场景**：公有链适用于数字货币、电子商务、互联网金融、知识产权等应用场景。 ### 共有链特点 1. 访问门槛低 2. 所有数据默认公开 3. 用户免受开发者的影响 4. 具有通过去中介化的方式打破当前中心化商业模式的潜力 5....
有关注区块链的，肯定会经常看到这两个名词 -- PoW 与 PoS。但是很多人对他们的含义的理解存在很多偏差。那么他们的含义与区别是什么呢？  简单而言，PoW 和 PoS 是 2 种不同的对记账权利的分配方式。 ## PoW **POW**（Proof of Work）直译过来即是工作证明，也叫工作量证明。（例子：BTC、LTC） 这是什么意思呢？这就是说，你能够获得的币的数量，取决于你挖矿贡献的有效工作，也就是说，你用于挖矿的矿机的性能越好，分给你的收益就会越多，这就是根据你的工作证明来执行币的分配方式。 比特币采用的共识算法就是 PoW，专业一点说，矿工们在挖一个新的区块时，必须对SHA-256密码散列函数进行运算，区块中的随机散列值以一个或多个0开始。随着0数目的上升，找到这个解所需要的工作量将呈指数增长，矿工通过反复尝试找到这个解。 额，通俗的说，PoW 的意思就是**社会主义**，**按劳分配**，**多劳多得**。 ### PoW 的优势与劣势 PoW机制的设计目的是保证安全。无论是在中心化还是非中心化系统中，防止作弊都是很重要的。 PoW 假设大多数人不会作弊，如果你想作弊，你要有压倒大多数人的算力（51%攻击），但不能防止矿工抱团取暖。 > 51%攻击：所谓51%攻击，就是利用一些虚拟区块链货币使用算力作为竞争条件的特点，使用算力优势撤销自己已经发生的付款交易。如果有人掌握了50%以上的算力，他能够比其他人更快地找到开采区块需要的那个随机数，因此他实际上拥有了绝对那个区块的有效权利。...
最近业务上需要制作一个星云图来展示一些实时数据，像这样：  涉及 SVG 绘图、Canvas 等技术，其中使用 Canvas 瞬时渲染百万级别的粒子及动态去改变这些粒子是整个项目的核心所在。 所以，如何优化海量粒子的瞬时渲染及动态改变这些粒子就非常非常的关键。 工欲善其事必先利其器，我们先来看看对于这样一个多粒子渲染的页面，性能都消耗在了什么地方。 ## Canvas 卡顿原因 我们常说一个动画很卡，也就是说这个动画的帧率较低。流畅动画的标准一般是 60 FPS。Canvas 渲染动画的基本原理，本质就是不断地重绘画布。 把动画的一帧渲染出来，需要经过以下步骤： + 计算：处理逻辑，计算每个对象的状态，不涉及 DOM 操作（当然也包含对 Canvas 上下文的操作）。 + 渲染：真正把对象绘制出来 1. JavaScript 调用 DOM...
关于 chrome 扩展的文章，很久之前也写过一篇。[清除页面广告？身为前端，自己做一款简易的chrome扩展吧](http://www.cnblogs.com/coco1s/p/4725477.html)。 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。 ## 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。对于前端工程师而言，其最大的便利就是我们可以应用我们熟悉的 HTML、CSS 、 Javascript 等技术来制作扩展程序。 如下图所示，这些图标就是各种开发者提供的 chrome 扩展程序：  ## 区分扩展与插件 很多人会误称**扩展程序**为**插件**，这里有必要区分一下。 " 扩展 " 和 " 插件 "，其实都是软件组件的一种形式，Chrome 只不过是把两种类型的组件分别给与了专有名称，一个叫...
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。 我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。[jQuery v1.10.2 源码注解 ](https://github.com/chokcoco/jQuery-)。 系列第二篇：[【深入浅出jQuery】源码浅析2--奇技淫巧](http://www.cnblogs.com/coco1s/p/5303041.html) 网上已经有很多解读 jQuery 源码的文章了，作为系列开篇的第一篇，思前想去起了个【深入浅出jQuery】的标题，资历尚浅，无法对 jQuery 分析的头头是道，但是 jQuery 源码当中确实有着大量巧妙的设计，不同层次水平的阅读者都能有收获，所以打算厚着脸皮将自己从中学到的一些知识点共享出来。打算从整体及分支，分章节剖析。本篇主要讲 jQuery 的整体架构及一些前期准备，先来看看 jQuery 的整体结构：...
最近群里有人发了下面这题： 实现一个函数，运算结果可以满足如下预期结果： ```javascript add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 ``` 对于一个好奇的切图仔来说，忍不住动手尝试了一下，看到题目首先想到的是会用到**高阶函数**以及 `Array.prototype.reduce()`。 > 高阶函数(Higher-order function)：高阶函数的意思是它接收另一个函数作为参数。在 javascript 中，函数是一等公民，允许函数作为参数或者返回值传递。 得到了下面这个解法： ```javascript function add() { var args =...
实践出真知，有的时候看到一些有趣的现象就想着用自己所学的知识复现一下。 ## 缘起 前几天在 github 上看到同事的一个这样的小项目，在 IOS 上实现了这样一个小动画效果，看上去蛮炫的，效果图：  我就寻思着，在浏览器环境下，用 Javascript 怎么实现呢？ 在浓烈的好奇心驱使下，最终利用 Javascript 和 CSS3 完成了模仿上面的效果，通过调用方法，可以将页面上的图片一键爆炸，我给它起了个 boomJS 的名字，贴两张效果图：   ## 实现 我感觉效果还是可以的，因为没有使用 canvas ，所以无法取到图片上每个像素的颜色值。使用了一些比较讨（sha）巧（bi）的方法，下面简单讲讲如何实现的： ##### Step.1构造新图容器，隐藏原图 原本的图是标签的图，一张整图，最终的效果当然不是在原图上 boom...
更加优质的阅读效果，能看到 CodePen 示例，移步我的博客园： [【Web动画】SVG 线条动画入门](http://www.cnblogs.com/coco1s/p/6225973.html) 通常我们说的 Web 动画，包含了三大类。 + `CSS3` 动画 + `javascript` 动画（canvas） + `html` 动画（SVG） 个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。 ## 举个栗子 SVG 线条动画，在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面，看看最近项目里的一个小需求，一个这种形状的进度条：...
最近在研读 [《CSS SECRET》](https://github.com/cssmagic/CSS-Secrets)（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目： [CSS3奇思妙想 -- Demo](http://chokcoco.github.io/magicCss/html/index.html) （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。 也希望觉得不错的同学顺手在我的 Github 点个 star ： [CSS3奇思妙想](https://github.com/chokcoco/magicCss) 。 正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。 ## :before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ...