tobeyouth
PERSONAL SITE

tobeyouth

代码、想法，以及一些日常记录。

GitHub

最近记录52

3 分钟

记录一些有用的(前端)库

持续记录一些有用的库，主要是在前端的工作范畴内，会包含日常开发和工程化等几个大类，使用过的会附上一些使用感受，大概就这样吧。 业务相关 react-virtualized 移动端web页面对比native最绕不过去的一个坎儿就是：性能；尤其是在长列表上的表现。iOS 天然带有长列

5 分钟

redux, redux-saga and socket.io

最近公司举行 hackthon, 做了个棋牌类的游戏, 前端的主要技术栈就是 react + redux + redux-saga + socket.io react 没什么可说的了，基本已经是前端标配了。本来 redux 作为 react 全家桶的一部分，也没什么可讨论的了。

9 分钟

start-at-bitcoin

诞生 比特币诞生于 2008 年，一个网名为中本聪的人，提出了一个设想： 创造一种不受政府或任何组织控制的货币 比特币的本质就是一串数字，没有任何资产支持（现行货币背后都是国家或银行提供资产支持）。也就是说，比特币是一个完全出于社区共识的货币。 货币是什么 wikipedia 上

6 分钟

start at blockchain

最近了解了一些区块链的东西，动了一些深入了解的心思。 了解的过程中会不断补充和完善这篇文章，理解的不一定对，随意看看得了，每篇文章都会把阅读过的资料列出来，也方便大家去源头看看。 区块链（blockchain） 区块链是什么？ 一句话，它是一种特殊的分布式数据库 这句定义中有两个

2 分钟

解决 firefox 不能使用 charles 的问题

基本不用 firefox，今天有同事报了个 firefox 上的问题，下了个 firefox。 想着用 charles 抓下包看下，结果发现并不能抓到任何包。感觉有点儿奇怪，试了一下其他的浏览器，safari 和 chrome 都可以，唯独 firefox 不行。 于是 goog

4 分钟

调试移动网页的几种方法

在调试移动网页时，通常开发时会直接使用 chrome 来模拟移动设备。 但毕竟跟真实环境还是有差别，很多问题还是需要到真实设备上才能发现。 以下会列举几种我在开发过程中用到过的几种调试方式，就当做个总结吧。 Safari 首先是最简单的调试方法，通常在调试 ios 网页上的问题时

3 分钟

搭建 shadowsocks 记录

前期准备 因为最近使用的第三方 vpn 快到期了，所以打算自己搭个 shadowsocks 用。 找了一些国外的 vps 提供方，最后发现 vultr 算是最实惠的，有个 2.5美金/月 ，相较于 linode 的 5美金/月，虽然配置差了一些，但是简单作为梯子用，还是够用了。

5 分钟

开发了一个小网站

最近空余时间一直在开发一个小网站，用到了以下的一些技术栈 - docker - python - flask - mysql - supervisor - nginx - scary 在开发的过程中碰到了不少大大小小的坑，这里权当个记录，如果以后再碰到这样的坑，可以快速的跳出来。

2 分钟

一个有意思的问题

最近在开发一个简单的 webide 时，发现了一个诡异的问题。 使用 fetch 更新数据，如果 header 的 content-type 设置成 application/x-www-form-urlencoded;, 发送类似 {srouce: "1+2+3"} 这样的数据，

7 分钟

redux-saga

最近组里的同事在尝试使用 redux-saga 改造一些异步请求比较多的功能。 对 redux-saga 早有耳闻，但是出于懒，一直没去关注，这次就着帮同事做 code review 看了一下 redux-saga 的文档和代码，以下是学习过程中的一些心得和体会。 按照以往学习的

4 分钟

learn draft-js

what is draft-js draft-js 是一个基于 react 和 immutable-js 的富文本编辑器, 可以方便的集成到 react 代码中。 富文本编辑器要解决的问题 编辑器最终要解决的是两个方面问题： 输入 1. 同步 state 和 input 的值 2

2 分钟

wechat develop

