班会第 36 期 #44

ufologist · 2016-11-26T07:01:35Z

技术
- 前端工程模版
  - 前端工程模版(简单版)
    - 通过 coolie 合并 CSS/JS, 并对静态资源进行版本管理
  - 前端工程模版(模块化版)
    - 通过 coolie 进行模块化开发
  通用规范
  注意事项
  - 所有的后端接口必须使用 backend-api.js 来调用
  - 所有的 APP 接口必须使用 ponto.js 来调用
- Codelf(变量命名神器)
  
  There are only two hard things in Computer Science: cache invalidation and naming things.-- Phil Karlton
  
  Search over projects from GitHub, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Project to find real-world usage variable names. API powerd by searchcode & youdao
  
  并提供 Codelf Chrome App, Codelf for Atom, Codelf for Sublime Text 插件
- BEM — Block Element Modifier
  
  BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand
- 一套基于jquery或javascript的插件库
  
  包含轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件
  
  jquerywidget
- 腾讯 AlloyTeam 移动 Web 裁剪组件 AlloyCrop @px0078
  
  裁剪图片的应用场景有头像编辑、图像编辑，在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪。AlloyCrop就是专注于裁剪图像的组件，目前服务于QQ相关的Web业务，今日正式对外开源
  
  在线Demo演示
- Tesseract.js @Monine
  Pure Javascript OCR for 62 Languages(包括中文), 测试过识别图片手机号码和验证码, 识别率还是蛮高的
  
  Demo
```
<canvas id="input_overlay" style="position: absolute;"></canvas>
<img id="input">
<p id="resultText"></p>
<script src='http://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
<script>
input.onload = function() {
    // 第一次运行需要加载一个很大的语言样本训练包, 需耐心等待
    // 例如: eng.traineddata.gz 有 9M
    Tesseract.recognize(input)
             .then(function(result) {
                 console.log('OCR', result.text, result);
                 // resultText.textContent = result.text;
                 resultText.innerHTML = result.html;

                 // 绘制识别结果中每个字的区域
                 // 参考: http://tesseract.projectnaptha.com/demo.js
                 input_overlay.width = input.naturalWidth;
                 input_overlay.height = input.naturalHeight;
                 var ioctx = input_overlay.getContext('2d');

                 result.words.forEach(function(w){
                     var b = w.bbox;

                     ioctx.strokeWidth = 2

                     ioctx.strokeStyle = 'red';
                     ioctx.strokeRect(b.x0, b.y0, b.x1-b.x0, b.y1-b.y0);
                     ioctx.beginPath();
                     ioctx.moveTo(w.baseline.x0, w.baseline.y0);
                     ioctx.lineTo(w.baseline.x1, w.baseline.y1);
                     ioctx.strokeStyle = 'green';
                     ioctx.stroke();
                 });
             });
};
// 注意图片不能跨域, 否则需要做跨域设置
// 如果直接加载跨域图片, 会报错
// Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
input.src = 'ocr.gif';
</script>
```
- 2016 JavaScript 发展现状大调查 @Monine
  The State Of JavaScript
  - 代码风格（JS预编译语言）: ES6成为了新的标准
  - 前端框架: 选择React准儿没错, Vue越来越火
  - 状态管理: Redux 是最火的
  - API层: GraphQL 看起来比较有前途, REST APIs 仍然是最广泛适用的
  - 全栈框架: 最主流的是Meteor和MEAN, 火起来的还有用React-Redux替代AngularJS的MERN框架。
  - 测试框架: 最主流的是Mocha和Jasmine
  - CSS 构建工具/预处理器: SASS/SCSS是主导, CSS Modules 值得一试
  - 构建工具: Webpack 和 Gulp最受欢迎, Grunt 已经过气了
  - 移动端框架: 原生应用还是最主流的解决方案, React Native 证明了它自己
  观点
  - 现在开发JavaScript有些过于复杂了
  - JavaScript的发展变化实在是太快了
  - JavaScript前途一片大好
- 自学前端开发：代码之外需要关注的问题
  - 学好英语
  - 学会搜索/谷歌
  - 学会提问
  - 学习方式
  - 动手实践: 学而不练则忘
