前端信号Signal是什么?原子CSS组件是什么?OMI 响应式WebComponents和OmiElements来袭

2023-11-07
阅读 15 分钟
341
2023 年了,各大框架纷纷放弃兼容 IE11,如果不考虑 IE11 的情况,便可充分利用浏览器当前全新的特性,那么前端框架该设计成什么样子?
封面图

【开源】Westore Cloud 发布- 没后端没SQL没DBA,只需 javascript 开发云端小程序

2018-10-10
阅读 6 分钟
2.3k
Westore Cloud - 隐形云,NoBackEnd,NoSql,HiddenDB 好的设计便是感觉不到设计的存在 开发小程序,但是:没有后端!没有运维!没有 DBA!没有域名!没有证书!没有钱!没有精力! 没关系,会 javascript 就可以,Westore Cloud 带你起飞~~ Github [链接] 小程序云开发简介 开发者可以使用云开发开发微信小程序、小游戏...

【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

2018-06-21
阅读 6 分钟
4.6k
Cax 小程序、小游戏以及 Web 通用 Canvas 渲染引擎 Github → [链接] 点我看看 DEMO 小程序 DEMO 正在审核中敬请期待 小游戏 DEMO 正在审核中敬请期待 特性 Learn Once, Write Anywhere(小程序、小游戏、PC Web、Mobile Web) 支持小程序、小游戏以及 Web 浏览器渲染 小程序、小游戏和 Web 拥有相同简洁轻巧的 API 高性能...

Qone 正式开源,使 javascript 支持 .NET LINQ

2018-04-25
阅读 7 分钟
2k
最近刚好修改了腾讯文档 Excel 表格公式的一些 bug,主要是修改公式的 parser 。比如下面的脚本怎么转成 javascript 运行?

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

2017-08-09
阅读 3 分钟
4.1k
腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面 今天,腾讯正式开源发布 Omix 1.0, 让开发者使用 JSX 或 hyperscript 创建用户界面。 Github 功能特性 超级快的速度, 点击这里体验一下 超小的尺寸, 7 KB (gzip) 良好的兼容性 IE8 内置支持JSX 和 hyperscript 支持局部 CSS, 不用费尽心思去想选择器了,让CSS...

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

2017-06-21
阅读 3 分钟
5.3k
Pasition - Path Transition with little JS code, render to anywhere - 超小尺寸的Path过渡动画类库

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

2017-04-24
阅读 3 分钟
3.8k
curvejs 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 Canvas就是舞台。

Omi v1.0震撼发布 - 令人窒息的Web组件化框架

2017-03-20
阅读 3 分钟
5.9k
Omi框架经过几十个版本的迭代,越来越简便易用和强大。经过周末的连续通宵加班加点,Omi v1.0版本终于问世。虽然版本遵循小步快跑、频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以Omi的API除了增量的API,其他的历史API没有任何变化。

Omi原理-Hello Omi

2017-02-10
阅读 4 分钟
2.8k
Hello Omi Omi框架的每个组件都继承自Omi.Component,本篇会去完成Omi的Component的基本锥形,让其能够渲染第一个组件。 omi.js实现 {代码...} Omi.getInstanceId 用来给每个组件生成自增的ID Omi.render 用来把组件渲染到页面 基类Omi.Component实现 所有的组件都是继承自Omi.Component。 {代码...} Omi使用完全面向对...

Omi原理-环境搭建

2017-02-08
阅读 3 分钟
2.2k
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行。但是集成到travis ci要把singleRun设置成true...

2017年试试Web组件化框架Omi

2017-02-07
阅读 3 分钟
2.4k
Omi Open and modern framework for building user interfaces. Omi的Github地址[链接] 如果想体验一下Omi框架,请点击Omi Playground 如果想使用Omi框架,请阅读 Omi使用文档 如果想一起开发完善Omi框架,有更好的解决方案或者思路,请阅读 从零一步步打造web组件化框架Omi 关于上面的两类文档,如果你想获得更佳的阅读...

AlloyTouch实现下拉刷新

2017-01-09
阅读 4 分钟
2.8k
原文地址:[链接] 效果展示 扫码体验 你也可以点击这里访问Demo可以点击这里查看代码 背景 在手机QQ内部,其实客户端提供了下拉刷新的能力,拖动整个webview进行下拉刷新,loading以及loading相关的wording和动画都是客户端的。解决了一部分需要下拉场景的问题。但是在某些场景下,还是需要web拥有自身的下拉刷新的能力。...

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

2016-12-29
阅读 5 分钟
4.2k
原文链接:[链接] 先验货 访问DEMO你也可以点击这里 源代码可以点击这里 如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用AlloyTouch CSS 0.2.0及以上版本便可! 头部动画 加载更多 实现代码 {代码...} 就这么多代码。当然你要引用一个transformjs和alloy_touc...

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

2016-12-28
阅读 3 分钟
2.8k
公司师姐昨日在KM发了篇长文,主要结论RAF+transform3d就是不如transition+transform3d平滑流畅,但是transition+transform3d没有translate属性变更change回调,只有transitionend的事件回调。最后得出的解决方案:

