前端资源治理(一)

作者:李刚松

0.也谈前端工程化

随着前端技术的飞速发展,前端需要一种更加工程化的方式解决前端开发日益复杂的问题。前端工程化本质也是软件工程的一种,由于软件工程并无严格的定义(或者说缺乏统一的定义),因此前端工程化的内涵其实相当宽泛,一般来说,前端工程化重点关注的是研发和维护效率,所有最终目的是这个的,都可以算作前端工程化的范畴。
前端工程化近几年也是技术热点,基本上大型前端技术交流会议都有此专题,从规范、组件、编译及构建、工作流、持续集成、监控等多个维度都有涉及,笔者尝试从前端资源治理的角度谈一下前端工程化,本文是系列文章的第一篇,主要讲问题及解决的思路,不涉及具体的实现细节。

你还在用图片做引导蒙层?

作者:深山蚂蚁

引导蒙层通常在新业务上线、或者业务有变更时的给新用户的一个操作指引。下图页面即是一个蒙层,会在某个局部位置高亮我们需要重点突出的内容:

【译】Web内容如何影响电池的使用

原文地址:https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
原文作者:Benjamin Poulain & Simon Fraser
译者:刘辉 校验:李刚松

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的内容。

是什么在耗电?

移动设备的电力消耗有以下几个因素:

  • CPU (核心处理器)
  • GPU (图形处理)
  • 网络 (wifi或者蜂窝移动网络)
  • 屏幕

屏幕功耗相对稳定,并且主要由用户控制(通过屏幕使用时间和亮度),但是对于其他组件,例如CPU,GPU,网络模块,功耗是动态变化的,而且变化范围很大。

手把手教你写webpack loader

作者:黄浩群

一、什么是 loader

loader 和 plugins 是 webpack 系统的两大重要组成元素。依靠对 loader、plugins 的不同组合搭配,我们可以灵活定制出高度适配自身业务的打包构建流程。

loader 是 webpack 容纳各类资源的一个重要手段,它用于对模块的源代码进行转换,允许你在 import 或加载模块时预处理文件,利用 loader,我们可以将各种类型的资源转换成 webpack 本质接受的资源类型,如 javascript。

【译】在生产环境中使用原生JavaScript模块

原文地址:https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/
原文作者:PHILIP WALTON
译者:龚亮 ,校对:刘辉
声明:本翻译仅做学习交流使用,转载请注明来源

两年前,我写了一篇有关module/nomodule技术的文章,这项技术允许你在编写ES2015+代码时,使用打包器和转换器生成两个版本的代码库,一个具有现代语法的版本(通过<script type="module">加载)和一个使用ES5语法的版本(通过<script nomodule>加载)。该技术允许你向支持模块(译者注:指ECMA制定的标准的export/import模块语法及其加载机制,又称为ES Module、ESM、ES6 Module、ES2015 Module,下文中将出现很多”模块”一词,都是这个含义)的浏览器发送更少的代码,现在大多数Web框架和CLI都支持它。

CSS Houdini实现动态波浪纹

作者:黄浩群

CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性,可拓展性几乎为零,并且新特性的支持效率太低,兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者,以往完全黑盒的浏览器解析流开始对外开放,开发者可以自定义属于自己的 CSS 属性,从而定制和扩展浏览器的展示行为。

碰撞检测的向量实现

作者: 吴冠禧


注:1、本文只讨论2d图形碰撞检测。2、本文讨论圆形与圆形,矩形与矩形、圆形与矩形碰撞检测的向量实现

前言

2D游戏中,通常使用矩形、圆形等来代替复杂图形的相交检测。因为这两种形状的碰撞检测速度是最快的。其中矩形包围盒又可以分为轴对齐包围盒(AABB, Axis Aligned Bounding Box)与转向包围盒(OBB, Oriented Bounding Box)。AABB与OBB的区别在于,AABB中的矩形的其中一条边和坐标轴平行,OBB的计算复杂度要高于AABB。根据不同的使用场景,可以用不同的方案。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×