第5期 — 2019-06-02

在浏览器中阅读

周e信

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

Node.js

VS Code 的全栈 Web 模板 WebTemplateStudio🔗

项目类型:目前只支持一种类型:Fullstack 应用程序。 框架:目前支持一个前端框架:React.js,和一个后端框架:Node.js。 应用页面:当前页面模板包括:空白页面、公共布局和实现常见模式的页面(例如网格或列表)。 云服务:当前支持的服务包括存储(Azure Cosmos DB)和计算(Azure 功能)。

xplanet@OSCHINA

前端

流式字体的现状🔗

流式字体(FULLY FLUID TYPOGRAPHY)此处指的是使用viewpoint unit定义的字体。

流式字体例子:

html {
  font-size: 1.3vw;
}

h1 {
  font-size: 3vw;
}

css锁响应流式字体例子:

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

作者认为并不适合现在使用:

  • 用户不能控制字体大小
  • 覆盖了用户定义的浏览器默认字体大小

目前作者认为还是应该使用rem的响应式字体:

html {
  font-size: 100%;

  @media (min-width: 768px) {
    font-size: 112.5%;
  }
}

h1 {
  font-size: 3rem;

  @media (min-width: 768px) {
    font-size: 3.5rem;
  }
}

Matej Latin 摘译 Ka

在线grid布局生成器🔗

鼠标选择多个格子表示合并。 一个格子点多次则会在此位置上生成多个div。

问题:需要一个回退操作。

Sarah Drasner 摘译 Ka

使用picture不要使用background-image🔗

background-image 方式

<div
  style="background-image: url('/some/man-with-a-dog.jpg');
            background-size: cover;"
></div>

picture 方式

<picture>
  <img
    src="/some/man-with-a-dog.jpg"
    alt="Man with a dog"
    style="object-fit: cover;"
  />
</picture>

注意object-fit: cover

  • 有利于 SEO
  • 有利于 Acces­si­bil­i­ty
  • 支持.webp
  • 可配合 src­set 自适应提升性能

Andrew Welch 摘译 Ka

京东开源Alita: ReactNative对微信小程序转换工具开源🔗

一套把 React Native 代码转换成微信小程序代码的转换引擎工具

目前文档还不算很详细。

ARES Labs

react-div-100vh解决手机浏览器100vh问题🔗

CSS3常见问题:100vh在移动浏览器中不是固定的,恒定的

手机浏览器加载页面时,所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动。这个时候该菜单会变小,由于100vh仅在视口的可见部分计算,因此会导致所有布局都重新绘制并重新调整,对用户体验的糟糕跳跃效果。

react-div-100vh的解决方案就是,监听resize事件动态修改样式。

Mikhail Vasin

react hook循环检测工具🔗

react useEffectuseLayoutEffect都是在渲染之后触发,那么如果在这里面再次出发了渲染,就造成了递归。

stop-runaway-react-effects可以在开发时检测这种问题。它是通过包装useEffect和useLayoutEffect来达到目的的。

import {hijackEffectHook} from 'stop-runaway-react-effects'

if (process.env.NODE_ENV !== 'production') {
  hijackEffects()
}

Kent C. Dodds

Zdog-基于canvas的伪3d引擎🔗

目前看到的是代码创建模型,不能导入3d模型?

Metafizzy

W3C与WHATWG协同推进开放Web平台建设🔗

W3C CEO Jeff Jaffe:我在此高兴地宣布 W3C 与 WHATWG 经过协商现最终签署了一份《合作备忘录》作为双方认可合作模式,继而共同开发相同的 HTML 与 DOM 规范。

chinaw3c

Papa Parse 5.0发布🔗
//解析字符串
Papa.parse(csvString[, config]);

//解析本地文件 参见FileReader
Papa.parse(file, config)

//解析远程文件
Papa.parse(url, {
	download: true,
	// rest of config ...
});

//json转csv
Papa.unparse(data[, config]);

Matt Holt

16个Devtools技巧🔗

摘录部分:

F8暂停以获取动态展示的元素

CTRL-SHIFT-O查找css源码

打开一个css文件,按CTRL-SHIFT-O

切换颜色格式

调试阴影

火狐的Grid布局查看器

