使用css grid实现github贡献图

原文地址:

图表分为四个部分

整体图形网格

"days"列

“month”行

图形方格

整体网格

贡献图可以分为三部分 - 星期列,月份行,和独立的方格

在主要的 .grid元素中,有三个元素

<div class="graph">

<ul class="months">......

Selection文本选择

Selection对象表示用户选择的文本范围或插入符号的当前位置

使用window.getSlection获取Selection对象

const selection = window.getSelection();

anchor指向开始选择的地方,focus指向结束的地方;

range是文档中连续的一部分,chrome中只能选一个区域,rangeCount是1,如果可以选......

nginx反向代理

反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

场景:比较穷的我只有一台服务器,但在上面扔了很多依赖nodejs的接口和乱七八糟的服务

server {

listen 80;

serv......

class与构造函数

关于E6之前的"构造函数"

[[prototype]]和prototype

对象有一个[[prototype]]的属性,在有些浏览器中可以用__proto__获得,对象在创建时,这个属性会被赋一个非空值(大部分情况),[[protopype]]最终会指向Object.prototype

const a = {};

a.__proto__

// {construct......

Ajax

之前的实现AJAX的方式:

XMLHttpRequest

IE7及以上版本支持,老版本用ActiveXObject

属性

timeout

超时时间(毫秒)

status

请求的状态码,完整的可以参考:

statusText

响应状态,如 '200 OK'

readyState

状态

描述

......

canvas drawImage

本来是写头像截取的,由于参数弄错了搞半天没写对...记一下...

语法

CanvasRenderingContext2D.drawImage()

ctx.drawImage(image, dx, dy);

ctx.drawImage(image, dx, dy, dWidth, dHeight);

ctx.drawImage(image, sx, sy, sWidth, sHeight......

遍历对象属性

for (variable in object) { ... }

遍历对象本身的和从原型链上继承的可枚举的,非符号属性。(enumberable, non-Symbol)

Array、Object这样的从内置的构造函数创建的对象,会从Object.prototype和String.prototype继承不可枚举的属性(String,Number,Boolean,Object,Array,......

使用webhook同步代码

本地开发代码发布线上是先提交git,然后人为触发让服务器pull代码。最近使用的一个项目没有本地测试环境,想着有没有办法在测试机器上自动同步一下git服务器的代码

基本想法就是push的时候在服务器那边执行以下git pull

node的实现,感觉大概是这样:

const express = require('express');

const app = exp......