- GraphQL，你准备好了么
  一个多月前，facebook 将其开源了一年多的 GraphQL 标记为 production ready，几乎同一时间，github 开放了其 GraphQL API 的 early access。两颗重磅炸弹先后落地，是否意味着已有五年多历史，和 facebook 的 news feed 几乎同时诞生的 GraphQL 将在接下来的日子里大放异彩，逐渐取代 REST API 的地位？
  - GraphQL 定义了一套完整的类型系统。服务器通过定义数据的类型告知客户端服务器的 capability，所以它也是一份 contract
  - REST API 体系本身及其各个 framework 都没有定义一套合适的类型系统，这就催生了很多零散的，不完善的实现，或者依托于类似于 swagger 这样的工具的实现。
  - GraphQL 定义了一套严谨的查询语言
  - REST API 在此毫无建树，基本上 API 的 querystring / body 没有太多章法可循，大家随遇而安
  由此，GraphQL 可以很容易地通过类型系统和用户定义的 schema 生成强大的验证工具，保证 query 是正确的，且满足服务器的 capability。
  
  GraphQL 很适合作为一层薄薄的 API gateway，成为客户端和各种内部系统（包括 REST API）的一个桥梁
- 如何通过手机号初始化所属地区
  使用《中华人民共和国行政区划代码》国家标准(GB/T2260). 这部分可分为三个层次,从左到右的含义分别是：
  - 第一、二位表示省(自治区、直辖市、特别行政区)
  - 第三、四位表示市(地区、自治州、盟及国家直辖市所属市辖区和县的汇总码)
  - 第五、六位表示县(市辖区、县级市、旗).
  比如厦门市思明区的区划代码为：350203，可以通过简单的运算得出其省级代码为：350000（福建），市级代码为：350200（厦门）
- SwitchHosts!
  
  管理、切换多个 hosts 方案的工具
- 还在用Android自带的WebView组件？太Out了！
  - 为何不直接使用内置的WebView组件？
    - 内存泄漏的问题
    - 在4.4以前的版本是WebKit的内核，4.4以后才换成chromium的内核，要考虑兼容以前的版本
  - 第三方可靠的WebView组件
    - Crosswalk
      
      Include the Crosswalk Project web runtime with your hybrid Android or Cordova / PhoneGap app, and users will consistently see it through a predictable, powerful WebView based on Google Chromium.
    - TBS腾讯浏览服务
      
      由腾讯QQ浏览器团队出品。支持“共享X5内核模式”和“独立下载X5内核模式”, TBS Android SDK（完整版）285KB 可独立下载x5内核，也可共享使用微信或手Q的x5内核, TBS Android SDK（精简版）194KB 不可独立下载x5内核，只能共享使用微信或手Q的x5内核
  - 最终我还是选择了TBS服务
    - 因为我不希望最终的APP体积突然增多了20M（Crosswalk需要整体打包进APP）
    - 小马哥的微信、手机QQ等APP在国内的装机量实在是太高了，而且能够支持以共享X5内核的方式，在自己的APP里面直接调用微信或手机QQ的浏览服务，我认为未尝不是一种好的解决方案。
  如何判断已经成功接入了腾讯的X5内核浏览服务呢？辨别是否使用x5webview的方法：
  
  显示网页文字时，可通过长按选择文字的标识判断，如下水滴状选择效果就是 x5webview 的标志
- 如何在微信6.0.2+版本不接入微信API的情况下设置自定义分享内容（图片、链接、标题）
  微信在6.0.2及以上版本已经回收客户端自定分享的权限，而是以授权api的形式开放出来。有时候我们只想简单地自定义分享的title,分享的图片以及分享的链接时，而不想或者缺乏资源去接入微信api的时候该怎么实现呢？以下方法即可在微信6.0.2+版本自定义分享内容，不需额外引入微信的js文件
  - 设置分享title
    
    修改 document.title 值即可
  - 设置分享图片
    
    在页面隐藏一张尺寸大于290*290的图（图片需要容器包裹，设置容器css属性display:none即可）
  - 设置分享的链接
    
    修改 document.documentURI 的值即可（safari下，document.documentURI为只读属性，可借助history.pushState, 但此方法有一个弊端：就是复制当前页面url时，页面的链接就会是pushState设置的链接了）
  - 我们不能自定分享的描述内容（desc），默认使用了document.documentURI
  通过解压微信app(android),分析js源代码来了解微信api的运行原理