火狐的滤镜编辑器

Chrome的动画编辑

在三个圆点菜单处选择more tool/Animations

Chrome查看未使用的样式

在三个圆点菜单处选择more tool/Coverage

Louis Lazaris 摘译 Ka

数据库

实时消息总线选择🔗

Apache Kafka

  • producers 和 consumers 模式
  • 依赖 Apache Zookeeper 管理集群
  • 一定时间内保留消息历史
  • 原先用于 linkedin
  • 项目创建者后台创建了 Confluent
  • 流式处理可与 Apache Flink, Apache Storm, 或 Apache Spark Streaming 很好的配合。

Apache Pulsar

  • 分布式 pub-sub 消息系统
  • 原先用于 yahoo
  • 也基于 Zookeeper
  • 基于 Apache BookKeeper 实现排序
  • 背后由 Streamlio 商业支持
  • 同一个 api 接口使用 quque 或者 pub-sub
  • 容易扩展

RabbitMQ

  • Erlang 实现
  • Advanced Message Queuing Protocol (AMQP)
  • Streaming Text Oriented Messaging Protocol (STOMP)
  • Message Queuing Telemetry Transport (MQTT)

Apache ActiveMQ

  • 2007 开始的老项目,由 Apache Software Foundation 支持
  • Java 编写
  • 支持 JMS, STOMP, MQTT, AMQP, REST, 和 WebSockets.
  • 支持 Zookeeper

TIBCO Messaging

  • 更老的一个工具
  • The Information Bus COmpany (TIBCO)
  • 支持 JMS
  • 支持 MQTT

Alex Woodie

mongo 的数组 schema 定义🔗

见下面示例的dyes字段

db.foodColor.drop()
db.createCollection ( "foodColor",
{
    validator:
    {
        $jsonSchema:
      {
        bsonType: "object",
        required: ["name", "box_size", "dyes"],
        properties:
        {
            _id: {},
            name: {
                bsonType: ["string"],
                description: "'name' is a required string"
            },
            box_size: {
                enum: [3, 4, 6],
                description: "'box_size' must be one of the values listed and is required"
            },
            dyes: {
                bsonType: ["array"],
                minItems: 1, // each box of food color must have at least one color
                uniqueItems: true,
                additionalProperties: false,
                items: {
                    bsonType: ["object"],
                    required: ["size", "color"],
                    additionalProperties: false,
                    description: "'items' must contain the stated fields.",
                    properties: {
                        size: {
                          enum: ["small", "medium", "large"],
                          description: "'size' is required and can only be one of the given enum values"
                                },
                        color: {
                          bsonType: "string",
                          description: "'color' is a required field of type string"
                                }
                    }
                }
            }
        }
      }
    }
})

Ken W. Alger

mongo atlas现在也支持Azure和GCP的私有虚拟网络🔗

至此 Atlas 支持 AWS,Azure,GCP 三个平台的私有虚拟网络。

Leo Zheng

dbkoda-开源mongo GUI客户端1.1发布🔗

试用了一下,样子很酷,有以下问题:

  • 不知道怎么查看 json 格式
  • 不知道怎么创建 database
  • 提示功能没怎么起作用

感觉还是不如 ROBOT 3T

Southbank Software

PostGIS 3并行查询不再需要额外配置🔗

PostgreSQL 12 and PostGIS 3 并行空间查询不再需要额外的配置。

包括三种查询处理

  • Parallel sequence scans,
  • Parallel aggregates, and
  • Parallel joins!!

只需要增加你的计算处理内核(core)的数量。

此改进是由于加入了优化了核心空间查询功能实现

Paul Ramsey

Data Is Plural

Python

MIT 最新研究:只听 6 秒语音,就知道说话者长相🔗

MIT 使用了 AVSpeech 数据集,它由来自 YouTube 的数百万个视频片段组成,有超过 10 万人的语言数据。Speech2Face 是通过自我监督的方式训练的。

当然,目前效果还很不可靠。

MIT CSAIL

Deepfake 盛行背后:合成数据到底有什么用?🔗

像 Google 这样的大公司拥有大量难以突破的数据护城河。今天,正在捕获数据的公司正在以手工的方式标记数据,这可能是缓慢的、昂贵的和低质的方式。如果使用合成数据的话,就可以帮助公司绕过这些限制,使数据民主化。

