shell涉及数字计算的实际场景感觉相对较少，更多场景是关系运算。bash也不提供数字计算能力，需要通过expr实现。这里简单记录expr常用数字计算方式，其余篇幅详细记录关系运算。

N年前心血来潮把鸟哥linux私房菜一顿学，结果时隔多年功力尽散，事实证明进入工作后，最高效的学习方式还是围绕面临的问题去学习。当然也不是说不用做技术储备，拓宽技术面是必要，但要系统性学习一门技术，最好是用来解决眼下的问题。最近开始接触ci，发现里面的shell脚本都能看得懂，但要想优化改造就犯难了。需要重新...

这篇为react hooks的学习笔记，仅对需要关注的重点做了记录。有关react hooks详细说明，参见官网[链接] Rules of Hooks 不能将 hooks 放在循环、条件语句或者嵌套方法内。react是根据hooks出现顺序来记录对应状态的 只在 function 组件和自定义 hooks 中使用 hooks。 命名规范 useState 返回数组的第二项以 set 开头（仅...

babel这东西，需要配置时搞不清楚怎么弄，弄清楚后配置好了就很长时间不会去触碰。等再需要配置时又忘了当初怎么弄的了。 回头看之前写的babel学习笔记，发现自己还是有地方没搞清楚，有必要系统性的对babel进行学习和整理。

项目创建到现在快小半年了，期间遇到了大大小小非常多的问题，在不断遇到问题和解决问题的过程中，对vue和element-ui还有echarts的认知一点点的加深，也累积了不少对应各种问题的奇技淫巧。记录一下。

实际工作中，如果只是修改已有组件中的代码，打包后的vendor.js的hash码是不会变的。But！只要我新写一个组件然后引入项目，打包出来的所有文件的hash码全部都会变更，包括vendor.js。

先是看到前端早读课【第1065期】再见，babel-preset-2015，听说现在有了babel-preset-env，别的什么preset都不需要了，还可以通过useBuiltIns设置成usage，只需要install一下babel-polyfill，其他全交给babel处理就行了。看完屁颠屁颠得去拿自己项目开刀把preset换了，把import "babel-polyfill"删了，把babel-transform...

又一个项目最忙的阶段过去了，回头看看自己学canvas留下的半拉子文章，再一次证明技术不用是会忘记的，好多东西都没什么印象了T_T。不想烂尾，再啃一遍书~

加班加点连续一个多月，总算是快把一个开始时心里完全没有底的项目收工了。新项目基于旧系统开发，在保留原有老架构jade + knockout + jquery + gulp的同时，新页面完全采用vue + vue-route + vuex + webpack。两套框架都没正儿八经做过，jade和knockout第一次接触，vue和webpack以前只是写写demo，vue-route和vuex也没...

感觉书里第二章绘图写得稍稍有点乱，看起来不太适应，打算拆成三部分梳理 坐标体系及形变 路径绘制 渲染 坐标体系是canvas绘图的基础，而形变与坐标体系密切相关。路径绘制是canvas绘图的主要手段。渲染包括阴影，渐变，pattern，globleCompositeOperation，clip等影响绘图展示的因素。 这篇先整理坐标体系及形变。 canv...

花了半个月时间看完一遍《SVG Essentials》后，再看《HTML5+canvas基础教程》感觉大部分内容都比较轻松，很多canvas的方法和svg的元素属性之间有着及其相似的功能。

<animate>元素用于实现动画效果（动画截图比较麻烦，本文中的例子最好直接写demo看效果） 基本动画 将<animate>元素嵌入到元素内，来实现该元素的动画效果。 {代码...} 以上代码会一个200*20的长方形，在5秒内渐变成一个20*20的正方形，并且在动画结束时停留在正方形的状态。 <animate>元素的基本属性...

<clipPath>元素用来定义裁剪路径（我更愿意叫裁剪范围，因为<clipPath>内部可以是任何封闭的形状）。需要被裁剪的svg元素，通过style="clip-path:url(#clipPathId)"来指定根据clipPath范围裁剪，超出clipPath封闭形状外的部分将被隐藏。

svg里输入文本用<text>元素 <text>基本属性 x,y stroke,fill font styles (x,y)用于指定文字起始位置。准确的说，x指定文字最左侧坐标位置，y指定文字baseline所处y轴位置。fill的默认为black，stroke默认为none。如果设置了stroke，字的边缘会再“描一层边”。如果设置了stroke并将fill设为none，呈现为空心...

svg有两种填充方式：pattern和gradient。pattern可以实现以指定的图案来填充一块区域。gradient可以实现用渐变色来填充一块区域，渐变可以是线性（linearGradient）的，也可以是放射性（radialGradient）的。这块区域可以是fill，也可以是stroke。

