[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为"css预编译".它的主要设计思想是让我们可以按照编程的思路编写自己的样式,然后通过"编译器"生成我们所需要的css文件. 当然,SASS只是css预编译工具中的一种,类似的工具还有Less.stylus等,SASS起初语法采…

前端利器Emmet Emmet可以通过缩写生成代码片段,可以提升前端开发的效率.使用方法就是输入HTML或者CSS的缩写,然后按tab键自动生成.原文在这里 后代 > <!-- nav>ul>li --> <nav> <ul> <li></li> </ul> </nav> 兄弟 + <!-- div+p+bq --> <div></div> <p></…

Fiddler是一款免费的.基于Windows系统的代理服务器软件(即Web调试抓包工具),由Eric Lawrence用C#语言在2003年10月发布了第一个版本.注意,由于Fiddler依赖Microsoft .NET Framework 2.0或更高版本,因此在运行Fiddler之前需要预先将其安装. 当启动Fiddler时,它会自动注册成Windows Internet(WinINET)网络服务代理,从而就能捕获本地所有的HTTP和HTTPS数据流.在图14中,客户端(例如Web浏览器.…

最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax 请求,生成并返回模拟数据 基于 HTML 模板生成模拟数据 http://mockjs.com/ 什么入门之类的 看官网就会~~~ Fiddler   web调试利器 便于我们调试前后端数据等. Fiddler是一个web调试代理.它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,…

regex:(?isx)^http://127.0.0.1:3000(/dlscene)?/order/(\w*) http://127.0.0.1:8080/dlscene/order/$2 上面这段正则既可以匹配 http://127.0.0.1::3000/dlscene/order/xx 也可以匹配 http://127.0.0.1::3000/order/xx 实在是非常好用 2018.3.22更新一个自己用的正则 在前端开发中经常会用到的fiddler,来做接口调试. 在使用auto…

需求   前端开发中我们最常用的一般是webstorm.hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护项目的时候其老是不明原因的崩溃和卡死,所幸后来我就把webstorm作为首选的开发工具了.今天一个朋友问我怎么在webstorm中使用git,我这里也攒了一些webstorm的使用小技巧,所幸就写篇记录文章吧. 导读   读完这篇笔记你可以学到如下知识: 1.了解git和github的区别 2.学习…

看着那么多大神在博客上都有自己的心得和分享,我虽然工作不久,但也想做一下自己的笔记起码对自己是一次积累和锻炼的过程.所以心血来潮今天就注册了博客. 我今天想说一下Bootstrap,学前台的大概对Bootstrap应该有所了解.我也是在工作中用到才学了这个,觉得挺好,很强大.那Bootstrap是什么呢?它有什么强大之处? Bootstrap是由 Twitter公司创造出来的,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 We…

官网地址:http://www.telerik.com/fiddler 支持所有平台,但由于早期是基于.net开发的,对window操作系统支持较好,对mac,linux支持不够好.…

SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“css预编译”.它的主要设计思想是让我们可以按照编程的思路编写自己的样式,然后通过“编译器”生成我们所需要的css文件. 当然,SASS只是css预编译工具中的一种,类似的工具还有Less.stylus等,SASS起初语法采用缩进排列形式,但对于设计师来说既不直观还容易出现错误.在吸取了Less的一些特…

在tutsplus那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里. Emmet 简介 Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发. 安装Emmet 插件 Emmet只是文本编辑器一个插件,要想让他发挥应用的功能,就得将其安装到你喜欢的文本编辑器中.到目前为止,很多流行的文本编辑器都支持Emm…

fiddle的功能相当的强悍,用户也非常广,不过今天我就教大家用fiddle进行前端调试. 首先下载软件fiddle,点击对应的版本下载安装. 安装成功后打开看到右侧的导航栏: 点击AutoResponder 接下来出现的三个选项全部都要勾选,具体什么意思就是英文翻译了. 然后: 添加一个rule 在rule editor中第一个文本框里粘贴你要替换的原地址,比如: 然后进行下一步,在第二个框中点击选择find a file,具体意思你懂得,找个本地的文件替换上个url文件: 接下来就是最后一步…

webpack是一个非常强大的工具,除了前文所介绍的基础概念之外,还有各种进阶应用,例如Source Map.模块热替换.集成等,本文会对这些内容做依次讲解. 一. runtime和manifest 在webpack打包生成的bundle文件中,除了业务代码和引用的第三方库之外,还会包含管理模块交互的runtime和manifest. 1)runtime runtime是一段辅助代码,在模块交互时,能连接它们所需的加载和解析逻辑.下面是通过webpack 4.34生成的runtime(只给出了部…

摘要 Browsersync能让浏览器实时.快速响应您的文件更改(HTML.JavaScript.CSS.Sass.Less.PHP.Python等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:"假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动".无论您是前端还是后端工程师,使用它将提高您…

1.下载sublime3,在网上搜索sublime3,在官网下载即可. 2.下载后安装,直接下一步下一步即可安装. 3.注册. 在help菜单中,enter license里面输入 —– BEGIN LICENSE —–K-20Single User LicenseEA7E-9401293A099EC1 C0B5C7C5 33EBF0CF BE82FE3BEAC2164A 4F8EC954 4E87F1E5 7E4E85D6C5605DE6 DAB003B4 D60CA4D0 77CB15333…

背景 文档的重要性不言而喻,对于像Javascript这种的动态语言来说就更重要了,目前流行的JDoc工具挺多的,最好的当属JSDuck,可是JSDuck在Windows下的安装非常麻烦,这里就写下来做个备忘. JSDuck生成的文档效果 JSDuck安装步骤 第一步:安装Ruby Ruby下载地址:http://rubyinstaller.org/downloads/. 我是64位操作系统,下载的文件如下: 第二步:安装Development Kit 1.将DevKit-mingw64-64-…

npm(Node Package Manager)是Node.js的包管理工具,相当于一个在线仓库.它提供了一个公共的平台,将分散在世界各地的包集中起来,能轻松的安装.分享和管理相关的包,不用再为搜索包而烦恼,并且npm能自动处理包的依赖项.它由三部分组成: (1)网站:可用来浏览.搜索包的信息. (2)注册表:一个巨大的数据库,保存了每个包的信息,例如作者.版本.依赖等. (3)命令行界面(CLI):开发者可在CLI中对包进行发布.安装.卸载等操作. 由于新版的Node.js已集成了npm,因…

Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特性的修补:还支持语法扩展,从而能随时随地的使用JSX.TypeScript等语法.目前最新版本是7.4,自从6.0以来,Babel被分解的更加模块化,各种转译功能都以插件的形式分离出来,可按自己的需求,灵活配置. 在7.0版本中,对Babel的包做了一次大调整,统一改成域级包,将原先以“babel-…

webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CSS和HTML等文件,并且能对图像做优化处理,如图1所示. 图1  webpack打包 目前,webpack的最新版本是4.33,其配置文件(webpack.config.js)的基本结构如下所示,包含了它的4个核心概念:入口(entry).输出(output).加载器(loader)和插件(plug…

Git是一款开源的分布式版本控制系统,它的出现和Linux紧密相关.Linux内核项目组为了能更好地管理和维护Linux内核开发,于2002年开始启用商业的分布式版本控制系统BitKeeper.虽然软件开发商授权了Linux社区能免费使用,但是好景不长,到了2005年,BitKeeper的开发商由于某些原因终止了与Linux社区的合作关系.于是Linux的作者Linus Torvalds就决定开发一款能替代BitKeeper的分布式版本控制系统(即Git),在花费十天的时间后发布了Git的第一个…

VSCode提供了丰富的 API,可以借助编辑器扩展许多定制功能. 本次研发了一款名为 Search Method 的插件,在此记录整个研发过程. 一.准备工作 1)安装环境 首先是全局安装 yo 和 generator-code 两个库,我本地全局安装了 cnpm,所以用它来安装. npm install yo generator-code -g 然后使用 yo 命令初始化插件项目. yo code 回答些问题,但如果在回答 Initialize a git repository 时选择 ye…

前端开发中,不可避免的要和服务器端进行联调,少了fiddler这个利器可不行. 由于无线开发需要配置UA,我使用chrome进行访问,但是今儿一早过来,发现fiddler无法抓取chrome的请求了. 想想昨天对chrome进行的操作,我觉得问题应该出在代理的身上. 实际上fiddler是可以抓chrome的请求的.由于我的chrome安装了代理管理的插件SwitchySharp,无论选择直接连接还是选择使用代理连接,插件都会屏蔽fiddler的设置.fiddler会自动给浏览器设置一个代理12…

转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是100多kb: 2.兼容IE6+,符合天朝市场需求: 3.效率更高,跑起来比angular和knockout都要更快,在移动端上该优势会更大(avalon有移动端专版的avalon.modern.js).关于其性能…

这是开通博客的第一篇随笔,好鸡冻哈哈o_O 首先是下载安装,我安装的是最新的v4.6.2.0版本,大家在百度上搜fidddler4在百度软件中心普通下载就可以了.或者直接用这个连接:http://dlsw.baidu.com/sw-search-sp/soft/47/10963/fiddler4_4.6.2.0_setup.1453708442.exe 下载完双击一步步安装完就OK了. 本想写详细些,写到这就写不下去了,我还是简单点吧, 一.关于fiddler 和其 AutoResponser功…

本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Speed up! 提速你的网站访问速度[压缩JS与CSS]>.随着学习的深入,发现前端的还有许多东西需要整合,纯手工劳动无疑降低了开发效率.这四天的工作,真是把这两年所学习到的知识综合应用了一番: 软实力层面包括:使用Photoshop+Bootstrap3+Grid System 设计页面UI图: 工具…

目录结构 一.Sitespeed.io概述 1.Sitespeed.io简介 2.Sitespeed.io使用场景 二.Sitespeed.io的安装和使用 1.安装Sitespeed.io 2.连接Docker,驱动浏览器进行Web性能测试 1)连接Docker 2)驱动浏览器进行测试 3)测试报告查看 三.Sitespeed.io测试原理描述 一.Sitespeed.io概述 1.Sitespeed.io简介 Sitespeed.io:是一款开源的Web性能测试工具,用来衡量Web网站的综合…

  而今前端开发经常与cmd打交道,如使用个npm什么的,如果老是在ide和cmd之间切换显得比较繁琐,众多前端利器中我最喜欢的就是webstorm,而webstorm中就可以直接使用cmd,如图1,点击右下角的图标就会出来,这样子我们只需要一个界面就能解决很多问题了...但是现在问题来了,老是使用鼠标点击开发效率还是很低,嗯没错,配置一个快捷键.   webstorm设置快捷键在File目录下的Keymap子菜单,这个菜单有一个功能很好用,在右面的搜索框中我们除了可以使用一些功能的名字去搜索该…

