一周看点@2019-02-25 ~ 2019-03-03 (11)

[whatwewant]

小程序通用转译框架娜娜奇1.1.2发布 - 知乎

• 娜娜奇(nanachi)，模糊记得第一次了解到nanachi，不当时正妹大佬还没开始，只是在知乎发布了大概想法，当时taro也发布没多久，一不小心taro发布了1.2 (2018.12.18)，nanachi也发布了1.1.2 (2019.02.25)
• 娜娜奇(nanachi)是司徒正美亲手操刀的，由去哪儿出品的小程序转译框架，类似京东的Taro，是以React方式编写代码，然后转译成各种小程序、H5和App.
• 想了解更多请查看全文; 另外附上 京东Taro 1.2 阅读的链接
• tags: 发布,小程序,Taro,Nanachi,司徒正美,携程,前端之巅,Nanachi 1.1.2

我在淘宝做前端的这三年 — 第一年 - 知乎

• 本文是前端开发大佬于江水的经验之谈，写的不错
• 系列:
  • 第一篇(第一年) 总结如何进入淘宝，要用什么样的策略，如何站在老板角度看问题，我眼中的阿里文化等
  • 第二篇(第二年) 总结如何评审需求和推进项目，如何理解业务，飞冰项目的起源等 (待发布，预计20190305)
  • 第三篇(第三年) 总结如何管理开源项目、推广项目，对招聘面试的思路，以及技术危机，我离职的原因，技术移民的考虑和未来规划等 (待发布，预计20190312)
• 内容关键词
  • 工作方向: 市场前景 + 个人兴趣
  • 职业规划理论: 专注一个领域三年可以成为高手，五年成为专家，十年成为高级专家
  • 思考: 兴趣第一，辅以专业，等待机会
  • 经验: 笨鸟先飞，大力出奇迹
  • 工作经验:
    • 规范的开发流程
    • 线上问题无小事
    • Debug能力和阅读代码能力
  • 大公司相对于小公司的好处: 更愿意和更容易尝试和应用新技术，提升整体开发效率，而不是眼前
  • 工作处事:
    • ( Coide Review 和 Share => 发现能力 )
    • 1 跟对老板，比做对事情重要 (完全同意)
    • 2 不要试图耍心机或者邀功、抢功
    • 3 认真记下老板的建议，多多反思
    • 4 遇到"不公"，先想想自己哪里做的不够好
    • 5 抓住机会跟老板多交流 (完全同意)
    • 6 从老板或者更高的角度考问题 (这一点虽然没提，但是也能从文中看出这个意思，这点相当重要)
  • 阿里文化和高管分享
    • 1 诚信第一
    • 2 公司里薪资保密
    • 3 不要经常换工作，做一份工作通常3-4年才会有所沉淀，对这个领域非常了解 (这个是相对的，给了默认前提是公司稳定，文化良好，符合大佬的兴趣和期望，有发展前景等，还是需要根据情况而定，是建议而不是必定的)
    • 4 在IT行业，工作和兴趣要尽可能贴合，可以发挥最大效果
    • 5 牛逼的架构师一定是业务、前后端各种技术栈全部都有很深的理解
  • 晋升: 如何用一句话让老板帮你晋升 => 帮我晋升，老板你才能晋升
• tags: 文章,职业规划,招聘,晋升,离职,入职,于江水

【第1538期】聊聊前端国际化文案该如何处理 - 前端早读课

• 说说目前已存在的国际化的方案
  • 1 最原始: 加载 en-US.json
  • 2 前端工程化以后: 将 en-US.json / en-US.js 打包进入代码 (这也是目前市面上比较常见的)
  • 3 umi/locale: 和第二种有类似的地方，但是出发的角度是写成专门的工具，通过约定第二步中的文案格式，这个方案是有很大进步的
  • 4 onesky: 其实这个方案很老，在ruby圈里早就不是什么新鲜的东西了，然而却是本文的核心，也就是本文基本上是这个方案在js圈的思考，最终一致，那么是什么呢?
    • 核心: 根据约定给国际化编码，脚本自动扫描全文要国际化的地方，然后上传到服务后台，等待翻译人员翻译完后，开发通过固定脚本拉取翻译，最终编译到代码中
  • 5 思路1: 前半部分希望使用方案4中的自动扫描上传方案; 使用动态翻译，学习3约定成工具, 但是数据从服务器动态获取; 另外我们需要有前端应用服务，自动动态从第三方服务器上拉取翻译到我方服务器上, 并将其做成静态化接口，甚至上CDN服务。这样减少了前端冗余代码，翻译服务设计良好，满足前面的各大有点，缺点也有，翻译服务和前端应用服务都不是问题，但是动态获取会降低用户体验，当然也有缓解方案
  • 6 思考2: 在方案5的基础上，针对动态翻译的问题，我们可以将前端应用服务改造为SSR，使用服务端渲染帮我们解决这部分问题，这是目前个人觉得最优的方案, 兼具用户体验和应用性能.这一方案，评论区大佬于江水也提到了，阿里内部其实是这么做的
• tags: 文章,i18n,国际化,多语言,i20n,阿里,umi,locale,onesky,CDN,SSR,翻译服务,前端应用服务

学好前端的 6 点建议 - phodal

• 1 夯实基础: 前端三驾马车要开好
• 2 深究原理: 从会用开始，但不止于会用，要深入源码，了解灵魂
• 3 注重细节: 一定要对自己的代码严格要求，精益求精
• 4 登高见远
• 5 良师益友
• 6 紧跟潮流
• tags: 前端,经验,极客精神

Flutter 1.2发布，带来全新的Web开发工具！

• 新功能
  • 提升核心框架的稳定性、性能和质量
  • 努力完善现有小部件(widgets)的视觉效果和功能
  • 为Flutter开发者提供新的Web开发工具
• tags: 发布,Flutter,Flutter 1.2,React Native,Native

注意这12个设计细节，搞定深色界面妥妥哒 - UI头条

• 1 文字颜色
• 2 文章间距
• 3 文字字体
• 4 图标形状
• 5 按钮状态
• 6 分割线
• 7 色彩搭配
• 8 色彩倾向
• 9 色彩感知
• 10 黑色
• 11 视觉层次
• 12 留白
• tags: 文章,设计,Design,UI

roadhog 2.0 发布 - sorrycc/blog

• tags: Roadhog,Webpack,Roadhog 2.0,Umi,af-webpack

webpack code splitting 解析 - frontend9/fe9-library

• 1 什么是 code splitting
  • 1.1 必要性
    • 1.1.1 减小单一资源大小, 减少冗余
    • 1.1.2 提取公共模块, 提高复用模块缓存命中率
  • 1.2 chunk概述 - 分类: initial 和 async
    • 1.2.1 initial 是指初始化 chunk, 一般就是每个 entry 对应一个
    • 1.2.2 async 是动态加载的部分, 也是项目里面dynamic import加载的部分
• 2 解析 SplitChunksPluginz
  • 2.1 配置说明(optimization.splitChunks)
  • 2.2 构建产物生成规则
    • 2.2.1 预加载 - prefetch => webpackPrefetch
• 3 示例
• tags: webpack,code splitting,prefetch,splitChunks

Package Diff: diff npm packages 的新方式 - JavaScript Daily

• tags: NPM,Diff

You can now use Expo APIs in any React Native app – Exposition

• Expo 终于把大块头切成一个个小的单独package了，并且允许使用，这相比于之前应该算是进步很大了
• tags: React Native,Expo

OpenWebMonitor - 实时监控网页变化，并报警通知[Win/macOS] - 小众软件

• tags: 工具,实时监控,报警