TAT.vorshen 教你用webgl快速创建一个小世界
In Web开发 on 2017年03月15日 by view: 2,334
3

Webgl的魅力在于可以创造一个自己的3D世界,但相比较canvas2D来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成一个物体都变得很复杂。

什么?!为什么不用Threejs?Threejs等库确实可以很大程度的提高开发效率,而且各方面封装的非常棒,但是不推荐初学者直接依赖Threejs,最好是把webgl各方面都学会,再去拥抱Three等相关库。

上篇矩阵入门中介绍了矩阵的基本知识,让大家了解到了基本的仿射变换矩阵,可以对物体进行移动旋转等变化,而这篇文章将教大家快速生成一个物体,并且结合变换矩阵在物体在你的世界里动起来。

CSS Modules 入门及 React 中实践
In Web开发 on 2017年03月15日 by view: 4,242
3

写在前面

读文先看此图,能先有个大体概念:

阅读本文需要 11m 24s。

CSS Modules介绍

CSS Modules是什么东西呢?首先,让我们从官方文档入手:
GitHub – css-modules/css-modules: Documentation about css-modules

TAT.dnt Omi命令行界面omi-cli发布
In Web开发,资源工具 on 2017年03月09日 by view: 1,336
1

原文链接:https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md

写在前面

通常认为,命令行界面(CLI)没有图形用户界面(GUI)那么方便用户操作。但是CLI比GUI节约资源,在熟悉命令之后,CLI会比GUI更加高效地帮你完成想要的任务。

Omi CLI地址: omi-cli

下面来介绍下pasturn童鞋为Omi开发的CLI的两种使用姿势:

姿势一

原文链接

前言

React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块。切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言。

为了提高开发效率,去年10月份也开始有意识地私下封装一些组件,并且于今年年初在项目组里发起了百日效率提升计划,其中就包含组件化开发这一块。

本文并不是要谈如何去写一个 React 组件,这一块已经有不少精彩的文章。例如像这篇《重新设计 React 组件库》,里面涉及一个组件设计的各方面,如粒度控制、接口设计、数据处理等等(不排除后续也写一篇介绍组件设计理念哈)。

本文关键词是三个,工程化、快速和可靠。我们是希望利用工程化手段去保障快速地开发可靠的组件,工程化是手段和工具,快速和可靠,是我们希望达到的目标。

前端工程化不外乎两点,规范和自动化。

读文先看此图,能先有个大体概念:
default

TAT.tennylv 线条之美,玩转SVG线条动画
In Web开发 on 2017年02月27日 by view: 6,868
4

通常来说web前端实现动画效果主要通过下面几种方案:

  • css动画;利用css3的样式效果可以将dom元素做出动画的效果来。
  • canvas动画;利用canvas提供的API,然后利用清除-渲染这样一帧一帧的做出动画效果。
  • svg动画;同样svg也提供了不少的API来实现动画效果,并且兼容性也不差,本文主要讲解一下如何制作svg线条动画。

Omi

Open and modern framework for building user interfaces.


  • Omi的Github地址https://github.com/AlloyTeam/omi
  • 如果想体验一下Omi框架,可以访问 Omi Playground
  • 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有Omi相关的问题可以 New issue
  • 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
TAT.vorshen webgl世界 matrix入门
In Web开发 on 2017年01月16日 by view: 3,108
3

这次没有带来游戏啦,本来还是打算用一个小游戏来介绍阴影,但是发现阴影这块想完完整整介绍一次太大了,涉及到很多,再加上业务时间的紧张,所以就暂时放弃了游戏,先好好介绍一遍webgl中的Matrix。
这篇文章算是webgl的基础知识,因为如果想不走马观花的说阴影的话,需要打牢一定的基础,文章中我尽力把知识点讲的更易懂。内容偏向刚上手webgl的同学,至少知道着色器是什么,webgl中drawElements这样的API会使用~

一.前言

当我们选择使用Node+React的技术栈开发Web时,React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处

        1.利于SEO:React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构,方便Google等搜索引擎的爬虫能爬到网页的内容。

        2.提高首屏渲染的速度:服务器直接返回一个填满数据的HTML,而不是在请求了HTML后还需要异步请求首屏数据。

        3.前后端都可以使用js

二.神奇的renderToString和renderToStaticMarkup

有两个神奇的React API都可以实现React服务器渲染:renderToStringrenderToStaticMarkup。renderToString和renderToStaticMarkup的主要作用都是将React Component转化为HTML的字符串。这两个函数都属于react-dom(react-dom/server)包,都接受一个React Component参数,返回一个String。

也许你会奇怪为什么会有两个用于服务器渲染的函数,其实这两个函数是有区别的:

june01 模块加载工具制造指南
In Web开发 on 2017年01月10日 by view: 3,798
4

前言

看到这个标题,估计有同学会想,又要重复造轮子么?其实重复造轮子在大多数情况下确实是不太可取的,既浪费了精力又浪费了时间。但这并不能说明重复造轮子完全不可取,比如你想要某个轮子的精简版,又比如你想学习某个轮子的制造方法,重复造轮子也可以是有意义的。

简介

接下来,我们就来学学某个轮子简易版制造方法,这个轮子就是模块加载工具。

说起模块加载工具,估计大家就会想起webpack、commonjs等,更“久远”一点的会想起requirejs和seajs。这些工具都源于前端的模块化思想。

为什么前端需要模块化?这主要得益于前端技术的发展,使得前端不再像以前那样只能展示一下静态内容,撑死加上几个飞来飞去的动画。现在的前端内容越来越丰富,我们可以播放视频,可以协同工作,还可以玩游戏。这就导致了前端代码量剧增。当代码行数噌噌噌往上涨时,模块化思想就自然而然地出来了。

TAT.dnt AlloyTouch实现下拉刷新
In Web开发 on 2017年01月09日 by view: 2,588
1

原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Pull-to-refresh

效果展示

你也可以点击这里访问Demo
可以点击这里查看代码