总结一些微信相关开发踩过的坑 微信网页授权 相关文档地址: https://mp.weixin.qq.com/wiki?t=resource/resmain&id=mp1421140842 后台设置 - 在使用网页授权之前, 需要把要授权的域名，在微信公众号的后台设置一下。具体路

1 分钟

新写了个函数

昨天写代码的时候，顺便写了个小函数，用于处理 这种情况，具体可见：if-func。 也可以直接通过 npm 安装 ps: 因为是用 es6 语法写的，使用的时候需要编译，所以做完发现，写的编译相关的代码，已经要比这个函数还要长了。 简直是现代前端开发的尴尬。

3 分钟

functional programming

简单的梳理一下函数式编程的相关知识点。 定义 首先来看什么才是函数式编程(functional programming)。 来自 wikipedia 的定义 In computer science, functional programming is a programming

4 分钟

react benchmarks

简单的说一下如何在 react 开发中，进行 benchmark，并且会简单的说一些可以提升性能的小技巧。 Performance 既然想要进行 benchmark，那么就需要一个指标来衡量。react 官方已经提供了这样的工具供开发人员使用。 官方的文档可以参考这里Perfor

11 分钟

同源策略和跨域

在前端开发的过程中，我们经常遇到"跨域"的问题，以下的文章将列举一下我在工作中碰到的跨域问题。 以及稍稍的探讨一下为什么会有"跨域"问题的出现，和所谓的"同源策略" 同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂商采纳。 同源策略只是一个规范

5 分钟

css的困惑

最近在项目中使用React比较多，components的组织方式使前端整个的开发思路更加清晰，在多人项目中，也会减少很多沟通的成本（需要什么组件，直接去找就可以了），但是由此也产生了一些困惑。 不过这里不会讨论React本身，只会讨论由Components方式引发的一些css写法

1 分钟

终于解决了心头的一个大问题

最近一直在用webpack作为构建工具。 有个叫extract-text-webpack-plugin的插件很好用，可以直接在js文件里通过import的方式加入静态文件，通过这种方式再配合react，各种直接import {component}就可以了，再也不会出现忘了加载样式

2 分钟

基础回顾-浏览器事件机制

最近在复习一些基础的知识。 尤其是当时看的时候就不是很明白的东西，现在再看一遍，有一种豁然开朗的感觉。 浏览器中的事件，大部分的问题都会集中在IE和其他系浏览器之前的差异。 两种事件机制 要想理解这种差异，就要了解Bubbling和Capturing这两种事件机制。 所谓Bubb

8 分钟

shadow dom & web components

what is web components 上面说了shadow dom，再来说一下什么是web components。根据w3c上一个版本的文档来看，所谓web components分为以下几部分： - Template:定义模板 - Decorators:基于模板定制交互和

3 分钟

shadow dom & web components(2)

这里主要补充一下上一篇日志没有讲到的地方。 使用多个root 在某些情景下，我们可能会将多个shadow dom tree的root挂载到同一个host上，这时就会出现问题： <div id="example1"Light DOM</div <script var contain

3 分钟

http:200(from-cache)&http:304

200 (from-cache) vs 304 静态资源的本地缓存有两种形式，一种是200(from-cache)，另一种是304。 这两种方式有什么区别？ 简单的来讲，200(from-cache)就是没有发起 http 请求。 而304则是向服务器发起了一次请求，服务器发现文

3 分钟

prototype And __proto__ in javascript

