使用css grid实现github贡献图

原文地址:

图表分为四个部分

整体图形网格

"days"列

“month”行

图形方格

整体网格

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

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

<div class="graph">

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

使用webhook同步代码

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

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

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

const express = require('express');

const app = exp......

express配置单页应用路由

之前有个项目是用的react,构建完生成的静态文件给后端看的时候写的node+express的web服务器,发现页面刷新404的问题,由于SPA基本上都是是用history API实现的路由,从index进去后的跳转不受影响,但是单独请求某个地址会使用路径去找相应资源结果404,实际上需要所有地址都返回index.html

想着一个一个路径配置路由感觉有点麻烦,在网上搜了一下,可以使用这个......

前端性能优化(一) Performance.timing

页面加载、渲染的一些时间节点

在浏览器中可以使用window.performance.timing获取到这些值(IE9+),其中各个时间点(毫秒时间戳)的意义:

navigationStart

在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等

unloadEventStart

前一个......

requestAnimationFrame动画

页面动画效果通常是使用CSS3的animation,transition,或者在JavaScript中使用setTimeout | setInterval来持续改变某个CSS属性的值来实现。window还有一个API,用来实现高性能的帧动画,那就是requestAnimationFrame。

requestAnimationFrame语法

window.requestAnimationFram......

设备物理像素和设备独立像素

几个概念

设备像素,也称为物理像素,是设备能控制显示的最小单位;

CSS像素,写页面样式时候的像素单位,不是实际存在而是抽象的;

设备独立像素,计算机坐标系中的一个点,是可由程序控制使用的虚拟像素。(也有称设备逻辑像素)

screen对象的width和height属性可以返回显示屏的宽高,这个值其实是设备独立像素而不是屏幕分辨率,设备的屏幕分辨率是无法直接用代码获取的。在pc端看到的......

Web Storage

Web Storage:localStorage sessionStroage

sessionStorage

浏览器窗口关闭即会销毁;

浏览器窗口没有关闭,刷新或进入同源另一个页面也会存在【tab】;

打开单独的窗口,即使同一个页面也不是不同的;

适用只需要在浏览一组页面时使用,关闭了就不需要了

localStorage

会存储的更长久

localStorage coo......

移动站前端开发

字体

1.使用无衬线字体

2.英文和数字使用helvetica

3.不指定默认的中文字体

系统默认字体:

ios 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

......