资讯专栏INFORMATION COLUMN

前端资源收集整理

awesome23 / 1274人阅读

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

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

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 技术周刊系列文章

SegmentFault 技术周刊 Vol.8 - React,“5 分钟快速入门”

SegmentFault 技术周刊 Vol.9 - 进阶吧!React

技术周刊 Vol.10 - React Native丨Learn Once, Write Anywhere

SegmentFault 技术周刊 Vol.11 - React 应用与实践

React+Ant.Design开发的SPA

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

Make your React app work in IE8

Ant Design

Ant Design - PC端中后台框架

设计指引

React组件清单

设计模式

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开发规范 | Spirit

JM(JavaScript Mobile) | Spirit

JMUI(Based on JM) | 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?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84435.html

相关文章

  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    antyiwei 评论0 收藏0
  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    KavenFan 评论0 收藏0
  • 前端开发-从入门到Offer - 收藏集 - 掘金

    摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和...

    sf_wangchong 评论0 收藏0

发表评论

0条评论

awesome23

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<