AlloyDesigner:http://alloyteam.github.io/AlloyDesigner/ 介绍:AlloyDesigner是腾讯开发的一款工具,其在页面构建过程中,直接嵌入开发的Web页面中运行,帮助我们精准.高效的构建Web页面的UI,配合浏览器的一系列配置,将Developer Tools所修改代码自动保存入开发环境中,极大的提高工作效率. 安装方式参考官网,推荐使用内嵌收藏栏的方式使用. 环境要求: Chrome V31+(正式版) 本地服务器开发 本次教程的环境:…

http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向大家推荐一些优秀,且被广为用之的前端开发工具.下面主要为大家 推荐的是辅助开发工具和网页调试工具. 1.前端开发必备工具之辅助开发工具篇 在这里推荐一些前端开发中可以是你提高开发效率的小工具,既小巧又方便: 一.截图,取色,量尺寸,屏幕录制工具 FastStone Capture 主要用途:截图,取…

Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持中文,下载下来之后是英文,只需要在Debug中设置语言就可以使用熟悉的原生中文语言. 官网下载地址 http://brackets.io/…

曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs 写的一个前端构建工具,他可以对sass.js.html.coffee等进行编译,并且提供了很多的插件,稍后会为大家介绍. windows上的安装方法: 1.下载node-v0.10.29-x64.msi 提取码:kj9b并安装 2.运行cmd,在全局环境下安装gulp npm install -g…

俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方 便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可以胜任,但我们还是从开发效率和编码体验上面谈谈. Visual Stuio  如果你用windows,重量级的Visual Stuio 2013虽然很庞大,对硬件要求比较高,但是用起来绝对方便,比如智能提示.代码格式化,尤其是配合一些拓展插件.界面清爽,项目管理方便,入手简单. Sublime  轻量级的话,…

随着前端开发效果越来越丰富,前端的结构也越来越复杂,这个时候就需要一个工具来进行管理,可以帮你做语法校验,文件拼接,代码压缩,文件清理等等琐事,Grunt就是这么一个不错的工具. 安装并不复杂,只要先安装nodejs和npm即可,这里介绍Ubuntu上的安装过程,不过Windows平台更加简单,去nodejs的官网下载一个稳定版本安装一下就完事了. sudo apt install nodejs npm //安装nodejs,npm sudo npm install -g grunt-cli /…

Dawn 取「黎明.破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源.它通过pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作,简化并统一了开发人员的日常构建与开发相关的工作.   特点 采用中间件技术,封装常用功能,易于扩展,方便重用 支持 pipeline 让多个 task 协同完成构建任务 简单.一致的命令行接口,易于开发人员使用 支持基于「中心服务」管理中间件和工程模板 支持搭建私有中心服务,并统一下发构建规则,易于团队…

http://www.gbin1.com/technology/javautilities/20120806-resource-for-front-end-developer/ 冒泡样式 http://cssarrowplease.com/…

DOClever 不仅集成了文档编写,团队协作,接口运行,mock 数据等功能,还有两个功能是让我们团队大大的提高工作效率的.一个是接口的自动化生成,可以根据接口数据自动生成文档信息,还有一个便是本文分享的重点,接口的自动化测试! 传统的接口测试往往是接口一个个运行,观察返回数据是否显示正确,然后再用这个接口的出参手动的填入下一个接口的入参,这样的测试流程不仅很繁琐,效率低下,遇到业务场景比较复杂的很容易发生错误.所以我们需要一个自动化测试的解决方案,可以用最少的代价做最有效率的事情. 以 DO…

