Young87

SmartCat's Blog

So happy to code my life!

游戏开发交流QQ群号60398951

当前位置：首页 >跨站数据测试

前端系列教程之常用网页导航

日期： 2018-12-09    分类： 跨站数据测试 293次阅读

大前端工具集 Awesome

这个项目的定位是 大前端程序猿的百宝箱。主要针对 前端方向和 Node 方向；主要内容是国内外优秀的 库、工具、套路、设计、交互，或关注的 技术博客、技术组织、技术公众号等等，反正用 瑞士军刀 来总结这篇文章再合适不过了。

对于列在这里的几乎所有项目，我都有去实践与了解，所以我会尽量给出中肯的建议和理解，也希望大家能多关注我的评语:)

感谢和期待大家的 PR，我会及时回复的~

目录

正文

技术博客/技术组织

虽混过俩家外企，但劳资技能树中“英文”这项还是灰色的…所以俺关注和收藏的站点主要以中文为主。

分享一下最近自己的体会：学习是最能缓解焦虑的。by 20180610_16:46:18

  • 极客时间 - 知识付费。较热门的方向都有非常干货的课程，目前大多数的课程不太适合小白，但是非常适合有经验的程序员进阶。对我个人帮忙比较大的两个大专栏：技术领导力 300讲、左耳听风；除此之外我还比较关注 微服务相关、区块链相关的专栏。
  • MDN - 无数的资源再等着你探索，追标准和新特性肯定得重点关注的网站。PS：偶尔需要翻墙。
  • Awesomes.cn - 国人维护的前端资源库，深度对接到 Github，分类和展现清晰，值得收藏
  • 如何跟上前端开发的最新前沿 - RT，不解释
  • 慕课 - 大量的在线计算机课程。 虽然初、中级居多，但是不乏有巨作值得细细品尝
  • 美团技术团队 - 新美大的技术口碑这些年做的挺好，尤其在 高可用 方面，推荐关注。
  • 阮一峰 - 关注多年，拜读其 ES6 系列。虽网传靠写书进鸟阿里，但博客内容确实够丰富
  • W3Cplus - 大漠(《图解 CSS3》作者)在国内的影响力杠杠的，Sass专家级
  • 淘宝前端团队 - 内容涵盖 Web和 Node，要深度有深度，要广度有广度
  • 奇舞团博客 - 坚持是最宝贵的，别人的奇舞周刊早已经过百期了
  • 大搜车前端 - 前端网红 小芋头君 所在的团队，文章质量高，尤其是 Node 方向的
  • 百度 FEX - 代表作 FIS、UEditor、WebUploader、KityMinder
  • 腾讯全端 AlloyTeam - 腾讯 Web 前端团队，博客真的有点丑…
  • 粉丝日志 for 张丹 - 大爱作者写的 Node系列
  • 张鑫旭 - 成名多年的、高产的前端大湿，CSS猛人

技术公众号

博客搭建

  • Hexo - 快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来。Github地址:Hexo
  • Jekyll - 将纯文本转化为静态网站和博客。由于环境依赖的问题，所以安装起来可能稍费劲那么一点。Github地址：Jekyll
  • GithubPages - 免费的静态站点。配合着 Hexo或 Jekyll的模板，分分搭建出一套炫酷的个人博客
  • Tumblr - 轻博客的祖师爷，各种各样的主题感觉不错
  • Wordpress - 这玩意古老到都不想介绍

使用 Hexo/Jekyll + GitPage，前端搭建静态博客那是相当 easy。用 Markdown写文章做记录，再 push到 Github上，分分钟高大上有木有

再推荐几款视觉效果极佳的 Hexo主题，且在 Github上的 star都很不错：

不能偏心，所以也推荐几款 Jekyll的好主题：

  • So Simple - 如果你看过俺的博客，对这个主题就肯定不会陌生啦（2018年已弃用）
  • HPSTR - 当初 fefork 差点选这个主题:)
  • beautiful

HTML

