程序员专用水杯 必极客出品

Recent

理解 javascript 里的 bind() 函数

bind() 方法会创建一个新函数,当这个新函数被调用时,它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数和其原本的参数。

Promise异步编程模式总结

Promise是JavaScript中的一种异步编程范式, 一个Promise对象表示一个即将完成但还未完成的操作。 鉴于JavaScript中异步和回调的编程风格, Promise模式可以有效地避免『Callback Hell』。

用纯CSS禁止鼠标点击事件

JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。

前端程序员必须知道的高性能Javascript知识

想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践,提高大家对JS的底层和实现原理的理解。

javascript里的sleep()方法

JavaScript Promise API是新出现了一个API,借助 Promise,我们可以对setTimeout函数进行改良,下面就是把setTimeout()封装成一个返回Promise的sleep()函数。

如何知道手机屏幕的CSS像素宽度?

随着移动设备浏览量的迅速增长,自适应网页设计变得越来越重要。Web程序员在开发移动端页面时时常会遇到这样的问题,手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致,为什么会出现这种情况呢?

JavaScript里的数组转化新方法Array.From

基本上,这些东西我们都可以使用Array.prototype.slice.call()这样的方法将arguments和NodeList等转行成想要的形式。如今,我们有了更直接的方法,直接将这些类数组的对象转化成真正的对象

你未必知道的12个JavaScript技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。

Javascript缓存API

JavaScript ServiceWorker API的好处就是让WEB开发人员轻松的控制缓存。虽然使用ETags等技术也是一种控制缓存的技术,按使用JavaScript让程序来控制缓存功能更强大,更自由。当然,强大有强大的好处,也有弊处——你需要做善后处理,所谓的善后处理,就是要清理缓存。

Javascript Object.keys()用法

我经常使用JavaScript对象。非常喜欢。相对来说,数组虽然也很好用,但JavaScript Object提供了另一层次的数据结构和数据信息,这是简单的数组是无法比拟的。例如,我们可以非常方便的从一个JavaScript对象里寻找一个键值,比在数组里更迅速。

WEB音频API

WEB音频API允许WEB开发者使用JavaScript动态的加载/解码音频文件。如果你经常开发一些WEB游戏,这些API你可能会经常用到。下面是对WEB音频API的简单介绍,你可以使用这个API在WEB前端替换改变音频的使用。

console.time和console.timeEnd用法

console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。今天要介绍的console.time和console.timeEnd就是其中之一。

使用jQuery解析XML

如果你用过Java、PHP等语言解析过XML,相信会跟我有相同的感觉,那就是很麻烦。改用jQuery来读取、分析、操作XML后,给人意想不到的轻松感。下面我们来看看使用jQuery处理XML文件的几种形式方法。

升级WordPress时提示”另一更新正在进行”

WordPress在升级的过程中,如果你刷新页面或者关闭页面会造成Wordpress升级不成功,下次升级时可能会遇到这样或者那样的问题。例如我前天升级Wordpress 4.5时刷新了页面,再次升级Wordpress时,Wordpress一直提示”另一更新正在进行”。

使用CSS里的user-select属性控制用户在页面上选中的内容

CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等,也就是,让页面内容不可选。也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素基本的,它不仅可以作用整个页面,也可以只在指定的元素和其子元素上生效。

使用 stylelint找出你的CSS样式表里的错误和问题

我们将这些防止错误出现的程序称为”linters”。Javascript中有几个比较好的linter。但是在CSS中,我们就没有这么幸运了,我们的选择十分有限: 基于Ruby的,具有特殊预处理程序的scss-lint和较早的CSS Lint。现在我就要开始介绍一下我们开发的工具: stylelint.

Best

测测你的眼睛对色差的辨识度,所有的色块中有一个方块的颜色有稍微的不同,你要把它挑出来,在一分钟的时间里,看你能获得多少分,16分以下不要再玩手机了!

请随意画出一个小人,它就能活起来,你可以和它一起完成一次充满奇幻色彩的冒险旅程。

这是一个HTML5 jQuery 益智游戏,玩家需要调换图形的位置来实现目标图案。

十分形象的迷宫搜索算法,能看的计算机如何一步一步的探索路径,障碍物,最终确定最佳,最近的路线图

这里我们用纯CSS技术表现出30种动物的碎片拼图形象,这30动物,非常的可爱,但不幸的是,它们都是濒临灭绝的动物,它们的生存情况正面临着危机。

这是一个用HTML5制作的智力游戏,有相当的难度。每个方块一面橙色,一面蓝色。点击一个方块,这个方块的颜色会翻转,并且,与它邻接的方块的颜色也会翻转。使拼板全部变成蓝色, 你就算过关了。

虽然并不是Adobe的Photoshop发明了混合模式,但它的实现效果是最真实的。但现在,你不需要使用Photoshop来运用混合模式美化你的图片,因为CSS3里提供里动态的实现这种效果的方法。

CSS3给Web程序员提供了无限发挥的创造空间,以前只有视频、Flash、JavaScript才能实现的动画效果,如今只需要纯CSS+HTML就能做到。你能相信吗?这里呈现的所有动画,都是由一个DIV元素实现,纯CSS3技术。

HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击,像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上,因为用HTML5+CSS3实现幻灯片不仅更简单、容易,而且功能更强调,特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。

这里提供了各种各样的超链接特性,有些是借助伪元素,有些是借助svg,有些是借助HTML5动画。用你的鼠标悬停在这些链接上,给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器,比如谷歌浏览器或火狐浏览器。

在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。
当开发完成后,我发现了这个很酷的jQuery plugin(由@jackrugile开发)。
于是我就开始思考,我应该做出这个小的CSS project。

自适应网页设计,也叫做响应式网页设计(英语:Responsive web design)是一种网页设计的技術做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其它便携设备)上阅读和导航,根据设备尺寸的不同,自动的调整页面上的元素布局和数量。

这是一个很酷的HTML5技术应用,用户可以在画布上用画笔写出自己想看的文字或图案,这个应该能将你写的东西用3D方式呈现,而且让它围着中心3D旋转,只要你设计的巧妙,你可以绘制出让人惊叹的效果和图案。

这是一个生产内衣的公司使用HTML5技术制作的公益游戏。曾获得Cutting Edge技术奖。游戏的主旨是反对印度国内存在的包办婚姻现象。内衣公司的游戏非常有内衣特色。但游戏中使用的技术还是让人佩服的,纯HTML5+JS,整个游戏有很好的互动性,值得游戏设计者学习。

程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。