https://tobeyouth.github.io代码、想法，以及一些日常记录。zh-cnhttps://tobeyouth.github.io/posts/%E8%AE%B0%E5%BD%95%E4%B8%80%E4%BA%9B%E6%9C%89%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AF%E5%BA%93/https://tobeyouth.github.io/posts/%E8%AE%B0%E5%BD%95%E4%B8%80%E4%BA%9B%E6%9C%89%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AF%E5%BA%93/持续记录一些有用的库，主要是在前端的工作范畴内，会包含日常开发和工程化等几个大类，使用过的会附上一些使用感受，大概就这样吧。 业务相关 react-virtualized 移动端web页面对比native最绕不过去的一个坎儿就是：性能；尤其是在长列表上的表现。iOS 天然带有长列Thu, 11 Jun 2020 00:00:00 GMThttps://tobeyouth.github.io/posts/redux-redux-saga-socket-io/https://tobeyouth.github.io/posts/redux-redux-saga-socket-io/最近公司举行 hackthon, 做了个棋牌类的游戏, 前端的主要技术栈就是 react + redux + redux-saga + socket.io react 没什么可说的了，基本已经是前端标配了。本来 redux 作为 react 全家桶的一部分，也没什么可讨论的了。 Fri, 21 Sep 2018 00:00:00 GMThttps://tobeyouth.github.io/posts/start-at-bitcoin/https://tobeyouth.github.io/posts/start-at-bitcoin/诞生 比特币诞生于 2008 年，一个网名为中本聪的人，提出了一个设想： 创造一种不受政府或任何组织控制的货币 比特币的本质就是一串数字，没有任何资产支持（现行货币背后都是国家或银行提供资产支持）。也就是说，比特币是一个完全出于社区共识的货币。 货币是什么 wikipedia 上Wed, 22 Aug 2018 00:00:00 GMThttps://tobeyouth.github.io/posts/start-at-blockchain/https://tobeyouth.github.io/posts/start-at-blockchain/最近了解了一些区块链的东西，动了一些深入了解的心思。 了解的过程中会不断补充和完善这篇文章，理解的不一定对，随意看看得了，每篇文章都会把阅读过的资料列出来，也方便大家去源头看看。 区块链（blockchain） 区块链是什么？ 一句话，它是一种特殊的分布式数据库 这句定义中有两个Tue, 21 Aug 2018 00:00:00 GMThttps://tobeyouth.github.io/posts/charles_and_firefox/https://tobeyouth.github.io/posts/charles_and_firefox/基本不用 firefox，今天有同事报了个 firefox 上的问题，下了个 firefox。 想着用 charles 抓下包看下，结果发现并不能抓到任何包。感觉有点儿奇怪，试了一下其他的浏览器，safari 和 chrome 都可以，唯独 firefox 不行。 于是 googWed, 21 Mar 2018 00:00:00 GMThttps://tobeyouth.github.io/posts/some-way-to-debug-mobile-web-pages/https://tobeyouth.github.io/posts/some-way-to-debug-mobile-web-pages/在调试移动网页时，通常开发时会直接使用 chrome 来模拟移动设备。 但毕竟跟真实环境还是有差别，很多问题还是需要到真实设备上才能发现。 以下会列举几种我在开发过程中用到过的几种调试方式，就当做个总结吧。 Safari 首先是最简单的调试方法，通常在调试 ios 网页上的问题时Wed, 24 Jan 2018 00:00:00 GMThttps://tobeyouth.github.io/posts/%E6%90%AD%E5%BB%BA-shadowsocks%E8%AE%B0%E5%BD%95/https://tobeyouth.github.io/posts/%E6%90%AD%E5%BB%BA-shadowsocks%E8%AE%B0%E5%BD%95/前期准备 因为最近使用的第三方 vpn 快到期了，所以打算自己搭个 shadowsocks 用。 找了一些国外的 vps 提供方，最后发现 vultr 算是最实惠的，有个 2.5美金/月 ，相较于 linode 的 5美金/月，虽然配置差了一些，但是简单作为梯子用，还是够用了。 Wed, 24 Jan 2018 00:00:00 GMThttps://tobeyouth.github.io/posts/brackish-develop/https://tobeyouth.github.io/posts/brackish-develop/最近空余时间一直在开发一个小网站，用到了以下的一些技术栈 - docker - python - flask - mysql - supervisor - nginx - scary 在开发的过程中碰到了不少大大小小的坑，这里权当个记录，如果以后再碰到这样的坑，可以快速的跳出来。Fri, 22 Dec 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/%E4%B8%80%E4%B8%AA%E6%9C%89%E6%84%8F%E6%80%9D%E7%9A%84%E9%97%AE%E9%A2%98/https://tobeyouth.github.io/posts/%E4%B8%80%E4%B8%AA%E6%9C%89%E6%84%8F%E6%80%9D%E7%9A%84%E9%97%AE%E9%A2%98/最近在开发一个简单的 webide 时，发现了一个诡异的问题。 使用 fetch 更新数据，如果 header 的 content-type 设置成 application/x-www-form-urlencoded;, 发送类似 {srouce: "1+2+3"} 这样的数据，Wed, 29 Nov 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/redux-saga/https://tobeyouth.github.io/posts/redux-saga/最近组里的同事在尝试使用 redux-saga 改造一些异步请求比较多的功能。 对 redux-saga 早有耳闻，但是出于懒，一直没去关注，这次就着帮同事做 code review 看了一下 redux-saga 的文档和代码，以下是学习过程中的一些心得和体会。 按照以往学习的Wed, 23 Aug 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/learn-draft-js/https://tobeyouth.github.io/posts/learn-draft-js/what is draft-js draft-js 是一个基于 react 和 immutable-js 的富文本编辑器, 可以方便的集成到 react 代码中。 富文本编辑器要解决的问题 编辑器最终要解决的是两个方面问题： 输入 1. 同步 state 和 input 的值 2Tue, 22 Aug 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/wechat-develop/https://tobeyouth.github.io/posts/wechat-develop/总结一些微信相关开发踩过的坑 微信网页授权 相关文档地址: https://mp.weixin.qq.com/wiki?t=resource/resmain&id=mp1421140842 后台设置 - 在使用网页授权之前, 需要把要授权的域名，在微信公众号的后台设置一下。具体路Mon, 31 Jul 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/%E6%96%B0%E5%86%99%E4%BA%86%E4%B8%AA%E5%87%BD%E6%95%B0/https://tobeyouth.github.io/posts/%E6%96%B0%E5%86%99%E4%BA%86%E4%B8%AA%E5%87%BD%E6%95%B0/昨天写代码的时候，顺便写了个小函数，用于处理 这种情况，具体可见：if-func。 也可以直接通过 npm 安装 ps: 因为是用 es6 语法写的，使用的时候需要编译，所以做完发现，写的编译相关的代码，已经要比这个函数还要长了。 简直是现代前端开发的尴尬。Fri, 28 Jul 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/functional-programming/https://tobeyouth.github.io/posts/functional-programming/简单的梳理一下函数式编程的相关知识点。 定义 首先来看什么才是函数式编程(functional programming)。 来自 wikipedia 的定义 In computer science, functional programming is a programming Fri, 07 Jul 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/react-benchmarks/https://tobeyouth.github.io/posts/react-benchmarks/简单的说一下如何在 react 开发中，进行 benchmark，并且会简单的说一些可以提升性能的小技巧。 Performance 既然想要进行 benchmark，那么就需要一个指标来衡量。react 官方已经提供了这样的工具供开发人员使用。 官方的文档可以参考这里PerforTue, 16 May 2017 00:00:00 GMThttps://tobeyouth.github.io/posts/%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5/https://tobeyouth.github.io/posts/%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5/在前端开发的过程中，我们经常遇到"跨域"的问题，以下的文章将列举一下我在工作中碰到的跨域问题。 以及稍稍的探讨一下为什么会有"跨域"问题的出现，和所谓的"同源策略" 同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂商采纳。 同源策略只是一个规范Wed, 14 Sep 2016 00:00:00 GMThttps://tobeyouth.github.io/posts/css%E7%9A%84%E5%9B%B0%E6%83%91/https://tobeyouth.github.io/posts/css%E7%9A%84%E5%9B%B0%E6%83%91/最近在项目中使用React比较多，components的组织方式使前端整个的开发思路更加清晰，在多人项目中，也会减少很多沟通的成本（需要什么组件，直接去找就可以了），但是由此也产生了一些困惑。 不过这里不会讨论React本身，只会讨论由Components方式引发的一些css写法Wed, 26 Aug 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/%E7%BB%88%E4%BA%8E%E8%A7%A3%E5%86%B3%E4%BA%86%E5%BF%83%E5%A4%B4%E7%9A%84%E4%B8%80%E4%B8%AA%E5%A4%A7%E9%97%AE%E9%A2%98/https://tobeyouth.github.io/posts/%E7%BB%88%E4%BA%8E%E8%A7%A3%E5%86%B3%E4%BA%86%E5%BF%83%E5%A4%B4%E7%9A%84%E4%B8%80%E4%B8%AA%E5%A4%A7%E9%97%AE%E9%A2%98/最近一直在用webpack作为构建工具。 有个叫extract-text-webpack-plugin的插件很好用，可以直接在js文件里通过import的方式加入静态文件，通过这种方式再配合react，各种直接import {component}就可以了，再也不会出现忘了加载样式Fri, 07 Aug 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/%E5%9F%BA%E7%A1%80%E5%9B%9E%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6/https://tobeyouth.github.io/posts/%E5%9F%BA%E7%A1%80%E5%9B%9E%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6/最近在复习一些基础的知识。 尤其是当时看的时候就不是很明白的东西，现在再看一遍，有一种豁然开朗的感觉。 浏览器中的事件，大部分的问题都会集中在IE和其他系浏览器之前的差异。 两种事件机制 要想理解这种差异，就要了解Bubbling和Capturing这两种事件机制。 所谓BubbFri, 10 Apr 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/shadow-dom-web-components/https://tobeyouth.github.io/posts/shadow-dom-web-components/what is web components 上面说了shadow dom，再来说一下什么是web components。根据w3c上一个版本的文档来看，所谓web components分为以下几部分： - Template:定义模板 - Decorators:基于模板定制交互和Mon, 09 Mar 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/shadow-dom-web-components-2/https://tobeyouth.github.io/posts/shadow-dom-web-components-2/这里主要补充一下上一篇日志没有讲到的地方。 使用多个root 在某些情景下，我们可能会将多个shadow dom tree的root挂载到同一个host上，这时就会出现问题： <div id="example1"Light DOM</div <script var containMon, 09 Mar 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/http-200-from-cache-http-304/https://tobeyouth.github.io/posts/http-200-from-cache-http-304/200 (from-cache) vs 304 静态资源的本地缓存有两种形式，一种是200(from-cache)，另一种是304。 这两种方式有什么区别？ 简单的来讲，200(from-cache)就是没有发起 http 请求。 而304则是向服务器发起了一次请求，服务器发现文Thu, 05 Mar 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/prototype-and-__proto__-in-javascript/https://tobeyouth.github.io/posts/prototype-and-__proto__-in-javascript/昨天在知乎上看到一个问题很有意思：javascript一个函数实例有prototype属性吗?。题目大意如下： var Dog = function() {}; Dog.prototype.name="HI"; var Tom = new Dog(); console.log(TFri, 30 Jan 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/think-of-css/https://tobeyouth.github.io/posts/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'Tue, 27 Jan 2015 00:00:00 GMThttps://tobeyouth.github.io/posts/use-reactjs/https://tobeyouth.github.io/posts/use-reactjs/最近在一个项目中使用了React作为主力开发框架，写篇总结，说说自己的感受和踩过的坑。 跟Angular的对比，网上可以搜到各种文章，着重推荐这篇From AngularJS to React: The Isomorphic Way，讲的比较详实，同时还提出了一种名为The IsFri, 21 Nov 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/font-size-px-em-rem/https://tobeyouth.github.io/posts/font-size-px-em-rem/在前端开发的过程中，对于font-size这个属性，我们最常用的单位值就是px了。但是对比一些国外的大站，经常会发现他们的font-size单位很少用px，大部分都使用em，还有一部分使用rem。 那么，问题来了。 这三种单位究竟有什么区别呢？又该怎么合理的运用呢？ 先来说px Thu, 20 Nov 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/webpack-browserify/https://tobeyouth.github.io/posts/webpack-browserify/webpack和browserify是两个用于编译打包前端资源的工具。于此相同的还包括有百度的fis和支付宝的spm。主要的工作都是完成前端工程化工作中的一环。 Browserify Browserify是由substack开发的，用于实现在浏览器环境中运行npm上的commonMon, 15 Sep 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/gulp-doc/https://tobeyouth.github.io/posts/gulp-doc/简介： 反正官方网站上都是吹牛逼，所以这里我就随便写写了 Gulp是新一代的前端构建引擎，相比与Grunt配置要更简单，相对的速度也会更快速。 对于使用者而言，如果有一些nodejs的基础，将会更加快速的理解Gulp的使用和配置，因为它的语法，真的很像你写一个简单的nodejs小Sun, 14 Sep 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/Learn-React/https://tobeyouth.github.io/posts/Learn-React/React是facebook开源的一个组件化框架。与众不同采用了jsx方式作为组件的组成方式。 所谓jsx是一种类似xml的文件格式，可以理解成为带有js的xml格式。所有的React组件都是基于jsx这种格式进行编写。至于这种格式究竟是好是坏，也是因人而异吧。 个人认为，出于jWed, 10 Sep 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/tips-in-php/https://tobeyouth.github.io/posts/tips-in-php/最近在开发中碰到一个有趣的问题，在使用strlen这个函数时，针对泰语环境，这个函数得出的结果总是字符串实际长度的3倍。 仔细看了一下手册之后发现，原来strlen这个函数对待在UTF-8编码中的非字母类字符，长度都定义为3，所以会出现泰语字符串的长度，使用这个函数得出的结果是实Thu, 21 Aug 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/performance-in-javascript/https://tobeyouth.github.io/posts/performance-in-javascript/在web项目中，页面的展现速度是大家一直关注的一个要点。在有关页面展现速度的统计中，我们通常会统计这样一些时间点： - 请求响应时间 - dom加载时间 - 第一屏显示时间 - js阻塞UI显示的时间 - 等等 根据这些时间点，可以得知页面的性能瓶颈；还可以分析速度对用户体验的影Mon, 18 Aug 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/python-2014-08-14/https://tobeyouth.github.io/posts/python-2014-08-14/上集对比学习了js和python中的数据类型。发现在数据类型这方面，python比js略胜一筹，各种方便。 今天再来对比学习一下函数。 函数的定义 在不同的语言中，定义函数的语法不同这个很正常，更何况python是一个摒弃了大括号的语言，所以定义函数跟js完全不同，这里不做展开说Thu, 14 Aug 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/python-2014-08-13/https://tobeyouth.github.io/posts/python-2014-08-13/上一篇文章大概说了一下python和js的一些关键字。 这次来说说数据类型的异同。 我一向是主张工程师多了解几门语言，了解了之后，你就会发现，数据类型这个东西，在高级语言中，基本都是大同小异，只不过有的语言牛逼，提供的数据类型更丰富，有的不那么牛逼，提供的数据类型比较基本而已。 Wed, 13 Aug 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/ios/https://tobeyouth.github.io/posts/ios/学习资料存档： 1. 着手开发ios应用程序 2. developer 3. cocoachina 笔记 每个应用程序都会有一个main.m的文件。这个文件相当于程序的入口文件，其中的@autoreleasepool是自动释放池（目前只知道是用于内存管理计数），会在其中调用UIAWed, 06 Aug 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/%E5%AD%A6%E4%BC%9A%E6%8F%90%E9%97%AE/https://tobeyouth.github.io/posts/%E5%AD%A6%E4%BC%9A%E6%8F%90%E9%97%AE/学会提问是一门很大的学问，下面列举几种典型的让人抓狂的提问方式： 1. 你的那个组件是怎么用的？ 这个对话的语境发生在QQ上，突然来这么一句，我怎么知道你想问的是哪个组件？ 2. 你的那个bug又复现了。 这个对话经常发生在与QA的沟通中。一共有好几个bug，你说的是哪个啊？ 3Tue, 05 Aug 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/something-about-touch/https://tobeyouth.github.io/posts/something-about-touch/在移动前端开发的过程中，我们碰到的最多也是最头痛的问题就是关于click和touch带来的一系列交互问题。 在PC端，我们只需要监听click事件，就可以完成绝大部分的点击等动作，但是在移动端，由于手势操作的多样性(点击，双击，长按，多手指操作等)，在对用户动作的响应上，需要做出Thu, 31 Jul 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/fe-at-international/https://tobeyouth.github.io/posts/fe-at-international/Thu, 24 Jul 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/seajs-grunt/https://tobeyouth.github.io/posts/seajs-grunt/Wed, 23 Jul 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/python-2014-07-17/https://tobeyouth.github.io/posts/python-2014-07-17/Thu, 17 Jul 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/ssh-login/https://tobeyouth.github.io/posts/ssh-login/Mon, 14 Jul 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/xml-schema/https://tobeyouth.github.io/posts/xml-schema/Fri, 11 Jul 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/mobile/https://tobeyouth.github.io/posts/mobile/Mon, 07 Jul 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/load-static/https://tobeyouth.github.io/posts/load-static/how to get html,css,js,image ?Mon, 26 May 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/bye-bye/https://tobeyouth.github.io/posts/bye-bye/Sun, 27 Apr 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/how-to-do/https://tobeyouth.github.io/posts/how-to-do/Mon, 24 Mar 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/seajs/https://tobeyouth.github.io/posts/seajs/Tue, 18 Mar 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/something-about-qa/https://tobeyouth.github.io/posts/something-about-qa/Fri, 14 Mar 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/components/https://tobeyouth.github.io/posts/components/Thu, 13 Mar 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/some-thing/https://tobeyouth.github.io/posts/some-thing/Tue, 11 Mar 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/cell-ui/https://tobeyouth.github.io/posts/cell-ui/给前端工程师使用的bootstrap。分模块化的bootstrap，更多组件，更松散的组织形式。Mon, 03 Mar 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/first/https://tobeyouth.github.io/posts/first/Mon, 03 Mar 2014 00:00:00 GMThttps://tobeyouth.github.io/posts/hello-world/https://tobeyouth.github.io/posts/hello-world/Sun, 02 Mar 2014 00:00:00 GMT