日期:https://www.layui.com/laydate/ LayUi 首页地址:https://www.layui.com/…

开始学习前端知识,做一些笔记来记录下- 之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大. 下面记录下常用的前端工具: Sublime3:需要安装第三方包,一般 Atom:继承度非常好 VS code:智能提示非常强大 Webstorm:大项目,建议使用 markman:标注/测量工具(基于adobe air) 工具安装: Sublime3安装 官网下载地址:http://www.sublimetext.com/ 安装插件步骤: 第一步:安装插件的包管理器:package contro…

http://my.oschina.net/alphajay/blog/33725 1.Gcov是进行代码运行的覆盖率统计的工具,它随着gcc的发布一起发布的,它的使用也很简单,需要在编译和链接的时候加上-fprofile-arcs -ftest-coverage生成二进制文件,gcov主要使用.gcno和.gcda两个文件,.gcno是由-ftest-coverage产生的,它包含了重建基本块图和相应的块的源码的行号的信息..gcda是由加了-fprofile-arcs编译参数的编译后的文件运…

接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个版本:1.x 和2.x这两个版的对应配置方式也是不一样的,我目前只使用过1.X的版本.下面例子中所有配置的都是1.x的 这里先上一张webpack官方的图 官方对于webpack的解释:webpack is a module bundler(webpack就是一个模块打包机).它就是分析你当前项目的…

请注意,这是一篇站在完全新手的角度上来写的文章.可能你是一个后端人员想了解前端工具的使用和概念;也可能你是一个前端小菜(还在DIV+CSS的世界里挣扎着).本文比较适合那些以前完全没有接触过WebPack,而又想使用的朋友.通过本文你能理解webPack工作原理及做用!(不会至于看了半天资料还没有头绪!) 前言:本人是一个从后端转向前端的程序猿,在此之前对于前端的印象一直是:HTML + CSS + JS.完全没有想过前端会发展的如此的迅速,各种名词的出现:Node.NPM.Grunt.Gulp…

随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来越重要了,从各处的招聘信息也能看出这一点.说这么说我想强调的是他的重要性.另一方面,有很多CSS3的效果真的不需我们自己一个一个去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很多时间,让你有更多的时间去做自己想要做的事情. SVG Edit SVG EDIT是一款在…

VS2015前端工具:NPM和Web Essentials 1.写作背景 想在5月份前换个工作环境了,“检讨”一下自己混饭的技术水平和处世的人脉关系,觉得很不给力!为人方面,人各有志也就不纠结了,但本领得尽量提高一下. 我也不擅长写博客,也发觉以前写过的,要不半途而废,要不质量惨不忍睹,所以以前博文干脆全部删除,试着再回顾一遍也罢! 2.本章概述 VS2015 CTP6下的NPM(bower及grunt)和Web Essentials基本安装和使用.如果你是web前端开发人员,建议熟练掌握. 3…

客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaScript 表单验证库允许开发人员自定义样式.错误消息和样式以及简化验证规则的创建. 在本文中,您将找到最好的15个 JavaScript 表单验证库,可以帮助你让表单验证对用户更友好的和美观. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3…

一.部署前端工具如下: nodejsnpmwebpackvue 二.安装nodejs 1. 下载稳当版本nodejs 2. 配置环境变量 NODE_HOME=D:\soft\nodejs\ path=.;%NODE_HOME%; 创建node_global和node_cache目录 npm config set prefix "D:\soft\nodejs\node_global" npm config set cache "D:\soft\nodejs\node_cache…

我的前端工具集(六)Ajax封装token   liuyuhang原创,未经允许禁止转载 在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都这么做) token作为一种验证策略,实现起来比较简单,也可以找一些单点登陆的框架,或者token解决方案. 本文工具使用REST风格,将ajax经过简单封装,使得所有使用此封装后的ajax都默认进行token验证. 1.封装的ajax代码 /** * 封装ajax代码 */ var local =…