背景    由于某宝最近升级,导致朋友买的刷单软件不能用了:在又付过钱之后,那个刷单软件供应商竟然捐款跑路了...于是,朋友委托我做一个功能一样的软件.功能    他给我描述的软件功能,是这个样子的:在网页登陆我的某宝之后,在[已买到的宝贝]页面,有待付款.待发货.待收货.待评价数量,软件可以随意修改这些数据:页面下边还有交易单,软件还可以隐藏指定的单据...然后他把之前买的软件发给我,让我研究研究...分析    按照他的描述,我概括之后,软件的功能就是修改网页数据.我先用Reflector打…

Javascript之旅(一) 一.基础知识 基本语法 变量 数据类型 字符串 数组 对象 条件判断 循环 Map和Set iterable 为什么要学习JavaScript JavaScript 是web 开发人员必须学习的 3 门语言中的一门: HTML 定义了网页的内容(人体) CSS 描述了网页的布局(衣服) JavaScript 网页的行为(动作) 一个合格的开发人员应该精通JavaScript,不要被Web时代所淘汰. 什么是JavaScript? JavaScript是世界上最流行…

sublime text是前端利器,为了方便,我们把它加入到win7系统的右键菜单(xp不支持) 保存为bat文件,放入sublimetext安装文件夹与sublime_text同级,双击执行即可. 能打开带空格文件夹下的文件. 注意:这个文件最好是复制并用记事本保存,也可以直接下载下面的 sublime tool.bat . 支持文件夹右键: @Echo Off Title SublimeText 右键菜单维护 Pushd %~dp0 If "%PROCESSOR_ARCHITECTURE%&…

最近在研究前端语言,想起可以使用AptanaStudio这个前端利器,没想到安装时却遇到波折.先从网上下载了Aptana版本 3.6.0 64bit问题1 安装进度缓慢,第一次安装时,显示downloadfiles 类似语句,进度条一直停滞,并在约10分钟左右,连续弹出两个MessageBox,分别是关于 git和node.js的,我估计是需要这两个工具,但国外服务器延迟大,导致下载失败,遂手动安装,依次安装后,问题解决.问题2 安装好以后打不开.双击图标,竟然打不开,郁闷.提示  failed…