极客Web前端开发资源集锦

骑猪看日落 2022-08-12 11:30 263阅读 0赞

[![166b3873-972c-455d-a369-78f2ce124c7f.jpg][]][166b3873-972c-455d-a369-78f2ce124c7f.jpg 1]

本周我们带来的前端推荐包含当前热门的[bootstrap][]，[html5][]，[css3][]等技术内容和新闻话题，如果你还想近一步学习如何开发，还可以关注我们的[极客课程库][Link 1]，里面涵盖了现代开发技术的‘学’与‘习’的全新功能。希望对大家有所帮助！原文来自：[极客标签][Link 2]

## [移动设备表单输入设计体验 - leader.js ][-_leader.js] ##

[![6e5740c7-d64d-4c30-9327-aa23cceaec6f.jpg][]][6e5740c7-d64d-4c30-9327-aa23cceaec6f.jpg 1]

为了帮助降低移动或者手机端输入的操作复杂度，leader.js提供了一个相对更简单的输入体验，你只需要输入表单内容回车即可完成输入，非常方便。

## [Javascript游戏，街头霸王 ][Javascript] ##

[![096cbfdc-6ac0-41c0-9bc3-9a72d9e37277.jpg][]][096cbfdc-6ac0-41c0-9bc3-9a72d9e37277.jpg 1]

有没有让你想起点什么？我想到的是院子里的大槐树，一台小霸王游戏机和一位儿时的伙伴。

## [CSS Guidelines (2.1.3) – 书写高效，可维护可升级的CSS用户指导手册 ][CSS_Guidelines_2.1.3_CSS] ##

[![a7ca8fb1-5716-46d9-acf2-f8e7fdf3441b.jpg][]][a7ca8fb1-5716-46d9-acf2-f8e7fdf3441b.jpg 1]

可扩展可管理的高级高效咨询的用户指导手册。

## [NodeBB，一个基于nodejs的响应式论坛 ][NodeBB_nodejs] ##

## [![aeadf576-15f7-4d04-9e7d-c12a69797b3d.jpg][]][aeadf576-15f7-4d04-9e7d-c12a69797b3d.jpg 1] ##

喜欢方便的同学请绕道去discuz，好吧我是nodejs的重视患者，首先你要有自己的vps或则云空间，比如9cloud，我今天用的是阿里云的VPS。

## [代码录播：创建自定义的HTML5输入框出错信息][HTML5] ##

[![9aac2ef5-d73d-48bf-b576-3c0bedb9cd9d.jpg][]][9aac2ef5-d73d-48bf-b576-3c0bedb9cd9d.jpg 1]

这个代码将介绍如何使用javascript来修改HTML5中输入框缺省的验证错误信息，帮助你更好的开发表单验证效果。

## [免费电子书：The Guide to Minimum Viable Products ][The_Guide_to_Minimum_Viable_Products] ##

[![0c8d8df3-f2e7-4e76-8855-e76056e6f84d.jpg][]][0c8d8df3-f2e7-4e76-8855-e76056e6f84d.jpg 1]

来自uxPin的免费电子书。

## [5个你应该知道的建站平台 ][5] ##

[![2fbdba05-7d14-4d3b-ba9d-d76f444eb9cd.jpg][]][2fbdba05-7d14-4d3b-ba9d-d76f444eb9cd.jpg 1]

如今在网络上有很多优秀的网站构建平台。根据你的需求，它们会提供不同的功能。然而，对于一个网站构建工具最重要的就是简单和友好。通过这些平台，开发者可以省去开发中的不少环节。在本篇文章中，我们会介绍5款非常酷的网站创建平台。

## [如何为Android上的产品设计一款合适的图标 ][Android] ##

[![ac9fce74-cdfc-4b23-a7db-3ceff4602cdb.jpg][]][ac9fce74-cdfc-4b23-a7db-3ceff4602cdb.jpg 1]

如果你已经完成了你的app，你一定会马上向其它人宣布这件事情。但是你需要注意一个很重要的问题，那就是app的图标。你的图标可能在项目启动之 前就已经设计好了，但我不喜欢这样，如果app没有完成实际上图标也没什么用了。如果你不是一个设计师，图标的确是很让人头疼的事情。但总有一些方式可以让工程师们也能独立的设计出不错的图标。我们以Andriod应用为例，现在就来为你的产品设计一款合适的图标。

## [放弃使用jQuery实现动画 ][jQuery] ##

[![6122fe5e-89b9-439e-9c72-5f83706a1edc.jpg][]][6122fe5e-89b9-439e-9c72-5f83706a1edc.jpg 1]