纯 HTML相关其实没有好玩的项目，所以这儿展示的内容主要都是一些模板，而且以下列出来的都是免费的，方便拿取搭架后台或者博客

  • HEAD - 最全的 <head>列表，真心佩服这种偏执的整理能力
  • blur-admin - 视觉冲击极强的管理后台，各种动画效果。PS：因为团队有ant-design的使用经验，感觉使用起来不是很顺畅，这套后台又是基于AngularJS，所以再三权限之后还是没实际使用，劳资还是别给团队添乱了，囧…
  • AdminLTE - 很小清新的后台模板，每次看preview 页面都觉得很有视觉冲击
  • gentelella - 刚用这个搭建了我司内部用的的数据平台，效果喜人。模板实现的功能比较全，比如登录、注册甚至各种 widget，所以最终交付的时候，自己几乎没写几行CSS。
  • material-design-lite - Star数超过2W的开源模板项目，包含了多套简洁的 templates，可以用于博客、后台或者企业首页。

CSS

  • MetroUI - 好看好用，重点是样式特别、个性
  • Font-Awesome - 图标字体库。相类似的库有不少，大厂都喜欢造轮子嘛:)
  • LoadersCSS - 用 CSS 技术实现 loading 动画； 补一句，想熟悉、理解 keyframes、animation、transform、transition的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)
  • text-spinners - 又是一款 spinners 效果的库，用来做 loading 正合适。
  • WeUI - 一套同微信原生视觉体验一致的基础样式库 为微信 Web 开发量身设计，令用户的使用感知更加统一
  • PostCSS - 最近才知道大名鼎鼎Autoprefixer是其插件 推荐大漠的文章《PostCSS深入学习》，有关 PostCSS 不是什么？PostCSS 是什么？PostCSS 可以做什么等等问题，文章里面有答案
  • CSSgram - 图片滤镜库，终于可以用 CSS 在 web 上实现滤镜的效果鸟 IE不支持，不过新的移动设备支持没问题 Can I Use
  • HINT.css - 一款非常小巧的提示框效果
  • Balloon.css - 同上，一款非常小巧的提示框效果
  • Hover.css - 很多鼠标 Hover 态的效果，可以给产品学习一下:)
  • Cursor - 记录各浏览器对Cursor的支持情况
  • csscss - 用于检查 CSS 代码冗余
  • purecss - 小巧的响应式 CSS 库，Yahoo!出品
  • hamburgers - 简单的动画库，让 Click(or Tap) 变得美妙
  • cssmatic - 一个帮忙调试CSS效果的工具

浏览端 JS

  • requirejs - JS模块化是构建复杂项目的第一步 中文学习文档奉上：RequireJS 中文网
  • three.js - JavaScript 3D 库。超多的 examples 等着你去发现，你只需要关注内存和风扇就行了
  • ECharts - 好用，最关键的是支持的图表展示非常之多，强烈推荐
  • Swiper - 强大的 Slider 库 其实这类效果库非常多，但文档能那么专业的就很少鸟
  • babel - ES6用起来。这个插件可以让我们用新的 标准/提案 写 JavaScript代码，然后再向下 转换编译，最终生成随处可用的 JavaScript代码。中文文档奉上《babel-handbook》
  • dvajs - 基于 Redux 的一层封装，推荐的原因是因为阿里同学写文档都比较大而全，还可以顺道学习周边知识:)
  • fullPage - 非常好用的全屏滑动库，看 Demo 就明白
  • PhotoSwipe - 偶常用的 js 库 官网上有这么一句很关键、重要"no dependencies"
  • Vuejs - 比较喜欢其作者… 所以劳资正在看源码学习学习
  • ScrollReveal - star 10000+ 轻量级 JS 库。作用为当元素进入视窗的时候展示它们，README 中有示例，上手非常简单。官网体验地址：ScrollReveal
  • vue-admin - 基于 Vue.js 开发的后台，示例地址：demo
  • mixitup 一款基于 jQuery的 排序/过滤 的JS库，最关键是有着美妙的动画效果
  • favico.js - 动态改变浏览器标签栏中的网站图标，非常好玩
  • ant.design - 蚂蚁金服搞的良心项目，文档美好的令人发指 样式优雅，强烈推荐内部系统尝试此库
  • highlightjs - 代码高亮库，支持非常多的语言
  • daterangepicker - 时间选择插件的不二选择，基于 Bootstrap和 Moment.js
  • nodePPT - 前同事三水的大作，好用必须得支持:) 用 Markdown 写 PPT，还可以 HTML 混排，上手飞快
  • excellentexport - 纯前端的 Excel 导出，非常之方便
  • Sortable - 拖拽神器，用了就知道
  • toastr - 信息提示的库，推荐的原因是卖相好、功能强大 demo
  • peity.js - jQuery的图表插件，特别cute，感觉萌萌哒 将HTML转换成一个小的<svg>饼图、圆环图、折线图等等
  • emojify.js - 能够将emoji关键词转换为emoji图片的JS插件 可以快速的为你的网站提供emoji表情支持
  • html2canvas+canvas2Image - 看这两库的名称就明白是做什么的。使用场景就是“动态生成的HTML可以长按保存为图片”。
  • Push.js - 基于 Notification API实现的桌面效果的提示栏。浏览器支持情况不错，如http://caniuse.com/#search=Notification
  • Highcharts - Highcharts 中文网，又是一个图表库 确实功能强大，但是觉得不好看… PS：官网就做的不好看，脏脏的赶脚
  • NProgress - 使页面加载时有更好的loading效果
  • Noticejs - 一个简单的通知库，木有依赖
  • onepage-scroll - 依赖 jQuery 的单页滚动库，和 fullPage 类似
  • videojs - 当下视频需求都用上<video>鸟 样式和交互统一的问题交给 videojs 搞定:)
  • clipboard - 仅 2KB 大小，搞定剪贴板功能，屌不屌~ 但是，Safari 不支持…
  • impress.js - 用来写 PPT 不错，偶也曾为其写过一篇impress.js 初体验
  • Cropper - 国人开发的图片裁剪库

