对于不可变数据的思考

Redux 中的一个隐藏 BugBug 的成因我在 这篇文章 中曾经说了一句关于 Redux 的话：“就算程序员未经过专门的训练（例如掌握框架的 Best Practice），也可以显著降低 Bug 出现的概率。”然而最近同学遇到的一个 Bug 让我想把这句话改掉：只有当 Redux 配合 Immutable-js 的时候，才可以显著降低 Bug 出现的概率。我相信这个坑大部分人都踩过：// action function updateData(data) { // .... d...

使用函数式编程思想来优化代码

首先我作为一个普通的开发人员，肯定不是主攻函数式编程的，对它顶多算是浅显的了解，并没有深入去研究。但是目前的这些“了解”已经可以极大提高我的开发效率，因此就把我的经验写一写，方便一下那些跟我一样“不准备入坑函数式而只是观望一下”的开发者。先上一个非常简单的、大家已经习以为常的函数式编程的例子：function f(x) { return x <= 1 ? x : x * f(x - 1); } f(5); // => 120我与“函数式”一词的历史第一次听到“函数式编程”这个概念是高...

Rex.sh：一个伪 Web terminal

之前写过一个“rexskz.info in terminal”，打算用伪 Web terminal 来展示自己的博客，但是后来发现简直是太简陋了，于是萌生了重写的念头。经过一段时间，居然写完了。这篇文章就是分析一下里面用到的一些技术。虽然这个终端还是很简陋，对命令的支持仅限于 command arg0 arg1 ... 的格式，但是它支持自动补全、颜色，也有文件系统和变量，所以还是比之前的稍微高级那么一点的。按照惯例，先上图：CSS 部分首先，一个 Web terminal 要长的像 Termi...

一个由全屏引发的问题

最近在搞一个跟全屏有关的东西，我知道 Fullscreen API 浏览器的支持很有限，于是在写的时候加足了浏览器的私有前缀，包括 CSS：.video-container-inner:-webkit-full-screen, .video-container-inner:-moz-full-screen, .video-container-inner:-ms-fullscreen, .video-container-inner:fullscreen { position: fixed;...

翻一翻自己的黑历史——rscss、rsjs

惯例在写正文之前扯一堆没用的，想直接看正文的话可以点 这里。敢于自爆黑历史也是一种勇气。刚才无意间看到了 AmazeUI。没忍住于是发了条动态：现在再看 AmazeUI 感觉已经不是那么回事了，现在的几大前端框架以及各种工具改变了前端开发的几乎全部内容，除了基础语法以外都得重新学。。明明才过去几年啊。。想当年我还在纠结于写一个 CSS 库（类似于 <input> 等标签的样式库），某人问我：“你听说过可以点击链接不跳转页面，直接局部刷新的东西没？”我还觉得很不可思议，一个月后的寒假，...

CSS 中关于 overflow 的限制和绕过方法

在写毕设的时候遇到了一个看起来很难搞的问题。假设有如下 HTML 结构：<div class="scrollable"> <table> <thead> <!-- headers --> </thead> <tbody> <!-- contents --> </tbod...

Laravel 版本与 PHP 版本之间的坑

又到了一年一度五四评优的季节，技术部又有的忙了。作为陪伴这套系统时间最长的人，也是目前唯一了解全部技术细节的人，我自然需要帮现在负责的同学们一点小忙。于是我又把这套系统 clone 了下来。如果用的是 Apache，那么 Laravel 已经有了 .htaccess 文件；但是Nginx 的配置并不像官方说的那么简单，下面是我尝试了许多次才配置成功的：location /evaluation { if (-d $request_filename) { rewrite ^/...

讲一讲 Canvas 究竟是个啥

本文已授权 Coding博客 转载。HTML5 的标准已经出来好久了，但是似乎其中的 Canvas 现在并没有在太多的地方用到。一个很重要的原因是，Canvas 的标准还没有完全确定，不适合大规模用在生产环境。但是，Canvas 的优点也是很明显的，例如在绘制含有大量元素的图表的时候，SVG 往往因为性能问题而无法胜任，例如我见过的一次技术分享会的抽奖环节，虽然效果比较炫，但因为每个头像都是 DOM，利用 CSS3 控制的动画，导致了性能非常低下。此外，随着硬件性能的提高，视频截图、图像处理等功...

[完结撒花] 飞机墙的历史 & 揭秘飞机墙的实现方法

本文禁止发布在除 纸飞机技术博客、微信号 nuaazfj 和 /^1?$|^(11+?)\1+$/ | Where there is a will there is a way. 之外的平台，但不限制在社交网站上的转载。纸飞机各种晚会上的飞机墙是不是已经非常吸引大家的眼球了？我从大一接锅开始写，到后来的负责人，然后现在把墙传给了后人。今天就来讲一下飞机墙的历史，然后会花上一些篇幅来解析一下飞机墙在代码上的实现方法。飞机墙，顾名思义就是纸飞机自己的墙，跟人人墙微信墙作用差不多的墙，在晚会上大家通过...

NodeJS 的小科普 && 使用 NodeJS 实现 Webhook

本文已授权 Coding博客 转载。距离 NodeJS 这个东西出来已经过了好久了，感觉现在的前端如果不会点 NodeJS 就有点太落后于时代啦。我接触它是从去年暑假开始的，当时在为七牛写一个比较神奇的东西，就顺便接触了一下。虽然网传 npm 社区不是很好，但是我使用了这么久，觉得 NodeJS 还是个很好的工具。本文大概分两部分，前半部分用来向大家介绍 NodeJS，后半部分则是用 NodeJS 写的一个小项目，也就是纸飞机现在正在用的 WebHook。虽然是科普向，但是还是需要先熟悉 Jav...

使用 Chrome Timeline 来优化页面性能

本文已授权 Coding博客 转载。有时候，我们就是会不由自主地写出一些低效的代码，严重影响页面运行的效率。或者我们接手的项目中，前人写出来的代码千奇百怪，比如飞机墙为了一个 Canvas 特效需要同时绘制 600 个三角形，又比如 Coding.net 的任务中心需要同时 watch 上万个变量的变化等等。那么，如果我们遇到了一个比较低效的页面，应该如何去优化它呢？优化前的准备：知己知彼在一切开始之前，我们先打开 F12 面板，熟悉一下我们接下来要用到的工具：Timeline：嗯没错就是它。下...

一次 OSU! in Browser 的尝试

OSU! 这个游戏可能许多同学非常陌生，这是一个有着 std、taiko、ctb、mania 四种模式的音乐游戏，其中除了 ctb 我玩不习惯以外，剩下的三个模式均有涉及。一天我突然想到，网上有没有那种能在浏览器中玩的版本？在网上搜了好久，并没有发现“能读取 OSU! 谱面并显示”的代码，只找到了一个有点类似的 Demo（传送门：HTML5太鼓达人），看了一下，并不是我想要的那种效果，而且也不是从 OSU! 谱面中读取的数据。于是我就从太鼓入手，自己写一个吧！但是这工程量实在是大，所以我还是先拆...