代码改变世界

你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析

2017-09-29 17:54 by 【当耐特】, 537 阅读, 收藏, 编辑
摘要: AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究、产品研发、开源项目的经验沉淀。AC2017 将会继续在工程化、图形处理、Web动画、性能优化等方面呈献团队一年多以来的实践,还将邀请几个业内专家来快速分享他阅读全文

腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面

2017-08-08 11:13 by 【当耐特】, 3483 阅读, 收藏, 编辑
摘要: 今天,腾讯正式开源发布 Omix 1.0, 让开发者使用 JSX 或 hyperscript 创建用户界面。 "Github" 功能特性 超级快的速度, "点击这里体验一下" 超小的尺寸, 7 KB (gzip) 良好的兼容性 IE8 内置支持JSX 和 hyperscript 支持局部 CSS, 阅读全文

腾讯 AlloyCrop 1.0 发布

2017-08-02 11:10 by 【当耐特】, 1517 阅读, 收藏, 编辑
摘要: 写在前面 "AlloyCrop" 这个项目是8个月前发布的,作为 "AlloyFinger" 的典型案例,发布之后被BAT等其他公司广泛使用。但是发布之后,有两个问题一直没有抽出时间去解决: 裁剪图像的分辨率太小,是否可配? pinch双指放大的时候,放大的中心不是双指中心,是否可以优化? 现在很高阅读全文

50行代码实现的高性能动画定时器 raf-interval

2017-07-20 10:42 by 【当耐特】, 786 阅读, 收藏, 编辑
摘要: 写在前面 raf interval 是基于 window.requestAnimationFrame() 封装的定时器。 Github: "https://github.com/dntzhang/raf interval" window.requestAnimationFrame() 方法告诉浏览器阅读全文

QQ日迹Omi实战开发,从0到1

2017-07-17 09:52 by 【当耐特】, 812 阅读, 收藏, 编辑
摘要: 写在前面 相信大家对Omi应该都不陌生了,如果还有不了解的同学先看看这里。了解并使用Omi之后你会发现真的回不去了~~~ "精通Omi框架" 先简单说一下吧,Omi就是一个可以快速开发项目的组件化框架,和vue/react一样为了节省生产力的。想了解Omi和vue还有react区别的,上面文档有讲解阅读全文

腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画

2017-06-21 09:12 by 【当耐特】, 959 阅读, 收藏, 编辑
摘要: pasition Pasition Path Transition with little JS code, render to anywhere 超小尺寸的Path过渡动画类库 "Github源代码" "在线演示" 最近和贝塞尔曲线杠上了,如 "curvejs" 和 "pasition" 都是贝塞阅读全文

腾讯AlloyTeam正式发布omi-cli脚手架 - 创建网站无需任何配置

2017-06-05 12:06 by 【当耐特】, 1059 阅读, 收藏, 编辑
摘要: omi cli "omi cli" "omi cli命令" "omi框架" 用户指南 "文件目录" "npm 脚本" "npm start" "npm run dist" "代码分割" "兼容 IE8" "插入 CSS" "插入组件局部 CSS" "局部CSS使用图片" "插入 Less" "插入组阅读全文

Omi树组件omi-tree编写指南

2017-05-02 14:53 by 【当耐特】, 391 阅读, 收藏, 编辑
摘要: "Omi框架" 能够以少量的代码声明式地编写可拖拽移动节点的树形组件。 通常树组件能够考验UI框架的健壮性,因为需要使用到UI框架的如下特性: 组件嵌套 组件传值 组件批量传值 组件依赖自身递归嵌套(nest self) 子、孙或炎黄子孙访问根组件实例 下面来介绍下使用 omi tree 的开发全过阅读全文

腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs

2017-04-21 10:19 by 【当耐特】, 1589 阅读, 收藏, 编辑
摘要: "【原文链接】" 写在前面 "curvejs" 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 Canvas就是舞台。 官网: "https://alloyteam.github.io/curvejs/" 你还记得阅读全文