Swiper/PhotoSwipe/fullPage有这仨库，微信里常见的 H5 页完全不是问题哒

Project Build

  • pm2 - 是一个带有负载均衡功能的 Node 应用的进程管理器； 是 Forever 的进阶库，想了解的可以看这篇文章《拥抱PM2》
  • Webpack - 项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。推荐篇教程：webpack 教程资源收集
  • Gulp - Gulp 是基于 Node 实现 Web 前端自动化开发的工具。 俺总结了篇《gulp使用小结》，推荐您阅读:)
  • Bower - 前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本…卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter 推荐篇 Bower 的中文文章：《bower 解决 js 的依赖管理》
  • Grunt - 和 Gulp 类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》 英盲又想看文档，可以去Grunt 中文网
  • FIS - 度厂出品的前端构建工具 文档清晰，功能强大，推荐了解和使用
  • Gitlab CI - 一套基于Gitlab的持续集成服务
  • Travis CI - 为 Github 上的项目打造的 CI 服务。记得 2013年 开始陆续看到文章介绍，刚在官网上看到，目前已经有 30W 开源项目和 23.5W 用户在使用。大概看了一下 getting started，简单几步就可以实现开源项目的持续集成。

Gulp + Webpack 的使用__套路__参考: learning-gulp

Gulp 资料收集：use-gulp

推荐篇与 Webpack 相关的文章《CSS Modules》

Webpack 用起来吼吼：webpack-howto

Node Package

作为一名大前端甚至是多端，Node绝逼是必备的一块

有关 Node的学习资料，请访问 Node 学习资料