在Web开发的圈子里，开发者常常认为CSS动画是一种高性能web动画技术，如果想让网页加载的更快一些，就应该用纯CSS动画。其实这种观点是错误 的，很多开发者早就放弃了javascript的动画，迫使自己使用复杂的CSS样式来实现相同效果的UI交互。他们完全忽视了javascript带来 的更好的交互性。

## [经典，HTML5游戏，超级玛丽 ][HTML5 1] ##

[![20af9360-32a1-45e2-9c4f-542f5b846292.jpg][]][20af9360-32a1-45e2-9c4f-542f5b846292.jpg 1]

这是一款使用[HTML5开发][HTML5 2]的超级玛丽，有没有点儿时的记忆？长按向上键，可以跳的更高哦。如果你也喜欢可以当成休闲游戏，如果你是开发者，不防下载下来看看是如何生成的。

## [代码录播：CSS动画实现一个我最“摇摆”的动画效果 ][CSS] ##

[![2336da97-42a3-4073-84af-7505d04244a4.jpg][]][2336da97-42a3-4073-84af-7505d04244a4.jpg 1]

使用CSS3的keyframe来动画旋转效果，生成页面元素左右微微摇摆的嘚瑟效果。用到你的页面做装饰，相信一定蛮有趣的！

## [免费图标：30款彩色圆角图标设计 ][30] ##

[![5523926f-fcea-4d32-a83b-8391e21196aa.jpg][]][5523926f-fcea-4d32-a83b-8391e21196aa.jpg 1]

30款扁平化设计的彩色圆角图标免费下载。

## [通过HTML5 Visibility API检测页面活动状态 ][HTML5_Visibility_API] ##

[![0b3107ab-3793-432d-b153-2106b924a15f.jpg][]][0b3107ab-3793-432d-b153-2106b924a15f.jpg 1]

几年前，我们浏览网页的时候是没有选项卡浏览模式的，每一个网页都会是一个浏览器窗口，如果我没有记错，Win7之前我们都是这样浏览网页的。作为一个程序员，我们经常会同时打开10-15个网页，多的时候超过20个也不足为奇。

## [Bootstrap3实现的响应式幻灯滑动效果个人作品集/博客网站模板 ][Bootstrap3] ##

[![6fc73626-d299-4fec-b89a-4ad2db353002.jpg][]][6fc73626-d299-4fec-b89a-4ad2db353002.jpg 1]

相关的开发和使用说明，请参考如下课程：[Bootstrap3开发滑动风格的博客网站模板][Bootstrap3 1]

## [无需编码开发快速设计互动式UI - uilang ][UI_-_uilang] ##

[![7e4b0e8e-af68-4a5b-bea0-121b6ee6e514.jpg][]][7e4b0e8e-af68-4a5b-bea0-121b6ee6e514.jpg 1]

uilang是一个非常小巧的ui类库，可以帮助不熟悉前端代码的web设计人员快速的开发互动式UI。你只需要使用“语义式”的说明来控制元素的动态效果。

## [代码录播：纯CSS3生成的走马灯效果 ][CSS3] ##

[![71af40ba-1856-4e13-a950-ffa359d280f9.jpg][]][71af40ba-1856-4e13-a950-ffa359d280f9.jpg 1]

使用CSS3 keyframe生成的走马灯效果。

## [HTML5游戏，五子棋 ][HTML5 3] ##

[![e4c6ecfb-62af-407c-957d-47d451db2538.jpg][]][e4c6ecfb-62af-407c-957d-47d451db2538.jpg 1]

无需找人对战，看看是不是能先赢过电脑吧。

## [React JS 和 FLUX ][React_JS_FLUX] ##

[![0ab4eff6-84e3-461b-95c5-a9f2de264d3d.jpg][]][0ab4eff6-84e3-461b-95c5-a9f2de264d3d.jpg 1]

我不准备在这里详细地讲解Flux，它已经是众所周知的了，很多人应该有都看过Facebook的[Flux网站][Flux]。在这里，我想说的是你为什么应该考虑用flux架构和React js配合作为你构建接口和处理交互的工具。

## [HTML5游戏开发引擎Pixi.js新手入门讲解 ][HTML5_Pixi.js] ##

[![6fcb11b4-a703-4b04-9ecb-67d884a4bae6.jpg][]][6fcb11b4-a703-4b04-9ecb-67d884a4bae6.jpg 1]

这篇文章中，介绍HTML5游戏引擎pixi.js的基本使用。

## [滚动触发的翻转式文字引用效果 ][Link 3] ##

[![7193d6f5-3dac-45e7-8559-ccb8d718d4a2.jpg][]][7193d6f5-3dac-45e7-8559-ccb8d718d4a2.jpg 1]

滚动页面，可以看到翻转式的文字引用效果。