Omi全新版本来袭 - 指令系统

2017-04-19 12:37 by 【当耐特】, 650 阅读, 收藏, 编辑
摘要: 写在前面 "Omi框架" 到目前为止有三种版本。 omi.js 使用 "sodajs" 为内置指令系统 omi.lite.js 不包含任何模板引擎 omi.mustache.js 使用 "mustache.js" 为内置模版引擎 "sodajs" 是我们团队高级工程师(dorsywang)的作品,服阅读全文

Omi官方插件系列 - omi-transform介绍

2017-04-05 11:02 by 【当耐特】, 432 阅读, 收藏, 编辑
摘要: "原文链接 https://github.com/AlloyTeam/omi/tree/master/tutorial" 写在前面 "Omi框架" 正式发布了 "omi transform" 作为Omi组件化开发特效运动解决方案,让你轻松在Omi项目里快速简便支持CSS3 Transform设置。先阅读全文

Omi新成员omi-router正式发布

2017-03-31 09:26 by 【当耐特】, 425 阅读, 收藏, 编辑
摘要: "原文链接 https://github.com/AlloyTeam/omi/blob/master/tutorial" omi router "omi router" 是 "Omi框架" 专属的router插件,文件尺寸轻量,使用简便,功能强大。用于Omi制作Web单页应用的首选解决方案。 单页的阅读全文

Omi架构与React Fiber

2017-03-29 11:28 by 【当耐特】, 783 阅读, 收藏, 编辑
摘要: "原文链接 https://github.com/AlloyTeam/omi/tree/master/tutorial" 写在前面 "Omi框架" 在架构设计的时候就决定把update的控制权交给了开发者,视灵活性比生命还重要。不然的话,如果遇到React Fiber要解决的这类问题的话,就需要推翻阅读全文

Omi框架Store体系的前世今生

2017-03-23 10:13 by 【当耐特】, 517 阅读, 收藏, 编辑
摘要: "原文链接 https://github.com/AlloyTeam/omi" Store 体系 先说说Store系统是干什么的!为什么要造这样一个东西?能够系统架构带来什么? 当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯。在Omi框架里,父组件传递数据给子组件非常方便: 通过在组件上阅读全文

Omi v1.0.2发布 - 正式支持传递javascript表达式

2017-03-21 10:07 by 【当耐特】, 500 阅读, 收藏, 编辑
摘要: "原文地址:https://github.com/AlloyTeam/omi/" 写在前面 "Omi框架" 可以通过在组件上声明 data 把属性传递给子节点。 Omi从设计之初,就是往标准的DOM标签的标准传递方式靠齐。比如: 下划线自动转驼峰, data page index传到子组件就变成th阅读全文

Omi v1.0震撼发布 - 开放现代的Web组件化框架

2017-03-20 10:15 by 【当耐特】, 1933 阅读, 收藏, 编辑
摘要: "原文链接 https://github.com/AlloyTeam/omi" 写在前面 "Omi框架" 经过几十个版本的迭代,越来越简便易用和强大。 经过周末的连续通宵加班加点,Omi v1.0版本终于问世。虽然版本遵循小步快跑、频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以阅读全文

omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS

2017-03-16 08:32 by 【当耐特】, 934 阅读, 收藏, 编辑
摘要: 写在前面 "omi cli" 是 "Omi" 的命令行工具。在v0.1.X以及之前版本中,生成出来的项目脚手架 是基于webpack1的。由于: webpack1不支持tree shaking,webpack2 支持tree shaking webpack1不支持 sass loader,webpa阅读全文

Omi应用md2site-0.5.0发布-支持动态markdown拉取解析

2017-03-15 11:00 by 【当耐特】, 187 阅读, 收藏, 编辑
摘要: 写在前面 Md2site是基于 "Omi" 的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。 官网: "http://alloyteam.github.io/omi/md2site/" Github: "https://github.com/AlloyTeam/omi/tree阅读全文

