news.aotu.io

aotu.io

第2季极客沙龙资料分享 - 知行·前端体验主题交流会 | Aotu.io「凹凸实验室」

https://aotu.io/notes/2017/01/04/geek-talks-s2

第2季极客沙龙资料分享 - 知行 前端体验主题交流会. 这个分享主要抛出了一种 以现有Web开发构建手段去开发微信小程序 的思路，有点类似 用Reactjs去开发原生APP 的感觉。 如果没记错，vue2.0的一个有名的开源案例 vue-hackernews-2.0. 如若转载，请注明出处 凹凸实验室 https:/ aotu.io/notes/2017/01/04/geek-talks-s2/.

aotu.io

Aotu.io「凹凸实验室」

https://aotu.io/index.html

轻氧 - React Native 安卓版 V1.0. 讲述了在 Web 开发中常见的几种 2D 碰撞检测，内含运行实例 基于 Canvas 、图片说明。 使用 Snap.svg 制作动画. 介绍 Snap.svg 以及其制作动画的几种方式、兼容性和使用建议. Sass-svg 一个内联 SVG 的 SASS 库. 将SVG代码转化为 Data-URI 的 Sass 库. 利用订阅 发布模式来实现微信小程序 Page 间通讯. ELF - 灵活可扩展的 HTML5 构建工具. 面向开发者的灵活可扩展的 HTML5 构建工具，提供命令行工具 elf 基于 Webpack ，无需构建配置文件并可进行开发，可用来制作各种 HTML5 场景营销活动页面，也可自由的通过模板和组件的组合来快速定制开发。 第2季极客沙龙资料分享 - 知行 前端体验主题交流会. 三看 SVG Web 动效. 塔罗牌 - 轻氧 V1.4 尝鲜体验邀请. XCel 项目总结 - Electron 与 Vue 的性能优化.

aotu.io

Aotu.io「凹凸实验室」

https://aotu.io/cates/体验报告/index.html

苹果的 OS 在不断发展，Safari 亦越变强大性感，在最新的 9.0 版本当中，Safari 增加了不少新的特性，这里主要介绍一下和 Web 前端密切相关的。

aotu.io

css3 animation 属性众妙 | Aotu.io「凹凸实验室」

https://aotu.io/notes/2016/11/28/css3-animation-properties

