sulihuang / frontend-collection Goto Github PK

View Code? Open in Web Editor NEW

87.0 87.0 11.0 3 KB

:rocket: :green_heart: :whale: 收集整理有趣有用的前端资源

frontend-collection's People

Contributors

Stargazers

Watchers

Forkers

hj3938 wangjishan tansj526 tomfanxiaojun instanceofs bobiscool coder698 bestmingming web-frame gupengcheng zhaohuiprogrammer

frontend-collection's Issues

September 2016

github 🚀 💚 🐳 还有许多其他使用有趣的收集

📥 Dropzone

非常优秀的JavaScript上传库，可以将任何HTML元素拖放到文件上传区域。功能包括图片上传的缩略图预览，支持多文件，进度跟踪，支持大文件等。高度可定制，没有依赖。

🚢React-MDL

Google的Material Design Lite（MDL）是最美观的CSS框架之一。提供了大量的React组件。

😬Postmate

Postmate是Window.postMessage（）方法的包装器，允许页面在它们内部的iFrames。提供了一个简单的基于promise的API，开发人员可以安全地访问有关iFrame的各种数据，并从父页面向其发送事件。

🐩 Particles

一个非常轻量级(2kb .js)和易于使用的库创建动画背景。只有一个方法 - Particles.init（{options}）;取一个对象与大量的自定义。有两个动画可用：单个粒子或连接的粒子形成美丽的星座。

💙 Recharts

基于React和D3之上的图表库。可以通过简单的类似XML的语法创建，许多重要的选项直接设置为属性。提供了丰富的示例目录，包含50多个即用组件，包括各种Line，Bar，Pie和其他类型的图表。

☁️ Shepherd

文本气泡库，强调的HTML元素是突出显示，文本气泡弹出时包含标题，描述和对话框按钮。

📺 Waud

Waud作为一个2合1解决方案，允许您访问JavaScript Web Audio API和HTML<audio > API。

🗻 Grade

Grade.js采用图像中的两个最主要的颜色，并使用它们创建优雅的渐变。此效果可用于制作酷的图像帧或设置与整个页面匹配的背景。该库非常小，没有任何依赖。

🌈 Rainyday

Rainyday是一个很小JavaScript库，提供雨动画功能。 Rainyday使用HTML 元素，它的API绘制一个逼真的玻璃状表面与随机雨滴向下滴。

🎑 CSSnano

在缩小样式表时，CSSnano不会简单地删除空格，而是进行其他一些优化，例如将属性合并到其速记等效项中，删除注释，缩短颜色值等等。 CSSnano与许多平台兼容，包括Node.js，grunt，gulp，webpack和Atom文本编辑器。

📼 Multirange

Multirange是一个滑块库，运行用户在定义的范围内左右滑动

✂️ Minireset

Minireset是一个非常简单的CSS重置库，只标准化最重要的CSS属性，没有任何额外的东西。

🌍 Cesium

基于WebGL的JavaScript库，非常的酷炫，用于创建高分辨率的3D地球和2D地图。它支持不同的地图API，天气API和其他复杂的功能。
Demo页面有大量的社区项目，展示功能，包括纽约所有建筑的3D地图和美国宇航局的项目。

🔕 In-view

埋点库，用于跟踪页面上的元素，并在他们即将离开或进入视口时做出反应。该库没有外部依赖，并且真正容易使用简单的回调语法

📜 Papa Parse

Papa Parse是一个强大的客户端CSV解析器。它充满了令人敬畏的功能，如转换为JSON，支持字符串，本地文件或URLS，异步模式，快速模式等等。这个库没有依赖性，可以兼容JavaScript和jQuery。

Top 10：JS in November

❤️ Rank 1

`vue-hackernews-2.0`

尤大亲自操刀的基于vue2.0开发的hackernews,使用服务端渲染的同构式开发,非常值得学习

墙裂推荐！

🌹 Rank 2

`深入了解D3`

粗浅的认识：数据可视化也是前端的一大块，D3是个不错的选择！

🐚 Rank 3

使用Next.js进行同构式开发

最近同构式开发越来越火咯

💻 Rank 4

为什么我感谢JS疲劳（Why I’m Thankful for JS Fatigue 这个我实在不理解，理解的同学给我评论一下谢谢）