Omi应用md2site发布-markdown转网站利器

2017-03-06 12:57 by 【当耐特】, 428 阅读, 收藏, 编辑
摘要: 写在前面 Md2site是基于 "Omi" 的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。 当我们想把一堆markdown文档转成网站时,你可能有许多选择,倘若选择 md2site ,你一定会爱上她。 官网: "http://alloyteam.github.io/omi/m阅读全文

AlloyTouch之无限循环select插件

2017-03-03 11:34 by 【当耐特】, 392 阅读, 收藏, 编辑
摘要: 写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项。让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动。00ms和01ms是无缝链接起来的。如下图所示: 在线演示 "http://alloyteam.github.io/AlloyT阅读全文

Omi教程-插件体系

2017-03-01 09:31 by 【当耐特】, 604 阅读, 收藏, 编辑
摘要: 插件体系 "Omi" 是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联。 omi drag 且看这个例子: 点击这里→在线试试 js import OmiDrag from './omi drag.js'; OmiD阅读全文

AlloyTouch之select选择插件

2017-02-28 09:29 by 【当耐特】, 339 阅读, 收藏, 编辑
摘要: 写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式。但是众所周知,IOS和安卓的select唤起的选择界面并不是样的,甚至IOS不同系统版本以及安卓不同系统版本下的select唤起的界面也不是相同的。而且省市区多选的需求,不管是IOS和安卓都没有提供原生界面的支持。所以唯一的办法阅读全文

Omi命令行界面omi-cli发布

2017-02-27 10:23 by 【当耐特】, 395 阅读, 收藏, 编辑
摘要: "原文链接:https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi cli.md" 写在前面 通常认为,命令行界面(CLI)没有图形用户界面(GUI)那么方便用户操作。但是CLI比GUI节约资源,在熟悉命令之后,CLI会比GU阅读全文

Omi实战-QQ附近用户列表Web页

2017-02-23 09:58 by 【当耐特】, 868 阅读, 收藏, 编辑
摘要: "原文地址https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_nearby.md" 写在前面 Omi很适合大型复杂的Web页面开发,例如一些Web在线工具的开发。但是制作这种简单的QQ附近用户列表Web页,也不会有大炮哄蚊子的感觉阅读全文

Omi教程-生命周期和事件处理

2017-02-22 10:47 by 【当耐特】, 387 阅读, 收藏, 编辑
摘要: 生命周期 名称 含义 时机 constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完成,HTML已经插入页面之后执行 实例化 uninstall 卸载组件。执行remove方法会触发该事件 销毁时 befor阅读全文

Omi教程-组件通讯攻略大全

