更新于3 年
72

Jetpack Compose如何禁用涟漪(水波纹)效果

Modifier.clickable()进行点击的时候会有水波纹效果,如何去除这个效果呢?有以下两个方法:

1.将indication设为nul


modifier = Modifier
            .clickable(onClick = {}, indication = null, interactionSource = remember {
                MutableInteractionSource()
            })

2.使用pointerInput设置点击事件

modifier = Modifier
                .pointerInput(Unit) {
                    detectTapGestures(
                    // 长按事件
                    onLongPress = {}, 
                    // 点击事件
                    onTap = { })
                }
更新于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

app.png

更新于3 年
294

开源Markdown库推荐

1.mavonEditor GitHub Repo stars GitHub last commit

cn-image.gif

2.Vditor GitHub Repo stars GitHub last commit

  • 支持所见即所得模式
  • 即时渲染类似于typeora

wysiwyg-4f216b9b.gif

ir-67cd956c.gif

3.TOAST UI Editor GitHub Repo stars GitHub last commit

121808231-767b0f80-cc92-11eb-82a0-433123746982.png

121808381-251f5000-cc93-11eb-8c47-4f5a809de2b3.png

4.Editor.md GitHub Repo stars GitHub last commit

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

68747470733a2f2f70616e64616f2e6769746875622e696f2f656469746f722e6d642f6578616d706c65732f696d616765732f656469746f726d642d73637265656e73686f742e706e67.png

更新于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
更新于3 年
99

每周了解10个NPM包 第一周

1. word-count

简介: 计算CJK字符数

2. select-files

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

3. concurrently

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

demo.gif

4.chalk

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

5.wait-on

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

更新于3 年
38

React组件库

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

微信截图_20220319125738.png

微信截图_20220319125805.png

更新于3 年
184

常用JS开发库-原生篇

日期

1. Day.js

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

音频播放器

1.howler.js

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

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

富文本编辑器

1.wangEditor

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

更新于3 年
229

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

1.GitToolBox

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

Snipaste_2022-03-16_09-56-24.png

Snipaste_2022-03-16_09-56-42.png

2.Rainbow Brackets(彩虹括号)

让一对的括号显示成一种颜色,不同对的快显示成不同的颜色,方便用户区分。
1825757-20191202154819892-2080431276.png

3.CodeGlance2(代码缩略图)

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

Snipaste_2022-03-16_10-34-47.png

4.Grep console

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

screenshot_17407.png

screenshot_16117.gif

更新于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 。点击右上角搜索服务,然后点击普通收录,进入后会出现新增网站的链接,添加相关信息以后,即可以正常操作。

Snipaste_2022-03-14_15-14-48.png
在普通收录下面有三种提交方式,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:域名,来确认搜索引擎是否收录。

常用搜索引擎收录平台

  1. Bing - https://www.bing.com/webmasters/about?cc=www (支持从google收录平台导入数据)
  2. 360站长平台 - https://zhanzhang.so.com/
更新于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来提交代码,这时候就回出现以下的界面:

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

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

4.自定义commitizen

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

avatar

lookenghua

独立开发者

文章

17

分类

6

标签

5