AlloyTeam

AlloyTeam

Copyright © Tencent AlloyTeam. All Rights Reserved.
AlloyTeam 腾讯全端 AlloyTeam 团队 Blog
  • 首页
  • Web 开发
    • 前端资讯
    • HTML5
    • CSS3
    • JavaScript
    • Node.js
    • 移动 Web 开发
    • 用户体验设计
    • Web 前端优化
    • 资源工具
  • 移动开发
    • Android 开发
    • iOS 开发
    • 移动 Web 开发
  • Alloy 实验室
    • 作品
    • HTML5 游戏
  • 关于
    • 团队
    • Github
    • 留言
    • 友情链接
  • RSS
  • TAT.dnt Omi v1.0 震撼发布 – 开放现代的 Web 组件化框架
    In Web开发 on 2017年03月20日 by TAT.dnt view: 4,123
    4

    原文链接

    写在前面

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

    • Github:https://github.com/AlloyTeam/omi

    废话不多说,这就为大家介绍到目前 1.0 版本为止,关于 Omi,你必须知道的点点滴滴。

    继续阅读

  • june01 png 的故事:获取图片信息和像素内容
    In Web开发 on 2017年03月16日 by june01 view: 11,602
    7

    前言

    现在时富媒体时代,图片的重要性对于数十亿互联网用户来说不言而喻,图片本身就是像素点阵的合集,但是为了如何更快更好的存储图片而诞生了各种各样的图片格式:jpeg、png、gif、webp 等,而这次我们要拿来开刀的,就是 png。

    简介

    首先,png 是什么鬼?我们来看看 wiki 上的一句话简介:

    Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression.

    也就是说,png 是一种使用无损压缩的图片格式,而大家熟知的另外一种图片格式——jpeg 则是采用有损压缩的方式。用通俗易懂的方式来讲,当原图片数据被编码成 png 格式后,是可以完全还原成原本的图片数据的,而编码成 jpeg 则会损耗一部分图片数据,这是因为两者的编码方式和定位不同。jpeg 着重于人眼的观感,保留更多的亮度信息,去掉一些不影响观感的色度信息,因此是有损耗的压缩。png 则保留原始所有的颜色信息,并且支持透明/alpha 通道,然后采用无损压缩进行编码。因此对于 jpeg 来说,通常适合颜色更丰富、可以在人眼识别不了的情况下尽可能去掉冗余颜色数据的图片,比如照片之类的图片;而 png 适合需要保留原始图片信息、需要支持透明度的图片。

    继续阅读

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

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

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

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

    继续阅读

  • TAT.dnt Omi 应用 md2site-0.5.0 发布-支持动态 markdown 拉取解析
    In 资源工具 on 2017年03月15日 by TAT.dnt view: 2,538
    2

    写在前面

    Md2site 是基于 Omi 的一款 Markdown 转网站工具,使用简单,生成的文件轻巧,功能强大。

    • 官网:http://alloyteam.github.io/omi/md2site/
    • Github: https://github.com/AlloyTeam/omi/tree/master/md2site
    • 真实案例:http://alloyteam.github.io/omi/website/docs-cn.html

    在使用之前的版本的时候,你会发现体验非常好?为什么非常好?因为页面间的切换是无刷新!
    无刷新的原理就是,所有的 markdown 都会被 webpack 打包到 js 里,只要在 js 动态 require 就行。

    这样带来的一个问题便是:如果有海量的 markdown 的时候,首次加载的时间非常长。

    怎么解决?支持动态拉取和解析 markdown~~

    继续阅读

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

    写在前面

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

    阅读本文需要 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 TAT.dnt view: 4,984
    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 的两种使用姿势:

    姿势一

    1
    2
    3
    4
    5
    6
    $ npm install omi-cli -g       //安装cli
    $ omi init your_project_name   //初始化项目
    $ cd your_project_name         //转到项目目录
    $ npm run dev                  //开发
    $ npm run dist                 //部署发布
     

    继续阅读

  • TAT.heyli 从工程化角度讨论如何快速构建可靠 React 组件
    In Web开发 on 2017年03月07日 by TAT.heyli view: 7,868
    2

    原文链接

    前言

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

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

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

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

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

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

    继续阅读

  • TAT.dnt Omi 应用 md2site 发布-markdown 转网站利器
    In 作品,资源工具 on 2017年03月06日 by TAT.dnt view: 6,164
    6

    写在前面

    Md2site 是基于 Omi 的一款 Markdown 转网站工具,使用简单,生成的文件轻巧,功能强大。
    当我们想把一堆 markdown 文档转成网站时,你可能有许多选择,倘若选择 md2site ,你一定会爱上她。

    • 官网:http://alloyteam.github.io/omi/md2site/
    • Github: https://github.com/AlloyTeam/omi/tree/master/md2site
    • 真实案例:http://alloyteam.github.io/omi/website/docs-cn.html

    特性

    • 超轻巧,生成的网站除了 Omi 不依赖其他第三方库,超级小的尺寸让你加载更快
    • 完整支持 Markdown,使用 markdown 写你的文档或者网站,完整支持 markdown 所有语法
    • 响应式,生成的网站是响应式的,手机和 PC 都有不错的阅读体验
    • 多语言,天生支持多语言,只需增加修改配置便可。让世界了解你的网站
    • 代码美,请记住: 不仅仅是代码高亮,使用 md2site 轻松可以让代码内的某些代码高亮
    • 超方便,npm run dev 预览,npm run dist 一键生成网站。不满足现有布局或样式可轻松进行二次开发

    继续阅读

  • TAT.tennylv 线条之美,玩转 SVG 线条动画
    In Web开发 on 2017年02月27日 by TAT.tennylv view: 25,266
    5

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

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

    继续阅读

  • TAT.dnt 2017 年试试 Web 组件化框架 Omi
    In Alloy 实验室,JavaScript,Web开发,作品,团队,移动 Web 开发,移动开发,资源工具 on 2017年02月08日 by TAT.dnt view: 14,347
    14

    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)

    继续阅读

上页 1 ...7 8 9 10 11 12 13 14 15 16 ...61 下页
公众号:AlloyTeam
扫码关注
公众号:AlloyTeam
合作伙伴
HTML5梦工场
腾讯云
Coding
兄弟团队
  • 腾讯 ISUX
  • 腾讯 CDC
  • 腾讯游戏 TGideas
  • 百度前端 EFE
  • 百度前端 FEX
  • 淘宝前端团队 FED
友情链接
  • 印记中文
  • W3CTech
  • 前端观察
  • W3C Plus
  • Web 前端开发
  • V2EX
  • 蓝色理想
  • 云开发 CloudBase
  • HTML5中文学习网
  • 爱思资源网
  • 牛大拿_前端设计导航
  • 吕小鸣前端博客
  • 腾讯大学


Copyright ©  2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2