秋天风景
秋天风景_个人页
秋天风景
文章
2387
问答
0
视频
0
个人介绍
既然选择了远方，便只顾风雨兼程。
擅长的技术
-
发表了文章 2018-02-23
12个实用的 JavaScript 框架分享给前端开发者
JavaScript库是预先编写的 JavaScript 工具代码，让开发者可以更容易开发 JavaScript 应用。这个列表我们列出了2017年1月份功能丰富的 JavaScript 库，可以帮助您建立有效和有用的 Web 应用程序。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 1. Scrollanim Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库。 Scrolanim 支持在页面上的所有可用的元素的位置。有很多的自定义参数可以配置使用，构建出精彩的效果，非常容易使用。 2. Baffle.js Baffle.js 是一个 JavaScript 库，设计用来模糊和揭开DOM元素的文本。 这些元素可以是一个 CSS 选择器的形式、一个节点列表或者一个单节点。 你也可以传递一个选择对象给插件。 3. Waud.js Waud.js 是一个Web音频库，有一个HTML5音频降级处理方案。 它允许您利用Web音频API为你的Web应用程序控制音频功能。在不支持Web音频API的非现代浏览器使用HTML5音频降级方案。 4. ZingTouch ZingTouch is a JavaScript gesture detection library. It provides six standard gestures that are fully customizable. ZingTouch was created as a by-product for enabling ZingChart to work better on mobile devices by adding a layer of gestures for interactivity. 5. Lightense Images Lightense Images is a dependency-free pure JavaScript image zooming library less than 2 KB (gzipped). This library supports all modern browsers, it “should work” in Internet Explorer 10 and up as well. 6. Rellax Rellax is a buttery smooth, super lightweight, vanilla JavaScript parallax library. Rellax limits the parallax feature to laptop/desktop screens since the effect is negligible on smaller screens. 7. Approve JS ApproveJs is a simple JavaScript validation library that doesn’t interfere. It also doesn’t manipulate the DOM for you by automatically displaying errors. This allows you to handle validation how you want. 8. Cleave.js Cleave.js is a JavaScript library to help you format input text content automatically. It allows credit card number formatting, phone number formatting, date formatting, numeral formatting, commonjs/AMD mode and much more. 9. SuperEmbed.js SuperEmbed.js detects YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more embedded videos on webpages and makes them responsive. Essentially, this means they stretch to fill their container while still maintaining the original aspect ratio. 10. Typr.js Typr.js is a font processor for JavaScript. It’s light, small, and ultra fast. Typr.js is a JavaScript parser and utility for working with fonts (TTF, OTF). It is an alternative to opentype.js. It is the main text engine for Photopea image editor. It is lightweight, ultra fast and easy to extend library. 11. Typography.js A powerful toolkit for building websites with beautiful typography. Typography.js provides a vastly simpler way to define and explore typography designs. You provide configuration to the Typography.js JS API and it uses its Typography engine to generate CSS for block and inline elements. 12. Lightgallery.js Lightgallery是一个轻量级的模块化、响应式的灯箱画廊，它允许您创建美丽的图像和视频画廊。借助缩略图插件的帮助，Lightgallery 允许您创建缩略图画廊。它支持触摸屏设备上滑动导航以及桌面设备的鼠标拖动，还允许用户浏览缩略图和原图之间通过滑动手指或鼠标拖动。 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 本文链接：12个最新的 JavaScript 框架分享给前端开发者 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 作者：山边小溪 出处：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2018-01-26
最棒的 JavaScript 学习指南（2018版）
译者注：原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结，全文包含学习指南、新人上手、Webpack、性能、基础概念、函数式编程、面试、教程案例、Async Await、并发、V8、机器学习、数据可视化、调试、单元测试等章节，非常适合用于对自己 JavaScript 技术栈的比对，用于查漏补缺，适合收藏阅读。有删减。文中如有错误，欢迎评论指出。 在过去的一年间（2017年），我们对比了近24000篇 JavaScript 文章，并从中挑选出了最好的55篇。我们做了这个目录，认为阅读有经验的程序员写的文章是一个很好的学习方式。在学习了一两门课程之后，您可能在构建和发布实际应用时面临许多挑战。通过这个目录，您可以更轻松地找到去年的最佳 JavaScript 教程，在这里有经验的开发人员会分享他们学习 JavaScript 的课程、见解和遇到的错误。 这个目录有15个关键的主题，如下所示。他们分别是学习指南、新人上手、Webpack、性能、基础概念、函数式编程、面试、教程案例、Async Await、并发、V8、机器学习、数据可视化、调试、单元测试。 指南 Modern-js-cheatsheet: 一份针对现代项目中经常遇到的 JavaScript 知识的备忘清单。 不同著名的计算机科学算法的 JavaScript 实现。 30-seconds-of-code: 有用的 JavaScript 代码片段，你可以在30秒或更少的时间内理解。 一个简单的交互式 ES6 功能列表 去他*的 JavaScript：有趣和棘手的 JavaScript 示例列表 Airbnb 的 Javascript 风格指南 JavaScript. 核心内容：第二版 - Dmitry Soshnikov 上手 萌新也能懂的现代 JavaScript 开发 为远古 Web 开发者准备的的现代 JavaScript 2017年的 JavaScript 模式 - Scott Allen 为新手准备的带示例的 ES6 当我没有关注时，JavaScript 变得更好了 我刚问过 23,000 个开发人员对 JavaScript 的看法。这是我学到的。 我是如何在抛弃 JavaScript 90%的内容后，又重新找回对他的热爱的。 Vanilla JavaScript 中的 DOM 操作基础（无 jQuery） - SitePoint Webpack 一篇 Webpack 的详细介绍 – Smashing Magazine 我维护 webpack，尽情向我提问！ webpack bits: 充分利用 CommonsChunkPlugin() 性能 JavaScript 的代价 - Addy Osmani JavaScript 气动性能 - Addy Osmani JavaScript 是如何工作的：内存管理 + 如何处理四种常见的内存泄漏 概念 理解 JavaScript 中的作用域 现代 JavaScript 概念词汇表：第一部分 在 JavaScript 中处理 undefined 的7个技巧 - Dmitri Pavlutin 深入浅出编程概念 在汉堡排队中解释 JavaScript 中的 Promise 编程技巧：尝试不用 If 语句编程 – Samer Buna 函数式编程 精通 JavaScript 面试：什么是函数式编程？ 函数式编程（编写软件）的兴起与衰落 面试 为开发者面试准备的最终版 JavaScript Handbook JavaScript 面试最常见的十个问题 面试中你必须知道的10个 JavaScript 概念 教程案例 在4分30秒内编写“贪吃蛇”（使用纯浏览器端 JavaScript） 我们是如何在三周内开发出我们的第一个全栈 JavaScript web app 的 开发一个 Thrones Map 互动游戏（第二部分） - Leaflet.js 和 Webpack 使用 Javascript 创建一个区块链（区块链，第一部分） 我们是如何使用 JavaScript 黑掉咖啡机的 Google 地图 JavaScript API 教程 Async Await 六个为什么 JavaScript 中的 Async/Await 完虐 Promise 的原因（教程） Async/Await: JavaScript 中的现代并发 JavaScript 是如何工作的：事件循环机制和异步编程的兴起 + 更好使用 async/await 编程的五种方式 JavaScript 中的 async / await - What, Why and How - Fun Fun Function 图文并茂的解释 Await 和 Async 并发 并发JavaScript：可以工作！ V8 JavaScript 是如何工作的：V8 引擎内部机制及如何编写优化代码的 5 个诀窍 理解 V8 的字节码 JavaScript 是如何工作的：引擎，运行时以及调用堆栈概览 机器学习 使用 deeplearn.js 尝试 JavaScript 中的神经网络 如何只用30行代码在 JavaScript 中构建一个神经网络 在 JavaScript 使用机器学习：第一部分 数据可视化 更好的编程方式：d3.express 介绍：集成的探索环境。 调试 你可能不知道的14个 JavaScript 调试技巧 如何充分利用 JavaScript 控制台 单元测试 JavaScript中的单元测试[第1部分]：为什么要进行单元测试？ - Fun Fun Function 2017年 JavaScript 测试技术回顾 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 原文链接：最棒的 JavaScript 学习指南（2018版） 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
-
发表了文章 2017-12-17
Chimee - 简单易用的H5视频播放器解决方案
Chimee是由奇舞团开源的一套H5视频播放器解决方案，由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造。Chimee支持MP4、M3U8、FLV等多种媒体格式，同时它也帮我们解决了大部分的兼容性、差异化问题，包括全屏、自动播放、内联播放、直播解码等常见媒体播放需求。 通过便捷的可热插拔的插件开发，能满足业务方快速迭代、灰度发布等要求；让开发者能够更轻松快捷地完成不同业务场景下UI、广告等各种功能需求的开发。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Chimee - 简单易用的H5视频播放器解决方案 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
-
发表了文章 2017-12-14
electron-vue：Vue.js 开发 Electron 桌面应用
相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用，今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架，该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 概要 该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。 在 这里 查看其文档。 你会在本样板代码中找到的东西... 基本的项目结构与 单一的 package.json 设置 详细的 文档 使用 vue-cli 作为项目脚手架 立即可用的 Vue 插件 (axios, vue-electron, vue-router, vuex)* 预装开发工具 vue-devtools 和 devtron 使用 electron-packager 或 electron-builder 轻松打包你的应用程序* appveyor.yml 与 .travis.yml 配置用于 electron-builder 的自动部署* 能够生成用于浏览器的网页输出 便利的 NPM 脚本 使用携带模块热更新 (Hot Module Replacement) 的 webpack 和 vue-loader 在工作在 electron 的 main 主进程时重启进程 支持使用 vue-loader 的 HTML/CSS/JS 预处理器 默认支持 stage-0 的 ES6 使用 babili 避免完全反编译到 ES5 ESLint (支持 standard 和 airbnb-base)* 单元测试 (使用 Karma + Mocha)* 端到端测试 (使用 Spectron + Mocha)* * 在vue-cli脚手架中可定制 起步 该样板代码被构建为 vue-cli 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本项目需要使用 node@^7或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用 yarn clean 帮助减少最后构建文件的大小。 # 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project # 安装依赖并运行你的程序 cd my-project yarn # 或者 npm install yarn run dev # 或者 npm run dev 你是一个 Windows 用户？ 请务必查看 Windows 用户注意事项 来确保你拥有 electron 和其他依赖关系所需的所有必要构建工具。 希望使用 Vue 1？ 只需指向 1.0 分支即可。请注意，electron-vue 已经正式废除了 vue@^1 的使用，因此，这些更改也同样会反映到项目结构、功能和文档上 (遗留文档)。 vue init simulatedgreg/electron-vue#1.0 my-project 下一步 请务必查看 这个文档。在这里，你将找到有关项目配置、项目结构和构建应用程序的有用信息。这里还有一个方便的 常见问题 的部分。 基于 electron-vue 的作品 看看一些基于 electron-vue 建造的了不起的的项目。想要在此列出你自己的项目吗？请随时提交 pull 请求。 Surfbird: 一个基于 Electron 和 Vue 的 Twitter 客户端 Lulumi-browser: Lulumi-browser 是一个轻量级的浏览器，基于 Vue.js 2 和 Electron Space-Snake: 使用 Electron 和 Vue.js 构建的桌面游戏。 Forrest: 一个 npm 脚本的桌面客户端 miikun: 一个简单的 Markdown 编辑器 Dakika: 超省时的应用程序，使写作变得轻而易举 Dynamoc: Dynamoc 是一个 dynamodb-local、 dynalite 和 AWS dynamodb 的图形化界面客户端 Dockeron: Dockeron 项目, 基于 Electron + Vue.js 的 Docker 桌面客户端 Easysubs: 快速简单地下载字幕 Data-curator：分享可用的開放數據。 您可能感兴趣的相关文章 精心挑选的美轮美奂的 jQuery 图片特效插件 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQuery 文本特效插件和教程 8款非常棒的响应式 jQuery 幻灯片插件推荐 精心挑选12款优秀 jQuery 手风琴插件和教程 原文来自：electron-vue：使用 Vue.js 开发 Electron 桌面应用 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
-
发表了文章 2017-12-10
H5网页适配 iPhoneX，就是这么简单
iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助， 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域： 也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。 更详细说明，参考文档：Human Interface Guidelines - iPhoneX viewport-fit iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容（左图） cover：网页内容完全覆盖可视窗口（右图） auto：默认值，跟 contain 表现一致 注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。 更详细说明，参考文档：viewport-fit-descriptor constant 函数 iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量： safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离 safe-area-inset-bottom：安全区域距离底部边界距离 这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。 注意：当 viewport-fit=contain 时 constant 函数是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持 constant 的浏览器，浏览器将会忽略它。官方文档中提到 env 函数即将要替换 constant 函数，笔者测试过暂时还不可用。 更详细说明，参考文档：Designing Websites for iPhone X 如何适配 了解了以上所说的几个知识点，接下来我们适配的思路就很清晰了。 第一步：设置网页在可视窗口的布局方式 新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口： 1 <meta name="viewport" content="width=device-width, viewport-fit=cover"> 前面也有提到过，只有设置了 viewport-fit=cover，才能使用 constant 函数。 第二步：页面主体内容限定在安全区域内 这一步根据实际页面场景选择，如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况。 1 2 3 body { padding-bottom: constant(safe-area-inset-bottom); } 第三步：fixed 元素的适配 类型一：fixed 完全吸底元素（bottom = 0），比如下图这两种情况： 可以通过加内边距 padding 扩展高度： 1 2 3 { padding-bottom: constant(safe-area-inset-bottom); } 或者通过计算函数 calc 覆盖原来高度： 1 2 3 { height: calc(60px(假设值) + constant(safe-area-inset-bottom)); } 注意，这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。 还有一种方案就是，可以通过新增一个新的元素（空的颜色块，主要用于小黑条高度的占位），然后吸底元素可以不改变高度只需要调整位置，像这样： 1 2 3 { margin-bottom: constant(safe-area-inset-bottom); } 空的颜色块： 1 2 3 4 5 6 7 { position: fixed; bottom: 0; width: 100%; height: constant(safe-area-inset-bottom); background-color: #fff; } 类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等 像这种只是位置需要对应向上调整，可以仅通过外边距 margin 来处理： 1 2 3 { margin-bottom: constant(safe-area-inset-bottom); } 或者，你也可以通过计算函数 calc 覆盖原来 bottom 值： 1 2 3 { bottom: calc(50px(假设值) + constant(safe-area-inset-bottom)); } 别忘了使用 @supports 写到这里，我们常见的两种类型的 fixed 元素适配方案已经了解了吧，但别忘了，一般我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 这样编写样式： 1 2 3 4 5 @supports (bottom: constant(safe-area-inset-bottom)) { div { margin-bottom: constant(safe-area-inset-bottom); } } 写在最后 以上几种方案仅供参考，笔者认为，现阶段适配处理起来是有点折腾，但是至少能解决，具体需要根据页面实际场景，在不影响用户体验与操作的大前提下不断尝试与探索，才能更完美的适配。 您可能感兴趣的相关文章 精心挑选的美轮美奂的 jQuery 图片特效插件 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQuery 文本特效插件和教程 8款非常棒的响应式 jQuery 幻灯片插件推荐 精心挑选12款优秀 jQuery 手风琴插件和教程 原文来自： 想要让H5网页适配 iPhoneX，就是这么简单 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-12-10
经典文摘：饿了么的 PWA 升级实践（结合Vue.js）
自 Vue.js 官方推特第一次公开到现在，我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作。直到近日在 Google I/O 2017 上登台亮相，才终于算告一段落。我们非常荣幸能够发布全世界第一个专门面向国内用户的 PWA，但更荣幸的是能与 Google、UC 以及腾讯合作，一起推动国内 web 与浏览器生态的发展。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 多页应用、Vue、PWA？ 对于构建一个希望达到原生应用级别体验的 PWA，目前社区里的主流做法都是采用 SPA，即单页面应用模型（Single-page App）来组织整个 web 应用，业内最有名的几个 PWA 案例 Twitter Lite、 Flipkart Lite、Housing Go 与 Polymer Shop 无一例外。 然而饿了么，与很多国内的电商网站一样，青睐多页面应用模型（MPA，Multi-page App）所能带来的一些好处，也因此在一年多将移动站从基于 Angular.js 的单页应用重构为目前的多页应用模型。团队最看重的优点莫过于页面与页面之间的隔离与解耦，这使得我们可以将每个页面当做一个独立的“微服务”来看待，这些服务可以被独立迭代，独立提供给各种第三方的入口嵌入，甚至被不同的团队独立维护。而整个网站则只是各种服务的集合而非一个巨大的整体。 与此同时，我们仍然依赖 Vue.js 作为 JavaScript 框架。Vue 除了是 React/Angular 这种“重型武器”的竞争对手外，其轻量与高性能的优点使得它同样可以作为传统多页应用开发中流行的 “jQuery/Zepto/Kissy + 模板引擎” 技术栈的完美替代。Vue 提供的组件系统、声明式与响应式编程更是提升了代码组织、共享、数据流控制、渲染等各个环节的开发效率。Vue 还是一个渐进式框架，如果网站的复杂度继续提升，我们可以按需、增量地引入 Vuex 或 Vue-Router 这些模块。万一哪天又要改回单页呢？（谁知道呢……） 2017 年，PWA 已经成为 web 应用新的风潮。我们决定试试，以我们现有的“Vue + 多页”的架构，能在升级 PWA 的道路上走多远，达到怎样的效果。 实现 “PRPL” 模式 “PRPL”（读作 “purple”）是 Google 的工程师提出的一种 web 应用架构模式，它旨在利用现代 web 平台的新技术以大幅优化移动 web 的性能与体验，对如何组织与设计高性能的 PWA 系统提供了一种高层次的抽象。我们并不准备从头重构我们的 web 应用，不过我们可以把实现 “PRPL” 模式作为我们的迁移目标。“PRPL”实际上是 Push/Preload、Render、Precache、Lazy-Load 的缩写，我们会在下文中展开它们的具体含义。 1. PUSH/PRELOAD，推送/预加载初始 URL 路由所需的关键资源。 无论是 HTTP2 Server Push 还是 <link rel="preload">，其关键都在于，我们希望提前请求一些隐藏在应用依赖关系（Dependency Graph）较深处的资源，以节省 HTTP 往返、浏览器解析文档、或脚本执行的时间。比如说，对于一个基于路由进行 code splitting 的 SPA，如果我们可以在 webpack 清单、路由等入口代码（entry chunks）被下载与运行之前就把初始 URL，即用户访问的入口 URL 路由所依赖的代码用 Server Push 推送或 <link rel="preload"> 进行提前加载。那么当这些资源被真正请求时，它们可能已经下载好并存在在缓存中了，这样就加快了初始路由所有依赖的就绪。 在多页应用中，每一个路由本来就只会请求这个路由所需要的资源，并且通常依赖也都比较扁平。饿了么移动站的大部分脚本依赖都是普通的 <script> 元素，因此他们可以在文档解析早期就被浏览器的 preloader 扫描出来并且开始请求，其效果其实与显式的 <link rel="preload"> 是一致的。 我们还将所有关键的静态资源都伺服在同一域名下（不再做域名散列），以更好的利用 HTTP2 带来的多路复用（Multiplexing）。同时，我们也在进行着对 API 进行 Server Push 的实验。 2. RENDER，渲染初始路由，尽快让应用可被交互 既然所有初始路由的依赖都已经就绪，我们就可以尽快开始初始路由的渲染，这有助于提升应用诸如首次渲染时间、可交互时间等指标。多页应用并不使用基于 JavaScript 的路由，而是传统的 HTML 跳转机制，所以对于这一部分，多页应用其实不用额外做什么。 3. PRE-CACHE，用 Service Worker 预缓存剩下的路由 这一部分就需要 Service Worker 的参与了，Service Worker 是一个位于浏览器与网络之间的客户端代理，它以可拦截、处理、响应流经的 HTTP 请求，使得开发者得以从缓存中向 web 应用提供资源而闻名。不过，Service Worker 其实也可以主动发起 HTTP 请求，在“后台” 预请求与预缓存我们未来所需要的资源。 我们已经使用 Webpack 在构建过程中进行 .vue 编译、文件名哈希等工作，于是我们编写了一个 webpack 插件来帮助我们收集需要缓存的依赖到一个“预缓存清单”中，并使用这个清单在每次构建时生成新的 Service Worker 文件。在新的 Service Worker 被激活时，清单里的资源就会被请求与缓存，这其实与 SW-Precache 这个库的运行机制非常接近。 实际上，我们只对我们标记为“关键路由”的路由进行依赖收集。你可以将这些“关键路由”的依赖理解为我们整个应用的 “App Shell” 或者说“安装包”。一旦它们都被缓存，或者说成功安装，无论用户是在线离线，我们的 web 应用都可以从缓存中直接启动。对于那些并不那么重要的路由，我们则采取在运行时增量缓存的方式。我们使用的 SW-Toolbox 提供了 LRU 替换策略与 TTL 失效机制，可以保证我们的应用不会超过浏览器的缓存配额。 4. LAZY-LOAD 按需懒加载、懒实例化剩下的路由 懒加载与懒实例化剩下的路由对于 SPA 是一件相对麻烦点儿的事情，你需要实现基于路由的 code splitting 与异步加载。幸运的是，这又是一件不需要多页应用担心的事情，多页应用中的各个路由天生就是分离的。 值得说明的是，无论单页还是多页应用，如果在上一步中，我们已经将这些路由的资源都预先下载与缓存好了，那么懒加载就几乎是瞬时完成的了，这时候我们就只需要付出实例化的代价。 这四句话即是 PRPL 的全部了。有趣的是，我们发现多页应用在实现 PRPL 这件事甚至比单页还要容易一些 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-11-16
Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件，纯 JavaScript 库，不依赖 jQuery。用于构建操作方便的拖放排序功能，超级容易设置，有平滑的动画，支持触摸事件。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Table Dragger - 简单的 JS 拖放排序表格插件 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-11-01
分享8个网站开发中最好用的打印页面插件
通常浏览器是通过打印命令来确定需要打印的内容，但它可以在 jQuery 插件打印页面插件的帮助下打印一个特定区域的内容。。因此,您可以使用这些 jQuery 插件和打印页面给用户在你的网站上所需的接口。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 1. PrintArea PrintArea is a jQuery plugin to print specified area of a page.You can specify 2 modes of printing:• IFRAME-mode• Popup-mode Other options were added as the need arose, such as adding css to the page printed document, retaining attributes of the source element, adding elements to the head of the document printed and specifying several predefined document standards (the default is html5), even the popup was not part of the original plan. 2. Offreg Offreg is a jQuery plugin that uses canvas to create a ‘screen print’ offset effect on an image, by altering the pixel data. Nb. Renders poorly in Chrome. But all good in other modern browsers. 3. PrintMe PrintMe is a jQuery plugin for print any page element. PrintMe is a lightweight Plugin to print any html element. 4. Print Preview Print-Preview is a jQuery plugin that allows a “Print Preview” button to open a new browser window displaying specific print area of your webpage. 5. Printer Printer is an open source AJAX style page loading jQuery plugin that retrieves the URL from each hyperlink in the sidebar on the fly upon being clicked. It can also function as a rudimentry slideshow (but keep in mind this plugin does not cache any resources, i.e. Printer will make a new AJAX request on each new slide). 6. jQuery Print Plugin jQuery.print is a plugin for printing specific parts of a page, it comes with few good features like you can set if the popup will take place in the current widow (via an iFrame), set the time to wait before the print display renders and place content before / after the popup. 7. jQuery Print Preview Plugin The jQuery Print Preview plugin is designed to provide visitors with a preview of the print version of a web site. Unlike traditional print previews this plugin brings in all content and print styles within a modal window. 8. jQuery printPage plugin 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 本文链接：分享8个网站开发中最好用的打印页面插件 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-10-11
baguetteBox.js - 简单易用的 lightbox 插件
baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件，支持滑动手势在移动设备上使用。纯 JavaScript 实现，不依赖第三方库和插件，赶紧来体验吧。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：baguetteBox.js - 简单易用的 lightbox 插件 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-09-19
可以作为你的候选的12个很赞的移动开发框架
原生移动应用程序运行更快、更顺畅，有更好的用户体验。而同时，前端开发人员总是寻找新的 Web 技术来获得这种性能。利用现有的高质量移动框架来构建移动 Web 应用程序已成为非常容易，但是如何选择合适的框架是比较纠结的。因此在本文中，我们整理了12个很赞的移动框架。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 1. Redbeard Redbeard makes it faster and easier to create native apps without a boilerplate. It’s a complete framework with tons of components.There’s a whole variety of ready to use components for some of the most commonly needed functionality. Every component is fully themable via our awesome theming engine. No need for wrapper apps or wrapper frameworks. Redbeard is fully 100% native development framework that works with Objective-C and Swift across the whole iOS suite. 2. Weex Weex is a mobile cross-platform UI framework. It’s lightweight, high-performance, and extendable. Weex is from Alibaba to build mobile apps with just HTML, CSS and JavaScript. It comes with Modules, UI components, its own DevTools and CLI that is designed towards mobile environment and to speed up development. 3. Rikulo Rikulo UI is a Dart framework for creating cross-platform web and native mobile applications with HTML5. It uses a structured UI model and offers a responsive UX across desktop & touch devices. 4. A Frame A-Frame is a framework for building things for the virtual reality web. You can use markup to create VR experiences that work across desktop, iPhones, and the Oculus Rift. 5. Onsen UI Onsen UI is a mobile framework that includes Javascript and CSS frameworks for HTML5, PhoneGap & Cordova apps. It offers a large selection of Web-based UI components, and responsive layouts for smartphones and tablets, among other features. 6. Tabris.js Tabris.js is a mobile framework that makes it simple to create native apps for iOS and Android in JavaScript. It doesn’t use WebViews for rendering UI, and instead creates native widgets on the mobile platform via a JavaScript-to-native bridge. This also enables the quick develop / deploy cycle that you know from web development. 7. Rad.js RAD.js is the solution to the problem of creating apps with multiplatform capabilities and native-like responsiveness, performance, and usability. It is a toolkit created by MobiDev experts for business needs of mobile startups, well-established businesses, and directly for software developers. 8. Konva Kanva is a 2D HTML5 canvas framework for creating desktop and mobile apps. It has an object oriented API, layering support, tween and animation support, filters, and custom shapes, among other features. 9. Mootor Mootor is an HTML5 framework for developing mobile apps. It’s minimalist and works on multiple platforms, including iOS, Android, and others. 10. TouchstoneJS TouchstoneJS is a UI framework powered by React.js for developing hybrid mobile apps. It includes form components, navigation, transitions, native touch behaviors, and much more, with more features on the way. 11. Pikabu Pikabu is a framework for creating off-canvas flyout panels. It has simple markup, supports native scrolling, and is fully customizable. 12. Clank Clank is an open source HTML and CSS framework for prototyping native mobile and tablet apps. It uses modern CSS techniques, with Sass and Compass, and its component based so you can pick and choose what you need. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 本文链接：可以作为你的候选的12个很赞的移动开发框架 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-09-07
Baffle.js – 用于实现文本模糊效果的 JavaScript 库
Baffle.js 是一个 JavaScript 库，设计用来模糊和揭开DOM元素的文本。 这些元素可以是一个 CSS 选择器的形式、一个节点列表或者一个单节点。 你也可以传递一个选择对象给插件。 在线演示 立即下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Baffle.js – 用于实现文本模糊效果的 JavaScript 库 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-08-21
前端工程师和设计师必读文章推荐【系列三十七】
《Web 前端开发精华文章推荐》自2011年6月20号发布第一期以来，历经五年半，总共发布了30多期。今天这篇是2017年第2期（总第37期），希望你能在这里发现有用的资料。 梦想天空专注前端开发技术，分享提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。 HTML5 & CSS3 Foundation 6 – 先进的响应式的前端开发框架 分享最新最佳的12个 CSS 开发工具推荐 TouchPoint.js – 可视化展示 HTML 原型点击效果 分享15个优秀的 CSS 解决方案和工具 推荐8个实现 SVG 动画的 JavaScript 库 15款值得开发者一试的最新的前端框架 分享15款很实用的 Sass 和 Compass 工具 CssStats – 分析和优化网站 CSS 代码的利器 AOS – 另外一个独特的页面滚动动画库（CSS3） Waud.js – 使用HTML5降级处理的Web音频库 Httpster –世界各地最潮的网页设计案例聚合网站 JS 框架和工具 精心挑选10款优秀的 jQuery 图片左右滚动插件 推荐15款响应式的 jQuery Lightbox 插件 推荐15个最好用的 JavaScript 代码压缩工具 20个不可思议的 WebGL 示例和演示 LightGallery.js – 功能齐全的 JS Lightbox Chocolat.js – 响应式的 jQuery Lightbox 插件 jQuery.my – 实时的复杂的双向数据绑定 Senna.js – 速度极快的单页应用程序引擎 Cropper – 简单的 jQuery 图片裁剪插件 AntiModerate – 渐进式图片加载的 JavaScript 库 2016年4月最佳的20款 jQuery 插件推荐 推荐15款制作 SVG 动画的 JavaScript 库 16款最佳的 jQuery Time Picker 时间选择插件 20款 JavaScript 开发框架推荐给前端开发者 Cleave.js – 自动格式化表单输入框的文本内容 12款简化 Web 开发的 JavaScript 开发框架 前端工具 - 15个最佳的 JavaScript 表单验证库 网站素材 分享20个华丽的模态窗口弹出效果示例 前端开发者必备的20个文档和在线工具 分享20个最新的免费 UI 设计素材给设计师 前端开发者必备的20个在线工具和指南 15个最佳的用户体验和用户界面工具和资源 分享20个新颖的字体设计草图，带给你灵感 40款用于简洁网页设计的光滑英文字体【上】 40款用于简洁网页设计的光滑英文字体【下】 字体下载大宝库：12款好看的免费英文字体 2017年最新15个漂亮的 HTML 摄影网站模板 12个用于网站性能优化的最佳的图片压缩工具 15个最佳的代码评审（Code Review）工具 OS.js – 开源的 Web OS 系统，赶快来体验 Postman - 强大的 API 接口请求调试和管理工具 同系列文章 Web 前端开发人员和设计师必读文章推荐【系列一】 Web 前端开发人员和设计师必读文章推荐【系列二】 Web 前端开发人员和设计师必读文章推荐【系列三】 Web 前端开发人员和设计师必读文章推荐【系列四】 Web 前端开发人员和设计师必读文章推荐【系列五】 Web 前端开发人员和设计师必读文章推荐【系列六】 Web 前端开发人员和设计师必读文章推荐【系列七】 Web 前端开发人员和设计师必读文章推荐【系列八】 Web 前端开发人员和设计师必读文章推荐【系列九】 Web 前端开发人员和设计师必读文章推荐【系列十】 Web 前端开发人员和设计师必读文章推荐【系列十一】 Web 前端开发人员和设计师必读文章推荐【系列十二】 Web 前端开发人员和设计师必读文章推荐【系列十三】 Web 前端开发人员和设计师必读文章推荐【系列十四】 Web 前端开发人员和设计师必读文章推荐【系列十五】 Web 前端开发人员和设计师必读文章推荐【系列十六】 Web 前端开发人员和设计师必读文章推荐【系列十七】 Web 前端开发人员和设计师必读文章推荐【系列十八】 Web 前端开发人员和设计师必读文章推荐【系列十九】 Web 前端开发人员和设计师必读文章推荐【系列二十】 Web 前端开发人员和设计师必读文章推荐【系列二十一】 Web 前端开发人员和设计师必读文章推荐【系列二十二】 Web 前端开发人员和设计师必读文章推荐【系列二十三】 Web 前端开发人员和设计师必读文章推荐【系列二十四】 Web 前端开发人员和设计师必读文章推荐【系列二十五】 Web 前端开发人员和设计师必读文章推荐【系列二十六】 Web 前端开发人员和设计师必读文章推荐【系列二十七】 Web 前端开发人员和设计师必读文章推荐【系列二十八】 Web 前端开发人员和设计师必读文章推荐【系列二十九】 Web 前端开发人员和设计师必读文章推荐【系列三十】 Web 前端开发人员和设计师必读文章推荐【系列三十一】 Web 前端开发人员和设计师必读文章推荐【系列三十二】 Web 前端开发人员和设计师必读文章推荐【系列三十三】 Web 前端开发人员和设计师必读文章推荐【系列三十四】 Web 前端开发人员和设计师必读文章推荐【系列三十五】 Web 前端开发人员和设计师必读文章推荐【系列三十六】 本文链接：前端工程师和设计师必读文章推荐【系列三十四】 文章来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-08-20
Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件。可以让你网页以新颖的交互方式呈现。另外，Prezento 支持响应式设计，配置项也很灵活，可以根据你需要的效果配置。 您可能感兴趣的相关文章 太赞了！超炫的页面切换动画效果【附源码下载】 创意无限！一组网页边栏过渡动画【附源码下载】 好东西！动感的页面加载动画效果【附源码下载】 使用 CSS3 实现3D图片滑块效果【附源码下载】 时尚设计！三种奇特网格加载效果【附源码下载】 源码下载 在线演示 本文链接：Prezento – 轻量、简单的 jQuery 幻灯片插件 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-08-13
7种方法实现移动端Retina屏幕1px边框效果
在Reina（视网膜）屏幕的手机上，使用CSS设置的1px的边框实际会比视觉稿粗很多。在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了，UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样。没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞懂了这个问题，并且总结了几种方法。 造成边框变粗的原因 其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。 解决边框变粗的6种办法 1、0.5px边框 在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retinahairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框： 0.5px边框 额的神呐！so easy! 果真如此吗？这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。 解决方案：解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。 if (window.devicePixelRatio && devicePixelRatio >= 2) { var testElem = document.createElement('div'); testElem.style.border = '.5px solid transparent'; document.body.appendChild(testElem); } if (testElem.offsetHeight == 1) { document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(testElem); } // 脚本应该放在内，如果在里面运行，需要包装 $(document).ready(function() {}) 然后，极细的边框样式就容易了： div { border: 1px solid #bbb; } .hairlines div { border-width: 0.5px; } 优点： 简单，不需要过多代码。 缺点： 无法兼容安卓设备、 iOS 8 以下设备。 2、使用border-image实现 准备一张符合你要求的border-image： 底部边框 样式设置： .border-bottom-1px { border-width: 0 0 1px 0; -webkit-border-image: url(linenew.png) 0 0 2 0 stretch; border-image: url(linenew.png) 0 0 2 0 stretch; } 上文是把border设置在边框的底部，所以使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的border的颜色。如果边框底部和顶部同时需要border，可以使用下面的border-image： 上下边框 样式设置： .border-image-1px { border-width: 1px 0; -webkit-border-image: url(linenew.png) 2 0 stretch; border-image: url(linenew.png) 2 0 stretch; } 到目前为止，我们已经能在iphone上展现1px border的效果了。但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象，于是使用Media Query做了一些兼容，样式设置如下： .border-image-1px { border-bottom: 1px solid #666; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .border-image-1px { border-bottom: none; border-width: 0 0 1px 0; -webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch; border-image: url(../img/linenew.png) 0 0 2 0 stretch; } } 优点： 可以设置单条,多条边框 没有性能瓶颈的问题 缺点： 修改颜色麻烦, 需要替换图片 圆角需要特殊处理，并且边缘会模糊 3、使用background-image实现 background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。然后将边框模拟在背景上。样式设置： .background-image-1px { background: url(../img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; } 优点： 可以设置单条,多条边框 没有性能瓶颈的问题 缺点： 修改颜色麻烦, 需要替换图片 圆角需要特殊处理，并且边缘会模糊 4、多背景渐变实现 与background-image方案类似，只是将图片替换为css3渐变。设置1px的渐变背景，50%有颜色，50%透明。样式设置： .background-gradient-1px { background: linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat, linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat, linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat, linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat } /* 或者 */ .background-gradient-1px{ background: -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat, -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat, -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat, -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat } 优点： 可以实现单条、多条边框 边框的颜色随意设置 缺点： 代码量不少 圆角没法实现 多背景图片有兼容性问题 5、使用box-shadow模拟边框 利用css 对阴影处理的方式实现0.5px的效果样式设置： .box-shadow-1px { box-shadow: inset 0px -1px 1px -1px #c8c7cc; } 优点： 代码量少 可以满足所有场景 缺点： 边框有阴影，颜色变浅 6、viewport + rem 实现 同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。在devicePixelRatio = 2 时，输出viewport： <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 在devicePixelRatio = 3 时，输出viewport： <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no"> 这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。对于这种方案，可以看看《使用Flexible实现手淘H5页面的终端适配》优点： 所有场景都能满足 一套代码，可以兼容基本所有布局 缺点： 老项目修改代价过大，只适用于新项目 7、伪类 + transform 实现 对于老项目，有没有什么办法能兼容1px的尴尬问题了，个人认为伪类+transform是比较完美的方法了。原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。单条border样式设置： .scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } 四条boder样式设置: .scale-1px{ position: relative; margin-bottom: 20px; border:none; } .scale-1px:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } 最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏： if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector('ul').className = 'scale-1px'; } 优点： 所有场景都能满足 支持圆角(伪类和本体类都需要加border-radius) 缺点： 对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套 参考： 《1px on retina》 《再谈mobile web retina 下 1px 边框解决方案》 《Retina屏的移动设备如何实现真正1px的线？》 《在retina屏中实现1px border效果》 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 原文来自：7种方法解决移动端Retina屏幕1px边框问题 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-08-09
2017年最新20个轻量的 JavaScript 库和插件
下面这个列表中的免费 JavaScript 插件都是今年发布的，没有臃肿的一体化的框架，它们提供轻量级的解决方案，帮助 Web 开发过程更容易和更快。提供的插件可以创建滑块、响应式菜单、模态窗口、相册和许多其他常见的组件。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 baguetteBox.js baguetteBox.js 一个简单和易于使用的响应式的图像 Lightbox 插件，支持滑动手势在移动设备上使用。纯 JavaScript 实现，不依赖第三方库和插件。 ScrollReveal 创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。 Bricks.js Bricks.js is a ‘blazing fast’ masonry layout generator for fixed width elements. Philter Available as either a jQuery plugin or as vanilla JavaScript, the Philter gives you the means to control CSS filters with HTML attributes. List.js List.js is a lightweight and fast vanilla JavaScript script that adds search, sort, filters and flexibility to lists, tables, or anything HTML. Datedropper.js Datedropper.js is a jQuery plugin that gives you a an easy way to manage dates for input fields. jfMagnify jfMagnify is a jQuery plugin that creates a magnify glass effect on any HTML element, not just images. jQuery formBuilder jQuery formBuilder is a new jQuery plugin for quick, drag & drop form creation. Popper.js Popper.js is a lightweight (4kb minified) library for managing poppers, tooltips and popovers. You can quickly and easily position tooltips with just a single line code. iMissYou.js iMissYou.js is a handy little jQuery plugin for changing the title & favicon of the page when the user moves away from your website. SweetAlert2 SweetAlert2 is a beautiful and customizable replacement for JavaScript's popup boxes. Turntable.js Turntable.js is a responsive jQuery slider that will flip through a selection of images as your mouse moves across a container. Force.js Force.js is a JavaScript library that makes it simple to animate HTML elements and navigate around a web page. Bideo.js Bideo.js is a JavaScript library that makes it very easy to add fullscreen background videos to web pages. flatpickr Written in vanilla JavaScript, flatpickr is lightweight datetimepicker and calendar solution. Slidebars Slidebars is a jQuery Framework for adding off-canvas menus and sidebars to your website or web application. anime.js anime.js is a flexible and lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects. Cleave.js Cleave.js – Format your <input/> content when you are typing. Skippr Skippr is a super simple and lightweight slideshow plugin for jQuery iziModal.js iziModal.js is an elegant, responsive, flexible and lightweight modal jQuery plugin. Lightgallery.js Lightgallery.js is a fully featured JavaScript lightbox gallery with no dependencies. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典网页设计：25个应用视差滚动单页网站 经典网页设计：20个新鲜出炉 HTML5 网站 经典网页设计：20例简洁精美着陆页面设计 经典网页设计：20个简约风格电子商务网站 本文链接：2017年1月份20个轻量的 JavaScript 库和插件 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-06-25
Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板（管理系统），相当于是 Vue 版本的 Bootstrap 管理系统，提供了一组通用的后台界面 UI 和组件，其中还有丰富的图表组件，开箱即用。赶紧来体验一下吧。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Vue Admin - 基于 Vue & Bulma 后台管理面板 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-05-18
前端工程师和设计师必读文章推荐【系列三十六】
《Web 前端开发精华文章推荐》自2011年6月20号发布第一期以来，历经五年半，总共发布了30多期。今天这篇是2017年第2期（总第36期），希望你能在这里发现有用的资料。 梦想天空专注前端开发技术，分享提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。 HTML5 & CSS3 Wee – 为现代 Web 开发打造的 CSS 脚手架 Page Scroll Effects - 简单的页面滚动效果 Gradify - 提取图片颜色，创建响应式的 CSS渐变 太可爱了！CSS3 & SVG 制作的米老鼠钟表 类似 Dribbble 下载按钮的 SVG 弹性动画进度条 学习使用 SVG 创建材料设计涟漪（Ripple）效果 轻量的、可自定义 CSS 的 Lightbox 相册插件 Codrops 实验：使用 Vibrant.js 提取图像颜色 Cool！15个超炫的 CSS3 文本特效【上篇】 Cool！15个创意的 CSS3 文本效果【下篇】 JS 框架和工具 Popmotion – 灵活的 JavaScript 运动引擎 15款加速 Web 开发的 JavaScript 框架 Dynamics.js - 创建逼真的物理动画的 JS 库 24个很赞的 Node.js 免费教程和在线指南 20个免费的 AngularJS 资源和开发教程 CamanJS – 提供各种图片处理的 JavaScript 库 分享20款移动开发中很有用的 jQuery 插件 Clipboard.js – 现代方式实现复制文本到剪贴板 ESLint – 可扩展的 JavaScript & JSX 校验工具 DrawSVG - SVG 路径动画 jQuery 插件 网站素材 免费素材：包含 250+ 组件的 DO UI Kit 在你设计中可能用到的20个杂志 PSD 原型 设计师们会喜欢的15套情人节素材 20款华丽的几何形状字体【免费下载】 提升用户体验！29个使用动画效果的网站布局 25个你会喜欢的创新的水平滚动网站设计欣赏 实用工具 分享最新15个加速 Web 开发的框架和工具 推荐15款最佳的响应式 Web 设计测试工具 Tabio – 轻松，高效的管理 Chrome 标签页 Sitecake – 可视化编辑，所见即所得的 CMS ContentTools – 所见即所得（WYSIWYG）编辑器 像素地图生成工具帮助你快速生成精美地图 Unsplash.it - 实用的图片占位符，支持个性化设置 同系列文章 Web 前端开发人员和设计师必读文章推荐【系列一】 Web 前端开发人员和设计师必读文章推荐【系列二】 Web 前端开发人员和设计师必读文章推荐【系列三】 Web 前端开发人员和设计师必读文章推荐【系列四】 Web 前端开发人员和设计师必读文章推荐【系列五】 Web 前端开发人员和设计师必读文章推荐【系列六】 Web 前端开发人员和设计师必读文章推荐【系列七】 Web 前端开发人员和设计师必读文章推荐【系列八】 Web 前端开发人员和设计师必读文章推荐【系列九】 Web 前端开发人员和设计师必读文章推荐【系列十】 Web 前端开发人员和设计师必读文章推荐【系列十一】 Web 前端开发人员和设计师必读文章推荐【系列十二】 Web 前端开发人员和设计师必读文章推荐【系列十三】 Web 前端开发人员和设计师必读文章推荐【系列十四】 Web 前端开发人员和设计师必读文章推荐【系列十五】 Web 前端开发人员和设计师必读文章推荐【系列十六】 Web 前端开发人员和设计师必读文章推荐【系列十七】 Web 前端开发人员和设计师必读文章推荐【系列十八】 Web 前端开发人员和设计师必读文章推荐【系列十九】 Web 前端开发人员和设计师必读文章推荐【系列二十】 Web 前端开发人员和设计师必读文章推荐【系列二十一】 Web 前端开发人员和设计师必读文章推荐【系列二十二】 Web 前端开发人员和设计师必读文章推荐【系列二十三】 Web 前端开发人员和设计师必读文章推荐【系列二十四】 Web 前端开发人员和设计师必读文章推荐【系列二十五】 Web 前端开发人员和设计师必读文章推荐【系列二十六】 Web 前端开发人员和设计师必读文章推荐【系列二十七】 Web 前端开发人员和设计师必读文章推荐【系列二十八】 Web 前端开发人员和设计师必读文章推荐【系列二十九】 Web 前端开发人员和设计师必读文章推荐【系列三十】 Web 前端开发人员和设计师必读文章推荐【系列三十一】 Web 前端开发人员和设计师必读文章推荐【系列三十二】 Web 前端开发人员和设计师必读文章推荐【系列三十三】 Web 前端开发人员和设计师必读文章推荐【系列三十四】 Web 前端开发人员和设计师必读文章推荐【系列三十五】 本文链接：前端工程师和设计师必读文章推荐【系列三十四】 文章来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
-
发表了文章 2017-05-17
Scrollanim – CSS3 & JavaScript 创建滚动动画
Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库。 Scrolanim 支持在页面上的所有可用的元素的位置。有很多的自定义参数可以配置使用，构建出精彩的效果，非常容易使用。 在线演示 立即下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Scrollanim – CSS3 & JavaScript 创建滚动动画 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-04-19
axios - 基于 Promise 的 HTTP 异步请求库
axios 是基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用。Vue 更新到2.0之后，作者就宣告不再对 vue-resource 模块更新，而是推荐使用 axios 来处理 HTTP 请求。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：axios - 基于 Promise 的 HTTP 异步请求库 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-04-17
Bulma - 基于 Flexbox 的现代化的 CSS 框架
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架，设计的初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复制的内容布局，浏览器支持：浏览器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Bulma - 基于 Flexbox 的现代化的 CSS 框架 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-04-10
PixiJS - 基于 WebGL 的超快 HTML5 2D 渲染引擎
Pixi.js 是一个开源的HTML5 2D 渲染引擎，使用 WebGL 实现，不支持的浏览器会自动降低到 Canvas 实现。PixiJS 的目标是提供一个快速且轻量级的2D库，并能兼容所有设备。此外，让开发者无需了解WebGL，就可以感受到硬件加速的力量。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：PixiJS - 基于WebGL的超快的HTML5 2D渲染引擎 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-04-04
前端回顾：2016年 JavaScript 之星
JavasScript社区在创新的道路上开足了马力，曾经流行过的也许一个月之后就过时了。2016已经结束了。你可能会想你是否错过一些重要的东西？不用担心，让我们来回顾2016年前端有哪些主流。通过比较过去12个月里Github所增加的star数，我们依次来看看哪些项目吸引了大多数眼光。 在2015，React是当之无愧的王者，Redux赢得了与flux之间的战争，攻陷了Flux的城池。那么，谁会是2016年的JavaScript之星呢？ 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 我们利用bestof.js.org分析所涉及的项目技术。（bestof.js.org罗列了一系列与web平台相关的最好的项目） 1. 2016最流行项目 通过比较去年最火的10个项目，你可以总览2016的web前端技术发展，会发现： 3个UI框架：Vue.js, React以及Angular 2 新的node.js包管理工具：Yarn 桌面应用领先级解决方案：Electron 快速上手React的解决方案：Create React App 移动端框架：React Native 最著名的CSS工具包：Bootstrap 基于函数式编程思想的状态管理库：Redux 强大灵活的图表库：D3 这彰显了2016年JavaScript应用的全面性以及多样性。 2016年的王者是······ Vue.JS在去年获得了超过25000个star，这意味着每天有72个star，超过了包含React以及Angular在内的其它任何框架。 Vue.JS于10月发布了2.0版本，这一版本为了更好的表现加入了Virtual DOM渲染方式。 Vue.JS已经在很多大公司的生产环境投入使用（包括阿里巴巴，中国最大的电子商务公司），所以，你可以放心地使用它。 现在Vue.JS已经有一个相对成熟的生态体系，包括路由（vue-router）以及状态管理库（Vuex）。 看起来Vue.JS结合了React（组件化思路）以及Angular（html模板增强语法）的精华。 2. 前端框架 这个前端框架清单可能是2016年JavaScript疲劳的元凶之一。似乎每个月都有一个新的竞争者流行起来，推动着JavaScript的创新。 准确地说，这里涉及两种不同类型的框架： 全能型框架，创建一个现代web应用所需的特性全部有，包括路由、数据获取、状态管理。例如AngularJS，Angular 2，Ember或者Aurelia。 专注于UI层的轻量级解决方案，例如React，Vue.JS，以及Inferno等等。 我们已经提到了Vue.JS(排名第1的那个)，让我们来看看其它的竞争者。 React以及它的竞争者 React排名第2，没有一个前端会忽视React以及它那丰富的生态圈。 React如此流行以至于其它的库总想取其精华，去其糟粕，在构建以及浏览器渲染方面提高效率。 Inferno是这类类库里最流行的项目了，它声称自己是最快的React替代品。 Preact在排行榜中紧邻Inferno，同样是React一个很好的替代品。它的生态系统相当成熟，举个例子，拥有离线缓存、路由以及兼容模板功能的样板，你可以利用这个样板使用你Preact项目里面的已存在的React库。 Angular 1 和 2 Angular如今已经分成2个仓库了，因为Angular2是对Angular1的全部重写，尽管有一些概念仍然相同。 Angular 2 基于 TypeScript 以及 ES6 编写，使其更加“现代”、“缜密”。 AngularJS这个项目指代的是其分支 1.x ，它仍然在许多项目中使用，并且仍会流行一段时间。 。Ember也值得一提，虽然它排不到前十，它的生态圈依然庞大。 因此，看起来，相比于封装好的包含所有特性的全能型框架，2016年开发者们更青睐轻量型框架，更愿意自定义解决方案。 3. Node.js 框架 在2016，从未如此简单去创建以及部署一个node.js应用，可利用： Now Webtask.io Stdlib 类似于 Gomix 的工程项目更是降低了进入 node.js 世界的门槛，它使任何人只需要通过一些点击操作就能够直接在浏览器编写以及分享 node.js 代码。 那么，如果你不得不写一个web应用，你会选择哪一个框架？ Express 当你想用 node.js 写一个web应用的时候，Express 经常会被认为web服务器的选择之一。大多数 node.js 开发者对于它的设计哲学（核心很小，但可以通过各种中间件进行拓展）非常熟悉。 Koa Koa的设计哲学与 Express 类似，只不过它使用了 ES6 中的 generators 来避免回调地狱问题。 Feathers 对于以“服务端导向”架构设计，Feathers是一个非常灵活的解决方案，很适合用来构建node.js 微服务。 Nodal Nodal框架立志于解决连接到PostgreSQL数据库的无状态分布式服务问题。 Keystone Keystone是最好的MongoDB数据管理以及运行终端解决方案之一，它主要是用来处理从MongoDB数据库传来的内容。管理界面是直接从模型里面生成的，拥有所有的CRUD操作以及很好的过滤功能。 Sails Sails是一个完全的MVC框架，灵感来源于Ruby on Rails（所以把它命名为Sails！）。它已经发布了挺长一段时间了，兼容各种类型的数据库，SQL或者no-SQL。 Loopback Loopback是另一个拥有很多特性的成熟框架，其中包括需要token验证的权限以及兼容任何数据库。 最牛逼的特性是其API探测功能。这个特性让开发者以直观的方式检测所有的API端点，在此过程中，开发者还可以去检测所有用户的token。如果你想要去开发一个新的API，它会是很好的选择。 4. React模板生成器 React是一个非常棒的UI库，但是利用React配合现代web开发工作流工具需要很多配置。那么，怎么才能开始构建一个真实存在的应用呢？ React模板生成器以及其它的starter开发工具包给了我们这个答案。 创建React应用 Facebook为了满足这个需求，提供了一种更轻便的路线，被称为 Create React App，利用它可以很方便地开始一个新的React项目。 Dan Abramov（Redux的创建者，目前在Facebook工作）为寻找构建简单性和自主配置性之间的平衡做了很大的贡献。例如，不需要繁杂的样式解决方案（仅仅只是单纯的CSS），不需要服务端渲染，依旧可以将应用很好地打包，同时，开发体验也非常棒。 与其竞争者最主要的区别在于，如果你使用了 Create React App，它就会成为你项目中的一个依赖，你只会看到你的应用的代码，其它的黑魔法都被隐藏起来了。当然，你可以自由选择何时升级依赖包，这并不仅仅是开始。 React模板生成器 被称为 React boilerplate 的生成器拥有你所需要的一切，包括 Redux 以及一些比较好的本地特性，很好地利用了 web worker的技术优势。 它允许开发者创建一个被称为渐进式web应用（或者PWA）：web应用本地运行，使用了一种被称为Service Worker的技术，你可以阅读Nicolás Bevacqua所写的这篇文章。 Next.js Next.js，由来自Zeit忙碌的开发者所创建，拥有服务端渲染特性，可以通过此特性创建“万能应用”（或者我们在2015年所说的同构应用），这代表应用不管是在客户端还是服务端都基本上可以运行同一套代码。 5. Mobile JavaScript无处不在，现在你都可以使用web开发者的技术（HTML，JavaScript，CSS）来创建移动端应用。 React Native 利用React Native，基于相同的代码以及React开发者熟悉的理念方法，你可以构建iOS和Android不同平台的移动端应用。想要了解更多关于构建iOS以及Andriod平台应用的知识，请移步官方教程。 其它的解决方案，基于Cordova，常常依赖于Webview去渲染页面，但并没有原生流畅。“Write Once Run Everywhere···”开发者们的梦想终于成真啦！ Ionic Ionic是“hybrid”应用概念的先锋。本质上，它是基于Cordova来获取移动设备的各种特性。它非常成熟，拥有一个庞大的生态系统。 NativeScript NativeScript与React Native目的（利用web技术开发真正的移动端应用）相同。它有两种形式，NativeScript Core以及NativeScript + Angular 2 以及······ 2017年有一项快完成的项目：Weex，一个基于Vue.JS的跨平台移动端UI框架。 6. 编译器 我们现在这里讨论的编译器（或者“转换器”）是指其将其他语言（或者JavaScript的超集）转换JavaScript。它们将代码转换成“标准JavaScript”代码，即浏览器（或者node.js）可以执行的代码。 举个例子，编译器使开发者可以使用最新版本的JavaScript（ES6）而不需要担心浏览器兼容问题。 TypeScript 引领潮流的转换器是TypeScript，它为web开发者带来了Java以及C#开发者所使用的静态类型。Angular 2 正是基于TypeScript增加了许多的特性（traction）。这里也存在在JavaScript中使用类型的优势与劣势，你可以读下面的两篇文章来思考自己的观点。 You Might Not Need TypeScript TypeScript:the missing introduction Babel ，同Webpack，Babel基本上已经成为一个标准工具，用来编译ES6代码以及使用类似React（JSX）类库的模板。最初，它只是用来编译ES6，现在借助那些插件，已经成为一个用来做代码转换的更加通用的工具。 Flow Flow并不是一个编译器，它只是一个静态类型检测工具，用来“标注”JavaScript代码。基本上，在代码中使用Flow只是增加对于已知类型的注释（这里阅读更多关于使用Flow去写模块） 它用在Faceboook项目的代码中。自从Facebook成为开源世界（开源项目例如React，React Native，Flux， Immutable，Jest···）的主角之一，这里面有太多的意义了。 CoffeeScript 在过去几年中，基于Python以及Ruby语法的CoffeeScript以及它精妙的语法成为最流行的编译器，但在2016，它不再那么流行，很多开发者由CoffeeScript转向搭配Babel的ES6。 7. 构建工具 在2016，很难想象一个web应用没有经过任何构建过程。你经常需要通过构建来转换模板以及优化资源，保证你的web应用在生产环境正常运行。 Wepack Webpack是用来构建单页应用的主要工具，它与React生态良好兼容。最新发布的版本2增加一些前瞻性功能（可通过这篇介绍查看） Gulp Gulp是一个通用任务运行器，可以用来处理任何形式（包括文件系统）的自动化过程，，所以，它并不是Webpack或者Browserify的直接竞争对手。 类似于Grunt，Gulp通过整合任务的方式工作：你可以让它压缩合并一系列的资源。但它跟Webpack以及Browserify不同，并不处理模块化的JavaSript代码。 但它可以与Webpack很好地配合使用，即使开发更愿意使用npm scripts。 Browserify Browserify，由于其简便性，很多node.js开发者喜欢它。 大体上，它会利用几个node.js包来生成一个简单的构建后的文件作为输出。但看起来，一个类似Webpack这种自主配置更强的工具更适用于web应用开发工作。 以及······ 2017年一个模块化处理工具正在崛起，它更强调性能问题，那就是rollup。 它使用了具有被称作“Tree shaking”的特性ES6模块来创建bundle，里面只有在你代码中使用的函数，而不是一整个类库。 8. 测试框架 Jasmine以及 Mocha是最著名的两个测试框架，但AVA和Jest在2016年发展更加迅速。。 AVA AVA，由多产的Sindre Sorhus创建，主要关注于性能（平行测试）以及ES6。AVA的语法与标准测试框架（例如Tape和Node-tap）相似。 Jest Jest，又一个Facebook项目，在上个星期获得了很多的关注。在React社区，它很出名，越来越多的人开始向Jest迁移（看这个故事），在2017年，它有可能成为最流行的测试框架。 Jest拥有很好的内置Mock数据能力，而其它的测试框架需要依赖类似于Sinon.js这样的类库。 9. IDE 关于IDE，不得不提2个最受欢迎的开源IDE是利用web技术开发的。 Visual Studio Code 在我们的统计结果中，微软的Visual Studio Code独占鳌头。 它很好的整合了TypeScript以及node.js。一些开发者提到了开发速度的提升，这得感谢“IntelliSence”特性（整合了高亮以及自动补全）它提供了很好的TypeScript和node.js的集成环境。一些开发者觉得这个IDE的“IntelliSense”功能（即高亮和自动补全）加快了开发速度。提到“开源”和“微软”，再也不是矛盾的啦！ Atom Atom，由Github主推，利用Electron创建（类似于其它的桌面应用，包括桌面客户端），其并不输于Visual Studio Code太多。关于Atom，有一个有趣的事情：它主要用CoffeeScript编写的！ 10. 静态网页生成器 静态网页生成器（或者被称为“SSG”）用来生成一系列html，css以及JavaScript文件的工具。你可以将这些文件部署在任意一个简单的web服务器上面（Apache或者NGNX），不需要大动干戈或者设置一个数据库或者使用任何的web框架。正如Gatsby网站这么说： Build sites like it's 1995 像在1995年一样那么简单地开发网站。 静态网页很快，很强大并且很容易去维护。 SSG非常流行，因为有很多种好的方法能够免费去建立网站： Github pages Gitlab pages Netlify Surge Now static Hexo 在2016，利用node.js构建的最流行的SSG就是Hexo。它是一个一站式SSG，与Wordpress这样的CMS系统类似，例如可以用来创建博客。它有很多特性，包括国际化的插件。 Gatsby 新的入局者Gatsby是一个非常有趣的解决方案，与竞争者不同，它利用React生态系统来生成静态html文件。你可以选择与React组件、markdown文件以及服务端渲染整合，这使得它非常强大。 结论 尽管JavaScript疲劳以及各种戏剧性的事件（还记得“left-pad”门吧？），2016年社区发展良好，Vue.JS以及React Native爆发，Yarn以及 Create React App新军突起。 我们已经讨论了2016年Github上面引领风尚的项目，但真正重要的是开发者的满意程度。所以，如果你想要更多干货，去查一下Sacha Greif的JavaScript现状调查吧，收集了超过9000个回复！ 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 本文链接：前端回顾：2016年 JavaScript 之星 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-03-28
前端工程师和设计师必读文章推荐【系列三十五】
《Web 前端开发精华文章推荐》自2011年6月20号发布第一期以来，历经五年半，总共发布了30多期。今天这篇是2017年第1期（总第35期），希望你能在这里发现有用的资料。 梦想天空专注前端开发技术，分享提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。 HTML5 & CSS3 Swiper – 经典的移动触摸滑块插件【免费】 Kickoff - 创造可扩展的，响应式的网站 16种基于 CSS3 & SVG 的创意的弹窗效果 BookBlock - 效果非常真实的书本翻页预览 很赞的效果！互动的页面元素拖放着色实验 SVG Drawing Animation - SVG 绘制动画 Filter Effects - 使用 CSS3 滤镜处理图片 Space.js – HTML 驱动的页面 3D 滚动效果 Primer – 支撑 GitHub 的 CSS 工具包和准则 赞！15个来自 CodePen 的酷炫 CSS 动画效果 JS 框架和工具 Electron - 创建跨平台的桌面客户的应用程序 Lazyr.js – 延迟加载图片（Lazy Loading） Rainyday.js – 使用 JavaScript 实现雨滴效果 6to5 – 让你即刻体验 ECMAScript 6 编程 Dom Animator – 提供 Dom 注释动画的 JS 库 Awesomplete - 零依赖的简单自动完成插件 T3 - 构建大型 Web 应用的 JavaScript 框架 Restive.js – 轻松让网站变成响应式和自适应 BasicModal - 简单易用的现代 Web App 弹窗 Mega Dropdown - 带子分类的响应式下拉菜单 网站素材 EventRay UI Kit – Web & Mobile 的素材 基于 Bootstrap 的响应式后台管理面板 1001Freedownloads – 免费下载海量素材 免费的 Photoshop Apple Watch 原型设计素材 错误的艺术！20个创意的404错误页面设计 20个最新的照片 PS 技巧，提升摄影水平 实用工具 Pexels Videos – 可以免费商业使用的短视频 Dropplets – 极简的 Markdown 博客平台 Click Magick – 下一代点击跟踪和链接管理 Ratatype - 在线打字教程，提高打字速度 Slides - 在线制作效果精美的幻灯片（PPT） 同系列文章 Web 前端开发人员和设计师必读文章推荐【系列一】 Web 前端开发人员和设计师必读文章推荐【系列二】 Web 前端开发人员和设计师必读文章推荐【系列三】 Web 前端开发人员和设计师必读文章推荐【系列四】 Web 前端开发人员和设计师必读文章推荐【系列五】 Web 前端开发人员和设计师必读文章推荐【系列六】 Web 前端开发人员和设计师必读文章推荐【系列七】 Web 前端开发人员和设计师必读文章推荐【系列八】 Web 前端开发人员和设计师必读文章推荐【系列九】 Web 前端开发人员和设计师必读文章推荐【系列十】 Web 前端开发人员和设计师必读文章推荐【系列十一】 Web 前端开发人员和设计师必读文章推荐【系列十二】 Web 前端开发人员和设计师必读文章推荐【系列十三】 Web 前端开发人员和设计师必读文章推荐【系列十四】 Web 前端开发人员和设计师必读文章推荐【系列十五】 Web 前端开发人员和设计师必读文章推荐【系列十六】 Web 前端开发人员和设计师必读文章推荐【系列十七】 Web 前端开发人员和设计师必读文章推荐【系列十八】 Web 前端开发人员和设计师必读文章推荐【系列十九】 Web 前端开发人员和设计师必读文章推荐【系列二十】 Web 前端开发人员和设计师必读文章推荐【系列二十一】 Web 前端开发人员和设计师必读文章推荐【系列二十二】 Web 前端开发人员和设计师必读文章推荐【系列二十三】 Web 前端开发人员和设计师必读文章推荐【系列二十四】 Web 前端开发人员和设计师必读文章推荐【系列二十五】 Web 前端开发人员和设计师必读文章推荐【系列二十六】 Web 前端开发人员和设计师必读文章推荐【系列二十七】 Web 前端开发人员和设计师必读文章推荐【系列二十八】 Web 前端开发人员和设计师必读文章推荐【系列二十九】 Web 前端开发人员和设计师必读文章推荐【系列三十】 Web 前端开发人员和设计师必读文章推荐【系列三十一】 Web 前端开发人员和设计师必读文章推荐【系列三十二】 Web 前端开发人员和设计师必读文章推荐【系列三十三】 Web 前端开发人员和设计师必读文章推荐【系列三十四】 本文链接：前端工程师和设计师必读文章推荐【系列三十四】 文章来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
-
发表了文章 2017-03-21
AsciiMorph - 新奇的 ASCII 字符画生成工具&插件
AsciiMorph 是一个新奇的 ASCII 字符画生成工具和开源插件。字符画(ASCII Art)的历史可以追溯到几十年前，起初是用在图形显示功能受限的设备上，用ASCII字符集里的可打印字符来拼成图片。如今，精细的显示设备早已能显示丰富多彩的图片，字符画更多的是被当做一门艺术来欣赏了。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：AsciiMorph - 新奇的 ASCII 字符画生成工具&插件 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-03-18
Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一，可以用来显示消息、通告、提示等等。Notyf 是一款超级简单、响应式的 JS 通知插件，不依赖 jQuery 库，可以独立使用。赶紧试用一下吧！ 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Notyf - 超级简单、响应式的 JavaScript 通知插件 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-03-11
推荐15个很优秀的跨平台的移动开发工具
跨平台的移动开发指的是通过特定方式开发出来的移动应用可以用在多种移动平台，iOS、Android 以及 WindowsPhone。利用现有的高质量移动框架来构建移动 Web 应用程序已成为非常容易，本文包含15个最佳的跨平台移动开发工具。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 1. Pusher Pusher is a mobile push notifications API. It lets you build cross platform apps and send programmable push notifications to iOS and Android devices. Send push notifications to iOS and Android devices through one unified Push Notifications API for Google Cloud Messaging (GCM), Firebase Cloud Messaging (FCM), and Apple Push Notification Service (APNs). It’s free, and you can sign up with your GitHub or Google account. 2. RhoMobile RhoMobile suite is based on Rhodes which is an open-source cross-platform development framework for rapidly building native apps. RhoStudio allows for development, debugging and testing of cross-platform enterprise apps with single tool simplicity. For access to built-in APIs for bar code scanning and RFID, support for the widest range of operating systems and more, developers can count on the value-added functionality of RhoElements. 3. Weex Weex is a mobile cross-platform UI framework. It’s lightweight, high-performance, and extendable. Weex is from Alibaba to build mobile apps with just HTML, CSS and JavaScript. It comes with Modules, UI components, its own DevTools and CLI that is designed towards mobile environment and to speed up development. 4. NativeScript Nativescript is an open-source platform for building native cross-platform mobile applications. You can Write and deploy native mobile apps for iOS, Android and (soon) Windows from a single code base. You can Easily reuse existing plugins from npm, CocoaPods (iOS) and Gradle (Android) directly in NativeScript projects, plus hundreds of NativeScript specific plugins on npm. 5. CloudRail CloudRail is an API library for Android, Java, and iOS that lets you integrate multiple services with just one API. It’s completely free for both personal and commercial projects. CloudRail is behind integrations in apps used by millions of people every day. Join CloudRail and take your API integrations to the next level. 6. Kony The Kony Mobility Platform is an open and standards-based, integrated platform for mobile app development and beyond. It supports the entire application software development lifecycle (SDLC) and empowers enterprises to quickly design, build, deploy, and manage multi-edge app experiences. Kony Mobility Platform provides automatic coding features, app preview facility, API connections and many more features. 7. Rikulo Rikulo UI is a Dart framework for creating cross-platform web and native mobile applications with HTML5. It uses a structured UI model and offers a responsive UX across desktop & touch devices. 8. Phonegap Phonegap allows you to create hybrid apps using popular web technologies (HTML5, CSS3 and JavaScript), it allows you using in-app, integrated payments via the App Store for iOS, the Google Play Store for Android and more. 9. Truck TruckJS is an open-source mobile app framework. It provides layouts, widgets, touch gestures, data filtering, data binding, and more, all with clean code. Truck has two kinds of templates, markup in the DOM, or markup in a script tag. You can use custom variables that make sense for the data you’re using. You can define helpers and templates can include JavaScript. Truck supports ES6 Promises. If the browser supports these, no problem. Otherwise Truck uses a polyfill. Promises provide an elegant way to avoid nested tower of doom callback structures. Truck’s Fetch API uses promises by default. Truck uses themes to create the look and feel of Android, iOS and Windows Phone. You create your app with one markup and one JavaScript. To support a platform is just a matter of providing the appropriate theme. Themes make your apps look great with little effort. 10. Xamarin Xamarin apps leverage platform-specific hardware acceleration, and are compiled for native performance. This can’t be achieved with solutions that interpret code at runtime. Xamarin apps have access to the full spectrum of functionality exposed by the underlying platform and device, including platform-specific capabilities like iBeacons and Android Fragments. 11. Tabris.js Tabris.js is a mobile framework that makes it simple to create native apps for iOS and Android in JavaScript. It doesn’t use WebViews for rendering UI, and instead creates native widgets on the mobile platform via a JavaScript-to-native bridge. This also enables the quick develop / deploy cycle that you know from web development. 12. Fabric Fabric, from Twitter, is an easy way to build mobile apps. It’s cross-platform compatible and modular, with SDKs organized into “kits” to make dev easier. With Fabric, you’ll have a single, dedicated developer account with complete access to best-in-class mobile SDKs. Simply add a few lines of code and start coding your app right away. 13. MonoCross Monocross is an open source cross-platform mobile framework using C# .NET and the Mono framework. Monocross lets you create beautiful applications on iPads, iPhones, Android devices, Windows Phone 7, and Webkit enabled phones. MonoCross currently supports native output for iPhone/iPad/iPod touch, Android, Windows Mobile, Windows Phone 7, and Windows XP/Vista/7. MonoCross also offers web/hybrid app support for Android, BlackBerry, iPhone/iPad/iPod touch, Symbian, and Web OS via HTML 5.0, CSS, and JavaScript. The Windows desktop-optimized browser uses Web based support and basic HTML/WAP for feature phone support. 14. SenchaTouch Sencha Touch is the leading MVC-based JavaScript framework for building cross-platform mobile web applications. Sencha Touch leverages hardware acceleration techniques to provide high-performance UI components for mobile devices. With over 50 built-in UI components and native looking themes for all major mobile platforms, Sencha Touch provides everything you need to create impressive apps that work on iOS, Android, BlackBerry, Windows Phone, and more The framework includes a robust data package that can consume data from any backend data source. An advanced charting package allows you to visualize data on mobile devices. Out-of-the-box, native-looking themes for every major platform enable you to make web and hybrid applications match the look and feel of your target platforms. 15. Apache Cordova Apache Cordova is a set of device APIs that let you build native mobile apps using HTML, CSS, and JavaScript. Just combine it with a UI framework to create your apps. Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 本文链接：推荐15个很优秀的跨平台的移动开发工具 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-02-28
WebSlides - 轻松制作漂亮的 HTML 幻灯片（演讲稿）
WebSlides 是一个开源的 HTML 幻灯片项目，能够帮助熟悉前端语言的开发者快速制作出效果精美的幻灯片。页面中的每个 <section> 都是一个独立的幻灯片，只需要很少的 CSS 代码装饰即可。赶紧来体验一下吧。 在线演示 免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：WebSlides - 轻松制作漂亮的 HTML 幻灯片 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-02-10
十大经典排序算法的 JavaScript 实现
计算机领域的都多少掌握一点算法知识，其中排序算法是《数据结构与算法》中最基本的算法之一。排序算法可以分为内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。常见的内部排序算法有：插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。用一张图概括： 立即看看 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：十大经典排序算法的 JavaScript 实现 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-02-02
2017年最新15个漂亮的 HTML 摄影网站模板
摄影是一门艺术，它需要大量的耐心和努力工作来捕捉那些精彩的瞬间。如果你是一位热情的摄影师，想要建立一个网站来展示那些高质量的摄影作品，那么你找对地方了。本文包含15个最佳的摄影网站模板，你可以使用这些 HTML 模板创建自己的摄影网站。这些HTML摄影网站模板让你可以以一个高雅的风格展示你的照片。这些模板包括一些有效的响应式设计、图像幻灯片、版式和大量的定制选项。 您可能感兴趣的相关文章 经典网页设计：超炫动画效果单页网站 30个独具匠心的精美单页网站设计案例 25个以全屏照片为背景的精美网页作品 20个与众不同的网页联系表单设计案例 你应该知道的奇特的 HTML5 单页网站 1. Kingsize KingSize (HTML) is a great portfolio / photography template that offers full screen background images (slider) and videos. As well as 5 unique gallery styles to impress your visitors. 2. Storm Storm is a stunning full screen background template with a custom full screen gallery, perfect for showing off your visual work or perhaps you would just like to use images to sell yourself, whatever you do! Background switcher controls allow you to cycle through background images, which are preloaded to cut loading time. 25 gallery/portfolio layouts are included so you can pick the one that best suits your work. 3. Toranj Toranj is trying to bring the combination of beauty and power to the table and it’s suitable for a wide range of applications. For creative portfolio, photography, videography, digital agency, interior design to personal blogging and magazine and even creative corporate websites, Toranj has the features alongside a modern design. Toranj is responsive and also has true RTL support, means you will get an exact RTL version of the template with all dummy Persian contents. 4. Lenze Lenze is a portfolio photography HTML template, using most popular design trends as HTML5, CSS3 and jQuery. The template has three styles of homepage layout (fullscreen, fullwidth and box style), also included fully responsive media grid plugin that allows you to control the layout of your item grid in the way that pleases you most. Lenze is great for photography and creative portfolio website or any creative business and agency, also has commented HTML code for each panel included in the theme so you can easily adapt your templates to suit your needs. 6. Outdoor This template is perfect if you like a clean and modern design. This template is ideal for designers, photographers, and those who need an easy, attractive and effective way to share their work with clients. This template include 4 different style portfolio page, full screen backgrounds, 6 different style home page, retina ready, full responsive, bootstrap 3, touch and swipe and much more. 7. Raw Raw HTML template is a fully responsive HTML5 template that is ideal for photographers, agencies and creative freelancers. It offers several homepage layout options, full and fixed width portfolio grids, awesome hover effects, full width sliders with HTML5 background video & touch support, fashionable captions, contact form with honey pot spam prevention and tons of professional styling options. 8. Uno Uno is clean, modern html photography website template which is best fit for creating photography portfolio websites. This template includes 6 blog layouts, 14 gallery layouts, 3 landing pages, shortcodes included, 2 contact us layouts, and many other useful features. 9. Other Other is perfect for the creatives out there, the forward thinkers and those who just want a kick-ass site for their business or service. Other comes with loads of unique layouts, including our draggable vertical galleries, and homepage portfolio with great animations and category filters. Other uses AJAX to load in and switch between your posts and portfolio details, reducing initial page load times. Fully responsive, retina ready and with a great mobile menu, Other is exactly what any freelancer, agency or business needs. 10. Cordoba Córdoba is a clean and modern clean photography template that is perfect to promote your photo gallery in a very professional and pleasant way. Córdoba is made of HTML5 and CSS3. It is fully responsive; it looks stunning on all types of screens and devices (desktop, notebook, tablet and mobile). 11. Photographer Photographer is a responsive html template created for creative Photographers with a minimalist design and optimized for mobile.It has 2 blog layouts, responsive and retina ready design, flexible images and videos, live photowall homepage, and above all optimal image viewing experience on any device with zoomable images. 12. Sniper Sniper is a responsive + liquid HTML/CSS template built for photographers, creative agencies or portfolio website. Main idea was to create a symbiosis of two types of templates: one page website + fullscreen gallery. All elements of the template are liquid and thereby it successfully adapts to any device. Special attention was paid to optimize template for Tablet PC’s and smartphones. It comes with many cool features ex. 10 Skins (5 colors x light and dark themes), fullscreen Slider, 2 Post sliders, a lot of prebuilt shortcodes. 13. Kubb Kubb is most completed responsive photography and magazine HTML5 Template with various portfolio options which is suitable for artists, photographers, creative agencies, digital studios, personal freelancers, and any kind of business owners that would like to showcase their portfolio beautifully. Kubb was built with awesome Twitter Bootstrap v3 and it features 34 cool HTML5 pages with 9 color options. Since it is responsive, the layout will adapt to different screen sizes which will make your website be compatible with any device such as smart phones, tablets or desktop computers. 14. Joker Joker is a professionally made photo and video HTML template. Using a variety of layouts you will easily present your work for your visitors and potential clients! The template includes all needed design elements and attractive animation for building of a topnotch personal or corporate portfolio website 15. Fidelity Fidelity is the most fastest and future-oriented HTML5 and CSS3 template. It uses a full power of hardware-accelerated CSS3 transitions and transforms (of course with fallback to jQuery animations) and provides great performance on desktops, tablet PCs and smart phones. It’s primarily for photographers, but it can be used by design agencies, architecture bureaus, etc. Template was successfully tested in all modern browsers. 您可能感兴趣的相关文章 太赞了！超炫的页面切换动画效果【附源码下载】 创意无限！一组网页边栏过渡动画【附源码下载】 好东西！动感的页面加载动画效果【附源码下载】 使用 CSS3 实现3D图片滑块效果【附源码下载】 时尚设计！三种奇特网格加载效果【附源码下载】 本文链接：2017年最新15个漂亮的 HTML 摄影网站模板 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-01-15
前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的，因为 JavaScript 可以直接忽略，人们可以提交请求到服务器。 然而这并不意味着客户端验证都没必要了，很多时候我们需要在用户提交到服务器之前给予提示。JavaScript 表单验证库允许开发人员自定义样式、错误消息和样式以及简化验证规则的创建。 在本文中，您将找到最好的15个 JavaScript 表单验证库，可以帮助你让表单验证对用户更友好的和美观。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 1. ApproveJS ApproveJs doesn’t automatically attach itself to input change events or form submit events. It also doesn’t manipulate the DOM for you by automatically displaying errors. This allows you to handle validation how you want. ApproveJs exposes a single method, value() and leaves you to decide when a value is validated and how errors are displayed. If you like to be in control or have a little OCD like me, ApproveJs is for you. 2. Validator.js validator.js is a library of string validators and sanitizers. It can be used both on client side and server side. 3. Valid.js Valid.js is a simple JavaScript library for data validation. Here are validation functions. • String : isString, minLength(min), maxLength(max), length(min, max), regex(reg)• Number: isNumber, minNumber, maxNumber, between• Date: isDate, minDate(min), maxDate(max), between(min, max)• Bool: isTrue, isFalse• Util: isRequired, isEmail, isCep 4. Validate.js Validate.js provides a declarative way of validating JavaScript objects. It is unit tested with 100% code coverage and can be considered fit for production. The goal of validate.js is to provide a cross framework and cross language way of validating data. The validation constraints can be declared in JSON and shared between clients and the server. 5. jQuery.mobilePhoneNumber jQuery.mobilePhoneNumber is a general purpose library for validating and formatting mobile phone numbers. 6. xTypejs xtype.js is an elegant, highly efficient data validation for JavaScript. it provides concise, performant, readable, data and type validation for JavaScript, using close to 40 highly efficient, data-validating pseudo types. It Improves application efficiency and readability by unifying the most basic but common data and type validations in JavaScript apps, into single, concise, highly optimized operations. And employs bitwise operations, data pre-processing, and memory-efficient memoization for fast, robust performance in small and large apps and libraries. 7. Payform Payform is a JavaScript library for building credit card forms, validating inputs, and formatting numbers. This library also includes a jQuery plugin. 8. Mailcheck mailcheck is a JavaScript library and jQuery plugin that suggests a right domain when your users misspell it in an email address. When your user types in “user@hotnail.con”, Mailcheck will suggest “user@hotmail.com”. 9. Formance.js A jQuery library for formatting and validating form fields, based on Stripe’s jQuery.payment library. It supports various fields like credit card cvc, credit card expiry, credit card number, email address, date, number, Ontario driver’s license number and much more. 10. Verify.js Verify.js is a powerful, customizable asynchronous form validation library. It is fully customizable, easily extendable, unobtrusive, and includes grouped validations as well as asynchronous validations. 11. Seahorse Seahorse is a JavaScript library, licensed as free software, created to simplify the use of forms, particularly to simplify the form validation. It provides functions to validate convert and serialize information and functions to assign real-time validation behaviors to form fields. It can be used with any JavaScript framework, however, has a plugin to be used along with jQuery. 12. Parsleyjs Parsley is a JavaScript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users.JavaScript form validation is not necessary, and if used, it does not replace strong backend server validation. That’s why Parsley is here: to let you define your general form validation, implement it on the backend side, and simply port it frontend-side, with maximum respect to user experience best practices. 13. Form Validation Made Easy The Form Validation – made easy script allows you to very easily set up validation rules and validate these rules against any sort of input coming from any type of array data source such as $_POST, $_GET or a key/value filled array. The script can with ease be plugged in with existing HTML form code without drastically changing the HTML code. Or be implemented from scratch. The script also handles the population of input values for input fields, textareas, checkboxes, radio buttons and select lists if a default value has been specified and when a form is posted and returned to the user. This means the user never has to type in the same information twice when a form is invalid! The script comes with a bunch of predefined rules but how you want to validate each and every input in your form is all up to you. With custom functions you are able to hook up with the script and supply your own validation rules and error messages. 14. JavaScript Form Validation Library This is a complete library to validate client-side input and provide feedback accordingly. The JavaScript library contains 12 base validation functions that can validate all types of form fields. This library includes simple integration, visual feedback, range check, textual feedback, check minimum length, value retrieval, check date format, validate email, validate URL and much more. 15. Easy to Setup Form Validator JavaScript The JS Auto Form Validator is an easy-to-setup form validation script which enables you to handle the whole form validation process using the ready-to-use JavaScript class. This script allows you to specify certain form elements as “required” or “non-required” and also a specific type they have: text, password, numeric, zip code etc. It works on the native JavaScript, meaning page will be loaded much faster – especially on mobile devices – as NO jQuery is needed! 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 本文链接：前端工具集 - 15个最佳的 JavaScript 表单验证库 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2017-01-04
Postman - 功能强大的 API 接口请求调试和管理工具
Postman 是一款功能强大的的 Chrome 应用，可以便捷的调试接口。前端开发人员在开发或者调试 Web 程序的时候是需要一些方法来跟踪网页请求的，用户可以使用一些网络的监视工具比如著名的 Fiddler 等抓包调试工具，今天介绍的这款工具在接口维护更加方便，支持定义和运行接口测试，可以说是 Chrome 应用最好用的接口调试工具之一。 立即去试试 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Postman - 功能强大的API接口请求调试和管理工具 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-12-24
Httpster –世界各地最潮的网页设计案例聚合网站
Httpster 这个网站聚合了世界各地最新最潮的网页设计案例，展示了创意的设计，精心的策划，优秀的排版。这些作品都按月份和类别进行了很好划分，你可以方便的找到自己感兴趣的网站案例。 立即去看看 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Httpster –世界各地最潮的网页设计案例聚合网站 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-12-07
LightGallery.js – 功能齐全的 Javascript Lightbox
Lightgallery是一个轻量级的模块化、响应式的灯箱画廊，它允许您创建美丽的图像和视频画廊。借助缩略图插件的帮助，Lightgallery 允许您创建缩略图画廊。它支持触摸屏设备上滑动导航以及桌面设备的鼠标拖动，还允许用户浏览缩略图和原图之间通过滑动手指或鼠标拖动。 马上去试试 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：LightGallery.js – 功能齐全的 Lightbox 画廊 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-11-27
使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR)，并且是流式的，可以做组件级的缓存，这使得极速渲染成为可能。同时， 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration。vue-hackernews-2.0 是 Vue 作者在GitHub上面放的 Vue 2.0 的一个示例项目，结合 Express、vue-router & vuex 来构建，是很好的学习案例。 Features Server Side Rendering Vue + vue-router + vuex working together Server-side data pre-fetching Client-side state & DOM hydration Single-file Vue Components Hot-reload in development CSS extraction for production Real-time List Updates with FLIP Animation Architecture Overview Build Setup Requires Node.js 6+ # install dependencies npm install # serve in dev mode, with hot reload at localhost:8080 npm run dev # build for production npm run build # serve in production mode npm start 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 原文链接：新手入门指导：Vue 2.0 的建议学习顺序 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-11-20
字体下载大宝库：12款好看的免费英文字体
互联网上90%的信息是文本形式的，这就是设计师为什么不断的创造漂亮的字体，让网站中的的内容更加美观。此外，还有大量的印刷为基础的项目，其中的字体都是关键因素。今天这个列表中，我们选择了21款免费的英文字体分享给设计师们。 您可能感兴趣的相关文章 字体大宝库：10款有趣的精美节日字体 分享20款很漂亮的免费英文LOGO字体 字体大宝库：20款充满艺术感英文字体 推荐20款免费的又好看的英文手写字体 向设计师推荐20款好看的英文装饰字体 Gilroy Typefamily Fredoka Free Rounded Bold Font Apple Sans Adjectives Paul Grotesk Modernist Type Family Magnolia Script Free Font Nomura Grunge Free Font I N K F E R N O Free Typeface Fibre Free Vintage Font Hensa Free Brush Script Font Kano Free Typeface Affogato Friendly Sans-Serif Typeface Akrobat Modern Sans Serif Font 您可能感兴趣的相关文章 Web 前端开发和设计精华文章集锦 20款非常漂亮的免费英文手写字体 专业设计师常用的22款免费英文字体 分享20款漂亮的免费英文LOGO字体 分享最新36款高质量的免费英文字体 本文链接：字体下载大宝库：12款好看的免费英文字体 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-11-13
20个不可思议的 WebGL 示例和演示
WebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解。 1. Aquarium Image Source:www.webglsamples.org Created by Greggman and Human Engines. The aquarium runs almost entirely based on a clock.That means the position of the camera and every fish will be the same across machines if their clocks are in sync. When in networked mode each machine keeps its clock in sync by periodically asking the server for the current time. 2. 3 Dreams of Black Image Source:www.ro.me A Semi-Intereactive film authored by Chris Milk. It was developed using technology developed by Google and other sources. It works with chrome mixing 2D and 3D computer graphics, showcasing the song “Black” by Danger Mouse and Daniel Luppi ,with Norah Jones and Jack White. 3. Cube Image Source:www.playmapscube.com A WebGL innovative game inspired with Google maps technology. It consists of elements you see in Google Maps and analog labyrinth games combined with amazing controls that can break an experience. 4. Chemdoodle Image Source:www.web.chemdoodle.com Chemdoodle is a scientific visualization which lets you pick one of a number of medicines and see a 3D display of its chemical structure on compatible browsers, developed by iChemLabs. 5. Chrysaora Image Source:www.aleksandarrodic.com A dynamic Jellyfish WebGL demo built with Vladimir Vuki?evi?’s mjs matrix library. It showcases simulated skeletons, partial server-side simulation and synchronization with WebSocket, and camera facing a particle system and volumetric light effect. 6. WebGL Bookcase Image Source:www.workshop.chromeexperiments.com Google Books’ new flashy interface styled after a helix. Within the spiral books are sorted by subject and clicking on any book takes you to the entry in Google Books. 7. Just a Reflektor Image Source:www.justareflektor.com Just a Reflektor is a band Arcade Fire music video which was collaborated by Google. Using your mouse you can adjust various real-time filters and effects. This WebGL will require a webcam or simply your mouse. 8. WebGL Earth Image Source:www.webglearth.com An open source software enabling exploration, zooming and “playing” with the 3D globe in a web browser. The project is sustained through the support and cooperation of the developer community. 9. 3Dtin Image Source:www.3dtin.com 3Dtin is an easy to use tool for creating shapes with a natural voxel-oriented 3D pixel approach, with the feature to export your project in 3D printing services. 10. The Biodigital Human Image Source:www.biodigitalhuman.com The BioDigital Human is a virtual 3D body that brings to life thousands of medically accurate anatomy objects and health conditions, in an interactive Web-based platform. 11. WebGL Rubik’s Cube Image Source:www.randelshofer.ch A Rubik’s Cube applets from Java to WebGL developed by Werner Randelshofer. Parts of the code are from the WebGL demo repository. Codes use in this WebGL are copyrighted by Apple Inc. and by Google Inc. and is used under permission. 12. GLGE Image Source:www.glge.org A framework for making WebGL developed by by Paul Brunt. It is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins. 13. Ctrl+[P]aper Image Source:www.grouek.com Digital studio Grouek designed this Web GL website, that allows anyone to create its paper toy in 3 easy steps. Once you’re done, print the PDF, cut, fold and glue following instructions. In less time than you think, a beautiful, unique, self-created paper toy will proudly stand on your desktop. 14. A holiday message Image Source:www.itsamessage.com Developed by @thespite and @mrdoob. It will first require you to put on your address before proceeding. Once entered you’ll see a beautiful 3D scene that has a holiday greetings on it, where as you can move along using your mouse to view the whole 3D models. 15. Materials: Cars Image Source:www.alteredqualia.com With this WebGL you can choose to view 3D looks of Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 and Chevrolet Camaro in your browser. Pick your ride and enjoy the view. Guest what, you can even choose their colors. 16. Quake 3 Image Source:www.media.tojicode.com Developed by Brandon Jones, it is an impressive WebGL game demo complete with music. You can play it by just using your keyboard and mouse. 17. WebGL Image Filter Image Source:www.evanw.github.io A WebGL graphic editor application by Evan Wondrasek ,with a smooth and fast interface. You can play around with filter effects like the brightness and contrast, similar to the features you see in Photoshop. 18. From Dust Image Source:www.bing.com A WebGL game originally released a couple years ago on some traditional gaming platforms. Ubisoft has ported this game to WebGL and contains amusing and amazing effects and controls on it. 19. Acko.net Image Source:www.acko.net A WebGL that offers 3D logo on the header with a basic setting of a site when scrolled down. It offers a possibility that WebGL can be used as a practical setting to a website or software application. 20. WebGL Terrain Image Source:www.alteredqualia.com A WebGL demo with dynamic procedural terrain using 3d simplex nois. It features birds from ro.me and the background sound by Kevin Maclead. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 本文链接：20个不可思议的 WebGL 示例和演示 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-10-26
新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。 2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的 <script>，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。 3. 照着官网上的示例，自己想一些类似的例子，模仿着实现来练手，加深理解。 4. 阅读官方教程进阶篇的前半部分，到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数（Render Function)』如果理解吃力可以先跳过。 5. 阅读教程里关于路由和状态管理的章节，然后根据需要学习 vue-router 和 vuex。同样的，先不要管构建工具，以跟着文档里的例子理解用法为主。6. 走完基础文档后，如果你对于基于 Node 的前端工程化不熟悉，就需要补课了。下面这些严格来说并不是 Vue 本身的内容，也不涵盖所有的前端工程化知识，但对于大型的 Vue 工程是前置条件，也是合格的『前端工程师』应当具备的知识。 前端生态/工程化 1. 了解 JavaScript 背后的规范，ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性，理解 ES2015 modules，适当关注还未成为标准的提案。 2. 学习命令行的使用。建议用 Mac。 3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本，并且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的常用命令，npm scripts 如何使用，语义化版本号规则，CommonJS 模块规范（了解它和 ES2015 Modules 的异同），Node 包的解析规则，以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性，可以借此巩固 ES2015。 4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。 5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具，作为起步，理解它的『一切皆模块』的思想，并基本了解其常用配置选项和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱，建议多搜索搜索，应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档，比起 1.0 有极大的改善，但需要注意和 1.0 的不兼容之处。 Vue 进阶 1. 有了 Node 和 Webpack 的基础，可以通过 vue-cli 来搭建基于 Webpack ，并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始，并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档，了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。 2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节（可选择性使用 JSX)，理解模板和渲染函数之间的对应关系，了解其使用方法和适用场景。 4. （可选）根据需求，了解服务端渲染的使用（需要配合 Node 服务器开发的知识）。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。5. 阅读开源的 Vue 应用、组件、插件源码，自己尝试编写开源的 Vue 组件、插件。 6. 参考 贡献指南 阅读 Vue 的源码，理解内部实现细节。（需要了解 Flow） 7. 参与 Vue GitHub issue 的定位 -> 贡献 PR -> 加入核心团队 -> 升任 CTO -> 迎娶白富美...（误 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 原文链接：新手入门指导：Vue 2.0 的建议学习顺序 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-10-22
12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中，像 Bootstrap 和 Foundation 就是前端框架的佼佼者。在这篇文章了，我们编制了一组新鲜的，实用的，可以帮助您建立高质量的 Web 应用程序的 JavaScript 框架清单。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 1. Aurelia Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity. With its strong focus on developer experience, Aurelia can enable you to not only create amazing applications, but also enjoy the process. They’ve designed it with simple conventions in mind so you don’t need to waste time with tons of configuration or write boilerplate code just to satisfy a stubborn or restrictive framework. It’s been carefully designed to be pluggable and customizable. 2. Svidget Svidget.js is a JavaScript framework for creating immersive and fully interactive SVG widgets. By componentizing your data visualizations as widgets, you can quickly and easily embed them on any website while keeping a clean separation between SVG and HTML. 3. Soma.js Soma.js is a framework for building scalable and maintainable JavaScript apps. It offers tools for creating loosely-coupled architecture that can be made up of modules, models, views, plugins, or widgets. 4. Cyclon.js Cylon.js is a JavaScript framework for robotics and physical computing built on top of Node.js. It provides a simple, but powerful way to create solutions that incorporate multiple, different hardware devices concurrently. Cylon uses the Gort Command Line Interface (CLI) so you can access important features right from the command line. You can scan, connect, update device firmware, and more. Cylon also has its own CLI to generate new robots, adaptors, and drivers. 5. DeLoren DeLorean.js is an agnostic JavaScript framework that makes it easy to apply Flux concepts to your user interfaces. It supports unidirectional data flow, automatically listens to data changes and keeps your data updated, and more. 6. Play scalable web applications with Java and Scala. It’s built on Akka, Play provides predictable and minimal resource consumption (CPU, memory, threads) for highly-scalable applications. Play is developer friendly with a “just hit refresh” workflow and built-in testing support. With Play, applications scale predictably due to a stateless and non-blocking architecture. By being RESTful by default, including assets compilers, JSON & WebSocket support, Play is a perfect fit for modern web & mobile applications. 7. sMap sMap-responsive is a software framework for web maps built with Leaflet and Bootstrap. The purpose of the framework is to facilitate creation of maps which supports a range of different browsers and devices. 8. JigMagga JigMagga is a widget based configuration file driven isomorphic JavaScript MVC framework. JigMagga can be used to create a one page applications, but its main goal is – because of SEO – to generate thousands of pages in many domains. All with an optimized frontend application and shared widgets. Widgets in JigMagga are called jigs. They can be rendered in the frontend application or because of SEO requirements, get (additionally) prerendered on serverside. This can be decided in the configuration. 9. BladeRunner.js BladeRunnerJS (BRJS) is an open source development toolkit and framework for modular construction of large single-page HTML5 apps. It consists of a set of conventions, supporting tools and micro-libraries that make it easy to develop, test, deploy and maintain complex JavaScript apps 10. Meteor Meteor, an ultra-simple, database-everywhere, data-on-the-wire, pure-Javascript web framework. 11. Mocha.js Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. 12. One Banana OneBanana is a JavaScript testing framework built around the idea that testing JavaScript should be as straight-forward as possible. OneBanana is a JavaScript testing framework built around the idea that testing JavaScript should be as straight-forward as possible. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果【附源码下载】 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个非常惊艳的 HTML5 和 JavaScript 特效 英文链接：12 Fresh JavaScript Frameworks for 2015 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-10-19
Waud.js – 使用HTML5降级处理的Web音频库
Waud.js 是一个Web音频库，有一个HTML5音频降级处理方案。 它允许您利用Web音频API为你的Web应用程序控制音频功能。在不支持Web音频API的非现代浏览器使用HTML5音频降级方案。 立即去试试 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Waud.js – 使用HTML5降级处理的Web音频库 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-10-16
40款用于简洁网页设计的光滑英文字体【下】
字体绝对是每一个设计非常重要的部分，设计者总是希望有最好的免费字体，以保持他们字体库的更新。所以今天我要向设计师们分享一组用于简洁网页设计的光滑英文字体。这些免费的字体是适用于各种类型的设计，除了网页，还有海报、标志、印刷广告等。 您可能感兴趣的相关文章 免费字体集锦：25款英文艺术字体下载 字体大宝库：15款漂亮的艺术字体下载 推荐20款免费的又好看的英文手写字体 字体大宝库：10款有趣的精美节日字体 分享20款很漂亮的免费英文LOGO字体 Mank Sans Yorkville Redring 1969 Aldo Blue Highway Steelfish Opticon One Y2K Neophyte Jacks Font Swansea Vegur Albertino Print Clearly Liberation Yoxall Lois Ann SF Arborcrest Medium APHont Fertigo Pro 您可能感兴趣的相关文章 字体大宝库：20款充满艺术感英文字体 向设计师推荐20款好看的英文装饰字体 专业设计师常用的22款免费英文字体 字体大宝库：免费的英文3D字体下载 分享最新36款高质量的免费英文字体 本文链接：40款用于简洁网页设计的光滑英文字体 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 获得腾讯投资的移动医疗公司招聘前端开发工程师，工作地点杭州，简历发送至2673221870@qq.com内推！--> 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 出处：jizhula.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-10-12
40款用于简洁网页设计的光滑英文字体【上】
字体绝对是每一个设计非常重要的部分，设计者总是希望有最好的免费字体，以保持他们字体库的更新。所以今天我要向设计师们分享一组用于简洁网页设计的光滑英文字体。这些免费的字体是适用于各种类型的设计，除了网页，还有海报、标志、印刷广告等。 您可能感兴趣的相关文章 免费字体集锦：25款英文艺术字体下载 字体大宝库：15款漂亮的艺术字体下载 推荐20款免费的又好看的英文手写字体 字体大宝库：10款有趣的精美节日字体 分享20款很漂亮的免费英文LOGO字体 Museo Sans Geo Sans Light Duepuntozero Oregon LDO Sansation Engel Light Comfortaa Forgotten Futurist Walkway Steiner Eurofurence Baar Metanoia Existence Light Asenine Anna Cicle Aubrey Waukegan LDO Qlassik Bebas 您可能感兴趣的相关文章 字体大宝库：20款充满艺术感英文字体 向设计师推荐20款好看的英文装饰字体 专业设计师常用的22款免费英文字体 字体大宝库：免费的英文3D字体下载 分享最新36款高质量的免费英文字体 本文链接：40款用于简洁网页设计的光滑英文字体 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-10-07
AOS – 另外一个独特的页面滚动动画库（CSS3）
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。 马上去试试 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：AOS – 另外一个独特的页面滚动动画库（CSS3） 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-09-22
分享20个新颖的字体设计草图，带给你灵感
通常我们对最终设计至关重要，但在幕后有很多流程，例如草图。 草图是是把想法作为一种思想框架描绘出来。 有时客户需要一个独特的品牌新标识或字体更方便画在纸上，之后扫描到 Photoshop 和 Illustrator。这里分享20个新颖的字体设计草图，带给你灵感。 您可能感兴趣的相关文章 让人惊叹的的创意404错误页面设计 20幅精美绝伦的光涂鸦摄影作品欣赏 25个别出心裁的简历设计作品欣赏 25个令人惊叹的国外手工纸艺术品 30幅美得令人窒息的风景倒影照片 1. Typography (Creative Mints) by Mike | Creative Mints 2. Living Stream by Eddie Lobanovskiy 3. Handlettered Logotypes by Mateusz Witczak 4. Happy Birthday To You by Ross Moody 5. Logo&Type – Handlettering by Mateusz Witczak 6. The Sketch Collection Vol02 by Marcelo Schultz 7. Awaken Our Hearts – Sketch by Drew Melton 8. Hand Type Vol. 14 by Raul Alejandro 9. Friday Type 2 – Marceloschultz.Com by Marcelo Schultz 10. Fantastic by Olga Vasik 11. Sullen Style Play by Ryan Hamrick 12. Brush Lettering Collection No. 1 by Neil Secretario 13. Sketches & Logos 2013 by Jackson Alves 14. Voyager by Pellisco 15. Self Portrait by Carl Fredrik Angell 16. NSAAFA exhibition of students by Steve Seven 17. Moonshine Bandits: Custom Lettering Logo Design by Pale Horse 18. Sketches & Logos 2013 by Jackson Alves 19. Chronic Creator by Sean McCabe 20. Thank God It’s Friday ! by Marcelo Schultz 您可能感兴趣的相关文章 25幅独特的字符头像艺术作品欣赏 40幅创意的街头墙绘艺术作品欣赏 30幅动人心脾的优秀摄影作品欣赏 25佳超乎想象的纸艺术作品欣赏 25幅非常漂亮的倒影摄影作品欣赏 本文链接：20 Amazing Examples of Typography Sketches 文章来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-09-17
Cleave.js – 自动格式化表单输入框的文本内容
Cleave.js 有一个简单的目的：帮助你自动格式输入的文本内容。 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性。通过使用这个库，您不需要编写任何正则表达式来控制输入文本的格式。然而，这并不意味着取代任何验证或掩码库，你仍应在后端验证数据。它支持信用卡号码、电话号码格式（支持各个国家）、日期格式、数字格式、自定义分隔符，前缀和块模式等，提供 CommonJS/AMD 模式以及ReactJS 组件端口。 在线演示 源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让 人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：Cleave.js – 帮助你自动格式化表单输入框的内容 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-09-06
CssStats – 分析和优化网站 CSS 代码的利器
CssStats 是一个在线的 CSS 代码分析工具，你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析，是前端开发人员和网页设计师分析网站 CSS 代码的利器，可以统计出 CSS 代码里的规则数量、字体颜色、字体大小、背景颜色数等等。 马上去试试 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：CssStats – 分析和优化网站 CSS 代码的利器 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-08-09
20款 JavaScript 开发框架推荐给前端开发者
下面，我们给大家提供了一个用于 HTML5 开发的各种用途的 JavaScript 库列表。这些框架能够给前端开发人员提供更好的功能实现的解决方案。如果你有收藏优秀的框架，也可以在后面的评论中分享给我们。 您可能感兴趣的相关文章 期待已久的2013年度最佳 jQuery 插件揭晓 小伙伴们都惊呆了！8个超炫的 Web 效果 10大流行的 Metro UI 风格 Bootstrap 主题 推荐35款精致的 CSS3 和 HTML5 网页模板 精选12款优秀 jQuery Ajax 分页插件和教程 1. EasyStar.js If you build HTML5 games or other interactive content, then be sure to check outEasyStar.js for asynchronous pathfinding in JavaScript. You can set all sorts of parameters for how paths are calculated based on your own needs through the API. 2. Resumable.js It’s a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is losteither locally or to the server. Additionally, it allows for users to pause, resume and even recover uploads without losing state. 3. Envision.js Envision.js is a library for creating dynamic, interactive, and fast HTML5 visualizations from your data. Create time series visualizations with real-time or existing data, financial charts, and much more. 4. Zebra Zebra is a JavaScript library that comes with a bunch of rich user interface components for creating desktop-like layouts. The UI elements are built with HTML5 canvas, colored with CSS and expected to be rendered the same on all modern browsers. There are 30+ UI components including grid, tabs, menu, form elements, menu and much more. 5. Chart.js Chart.js is an easy, object oriented client side graphs for designers and developers. You can visualise your data in 6 different ways. Each of them animated, fully customizable and look great, even on retina displays. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8. Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customization options. it is licensed under MIT License.6. CanvasQuery CanvasQuery is a JavaScript library that eases working with HTML5 canvas and adds lots of new methods to it. The library provides a jQuery-like syntax and methods added are mostly for image manipulation (like masks, blur, crop or fill mask). It also brings blend modes, new shapes, text wrapping and much more. CanvasQuery can be used with or without jQuery, has methods for color conversion and can be extended with plugins. 7. AristoChart Aristochart is a sophisticated but simple library for flexible line charting with canvas. It takes care of managing the data, while you can focus on the aesthetics. 8. Gauge.js gauge.js is a highly configurable 100% native looking animated JavaScript/CoffeeScript gauge with no dependencies. No images, no external CSS – just pure canvas. 9. Heatmap.js heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5 canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you’re adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate. 10. Audio5js Audio5js is a lightweight JavaScript library that solves this compatibility issue nicely. It provides support for multiple codecs and fallback to a Flash-powered MP3 player when needed. The library auto-detects the browser, knows its capabilities and loads the right player with the right codec. An API exists for controlling the player and has the functions for “load, play, playPause, pause, volume and seek”. Also, there are methods for getting the details (playing, duration, position, load-percent, seekable or not) of the item being played. 11. KineticJs KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. You can draw your own shapes or images using the existing canvas API, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness. 12. html5sql.js html5sql is a light JavaScript module that makes working with the HTML5 Web Database a whole lot easier. Its primary function is to provides a structure for the SEQUENTIAL processing of SQL statements within a single transaction. This alone greatly simplifies the interaction with the database however it doesn’t stop there. Many other smaller features have been included to make things easier, more natural and more convenient for the programmer. 13. Buzz Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It provides tons of methods for taking advantage of the audio element and provides a way to group sounds and offers many methods to control them. It degrades gracefully on non-modern browsers. 14. Modernizer Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. It lets you target specific browser functionality in your stylesheet by adding classes to your element. What?s easy is you don?t need to actually write any Javascript code to use this. 15. Easeljs The Easel Javascript Library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier. 16. Collie Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Also easily responds to retina display. 17. Deck.js Deck.js is a lovely JavaScript library for creating HTML presentations. While advanced users can build totally custom outputs, there are templates and themes for novice users to create a standard slideshow with no effort. 18. Canvas Loader CanvasLoader is a JavaScript UI library for drawing and animating circular preloaders with HTML5 canvas. Using a simple function, a canvas element (loader) is created inside a placeholder div and multiple instances can be created at the same page. There are few different loader types supported and they can be customized in many ways like color, density, speed, diameter, fading, FPS and scaling. Also, functions exist for getting the values of each parameter. Optionally, a web-based creator helps building the loader image by setting the values, previewing the output and downloading the HTML file. 19. D3.js D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. 20. Joint.js JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders. JointJS makes it easy to create visual languages & tools of various kinds. 您可能感兴趣的相关文章 精心挑选的美轮美奂的 jQuery 图片特效插件 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQuery 文本特效插件和教程 8款非常棒的响应式 jQuery 幻灯片插件推荐 精心挑选12款优秀 jQuery 手风琴插件和教程 本文链接：HTML5 JavaScript Libraries for Developers 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-07-28
12个用于网站性能优化的最佳的图片压缩工具
图像压缩工具允许轻松的进行压缩，编辑和调整图片大小。这些工具支持多种图像格式，如JPEG，PNG，GIF，可以重新大小根据您的需要他们，让您的网站和 Web 应用程序的拥有更快的载入速度。 在这个列表中，我们编制了12个最佳的图片压缩工具，所有这些都将帮助你压缩你的网站上的图像，节省带宽和提高网站的性能。 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 1. JPEGMini JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality. The technology works in the domain of baseline JPEG, resulting in files that are fully compatible with any browser, photo software or device that support the standard JPEG format. 2. Shrink O’ Matic Shrink O’Matic is an AIR application to easily (batch) resize (shrink) images. It handles JPGs, GIFs and PNGs. Simply drag and drop images and they’ll be resized as you wish! Options allow you to choose the output sizes, rotation (supports EXIF data), names and location, formats and watermarks. 3. Riot Radical Image Optimization Tool (RIOT for short) is a free image optimizer that will let you to visually adjust compression parameters while keeping minimum filesize. It uses with a side by side (dual view) or single view interface to compare the original with the optimized image in real time and instantly see the resulting file size. It is lightweight, fast and simple to use, yet powerful for advanced users. You will be able to control compression, number of colors, metadata settings and much more, and select image format (JPG, GIF or PNG) for your output file. 4. Image Optimizer This is free online service, which lets you resize, compress and optimize your image files. Using the service is as easy as clicking of button! Optimized images are better! They are more suitable for web pages, email attachments, or even storage on your disk. 5. Trimage Trimage is a cross-platform GUI and command-line interface to optimize image files for websites, using optipng, pngcrush, advpng and jpegoptim, depending on the filetype (currently, PNG and JPG files are supported). It was inspired by imageoptim. All image files are losslessy compressed on the highest available compression levels, and EXIF and other metadata is removed. Trimage gives you various input functions to fit your own workflow: A regular file dialog, dragging and dropping and various command line options. 6. PunnyPNG PunyPNG is a free website optimization tool that dramatically reduces the file size of your images without any loss of quality. It first analyzes the content of your image and figures out the best web optimization technique and format to use. It supports the most popular formats and, depending on the file, PunyPNG will decide how to convert your image to ensure the best possible results. 7. JPEG Optimizer JPEG-Optimizer is a free online tool for resizing and compressing your digital photos and images for displaying on the web in forums or blogs, or for sending by email. Completely Free. No software to download. Just upload your image or enter its URL and press “Reduce It.” You can then view the compressed images and thumbnails, and right-click the image to save it. 8. ImageOptim ImageOptim is a free app that makes images take up less disk space and load faster, without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles. It’s excellent for publishing images on the Web (easily shrinks images “Saved for Web” in Photoshop) and also useful for making Mac and iPhone/iPad applications smaller (if youconfigure Xcode). 9. Shrink Pictures Shrink Pictures allows you to resize pictures and choose the level of compression applied, and it supports JPG, GIF and PNG. You can select the maximum image dimension, apply special effects, and download the optimized images. 10. JPEG Reducer JPEG Reducer shrinks the sizes of your images and photos to make them load faster, and works by using lossy compression. However, you may not even notice that any changes have been made. Just upload your image or enter its URL and press “Reduce It.” You can then view the compressed images and thumbnails, and right-click the image to save it. 11. PNG Optimizer PNG Optimizer cleans your PNG files of useless or wrong information, reduces their weight and converts PNG into other lossless image formats such as BMP, GIF OR TGA. It also supports animated PNGs and is available on Windows XP, Vista and 7. You can also easily create PNG screenshots within a simple, productive user interface. 12. Tiny PNG TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size! 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典网页设计：25个应用视差滚动单页网站 经典网页设计：20个新鲜出炉 HTML5 网站 经典网页设计：20例简洁精美着陆页面设计 经典网页设计：20个简约风格电子商务网站 本文链接：12个用于网站性能优化的最佳的图片压缩工具 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-07-10
16款最佳的 jQuery Time Picker 时间选择插件
jQuery 插件可以为你做许多事情，你可以很容易地把这些插件集成到您的网站。网络上的 jQuery 日期选择器和日历插件很多，但找不到很满意的时间选择器插件。 在这里，我们收集了最好的一组 jQuery 时间选择器插件列表分享给大家。 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个前沿 HTML5 & CSS3 效果【附源码下载】 1. jQuery Timepicker jquery.timepicker is a lightweight time picker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.7kb minified and gzipped. 2. Combodate Combodate is a jQuery plugin to create dropdown date and time picker. This plugin converts input type=”text” into dropdown elements to pick day, month, year, hour, minutes and seconds. 3. Wickedpicker Wickedpicker is a simple jQuery timepicker that will add class to your website with a dead simple interface. 4. Timepicker jQuery TimePicker is a plugin to help users easily input time entries. It works by allowing the user to type times in a free format or selecting them from a dropdown menu. The plugin will automatically convert all time entries using a format that can be changed passing the timeFormat option; the default value is hh:mm p which will give something like 02:16 PM. 5. Bootstrap Date/Time Picker Date/time picker widget based on Bootstrap. It has public API and has many options to customize. 6. Timepicki Timepicki – free Time picker jquery plugin, it is simple and clean timepicker so user can understand to set time for your project in input forms. 7. Clock Picker ClockPicker is a clock-style timepicker for Bootstrap (or jQuery). 8. TimePicker This plugin allows you to customize the text box. After click on them you see the window, where you can select the destination time.Plugin breaks 24 hours to the minute with the desired interval. It is possible to highlight certain time periods, i.e. available time or blocked intervals(for example: from 10:00 to 23:00, the discount is valid from 10:00 to 13:00. Buttons in time from 10:00 to 23:00 will be active; from 10:00 to 13:00 will be selected (default red)). 9. jQuery UI Timepicker This is a jQuery UI time picker plugin built to match with other official jQuery UI widgets. Based on the existing date picker, it will blend nicely with your form and use your selected jQuery UI theme. The plugin is very easy to integrate in your form for time (hours / minutes) inputs. 10. jQuery Time Picker It is an easy to use time picker plugin which comes with several options, its slider works with keyboard cursors, it is useful and intuitive, comes with well documented source code. 11. tidyTimes.js tidyTime.js is a jQuery plugin, that provides a more friendly way of displaying time updates to users.tidyTime.js takes any regular time and changes it into more human friendly dialogue such as “It’s just gone noon. It’s quarter past 8 in the evening, it’s nearly half past 4 in the afternoon, it’s just gone 25 to 6” and more. 12. oClock oClock is a shiny analog time picker that provides user select time easily. It converts your inputs into an analog clock like date pickers does. oClock supports 12 and 24 hour formats, comes with 5 different clock faces, provide users to select one minute intervals and supports all major browsers. 13. ptTimeSelect jQuery.ptTimeSelect is called agaist input fields to attach a Time Select widget to each matched element. Each element, when focused upon, will display a time selection popoup where the user can define a time. 14. jQuery Timeinput jQuery timeInput is a time picker plugin for jQuery based on the HTML5 spec, but it’s backwards compatible with older browsers. Just a simple dropdown with suggested times in 24h format. The HTML5 spec doesn’t allow am/pm or localized time syntax, so it only allows the format hh:mm. 15. jQuery Simple TimePicker It is a really simple picker to select a time. The plugin creates 2 selectors: hour, minute. After you select a time with these selectors, it puts the result time string in an output field. You can send or serialize your form normally. 16. Metro Date Time Picker Metro DateTime Picker is a jQuery extension which enables your users to easily select a date, a time, or both!It’s based on the beautiful and clean Metro design principles, and the picker on Windows Phone.It’s highly customizable, easily included onto any project, it supports 12h and 24h time format, and it’s super easy to translate to any language! 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：15个最佳的用户体验和用户界面工具和资源 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 本文出处【http://www.cnblogs.com/lhb25/】 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-07-03
2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速、流行的 JavaScript 库，jQuery 用于文档处理、事件处理、动画和 Ajax 交互非常简单，学习曲线也很平坦。2016年6月的 jQuery 插件专辑里，我们选择一些最好的和有用的 jQuery 插件分享给大家。 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来！12款优秀的 jQuery 动画插件 8个前沿 HTML5 & CSS3 效果【附源码下载】 1. jQuery.mark jQuery.mark is a jQuery plugin to highlight text with diacritics, synonyms, custom elements, custom class names, separate word search (multiple terms), filter selectors, word boundary and iframe support. Compatible with DataTable. 2. Pjax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button,pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax’d html. It then updates the browser’s current URL using pushState without reloading your page’s layout or any resources (JS, CSS), giving the appearance of a fast, full page load. But really it’s just ajax and pushState. 3. footerMenu footerMenu is a simple and easy jQuery plugin to slide up toggle footer menu when scroll down. 4. Balance Text Balance Text is a jQuery plugin for implementing balancing of wrapping text in a web page. 5. jQuery Smartify jQuery Smartify loads images, calls Ajax, plays with css classes in on demand, while element is/or becoming visible in device Viewport. It’s replacement of jQuery Lazyload. 6. animateClick animateClick is a jQuery plugin that allows you to create animations on mouse click. animateClick comes with 5 animations to enhance your button clicks or clicks on any element in your webpage. The plugin allows you to define the color and size of the animations as well. 7. Lemon Lock Site Lemon Lock Site – Advertisement is a plugin that allows to lock content on your website. It Prevent users download image, Copy content, download source code….Beside It when users try to do that we can show popup to advertisement for your site. Have page setting on backend you can put content html for popup. Lemon Lock site – Advertisement is a interesting way to extend functionality of your website. 8. Ajax Uploader A Javascript plugin for cross-browser Ajax file uploading. Supports drag and drop, CORS, and multiple file uploading with progress bars. Works in IE7-9, mobile, and all modern browsers. 9. easyTable easyTable allow you to sort, filter and do mutiple ways of select using shift and crtl key, allow to get the data selected easily and customize/extend the plugin. easyTable allow you to sort, filter and do mutiple ways of select using shift and crtl key, allow to get the data selected easily and customize/extend the plugin. 10. Faba : Facebook Albums & Photo Gallery FABA is responsive facebook albums and photos gallery jquery plugin that will load all the albums and photos from selected Facebook Page. It has very little HTML markup which you can copy-paste into your project. jQuery will do the rest. You can have beautifully organized gallery on your webpage or project. 11. Marginotes Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. 12. pickList pickList is a simple jQuery plugin that turns a regular multiple option select box into a side-by-side pick list with Bootstrap. 13. FaceMocion FaceMocion is a plugin to create Facebook emoticons with jQuery and CSS. It allows you to turn any text input emoticons on the page into cute little smiling faces. 14. Instagram Element Instagram Element is a premium Instagram plugin for bloggers, photographers, models, and anyone looking to increase their presence on Instagram. Based off the popular Instagram Journal plugin, this jQuery plugin version allows you to easily manage 50+ flexible options and create the perfect display with just a few clicks. Furthermore its’ mobile, responsive design allows you to showcase your photos beautifully on any device! 15. Filterizr Filterizr is a jQuery plugin that sorts, shuffles and applies stunning filters over responsive galleries using CSS3 transitions. 16. Slider Maker Slider Maker creates Layered Sliders, Galleries, Carousels, Slideshows using a beautiful & easy graphical tool. Slider Maker is ready to use : no install, no database. Tutorial and tooltips make it user-friendly even for beginners. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果【源码下载】 12款经典的白富美型 jQuery 图片轮播插件 本文链接：2016年6月份那些最实用的 jQuery 插件集合 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
-
发表了文章 2016-06-20
创建响应式布局的优秀网格工具集锦《系列五》
在这篇文章中，我们为您呈现了一组优秀的网格工具清单。如果网页设计和开人员采用了正确的工具集，并基于一个灵活的网格架构，以及能够把响应图像应用到到设计之中，那么创建一个具备响应式的网站并不一定是一项艰巨的任务。enjoy! 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成工具 开发者必备的八个最佳云端集成开发环境 2012年度最佳 Web 前端开发工具和框架 Susy Susy is a responsive grid system for Compass. It lets you quick add new media-query breakpoints to your layouts, using their math or your own (with helpers). GridSet Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS. Grid Grid is a simple guide to responsive design. By following those simple steps, you are on the path to responsive web design mastery. Keep practicing and help make the web a better, more useable place. Grid Designer This tool enables you to create a CSS Grid by specifying the number of columns and the widths of the columns, gutters and margins. Blueprint Grid CSS Generator This tool will help you generate more flexible versions of Blueprint’s grid.css andcompressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint. The Grid System The Grid System is an exceptional tool for creating responsive layouts. Grid Displayer Grid Displayer is a boomarklet that displays the grid of both Twitter Bootstrap (fixed and fluid grid) and Foundation (2.0 and 3.0). It works with Firefox and WebKit browsers. The Grid It’s a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements. 您可能感兴趣的相关文章 10套精美的免费网站后台管理系统模板 14个支持响应式设计的流行前端开发框架 60款很酷的 jQuery 幻灯片演示和下载 8个惊艳的 HTML5 和 JavaScript 特效 35款精致的 CSS3 和 HTML5 网页模板 英文链接：50 Grid Tools for Responsive Web Designs 编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 推荐博文 Web 前端工程师和设计师必读精华文章推荐 酷！15个精美的 HTML5 单页网站作品欣赏 炫！35个让人惊讶的 CSS3 动画效果演示 赞！30个与众不同的优秀视差滚动效果网站 靓！25个优秀的国外单页网站设计作品欣赏 帅！8个惊艳的 HTML5 和 JavaScript 特效 顶！35个很漂亮的国外 Flash 网站作品欣赏 哇！34个漂亮网站和应用程序后台管理界面 本博客新站点 ◆ 前端里 ◆ 欢迎围观：） 作者：山边小溪 主站：yyyweb.com 记住啦：） 欢迎任何形式的转载，但请务必注明出处。
暂无更多信息
-
发表了文章
2008-07-24
电子商务网站网上支付原理简析
-
发表了文章
2008-07-24
VS2008 Ajax功能体验
-
发表了文章
2008-07-29
AjAX探究——JS调用实体类与赋值
-
发表了文章
2008-07-30
asp.net生成PDF文件参考
-
发表了文章
2008-08-31
Javascript学习进阶——闭包
-
发表了文章
2008-08-31
Javasccript学习进阶——科里化（Currying）
-
发表了文章
2008-09-20
SQL Server数据库重命名、数据导出等若干问题
-
发表了文章
2008-09-21
一种非常简单的静态网页生成方法介绍
-
发表了文章
2008-09-25
带有命名方法的委托与带有匿名方法的委托
-
发表了文章
2008-10-11
WEB部署中URL Rwrite技术详谈
-
发表了文章
2008-10-29
使用System.Timers.Timer类实现程序定时执行
-
发表了文章
2008-10-30
使用System.Net.Mail类实现邮件发送
-
发表了文章
2008-12-21
VBscript操作DOM
-
发表了文章
2008-12-26
替换SQL Server数据库中所有表的所有字段的某些内容
-
发表了文章
2008-12-27
关闭数据库的xp_cmdshell命令以防止黑客攻击
-
发表了文章
2008-12-27
保护SQL Server 2000数据库安全配置的十七招
-
发表了文章
2008-12-27
SQL Server服务器最新漏洞解决方法
-
发表了文章
2009-01-03
数据库被注入daxia123原因及解决办法
-
发表了文章
2009-01-03
HTML对象的拖放事件
-
发表了文章
2009-01-06
当前页居中分页效果的JS实现
滑动查看更多
暂无更多信息
暂无更多信息