之前学习 react+webpack ，偶然路过 webpack 官网 ，看到顶部的 LOGO ，就很感兴趣。 最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。 先上 demo ，没有将精力放在兼容上，请用 chrome 打开。 本文完整的代码，以及更多的 CS...
前言 图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。 需求就是那么简单，在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是，将图片和裁剪参数（x，y，scale，rotate）一并上传给服务器，服务器来做图片处理，so easy。 但是，这并不符合潮流发展的方向： 能在前端做的处理，就放前端做吧。 与潮流妥协的结果就是，前端越来越复杂。 ...
最近在研读 《CSS SECRET》（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目： CSS3奇思妙想 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。 也希望觉得不错的同学顺手在我的 Github 点个 star ： CSS3奇思妙想 。 正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前...
box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法，其实还存在许多不为人知的奇技淫巧。 喜欢 markdown 版本的可以戳这里 。 box-shadow 常规用法 说到 box-shadow ，首先想到的必然是它能够生成阴影，所以称之为 shaodow ，简单看看它的语法： 基础属性语法 box-shadow 属性向框添加一个或多个阴影。 box-shadow: h-shadow v-shadow blur spread color inset; ...
webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder 一、loaders之 预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理 npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader 栗子: ...
以下的内容，假定你已经读完 Atom 官方教程 Atom Flight Manual的第一章： Chapter 1: Getting Started 否则不要看下去了，回去先把那一章读完再说…… 工程师们使用的编辑器，有两个最基本的设计目标： 尽量少敲键盘、少出错、多做事 一定要可扩展、可定制、可积累 Mac 上的编辑器，工程师们最喜欢用的曾经是 TextMate，后来是 Sublimetext和 At...
上一篇博客讲解了webpack环境的基本，这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了 一、插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的： Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website ，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。 举个栗子：最新的弹性盒模型flux实际代码： :full...
gulp已经成为很多项目的标配了，gulp的插件生态也十分繁荣，截至2015.1.5，npm上已经有10190款gulp插件供我们使用。我们完全可以傻瓜式地搭起一套构建。 然而，我们经常会遇到一种情况，我们好不容易按照文档传入对应的参数调用了插件，却发现结果不如预期，这时候我们就要一点点去排错，这就要求我们对gulp插件的工作原理有一定的了解。本文以实现一个gulp插件为例，讲解一下gulp插件是如何工作的。 需求描述 通常，我们...
Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。 那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了...
前言在 HTML5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。从上篇：HTML5 进阶系列：web Storage ，我们知道 web Storage 可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明显。接下来我们来看看 indexedDB 如何存储数据。原文作者：林鑫，作者博客：https://github.com/lin-xin/blog连接数据库一个网站可以有多个 ind...
前言 在 HTML5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。从上篇：HTML5 进阶系列：web Storage ，我们知道 web Storage 可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明显。接下来我们来看看 indexedDB 如何存储数据。 连接数据库 一个网站可以有多个 indexedDB 数据库，但每个数据库的名称是唯一的。我们需要通过...
html初步： 什么是网页和网站: 网页：可用浏览器打开，具有一定的界面效果、功能和作用的“页面文件”。 网站：就是由若干个具有一定内在联系，隶属于同一目录的若干个网页组成的网页群。 网页浏览原理： 客户端：发起请求，常见客户端：即浏览器（google、360、ie、ff（firefox）） 服务器端：对客户端请求收到，并进行响应：常见服务器：Apache、tomcat、iis等 内核（渲染引擎）： ...
HTML5中新增了History API，它用于管理浏览器路由跳转的一个url栈。History是window对象的一部分，它也是一个对象，因此称它是BOM（类似DOM，Browser Object Model）中的一份子。History对象包含了用户在浏览器端访问过的所有url。 一、为什么存在History对象当使用location.herf或a标签中的非锚点方式的href进行页面跳转时，会造成整个页面的刷新。但目前来说，越来越多的单页应用利用ajax技术进行异步请求，仅仅依靠数据变化更改...
阅读目录一、MVC和WebApi路由机制比较1、MVC里面的路由 2、WebApi里面的路由二、WebApi路由基础1、默认路由 2、自定义路由 3、路由原理三、WebApi路由过程1、根据请求的url匹配路由模板 2、找到控制器 3、找到action四、WebApi特性路由1、启动特性路由 2、最简单的特性路由 3、带参数的特性路由 4、参数的约束和默认值 5、路由前缀五、第一个Restful风格的WebApi服务 六、总结 正文 前言：从MVC到WebApi，路由机制一直是伴随着这...
分享一下我的偶像大神的人工智能教程！http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！Python进阶(五十三)-Flask Web来发实现将表单渲染成HTML ??在利用Flask进行Python Web开发时，页面中的wtf.quick_form(form)函数中的参数form是如何与视图函数中的form变量关联起来的？即Flask是如何将表单渲染成HTML的？下面以实例的形式进行问题求解。 ??在视图函数views.py中：...