可以使用 Unreal、Blender 和 Unity 等游戏引擎以编程方式来创建合成数据。

域随机化通过以非真实感的方式,随机干扰环境,有意放弃照片级的真实感,迫使网络学会专注于图像的基本特征。

由于合成实体数据可以删除姓名、电子邮件、社会安全号码等信息,但仍然能够反映出基础数据集,因此受到了隐私问题的推动。这有助于数据科学家在不访问敏感信息的情况下进行实验。

Astasia Myers 译者 Sambodhi

运维

Segment 放弃了微服务🔗

2017 年初,Segment 的一个核心产品达到了一个临界点。这就像我们从微服务的树上掉下来,并在下落的过程中砸到每根树枝一样。小团队没有让我们更快地前进,相反,我们发现自己陷入了复杂性爆炸的泥潭。这种架构的基本好处变成了负担。我们的速度急剧下降,我们的缺陷率却呈现爆炸式增长。

从单代码库-》多代码库+共享代码库-》再回到单代码库。主要是还是基于运维的原因。

一旦所有目标的代码都存在于一个代码库中,就可以将它们合并到一个服务中。由于每个目标都存在于一个服务中,我们的开发人员的工作效率得到了显著提升。我们不再需要因为变更一个共享库而部署 140 多个服务。一个工程师可以在几分钟内完成服务部署。

从微服务架构到整体的单体架构是一个巨大的改进,但是,也有一些妥协:

故障隔离很困难。由于所有内容都在一个整体中运行,如果在一个目标引入了导致服务崩溃的 Bug,那么所有目标服务都会崩溃。我们有全面的自动化测试,但测试有其局限性。我们目前正在研究一种更加健壮的方法,以防止一个目标使整个服务宕掉,同时又保持所有目标都在一个单体中。

我们需要一个健壮的测试套件,把所有的东西都放在一个代码库中。如果没有这个,我们就会和当初决定把它们分开时一样。

Alexandra Noonan 译者 平川

其他

我放弃了成为一个全栈开发工程师的理想🔗

随着时间的推移,这一行业正在越来越深地陷入了以开发人员为中心的工程流程,不知不觉花掉了很多时间;而开发人员一人则承担了越来越多的责任。

我认为拓宽知识面,运用对你所负责的部分的理解来更好地完成你所负责的部分,还是有好处的,但要让开发人员成为这样的一个人:对各种领域样样都懂但无一精通,如此一来,会直接影响代码质量、解决方案的选择以及所开发项目的未来。

要知道我们的大脑空间是有限的,但我们可以对一个或几个领域的更深、更好的知识来填充它,或者开始汲取多个领域的信息,结果得到的就是对所有事物都是肤浅的了解。这种知识体系创造了信心泡沫,不幸的是,这种信心并不能证明自己的正确性,结果导致了更槽糕的解决方案,如重新发明轮子、错误的技术选型、用显微镜敲钉子。

Artur Martsinkovskyi 译者 Sambodhi

吵起来-Google强制Edge 预览版用户浏览Modern YouTube 时使用chrome🔗

基于Chromium的微软新Edge浏览器的用户爆料:两天前使用google旗下youtube网站的“modern YouTube experience”还好好的,突然youtube告知不支持的浏览器,请下载chrome。

然后就人们吵起来了!有说是个偶然bug,更多人倾向于认为google故意作恶。

这意味着“从保守转向开放的微软”还是“从不作恶走向反面的谷歌”?

Mehedi Hassan 摘译 Ka

2019 年,互联网企业起薪最高,数据科学家岗位薪资排第一🔗
  • 科技企业比金融岗位工资还高
  • Facebook 实习生月薪中位数为 $8,000
  • 这些实习生每年的收入大约为 84,000 美元,远高于美国的工资中位数。

如今美国就业形势喜人,是大学生和新毕业生进入劳动力市场开始职业生涯的好时机。由于失业率处于历史最低水平且工作需求不断增加,求职者在市场上处于主导地位,雇主愿意为需求高而供应短缺的职位和技能支付高额报酬。

Amanda Stansell 译者 王强

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