2017-02-17 11:40 by 【当耐特】, 409 阅读, 收藏, 编辑
摘要: 组件通讯 "Omi框架" 组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设置 childrenData 自动传递给子节点 声明 group data 传递(支持复杂数据类型阅读全文

Omi教程-组件

2017-02-10 09:44 by 【当耐特】, 704 阅读, 收藏, 编辑
摘要: 组件 "Omi框架" 完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件 这里使用Todo的例子来讲解Omi组件体系的使用。 js class Todo extends阅读全文

Omi原理-Hello Omi

2017-02-09 10:43 by 【当耐特】, 631 阅读, 收藏, 编辑
摘要: Hello Omi "Omi框架" 的每个组件都继承自Omi.Component,本篇会去完成Omi的Component的基本锥形,让其能够渲染第一个组件。 omi.js实现 Omi.getInstanceId 用来给每个组件生成自增的ID Omi.render 用来把组件渲染到页面 基类Omi.C阅读全文

Omi原理-环境搭建

2017-02-08 12:45 by 【当耐特】, 951 阅读, 收藏, 编辑
摘要: 环境搭建 "Omi框架" 使用 Webpack + ES6 的方式去开发;使用karma+jasmine来作为Omi的测试工具。 Karma介绍 Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到C阅读全文

2017年试试Web组件化框架Omi

2017-02-07 10:45 by 【当耐特】, 2028 阅读, 收藏, 编辑
摘要: Open and modern framework for building user interfaces. Omi的Github地址 "https://github.com/AlloyTeam/omi" 如果想体验一下Omi框架,可以访问 "Omi Playground" 如果想使用Omi框架或阅读全文

AlloyTouch实现下拉刷新

2017-01-09 11:46 by 【当耐特】, 815 阅读, 收藏, 编辑
摘要: 原文地址: "https://github.com/AlloyTeam/AlloyTouch/wiki/Pull to refresh" 效果展示 扫码体验 你也可以 "点击这里" 访问Demo 可以 "点击这里" 查看代码 背景 在手机QQ内部,其实客户端提供了下拉刷新的能力,拖动整个webvie阅读全文

AlloyTouch实战--60行代码搞定QQ看点资料卡

2016-12-29 10:09 by 【当耐特】, 534 阅读, 收藏, 编辑
摘要: 原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/kandian" 先验货 访问DEMO你也可以 "点击这里" 源代码可以 "点击这里" 如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用All阅读全文

AlloyTouch 0.2.0发布--鱼和熊掌兼得

2016-12-28 10:56 by 【当耐特】, 498 阅读, 收藏, 编辑
摘要: 原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch 0.2.0" 背景 公司师姐昨日在KM发了篇长文,主要结论RAF+transform3d就是不如transition+transform3d平滑流畅,但是transition阅读全文

Scoped CSS规范草案

2016-12-26 16:09 by 【当耐特】, 708 阅读, 收藏, 编辑
摘要: 原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped CSS" 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。 面对组件化的普及,组件的复用很普遍阅读全文

transformjs污染了DOM?是你不了解它的强大

2016-12-26 09:24 by 【当耐特】, 942 阅读, 收藏, 编辑
摘要: 原文链接: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添加属性太激进,不可取(由于不在那个微信群,不明白为什么React会谈到阅读全文

AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

2016-12-22 11:06 by 【当耐特】, 2386 阅读, 收藏, 编辑
摘要: 原文链接: "https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch FullPage Plugin" 先验货 插件代码可以在 "这里" 找到。 注意,虽然是扫码体验,但是AlloyTouch.FullPage特意对鼠标滚轮事件进行了兼容,所以阅读全文

react动画难写?试试react版transformjs

2016-12-19 09:37 by 【当耐特】, 1930 阅读, 收藏, 编辑
摘要: 简介 "transformjs" 在非react领域用得风生水起,那么react技术栈的同学能用上吗?答案是可以的。junexie童鞋已经造了个 "react版本" 。 动画实现方式 传统 web 动画的两种方式 : 1. 纯粹的CSS3 :如:transition/animation+transf阅读全文

你必须收藏的Github技巧

2016-12-14 09:23 by 【当耐特】, 3310 阅读, 收藏, 编辑
摘要: 一秒钟把Github项目变成前端网站 GitHub Pages大家可能都知道,常用的做法,是建立一个gh pages的分支,通过setting里的设置的GitHub Pages模块可以自动创建该项目的网站。 这里经常遇到的痛点是,master遇到变更,经常需要去sync到gh pages,特别是纯w阅读全文

HTML5 Canvas玩转酷炫大波浪进度图

2016-12-13 11:52 by 【当耐特】, 2725 阅读, 收藏, 编辑
摘要: 如上图所见,本文就是要实现上面那种效果。 由于最近 "AlloyTouch" 要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。 首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。 本文的代码你可以在这里 "https://github.阅读全文

AlloyTouch Button插件-不再愁click延迟和点击态

2016-12-12 15:17 by 【当耐特】, 700 阅读, 收藏, 编辑
摘要: 移动端不能使用click,因为click会有300ms。所有有了fastclick这样的解决方案。然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题。hover会有不消失的问题,所有大家一般用:active。利用 :active 伪类来设置某元素被点击时的点击态样式阅读全文