远程办公的环境选择

这个其实是我在 V2EX 跟帖的内容，觉得可能帮到我的读者，所以这里也发一次。

两年远程工作经验，给楼上各位分享一下固定工位的好处：

  1. 稳定性，受环境影响小。图书馆位置很紧张，尤其暑假；咖啡馆适合写代码的位置并不多，比如没有插头，比如桌椅不合适，比如旁边有人在连吃鸡；家里全是噪音源，老妈老婆孩子狗。
  2. 可以放显示器。这个其实很重要，笔记本的位置很低，使用时处于低头状态，脖子非自然弯曲，久而久之强直性颈椎病，手脚麻痹。不是耸人听闻，我现在已经不敢久用笔记本，大大减少了在咖啡厅的时间。 

坏处：

  1. 费用高。广州工位租金普遍在 1200/月以上，最便宜的方圆 E 时光 600/月，一年下来 7200，可以买 iPhone 了。
  2. 利用率低。远程工作不考勤，随时可工作。我厂老板在美国，早上起来第一件事就是翻聊天记录，很可能接下来就开工，弄完到午饭时间了，一上午没去；天气热，不想走路，不去；停车费贵，不去；老婆 /朋友 /老妈 /孩子要去某个地方，当司机，不去……一年下来一半时间都空置。
  3. 网络不好。共享空间共享宽带，均下来每个人都是小水管，我经常开手机热点，不然太影响效率。
  4. 冷气不足。相对于商业空间默认 24、25 度的配置，共享办公几乎不会低于 26，女性多的地方经常 27、28 度，热死个人。

我已经退掉了租的工位，准备还是自我调整：

  1. 工作集中在上午和下午 5 点前完成，基本和孩子上幼儿园时间重合
  2. 跟家里沟通我需要独立的工作环境，他们也渐渐知道怎么配合了
  3. 中午出去觅食，顺便在咖啡厅坐几个小时，充分利用免费停车的时间

V2原帖：成都有没有自由职业的同事想一起租个办公室啊?

文档的最佳实践

文档应该写“要干什么”，“为什么要这么干”，“准备怎么干”。不要写“是怎么干的”。因为需求在变、环境在变，如果把实现的细节写到文档里，将来和代码实现不一致，就会让使用者、维护者迷糊。
所以我们应该用格式化的数据来写，用稳定的数据接口，一次性输出文档、测试、mock 数据。本视频简单演示做法。

指导群里的小伙伴做小项目 应用创意：Chrome 共享首页，有两位同学主动领命，分开前后端就开做。结果我发现他们对文档的处理非常幼稚……所以便有了这样一个分享。

我的观点：

  1. 文档当然要写，但不要用自然语言这样写一大篇
  2. 文档如果不好好维护，将来表现和实际代码不一致，会造成更大的问题
  3. 所以开发者应该用更强的方式约束文档和代码，而不是大家主观协作
  4. 所以我们——尤其在前后端协作的时候——应该写格式化数据结构描述，然后通过编译的方式，用数据结构描述输出文档、测试、Mock Data

下面是视频：

应用创意：Chrome 共享首页

想做一个 Chrome 插件，替换 Chrome 默认首页，让大家共享收藏夹，这样我就可以跟群里的小伙伴更好的分享内容了。

想做一个 Chrome 插件，替换 Chrome 默认首页，让大家共享收藏夹，这样我就可以跟群里的小伙伴更好的分享内容了。

应该具备的功能：

  1. Chrome 首页插件，自动加载无版权美图
  2. 群主创建一个群组，生成一个 32 位的 hash 值
  3. 其它同学输入 key 加入群组
  4. 群主可以设置桌板块、布局等
  5. 其它同学可以提供自己的链接，群主审批后进入首页

未来考虑的功能：

  1. 大家可以针对分享的链接进行评论
  2. 大家可以收藏点赞链接
  3. 支持多群组
  4. 支持应用/小程序加载共享链接

肉山小课堂共建计划

简而言之，我的内容质量应该还是不错，但是品相不行，所以欢迎大家一起参与共同建设。有钱一起挣，将来有机会更进一步合作。

因为我自己各种忙，各种挖坑，但是十分希望能够多分享一些东西给大家，所以提出这个共建计划。我希望，我作为火种，引信，能够帮助更多的同学学到知识，取得进步。

