前端资源收集整理

工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。

Github版本:Front-End Resource Collection

前端相关资源汇总

学习指导

精华文章

Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读!

听说2017你想写前端?:适合于已经度过了小白阶段,达到初级水平的前端开发者。留言区的干货也很多。

Web前端从入门菜鸟到实践老司机所需要的资料与指南合集

Growth: 全栈增长工程师指南

全栈增长工程师实战

知乎上前端开发领域有哪些值得推荐的问答?

2016-我的前端之路:工具化与工程化

前后端分离后的前端时代

前端学习

From Zero to Front-end Hero

前端网老姚浅谈:怎么学JavaScript?

学习前端我推荐这5本书

专治前端焦虑的学习方案

写给想成为前端工程师的同学们

写给初学前端工程师的一封信

当你一个人想做一个web项目的时候你该怎么做

前端资讯

小胡子哥 » 博客

Jerry Qu

人人网FED博客:有些讨论技术的文章写得很有分量。

Heero’s Blog:一些文章还是很有干货的。

网络原理

从输入 URL 到页面加载完成的过程中都发生了什么事情?:深入到了最底层,可以算非常完善的讲解了,但是不太适合小白们阅读,估计会一脸懵。

浏览器的工作原理:新式网络浏览器幕后揭秘

互联网协议入门(一) – 阮一峰

DNS 原理入门 – 阮一峰

理解IP,子网和CIDR标记法

语言基础

HTML

网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”?

CSS

CSS:haslayout知多少:解释IE的布局原理

前端精选文摘:BFC 神奇背后的原理

Perfect Full Page Background Image

移动前端开发之viewport的深入理解

cssreference.io

Flex 布局

Flex 布局教程:语法篇

一劳永逸的搞定 flex 布局

浏览器兼容性

不同浏览器兼容性——常用的CSS Hack技术集锦

html5shiv

CSS3 PIE

JS

jQuery Scroll Path

How To Create An Animated Scroll To Top Button With jQuery

实现图片懒加载(lazyload):lazyload提升页面加载速度,节流函数限制页面滚动时绑定函数的触发次数

异步加载JS脚本

ES6

Top 10 ES6 Features Every Busy JavaScript Developer Must Know

回调

Concurrency model and Event Loop

JavaScript:彻底理解同步、异步和事件循环(Event Loop)

异步

Javascript异步编程的4种方法

