更新于3 年

共294字

开源Markdown库推荐

4.Editor.md

支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;

68747470733a2f2f70616e64616f2e6769746875622e696f2f656469746f722e6d642f6578616d706c65732f696d616765732f656469746f726d642d73637265656e73686f742e706e67.png

更新于3 年

前端

共99字

每周了解10个NPM包第一周

1. word-count

简介: 计算CJK字符数

2. select-files

简介: 动态创建input框,以API形式选择文件

3. concurrently

简介: 同时并行运行多个指令,相互之间不影响

4.chalk

简介: 美化控制台字符串输出,显示彩色文字和背景色

5.wait-on

简介: 等待网路请求,页面,文件,端口,socket启动

更新于3 年

共140字

开源产品推荐

1. Penpot(原型、UI设计工具)

官网:https://help.penpot.app/

68747470733a2f2f70656e706f742e6170702f696d616765732f726561646d652f686f6d652d75692e6a7067.jpg

2. Supabase(开源firebase)

官网:https://supabase.com/

68747470733a2f2f73757061626173652e636f6d2f646f63732f6173736574732f696d616765732f73757061626173652d6172636869746563747572652d39303530613733313765396563376566623738303766353139343132326534382e706e67.png

3.OpenSumi(开源IDE)

官网:https://opensumi.com/zh

O1CN01uIRRRl1wmLkN9geV3_!!6000000006350-2-tps-2844-1830.png

Nettu Meet(视频会议系统)

官网:https://github.com/fmeringdal/nettu-meet

更新于3 年

前端 React

共38字

React组件库

1.Radix
官网: https://www.radix-ui.com/

微信截图_20220319125738.png

微信截图_20220319125805.png

更新于3 年

共229字

IDEA系列常用插件:适用于IDEA、Webstorm、Goland、Pycharm、Phpstorm

1.GitToolBox

可以在每一行查看上次提交的信息,提交人,可以根据左侧的颜色,了解本次操作是修改,删除还是新增

2.Rainbow Brackets(彩虹括号)

让一对的括号显示成一种颜色,不同对的快显示成不同的颜色,方便用户区分。

3.CodeGlance2(代码缩略图)

原本有一个叫CodeGlance的插件,貌似作者不维护了,新版本无法使用。右侧缩略图可以快速滑动到对应位置。

4.Grep console

自定义日志颜色，idea控制台可以彩色显示各种级别的log，安装完成后，在console中右键就能打开。

更新于3 年

共651字

SEO优化-Sitemap

sitemap简单来说就是网站地图,通过可视化的形式,展示网站的主要结构,目的是方便搜索引擎以及用户更快的找到你的页面。不同框架有不同的生成方法,下面介绍nextjs框架的:

安装next-sitemap

yarn add next-sitemap -D

创建配置文件next-sitemap.js

/** @type {import('next-sitemap').IConfig} */

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

添加指令

{
  "build": "next build",
  "postbuild": "next-sitemap"
}

这样构建的时候就会自动生成sitemap。但是可能其中有一些路由不需要生产sitemap，这时候在next-sitemap.js里配置exclude,配置那些页面文件路径,生成的时候就不会存在那些页面地址了。
sitemap适合于任何的搜索引擎,但是如果等待搜索引擎的蜘蛛去爬取,可能需要很长时间,所以我们需要手动提交到那些搜索引擎网站,让他们主动收录。下面列举几个常用的搜索引擎:

增加百度收录

百度收录的网站是https://ziyuan.baidu.com 。点击右上角搜索服务，然后点击普通收录，进入后会出现新增网站的链接，添加相关信息以后，即可以正常操作。

在普通收录下面有三种提交方式，API提交、sitemap、还有手动提交。百度的sitemap和一般网站的sitemap要求不一样，详情可见 https://ziyuan.baidu.com/college/courseinfo?id=267&page=3#h2_article_title0。

Google收录

google的收录配置网站是 https://search.google.com/search-console/about。

微信截图_20220314152825.png
选择任意一种方式验证,验证完成进入控制台,点击左侧网址检查,打开页面后选择请求编入索引。