极客标签现推出\#[GB课程库][Link 1]\#，这是一个涵盖了当前最流行的[HTML5][html5]、[CSS3][css3]、[javascript][]、[bootstrap][]等现代开发技术的‘学’与‘习’的全新功能。邀请大家前来使用，它绝对让你花最少的钱和时间，带给你最有收获的价值体验！本周推荐已完成，期待您们的光临！

> #### 如果你也想参与文章投递 ####
> 
>  *  点击发布按钮发布文章或者其它类型内容，保存时务必添加“Web开发资源大荟萃”标签即可申请发布。

via [极客资源荟萃周刊][Link 2]

[166b3873-972c-455d-a369-78f2ce124c7f.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/166b3873-972c-455d-a369-78f2ce124c7f.jpg
[166b3873-972c-455d-a369-78f2ce124c7f.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/166b3873-972c-455d-a369-78f2ce124c7f.jpg
[bootstrap]: http://www.gbtags.com/gb/tag/1091.htm
[html5]: http://www.gbtags.com/gb/tag/1007.htm
[css3]: http://www.gbtags.com/gb/tag/1016.htm
[Link 1]: http://www.gbtags.com/gb/gblibrary.htm
[Link 2]: http://www.gbtags.com/gb/gbcollection.htm
[-_leader.js]: http://demo.peterbailey.eu/Leader.js/
[6e5740c7-d64d-4c30-9327-aa23cceaec6f.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/6e5740c7-d64d-4c30-9327-aa23cceaec6f.jpg
[6e5740c7-d64d-4c30-9327-aa23cceaec6f.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/6e5740c7-d64d-4c30-9327-aa23cceaec6f.jpg
[Javascript]: http://www.gbtags.com/gb/share/3915.htm
[096cbfdc-6ac0-41c0-9bc3-9a72d9e37277.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/096cbfdc-6ac0-41c0-9bc3-9a72d9e37277.jpg
[096cbfdc-6ac0-41c0-9bc3-9a72d9e37277.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/096cbfdc-6ac0-41c0-9bc3-9a72d9e37277.jpg
[CSS_Guidelines_2.1.3_CSS]: http://cssguidelin.es/
[a7ca8fb1-5716-46d9-acf2-f8e7fdf3441b.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/a7ca8fb1-5716-46d9-acf2-f8e7fdf3441b.jpg
[a7ca8fb1-5716-46d9-acf2-f8e7fdf3441b.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/a7ca8fb1-5716-46d9-acf2-f8e7fdf3441b.jpg
[NodeBB_nodejs]: http://www.gbtags.com/gb/share/3924.htm
[aeadf576-15f7-4d04-9e7d-c12a69797b3d.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/aeadf576-15f7-4d04-9e7d-c12a69797b3d.jpg
[aeadf576-15f7-4d04-9e7d-c12a69797b3d.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/aeadf576-15f7-4d04-9e7d-c12a69797b3d.jpg
[HTML5]: http://www.gbtags.com/gb/rtreplayerpreview/98.htm
[9aac2ef5-d73d-48bf-b576-3c0bedb9cd9d.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/9aac2ef5-d73d-48bf-b576-3c0bedb9cd9d.jpg
[9aac2ef5-d73d-48bf-b576-3c0bedb9cd9d.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/9aac2ef5-d73d-48bf-b576-3c0bedb9cd9d.jpg
[The_Guide_to_Minimum_Viable_Products]: http://www.gbtags.com/gb/share/3933.htm
[0c8d8df3-f2e7-4e76-8855-e76056e6f84d.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/0c8d8df3-f2e7-4e76-8855-e76056e6f84d.jpg
[0c8d8df3-f2e7-4e76-8855-e76056e6f84d.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/0c8d8df3-f2e7-4e76-8855-e76056e6f84d.jpg
[5]: http://www.gbtags.com/gb/share/3896.htm
[2fbdba05-7d14-4d3b-ba9d-d76f444eb9cd.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/2fbdba05-7d14-4d3b-ba9d-d76f444eb9cd.jpg
[2fbdba05-7d14-4d3b-ba9d-d76f444eb9cd.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/2fbdba05-7d14-4d3b-ba9d-d76f444eb9cd.jpg
[Android]: http://www.gbtags.com/gb/share/3902.htm
[ac9fce74-cdfc-4b23-a7db-3ceff4602cdb.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/ac9fce74-cdfc-4b23-a7db-3ceff4602cdb.jpg
[ac9fce74-cdfc-4b23-a7db-3ceff4602cdb.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/ac9fce74-cdfc-4b23-a7db-3ceff4602cdb.jpg
[jQuery]: http://www.gbtags.com/gb/share/3868.htm
[6122fe5e-89b9-439e-9c72-5f83706a1edc.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/6122fe5e-89b9-439e-9c72-5f83706a1edc.jpg
[6122fe5e-89b9-439e-9c72-5f83706a1edc.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/6122fe5e-89b9-439e-9c72-5f83706a1edc.jpg
[HTML5 1]: http://www.gbtags.com/gb/share/3943.htm
[20af9360-32a1-45e2-9c4f-542f5b846292.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/20af9360-32a1-45e2-9c4f-542f5b846292.jpg
[20af9360-32a1-45e2-9c4f-542f5b846292.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/20af9360-32a1-45e2-9c4f-542f5b846292.jpg
[HTML5 2]: http://www.gbtags.com/gb/tag/1111.htm
[CSS]: http://www.gbtags.com/gb/rtreplayerpreview/97.htm
[2336da97-42a3-4073-84af-7505d04244a4.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/2336da97-42a3-4073-84af-7505d04244a4.jpg
[2336da97-42a3-4073-84af-7505d04244a4.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/2336da97-42a3-4073-84af-7505d04244a4.jpg
[30]: http://www.gbtags.com/gb/share/3934.htm
[5523926f-fcea-4d32-a83b-8391e21196aa.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/5523926f-fcea-4d32-a83b-8391e21196aa.jpg
[5523926f-fcea-4d32-a83b-8391e21196aa.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/5523926f-fcea-4d32-a83b-8391e21196aa.jpg
[HTML5_Visibility_API]: http://www.gbtags.com/gb/share/3863.htm
[0b3107ab-3793-432d-b153-2106b924a15f.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/0b3107ab-3793-432d-b153-2106b924a15f.jpg
[0b3107ab-3793-432d-b153-2106b924a15f.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/0b3107ab-3793-432d-b153-2106b924a15f.jpg
[Bootstrap3]: http://www.gbtags.com/gb/share/3691.htm
[6fc73626-d299-4fec-b89a-4ad2db353002.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/6fc73626-d299-4fec-b89a-4ad2db353002.jpg
[6fc73626-d299-4fec-b89a-4ad2db353002.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/6fc73626-d299-4fec-b89a-4ad2db353002.jpg
[Bootstrap3 1]: http://www.gbtags.com/gb/gbliblist/14.htm
[UI_-_uilang]: http://www.gbtags.com/gb/share/3855.htm
[7e4b0e8e-af68-4a5b-bea0-121b6ee6e514.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/7e4b0e8e-af68-4a5b-bea0-121b6ee6e514.jpg
[7e4b0e8e-af68-4a5b-bea0-121b6ee6e514.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/7e4b0e8e-af68-4a5b-bea0-121b6ee6e514.jpg
[CSS3]: http://www.gbtags.com/gb/rtreplayerpreview/96.htm
[71af40ba-1856-4e13-a950-ffa359d280f9.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/71af40ba-1856-4e13-a950-ffa359d280f9.jpg
[71af40ba-1856-4e13-a950-ffa359d280f9.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/71af40ba-1856-4e13-a950-ffa359d280f9.jpg
[HTML5 3]: http://www.gbtags.com/gb/share/3928.htm
[e4c6ecfb-62af-407c-957d-47d451db2538.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/e4c6ecfb-62af-407c-957d-47d451db2538.jpg
[e4c6ecfb-62af-407c-957d-47d451db2538.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/e4c6ecfb-62af-407c-957d-47d451db2538.jpg
[React_JS_FLUX]: http://www.gbtags.com/gb/share/3848.htm
[0ab4eff6-84e3-461b-95c5-a9f2de264d3d.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/0ab4eff6-84e3-461b-95c5-a9f2de264d3d.jpg
[0ab4eff6-84e3-461b-95c5-a9f2de264d3d.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/0ab4eff6-84e3-461b-95c5-a9f2de264d3d.jpg
[Flux]: http://facebook.github.io/flux/
[HTML5_Pixi.js]: http://www.gbtags.com/gb/share/3835.htm
[6fcb11b4-a703-4b04-9ecb-67d884a4bae6.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/6fcb11b4-a703-4b04-9ecb-67d884a4bae6.jpg
[6fcb11b4-a703-4b04-9ecb-67d884a4bae6.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/6fcb11b4-a703-4b04-9ecb-67d884a4bae6.jpg
[Link 3]: http://www.gbtags.com/gb/share/3844.htm
[7193d6f5-3dac-45e7-8559-ccb8d718d4a2.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/7193d6f5-3dac-45e7-8559-ccb8d718d4a2.jpg
[7193d6f5-3dac-45e7-8559-ccb8d718d4a2.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/7193d6f5-3dac-45e7-8559-ccb8d718d4a2.jpg
[javascript]: http://www.gbtags.com/gb/tag/1004.htm