Scoped CSS规范草案

2016-12-26
阅读 4 分钟
2.6k
面对组件化的普及,组件的复用很普遍的需求,然而CSS相互污染是经常遇见的问题,建立规范让开发者放心使用各种组件,甚至跨生态的组件是很有必要的一件事情。

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

2016-12-26
阅读 8 分钟
4k
上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添加属性太激进,不可取(由于不在那个微信群,不明白为什么React会谈到transformjs?!)。关于这点,其实在一年半前腾讯内部就有相关声音,腾讯内部的小伙伴建议,不要污染那么多吧~~,给个总的namespace,如:

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

2016-12-22
阅读 4 分钟
2.4k
注意,虽然是扫码体验,但是AlloyTouch.FullPage特意对鼠标滚轮事件进行了兼容,所以PC上的全屏滚动页面也可以使用它来快速制作。

react动画难写?试试react版transformjs

2016-12-19
阅读 4 分钟
6.2k
JS + CSS3 transition或者animation:这里第一种一样,只是通过js里add class和remove class去增加或者移除对应的动画

你必须收藏的Github技巧

2016-12-14
阅读 3 分钟
2.3k
GitHub Pages大家可能都知道,常用的做法,是建立一个gh-pages的分支,通过setting里的设置的GitHub Pages模块可以自动创建该项目的网站。这里经常遇到的痛点是,master遇到变更,经常需要去sync到gh-pages,特别是纯web前端项目,这样的痛点是非常地痛。Github官方可能嗅觉到了该痛点,出了个master当作网站是选项,太...

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

2016-12-13
阅读 3 分钟
3.9k
如上图所见,本文就是要实现上面那种效果。由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。

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

2016-12-12
阅读 2 分钟
2.2k
移动端不能使用click,因为click会有300ms。所有有了fastclick这样的解决方案。然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题。hover会有不消失的问题,所有大家一般用:active。利用 :active 伪类来设置某元素被点击时的点击态样式。在IOS上使用active必须声明下面js:

一分钟搞定AlloyTouch图片轮播组件

2016-12-09
阅读 4 分钟
2.9k
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹。除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动。所以AlloyTouch制作各种各样的轮播组件还是得心应手。

AlloyTouch与three.js 3D模型交互

2016-12-07
阅读 3 分钟
6.1k
factor需要自己不断去调试出最佳的值,让松手之后的惯性运动的速率和时间达到最佳的效果。moveFactor需要自己不断去调试出最佳的值,就是让横向拖拽的距离映射到旋转的角度上达到最跟手的效果。

移动Web触摸与运动解决方案AlloyTouch开源啦

2016-12-05
阅读 2 分钟
4.5k
AlloyTouch的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上。所以带来了广泛的应用场景。不论实在应用、游戏、操作系统等许多层面,监听用户触摸,给用户真实的运动反馈是很常见的应用场景。如王者荣耀里,旋转用户角色,抽奖程序滚动转盘、页面滚动、局部滚动等。

transformjs - 玩转星球

2016-12-05
阅读 4 分钟
4.5k
如你所见。这篇就是要讲下使用transformjs制作星球的过程。你也可以无视文章,直接去看源码和在线演示: 源码 | 在线演示 代码100行多一点,直接看也没有什么压力。下面分几步讲解下。 生成球上点坐标 设球心为 (a,b,c),半径为r,则球的标准方程为 (x-a)²+(y-b)²+(z-c)²=r² 这里假设球心的(0,0,0),则:标准方程为 x²...

和transformjs一起摇摆

2016-11-28
阅读 3 分钟
3k
facebook当时使用的是createjs下的子项目easeljs和tweenjs去制作,基于Canvas的动画。基本的原理主要是:循环运动Canvas抽象的DisplayObject的skewX和scaleY来实现软体摇摆。目前来看transformjs也能做到,因为transformjs也能运动skewX和scaleY。先来看看facebook的方式。

移动Web利器transformjs入门

2016-11-25
阅读 4 分钟
5.2k
在过去的两年,越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候,都使用了transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣。(当然transformjs不仅仅支持移动设备,支持CSS3 3D Transforms的浏览器都能正常使用transformjs)

腾讯 AlloyTeam 移动 Web 裁剪组件 AlloyCrop 正式开源

2016-11-17
阅读 2 分钟
7k
裁剪图片的应用场景有头像编辑、图像编辑,在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪。AlloyCrop就是专注于裁剪图像的组件,目前服务于QQ相关的Web业务,今日正式对外开源。

超小Web手势库AlloyFinger原理

2016-11-11
阅读 3 分钟
10.1k
在腾讯,如:兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam、腾讯CDC等多个部门、团队和项目都在使用AlloyFinger。如下图所示:

漫谈Nuclear Web组件化入门篇

2016-11-05
阅读 9 分钟
2.5k
目前来看,团队内部前端项目已全面实施组件化开发。组件化的好处太多,如:按需加载、可复用、易维护、可扩展、少挖坑、不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)...怎么做到这么强大的优势,来回忆下以前见过的坑,或者现有项目里的坑。