本文不会详细介绍每个 css3 animation 属性 需要了解的同学可先移步 MDN. 而是结合实际的开发经验，介绍 css3 animation 属性的一些使用场景及技巧。 AniSecond 延迟 2s 执行*/. Css3 animation 亦可实现一些 js 的效果，例如利用. Infinite linear both;. From 1 to 4 {. 125;) {. Keyframes ani {. 0%, 33 .33. 100% { opacity. See the Pen KNvRxZ. By Yetty ( @Yetty. From 1 to 6 {. 125;) {. See the Pen listAni. By Yetty ( @Yetty. From 1 to 6 {. 125;) {. See the Pen listAniInfinite. By Yetty ( @Yetty. Linear both alternate infinite;. 125;) {. 125;) {. 125;) {. See the Pen listAniPaused.

aotu.io

项目心得 -- 京东云改版 | Aotu.io「凹凸实验室」

https://aotu.io/notes/2016/12/02/jcloud

面对这种时间线短、各线并行、存在 变数 的项目，主动获取项目信息尤其重要，个人觉得比较重要的有以下几个 项目整体信息结构、整体的时间线规划、视觉稿的具体输出日期、视觉交接 Deadline、前端开发的周期、前端交接 Deadline、项目各线对接负责人。 整体的时间线规划、视觉稿的具体输出日期、视觉交接 Deadline、前端开发的周期以及前端交接 Deadline，这些信息都是项目时间维度上的信息，这类信息的确认，可以让我们更准确评估工作量 在时间线内是否可以完成所有工作 ，从而在项目紧急性方面做好更合理的人力投入。 拿到设计稿的时候，发现视觉设计师只提供了一份 1280 分辨率的宽屏版，国内分辨率使用占比名列前 5 的 1024 分辨率并没有兼容，带着疑问找到视觉确认，得知首页会有 1280 分辨率和 1024 分辨率两个版本，适配 1024 分辨率版本会迟一点给到。 当产品找到视觉，视觉回答 立项的时候文档没有写到分辨率兼容情况呀，所以当时只做了宽屏1280了 ，最后产品 还是兼容一下吧，做一个窄版适配吧 ，再然后视觉和前端就只能。 确实啊，高清屏适配每一个图标我都要给一个 2X 图你，10个图标...

aotu.io

vim给代码行尾加分号的几种方法 | Aotu.io「凹凸实验室」

https://aotu.io/notes/2016/12/08/vim-4

Bar = 'is a team'. Foobar = foo bar. 完成一行分号的输入 ($a; Esc ). 移动到下一行，重复步骤1再来一遍，完成第二行 (j$a; Esc ). J$a; Esc ). 好累，还不如鼠标点呢，vim的哲学就是 Don’t repeat yourself. 完成一行分号的输入 ($a; Esc ). 直到返回普通模式为止(也就是输入 Esc 或 Ctrl [ ，Vim会记录每一个按键操作。 完成一行分号的输入 (A; Esc ). 如果macvim或者gvim则是 Ctrl q 进入列块可视模式，. 这个方法里用了可视模式里列块选择， Ctrl v 是进入列块选择，通过移动建立选取后，使用. X,ynormal A;. Aotu/ , /labs/ d. 1,5 co 100. X,y g/pattern/normal A;. X,y v/pattern/normal A;. 就是这个宏的名字叫做a,宏的名字可以是26个字母中的某一个，大小写都可以，然后可以看到vim状态栏上显示 recording @a ，这时你的所有操作都会被记录。 QaA; Esc jq.

aotu.io

Aotu.io「凹凸实验室」

https://aotu.io/cates/生活玩乐/index.html

凹凸实验室(Aotu.io，英文简称O2) 始建于2015年10月，是一个来自京东 深圳 年轻富有基情的技术团队。 What Does the Foo Mean. 以前在不少编程书里经常看到 foo 、 bar 这对 couple，一直不知道他们的具体含义，于是默默去 google 搜了一下，发现结果还挺有意思.

aotu.io

Aotu.io「凹凸实验室」

https://aotu.io/cates/NodeJS/index.html

ELF - 灵活可扩展的 HTML5 构建工具. 面向开发者的灵活可扩展的 HTML5 构建工具，提供命令行工具 elf 基于 Webpack ，无需构建配置文件并可进行开发，可用来制作各种 HTML5 场景营销活动页面，也可自由的通过模板和组件的组合来快速定制开发。 FeWorkflow - 使用electron, react, redux, immutable构建桌面App. 使用react, redux, immutable框架做ui开发，仍然基于运行gulpfile的方案，这样可以使每个使用自己团队的gulp工作流快速接入和自由调整。 本文介绍用 Node.js 中的依赖库来处理 Excel 文件，主要阐述用js-xlsx、excel-export 库来处理 Excel 文件。

aotu.io

三看 SVG Web 动效 | Aotu.io「凹凸实验室」

https://aotu.io/notes/2016/11/22/SVG_Web_Animation

三看 SVG Web 动效. CSS3 动效玩腻了吗 没关系的，我们还有 SVG。 事实上，越来越多的网页动效达人选择在 SVG 的疆土上开辟动效的土壤，即便 SMIL 寿终正寝，事实上这反而将 SVG 动效推向了一个新的世界 CSS3 Animation SVG。 A Guide to Alternatives to SMIL Features. 还记得我在久远的 以电影之眼看 CSS3 动画. 中说道 CSS3 动画简直拥有了整个世界 那么带上 SVG 的 CSS3 动画则已突破天际向着宇宙级的可能性前进 感觉给自己挖了一个无比巨大的坑，网页动画界可不敢再出新技术了[扶额]。 CSS 与 SVG 的打通无疑将 html 代码的可读性又推上一个台阶，我们可以通过 CSS 控制 SVG 图形的尺寸、填色、边框色、过渡、移动变幻等相当实用的各种属性，除此之外，将图形分解的动画在这种条件下也变得相当简单。 标签对代码进行包裹，可直接将代码段插入 html 中，也可以保存成 svg 文件之后使用. SVG markup here. -. 0 0 89.4 12.4". 这个值采用的算法是 从需要判定的点向任意...

aotu.io

Aotu.io「凹凸实验室」

https://aotu.io/cates/Web开发/index.html

讲述了在 Web 开发中常见的几种 2D 碰撞检测，内含运行实例 基于 Canvas 、图片说明。 使用 Snap.svg 制作动画. 介绍 Snap.svg 以及其制作动画的几种方式、兼容性和使用建议. Sass-svg 一个内联 SVG 的 SASS 库. 将SVG代码转化为 Data-URI 的 Sass 库. 利用订阅 发布模式来实现微信小程序 Page 间通讯. 三看 SVG Web 动效. WeUI for 小程序 - 为微信小程序量身设计. 朋友，你听说过 CSS3 Mask 这个属性吗.