- 如何开发一个App（Android）
  从整个大局去把握如何去构思一个app的开发，让你对独立开发一款app的时候有个理解
  
  这里只是提供一个如何开发一个app的思路, 从整个大局去把握如何去构思一个app的开发, 整个app开发流程是怎样的, 并不会介绍很多技术上的细节，但理解app流程对自己把握产品很有益处，虽然我们只是一个小小的开发者，但如果你有追求，哪天轮到你去负责一个产品的时候，你就应该对开发的每一个环节都了如指掌，因为出了问题，你也知道怎么针对性的去解决。笔者虽然只是一个小小的开发者，但也乐于思考，很多时候不太愿意被别人牵着鼻子走，因为我们的人生就应该把握在自己手里。
  - 开发环境
  - 开发工具
  - 模拟器
  - 产品开发流程
    - 产品规划，定产品方向
    - 需求调研，产出需求文档
    - 需求评审，修订需求文档
    - 产品经理(狗)画app线框图提供给设计(射鸡)师
    - 设计(射鸡)师根据线框图设计视觉稿
    - 程序员(猿)根据视觉稿搭建UI框架
    - 程序员(猿)根据需求文档开发功能
    - 测试(媛)编写测试用例，根据排期进行测试
    - 程序员(猿)修复回归测试反馈的bug，提交beta版
    - 测试通过，提交给运营(喵)发布到渠道上线
  - 快速搭建项目
    - 定开发规范
    - 搭建UI框架
    - 选用开发库集成（或自造轮子）
    - 第三方服务集成（视情况而定）
- StatusBarUtil 状态栏工具类（实现沉浸式状态栏/变色状态栏）
  
  这是一个为Android App 设置状态栏的工具类，可以在4.4及其以上系统中实现沉浸式状态栏/状态栏变色，支持设置状态栏透明度，满足你司设计师的各种要求
- Android 启动页 (Splash) 的实现
  - 先显示一个界面，停留1~2s，然后跳转到另一个界面
  - 只显示一次启动页（ App 没被 kill 的情况下）
    微信打开之后，按下返回键回到桌面，再打开微信，并不会再看到启动页（除非你手动清了微信的后台或者被系统 kill 了），这个是怎么实现的呢？其实很简单，只需要重写一下 MainActivity 的 onBackPressed() 方法就行
  - 全屏页面切换到非全屏页面的问题
    
    由于启动页一般是全屏显示的，而主页则不是，因此从全屏切换到非全屏就存在一个卡顿的问题. Android 全屏界面切换到非全屏界面的问题
- iOS App上架流程(2016详细版）
  - 前言
  - 准备
  - 检查
  - 生成发布证书
  - 创建App IDs和绑定你的App的Bundle Identifier
  - 生成描述文件（描述文件的作用就是把证书和Bundle Identifier关联起来）
  - 在App Store开辟空间
  - 在Xcode中打包工程
  最后我只想说, 上架 iOS App 看样子非常费劲的说... :(
产品
- 我们现在能手把手帮您做Material Design设计了
  Material Design
  - Gallery ，您不妨把它理解成是设计师版的 GitHub 。有了它，人们就可以更轻松地上传、分享、评论设计方案
  - Remixer ，应用开发者可以用它来快速完成程序的可动原型
- 打字速度
  - 从0开始学习, 选择注册为"Students"
  - 打字速度测试
  - 打开源代码来练习打字
  两个目标
  - 盲打：常用字母和字符不需要看键盘就能打，减少编程时由于视线切换而造成的思路被打断
  - 快速：在盲打的前提下，打字速度快，这样在编程过程中思路更流畅，效率更高
  三个阶段
  - 初级：盲打每分钟超过20个单词
  - 中级：盲打每分钟超过40个单词
  - 高级：盲打每分钟超过60个单词
  我做的一分钟打字测试的结果

The text was updated successfully, but these errors were encountered:

ufologist added the Weekly label Nov 26, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

班会第 36 期 #44

班会第 36 期 #44

ufologist commented Nov 26, 2016 •

edited

Loading

班会第 36 期 #44

班会第 36 期 #44

Comments

ufologist commented Nov 26, 2016 • edited Loading

ufologist commented Nov 26, 2016 •

edited

Loading