[jQuery: Return data after ajax call success [duplicate]](https://stackoverflow.com/a/5…

ES6 异步编程

Promises

JavaScript Promises for Dummies:所看过的几篇讲解Promises的文章里面,最通俗易懂的一篇,可以从这篇入门了解Promises。

Understand promises before you start using async/await

JavaScript Promises: an Introduction

Google: promise async await example

开发规范

前端开发规范:命名规范、html 规范、css 规范、js 规范

Airbnb JavaScript Style Guide

JavaScript Standard Style

Methodology / BEM

front-end code standards & best practices – Google Search

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese

前端开发中文字体的应用规范

如何优雅的选择字体(font-family)

界面设计必备!全方位科普常用的字体规范(附神器)

库 & 框架

Jquery

Effective Event Binding with jQuery:简单高效地实现jQuery中的事件绑定,实在太特么酷了!

Vue

Vue作者尤雨溪:Vue 2.0,渐进式前端解决方案

滴滴 webapp 5.0 Vue 2.0 重构经验分享

饿了么Element:网站快速成型工具

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

Vue2 后台管理系统解决方案

vue生态大指南

React

React.js 小书:从实战的角度出发,有重点地、深入浅出地讲解React,需掌握ES6

Facebook官方Tutorial

React 入门实例教程

React 入门教程

SegmentFault 技术周刊系列文章

React+Ant.Design开发的SPA

React+reflux应用 IE8/9/10/11兼容实践

Make your React app work in IE8

Ant Design

Ant Design – PC端中后台框架

Ant Design Mobile – 移动版

AntV – 数据可视化

蚂蚁设计平台

设计指引:Web版Mobile版

开发指引:Web版H5版

其它框架

FrozenUI – 专注于移动web的UI框架

Weex – 移动端跨平台UI框架

关键字:移动端组件库

框架优选

去哪儿网前端架构师司徒正美:如何挑选适合的前端框架?

如果要用前端框架,开发流程是怎样的?:首答干货十足

前端UI框架集合

业务实战

开发流程

Web开发流程参考

现在大型网站的开发流程是怎么样的?

13年的问答 – Website Development Process: Full Guide in 7 Steps

功能实现

用户注册

前后端分离模式下前端开发的一些疑问,关于注册登陆

用户登录

关于登陆模块的设计

  • 启用验证码

  • 连续登录失败三次锁定帐号十分钟

  • 设置session有效期,存储/验证/清除session

字符串校验

validator.js

表单验证

探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式

复制到剪贴板

clipboard.js

视频播放

播放器插件videojs在ie8下无法播放?

videojs: Customizing Player Appearance – Luna Skin

进度栏标记

spchuang/videojs-markers

视频弹幕

实时弹幕系统的设计与实现

jabbany/ABPlayerHTML5

Github 关键字:danmu

图片加载

Google 关键字:medium image lazy load,实现medium依次加载模糊图和高清图的效果。

组件化/模块化/业务分层

这样的vue组件如何更加优雅?

引入服务层

性能优化

前端妹子跟我抱怨她们的页面加载很慢的时候,如何在她面前优雅地装?

性能魔方mmTrix

打造亚秒级页面加载速度网店实践经验

如何计算出自己网站的需要的流量、带宽等信息:介绍如何计算网站所需流量、带宽的实例,从运维及代码两方面给出了很中肯的建议

如何做好H5性能优化?

移动开发

页面适配

从网易与淘宝的font-size思考前端设计稿与工作流

如何让页面适配各种机型:采用rem实现页面适配各种手机型号

移动端高清、多屏适配方案

移动端适配方案(下)

使用Flexible实现手淘H5页面的终端适配

了解真实的『REM』手机屏幕适配

常见大坑

移动端 Web 开发踩坑之旅:部分定位的布局实现,fixed与input,iOS非直接输入相关

移动端视频播放 – Prismplayer – 阿里云

移动端页面、图片合理宽度

Spirit – 腾讯移动Web整体解决方案

Spirit

移动WEB调试利器 Rosin | Spirit

前端工程化

技术周刊 Vol.3 – 前后端分离与前端工程化

fis3

fis3 – 百度出品的前端工程构建系统

Webpack

入门Webpack,看这篇就够了

webpack 从入门到上线

webpack多页应用架构系列(一):一步一步解决架构痛点

How-To: Integrate Webpack into Visual Studio 2015

WebPack Task Runner – Visual Studio Marketplace

接口测试

RAP:阿里巴巴团队的Web接口管理工具

理论升华

你应该知道的4种JavaScript设计模式

资源收集

JS库/插件

推荐轻量高效无依赖的开源JS插件和库

jQuery插件库

Carousel

kenwheeler/slick: the last carousel you’ll ever need

jedrzejchalubek/glidejs: responsive and touch-friendly jQuery slider:在实际项目应用中,上面的 slick 略有瑕疵,最终采用的是这个 Glide。

Gallery

Gallery 其实和下面的照片墙区别不大……还有后面的瀑布流……

dimsemenov/PhotoSwipe:点击缩略图可显示大图,功能很完善。

magnific-popup:上面的 PhotoSwipe 的迷你版本。

照片墙

24 CSS GALLERY

20 Free jQuery Image Gallery & Lightbox Plugins

hotopile JS – jQuery照片堆叠效果插件

jQuery photo wall gallery plugin (like at google):Latest commit on 8 Dec 2014

photoWall.js: A lightweight Google-esque jQuery plugin for displaying photos:Latest commit on 15 Dec 2015

vue-gallery

瀑布流

desandro/masonry

Lazy Load

Lazy Load, 延迟加载图片的 jQuery 插件

Validator

WLDragon/SMValidator

Progress Bar

NProgress.js

pace: An automatic web page progress bar

网页加载的进度条是什么原理?用javascript做。

error monitoring and analytics

Rollbar – Error Tracking

FunDebug – 全栈JavaScript错误监控

主题,UI,图标等视觉相关

ThemeForest

Behance

Froala Design Blocks:基于Bootstrap的响应式设计样例大合集。

jQuery UI Bootstrap — 基于Bootstrap样式的 jQuery UI 控件

uxcore – React UI Component Set:应用于企业级后台?前台应该也可以

Fontello – icon font scissors:字体图标大合集,包含Font Awesome、Iconic等常见的字体图标,只需选择想要的图标,然后就可打包下载,按需使用

iconfinder:icon素材

iconfont:阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

Preloaders.net – Loading GIF & APNG (AJAX loaders) generator

Freepik:是一个可以下载免费矢量素材的网站,同时也可以找到 icon、PSD、和图片等资源。

CSS

CSS参考手册

CSS3 box-shadow实现纸张的曲线投影效果

How to Create CSS3 Paper Curls Without Images

CSS技巧收集——毛玻璃效果

其它

浏览器

SegmentFault 技术周刊 Vol.15 – “一天精通 Chrome 开发”

实用工具

Control character — Unicode® character table

Text to HTML Converter

TinyPNG:在线的PNG压缩工具,能够显著减小PNG文件体积。

前后端交互

RESTful – 移动互联网时代的高效API架构风格:后端.NET配套方案:Asp.Net WebApi,或者Nancy

Wiki系统

SmartWiki:国人出品的一款Wiki系统,从16年12月份开始开发,上次更新日期:2017年3月29日

前端安全

如何让前端更安全?——XSS攻击和防御详解

设计

网页设计

关键字:web design

站酷

交互设计&视觉设计的网站&书

LogoMoose

原型设计

知乎关键字:原型设计 → 精华内容

如何设计出色的网站后台原型?

如何快速学会 Axure 呢?

如何学习使用 Axure?

    原文作者:samsara0511
    原文地址: https://segmentfault.com/a/1190000010395971
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