本次react 大会 我认为技术层的重点在react服务端渐进渲染 和 react native desktop。 一. Suspense 和 服务端渐进渲染 Suspense 是解决 加载中 的问题。 之前这种异步加载的加载中状态是使用state，手动来控制显示隐藏，多个接口请求时，还需要手动提升状态。 Suspense 封装了这个逻辑，其实这个之前已经可以用了，这次最大的改变是在服务端渲

我们总有一种感觉，机器学习门槛高、难入门。这是因为这里有太多晦涩的概念「神经网络」、「评估指标」、「优化算法」等让初学者老是有种盲人摸象的感觉。甚至连理解一个 Tensorflow 官方 Demo 都感觉吃力，因此不少开发者就有过「机器学习从入门到放弃」的经历。 ​本文站在全局视角，通过分析一个 TensorFlow 官方的 Demo 来达到俯瞰一个「机器学习」系统的效果，从而让读者看清这个头大象

在colab上开发测试完成后，投入到生产中，就要部署为服务了。采用通用restful api的形式，通过接口上传图片，json格式返回识别出的数据。 部署方式 服务框架 由于tf为python语言，所以直接用了python的轻量级框架flask，这里只提供一个接口，就是分析图片内CRM组件的接口。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

上文我们已经识别出了组件，组件文案。接下来就可以通过这些数据生成前端代码了。 这里沿用阿里DSL的格式，先将识别内容生成通用scheme,再把scheme根据不同的DSL转换为相应语言、框架的代码。这样做一方面提高通用性，另一方面，可以把scheme复制到编辑器中进行可视化编辑。 编辑器demo: https://blog.dappwind.com/crm-editor/#/zh-CN/

接上文，已经识别出页面元素，接下来需要识别出文字，并与元素关联 https://blog.dappwind.com/2020/05/13/index.html 元素的文字识别 使用 tesseract的效果好很多，所以采用 tesseract。 tesseract测试: https://github.com/yuxizhe/OCR/blob/master/tesseract.ipynb 如

opencv提取图片中的矩形 opencv 提取图片中的矩形代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 5

表单自动生成 机器学习 模型训练 数据获取 按照HTML表单元素分类，进行截图。因为这里不是目标识别，只是分类，所以自动生成作用不太大。 目录按照如下编排，每个类别建立一个文件夹，里面放相应的截图图片，方便后续处理，对图片形状大小不做要求。 1 2 3 4 5 6 7 main_directory/ ...class_a/ ......a_image_1.jpg ......a_image

背景 2017 年，一篇关于图像转代码的 Pix2Code 论文掀起了业内激烈讨论的波澜，讲述如何从设计原型直接生成源代码。随后社区也不断涌现出基于此思想的类似 Screenshot2Code 的作品，2018 年微软 AI Lab 开源了草图转代码 工具 Sketch2Code，同年年底，设计稿智能生成前端代码的新秀 Yotako 也初露锋芒， 机器学习首次以不可小觑的姿态正式进入了前端开发者的

Practice of Flutter Desktop https://flutter.dev/desktop Background We were going to build a cross-platform desktop app, there are two choices: native and electron. Because I have used Flutter befor

Flutter桌面端调研 官方文档 https://flutter.dev/desktop 背景 我们要做桌面版的客户端，有原生和RN两种选择。因为之前开发过flutter，记得flutter也支持桌面端，所以就试用了下。 flutter的介绍及开发见这篇文章 https://blog.dappwind.com/2019/09/01/index.html 打包好的Demo例子 雪糕应

背景 雪球目前有3个App，雪球、蛋卷基金、雪盈证券，每个app又有各种版本比如feat、rc、sep等等。在开发阶段打出包后，如何能让开发同学测试同学，设计同学，产品经理等快速找到，并方便的安装到手机上？很旧之前是有个网页提供下载，但是年久失修，没有分类不支持搜索，安装也不太方便。所以就有了重构雪球应用广场的需求。 整个重构包括打包优化，后台接口，与前台界面。这里主要介绍前台界面。 19年7

一.背景 日志数据和apm数据被es处理后，能配置出可视化的查询图表，能及时了解server和网站的实时运行情况，但是还是需要人工定时查看。所以对es采集处理后的分类数据和图表，实现自动监控和报警的功能 二.方案 1.es 自己的watcher alert 功能 es 的 basic 授权license不带 watcher功能，需要购买 GOLD license https://www.ela

概览 1. vue 和 js 改为webpack打包 * 升级babel * 引入webpack config * 添加webpack loader * 生成入口列表 entry * 结合到gulp流程 * 增加可视化打包分析 2. 开发模式热更新 * we

使用apm时，处理数据时发现 有的字段没法检索，发现是没有建立mapping的原因，可以看到有个小三角， 一般这种情况下， 在 management > index Patterns 中点击刷新就行 但是跟预期不同的是，fields数量并没有增加，还是建立不了mapping. 尝试修改mapping文件 发现只有通过api的方式修改，只能全量更新，而且点击refresh field l

apm-server.yml 配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 output.elasticsearch.hosts: [ip1,ip2,ip3,ip4] queue.mem.events: 51200 output.elasticsearch.workers: 4 output.elasticsearch.bulk_max_size: 5

1.静态内容 github pages 优点 * 方便 用的人多 缺点 * 访问慢 不稳定 * 无CI,不过外部工具也很多 gitlab pages 优点 * 有CI 可以持续集成 缺点 * CI编译慢，不稳定 coding 优点 * 国内访问快 缺点 * 需要在页面上给coding打广告 * 第一次打开会出现广告 虚拟

可视化活动页配置平台 背景 因为活动页的特点，就是要求快速上线，经常修改。我们回想下发布活动页时的情况： 运营会想: * 我要发布个运营页面，为什么还要看前端的排期？为啥不能自己配置，我要自己改代码。 * 我要改个文案，前端怎么两个多小时了还没改好，是不是能力有问题？而且改多了还发急，态度不好。 前端也会吐槽： * 一个活动页，来回改，改了一遍又一遍，提了十几个PR全是文案修改，项目

nodejs 编写简单 cli Command Line Interface，顾名思义是一种通过命令行来交互的工具或者说应用。SPA应用中常用的如vue-cli, angular-cli, node.js开发搭建express-generator，还有我们最常用的webpack，npm等。他们是web开发者的辅助工具，旨在减少低级重复劳动，专注业务提高开发效率，规范develop workfl

简易vue框架实现 找到了个简单代码实现了vue的少许基本功能的例子，有助于了解vue源码，加深对框架的理解。遇到问题也可以从原理方面分析。 实现目标 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

字体加载 技巧 DIN-Bold 苹果有 安卓没有 如果只用外部字体 加载时间中 该字体空白 体验不好 安卓： 在页面中加入 preload 1 苹果： 不支持preload 但是苹果本来就有这个字体 如果定义外部字体为同样的名字的话 会覆盖本地字