看d3.js的时候就见识过<path>元素有多牛X，啥都能画出来，可不知其原理的话，看上去简直形同天书！没关系，有的是时间精力和耐性，仔细看看这天书的正确打开方式。

svg的形变和css的形变用的都是transform，而且属性也几乎没差(是几乎)。 translate transform="translate(x-value, y-value)" 简单来说，就是偏移。沿x轴方向偏移x-value个单位长度，沿y轴方向偏移y-value个单位长度。 {代码...} 复杂来说，svg处理偏移的时候，其实是对元素所在的坐标系做整体偏移。那上面例子来说，#re...

svg的样式之间的关系像极了html和css之间的关系，但还是有细微的差别。前一篇说到的svg的样式主要就是strock和fill的相关属性。这些属性可以用四种不同方式被作用到svg元素上，比css作用到html元素多一种。比如stroke="red"要作用到<line x1="0" y1="50" x2="100" y1="50">上

最后一个参数stroke-miterlimit是和stroke-linejoin="miter"配合使用的。举例来说，两条线夹角比较小的时候，用stroke-linejoin="miter"方式连接，并且stroke-miterlimit设置成一个比较大的是指时会出现很长的延伸

最近开始看SVG Essentials。找不到中文版的，逼着自己看原版书，进度比较慢，不过边学技术边学英语还是挺有成就感的^_^。目前看到Chapter 4，有必要先停下来整理下viewport这个知识点，个人感觉挺关键的。

requirejs会在装载module1和module2时，在请求后面拼接上"?v=1.0.0"。问题在于，每次发布，不管哪个环境，都需要手动去修改urlArgs这个参数，否则就会出现缓存问题。而希望实现的目标是，所有静态资源根据MD5码生成版本号。解决思路：一种是利用gulp将配置文件调整成以下样子：

近一个月里和同事一起将刚接手系统从sea.js切换到require.js。一方面感觉requirej比seajs更容易做工程化，一方面sea.js目前不更新了，而require社区仍然比较活跃。没有直接上vue或者react之类新潮的框架，是考虑到目前系统功能已经相对稳定了，业务复杂，组件数量很多，伤筋动骨的换框架一方面时间有限，一方面项目没有...

最近在看设计模式，一本《Head First 设计模式》，一本《javascript设计模式》，两本交替着看。Head First浅显易懂，代码用java实现，理解了一个设计模式的理念以后，先想想用js如何实现，然后再看js设计模式相关章节，感觉比以前看的时候理解深入了些。

起初，自己也没想到，短短五个月就把自己的职业标签正式换成了高级前端工程师。但在经历了这五个月以后，拿到offer的那一刻，短时间喜悦过后就平静了。

公私钥加密简单来说就是提供服务方有唯一一把私有的密钥和无数把公开的密钥，他把公钥发给所有请求服务的客户端，但只有自己知道并持有私钥。通过公钥加密过的数据，只有私钥才能解开。

看了几天https，感觉概念很清楚，细节特模糊，意识到又在隔空盖楼了，赶紧补补关于认证的基础~ 基础认证(Basic) 说直白点，认证就是让访问服务的人提供用户名和密码，然后对用户名和密码做校验。 http的质询/响应认证框架 客户端和服务器的质询/响应认证过程： 客户端发送请求； 服务器收到请求后，判断如果请求的资源需...

看图解http时看到首部字段Content-MD5，说先根据报文主体执行MD5编码，得到的二进制数在用Base64编码，最终得到一串字符，用于对报文主体的准确性校验。这MD5是什么？Base64又是什么？抱着这些疑问，花了半天整理了一下编码相关的基础知识，最后通过练习，最后初步了解为什么要编码，这些编码到底是怎么计算运行的。

最近恶补http基础，看到缓存章节，然后前段时间又正好读到流云诸葛博客里一篇介绍浏览器缓存的文章，两者结合，受益匪浅。自己也半抄半总结的记录一下。

正则表达式是由普通字符（例如数字、字母、标点和用来表示特定字符或字符集的元字符）以及特殊字符（用作限定条件或特殊功能的字符）组成的文字模式。

整理一下JS严格模式中不同于一般模式的地方。 启用严格模式 有两种方式启用严格模式 js文件第一行代码为'use strict'; 方法内第一行代码为'use strict'; 第一种方式对整个js文件中所有代码启用严格模式； 第二种方式对单个方法中所有代码启用严格模式； 每一段内嵌js代码视同单个js文件。如下面代码中第一段script内嵌js...