Friday's daily life

Friday's daily life

AI生成的UI设计，现已胜过八成人类设计师

## 当UI拼搭效率大幅提升，对行业未来意味着什么？ ![Open AI Image 2模型生成的UI设计](https://miro.medium.com/v2/resize:fit:1000/1*Ff50cQeYMpt4oaggUZ7HWg.png) 当下各大厂的AI主导权争夺战打得正热。Anthropic刚推出Claude Design没几天，OpenAI就甩出了全新的图像生成模型，这次还专门针对UI设计做了调优。我亲自测试了一番，不得不说结果相当惊艳。 ## 等等，真的假的？两年前ChatGPT刚能生成图像的时候，它做的UI设计烂得和当年爆火的「威尔史密斯吃意大利面」恶搞AI图差不多。看得出来那时候模型是拿设计师作品站Dribbble的数据训练的：它拼命想把界面做得吸睛有创意，但界面本身错得离谱，笑死人。 ![2023年的AI生成UI烂得离谱](https://miro.medium.com/v2/resize:fit:1000/1*KVMSZQ8Ix9aMgvtW87_nqA.png) 这就是2022年底到2023年初AI做UI的水平 ### 现在早就不一样了我用两个简

测试自动化

Javascript测试框架

了解几种JS测试框架，以供接下来工作中的需要。下面是几种近几年评价较高的JS测试框架： 1.Jest 由Facebook团队研发，用于测试应用代码，尤其是React应用。React Redux testing [https://www.lambdatest.com/testing-cloud/react-redux-testing]. Jest之所以比较特殊在于它提供了一个集成框架，无需复杂的配置，只需要通过npm安装即可使用。 npm install --save-dev jest 为何Jest作为一个自动化测试框架如此受欢迎？主要在于以下几点： * 开箱即用，并且附带一个断言库，因此不需要再像其他测试框架那样需要自行搭配额外的三方断言库。测试用例通过行为驱动（behavior-driven）的方式实现。你可以将你的测试用例文件放在_test_目录下运行。 * Jest的文档很棒，并且它是一款性能非常不错的测试框架。 * Jest提供了一组测试工具，他们有更高的鲁棒性，更少的错误。 * Jest可以通过抓取截图来进行可视化回归，如果你的应用React应

PIXI.js 学习（三）

学习如何从一个 spritesheet 中将素材提取出来，生成动画

RxJS 基础（一）

如果有过响应式编程的经验，学起来应该比较容易接受一些。我们先从最基本的内容学起。通过这一篇文章，我们可以对 RxJS 这个库有一个基本认识。

浅尝 Workbox（一）

工作中接触到了ServiceWorder相关的只是，目前公司内项目中用的Google提供的Workbox方案，所以就打算学习下

PIXI.js 学习（二）

今天继续学习PIXI.js吧，虽然已经很晚了。。 PIXI.js 的主要组件分为 Renderer @pixi/core PIXI.js 的核心组件，渲染 scene graph 到屏幕上，底层默认使用 WebGL 渲染器渲染 Container @pixi/display 主要的显示对象，会创建一个 scene graph：一个可渲染的对象树，比如 sprites， graphics 和 text Loader @pixi/loader 提供了一组用来异步加载资源文件的工具，音视频，图片资源等 Ticker @pixi/ticker 提供了基于时钟的周期性回调，你的游戏更新逻辑将会在每一帧执行，你可以同时使用多个tickers Application @pixi/app 一个简单的封装帮助类，封装了Loader，Ticker

PIXI.js 学习（一）

今天突然心血来潮想要做一个游戏可能是前几天看了《失控玩家》这个电影吧，应该是有点影响的我相信大部分码农在刚开始写代码之前都幻想过做一个黑客，或者等学会写代码之后做一款理想中的游戏我两种都幻想过，但是一个都没实现，哈哈废话不多说了，之前了解过 PIXI.js 这个库，从这个开始吧官网说这不是一个游戏框架，因为只包含了游戏的图形渲染部分不过这些都是次要的，先从画面开始下面开始吧，PIXI.js 官网走起！还是先不要立Flag了，之前立了Flag都半途而废了，哈哈

CG练习（一）一点透视

一点透视练习

CG学习

PS软件运用图层 1.叠加模式：修改颜色，上色 2.减淡模式：增加亮度，高光效果 3.正片叠底：取颜色正面暗面颜色 H. 色相 S. 纯度 B. 明暗 Photoshop工具使用用来创建选区：选框工具(m)，套索工具(l)，快速选区工具(w) 裁剪想要的形状：裁剪工具(c) 取色：吸管工具(i或cmd+单击色块) 创建简单图形或路径：形状工具(u)，钢笔工具(p)，使用直接选择工具(a)选择锚点 Photoshop快捷键移动工具:v 选框工具:m 套索工具:l