经过过去两年高强度高密度的分享，我发现，“分享”这件事，并不容易。

首先，“你以为你以为的就是你以为的？”很多东西，我们放在自己的知识体系里，认为它就是全部的事实和事实的全部。但其实不然。这些东西，自己以为然当然没问题，拿出来分享，就不得不去收集更多信息以确保准确。

其次，未经包装的知识，很难被其他人吸收。总有人鄙视那些传道者分享者，觉得他们不配享有现在这般待遇。但实际上，分享和专精技术本来就是两码事，专精者未必擅长分享，“教学”本身也是件很难的事情，需要很多的学习和准备。

在当下的环境，做我想做的分享者，必然面临经济时间的两难。我做不到黑下心挣大钱，只好挤时间挣小钱。前面说了，分享需要大量的准备时间，又挣不到什么钱，面对金钱和时间的两难，就更难坚持。

所以我希望和大家共建一个学习环境。我拿出我的经验知识，以原石璞玉的方式授予大家，大家一边自己吸收，一边帮我打磨修饰，最后拿出宝器分享给更多的人；如果能卖出去挣到钱，就一起分成，共建共享。

总的目标

  1. 共同建设，共同受益
  2. 建设的多，回报的多
  3. 不设门槛，能干啥就干啥

共建计划

1. 视频剪辑整理

  1. 我提供视频，任何同学均可进行二次加工和处理
  2. 剪辑完成的视频，效果好的，给予人民币100 ~ 500的奖励（视长度和效果而定）
  3. 视频如果产生商业价值，比如上传至技术网站，四六分账，我占小头

2. 内容整理

  1. 视频、群内聊天，有价值的内容做成脱水版文章、slide、个人分享博客
  2. 分享周报、类库体验、CSS-trick 挑战等
  3. 优秀者送书奖励

3. 视频脱水/二次创作

我甚至欢迎大家整理 slide、文稿，修正错误部分，然后我来重录，或者整理人自己重录都可以（不过必须有我的来源说明）。之后也可以四六分，如果不需要我重录，二八分以可。

先想这三条，长期有效，欢迎有时间有兴趣的同学参与。

\n 与 \r 的区别

所以 \r 换行之后，光标移到此行的 0 位，继续输出，于是新的一行会替代旧的一行，形成的效果就是进度条在更新；而 \n 则会另起一行，形成多行输出的效果。

近期的需求用到命令行输出的解析，在解析类似进度条的内容时，遇到一些问题。经过反复的搜索询问，大概得到答案：主要在于 \r 和 \n 的区别。StackOverflow 的一个答案是这么解释的：

As indicated by Peter, CR = Carriage Return and LF = Line Feed, two expressions have their roots in the old typewriters / TTY. LF moved the paper up (but kept the horizontal position identical) and CR brought back the “carriage” so that the next character typed would be at the leftmost position on the paper (but on the same line). CR+LF was doing both, i.e. preparing to type a new line. As time went by the physical semantics of the codes were not applicable, and as memory and floppy disk space were at a premium, some OS designers decided to only use one of the characters, they just didn’t communicate very well with one another ;-)

所以 \r 换行之后，光标移到此行的 0 位，继续输出，于是新的一行会替代旧的一行，形成的效果就是进度条在更新；而 \n 则会另起一行，形成多行输出的效果。

所以类似我这个需求，直接 line.split('\r').pop() 即可。

另外，new TextDecoder('utf-8').decode(binaryData) 返回的文本都是用 \r\n 做换行的。

在 WebSocket 中处理二进制文本

我厂产品中有个需求，要用 WebSocket 接收很长的一段文本。生产环境中发现，有些内容发送时会失败，经查，是服务器端进行文本转换时，特殊字符处理存在一些问题。于是决定改为直接发送二进制流，我这边也要修改。开始以为要处理 ArrayBuffer，人工转换，后来经过一些摸索找到方法，记录一下。

我厂产品中有个需求，要用 WebSocket 接收很长的一段文本。生产环境中发现，有些内容发送时会失败，经查，是服务器端进行文本转换时，特殊字符处理存在一些问题。于是决定改为直接发送二进制流，我这边也要修改。

