第16期 — 2019-08-18

在浏览器中阅读

周e信

Javascript

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

在线demo

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

Norbert Landsteiner 编辑 Ka

Feross Aboukhadijeh

Jon R. Corbin

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

前端

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

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

marmelab 编辑 Ka

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

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

投稿

Maria Antonietta Perna 编辑 Ka

Per Harald Borgen

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;

文档

Jared Palmer 编辑 Ka

Victor Zhou

Bojan Djuricic

infernojs-专注于性能的web框架🔗
  • react的使用方式,但是是自己实现的引擎
  • 不能用于react native

inferno 编辑 Ka

Rasmus

React v16.9 新特性React.Profiler🔗

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

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

瓶子君@segmentfault

编辑 Ka

Python

Parul Pandey 编辑 Ka

其他

广告

AWS 宣布推出 Polly 服务的新特性-神经文本转语音(NTTS)🔗

Amazon Polly 是一种文本转语音 (TTS) 服务,它使用高级的深度学习技术来合成酷似人声的语音。

支持中文普通话.测试

Amazon Polly 语音及支持的语言的完整列表。

AWS 编辑 Ka

扫描二维码关注微信公众号
本期阅读量