为什么要用 GraphQL,好的和不好的使用理由

原文地址:https://honest.engineering/posts/why-use-graphql-good-and-bad-reasons 译文出自:TWNTF 译者:wtzeng 为什么要用 GraphQL,好的和不好的使用理由 老实说,GraphQL 最近几个月都在大肆宣传。 从独立开发者到 Prisma、Apollo 甚至 Amazon 之类的商业公司都开始用它提供专业的产品服务和支持。 就像 Typescript 或任何其它新技术一样,我们都会思考这一个问题: 我应该用这项技术吗?我需要它吗? 如果你对 GraphQL 也有这样的疑问,那么这篇文章值得你一览。 不好的使用理由

前端基础

深入理解 Javascript 事件模型

最近在看《Secrets of the JavaScript Ninja, Second Edition》这本书,看到第十三章"Surviving Events"觉得写得非常好,所以在这里提炼总结一下,文中还穿插了自己的一些理解,如果有理解错误的地方……你是没法给我留言的,因为暂时还没有评论功能╮( ̄▽ ̄)╭ 在一个页面的生命周期中,主要分为两个阶段: Page building Event handling Page building 阶段发生在刚打开页面时,浏览器会解析 HTML 形成 DOM

团队

来自领英的高效 code review 技巧

原文地址:https://thenewstack.io/linkedin-code-review/ 译文出自:TWNTF 译者:wtzeng 来自领英的高效 code review 技巧 领英最近在 code review 上达到了一个里程碑 - 一百万次 code reviwe。社交网络服务的负责人对此分享了一些从中得到的经验。 读代码和审查代码是一个软件工程师每天都要做的事。在代码被发布到生产环境前,一次正常的 code review 流程,通常需要团队的一些其他成员对这次代码提交的所有更改进行专业的审查。领英从2011年开始强制推行 code review ,使其成为我们开发过程中的一部分。

前端工程

手写简单的模块打包器,了解一下

原文地址:https://adamisntdead.com/lets-write-a-module-bundler/ 译文出自:TWNTF 译者:wtzeng 手写简单的模块打包器,了解一下 在 Github 查看源码[1]: Github 你好,欢迎欢迎!很高兴你能来到这。今天,我们来搭建一个非常简单的 Javascript 模块打包器。 在开始之前,我想先明确一个事情,我的这篇文章很大程度上基于这些项目: Unbundling the JavaScript module bundler - Luciano

前端工程

"有条理地"编写带有副作用的 redux action

本文主要是一个代码编写流程的梳理,侧重点在于”有条理”,而不在于相关技术的介绍。目的是为了在编写业务代码时,更加清晰有章法地去做事。下面关于技术的介绍,目的也在于让这些条理更加清晰。 相关技术 redux, redux-actions, redux-saga 场景说明 在最近的一个项目中,使用到了 saga 来处理 redux action 的副作用,当我们需要发起一个有副作用的 action 时,比如需要发起一个 action, 这个 action 会先发起一个网络请求获取数据,获取到数据后,根据返回的结果判断是否需要发起另一个请求,然后再根据返回的结果去更新 redux 的

前端工程

一步步搭建基于 React 技术栈的中型前端项目开发环境(一) --- 基本环境