昨天在知乎上看到一个问题很有意思：javascript一个函数实例有prototype属性吗?。题目大意如下： var Dog = function() {}; Dog.prototype.name="HI"; var Tom = new Dog(); console.log(T

2 分钟

think-of-css

css风格 OOCSS:Object Oriented Css 1. Separate structure and skin 2. Separate container and content 3. Avoid the descendent selector (i.e. don'

6 分钟

use reactjs

最近在一个项目中使用了React作为主力开发框架，写篇总结，说说自己的感受和踩过的坑。 跟Angular的对比，网上可以搜到各种文章，着重推荐这篇From AngularJS to React: The Isomorphic Way，讲的比较详实，同时还提出了一种名为The Is

4 分钟

font-size:px&em&rem

在前端开发的过程中，对于font-size这个属性，我们最常用的单位值就是px了。但是对比一些国外的大站，经常会发现他们的font-size单位很少用px，大部分都使用em，还有一部分使用rem。 那么，问题来了。 这三种单位究竟有什么区别呢？又该怎么合理的运用呢？ 先来说px

3 分钟

webpack，browserify简介

webpack和browserify是两个用于编译打包前端资源的工具。于此相同的还包括有百度的fis和支付宝的spm。主要的工作都是完成前端工程化工作中的一环。 Browserify Browserify是由substack开发的，用于实现在浏览器环境中运行npm上的common

5 分钟

gulp中文文档

简介： 反正官方网站上都是吹牛逼，所以这里我就随便写写了 Gulp是新一代的前端构建引擎，相比与Grunt配置要更简单，相对的速度也会更快速。 对于使用者而言，如果有一些nodejs的基础，将会更加快速的理解Gulp的使用和配置，因为它的语法，真的很像你写一个简单的nodejs小

1 分钟

Learn React

React是facebook开源的一个组件化框架。与众不同采用了jsx方式作为组件的组成方式。 所谓jsx是一种类似xml的文件格式，可以理解成为带有js的xml格式。所有的React组件都是基于jsx这种格式进行编写。至于这种格式究竟是好是坏，也是因人而异吧。 个人认为，出于j

1 分钟

strlen和mb_strlen

最近在开发中碰到一个有趣的问题，在使用strlen这个函数时，针对泰语环境，这个函数得出的结果总是字符串实际长度的3倍。 仔细看了一下手册之后发现，原来strlen这个函数对待在UTF-8编码中的非字母类字符，长度都定义为3，所以会出现泰语字符串的长度，使用这个函数得出的结果是实

3 分钟

performance in javascript

在web项目中，页面的展现速度是大家一直关注的一个要点。在有关页面展现速度的统计中，我们通常会统计这样一些时间点： - 请求响应时间 - dom加载时间 - 第一屏显示时间 - js阻塞UI显示的时间 - 等等 根据这些时间点，可以得知页面的性能瓶颈；还可以分析速度对用户体验的影

4 分钟

一个前端开发工程师的Python学习(3)

上集对比学习了js和python中的数据类型。发现在数据类型这方面，python比js略胜一筹，各种方便。 今天再来对比学习一下函数。 函数的定义 在不同的语言中，定义函数的语法不同这个很正常，更何况python是一个摒弃了大括号的语言，所以定义函数跟js完全不同，这里不做展开说

4 分钟

一个前端开发工程师的Python学习(2)

上一篇文章大概说了一下python和js的一些关键字。 这次来说说数据类型的异同。 我一向是主张工程师多了解几门语言，了解了之后，你就会发现，数据类型这个东西，在高级语言中，基本都是大同小异，只不过有的语言牛逼，提供的数据类型更丰富，有的不那么牛逼，提供的数据类型比较基本而已。

7 分钟

一个前端工程师的ios学习（1）

学习资料存档： 1. 着手开发ios应用程序 2. developer 3. cocoachina 笔记 每个应用程序都会有一个main.m的文件。这个文件相当于程序的入口文件，其中的@autoreleasepool是自动释放池（目前只知道是用于内存管理计数），会在其中调用UIA

2 分钟

在工作中学会提问

学会提问是一门很大的学问，下面列举几种典型的让人抓狂的提问方式： 1. 你的那个组件是怎么用的？ 这个对话的语境发生在QQ上，突然来这么一句，我怎么知道你想问的是哪个组件？ 2. 你的那个bug又复现了。 这个对话经常发生在与QA的沟通中。一共有好几个bug，你说的是哪个啊？ 3

4 分钟

something about touch

在移动前端开发的过程中，我们碰到的最多也是最头痛的问题就是关于click和touch带来的一系列交互问题。 在PC端，我们只需要监听click事件，就可以完成绝大部分的点击等动作，但是在移动端，由于手势操作的多样性(点击，双击，长按，多手指操作等)，在对用户动作的响应上，需要做出

1 分钟

新坑 -- cell UI

给前端工程师使用的bootstrap。分模块化的bootstrap，更多组件，更松散的组织形式。