🔐 Rank 5

mo.js开发介绍

来自css-tricks的文章，详细介绍了mo的使用

📹 Rank 6

编写高效的JavaScript

🐶 Rank 7

（Video）使用V8和Web Assembly提高JS性能

💩 Rank 8

JS中的函数式编程 - 实用示例

🐔 Rank 9

JavaScript 2015（ECMA2015）功能的简介。

📉 Rank 10

跨站点脚本

（英）原文地址

资料收集

Top 10：CSS in November

❤️ Rank 1

CSS参考：图解CSS属性

有个这个网站，妈妈再也不用担心我学不好CSS了😂 😂 😂

墙裂推荐！

🌹 Rank 2

网页平滑动画的是个原则

描述了作者在开发中总结的优化动画的技巧

掘金翻译计划也对其进行了翻译-[译] 10 个原则让动画带你飞

🐚 Rank 3

CSS网格布局学习

💻 Rank 4

CSS断点的正确姿势（来自FreeCodeCamp）

🔐 Rank 5

CSS Grid, Flexbox And Box Alignment

📹 Rank 6

CSS小技巧合集

🐶 Rank 7

CSS Dev Conf 2016笔记

💩 Rank 8

使用CSS构建交互式电子邮件。

🐔 Rank 9

如何使用CSS和SVG动画创建游戏（示例）。

📉 Rank 10

CSS选择器详解

October 2016

Leaflet

Leaflet是最流行的开源交互式地图。它提供了你想要的地图库中的一切 - 标记，图层，缩放，以及更多的基本和高级功能。最近官方出了1.0版本，许多改进的API，辅助功能和性能。

Reflexbox

用于React的Flexbox网格系统，提供Grid, Flex, 和Box组件用于开发；

lory

轻量级无依赖JavaScript的手势库

Granim

简单易用的渐变动画库,纯JavaScript(< 10kB) 实现。

查看demo

React Native Elements

React Native的UI组件库，包括诸如菜单，各种按钮和表单输入等组件。提供优秀的文档。

Reframe

让非响应式元素响应的JavaScript插件。 Reframe对<iframe>和<video>元素特别有用，因为它保留了原始的宽高比。像大多数现代库一样，不依赖于jQuery，但如果它包含在页面中，可以使用$（'selectors'）。

Progress Bar

一句话: 满足你对进度条的一切需求

Headroom

Headroom.js是一个轻量级的高性能JS窗口小部件（没有依赖），允许您对用户的滚动做出反应。当向下滚动时滑出视图，向上滚动时滑回。

SpinThatShit

一个酷炫的Loading库

Navigo

一个简单的简单的JavaScript路由，兼容老版本浏览器。

Wysiwyg.css

使用漂亮的主题从HTML或Markdown生成文档。它对页面上的所有元素进行样式设置，为其提供正确的排版，颜色和paddings，大大提高了可读性。实现主题就像为根元素添加一个类一样简单。可以通过Sass定制主题。

Choreographer

处理复杂的CSS动画

Open color

特别为设计用户界面而创建的颜色调色板。它包含12种颜色，每种具有10种不同强度的变化。开放颜色可用于CSS，Sass，Less和Photoshop，Illustrator和Sketch的插件。

Fuse.js

无依赖JavaScript库，提供模糊搜索（近似字符串匹配），拥有丰富的选项提供配置。

Ionicons

Ionicons是来自Ionic框架的图标字体，现在是一个独立的库。包括超过500个高品质的符号和标志，所有绘制在一个现代和非常吸引人的风格。

原文链接（英）

Top 10：NodeJS in November

这是我在🏀 Medium关注的一个系列文章，分类收集了来个各个不同社区优秀的文章和项目，每个月选出其中最好的十个, 由于Medium在墙外，所有我进行简单的翻译和整理到Github

❤️ Rank 1

通过阅读NodeJS文档，我理解到19个知识点

国内也有几位大牛进行了翻译：

[译] 阅读 NodeJS 文档，我学到了这 19 件事情
 我在阅读NodeJS文档中读出的19个套路

🌹 Rank 2

Node＆Express简介,包括了以下方面：

Node与其他服务端编程语言的优势对比
安装Node
Hello World
环境变量设置
测试NodeJS App
中间件
内存管理
Debugging
崩溃管理