开始以为要处理 ArrayBuffer，人工转换，后来经过一些摸索找到方法，记录一下。

const socket = new WebSocket('wss://mydomain.com/path/to/api');
socket.binaryType = 'arraybuffer';
socket.onmessage = event => {
  const decodedString = new TextDecoder('utf-8').decode(event.data);
  // go on
}

其实很简单，主要用到原生类 TextDecoder，并且配置 WebSocket 以二进制文档流的方式来处理返回的数据。 

尬聊会：第13期

回顾本周群内分享内容，然后又聊了一些前端学习方面的内容。

兰卡威跳岛

回顾本周群内分享内容：

  1. 如何提问的技巧 張鑫旭
  2. Build an Excel add-in using Vue
  3. Did you know that style and script tags can be set to display: block?
  4. 使用 Pug 和 Stylus 开发小程序的 watch 脚本
  5. https://gradientjoy.com/ 这个网站很有意思，生成一个随机的渐变图，可以用来当背景或者 placeholder
  6. 纯 CSS 的 tab 页切换

然后又聊了一些前端学习方面的内容。

继续阅读“尬聊会：第13期”

尬聊会：第十二期

尬聊会第12期，讲解了一个纯CSS组件的实现。

视频在此：尬聊会第12期 控件实现/适应行业的发展

时间：2018-07-22 21:45
地点：我的斗鱼直播间 douyu.tv/meathill
回看视频：http://blog.meathill.com/share/galiao-12.html

0. pure css elastic toggle 实现讲解

  1. <label> 的 for 属性和表单元素的 id 对应
  2. :checke + label
  3. transition
  4. overflow: hidden
  5. position: relative/absolute
  6. cubic-bezier

2. 再聊一下行业对我们的要求

  1. 工作6年 -> 普通工程师？
  2. 应该是高级工程师，或技术经理，甚至技术总监

广告时间

2018-08-08晚 8 点，给大家分享我的私活儿技巧：一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP

地址：SegmentFault 讲堂 https://segmentfault.com/l/1500000015754431/

作为一名程序员，我们最常被亲朋好友问到的问题应该是：你会修电脑么？不对，是“你会做网站么？”

对于我们前端来说，写个页面不在话下；可是一个网站，光有前端是不够的，服务器和 API 怎么解决呢？找外援么？我想大家都更愿意自己来吧。

这次分享，我希望教会大家以下技能：

  1. 本地开发环境的配置（基于 Windows 10 Linux Subsystem）
  2. 云服务器的购买和配置
  3. LNMP 环境搭建，安装 WordPress
  4. WordPress 主题开发
  5. 利用 WordPress Ajax API 作为数据接口

基本上，学会这些之后，你就可以在外面接活儿做网站了。希望大家都能借此丰富技能树、挣到更多的钱。

其实，即使不考虑接私活儿挣钱，我也建议前端同学学习一下服务器配置和后端开发的相关知识，对我们理解整个技术体系、业务流程都有巨大帮助。毕竟一座高塔必须坚实而又宽广的底座才能建成。

早鸟政策

  1. 即日起至7月31日，5折
  2. 8月1日至8月5日，75折
  3. 8月6日至开播前，88折
  4. 之后恢复原价

实录地址：

2018-07-29 尬聊会 第12期实录

欢迎加入肉山小课堂一同学习，QQ 群：肉山小课堂答疑交流群 628056148，SF 圈子：肉山小课堂继续深造中心

解决 PHP 7.2.8 + MySQL 8.0.12 连接失败的问题

今天花3个小时解决了一个升级 PHP + MySQL 导致的连接问题，最后用 caching_sha2_password 插件解决的。

这两天又反复遇到这个问题，先写解决方案：

1. 使用 caching_sha2_password  插件

修改用户密码，并且用插件生成，可以解决 WordPress 的问题。

ALTER USER 'user'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'password';

2. 修改 my.cnf，使用原生密码

使用 Laravel + MySQL 8.0 的时候，遇到

SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

修改 /etc/mysql/my.cnf （我是 Ubuntu 16.04），添加下面一行：

[mysqld]
default_authentication_plugin= mysql_native_password

然后重置密码：

ALTER USER 'user'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
继续阅读“解决 PHP 7.2.8 + MySQL 8.0.12 连接失败的问题”