一步步搭建基于 React 技术栈的中型前端项目开发环境(一) --- 基本环境 2017年12月26日 本文涉及到的技术主要有: React 全家桶,webpack,PostCSS,TypeScript,ImmutableJS。目标是搭建一个基本的开发环境,没有集成测试和协作方面的工具进来。 推荐结合GitHub仓库上的代码阅读本文,如果对环境搭建比较陌生,这篇文章很详细,可以按照本文一步步地进行下去。为了体现这些步骤,代码是增量变化的,但是为了展现每块内容的完整性,很多地方都不是只写增量,而是写了完整的代码块,配合代码块附近的说明和代码块内的注释,应该会更容易理解增量所在,同时因为这个原因,文章看起来很长,实际上读起来没有看上去那么长的,只看增量就好了。 (增量用 "

随想

ThoughtWorks · 初见

2016,constructor() 去年(2016年)的一个晚上,我和pd说:“看这家公司,有点神奇的,招聘要求和别人的都不一样。” 我说的这家公司,招聘要求是这样的: 技能 这些必须有: 你猜也能猜到,手写HTML/CSS和JavaScript能力是必须的; 对语义化HTML/CSS,渐进增强,CSS框模型的深入理解; 解决跨浏览器兼容性问题的痛苦经验; 你得结对,你得是个可爱的,能够和人一起工作的; 这些可以有: 你对交互设计的理解(哪怕是兴趣)都会帮助你快速成长; 如果你听说过敏捷开发,敏捷交互设计,体验设计,设计的思考这些概念,你会更快融入我们;

服务和运维

记录一次完整的Web项目部署过程

记录一次完整的Web项目部署过程 最近在找工作,由于简历上需要填写所做过项目的地址,但之前所做的项目基本都是内网的应用,因此必须自己将所做项目的demo部署发布出来,这里顺便记录一下整个过程,方便以后再次查看。因为要部署多个项目,这里我选择的是一台便宜的OVZ架构的美国VPS作为主服务器,然后通过另一台网络较好的VPS进行反向代理来优化国内的访问速度。 前期准备 Debian8简化版的VPS一台 要部署项目的git源 杂乱的便宜域名一个(可选,如不用域名就直接通过IP访问) 反向代理小内存VPS一台(可选,用于优化访问速度) 完整过程 安装git以及下载要部署的项目到服务器 安装Node.js,安装项目依赖 安装守护程序pm2,通过脚本启动项目并添加进守护进程列表 安装Nginx,配置反向代理 添加域名解析 1.安装git以及下载要部署的项目到服务器 安装git: apt-get

Linux

supervisor简要使用说明

安装方法(之一) pip install supervisor 主要组件 supervisord: 用于控制启用和退出子进程,记录子进程的标准输出和标准错误输出。 supervisorctl: shell命令工具,提供对子进程状态的访问,启用和退出子进程。 WEB服务器: 在本地9001端口开启一个WEB管理服务器(需要激活配置文件的inet_http_server部分)。 配置文件 /etc/supervisord.conf,如果没有root权限,可以放在当前用户的主目录 ~/supervisord.conf,之后运行的时候,指定-c参数: supervisord -c ~/supervisord.conf。 二进制文件位置

前端基础

行盒(line box)垂直方向的属性详解:从font-size、line-height到vertical-align

视觉格式化模型 在一个文档中,每个元素都被表示为0、1或多个矩形的盒子。确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标。① 在CSS中,使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边:外边距边, 边框边, 内填充边 与 内容边。① 盒的种类又分为:块级盒和行内级盒。如下② 一些附加概念: 块容器盒:直接包含的全部是块级盒的盒子称为块容器盒,它本身可能不是块级盒,比如非替换行内块及非替换表格单元格,不是块级盒。 块盒:同时是块容器盒的块级盒称为块盒。 匿名块盒:

前端基础

CSS绝对定位的原点:是在border上、padding上还是在content上?

用了那么久的绝对定位,却一直没在意一个问题,就是绝对定位的原点,究竟是在盒模型的哪一处。今天想到这个问题,直接搜索没有找到标准文档,也没有搜索到相关的问题,于是决定自己动手实现一下看看,并把这个结果发出来让搜索引擎的内容变得更充实点。 代码 <div id="d1"> <div id="d2"></div> </div> body { background-color: black;

前端基础

重置表单中的文件上传控件(file input)的方法

方法一: 调用所在 form 表单的 reset 方法,这个方法的缺点是会把整个表单重置,需要存储表单的状态,再回填回去 方法二: 使用jQuery,代码为: $("#id").replaceWith($('#id').clone(true)) 说明:此方法为网络上找到的,经测试链式写法无效。改成分步的写法仍然无效,只有在控制台分步去写才生效 方法三: 根据上述方法,换了一个思路,直接去改变input元素的type,代码为: $('#id').attr(

计算机科学

ASCII, Unicode, UTF-8, 8进制, 16进制等各种编码学习理解笔记

字符编码的发展历史 Unicode和UTF-8有何区别? 在这个问题下的于洋的最高票回答中,比较完整地介绍了字符编码的发展历史,为了便于记忆,再次简要概括一番。 **一个字节:**最初一个字节的标准是混乱的,出现过4位、6位、7位的一字节标准,最终由于历史原因和物理存储需求(8位是2的3次方,方便物理存储),所以采用了8位为一个字节的标准。 ASCII:定下了8位为一个字节后,那么一个字节可以表示的状态就有256种(2^8),对应0-255号。接下来就需要考虑8位如何表示一个字符了,ASCII码顾名思义(American Standard Code for Information Interchange)就是美国的信息交换标准码,因此只需要表示出英文字母和少数的标点符号以及操作控制符号即可,于是人们把这些需要编码的字符编到了0-127号(包括127)

前端工程

Yarn的Linking dependencies特别慢的优化方法

通过以下方法,可以提升部分速度: 把项目文件夹添加进杀毒软件的白名单 把Yarn的缓存文件夹(yarn cache dir查看路径)添加进杀毒软件白名单 把Yarn的安装目录添加进杀毒软件白名单 把Node.exe添加进杀毒软件白名单 总的来说,就是把Yarn,Node和项目相关的文件夹添加进杀毒软件的白名单速度就会有一定的提升。从我自己的实际实验来看,提升了接近一半的速度。

数据库

MongoDB学习记录(四) - MongoDB的"增查改删"操作之"改"

更新文档主要有以下几种方法: db.collection.updateOne(filter, update, options) db.collection.updateMany(filter, update, options) db.collection.replaceOne(filter, update, options) 另外MongoDB提供了更新运算符,更加方便我们进行文档的更新。其使用方法如下: { update operator: { field1: value1, ... }, update operator: { field2: value2, ... }, ... } 其中有一些更新运算符,比如$set,

数据库

MongoDB学习记录(三) - MongoDB的"增查改删"操作之"查"

查找使用的方法: db.collection.find() 查找所有文档 db.collection.find({})或者db.collection.find({}) 指定键值对 db.collection.find({field: value}, ...),此方法会找到所有包含了指定的field: value对的文档(如果field字段下的值是一个数组,并且value在这个数组中,那么也将被查找出来,换句话说,value除了直接形容这个字段的值,若字段值是一个数组的话,也可以去匹配数组里的值) 使用查询运算符 例如db.collection.find( { status: { $in: [ "

数据库

MongoDB学习记录(二) - MongoDB的"增查改删"操作之"增"

如果做插入文档操作的集合不存在,那么集合将被创建 db.collection.insertOne() insertOne为collection插入一条文档,如果文档的_id字段未指定,MongoDB会为文档添加这一字段。insertOne方法会返回一个文档,这个文档包含了被追加文档的_id字段。 db.collection.insertMany() insertMany可以为集合新增多条文档,需要传入一个文档数组。insertMany方法会返回一个文档,这个文档包含了被追加文档的_id字段。类似于: { "acknowledged" : true, "insertedIds" : [ ObjectId("562a94d381cb9f1cd6eb0e1a"), ObjectId(

数据库

MongoDB学习记录(一) - 安装、启动与建立数据库

简要说明一个基本概念:MongoDB中的三要素:数据库(database)、集合(collection)和文档(document)。 文档:类似于JSON对象,由字段(field)和值(value)组成的对构成 集合:文档的组合 数据库:集合的组合 安装、启动、连接 安装和启动的步骤见此MongoDB的安装与使用 安装MongoDB后,首先要启动MongoDB服务,在命令行运行MongoDB的bin目录下的"mongod.exe",这个是mongodb的守护程序(windows平台下),默认的数据存储文件夹为MongoDB安装分区的根目录下的&

工具

Git的SSH-key生成、导入及使用

Git主要使用4种协议传输数据:本地协议,SSH协议,Git协议和HTTP/S协议。 SSH协议是最为常用的一种,正式介绍SSH之前,简要说明一下其它协议。 本地协议(file://) 本地协议的优点就是简单,缺点是访问不便。 Git协议 这是一个包含在Git软件包中的特殊进程,它会监听一个提供类似于SSH服务的特定端口(9418),而无需任何授权。它的优点是它是传输速度最快的一个协议。缺点是正因为无授权,故这种协议没有写的权限,只有读的权限。另外这种协议是最难架设的协议,要求有单独的守护进程,需要定制。 HTTP/S协议 HTTP/S协议的优美之处在于假设简便,不需要占用过多的资源,另外HTTP是最常见的协议,大部分防火墙都会允许其通信。缺点是效率低,时间长。