参看博客:[https://segmentfault.com/a/1190000002971135]…

前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题.计算问题.安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用. 前端技术的更新日新月异:前端框架的技术选型百家争鸣:视觉审美的潮流不断更替:可视化效果酷炫无比:用户的运营体系逐渐精细化:适老化.无障碍化.青少年人群的诉求浮出水面:智能设备的升级和适配无穷无尽.所有的这一切,对前端…

1.前端开发前期相关工具 photoshop:主要学习运用与前端相关工具,了解UI与前端的关联.    axure:原型设计,通过设计原型了解网页基本结构,结合ps对UI有更好的理解.    webstorm:前端开发主流工具,需要熟练掌握,多加练习. 2.各工具的使用 photshop:比较重要的抠图(套索,快速选择,*魔棒,*钢笔等).切图(参考线)需要熟练掌握.    axure:对网页结构和排版有比较精确的认识,运用各元件还原网页(*动态面板).    webstorm:进入代码部分,通…

自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里打滚了两年的文艺小码农来说,也有自己的一些体会,今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境,本人技术有限,有问题和意见请私下聊,勿喷: 首先安装Node.js,至于怎么安装的话 ,自行度娘.安装完成之后在命令行里面输入下面两个命令,如果输出了版本号的话(这个是我自己电脑上的版本…

自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里打滚了两年的文艺小码农来说,也有自己的一些体会,今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境,本人技术有限,有问题和意见请私下聊,勿喷: 首先安装Node.js,至于怎么安装的话 ,自行度娘.安装完成之后在命令行里面输入下面两个命令,如果输出了版本号的话(这个是我自己电脑上的版本…

前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要调试页面,主要html.css调试和js调试,这里整理一些工具: 三.firefox网页调试插件 1.firefox插件Firebug 主要用于html.css的调试和js调试:推荐指数: 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求.要写出漂亮的HTML代码:要编写精致的C…

[20160105更新:可以用iPhone6分辨率为视觉稿尺寸啦] 又是一年的520网络情人节,深圳这边却下了大雨,这雨只能是单身汉的泪,而对于我来说这一天具有特别的意义,一来怀念父亲,二来对我这种结婚人士来说还可勉强表达对老婆的爱,so,本文的图片宽均以520像素来设计. 回到主题,在微信朋友圈经常看到的H5页面(滑屏页面),除了炫酷的动画效果之外,细心的你会发现有些H5页面在不同的移动设备上适配效果良好,页面的元素适配你的设备屏幕,并且展示完整的信息,如下图,页面在iPhone 6和iPho…

一.Retina显示屏简介 retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个. retina显示屏只是高清显示屏的一种 随着苹果的 retina显示屏推出以来,很多厂商也开始推出自己的高清显示屏,如三星手机.魅族手机.小米电视机等,而目前市场的移动设备大都是高清显示屏了,其实它们的显示原理都是来自苹果的 retina显示屏. 如小米3的高清显示屏,5英尺的屏幕下分辨率高达1920*10…

web前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联网时代不断发展,掌握了这些新技术.新技能,在职场的竞争力必然会翻倍提升. 前端开发 一.零基础学web前端开发要怎么去学? 首先要学习的就是基础知识:HTML.CSS和JavaScript.HTML是内容,CSS是表现,JavaScript是行为.前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相…

持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue基本指令 ] 第3章 Vue.js高效前端开发 • [ 三.Vue列表渲染 ] 第4章 Vue.js高效前端开发 • [ 四.Vue组件 ] 第5章 Vue.js高效前端开发 • [ 五.Ant Design of Vue框架基础 ] 第6章 Vue.js高效前端开发 • [ 六.Ant Desig…

全部章节 >>>> 文章目录 一.Vue模板语法 1.插值 2.表达式 3.指令概述 4.实践练习 二.Vue绑定类样式和内联样式 1.Vue绑定类样式 2.Vue绑定内联样式 3.实践练习 三.条件渲染指令 1.v-if和v-else 2.v-show 3.实践练习 四.事件绑定 1.v-on指令 2.事件修饰符 3.Vue事件绑定的优点 4.实践练习 总结: 一.Vue模板语法 1.插值 文本插值是最基本的形式,使用双大括号(Mustache语法) {{}},代码如下所示: &…

一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是"初级"前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅.时势造就了一批技能薄弱但备受追捧的"弄潮者",这在很大程度上影响我们对"技术本质"的洞察力,多…

=========================================================================== 原文章: http://kb.cnblogs.com/page/159704/ =========================================================================== 一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通…

20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是“初级”前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅…

移动端浏览器现状 视口 meta视口标签 二倍图 移动端主流方案 移动端技术解决方案 移动端常见布局 1.流式布局(百分比布局) 2.flex布局 3.rem适配布局 1)rem单位 2)媒体查询 3)less 4)rem 适配方案 5)案例1 6)案例2       移动端浏览器现状: 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,兼容移动端主浏览器,处理Webkit内核浏览器即可. 移动端屏幕尺寸 参考:https://www.material…

如今"鄙视链"体现在生活的方方面面,各行各业都有默认一致的鄙视链.IT圈子因为开发语言多样.工程师岗位种类多.技术框架多,也有自己圈子内的鄙视链.按照开发工程师的岗位形成的鄙视链是: 架构师>后端研发>前端研发>产品经理>运营>UI设计师 架构师认为:没有我,哪有他们,架构是一切的根基 后端开发认为:前端只会"画图" 前端开发认为:产品经理"嘴上功夫" 产品经理认为:我的产品已经很厉害了,还需要用力运营吗? 运营师认…

web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责交互设计的,需要和程序猿进行交互设计的配合. web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术,ajax和jquery以及简单的后端程序等. 后端的话可供开发的语言有 asp.php.jsp..NET 这些后端开发语言的话搭建环境都不一样,具体如果你想学的话…

. 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFormat插件. SideBarEnhancements插件. railingSpaces插件. Tag插件. Terminal插件. SublimeCodeIntel插件. CssComb插件. Autoprefixer插件. 未完待续. 留言评论 返回顶部 前言:关于Sublime Text 3 (…

原文 :http://uecss.com/mobile-platform-web-front-end-development-skills-summary.html 开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP:一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者. WebApp与Native App有何区别呢? Native App: 开发成本非常大一般使用的开发语言为JAVA.C++.Objective-C 更新体验较差.同时也比较麻烦每…

本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的 惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程师,如果您不是,可能您会遇见许多不理解或听不懂的专业术语或前端技术(包括 WEB.Mobile).但是…

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><meta content="yes" name="apple-mobile-web-…