首页 > 代码库 > 个人Web工具箱&资源整理(1)

个人Web工具箱&资源整理(1)

<style></style>

很久就想把使用的工具及收藏的资源整理一番;一是为了传达博客社区的理念:资源共享,而是方便自己及团队快速获取。

学习资源:

首推两个入门级在线参考网站。

       1 w3c school.

       2 Runoob.com(菜鸟教程)。

HTML5:标记语言,是HTML和XHTML的最新版本

            HTML5 Outliner HTML5在线生成。

 

模板:

      jade:Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用。

      jade API:运行在Nodejs上的模板工具。

    

CSS: CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS的最新版本。

  •    CSS3:
  •    Bootstrap CSS样式。

 

CSS 预处理器:

              Less:  Lesscss是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

  •            Less-css中文网:LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
  •            Less:在线编辑器:LESS2CSS

技术分享

             Sass:  Sass是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

 

JavaScriptJavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.

  •       文档(document):英文文档。
  •       Javascript秘密花园: 这篇文章的作者是两位 Stack Overflow 用户, 伊沃·韦特泽尔 Ivo Wetzel(写作) 和 张易江 Zhang Yi Jiang(设计)。
  •       Javascript小插件下载。
  •       JavaScript与HTML代码美化平台:JSbeautifier

Javascript库:

  • jQuery:快y速,小巧,功能丰富的JavaScript库。
    • jQuery: 最火的前端开发框架

      •         C在线工具: jQuery插件在线演示。
      •         jQuery++:jQuery插件。
      •        jQuery UI:jQuery ui库。
      •          jQuery Mobile:支持移动端的开发框架。
      •         jQuery API :jQuery API中文文档。
      •     jQuery在线手册:
      •     jQuery视频教程:jQuery入门级教程。
      •          基于jQuery,非常好用的日期选择插件 :Pickadate.js
  • zepto :Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库, 它与jquery 有着类似的api。 如果你会用 jquery,那么你也会用 zepto。
  • Three.js:
  • Ember.js:
  • BackBoneJS:为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。
  • D3.js:D3是基于数据的文档操作javascript库,D3能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。
  • React::Facebook的Javascript库为构建用户界面而开发。
  • jQuery UIjQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。
  • jQuery Mobile:基于HTML5用于创建移动 web 应用程序的框架。
  • Underscore.js:JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。
  • Moment.js:一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期。
  • Lodash:一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。
  • Vue:Vue.js(读音 /vju?/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

 

Angularjs:

 

Node.js:  Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

  •           Nodejs入门 :菜鸟教程。
  •           Express:
  •           Express API :Express 4.x 中文API。

SQL:  结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询、更新和管理关系数据库系统;同时也是数据库脚本文件的扩展名。

 

前端框架:通俗的前端由HTML,CSS,JavasScript等构成。当然为了适应Web开发日益增长的需求,应运而生许多独立的前端框架,例如Bootstrap。一个优秀的框架可以为前端开发人员在开发过程中增益,减小开发压力

  • Bootstrap:    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

    •    Bootstrap中文文档:Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
    •    在线编辑器:

                              1 :Bootply :被称为是Bootstrap的活动平台。它不但是一个Bootstrap的编辑器和生成器,同时也拥有非常广泛的代码库。该编辑器可以让你拖拽Bootstrap组件并可以编辑你自己的代码。

                             2:LayoutIt: 是一个简单但是高效的Bootstrap界面生成器,它可以让你的前端开发更简单。你可以从零开始或者使用基本的模板开始。

                             3:Brix :是一个强大而且时尚的在线Bootstrap生成器,它能够帮助你快速的制作响应式界面和网站。

                            4:Divshot: 不仅仅是一款可视化的Bootstrap编辑器,同时也为开发者提供一个应用级托管环境。

  • Foundation: 迄今为止最好的响应式前端框架,更快、更轻、更多功能、更灵活、更强大!
  • Semantic UI:Semantic UI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
  • uikit:UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式界面。

 

数据库:

  • MySQL:MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。
  • MongoDB:MongoDB 教程 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。

 

素材下载:

  •  17素材:
  •  CSS 样式模板。

 

 Web APP:

      Ionic(ionicframework):一款接近原生的Html5移动App开发框架 , 基于angularjs与Coedova实现APP开发

    Ionic     (官网):IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从 web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。

    

任务批处理工具/包管理器:

任务批量处理工具可将你的工作流程全自动化.例如你可以创建一个任务,使用JavaScript语言编写的工具来进行自动化的处理。 然后打包,这样会大大提高开发效率。 包管理器它能跟踪所有已安装的软件、自动化进行安装和删除应用程序、以及确保所有软件都保持更新以获得最新的增强功能和错误修复。

  • Grunt:    Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。
  • Glup:     Gulp.js 是基于 Node.js 构建的一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
  • npm:     NPM(node package manager),通常称为node包管理器。顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。
  • Bower:   Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
  • Webpack:   Webpack一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种功能,并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

 

开发工具:

  • Atom:Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器在代码编辑器、文本编辑器领域,有着不少的「神器」级的产品。
  • Sublime Text:Sublime Text 是一个代码编辑器(Sublime Text 2和3是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。
  • Notepad++:Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能。
  • Visual Studio Code :微软推出,一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。
  • TextMate:TextMate是Mac下的著名的文本编辑器软件,与BBedit一起并称苹果机上的emacs和vim。
  • Coda 2:  OS X下快速,简洁,功能强大的编辑器【需要付费】.
  • WebStorm:jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
  • Vim:Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。
  • Brackets:Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。
  • Emacs:著名的集成开发环境和文本编辑器。Emacs被公认为是最受专业程序员喜爱的代码编辑器之一。

 

icon图标:  在线透明icon图标生成工具 ICO。

  • Font Awesome:Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
  • IconMonster:免费,高质量, 庞大且资源不断增长的简洁的icon图标库。
  • IconFinder:Iconfinder提供美丽的图标,服务数以百万计的设计师,开发商和其他有创意的专业人员。
  • Fontello:一个目测有200+个图标(数量还在增加)的 Web-font 图标市场,对于广大设计师、前端开发者来说是很棒的资源。
  • 阿里妈妈矢量图标库 :Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中
  • iconpng: 图标下载。

 

调试器:

  •   firefox,
  •   Chrome调试器,
  •   nodejs运行环境。

 

代码托管:

         github

 

版本控制:

  •  git  Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
  • GitHub Client:有助于无缝连接GitHub和GitHub的企业的项目。
  • Coding:Coding 的代码托管功能除了基本的 Git 仓库以外,还有保护分支,分屏对比, Code Review 等高级功能。并且整合了 Pages 服务,质量管理,演示平台等开发工具,提升研发效率。

 

本地开发环境搭建:

根据您运行的是什么操作系统和计算机配置,有时候进行测试的时候就有可能需要搭建一个快速的本地开发环境。有很多将Apache,Nginx,MySQL和phpMyAdmin进行打包一体化的软件。这些软件很是方便我们来进行本地测试。

  • XAMPP:XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包。
  • MAMP PRO:MAMP Pro for mac是Mac OS平台搭建本地服务器环境的组合软件套装,包含 Macintosh、Apache、MySQL和PHP 四大开发环境。
  • WampServer:Wamp就是Windows Apache Mysql PHP集成安装环境,即在window下的apache、php和mysql的服务器软件。
  • Vagrant:Vagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境。它 使用Oracle的开源VirtualBox虚拟化系统,使用 Chef创建自动化虚拟环境。
  • Laragon:Laragon工具就是Laravel的一键安装工具吧,还集成了一整套wamp工具,除去Laravel安装外,它也是一款不错的wamp工具,干净简单,便捷迅速。Diff Checkers
  • Wnmp:WNMP是Windows下便捷,安全的Nginx+MariaDB+PHP开发环境环境集成套件包。

 

文本对比差异:

  • Diffchecker:Diffchecker 是一款非常好用的在线文本对比工具,能够高亮显示有差异的行和字符。Diffchecker 提供了文件上传对比功能,还可以选择对比的存储时间。
  • Beyond Compare:Beyond Compare是一套由Scooter Software推出的软件,主要用途是对比两个文件夹或者文件,并将差异以颜色标示。

 

代码共享:

  • JS Bin:JS Bin能够让你编辑和测试JavaScript和HTML代码。你还可以将编辑后的代码保存到本地,或将URL地址发给其他人,让其协助调试代码。JS HTML CSS 在线演示
  • JSfiddle:jsFiddle是一个在线的shell编辑器,通过流行的JS框架创建自定义的环境,以简化JS代码。可以用于测试示例代码。
  • codeshare:与其他开发者实时共享代码。
  • Dabblet:Dabblet是一个开源互动测试工具,用于测试CSS和HTML。Dabblet支持实时更新、匿名备份、嵌入网站、与他人共享或者存储到GitHub。

 

在线演示:

1:JS Bin

  如下图所示:(非常方便与别人共享代码,且能实时看效果,本人就非常喜欢)

技术分享

JS HTML CSS在线演示2 :Liveweave

   如下图(界面非常漂亮,简洁,强迫症一定爱不释手)

  技术分享

JS HTML CSS 在线演示3:Plunker

    如图所示:功能超级强大

技术分享

 

协助工具:

  • Slack:Slack 是聊天群组 + 大规模工具集成 + 文件整合 + 统一搜索。
  • Trello:Trello的目标是提供简洁清晰的团队协作工具。介绍如果将Trello用来建立自己的时间管理系统。
  • Glip:Glip:在线团队办公协作平台是一个类似于Slack网站的网络办公集合体,内置了邮箱、网盘、即时通讯应用、协作服务等,把所有和网络办公有关的服务和工具都整合在了一起。
  • Asana:Asana是一款团队任务管理软件 方便人们去制定和跟踪团队的项目任务的完成情况.
  • Jira:JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。

灵感创意:

  • CodePen:全球web前端开发人员的圣地!可以展示个人的创意和建立一个测试实例来解决bug。
  • Dribble:Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

 前端项目:

  •    托管在github上的项目1;
  •    托管在github上的项目2.

 博客发布:

  •    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。Markdown 十分轻量,学习成本也不高。

代码压缩和自动化:

  1.    Grunt
  2.    Gulp.

图片制作:

  •    PS软件(Photoshop CS6).
  •    在线PS:在线版本的简化PS。

图标制作:

心智图制作软件:

  •   在线1:Coggle
  •   在线2:Popplet
  •   中文版(活跃社区):MindManager

 云平台(托管在云端):

  •   Cloud9  : Nodejs 大型项目最佳(并且它与github合作,可以直接从github上clone到云端进行编写):
  •   Surge.sh  静态页面(个人最喜欢的平台推荐) :

 网站测速工具:网站的速度是用户体验关键因素。网站速度快与慢决定是否能更高的搜索引擎排名,更高的转换率,更低的跳出率,以及更好的整体用户体验和。值得高兴的是很多免费软件可以用于测试网站速度,帮助我们找出加载缓慢的问题,方便我们去解决。

  • Google PageSpeed Insights:PageSpeed Insights是一款可以分析网页速度瓶颈,让网页设计人员开发出速度更快的网站的谷歌浏览器插件。
  • Google Chrome DevTools:Chrome DevTools 是公认的优秀的前端调试工具,功能强大,使用起来有一定的学习门槛,
  • WebPageTest:WebPagetest是一款Web应用程序,它将一个URL以及一系列配置参数作为输入,并对那个URL运行性能测试。
  • Pingdom:pingdom全面的网站监测服务网站,可测速和ping跟踪路由,可以免费监测1个站点,最短1分钟监测一次。
  • GTmetrix:主要优点在于提供了丰富的详细的测量结果,并建议如何来优化网页中每个元素的,最重要的是会根据网站的具体情况,直接告诉你导致网站加载速度变慢的根源在哪里

 

web开发社区:当开发者在开发的过程中有遇到问题时,除了询问他人以外,还可以使用搜索引擎搜索。社区的重要性就显而易见了,大部分开发者会在开发社区分享他们经验,如何避过不必要踩的坑。

      (1 国内社区)

  • 谷歌开发者社区(GDG):开放 · 分享 · 创新
  • segmentfault:是中国领先的开发者技术社区。 为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。
  • 全栈社区:中国最大的全栈开发者社区,致力于打造一个问题解答,技术文章分享,全栈人员创业的服务平台,让开发更容易,让创业更简单.
  • github17: 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者.

     (2 国内社区)

  • Stack Overflow:Stack Overflow是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题,浏览问题,索引相关内容,在创建主页的时候使用简单的HTML。
  • Quora :开发者社区。
  • Front-end Front:在Front-end Front,前端开发者可以提出问题,分享有趣的链接,并展示他们的项目作品。
  • Hashnode:Hashnode是开发者讨论技术问题,分享解决方案,与世界各地的开发者共享资源的聚集地。
  • Refind:有着开发者, 黑客, 设计师收集和分享最好的资源的社区。
  • Google+ Web Developers Group:Web 开发者,Web设计师和Web开发.
  • Google+ Web Developers Group:Java, PHP, Ruby, JavaScript and Python 资源。
  • Facebook WordPress Front-end Developers Group:WordPress 前端开发者的分享社区,可以提问题,分享开发者的项目作品,还有讨论WP未来发展趋势。
  • LinkedIn Web Design and Development Professionals Group:与专业网页设计师,网页开发者共享Web开发资源
  • LinkedIn Web Site Development Group: 网站设计和开发。
  • LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
  • LinkedIn WordPress Developers Group: WordPress 开发. 使用WP来创建CMS和CMF.
  • Webdeveloper.com:帮助Web开发者和设计师学习使用HTML,java和javascript开发网站。
  • Sitepoint Forums: Web开发者论坛。
  • /r/perfmatters: 讨论关于 web 性能
  • /r/webdev: 关于Web开发和开发者的新闻

 

Web新闻聚焦:

  (1 国内)

  • 掘金:掘金是中国质量最高的技术分享社区,邀请稀土用户作为Co-Editor 来分享优质的技术干货,从前端到后端开发,从设计到产品,让每一个掘金用户都能挖掘到有价值的干货。
  • 开发者头条:一个以程序员为中心,基于学习和分享的开发者社区。你可以阅读头条新闻、分享技术文章、发布开源项目,订阅技术极客们创建的学习主题和关注编程牛人。
  • 极客头条:技术文章聚合站点,目测现在运营力度减弱。
  • 推酷:以技术为驱动,以聚合挖掘为核心,打造个性推荐和订阅,给你一站式的阅读。 更汇聚优质公开课和线下活动,让信息知识获取更便捷。

  (2 国外)

  • wdrl.info:精心挑选的Web开发相关资源,每星期进行整合报道。
  • Ycombinator news:专为提高英文阅读水平的平台。
  • webopsweekly.com: 每周进行报道关于网络运营,应用部署,网站性能和工具分享类的文章。
  • web tools weekly:专注于前端开发和网页设计工具分享。每一个问题都有一个简短的提示或教程,另外每周都会分享的各种应用程序、脚本、插件和其他有用的资源。

 

 

   

    一个免费而且高效的web应用托管平台:Firebase

    webAPP开发    Extjs  ,Sencha官网,实例地址:Sencha

    JavaScript优秀在线课程 Code School

 

    JavaScript在线debug,友好的提示及实时监测能提高编码的效率:JShint

    如图所示:

技术分享

  Stackoverflow社区 JavaScript很火的问答社区,基本我遇到问题在上面能得到帮助。

                     

  Strapdpwnjs 一款适合前端开发者的Markdown文本编辑器,多种主题可选,界面很漂亮。

  多说:前端一款很流行的评论系统,甚至不需要你管理。直接加上它给的几行代码,放在项目中,就能实现多功能评论了。其中个人设计时可以参考这里,搭建漂亮的评论区。

  静态网站生成器1 Static Site Generator  静态网站发布服务介绍

  静态网站生成器2 (github pages) Jekyll

  一名前端工程师的知识图谱是什么?(来自知乎社区的问答)

   大神写的 git入门教程。

   视频教程   百度云盘分享- 瓢城web俱乐部创始人李炎恢

   Web设计者和开发者必备的27个Chrome插件

   sublimeGit使用教程

  

  WakaTime : 一款实用的项目分析系统(程序员装逼系统),方便分析优化,管理你的所有项目,并能进行分享。

  如图(多个项目被同时监控):

 技术分享

 项目案例(grunt_less时间记录分析结果如图-主要用来装逼哒,程序员都不炫富,炫时间哒):

技术分享

Express 项目生成: 基于Nodejs快速生成一个项目。

 Mongoose:基于nodejs的数据库

视频教程:

  •             1 百度前端;
  •             2 51CTO
  •             3 极客
  •             4 麦子

 类似本文的前端开发工具库链接:1 github_JackTian

                                           2 github_foru17

在线工具开源集合: aTool

 

个人Web工具箱&资源整理(1)