这里介绍些有特色且前端有必要知道的包
  • anywhere - 随时随地将你的当前目录变成一个静态文件服务器的根目录
  • supervisor - 监控 Node 代码，自动重启。 A supervisor program for running nodejs programs
  • nodemon - 监控 Node 代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
  • pm2 - 是一个带有负载均衡功能的 Node 应用的进程管理器； 是 Forever 的进阶库，想了解的可以看这篇文章《拥抱PM2》
  • cz-cli - 刚用上的一个 git ci工具，让我们的项目提交代码更规范、更有套路。打算写篇文章分享下，文章正在准备中，写完后会补地址。
  • async - 一个流程控制工具包，提供直接而强大的异步功能
  • optimist - 当需要处理 CLI中的 argv时(即命令行传参)，用它就行了
  • lodash - JS 工具库 Underscore.js的一个 fork 发展而来
  • socket.io - 预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用
  • Inquirer.js - 实现的效果比 Commander 简单、有趣，贴个 GIF供大家参考：loc
  • Commander - 用 Commander.js 可以方便的创建基于 Node 的命令行工具，比如 vue-cli 这类，瞬间觉得自己又高大上了呢~
  • Mongoose - 让 NodeJS 更容易操作 Mongodb 数据库； 附上一篇Mongoose 学习参考文档
  • CNPM - 淘宝 NPM 镜像，提供了 NPM 同步的服务 当然可不仅仅这样，利用 CNPM 可以打造__企业/个人__私有的 NPM 服务 推荐篇搭建私有NPM的文章：《CNPM搭建私有的NPM服务》
  • koa - 玩 Node 都知道 express，但使用 koa 的就少很多，门槛比 Ex 稍高 通过 generator 避免繁琐的回调函数嵌套，强烈推崇 官方的文章教程
  • Shipit - 一个强大的自动化部署工具。 shipit 很多地方非常类似 gulp，他们的核心都是任务系统。
  • node-inspector - Node 调试工具，使用起来跟 Chrome 的 JS 调试器很相似
  • winston - Node 服务最流行的日志库之一
  • co - 用 generator 写法让异步代码同步
  • thenify-all - 把异步的方法变成 Promise 的 Promisifies all the selected functions in an object
  • PhantomJS - 一般用来做抓取截图和无界面测试 也可以用来操作 DOM 和网络监测，很好玩的库 Quick Start
  • ava - 偶是应TJ大神推荐而得之的 ava未来的测试运行器
  • Mocha - Node 里最常用的测试框架； 它支持多种 Node 的 Assert libs； 同时支持异步和同步的测试，同时支持多种方式导出结果； 也支持直接在 browser 上跑 JS 代码测试。
  • koa-validate - koa的校验库 可以非常方便的对 queryString或 postBody的信息进行验证
  • line-reader - 基于steam的按行读文件，偶处理日志时用哒 要不实现一个按行读文件，又得 steam、 又得 chunk，还是比较麻烦的
  • binary 作者是大神 substack，对应的处理 PHP/Python中的 unpack方法。英文解释：Unpack multibyte binary values from buffers and streams.
  • everyauth - OAuth 的集成解决方案
  • shelljs - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单
  • hashids - 看名称就懂，给 userid 加解密用的
  • node-pool - 让 Node有连接池的概念
  • colors - 花俏的小工具 让打印console.log时有更好的展示样式
  • n - 控制Node的版本，想升级一行代码搞定

supervisor和 nodemon这俩都是监控 Node 代码，使得每次修改代码后会，开发 Node 程序必备

以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)

Node Project

暂无

精选阅读

前端技术

  • 2015D2前端论坛 - Node方向非常值得看，有干货，相信东哥推荐哈
  • 前端开发规范手册 - 此手册主要实现的目标：代码一致性和最佳实践
  • 《babel-handbook》 - 可以用新的规范(如 ES6)写代码，经过 babel编译后生成没有兼容问题的代码
  • JavaScript Standard Style - 强烈推荐，尤其适合技术 Leader。优秀的 JS 编码规范是好前端团队的开始
  • ECMAScript 6入门 - 阮一峰大神所著，一本开源的JS教程 全面介绍 ECMAScript 6新引入的语法特性
  • ReactNative 中文版 - 翻译自官方的中文文档
  • ReactWebpackCookBook - 此书会引导读者是进入React和Webpack的世界。 俩都是非常前沿的技术，同时使用会更有趣。
  • Sass指南 - Sass指南主要作用是用来帮助大家更好的书写 Sass和维护 Sass。
  • ReactNative 学习指南 - 新玩意层出不穷… 对于能持续学习的童鞋，这是个美好的时代
  • HTML/CSS 编码规范 - 编写灵活、稳定、高质量的HTML和CSS代码的规范
  • 移动前端入门 - 入门价值高，移动方向常见问题的较好总结
  • GulpBook - Gulp 是基于 Node 实现 Web 前端自动化开发的工具

Node 学习资料

前端面试

标签：学习笔记 前端 框架 工具 教程

上一篇： 基于times33算法的hash数据库

下一篇： 关于启动dbeaver报错的解决方案

精华推荐