周e信第16期

第16期 — 2019-08-18

在浏览器中阅读

扫描二维码关注微信公众号

Node.js

使用Yarn工作区包含多个项目 🔗

yarn workspaces 可以包含多个项目。

各项目间可以依赖。
Lerna正是基于yarn工作区的。
使用简单yarn install会初始化所有项目

目录结构

/package.json
/yarn.lock

/node_modules
/node_modules/cross-env
/node_modules/workspace-a -> /workspace-a

/workspace-a/package.json
/workspace-b/package.json

其中顶层/package.json

{
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}

workspaces中的数组指明各子项目。

编辑 Ka

使用Cheerio和pipedream抓取网站 🔗

pipedream可用来免费运行nodejs脚本和计划任务。 cheerio用来解析html，用法类似jquery。

Dylan Sather 编辑 Ka

npkill-快速帮你找到大node_modules的包 🔗

安装 npm i -g npkill 使用 cd ~/projects npkill

Estefanía García Gallardo and Juan Torres Gómez

destructing妙用-不使用第三个变量交换两个变量的值 🔗

javascript里面支持多个变量

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

复习一下c语言的两种方法（只支持两个变量）

方法一

#include <stdio.h>
 
int main()
{
   int a, b;
   
   printf("Input two integers (a & b) to swap\n");
   scanf("%d%d", &a, &b);
   
   a = a + b;
   b = a - b;
   a = a - b;
 
   printf("a = %d\nb = %d\n",a,b);
   return 0;
}

方法二

#include <stdio.h>
 
int main()
{
  int x, y;
 
  scanf("%d%d", &x, &y);
 
  printf("x = %d\ny = %d\n", x, y);
 
  x = x ^ y;
  y = x ^ y;
  x = x ^ y;
 
 
  printf("x = %d\ny = %d\n", x, y);
 
  return 0;
}

Dmitri Pavlutin 编辑 Ka

Javascript

mespeak基于webassembly的纯浏览器端TTS库 🔗

在线demo

新版本分两个部分，UI部分和core，core自动以worker方式运行。目前语音质量还是有待提高。

Norbert Landsteiner 编辑 Ka

VSCode实用插件列表 🔗

Jon R. Corbin

buffer浏览器上完全兼容node buffer api的库 🔗

Feross Aboukhadijeh

前端

useAuth基于auth0的完全前端认证react钩子 🔗

Auth0 是一家“身份验证即服务”提供商，旨在为开发人员提供简单易用的身份管理服务。为了保持灵活性和可扩展性，Auth0 身份管理平台允许开发人员在身份验证和授权管道中增加自定义代码。

import React from "react"
import { navigate } from "gatsby"

import { AuthProvider } from "react-use-auth"

export const wrapRootElement = ({ element }) => (
	<AuthProvider
	  navigate={navigate}
	  auth0_domain="useauth.auth0.com"
	  auth0_client_id="GjWNFNOHq1ino7lQNJBwEywa1aYtbIzh"
	>
	  {element}
	</AuthProvider>
)

使用useAuth可以完全做到不写任何服务端代码直接前端走完auth0认证流程并获得用户信息。

Swizec Teller 编辑 Ka

react-admin使用Material,GraphQL,ES6,RESTapi的React管理后台模板 🔗

非常值得称道的是，此项目直接使用npm包的方式使用。支持多方后端。文档也非常详细。

marmelab 编辑 Ka

想让你的文章出现在这里？🔗

投稿

怎样缩小svg 🔗

使用svgo
使用gatsby插件

Victor Zhou

响应式样式简便写法-配合变量 🔗

配合css变量使代码更简洁，但是对于IE需要polyfill

Per Harald Borgen

几个grid布局在线生成器 🔗

CSS Grid Generator by Sarah Drasner

LayoutIt by Leniolabs

Griddy by Drew Minns

Vue Grid Generator by Masaya Kazama

CSS Grid Layout Generator by Dmitrii Bykov

老编觉得LayoutIt by Leniolabs最好用。

Maria Antonietta Perna 编辑 Ka

tailwind.run-在线运行tailwindcss工具 🔗

编辑 Ka

justgage-控制面板动画特效 🔗

Bojan Djuricic

inter-被github和mozila使用的开源字体 🔗

Rasmus

React v16.9 新特性React.Profiler 🔗

测量 React 应用程序渲染的频率以及渲染的 "成本" 。其目的是帮助识别应用程序中渲染缓慢的部分，并且可能更益与 memoization 等优化。

render(
  <Profiler id="application" onRender={onRenderCallback}>
    <App>
      <Navigation {...props} />
      <Main {...props} />
    </App>
  </Profiler>
);

瓶子君@segmentfault

前端2

react-native-htmlview-在react native中显示html的组件 🔗

import React from 'react';
import {StyleSheet} from 'react-native';
import HTMLView from 'react-native-htmlview';

class App extends React.Component {
  render() {
    const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;

    return (
      <HTMLView
        value={htmlContent}
        stylesheet={styles}
      />
    );
  }
}

const styles = StyleSheet.create({
  a: {
    fontWeight: '300',
    color: '#FF3366', // make links coloured pink
  },
});

James Friend 编辑 Ka

infernojs-专注于性能的web框架 🔗

react的使用方式，但是是自己实现的引擎
不能用于react native

inferno 编辑 Ka

formik-让我们轻松的使用react form 🔗

说来说去，还是因为react没有双向绑定的缘故，所以操作一个form真是繁琐。

formik就是尝试解决这样的问题。

// Render Prop
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const Basic = () => (
  <div>
    <h1>Any place in your app!</h1>
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        let errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <Field type="password" name="password" />
          <ErrorMessage name="password" component="div" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  </div>
);

export default Basic;