微信图片_20220314162106.png
接着点击左侧站点地图,在页面里添加站点地图

微信截图_20220314162235.png
此时google就会根据地址一级一级的缓存网站地图。

检验是否收录

在搜索引擎的搜索框里使用site:域名,来确认搜索引擎是否收录。

常用搜索引擎收录平台

Bing - https://www.bing.com/webmasters/about?cc=www (支持从google收录平台导入数据)
360站长平台 - https://zhanzhang.so.com/

SEO

更新于3 年

前端

共893字

前端工程化(二)：规范Git说明规范

上一张我们利用husky进行提交之前的一些脚本操作,但是我们对于commit message并没有做限制,如果提交的commit message不规范的话,很容易无法清晰明了的指导某次提交的目的。所以我们需要利用一些工具来校验和自动化填写大部分消息规范。
首先我们先来了解一下commit message的规范:

1.commit message format(信息域)

commit message一般分为三个部分Header，Body 和 Footer

<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
其中，Header 是必需的，Body 和 Footer 可以省略

Example:
PS D:\git\pythonPractice> git log
commit 58a7a966acb9aa2fffc0e02c9ce3be64b8949991 (HEAD -> master)
Author: Zhiwei Tian <hebeitianzhiwei@outlook.com>
Date:   Fri Aug 17 17:38:36 2018 +0800

    feat(serve): add grpc server

1.1 HEAD

1.1.1 type

type用于说明commit的类别,正常我们使用下面这几种

feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动

1.1.2 scope

scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。

1.1.3 subject

subject是 commit 目的的简短描述，不超过50个字符。

1.2 Body

Body部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。

More detailed explanatory text, if necessary.  Wrap it to 
about 72 characters or so. 

Further paragraphs come after blank lines.

- Bullet points are okay, too
- Use a hanging indent

1.3 Footer

Footer 部分只用于两种情况。

（1）不兼容变动

如果当前代码与上一个版本不兼容，则 Footer 部分以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法

BREAKING CHANGE: isolate scope bindings definition has changed.

    To migrate the code follow the example below:

    Before:

    scope: {
      myAttr: 'attribute',
    }

    After:

    scope: {
      myAttr: '@',
    }

    The removed `inject` wasn't generaly useful for directives so there should be no code using it.

（2）关闭 Issue

如果当前 commit 针对某个issue，那么可以在 Footer 部分关闭这个 issue 。

Closes #234

也可以一次关闭多个 issue 。

Closes #123, #245, #992

2.commitlint

首先安装一下两个依赖:

npm install --save-dev @commitlint/config-conventional @commitlint/cli

然后在项目根目录新建一个commitlint.config.js,内容如下

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

此时提交的话,并不会校验commit message,我们需要利用husky在git钩子下进行验证:

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

git会在commit-msg这个钩子下进行校验我们的commit message。

3.commitizen

这个工具可以让我们自动提示在提交时所有必需的提交字段,不需要等到commitlint校验然后拒绝此次提交。
我们使用局部安装相关依赖:

npm install --save-dev commitizen

这时候我们可以使用git cz来提交代码,这时候就回出现以下的界面:

我们可以用键盘操作,选择相关信息。但是这些功能必需执行git cz才行,如果我们使用git commit就可以跳过这些步骤,所以我们需要强制使用git cz指令去提交,我们利用husky在prepare-commit-msg,添加以下内容:

exec < /dev/tty && npx cz --hook || true

4.自定义commitizen

cz-customizable可以让我们自定义自己的代码提交规范。
至此我们就完成了自己的commit message规范了。

更新于3 年

前端

共403字

前端工程化(一)：使用Husky和lint-staged配置Git hook

但凡项目质量要求高会涉及到代码质量管理的问题,如何自动化检查代码质量。

git hook

git能在特定的重要动作发生时触发自定义脚本,这种钩子分为两种:一者是客户端的,另外一种就是服务端的。利用git hook,我们可以在提交之前运行脚本,但是脚本需要放在.git/hooks目录下面,团队协作中直接使用脚本是不利于团队内推广的。所以我们需要使用husky来解决这个问题。

安装husky

npm install husky --save-dev

