前端面页性能优化

表单性能优化 HTML 代码 <form id="my-form" action=""> <input type="text" name="name"> <input type="password" name="password"> </form> <input id="btn" type="button" value="获取表单数据"/> JavaScript 代码 var myForm = document.getElementById("my-form"); var name,password; btn.onclick = function(){ name = myForm["name"].va...

2018
06-16

window name.bat 批量处理文件/文件夹

前言 .bat 后缀 ,双击后就可执行 .bat 里面的命令行,做成 .bat 文件批处理有时候可以大大的节省我们的宝贵时间,减少重复工作。 现在我们先来了解下 window 里的批量文件处理 *.bat 文件的基本结构: @echo off 不显示执行过程中的命令行,如果前面不带 @ 那么就会把自己(echo off)显示出来,其它的命令行不显示。这样就可以保证命令行执行窗口的整洁 pause 暂停,也就是我们双击 .bat 文件后命令执...

2018
05-21

Github 仓库入门:代码上传与管理

前言 上传一些项目到 Github 已经成为了程序员的一份副业了,上传代码到 Github 仓库不仅仅只是为了分享,更重要的是让自己的代码有一个归宿,也大大地方便了自己管理代码。这篇文章不分享什么有用的技术,只想默默地分享下怎么我们的代码上传到 Github 仓库,有用收藏,无用勿喷。 首先要想有一个仓库,你先得有个 Github 帐号,如果还没有,那就偷偷打开 https://github.com/,我不会笑你的,因为虽然...

2018
04-25

Echarts 技巧整理

Echarts 3.x 这篇文章收集了 Echarts 在平时开发中常用的一些配置项,没有过多的语言,直接上码。有了它可以让你更省时,因为这引会更加直接的让你找到你想要的,而不用在官方文档中一个一个点开查找。 容器边距 grid:{ top:100, left:45, right:25, bottom:45 } 渐变 series: [{ name: '销售量', type: 'bar', itemStyle:{ normal:{ col...

2018
01-22

WEB前端动画库汇总篇(应有尽有)

作为前端开发人员动画效果是硬性要求,如果还不会就得开始学习啦,像我这样的新手一开始应该要懂得站在巨人的肩膀上,先把别人的东西用起来,熟悉了之后就可以模仿别人的实现,研读别人的代码,好了不多说,还是赶紧走进动感世界吧! dynamics.js。一个用于创建物理运动动画的 JavaScript 库,非常的实用,不管是对象、DOM 元素、还是 SVG 都驾驭得了。 bounce.js。它可以让你生成一系列非常有动感的动画效...

2017
11-10

Dynamics.js 一个简单强大的物理运动动画库

前言 这是一篇没有什么技术含量的文章,因为本次只是来分享一个简单但强大的物理运动动画库,他们可让你的元素、对象、SVG 变得魅力十足。我是在学习Canvas 过程中用到这个 JavaScript 动画库的,觉得还不错,所以就单独成文,把它分享给大家。虽然网上有很多关于 Dynamics.js  的资料,但我毕竟是我,我只是记录自己的一切。 官网首页的清爽让我不得不截图以证清白: 虽然图片有点抢镜,但我就是喜欢。...

2017
11-09

Bower 前端依赖包管理器

前言 Bower 是一个软件包管理器(如JavaScript、HTML、CSS之类的网络资源),你可以在应用程序中用它来安装新的软件包,它可以让你很好地管理前端中各种依赖比如:jQuery、Boostrap、Angular、React 等。下面我们就来看看 Bower 这个好东西。 为什么是 Bower 在项目用使用 Bower 来管理依赖如以下几个好处: 管理项目中所有依赖的版本号 可以下载依赖源码 让依赖关系处理起来变得前所未有的简单,可以...

2017
09-09

WAMP SERVER 环境下,手机端访问电脑本地站点(localhost)

前言 移动开发盛行,移动端页面调度就显示极其重要。很多东西只有在真机下才能看到最终效果。于是我们就需要通过手机端来访问电脑中的站点来进行调试,包括但不限于样式调整。下面就分享一个移动端套装。不能说是最好的,但至少是够用。本文主要分享的东西是通过手机端访问页面,从而达到提高开发效率的目的。 准备 要想使用这个功能来提高工具效率的,我们必需先安装两个软件:Wamp Server 和 360 手...

2017
08-08

Sublime Text Snippets 模板库插件

前言 模板库插件对于我们做前端的人来说也很有历史的了,还记得以前刚做前端的时候,如果遇到经常用到的代码,就是把这些代码放到一个文件中,到用的时候就打开文件,复制粘贴完成手动版的模板库功能,但是现在就不用这个纯手工的方法了,因为我们有了Sublime Text Snippets 模板库插件。 Snippets 之旅 安装配置 安装方法也是一如既往地简单,在这里就不多说了。安装完后就可以用了,但要怎么用呢?...

2017
06-27

Sublime Text Clipboard Manager 剪切板历史管理插件

Clipboard Manager 是 Sublime Text 3 里的一个剪切板历史管理插件。虽然不是很强大,但可以让你用得爽爽哒。这样的功能真的得收藏好,到用的时候才知道它有多贴心,多么令人动容。好,费话不多说,开始! Clipboard Manager 的安装我想在这里也不用多说了,会用 Sublime Text 的都会。这篇文章只想说说它的配置及用法,我估计这才是你来到这里的原因。我相信你肯定不会白来一趟。 首选配置一些快捷键:复...

2017
06-26

Sublime Text CTags 插件

Sublime Text CTags 插件用来定位函数,这个方法跟搜索功能比起来有着异曲同工之妙,不过你不需要输入任何字符,直接键盘+鼠标键就可以找到你要找的函数。用法可以看这里:https://github.com/SublimeText/CTags。这个插件的安装方法可能会让你觉得不适,但你得挺住。 要想成功在 Sublime Text 中使用这个插件,你只需要做两件事: 1. 在 Sublime Text 的Package Control 中安装此插件。 2.下载一个压缩包...

2017
06-24

Sublime Text 让天下没有难敲的代码

前言 Sublime Text 非常地轻量,以至于可以用秒来的形容,轻量归轻量,但强大也是它的墓志铭。所以这是一篇 Sublime Text 的专卖。不要怀疑,就是它。 准备 官方下载地址:http://www.sublimetext.com/ 官方文档:http://www.sublimetext.com/docs/3/(这里是 Sublime Text 3 的文档) 官方放出的安装方法有两种,一种是 .exe 安装,一种是直接解压就可以用。至于那一种好,其实看你自己怎么用。如果是...

2017
06-24

Eclipse 搭载 Tomcat 部署 WEB 项目

前言 在本地部署 WEB  项目,对于从事前端开发的人来说也是一个必备的技能。本文 eclipse 搭载 tomcat 来配置本地服务。其实这个配置也很简单,甚至很多人会觉得也没什么必要拿来说事,但我相信会有很多小白会在这上面花了不少时间。所以此文就诞生了。 准备 下载 Eclipse 、jdk、apache tomcat。可以都下载最新的版本,也可以下载较旧的版本。这个就看你自己在这方面有什么特别的喜好的。 Eclipse EE...

2017
06-19

本地 apache tomcat 之 web 项目部署

前言 在团队开发软件时,项目的协同合作就非常重要了。这个协同合作包括很多方面,如:git 的运用,本地调试,代码封装等,但这篇文章主要是想分享下在本地调试的时的环境配置问题。也就是把 web 项目部署到本地的 apache tomcat。说真的这个部署步骤非常地简单,但如果没有了解其中的套路,估计也得折腾好长一段时间。 下载安装 工欲善其事必先利其器,所以我们现在先来把所有需要的资源都一一准备好...

2017
06-16

Visual Studio Code 让高效进行到底

准备 一直都是用 sublime text 作为开发工具,用久了自然而然会觉得生活无趣,于是决定试试微软的新产品  Visual Studio Code 。 下载地址:https://code.visualstudio.com/ 安装完后给我的第一感觉就是天边送来了一波难以抵抗的视觉盛宴。 在这里界面里你就可以看到一个非常有情怀的快速链接:安装键盘快捷方式(你可以安装包括但不限于 Vim、Sublime、Atom 的键盘快捷方式),所有这个 coding 工具还...

2017
04-03

RequireJS 教程详解

什么是 RequireJS RequireJS 用于代码模块化,RequireJS 以一个相对于 baseUrl 的地址来加载所有的模块代码,使用 RequireJS 来开发,可以很好的避免变量污染全局环境。它的模块管理遵守AMD (Asynchronous Module Definition)规范,通过 define 方法来完成模块的定义以及模块代码的加载。 RequireJS 使用 引入 require.js <script src="js/require.js" defer async="true" data-main="js/main"&...

2017
04-02

网站代码高亮插件 prettify.js

作为前端开发者,代码是你躲也躲不开的,下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。 这个插件的作用方法也非常简单,你只需要引用相关文件,然后再启用它就可以。 <!-- 引入 CSS 文件 --> <link href="prettify.min.css" rel="stylesheet"> <!-- 引入 JS 文件 --> <script src="jquery.min.js">&l...

2017
02-20

网页天气预报 API 及用法整理

在网站中添加天气预报是常有的事,特别是一事提供日常资讯类的网站。下面就给大家整理出一些天气 API 以及他们的用法。 国家气象局天气预报接口 国家气象局为我们提供了两个可用的天气预报 API 接口: http://www.weather.com.cn/data/sk/101280701.html http://www.weather.com.cn/data/cityinfo/101280701.html 这两个接口返回的数据是不一样的,你可以根据自己需要进行选择。 http://www.weather.com...

2017
02-15

移动端 WEB APP 框架大全

现在如今要开发一个 APP 可以说是一件非常简单的事了,因为网上很在有很多这样的 APP 前端框架。下面我给大家整理下。 SUI Mobile 简介 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。 轻量的UI库。SUI Mobile 非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K...

2017
02-14

WEB 前端开发插件整理

下拉框插件 网址 1.selecthttp://select2.github.io/ 2.双 selecthttp://loudev.com 3.selectboxhttp://aui.github.io/popupjs/doc/selectbox.html 文字工具插件 网址 1.简繁体转换https://github.com/BYVoid/OpenCC 2.拼音https://github.com/hotoo/pinyin 图表插件 网站网址 1.Highchartshttps://www.hcharts.cn/ 2.EChartshttp://echarts.baidu.com/ 3.Chart.jshttp://chartjs.org/ 4.Paperjsh...

2017
02-14

connect-flash 用法详解

前言 说到 connect-flash ,估计也有很多朋友像我一样被它虐了好一阵子,很多朋友可能都会遇到过这个问题:Express4.x 中的 connect-flash 为什么不起作用?或者 connect-flash 怎么用?诸如此类的问题,在这里我就给大家戳破 connect-flash 的神秘面纱! 官方解释 The flash is a special area of the session used for storing messages. Messages are written to the flash and cleared after being d...

2016
10-05

自己开发的第一个 gulp 插件-文件筛选

前言 自动化工具 gulp 的出现给我们这些从事前端的开发人员提供了很多便利,这让我们的开发效率得到了很大的提高。首先npm 官网上的gulp插件就非常地多,常用的插件基本都可以找到(图片压缩,CSS压缩,js压缩,文件重命名……),如果对这些基本的插件还不了解的可以看看这篇文章《前端自动化工具gulp 初识》。但在实践的项目中,很多时候需要也不是那么简单或者说单纯的现有插件已经满足不了...

2016
09-30

两次电话面试,都败给了自己,一个字“服”

因为自己想找个跟自己职业规划有交集的平台,于是不经意间开始了面试之旅。下面是自己对两次电话(分别对应两家公司)面试分析总结,以便让自己查缺补漏。这里我所说的是专业技能方面的电话沟通。 拍摄于珠海唐家港湾大道2015/11/28 首先,对两次面试中自己出现的共同问题进行分析记录。 通过这两次面试后, 我发现自己在跟别人沟通的时候,语速会不自觉地变快,甚至快到连话都说不清。虽然第一次电话面...

2016
09-22

前端自动化工具 gulp 初识

前言 我们先来看看官方是怎么说的: 易于使用:通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。 构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。 插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 易于学习:通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。 gulp安装 初始化项目,初始化的的作用就...

2016
09-20

CSScomb – Sublime text中一个超赞的CSS属性排序插件

前言 CSS样式的有序排列对于提高工作效率或多或少都会有就贡献,当你看到自己写的代码齐刷刷的有序排列,心情肯定也不会差,特别是对于从事前端开发的朋友来说。所以下面就给大家分享Sublime text中一个超赞的CSS属性排序插件 – CSScomb。通过这个工具可以让你重新排列CSS中所定义的属性,也可以按照你预定义的排序格式生成新的CSS。 基本介绍 CSScomb 插件的主要特征: 1.帮助排序CSS属性 2.自...

2015
12-06

Ruby 环境 Sass 编译时出现 Invalid GBK character "\xE5"的解决办法

Ruby环境安装好,Sulime text 的Sass插件也安装完毕,并且也用来写代码有几天了,今天突然遇到了一个问题 Error: Invalid GBK character “\xE5” on line 2 of C:\Users\Administrator\Desktop\canvas\test.scss Use –trace for backtrace. [Finished in 0.6s]6. 原因是我们代码里出现中文了,只要我把中文去掉,点保存就没问题了。但用中文作为注释是必需的呀,所以百度了下,方法也找到...

2015
10-08

最详细的 Sass 基础教程指南

前言 这几天一直都在研究 Sass/Scss,这次就把 Sass 基础使用方法整理发表出来。让想学习这方面知识的朋友可以多一份参考资料。毕竟现在这方面的资料特别的稀缺。 在这里贴出这两天研究 Sass 的小小成果: 《Sass开发 – Ruby安装出错解决办法:淘宝网镜像 RubyGems》 《Sublime Sass插件编译出错Decode error及‘sass’不是内部或外部命令的解决方法》 《Scss 与 Sass 是什么,他们的区别在哪里?...

2015
10-08

Decode error及‘sass’不是内部或外部命令的解决方法

之前有分享过一篇关于Ruby的安装及在安装过程中遇到错误的解决方法《Sass开发 – Ruby安装出错解决办法:淘宝网镜像 RubyGems》的文章。不过Ruby安装成功安装完成之后,怎么用,怎么通过Sass来进行编码,这才是我们安装Ruby的初衷。 于是我网站百度了下“Ruby使用方法”诸如此类的关键词。Ruby 使用方法出来的结果跟本不是自己民想来的,随后我就搜了下“Ruby Sass怎么用”结果才是这想要的东西。只要是标...

2015
10-06

Scss 与 Sass 是什么,他们的区别在哪里?

要想了解Scss 与 Sass 是什么以及他们的区别又在哪里,我们不过不先从他们各自的定义说起。 Sass是什么 Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初...

2015
10-06

Sass开发 – Ruby安装出错解决办法:淘宝网镜像 RubyGems

前言 想学习研究sass/scss的朋友要做的第一件事就是安装开发环境,安就是安装目前比较流行的Ruby。但安装过程并不是很顺利。 下载、安装 首先我们从官方下载一个Ruby安装程序。 http://rubyinstaller.org/ 第一次安装的时候我没有选择默认的路径(C:\Ruby22),而是放在E:\Program Files (x86)目录下,安装成功后就按着cmd.exe。 输入gem install sass,可是问题就来了,出现如下错误提示: ERROR: Wh...

2015
10-05