blogs
blogs copied to clipboard
mytac
just my blogs，只有watch才能追踪！！start只是收藏！！:boom: 更多点击=》
我在逛github时，经常会看到像下面这样的提交记录，是不是很可爱（也很cool~~）  使用gitmoji来编写commit，使每次的commit能够更加直观，维护起来也更加方便： 我总结了一下经常会用到的gitmoji，以及他用来代表的提交类型，如下表所示： 表情 | 代码 |代表内容 --- | --- |--- :art: | ```:art:```|优化代码结构或格式 :zap: | ```:zap:```|提升性能 :fire: | ```:fire: ```|移除代码或文件 :wrench: | ```:wrench:``` | 修改配置文件 :bug: |...
不知道大家有没有这样的体验，当你专心浏览网站内容的时候，会从右下角弹出小广告，当你点击关闭的时候，又会跳转到另外的链接，你以为是网站搞的鬼，但你尝试去联系管理员时，人家表示不背这个锅。其实这背后是你的网络运营商在借刀杀人~ 市面上常见的运营商劫持主要是http劫持，https劫持和dns劫持。我们经常看到的右下角弹小广告的一般是http劫持，如果将http转为https可以减少被运营商劫持的机率，但也可能会被伪造证书，仍然会被劫持。所以我们需要在自己的程序中设置一个监听器来监控dom中劫持插入的脚本。 ## 思路 需要在运营商插入非法代码之前监听dom变动，以下的例子只检查``标签。 ### step1.挂载dom监听器 主要使用html5的一个特性[`MutationObserver`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)来观察dom变动，注意兼容性，如果你不打算兼容ie浏览器，`MutationObserver`是最好的选择。  ```js const observer = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; const isSupportObserver = !!observer if (isSupportObserver) { console.info('The preventor is running...') new...
2018 react conf在今年十月底于las vegas举行，其中主讲人Ryan Florence，演示了使用最新版本的react其中的几个hooks api可以大幅减少react functional 组件的代码量，本篇文章将围绕这个内容进行补充和示范。（在文章的结尾有大会的油管连接，没有梯子的小伙伴可以在b站上自行搜索）。 比如现在有个需求，需要监听键盘输入内容，显示在屏幕的某块可见范围中，效果如下：  以下代码基于`create-react-app`创建。 ## 使用稳定版本react实现(v15) ```jsx class App extends Component { constructor(props) { super(props) this.state = { words: '' } this.keyFunc =...
## 前言 由于微信小程序在开发上不能安装npm依赖，和开发流程上也饱受诟病；Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案，在本篇文章中主要介绍了使用taro搭建微信小程序的一些步骤和一个简单demo的实现。 ## 安装 先全局安装`@tarojs/cli` ``` $ npm install -g @tarojs/cli $ yarn global add @tarojs/cli ``` 之后我们初始化一个名为`myApp`的项目: ``` $ taro init myApp ``` 然后输入你的配置：  之后等待所有依赖安装完毕。...
## 前言 之前我写过一篇有关于git提交的文档[《用gitmoji来提交你的git commit吧》](https://www.jianshu.com/p/3191a33d5a96)，然而在实际上应用并不是很方便，大多情况得翻阅gitmoji对照表来写commit，且并不规范，仅仅适用于自己开发的项目，放到团队上commit可读性不高。最近翻阅了一篇文章[《你可能会忽略的 Git 提交规范》](http://jartto.wang/2018/07/08/git-commit/)，才知道自己之前写的commit非常随意，在项目初期，写的还蛮正规的：  然而之后懒了，前面的tag也没加。（所以说，好的习惯要坚持，只要有一次没做，后面就容易堕怠）  去审查一下你自己的commit~如果你不习惯使用git GUI，在bash中运行以下命令： ``` $ git log [tag name/branch name] HEAD --pretty=format:%s ``` ## commit规则格式 建议的格式如下： ``` (): ``` ### type 用于声明此次commit的主要目的类别：...
## 控件 1. [tippyjs -- 一个轻量级的vanilla JS工具提示库](https://github.com/atomiks/tippyjs) [官方示例](https://atomiks.github.io/tippyjs/) 2. [driver.js -- 一个轻量级的，无需依赖的JavaScript引擎，可以在整个页面中推动用户的注意力](https://github.com/kamranahmedse/driver.js) 这个库可以用来给某个元素高亮，高度可定制化； [官方示例](http://kamranahmed.info/driver) 3. [scrollbooster -- 令人愉快的内容拖动滚动库](https://github.com/ilyashubin/scrollbooster) [官方示例](https://ilyashubin.github.io/scrollbooster/)  ## 数据可视化 1. [tui.chart -- 生成漂亮的数据可视化的仓库](https://github.com/nhnent/tui.chart)   ## 图像处理...
## 前言。。和一些关于repo起名的建议 在github上找了很多图表类的插件，大多都是直方图之类的显示完好，到了饼图都差强人意。因为react-native版本更新的快，用不同的版本必须适配不同的第三方库，所以很多repo维护的都比较慢（或者类似于[react-native-chart](https://github.com/tomauty/react-native-chart)就直接不更新了），如果你非得用某个第三方库，在你当前版本不适合的情况下，要么换库，要么就降级react-native版本。这导致在开发上非常棘手，因为是团队项目，不可能去降级react-native版本的啊，在找适合的第三方库的过程中也是一度陷入了绝望之中。直到在react-native-chart的readme中发现了[victory-native](https://github.com/FormidableLabs/victory-native)。这里，我不得不吐槽一下他的repo名，victory什么鬼啊，没用过你家react-victory的人真心不知道你是干啥的。  说句题外话，如果自己有repo的小伙伴一定要重视你的项目命名，最好把它的功能用命名的方式描述出来，然后详细写下description，这样才能提高star数，（来自一个刚刚参透这些道理并且写了不少repo，star数扔为0的老阿姨的忠告）。如果你经常从github上找三方库你就会发现，star数很高的项目基本上都是文档详尽，description写的很清楚的一些项目。拿react-native-chart举例，虽然也是个不错的repo，但已经不能满足当前的react-native版本了，比起victory-native还是有很多不足的地方，但是他的star数要比victory-native高一倍。起个名字还是关系着命运啊，就像`王胜利`和`王.我会做图表`一样，你会找谁做图表呢。。  ## 先看效果图  ## 安装victory-native 首先，先要安装[react-native-svg](https://github.com/react-native-community/react-native-svg)，对应你的react-native版本号进行安装。 ``` react-native-svg >= 3.2.0 only supports react-native >= 0.29.0 react-native-svg >= 4.2.0 only supports react-native >= 0.32.0 react-native-svg...
## 框架 1. [ice -- （邀请公测）赋能企业中后台建设 - 海量可复用物料，通过 GUI 工具极速构建中后台应用 ](https://github.com/alibaba/ice) [官网](https://alibaba.github.io/ice/#/block) 2. [viron -- 基于自动化设计的管理控制台](https://github.com/cam-inc/viron)你所做的只是创建一个API服务器和一个OAS2.0 json文件。然后viron管理工具已准备好使用。你不需要编写前端代码！ [demo](https://cam-inc.github.io/viron/latest/#/) [官网](https://cam-inc.github.io/viron-doc/) ## 网络聊天室 1. [lounge -- 现代自主网络IRC客户端](https://github.com/thelounge/lounge)具有推送通知、链接预览、信息标记；始终连接；跨平台；响应式；优秀的同步体验。 ## RN相关 1. [react-native-sideswipe](https://github.com/kkemple/react-native-sideswipe)简单的走马灯？？？ ...
## 框架 1. [hyperapp -- 1 KB用于构建Web应用程序的JavaScript库。](https://github.com/hyperapp/hyperapp)他的特点是轻量和开箱即用，它将状态管理与支持密钥更新和生命周期事件的VDOM引擎相结合，所有这些都不依赖于任何依赖关系。 ## 架构相关 1. [jarvis -- 一个非常智能的基于浏览器的Webpack仪表板](https://github.com/zouhir/jarvis)它的主要特点是可以查看在12种不同的网络制式中你的项目的表现情况。  ## 网络通信 1.[greenlet -- 移动一个异步函数到自己的线程。](https://github.com/developit/greenlet)他的原理是接受一个异步函数，生成一个在Web Worker中运行的副本。 示例： ```js import greenlet from 'greenlet' let get = greenlet(async...
## 数据图表相关 1. [superstruct -- 一个简单和可组合的方式来验证Javascript中的数据](https://github.com/ianstormtaylor/superstruct) 2. [lowdb -- lowdb是一个由Lodash支持的小型本地JSON数据库（支持Node，Electron和浏览器）](https://github.com/typicode/lowdb) 3. [inmap -- inMap 是一款基于百度地图的大数据可视化库，专注于大数据方向的散点、热力图、网格、聚合等方式；让大数据可视化变得简单易用。](https://github.com/TalkingData/inmap) [官网](http://inmap.talkingdata.com/#/docs/guide/introduce) [蜂窝聚合的demo](http://inmap.talkingdata.com/#/docs/guide/HoneycombOverlay) ## 文件处理 1. [uppy -- 下一个用于Web浏览器的开源文件上传器](https://github.com/transloadit/uppy)  ## 动画相关 1. [popmotion -- JavaScript动作引擎。创建独特的动画和补间，物理和输入跟踪交互。](https://github.com/Popmotion/popmotion)...