2019年2月3月前端必须star的github项目
2019-04-03 本文已影响5人
mytac
这里面图片有的上传会失败，为了良好的阅读体验，移步到本人的github地址查看原文
)
文本处理
react相关
[图片上传失败...(image-61dbe9-1554255798161)]
import React from "react";
import useFormal from "@kevinwolf/formal";
const initialValues = {
firstName: "Tony",
lastName: "Stark",
email: "ironman@avengers.io"
};
function App() {
const formal = useFormal(initialValues, {
onSubmit: values => console.log("Your values are:", values)
});
return (
<form onSubmit={formal.submit}>
<div>
<label htmlFor="firstName">First Name</label>
<input {...formal.getFieldProps("firstName")} type="text" />
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<input {...formal.getFieldProps("lastName")} type="text" />
</div>
<div>
<label htmlFor="email">Email</label>
<input {...formal.getFieldProps("email")} type="text" />
</div>
<button type="submit">Submit</button>
</form>
);
}
[图片上传失败...(image-ae6e29-1554255798161)]
动画相关
-
typeit -- 这个星球上最通用的JavaScript动画打字工具
[图片上传失败...(image-c507b8-1554255798161)] - laxxx -- 简单轻巧（2kb缩小和压缩）香草javascript插件，当你滚动时创建流畅和美丽的动画！利用最直观的互动的力量，让您的网站活跃起来！
[图片上传失败...(image-f1da8d-1554255798161)]
css相关
- linaria -- JS库中的零运行时CSS在js中写css，0 runtime
import { css } from 'linaria';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';
// Write your styles in `css` tag
const header = css`
text-transform: uppercase;
font-family: ${fonts.heading};
font-size: ${modularScale(2)};
${hiDPI(1.5)} {
font-size: ${modularScale(2.5)};
}
`;
// Then use it as a class name
<h1 class={header}>Hello world</h1>;
node
import { get, post } from 'httpie';
try {
const { data } = await get('https://pokeapi.co/api/v2/pokemon/1');
// Demo: Endpoint will echo what we've sent
const res = await post('https://jsonplaceholder.typicode.com/posts', {
body: {
id: data.id,
name: data.name,
number: data.order,
moves: data.moves.slice(0, 6)
}
});
console.log(res.statusCode); //=> 201
console.log(res.data); //=> { id: 1, name: 'bulbasaur', number: 1, moves: [{...}, {...}] }
} catch (err) {
console.error('Error!', err.statusCode, err.message);
console.error('~> headers:', err.headers);
console.error('~> data:', err.data);
}
数据相关
人工智能
[图片上传失败...(image-84614-1554255798161)]
[图片上传失败...(image-510f95-1554255798161)]
react native
demo
[图片上传失败...(image-818615-1554255798161)]
视频相关
-
griffith -- 基于React的网络视频播放器
不仅仅是react也支持standalone模式
[图片上传失败...(image-27e2a5-1554255798161)]
表单
请求
const retry = require('async-retry')
const fetch = require('node-fetch')
await retry(async bail => {
// if anything throws, we retry
const res = await fetch('https://google.com')
if (403 === res.status) {
// don't retry upon 403
bail(new Error('Unauthorized'))
return
}
const data = await res.text()
return data.substr(0, 500)
}, {
retries: 5
})
vue相关
大牛博客
文档
funny stuff
-
demo
