J.c
原文：[Displaying Content in Full Screen using the Fullscreen API in JavaScript][1] > 译者注：若想直接应用 Fullscreen API，可直接使用 [screenfull.js](https://github.com/sindresorhus/screenfull.js)。 另外，iOS 上 video 元素可能不兼容 Fullscreen API，但 iOS 有特定的方法处理，具体可查看 [Apple Developer 相关文档][2]。如：video 请求进入全屏 `video.webkitEnterFullscreen()`。此方法目前在 iOS...
# 探索基于 WebGL 的动画与交互（案例学习） --- 原文：[Exploring Animation And Interaction Techniques With WebGL (A Case Study)][1] 两年前，我决定在 Codepen 上开始一系列小型 WebGL 实验。今年早些时候，我终于抽出时间将它们放在一个名为 “[Moments of Happiness][2]” 的网站上。经过这些实验后，我已经找到了如何探索和学习不同 [动画][3] 和交互技术的方法，并在这些互动玩具中得以体现。 正如你将看到的，每个玩具的互动方式是非常不同的，但所有实验都有一个原则：每个角色的行为都以编程的方式响应用户的输入。没有预先计算的动画 —— **每个运动都在运行时定义**。而赋予角色生命力的代码只有数行，但这也是我们的主要挑战。 >...
原文：[Moving along a curved path in CSS with layered animation][1] CSS animation 和 transition 均能很好地实现 A 到 B 的过渡，但这仅限于直线运动。无论你如何调整元素的 animation 或 transition 的 [贝塞尔曲线][2]（`*-timing-function`），均不能使其沿曲线运动。当然也包括自定义过渡函数，如弹簧效果。这是因为 X 轴与 Y 轴的相对位移总是相等的。 无疑 JavaScript...
原文链接： - [Tunnel animation(Part 1)][1] - [Tunnel animation(Part 2)][2] 译者注：本文由两章节组成。 ## 隧道动画（第一章节） 嘿，读者们！ 👋 如果说哪样东西是我的真爱，那么它应该就是隧道动画 😍 不懂我的意思？那看看我之前创建的案例吧： [![codepen demo 1][3]](https://codepen.io/Mamboleoo/full/NdGPvJ/) [![codepen demo 2][4]](https://codepen.io/Mamboleoo/full/qqQbzv/) [![codepen demo 3][5]](https://codepen.io/Mamboleoo/full/LbMOLZ/) [![codepen demo 4][6]](https://codepen.io/Mamboleoo/full/mJWLVJ/) 我甚至使用这种动画作为我们团队的...
原文：[How to better organize your React applications?][1] 在过去的几年，我一直在开发超大型的 Web 应用。与数十名开发者从零开始，使其现在达到服务数百万用户的规模。如果一开始就没有一个好的文件目录结构，就很难维持代码的组织性。 [Nathanael Beisiegel][2] 写了一篇有趣的文章，阐述了他在组织大型 React 项目的策略。但我对其想法并不十分赞同。因此，我决定花些时间找出将来组织 React 项目的最佳方式。 注意 1：在本文提及的所有案例均使用了 Redux。如果你还未了解 Redux，可以阅读 [此文档][3]。 注意 2：所有案例均基于 ReactJS，但你可以在 React-Native 应用上使用相同的结构。 写于 2018.04：如果想改善代码结构，那么你应该对我最近写的这篇文章感兴趣——[《为何 React...
原文链接：[《A Complete Guide to Grid》][1] Grid 是 CSS 目前最强的布局系统。与 [flexbox][2] 这类一维系统不同，它是二维系统，能同时处理行与列。Grid 布局需要对父元素（作为 Grid 容器）及其子元素（作为 Grid 子项）应用 CSS。 ## 简介 CSS Grid Layout（简称“Grid”） 是一个基于网格的二维布局系统，旨在完全改变基于网格设计的用户界面。CSS 一直被用于 Web 页面布局，却从未很好地解决这个问题。在一开始，我们使用 table，然后使用 float、position 和 inline-block。但所有这些方法本质都是...
### Web API Checklist 1. URI 是否短小且容易输入 2. URI 是否能让人一眼看懂 3. URI 是否只有小写字母组成 4. URI 是否容易修改? 5. URI 是否反映了服务器端的架构 6. URI 规则是否统一 7. 有没有使用合适的 HTTP 方法 8. URI 里用到的单词所表示的意思是否和大部分 API...
``` javascript var superagent = require("superagent"); var async = require("async"); var cheerio = require("cheerio"); var url = require("url"); var cnodeUrl = "https://cnodejs.org/"; superagent.get(cnodeUrl) .end(function(err, res){ if(err){ // return next(err); console.log(err);...
https://aotu.io/notes/2018/03/06/ae2web/index.html 让我们一起把『锅』扔在设计师吧！
https://aotu.io/notes/2016/11/15/xcel/index.html XCel 是一款基于用研组需求的 Excel 数据过滤工具，本文将分享 Electron、Vue 等相关涉及技术的基本知识和性能优化经验。这也许是Jc的2016年最后一篇文章，且看且不珍惜。