PDF裁剪小工具

以下代码以react为例:

阅读全文
JavaScript方法

Object 对象

Object.prototype.toString

判断对象属于什么类型

1
2
3
var toString = Object.prototype.toString;
var a = toString.call(new Date()); // [object date]
var b = a.slice(8, -1); // b=date

Object.prototype.hasOwnProperty

返回一个布尔值,指示对象自身属性中是否具有指定的属性

1
2
3
4
5
6
7
var foo = {
hasOwnProperty: function() {
return false;
},
bar: "Here be dragons"
};
Object.prototype.hasOwnProperty(foo, "bar"); // true
阅读全文
canvas
canvas 宽高设置

canvas 的宽高需要写在 html 上,如下代码:

1
<canvas width="800" height="600"></canvas>

如果你用 CSS 设置的话它会变成拉伸,变得比较模糊。

颜色、样式和阴影
属性描述
fillStyle设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle设置或返回用于笔触的颜色、渐变或模式。
shadowColor设置或返回用于阴影的颜色。
shadowBlur设置或返回用于阴影的模糊级别。
shadowOffsetX设置或返回阴影与形状的水平距离。
shadowOffsetY设置或返回阴影与形状的垂直距离。
阅读全文
语义化标签
  • 正确的标签做正确的事情
  • 页面内容结构化
  • 无CSS样子时也容易阅读,便于阅读维护和理解
  • 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

语义元素

  • 非语义元素的例子:\
    和 \ - 无法提供关于其内容的信息。
  • 语义元素的例子:\
    、\以及 \ - 清晰地定义其内容。
阅读全文
Git

概述

我们可以把 Git 分成两个部分,一个是远程仓库 Remote Repository,还有一个是本地环境 Development Environment

命令

git clone

阅读全文
HTML、CSS优化

能用 HTML/CSS 解决的问题就不要用 JS

导航高亮

可以用 class 来标识菜单是否选中,选中的 class 增加特殊样式,:hover 选择器可以用来表示鼠标悬浮的样式

鼠标悬浮时显示

使用 :hover 选择器实现

自定义 radio/checkbox 的样式

input 始终隐藏,通过设置 span.checkbox 的样式来实现自定义样式,通过 :checked 伪类更改选中状态的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
input[type=checkbox]{
display: none;
}
/* 未选中的 checkbox 的样式 */
.checkbox{
/* 具体实现 */
}
input[type=checkbox]:checked + .checkbox{
/* 具体实现 */
}
</style>
<label>
<input type="checkbox">
<span class="checkbox"></span>
</label>

阅读全文
渲染机制

页面加载过程

  • 浏览器根据 DNS 服务器查询得到域名对应的 IP 地址
  • 向这个 IP 机器发送 HTTP 请求
  • 服务器收到、处理并返回 HTTP 请求
  • 浏览器得到返回的内容

例如访问 GitHub,会解析得到 IP 地址为 52.74.223.119,浏览器会向这个地址发送 HTTP 请求。

阅读全文
mac 远程 Linux 步骤
  1. 打开 mac 终端
  2. 在菜单栏中找到 Shell->新建远程链接
  3. Shell 中新增服务器配置
1
2
3
4
ssh root@localhost -p 29180
# root - 用户名
# localhost - ip
# 29180 - 端口
阅读全文
Hexo 配置 Algolia

首先注册Algolia账户

Algolia 登陆页面,可以使用 GitHub 或者 Google 账户直接登录,也可以注册一个新账户。我直接用谷歌账户登陆了,注册后的 14 天内拥有所有功能(包括收费类别的)。之后若未续费会自动降级为免费账户,免费账户 总共有 10,000 条记录,每月有 100,000 的可以操作数。

注册完成后,创建一个新的 Index,这个 index name 之后会用到

Index 创建完成后,此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展, 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录,执行命令安装:

npm install hexo-algolia –save # 目前最新版本是1.2.4,下面的操作都是基于这个版本的文档

复制代码获取 Key,更新站点根目录配置

前往站点根目录打开_config.yml添加以下代码

Algolia Search API Key

1
2
3
4
algolia:
applicationID: '你的Application ID'
apiKey: '你的Search-Only API Key'
indexName: '输入刚才创建index name'

复制代码修改Algolia搜索ACL(访问控制列表)

选中后保存。
操作完成后执行命令

1
2
export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API key
set (Mac和git bash 为 export) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY #查看是否设置成功如果没有值就设置失败

查看环境变量HEXO_ALGOLIA_INDEXING_KEY是否已经存在

1
2
3
export | grep ALGOLIA

hexo algolia

如果出现下面的0 posts indexed,先执行命令:hexo clean

1
2
3
4
5
6
INFO  93 files generated in 197 ms
INFO 0 posts collected
INFO Clearing index on Algolia...
INFO Index cleared
INFO Indexing posts on Algolia...
INFO Indexation done. 0 posts indexed.

阅读全文
小程序开发记录

小程序开发中碰到的问题记录

  • 在json中配置usingComponents来引用组件需要使用相对路径
  • 引入本地数据需要使用相对路径
  • 引用图片需要使用绝对路径
  • 组件中使用properties来接收数据,需要定义接收数据的类型
  • catchtap会阻止冒泡事件,bindtap 不会阻止冒泡事件。点击事件需要获取到变量值,如当前的索引,可通过 data-index 传递数据,随后在 js 中通过 e.target.dataset.index 获取到
  • cover-image 和 cover-view 最好放到 camera,map 等标签内部,否则在真机上面有可能不显示
  • textarea 标签会覆盖在其他标签之上
  • 使用 button::after{ border: none; } 来去除边框
  • setData()为数组时,不能传入 i 为变量,只能写死i的值
    如果需要动态的设置数组中的某个值:
    1
    2
    3
    4
    this.data.arr[i] = xxx;
    this.setData({
    arr: this.data.arr
    })
阅读全文
Algolia