如何使用

编辑package.json > prepare,然后运行一次:

npm set-script prepare "husky install"
npm run prepare

接着添加一个hook:

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

这样husky的配置就初步完成了。但是我们会发现,脚本执行的范围会是所有文件,随着项目体积的增加,文件数量会变得很多,全部走一遍脚本会很耗时间,这时候就需要lint-staged来限制脚本执行的范围,我们只执行在提交的代码上,不管其他未操作过的文件。

安装lint-staged

npx mrm@2 lint-staged

命令行执行这个脚本以后,就会在package.json默认生成一下类似内容:

{
  "lint-staged": {
    "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }
}

同时.husky文件下的pre-commit文件内容也会发生改变。
这样我们就完成提交的脚本操作了。

更新于3 年

共140字

免费开发资源平台

1. 部署平台

1. Vercel
支持Nextjs、Svelte、Nuxt.js、Gatsby.js、Angular等常见前端框架部署,支持自动配置https,支持部署Serverless接口

2. 数据库

1. MongoDB Atlas

类型: MongoDB
大小: 512MB
支持香港节点等数十个节点

2. CloudAMQP

类型: rabbitmq

3. CloudKarafka

类型: kafka

4. RedisLabs

类型: redis
大小: 30MB

5. upstash

类型:redis,kafka
大小:10k访问次数

3.客服聊天系统

1. Chatra

介绍:支持一个客服,在线和离线聊天Widget

更新于4 年

前端

共184字

常用JS开发库-原生篇

日期

1. Day.js

首页地址: https://github.com/iamkun/dayjs
**特点:**体积小,仅2kb大小

音频播放器

1.howler.js

首页地址:https://github.com/goldfire/howler.js
特点:

兼容性强默认支持Web Audio,IE上自动转换成HTML Audio
自动捕捉用户操作激活（解禁）声音播放,不受必须监听用户操作限制
支持的格式多,常用类型文件都支持

富文本编辑器

1.wangEditor

首页地址:https://www.wangeditor.com/
**使用平台:**兼容主流 PC 浏览器，IE11+,不支持ipad和移动端
demo:https://codepen.io/xiaokyo-the-bold/pen/ZEpWByR

lookenghua

独立开发者

文章

分类

标签

2022-06-07

Jetpack Compose如何禁用涟漪（水波纹）效果

2022-03-21

2022-04-20

2022-01-06

2022-03-29

2022-03-19

前端 React

2021-12-13

常用JS开发库-原生篇

前端

2022-03-16

IDEA系列常用插件:适用于IDEA、Webstorm、Goland、Pycharm、Phpstorm

2022-03-14

2022-03-02

开源Markdown库推荐

1.mavonEditor

2.Vditor

3.TOAST UI Editor

4.Editor.md

每周了解10个NPM包 第一周

1. word-count

2. select-files

3. concurrently

4.chalk

5.wait-on

开源产品推荐

1. Penpot(原型、UI设计工具)

2. Supabase(开源firebase)

3.OpenSumi(开源IDE)

Nettu Meet(视频会议系统)

React组件库

IDEA系列常用插件:适用于IDEA、Webstorm、Goland、Pycharm、Phpstorm

1.GitToolBox

2.Rainbow Brackets(彩虹括号)

3.CodeGlance2(代码缩略图)

4.Grep console

SEO优化-Sitemap

安装next-sitemap

创建配置文件next-sitemap.js

添加指令

增加百度收录

Google收录

检验是否收录

常用搜索引擎收录平台

前端工程化(二)：规范Git说明规范

1.commit message format(信息域)

1.1 HEAD

1.1.1 type

1.1.2 scope

1.1.3 subject

1.2 Body

1.3 Footer

2.commitlint

3.commitizen

4.自定义commitizen

前端工程化(一)：使用Husky和lint-staged配置Git hook

git hook

安装husky

如何使用

安装lint-staged

免费开发资源平台

1. 部署平台

2. 数据库

3.客服聊天系统

常用JS开发库-原生篇

日期

1. Day.js

音频播放器

1.howler.js

富文本编辑器

1.wangEditor

每周了解10个NPM包第一周