我的前端工具集(七)div背景网格   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候总觉得div颜色过于白,于是给了10%的灰 但是并不一定能解决问题,因为页面中会有不均衡的空白处,导致大面积灰有些暗淡 于是想给div背景加上网格 1.css代码 .gridbackground { /*网格背景*/ /*90度直线,100灰度,0.1透明度,5%宽度,0透明度背景*/ background: linear-gradient(90deg, rgba(100, 100, 1…

我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如进度条,提示框,特效动画等.(bootstrap提示工具也挺好用的). 1.html代码 <div style="padding:10px"> <h2>This is a page to test Postion.</h2> <div id=&qu…

最近在写一个新的项目,用到了新框架,主要是:react+webpack.里面还用到了一个前端工具——gulp. gulp在项目里的作用是打包静态资源.编译less,压缩css等.js并不在处理之列(不代表gulp不能处理,而是说在项目里并没有用gulp处理js) 如果理解了webpack之类的前端工具,gulp用起来会很简单的.本文的例子是通过gulp编译less package.json: { "name": "pro1", "version"…

1.Gcov是进行代码运行的覆盖率统计的工具.它随着gcc的公布一起公布的,它的使用也非常easy,须要在编译和链接的时候加上-fprofile-arcs -ftest-coverage生成二进制文件,gcov主要使用.gcno和.gcda两个文件..gcno是由-ftest-coverage产生的.它包括了重建基本块图和对应的块的源代码的行号的信息. .gcda是由加了-fprofile-arcs编译參数的编译后的文件运行所产生的.它包括了弧跳变的次数和其它的概要信息.gcda文件的生成须要先…

前端工具WebStorm好在哪里?(带详细破解教程) 一.总结 1.WebStorm对html特别是HTML5和JS的智能提示简直堪称大神. 2.WebStorm足够的轻量级. 3.WebStorm对js的提示也足够的先进.还带js调试功能. 二.前端工具WebStorm好在哪里? 大家还在使用Dreamweaver这样的弱智工具开发Web前端吗?或者使用VS 系列笨重的工具在开发Web的前端吗?你已经Out了.我推荐大家使用WebStorm来做Web前端开发,高端.大气上档次. 相比Dream…

前言: webpack 超级实用前端环境搭建 一.我们日常使用的前端开发环境应该是怎样的? 构建我们需要发布的html,css ,js 文件 使用css 预处理器来编写样式 处理压缩图片 使用Bable支持ES新特性 本地提供静态环境开发调试 二.关联HTML webpack 默认从作为入口的 .js 文件进行构建(更多是基于 SPA 去考虑),但通常一个前端项目都是从一个页面(即 HTML)出发的,最简单的方法是,创建一个 HTML 文件,使用 script 标签直接引用构建好的 JS 文件…

Gulp是一款前端自动化的工具,如果能熟练使用Gulp来进行开发一定可以节省很多的时间,也可以快速的提高工作效率. 在使用Gulp之前就是要配置好Gulp安装的环境,这是我们能使用Gulp快速开发的第一步. 安装 ~~~~~~~~~~~~~~ D1 NodeJS安装 Gulp是基于NodeJS运行的,所以第一步就是要先安装NodeJS, https://nodejs.org/en/. 安装好Node之后,在Node的Command里面安装全局环境以及本地环境 # 安装全局环境 npm insta…

http://my.oschina.net/maomi/blog/137807#OSC_h2_5 WebStorm混搭svn WebStorm混搭nodeJS webstorm简单介绍 webstorm设置技巧 webstorm使用心得 WebStorm集成git使用 WebStorm常用快捷键 webstorm快捷键说明 [亲身实测] WebStorm混搭svn WebStorm混搭nodeJS 以less和uglify-js为例 如何用npm在root中下载模块 [网络转帖] webstor…

关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序.对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML.CSS . Javascript 等技术来制作扩展程序. 如下图所示,这些图标就是各种开发者提供的 chrome 扩展程序: 区分扩展与插件 很多人会误称扩展程…

WEB前端助手(FeHelper)插件概述 WEB前端助手:FeHelper是一款chrome浏览器插件.包含一些前端实用的工具,如字符串编解码.代码美化.JSON格式化查看.二维码生成器.编码规范检测.栅格规范检测.网页性能检测.页面取色等web前端开发的常见功能.官方网站:https://www.baidufe.com/fehelper WEB前端助手(FeHelper)插件功能介绍 这款FeHelper插件对于web前端需要处理的网页html源码压缩,css或javascript的压缩都能…

前后端同步开发过程中,有时候前端页面完成了,需要等待后端接口完成部署后才能联调. 这个时候如果不想等待,想自己造数据模拟网络请求,这种情况就能用到mock工具了. mock工具可以用在web网站,也能用在小程序中.先介绍下操作步骤(以windows环境为例): 1.cmd打开终端,安装mock插件,全局生效: npm i @shymean/mock-server -g 2.插件安装完成后,然后在磁盘中随便一个地方新建一个文件夹,命名为mock; 在mock文件里面新建一个_mock.js空文件:…

关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序.对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML.CSS . Javascript 等技术来制作扩展程序. 如下图所示,这些图标就是各种开发者提供的 chrome 扩展程序: 区分扩展与插件 很多人会误称扩展程…

在你安装 Grunt.js 之前你需要先安装 Node.js.对于本教程而言,我已经安装好了 node.js v0.10.0. 我将要安装 Grunt.js v0.4.1.警告:如果你已经安装了 Grunt.js 0.3.x 或者更低的版本,请先卸载它. Grunt 的命令行界面 为了安装 grunt.js,我们需要要安装好全局的 Grunt 命令行界面(CLI),当前的 CLI 版本是 1.0.6.打开 Windows 命令窗口(CMD)并输入以下指令: npm install grunt-c…

这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule,用以帮助我们更深入的理解ESLint的运行原理,并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则. 插件目标 禁止项目中setTimeout的第二个参数是数字. PS: 如果是数字的话,很容易就成为魔鬼数字,没有人知道为什么是这个数字, 这个数字有什么含义. 使用模板初始化项目: 1. 安装NPM包 ESLint官方为了方便开发者开发插件,提供了使用Yeoman模板(generator-eslint…

---------------------------------------------------------------------------------[亲身实测] WebStorm混搭svn WebStorm混搭nodeJS 以less和uglify-js为例 如何用npm在root中下载模块 ----------------------------------------------------------------------------------------------[网…

一.业务场景 前端本地开发的场景中,我们需要频繁的改动代码,并需要实时看到效果,并且在一些开发场景中,我们需要将特定的请求代理到特定的IP.本地文件等,所以使用fiddler或whistle等本地.真机抓包调试工具是非常必要的. 二.为什么使用whistle 在历史的长河中,我们是使用fiddler+willow再搭配小米wifi 进行本地和真机抓包调试的,无可厚非,fiddler的抓包和代理的功能十分强大,但在使用的过程中,有个很蛋疼的缺点就是内存泄漏!!fiddler挂一整天,内存就被吃完了…

10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率. 神器推荐:<让网页舞动起来!25个免费的视差滚动插件><高端干货!PHOTOSHOP实用脚本大合集><一行代码都不写!完成简单网页的设计上传发布> Spritepad 借助 Spr…

随着前端项目复杂度的增加,其所依赖的资源也越来越多,从最初的HTML文件,CSS文件,JS文件发展到现在的各种预处理文件,模板文件等等.文件多了,项目大了,项目的维护就变得更加困难了,用户加载页面的速度也变得更慢了.在这样的背景下,webpack 应运而生,webpack 的主要作用是资源的整合,打包,压缩.使用 webpack,它会自动构建一个项目资源之间的依赖关系图,其中包含项目需要的所有模块,然后把这些资源全部整合打包成一个或多个(根据需要)bundle(包). 一 准备工作 1,安装 n…

一.相关工具链简介 HAML HAML是专门面向Ruby on Rails模版语法设计的一门标记语言,其结合RoR的views部分模版语法的特点,对原来的*.html.erb(嵌入Ruby代码的HTML页面)进行了简化和封装,使得在编写前端页面时能够更加简洁方便. 例如,下面是一份嵌入式Ruby的HTML页面的代码: <div id='content'> <div class='left column'> <h2>Welcome to our site!</h2&…

摘要:一款基于Vue组合式API的函数工具集. 本文分享自华为云社区<vueuse:我不许身为vuer的前端,你的工具集只有lodash!>,作者: 前端要摸鱼 . vueuse 是什么? 一款基于Vue组合式API的函数工具集. 以上是官方网站关于它的定义. 首先,它基于Vue Composition Api (组合式API),只有在支持组合式API的环境下,才可以正常使用它:什么是组合式API? 然后,它是一款函数工具集(可类比为lodash.js/ramda.js); 简单来说,这是一个…