🐚 Rank 3

理解 Node.js 事件循环

我阅读过几遍文章,最精彩的部分我摘抄了出来：

Microtask 与 Macrotask
实际上，不止一个任务队列，microtask（小型任务）与 macrotask（巨型任务）各有一个任务队列。

Microtask 如：

process.nextTick
promises
Object.observe

Macrotask 如：

setTimeout
setInterval
setImmediate
I/O

国内翻译：众诚翻译@文蔺理解 Node.js 事件循环

💻 Rank 4

使用Node.js创建一个简单的Twitter Bot

本文介绍了如何使用 twit API,创建一个简单的机器人的实例，建议大家可以跟着码一遍


// Dependencies =========================
var
    twit = require('twit'),
    config = require('./config');

var Twitter = new twit(config);
...

🔐 Rank 5

使用JSON Web Tokens(jwt)构建和验证NodeJS应用程序

来自auth0的文章，介绍了如何使用jwt让你的应用程序更加安全

auth0还提供了许多其他的api和教程，大家可以关注一下（非广告，只是经常看他们的文章）

📹 Rank 6

NodeJS初学者视频教程

讲述了包括:

安装和初次运行
使用REPL
理解和使用NPM
模块的工作机制
package.json
一个简单的web服务器

通过观看视频，能够快速的让初学者了解NodeJS;

🐶 Rank 7

NodeJS开发者需关注的四个点

内存泄漏
CPU问题
Back Pressure(我翻译不来..)
安全

💩 Rank 8

Node.js垃圾回收详解

这篇文字和Rank1中的文章是同一个系列，Upcoming chapters for the Node.js at Scale series中的一篇

虽然文章是英文的，但是有很多图解和代码，理解起来并不难；

🐔 Rank 9

使用Node简化服务依赖关系

来自twitter的官方blog
我还没有详细阅读，应该属于微服务的范畴吧？

📉 Rank 10

NodeJS监控

文章系统的介绍了监控的方方面面知识，我以前做NodeJS的时候很少去关注监控相关的，准备找个时间补一下知识

December 2016

github 🚀 💚 🐳 还有许多其他使用有趣的收集

😬 Deck.gl

Deck.gl是由Uber开源的数据可视化库，基于WebGL的可视化图层。能够支持大规模的2D和3D可视化。

可以在React中使用，也可以单独使用；

🐩 Svelte

Svelte是一个全新的项目，为React和Angular等大型框架提供的现有解决方案提供了一种全新的，更轻量级的项目。

💙 Turbo.js

Turbo.js允许您访问GPU并提高应用程序的性能。通过直接在图形处理器中执行进程，可以并行运行多个复杂计算，大大减少JavaScript等待时间。兼容大部分浏览器。

🚢 CSSPIN

CSSPIN是由纯CSS实现了旋转和Loading的库，并且提供单独下载某个组件，对于减少代码冗余很有效果。

Blueprint

Blueprint是一个针对构建复杂用户界面（如基于Web的桌面应用程序和后台管理系统）而优化的React工具包。它提供了丰富的组件库，大量的可定制选项与Sass或Less，并且拥有详细的的文档。

🌈 Card

Card是一个纯JS项目（有jQuery版本）, 提供非常酷的实时展示卡片信息的功能，非常适合用来做有信用卡、驾照等信息的表单

Conversational Form

抛弃了传统表单的形式，采用对话的方式让你来完成表单；

我看了这个demo，我越发的觉得前端真的太有趣了！

这里有一篇关于它文章 Introducing the Conversational Form

TypeIs

JavaScript类型检查的库
代码时间很简介

;(function () {
    var OP = Object.prototype;
    if (Object.defineProperty && !OP.typeis) {
        var toString, Regex;
        toString = OP.toString;
        Regex = /^\[object |]$/gi;
        Object.defineProperty(OP, 'typeis', {value: function (is) {return typeis(this, is)}});
        function whatTheType(something){
            return toString.call(something).replace(Regex, '');
        }
        function typeis(something, is) {
            var type = whatTheType(something, is);
            if(whatTheType(is) == 'Array'){
                is = is.join('|');
            }
            return is ? new RegExp('^(' + is + ')$', 'i').test(type) : type;
        }
    }
})();