akez

akez 查看完整档案

深圳编辑  |  填写毕业院校  |  填写所在公司/组织 www.akazwz.com 编辑
编辑

Hello World!

个人动态

akez 发布了文章 · 今天 16:37

moment.js汉化配置教程

moment.js的默认日期是英文的,使用起来不太方便,现在我们对它进行本地化配置。

1.下载moment.js

我们是通过修改moment.js的代码来进行汉化配置的。
直接拉到文件的最后,有一个return语句。
例如:

return hooks;

2.对moment.js进行修改

hooks.defineLocale('zh-cn', {
    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
 monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
 weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
 weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
 weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
 longDateFormat: {
        LT: 'Ah点mm分',
 LTS: 'Ah点m分s秒',
 L: 'YYYY-MM-DD',
 LL: 'YYYY年MMMD日',
 LLL: 'YYYY年MMMD日Ah点mm分',
 LLLL: 'YYYY年MMMD日ddddAh点mm分',
 l: 'YYYY-MM-DD',
 ll: 'YYYY年MMMD日',
 lll: 'YYYY年MMMD日Ah点mm分',
 llll: 'YYYY年MMMD日ddddAh点mm分'
 },
 meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
 meridiemHour: function (hour, meridiem) {
        if (hour === 12) {
            hour = 0;
 }
        if (meridiem === '凌晨' || meridiem === '早上' ||
            meridiem === '上午') {
            return hour;
 } else if (meridiem === '下午' || meridiem === '晚上') {
            return hour + 12;
 } else {
            // '中午'
 return hour >= 11 ? hour : hour + 12;
 }
    },
 meridiem: function (hour, minute, isLower) {
        var hm = hour * 100 + minute;
 if (hm < 600) {
            return '凌晨';
 } else if (hm < 900) {
            return '早上';
 } else if (hm < 1130) {
            return '上午';
 } else if (hm < 1230) {
            return '中午';
 } else if (hm < 1800) {
            return '下午';
 } else {
            return '晚上';
 }
    },
 calendar: {
        sameDay: function () {
            return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT';
 },
 nextDay: function () {
            return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT';
 },
 lastDay: function () {
            return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT';
 },
 nextWeek: function () {
            var startOfWeek, prefix;
 startOfWeek = moment().startOf('week');
 prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
 return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
 },
 lastWeek: function () {
            var startOfWeek, prefix;
 startOfWeek = moment().startOf('week');
 prefix = this.unix() < startOfWeek.unix() ? '[上]' : '[本]';
 return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
 },
 sameElse: 'LL'
 },
 ordinalParse: /d{1,2}(日|月|周)/,
 ordinal: function (number, period) {
        switch (period) {
            case 'd':
            case 'D':
            case 'DDD':
                return number + '日';
 case 'M':
                return number + '月';
 case 'w':
            case 'W':
                return number + '周';
 default:
                return number;
 }
    },
 relativeTime: {
        future: '%s内',
 past: '%s前',
 s: '几秒',
 m: '1 分钟',
 mm: '%d 分钟',
 h: '1 小时',
 hh: '%d 小时',
 d: '1 天',
 dd: '%d 天',
 M: '1 个月',
 MM: '%d 个月',
 y: '1 年',
 yy: '%d 年'
 },
 week: {
        // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
 dow: 1, // Monday is the first day of the week.
 doy: 4 // The week that contains Jan 4th is the first week of the year.
 }
});

最开始的hooks也就是返回的内容,这个根据版本不同进行修改。

3.使用本地化以及注意事项

使用案例如下:

let date = moment('1月 01 2020', 'MMM DD YYYY');
date.locale('zh-cn');

注意:既然使用了汉化,那么日期就要注意,原本是英语的要记得换回中文。

查看原文

赞 0 收藏 0 评论 0

akez 发布了文章 · 2月24日

亚马逊AWS实例设置为账号密码登陆

亚马逊AWS实例的登陆方式都是密钥登陆,我个人觉得很不方便,不太习惯,于是记录一下修改为账号密码登陆的过程。

1.连接登陆到实例

用密钥登陆到centos,下面是xshell的登陆设置

登陆的时候选择用户记得选centos,root用户是登陆不上的。

WARNING! The remote SSH server rejected X11 forwarding request.
Please login as the user "centos" rather than the user "root".

2.设置用户名密码登陆

1.先给root用户设置密码

sudo passwd root

2.切换到root用户

su root

3.输入以下命令启用用户名密码登陆

sed -ri 's/^#?(PasswordAuthentication)\s+(yes|no)/\1 yes/' /etc/ssh/sshd_config

sed -ri 's/^#?(PermitRootLogin)\s+(yes|no)/\1 yes/' /etc/ssh/sshd_config

sed -ri 's/^/#/;s/sleep 10"\s+/&\n/' /root/.ssh/authorized_keys

4.重启sshd生效

service sshd restart
查看原文

赞 0 收藏 0 评论 0

akez 发布了文章 · 2月23日

Laravel Guzzle 使用踩雷及指南

今天在使用Guzzle时遇到了几个问题,在这里记录一下。

1.报错HttpFoundationFactory not found

Class 'Symfony\Bridge\PsrHttpMessage\Factory\HttpFoundationFactory' not found

遇到这个问题是因为Guzzle的使用是需要依赖这个包的,但是我们没有,解决方法非常直接:

composer require symfony/psr-http-message-bridge

如果之前没有使用镜像,那么问题就直接解决了,但是如果使用过镜像那就出现了第二个问题

2.添加依赖包时报错Could not find package

[InvalidArgumentException]
  Could not find package symfony/psr-http-message-br
  idge.

  Did you mean one of these?
      symfony/psr-http-message-bridge
      loophp/unaltered-psr-http-message-bridge-bundl
  e

出现这个问题的原因是因为使用镜像,解决办法非常直接:

composer config -g --unset repos.packagist


    • -

下面记录一下guzzle的基本用法:

//新建client配置base_uri,可以直接在这后面拼接比较方便
$client = new Client([
 'base_uri' => 'http://127.0.0.1:8000/',
 'timeout' => 2.0
]);
try {
 return $client->request('GET', '/api/v4/alarms', [
 'auth' => ['admin', 'public']
 ]);
} catch (GuzzleException $e) {
 return array([
 'msg' => 'error'
 ]);
}
查看原文

赞 0 收藏 0 评论 0

akez 关注了用户 · 1月27日

fenbox @fenbox

主业设计,副业写代码

          =,    (\_/)    ,=
           /`-'--(")--'-'\
      woo /     (___)     \
         /.-.-./ " " \.-.-.\

08 年参与 Typecho 开源博客项目
11 年参与 SegmentFault 开发者问答项目
12 年创业,与 joyqi、sunny 驻扎莲花街

关注 489

akez 收藏了文章 · 1月21日

过来人写给软件工程师的 30 条建议

就在几天前,我的人生迈入了30岁。在过去的十年中,我做了很多事情,也学习了很多东西。在本文中,我将回顾人生的历程,并将软件工程师的工作和生活公之于众。

下面,让我们进入正题。

1,努力工作

没有人会平白无故地给你升职或加薪。然而,光是努力工作还不够,你还需要提高效率。

努力地工作却没有提供任何价值的人一无是处,不要成为这种把坐在椅子上的小时数当作生产力的人。

顺便说一句,你也需要避免与这种庸庸碌碌的人一起工作,通常他们所在的公司也超级有毒,会让你苦不堪言。值得庆幸的是,这样的人已经在我们这个领域绝迹了。

2,不要执着于编程语言

过于执着某一种语言毫无意义。大多数编程语言都大同小异,而且有各自的优势。这也就是为什么我们有很多种语言,因为没有一种语言是完美的。

但是,请确保你至少了解每种范式内的一种语言。例如,函数式编程、面向对象编程等。

3,每年学习一种新的技术语言

你应该尝试每年学习一种新语言(理想情况下应该选择流行的语言,并强迫自己走出舒适区),只有这样才能保持大脑敏锐并跟上市场趋势。

另外,如果你发现某种语言的价值,则可以将其作为解决特定问题的工具,推荐给公司。

4,对自己的职业生涯负责

你的童年很心酸,你的前任经理(或现任经理)是一个混蛋,你经历了3段婚姻,离婚5次,你付出了2年时间才掌握的Web框架如今却不流行了。你的生活一团糟,看不到一丝曙光。

即便如此,你是成年人,应该靠自己打赢这场战斗。过去的种种艰辛不是不求上进的借口。全力以赴提升自我,才能有更好的明天。

5,不用担心无法控制的事情

你只需要考虑自己力所能及的事情。如前所述,你付出了2年时间才掌握的Web框架如今却不流行了。那么该怎么办?再学一种啊。这一次可以选择一个发展前景更好的框架。你可能需要在职业生涯中经历很多次这样的情形。

也许你(挚爱)的技术主管离开了公司。虽然非常伤心(过去我也有过这样的经历),但现在你需要打起精神,给新主管留下好印象。

如果你做不到,那么也可以离开公司。但是,请千万不要因为无法控制的事情而烦恼。你需要调整你的状态,因为“表演必须继续”(英语:The Show Must Go On,英国摇滚乐队皇后乐队的歌曲)。

6,不要与人结仇

如果某人在某方面比你强,不要恨他们,你应该向他们学习。通常,我们会将比自己优秀的人视作威胁。而我会将他们视作提升自我的动力源泉,你也应该这样做。

我记得过去有几位同事非常擅长应对压力,他们甚至可以在千钧一发之际力挽狂澜。我从他们身上学到了很多东西,我从来不嫉妒他们,因为我知道我也可以培养这样的能力。

如果周围无人能够超过你(在技术上),那么请当心,也许是时候为自己和事业寻找新的机遇了。相信我,除非你身居高职(如CTO),否则你不想成为公司里最强的员工。俗话说得好,宁为凤尾不为鸡头。

仇恨会毁掉你的生活,打击你的生活积极性。仇恨并不能给你带来任何好处。

7,敢于肩负重任,就不用担心薪水的问题

很遗憾的是,很多人眼里只有钱,却没能磨练自己的技术,建立强大的形象。

你认为下面哪种人未来的薪资会更高:是薪水低于平均水平的CTO,还是薪水高于平均水平的初级工程师?所以,要明智地选择自己工作。

8,辜负技术力的人,终将被技术力辜负

很多人以为计算机科学学位可以让自己身价倍增,各大公司会求着你去他们公司,而且就凭着一张纸就可以轻松获得一切。

不要误会我的意思,我相信一个好的学位可以证明你学习了大量有用的知识,但是很多人都止步于此了。

在这方面上,我很欣赏自学成才的程序员。可能他们缺乏对计算机科学理论知识的了解,但是他们知道迎难而上,因为他们成功的点点滴滴都是靠自己的拼搏换来的。

另外,如果你对于流行趋势的一些基本知识缺乏了解,那么就代表你的做法有问题。你无需成为专家即可掌握周围的世界。

9,廉价的硬件不仅质量堪忧,而且对你的健康有害

你应该花钱买一些高质量的键盘、鼠标和显示器。你的事业需要大量依赖于你的手和眼睛。

降噪耳机值得拥有,但如果你没有前面提到的高质量硬件,那么就不要因为盲目跟风。

除非你的工作环境非常嘈杂,否则就没有必要专门买降噪耳机。

10,出去走一走,也许问题就解决了

好吧,我有点夸张,但是我想强调发散模式的必要性,Barbara Oakley在她的课程中讲述了学习的方法,我强烈推荐。

如今,人们不太重视发散的思维方式。至少我知道很少有公司会同意你在上班期间睡觉(或进行其他发散性的活动),但事实上我们都需要发散思维。实际上人们嘴边常挂着的“以后再说”就隐含了发散模式的重要性。

11,将一部分收入投入到专业教育中

如果你的公司愿意支部费用,那就更好了。

YouTube是一种绝佳的学习资源,但是如果你真的想认真学习一门技术,而且收入允许的话,还是应该订阅高质量的培训服务,例如O'Reilly / Pluralsight。

找到适合自己的学习方法,然后学习更多知识。

12,避开没有培训政策的公司

可能我在这一点上持有强硬且带有偏见的看法。如果这家公司相对较新或资金不足,那也可以例外。

由于科技领域需要不断学习新知识,跟上最新的潮流,所以我认为不应该考虑没有适当培训/教育政策的公司。

对我而言,最低限度的教育政策是每位员工都有专门的预算,至少每年可以支付下面的部分费用:

• 参加会议

• 购买书籍

• 购买O'Reilly learning等高质量的培训服务

• 进行认证

当然,由于种种原因,大多数人不会在一年中把上述所有的事情都做一遍。也许是因为他们已进入稳定期,或者是因为他们有家庭,他们不能投入大部分的业余时间,但如果员工有这个意向,公司就应该全力支持。

我对大公司的要求更高,我希望大公司能够举行一些讲座,特别是在领域关键的问题上。例如,如果公司想采用Scrum,那么最好能邀请一名敏捷教练来帮忙做准备。

13,使用金钱可以买到的最好的工具

例如IDE。与硬件同理,不应该在IDE上贪便宜。正如《程序员修炼之道》所说,你需要选择一个编辑器,然后学习如何用好它。高质量的工具可以节省你宝贵的时间。

不要忘记,时间就是金钱。现在你支付了高昂的价格,以后就可以节省时间。

14,忽视动力

人们需要很大动力才能实现重要的人生目标。

动力很重要,但也是一种情感。和所有的情感一样,动力也会忽有忽无。

你需要找到一种更好的方式来指引自己前进的方向,至少在一些重要的事情上明白自己需要做些什么。

当一切顺利时,人们很容易知足常乐,但是当你失去动力或进入倦怠期时,又能做些什么呢?

15,保持活力与热情

虽然我不建议你时刻像打了鸡血一样积极发展事业和生活,但我认为每个人都应该有自己的事业远景规划。

你应该清楚自己的发展方向,只有这样才能知道做出的每个决定是否可以让你的事业更快、更安全地发展。正如2000年英国著名的划船手奖牌获得者所说,这个决定是否可以加速船的前进?

16,了解哪种类型的公司更适合你,并专心做好这类的工作

创业公司、中型公司和大公司,都有各自的福利和消极的方面。

如果你更喜欢在大公司工作,那么不一定能够处理好创业公司的日常工作。

你需要进行一番研究,确保你了解你有哪些选择,而你的每个选择能获得什么以及失去什么。不幸的是,这个问题没有统一的答案。

17,遇上一位好经理是健康的工作及生活的基础

你可能对这一点并不陌生,遇上一位通情达理、能与之有效沟通的经理,而且还能从事自己喜欢的工作,那将是人生一大幸事。

很多人辞职都不是因为公司,而是因为他们的经理。你需要确保自己能和经理愉快地相处。理想情况下,在进入公司之前就要确认这一点。

18,要想给别人一碗水,自己就得有一桶水

这是我最初开始写博客的原因。

如果我得知了一些有趣的事情,那么我可以通过博客分享。

我认为这种方法的效果很好。至少对我来说是如此,虽然我从未问过我的读者:)

19,只有坚持学习才不会被时代淘汰

与软件行业相关的高薪领域的变化相对也很多。该领域的发展如此之快,所以一旦你停止学习,就会被时代淘汰。

这并不意味着你应该将所有的工作时间都用来阅读和编写代码,但也不要走向另一个极端:安于现状,无视周围的变化。

20,学习是一个长期坚持的过程,不要急于求成

至于学习的心态,与平日荒废到了周日就一整天都坐在电脑前相比,每天花30-40分钟学习的效果更好。

上大学时你就对此深有感触,不是吗?如果你平时就按时做作业,那么考试前的压力就会小很多,知识需要一点一点地积累,无法一蹴而成。

21,先让程序跑起来,再考虑正确性,最后再考虑速度

Kent Beck的这句话是我最喜欢的名言之一(还有一句是Unix哲学)。我对软件开发业界缺乏务实的思想感到震惊。

人们过于强调空格与制表符、下划线分割与首字母大写以及接口的命名方式。

我没有说这些问题不重要,只不过我们首先需要保证程序能够运行,不是吗?

我最喜欢观察别人,每每看他们代码都没有通过编译,就加了大量的注释,也挺无语的。朋友,请务实。

22,花在社交媒体上的时间应该物有所值

只关注那些值得你花费时间的名人。我关注了Twitter上的很多名人,包括许多dev.to上的作家。

即使我并不经常使用推特,但我也喜欢读到不同的观点,因为他们能给我很好的视角。

23,勇敢发问

无论你在公司中处于哪个职位,即便你是CTO,也不会有人认为你理应掌握所有信息。相反,研究表明,人们更喜欢你向他们寻求帮助。

而且,计算机科学领域如此之大,没有人能无所不知。就像其他被堆积如山的案牍所累的行业一样。

24,原理和头脑风暴不能决定成败

能够决定成败的只有最终的结果。你已经离开了学校,没有人在乎你浪漫的编程方式,这些理论不适用于行业问题或假设。我并不是说它们并不重要,但是企业界更加重视结果,而不是抽象的讨论。

这是一个可悲的事实。如果你不喜欢,那么也许企业生活不适合你。最好还是找一处以研发为导向的科研或大学吧。

25,尝试软件行业之外的业余爱好

最近,我有点后悔没有遵循这条建议。

我并没有成功地在全职工作、健身训练和硕士学位之间建立平衡,如今正在想法修复。

这条建议可以帮助你避免过度疲劳,而且也能从不同的角度考虑事情。

例如,我见过许多文章探讨发散思想与乐器之间的联系。

26,不要在技术上刚愎自用

这就没必要解释了吧。由于某种原因,软件技术中有很多选择。不要鼓吹某个编程思想或技术,或将其视为唯一的解决方案。这种做法只会让你招人烦,或显得自己很无知。

27,切勿在办公室中触碰不能容忍的行为

性别歧视、种族主义、欺凌行为、反感自己的事业或者老板休假就拖欠工资(我就有过这样的经历)。有些公司的人认真、成熟且专业,他们懂得尊重别人。你需要找到这样的公司。让那些不懂得尊重别人的人们在他们狭小的圈子里寻找优越感和独特性吧。

28,单元测试很无聊,但是...

遇到产品快速增长或大规模重构即将来临等情况时,单元测试可以救你一命。

就像生活中的所有事物一样,只有辛勤播种,才有收获。

29,有效的时间/任务管理非常重要

有效的时间/任务管理与最新和最热门的技术同等重要,甚至比它们更重要。

为什么?因为如果你不能有效利用自己的技术按时提供价值,那么对别人来说你一文不值。如果你觉得自己这方面的能力有待培养,那么可以从《Getting Things Done》(简称GTD)和《15 secrets of time management》入手。

30,重视软技能

除非你是不需要公开竞标的自由职业者,或者将销售和客户处理工作委托他人,否则你会非常需要软技能。

我们每天都需要与人合作,我们需要知道如何与不同的人有效地沟通,并用对方听得懂的语言与之交谈。

如果所有人的软技能都不强,那可能也不会有问题,但是这就有点反乌托邦了,我还是希望你能务实一点,努力培养这方面的能力。

至于如何培养软技能,我推荐你可以从以下三本入手:

• 《Soft skills》

• 《How to win Friends & Influence People》

• 《The charisma myth》

总结

感谢您的阅读,希望你喜欢本文提到的技巧。如果你有其他可以分享的点,请在下方留言。

零基础学习Java编程可以加入我的十年Java学习园地

查看原文

akez 发布了文章 · 1月20日

什么是可访问性

MDN Web Docs What is accessibility? MarkDown排版

参照可访问性

什么是可访问性

可访问性是一种让尽可能多的用户可以使用你的网站的做法。
传统上我们认为这只与残疾人士有关,但提升网站的可访问性也可以让其他用户群体受益。
比如使用移动设备的人群,那些使用低速网络连接的人群。
你也可以把可访问性看成是同等地对待每一个人,给他们平等的机会,无论他们的能力或所处的环境如何。
就像不能让坐轮椅的人可以进入大楼是错误的(现代公共建筑通常有轮椅坡道或电梯);
不能让视觉有障碍的人士可以浏览我们的网站同样不正确。
我们都是不同的,但我们都是人,因此享有同等的人权。
使网站具备可访问性才是正确的做法。
它也是一些国家法律的一部分,它打开了一些重要的市场,否则那些市场的用户无法使用你的服务或者购买你的产品。
建立可访问的网站能让每个人都受益:

  • 使用原语HTML(译注:仅使用非样式标记而样式用CSS定义的HTML称为原语HTML。那些描述内容呈现效果的标记如标记是样式标记,

这些样式标记在HTML5中已经废弃),不仅提升了可访问性,也增强了搜索引擎优化,使你的网站更容易被找到。

  • 关心可访问性表露出良好的道德品质,它提升了你的公众形象。
  • 其他一些改善可访问性的做法也会让你的网站更容易被其他群体使用,

比如手机用户,低速网络环境的用户等等。事实上,每个人都可以从这此改善中受益。

  • 我们是否也曾提到过到这也是某些地方的法律规定?

我们应关注的残疾都有哪些种类?

残疾人士和正常人一样是多样化的,他们身患的残疾也多种多样。
此处课题的关键是抛开思考你自己的电脑和你自己使用网页的方式,而是要开始了解别人如何使用网页——你不是你的用户。
接下来会讲解需要考虑的主要残疾类型,以及他们访问网页内容时用到的一些特殊工具(被称为辅助技术或ATs)。

注意:世界卫生组织的“残疾和健康”状况说明书指出:“超过10亿人,约占世界总人口的15%,
患有某种形式的残疾”,而且“有1.1亿至1.9亿之间的成年人在身体功能上存在重大困难。”

有视觉障碍的人

有视觉障碍的人包括盲人、视力水平低下者、色盲。
许多视觉障碍人士使用屏幕放大镜,要么是物理放大镜或是软件缩放功能。
现今大多数浏览器和操作系统都具备缩放功能。某些用户使用屏幕阅读器,这是一种可以大声朗读数字文本的软件。
一些屏幕阅读器的示例如下:

  • 有些是付费产品, 比如 JAWS (Windows) 和 Window Eyes (Windows).
  • 有些是免费产品, 比如 NVDA (Windows), ChromeVox (Chrome, Windows 和 Mac OS X), 和 Orca (Linux).
  • 有些内置在操作系统中,比如 VoiceOver (Mac OS X and iOS), Narrator (Microsoft Windows), ChromeVox (on Chrome OS),和 TalkBack (Android).

让自己熟悉屏幕阅读器是个好主意;您还应该设置一个屏幕阅读器并充分的使用它(盘它),以了解它是如何工作的。请参阅我们的跨浏览器屏幕阅读器测试向导,以了解更多使用它们的细节。
下面的视频还提供了一个简单的例子说明了体验是怎样的。
据统计,世界卫生组织估计“全球有2.85亿人视力受损:3900万人失明,2.46亿人视力低下。”(参见视力障碍和失明)。
这是一个庞大而重要的用户群却仅因为你的网站没有合理的设计代码而流失——几乎相当于美国的人口总数。

有听觉障碍的人

也被称为有听力障碍的人或聋子,这群人要么听力水平较低要么或者完全听不到。这些人使用辅助技术(请参考 听力、语音、说话或语言障碍患者的辅助设备), 但是并没有专用于计算机/网页的辅助技术。
但是,现在有专门的技术用于将文本转换成音频内容,范围从转换简单的文本文字到转换与视频一起显示的字幕。 稍后,有文章将讨论这些技术。
听力受损的人也代表着一个重要的用户群体——“全世界有4.66亿人患有听力障碍”,世界卫生组织的耳聋和听力受损状况报告如此宣称。

行动障碍的人

这些人在行动方面存在着残疾,可能是因为纯粹的身体问题(例如肢体丧失或瘫痪),或导致肢体无力或失去控制的神经系统/遗传疾病。 有些人可能难以做出使用鼠标所需的精准手部动作,而另一些人则可能受到的影响更为严重,可能会严重瘫痪到需要使用头部指针与计算机进行交互的地步。
这种残疾也可能是由于年老体衰导致,而不是任何特定的创伤或状况造成,也可能是由于硬件限制所致——有些用户可能没有鼠标。
这些残疾通常影响Web开发工作的方式是要求通过键盘就可以访问控件——我们将在本模块的后续文章中讨论键盘可访问性,但最好是仅通过使用键盘来尝试访问一些网站,看看你能够做些什么。例如,您可以使用Tab键在Web表单的不同控件之间移动吗? 您可以在我们的“跨浏览器测试使用本机键盘的可访问性”章节中找到有关键盘控制的更多详细信息。
据统计,有相当多的人患有行动障碍症。美国疾病控制与防御中心的“残疾与机能(18岁及以上的非住院成年人)”报道称美国有15.1%的成年人都患有身体功能疾病。

有认知障碍的人

认知障碍涵盖了一类范围广泛的残疾,从能力最受限的智障人士到随着年龄增长而导致思考和记忆困难的所有人。 该范围包括了患有精神疾病的人,例如抑郁症和精神分裂症患者。 还包括有学习障碍的人,例如阅读障碍患者和有注意力缺陷的多动症患者。 重要的是,尽管认知障碍的临床定义存在很多差异,但与之相关的人们会遇到同一类功能问题。 这类问题包括很难理解页面内容,难以记住如何完成任务,以及因不一致的网页布局而产生困惑。
对认识障碍人士来说一个好的可访问性机制包括:

  • 使用多种方式传达内容,比如从文本到语音或是视频;
  • 更易理解的内容,例如使用更通俗的语言书写的文本;
  • 将注意力集中在重要内容上;
  • 尽量减少干扰,例如不必要的内容或广告;
  • 一致的网页布局和导航;
  • 相似的元素,比如未访问的下划线链接使用蓝色而访问过的使用紫色;
  • 将过程划分为更有逻辑的,必要的步骤并附上进度指示器;
  • 在不影响安全性的情况下尽可能让网站认证更简单;并且
  • 使表单容易完成,例如带有清晰的错误消息和简单的错误恢复。

注意

  • 具有认知可访问性的设计将导致良好的设计实践。 他们将使所有人受益。
  • 许多有认知障碍的人也可能患有身体残疾。网站必须遵循W3C的“网页内容可访问性指南”包括认知可访问性指南。
  • W3C的“认知和学习残疾无障碍专案组”为认知障碍人士制作了web可访问性指南。
  • WebAIM有一个认知网页提供了相关的信息和资源。
  • 美国疾病控制中心估计,截至2018年,美国四分之一的公民有残疾,其中认知障碍是年轻人最常见的疾病。
  • 在美国,“智力障碍”是“智力低下”的新术语。 在英国,“智力障碍”通常是指“学习障碍”或“学习困难”。

在你的项目中实现可访问性

一个流行的关于可访问性的传言认为:可访问性是实施在项目上的昂贵“附加功能”。这个传言确实可能成立,只要遇到以下任一情况:

  • 你正在试图为一个现有存在重大可访问性问题的网站“改造”可访问性。
  • 您只是在项目后期才开始考虑可访问性和此时才暴露的相关问题。

然而如果你能在项目的开始阶段就考虑到可访问性的话,使大多数内容无障碍化的代价就会相当微小。
在规划项目时,将可访问性测试纳入测试体系,就像对其他任何重要目标受众群体(例如台式机或移动浏览器的目标用户)进行测试一样。 尽早和经常进行测试,理想情况下运行自动化测试找出程序化方式可检测到的缺失功能(例如,缺少图像替代文本或不良链接文字——请参阅元素关系与上下文),并对残疾人士的用户群进行一些测试,以查看更复杂的网站功能是否对他们可用。 例如:

  • 我的日期选择器小部件是否可供使用屏幕阅读器的人使用?
  • 如果内容动态更新,视力受损的人知道吗?
  • 我的UI按钮是否可以使用键盘和触碰界面进行访问?

您可以并且应该在内容中记下潜在的问题区域,这些地方需要进行一些工作才能使其变得可访问,确保对其进行了彻底的测试并考虑解决方案/替代方法。 文本内容(如您将在下一篇文章中看到的)相对容易,但是多媒体内容和时髦的3D图形又如何呢? 您应该查看项目预算,并考虑可以使用哪些解决方案来实现这类内容的可访问性。 转录所有多媒体内容是一种选择,当然成本可能很高。
还有,现实一点。“100%的可访问性”是一个无法实现的理想——你总是会遇到某种边缘情况,导致某个用户发现某些内容难以使用——但你应该尽你所能去做。如果您计划包含一个使用WebGL呈现的时髦三维饼图,您可能希望也包含一个数据表,作为数据的可访问的替代表示。或者,您可能只需要包含表而去除3D饼图——这样每个人都可以访问该表,编写起来也更快,还能减少运行时的CPU耗费,维护也更容易。
另一方面,如果您正在一个画廊网站上展示有趣的3D艺术,期望每件艺术品都能被视觉障碍人士完美的访问是不合理的,毕竟它是一种完全的视觉媒体。
为了表明您关心并考虑了可访问性,请在您的网站上发布可访问性声明,其中详细说明您对可访问性的政策以及为使该站点可访问而采取的步骤。 如果有人确实反映您的网站存在可访问性问题,请与他们展开对话,保持同情心,并采取合理的步骤尝试解决问题。

注意:我们的“处理常见的可访问性问题”一文涵盖了应更详细地测试的可访问性细节。
总结:
  • 从项目一开始就考虑可访问性,并尽早进行测试。就像任何其他bug一样,越晚发现可访问性问题,修复它的代价会更高。
  • 请记住,许多可访问性的最佳实践对每个人都有好处,而不仅仅局限于残疾人士。例如,原语标记不仅对屏幕阅读器有好处,而且使加载速度和性能也更快,因此对每个人来说都更有益,尤其是那些使用移动设备和/或慢速网络连接环境的人。
  • 在您的站点上发布可访问性声明,并与遇到问题的人接触。

无障碍指南和法律

有许多可用于基于可访问性测试的检查列表和指南集,乍一看,这些准则可能会让人望而却步。我们的建议是让自己熟悉你需要注意的基本领域,以及理解与你最相关的指导方针的高层结构。

  • 首先,W3C发布了一个庞大而详细的文档,其中包含了非常精确的、与技术无关的可访问性一致性标准。这些被称为Web内容可访问性指南(WCAG),它们绝不是短读的。这些标准分为四大类,它们指定如何使实现具有可感知性、可操作性、可理解性和鲁棒性。最好的地方得到一个简单的介绍和开始学习是一目了然。没有必要用心学习WCAG——注意主要关注的领域,并使用各种技术和工具来突出任何不符合WCAG标准的区域(更多信息见下文)。
  • 贵国还可能有具体立法,规定为其人口提供服务的网站必须能够访问-例如,美国“康复法”第508条、德国关于无障碍信息技术的联邦法令、联合王国的“平等法”、意大利的“无障碍法”、澳大利亚的“残疾歧视法”等。

因此,虽然WCAG是一套指导方针,但您的国家可能会有关于网络可访问性的法律,或者至少是对公众提供的服务的无障碍(包括网站、电视、物理空间等)。找出你的法律是个好主意。如果您不努力检查您的内容是否可访问,您可能会陷入法律的麻烦,如果有二重性的人抱怨它。
这听起来很严肃,但正如上文所述,您只需要将可访问性视为Web开发实践的主要优先事项。如果有疑问,请咨询合格的律师。我们不会提供比这更多的建议,因为我们不是律师。

可访问性API

Web浏览器使用特殊的可访问性API(由底层操作系统提供),这些API公开对辅助技术(ATS)有用的信息-ATS大多倾向于使用原语信息,因此这些信息不包括样式信息或javascript之类的内容。此信息是在一个称为可访问性树的信息树中构造的。
不同的操作系统有不同的可访问性API:

  • Windows: MSAA/IAccessible, UIAExpress, IAccessible2
  • Mac OS X: NSAccessibility
  • Linux: AT-SPI
  • Android: Accessibility framework
  • iOS: UIAccessibility

如果 Web 应用中的 HTML 元素提供的本机语义信息失效,则可以使用 WAI-ARIA specification 的功能来补充该信息,这些功能向辅助功能树添加语义信息以提高可访问性。在 WAI-ARIA basics 文章中了解有关 WAI-ARIA 的更多详细信息。

摘要

本文应该给您提供一个有用的可访问性的高级概述,向您展示为什么它是重要的,并研究如何将它融入您的工作流程。现在,您还应该渴望了解可以使站点可访问的实现细节,我们将在下一节中开始,了解为什么HTML是可访问性的良好基础。

查看原文

赞 0 收藏 0 评论 0

akez 收藏了文章 · 1月19日

CSS 奇思妙想边框动画

今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思:

觉得它的风格很独特,尤其是其中一些边框。

嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样。

border 属性

谈到边框,首先会想到 border,我们最常用的莫过于 soliddashed,上图中便出现了 dashed

除了最常见的 soliddashed,CSS border 还支持 nonehiddendotteddoublegrooveridgeinsetoutset 等样式。除去 nonehidden,看看所有原生支持的 border 的样式:

基础的就这些,如果希望实现一个其他样式的边框,或者给边框加上动画,那就需要配合一些其他属性,或是脑洞大开。OK,一起来看看一些额外的有意思的边框。

边框长度变化

先来个比较简单的,实现一个类似这样的边框效果:

这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框,下、右边框,通过 hover 时改变两个伪元素的高宽即可。非常好理解。

div {
    position: relative;
    border: 1px solid #03A9F3;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }
    
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }
    
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }
    
    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}

CodePen Demo -- width border animation

接下来,会开始加深一些难度。

虚线边框动画

使用 dashed 关键字,可以方便的创建虚线边框。


div {
    border: 1px dashed #333;
}

当然,我们的目的是让边框能够动起来。使用 dashed 关键字是没有办法的。但是实现虚线的方式在 CSS 中有很多种,譬如渐变就是一种很好的方式:

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

看看,使用渐变模拟的虚线如下:

好,渐变支持多重渐变,我们把容器的 4 个边都用渐变表示即可:

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

效果如下:

OK,至此,我们的虚线边框动画其实算是完成了一大半了。虽然 border-style: dashed 不支持动画,但是渐变支持呀。我们给上述 div 再加上一个 hover 效果,hover 的时候新增一个 animation 动画,改变元素的 background-position 即可。

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

OK,看看效果,hover 上去的时候,边框就能动起来,因为整个动画是首尾相连的,无限循环的动画看起来就像是虚线边框在一直运动,这算是一个小小的障眼法或者小技巧:

这里还有另外一个小技巧,如果我们希望虚线边框动画是从其他边框,过渡到虚线边框,再行进动画。完全由渐变来模拟也是可以的,如果想节省一些代码,使用 border 会更快一些,譬如这样:

div {
    border: 1px solid #333;
    
    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

由于 border 和 background 在盒子模型上位置的差异,视觉上会有一个很明显的错位的感觉:

要想解决这个问题,我们可以把 border 替换成 outline,因为 outline 可以设置 outline-offset。便能完美解决这个问题:

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

最后看看运用到实际按钮上的效果:

上述 Demo 完整代码如下:

CodePen Demo -- dashed border animation

其实由于背景和边框的特殊关系,使用 border 的时候,通过修改 background-position 也是可以解决的,就是比较绕。关于背景和边框的填充关系,可以看这篇文章:条纹边框的多种实现方式

渐变的其他妙用

利用渐变,不仅仅只是能完成上述的效果。

我们继续深挖渐变,利用渐变实现这样一个背景:

div {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    }
}

注意,这里运用了元素的伪元素生成的这个图形,并且,宽高都是父元素的 200%,超出则 overflow: hidden

接下来,给它加上旋转:

div {
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

看看效果:

最后,再利用一个伪元素,将中间遮罩起来,一个 Nice 的边框动画就出来了 (动画会出现半透明元素,方便示意看懂原理):

上述 Demo 完整代码如下,这个效果我最早见于这位作者 -- Jesse B

CodePen Demo -- gradient border animation

改变渐变的颜色

掌握了上述的基本技巧之后,我们可以再对渐变的颜色做一些调整,我们将 4 种颜色变成 1 种颜色:

div::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0;
    background-image: linear-gradient(#399953, #399953);
}

得到这样一个图形:

同样的,让它旋转一起,一个单色追逐的边框动画就出来了:

CodePen Demo -- gradient border animation 2

Wow,很不错的样子。不过如果是单线条,有个很明显的缺陷,就是边框的末尾是一个小三角而不是垂直的,可能有些场景不适用或者 PM 接受不了。

那有没有什么办法能够消除掉这些小三角呢?有的,在下文中我们再介绍一种方法,利用 clip-path ,消除掉这些小三角。

conic-gradient 的妙用

再介绍 clip-path 之前,先讲讲角向渐变。

上述主要用到了的是线性渐变 linear-gradient 。我们使用角向渐变 conic-gradient 其实完全也可以实现一模一样的效果。

我们试着使用 conic-gradient 也实现一次,这次换一种暗黑风格。核心代码如下:

.conic {
    position: relative;
    
    &::before {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
        animation: rotate 4s linear infinite;
    }
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

效果图和示意图如下,旋转一个部分角向渐变的图形,中间的部分使用另外一个伪元素进行遮罩,只漏出线条部分即可:

CodePen Demo -- Rotating border 3

clip-path 的妙用

又是老朋友 clip-path,有意思的事情它总不会缺席。

clip-path 本身是可以进行坐标点的动画的,从一个裁剪形状变换到另外一个裁剪形状。

利用这个特点,我们可以巧妙的实现这样一种 border 跟随效果。伪代码如下:

div {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid gold;
        animation: clippath 3s infinite linear;
    }
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%);
    }
}

效果图与示意图一起:

CodePen - clip-path border animation

这里,因为会裁剪元素,借用伪元素作为背景进行裁剪并动画即可,使用 clip-path 的优点了,切割出来的边框不会产生小三角。同时,这种方法,也是支持圆角 border-radius 的。

如果我们把另外一个伪元素也用上,实际实现一个按钮样式,可以得到这样的效果:

CodePen - clip-path border animation 2

overflow 的妙用

下面这个技巧利用 overflow 实现。实现这样一个边框动画:

为何说是利用 overflow 实现?

贴个示意图:

CodePen Demo -- 巧用overflow及transform实现线条hover效果

两个核心点:

  1. 我们利用 overflow: hidden,把原本在容器外的一整个元素隐藏了起来
  2. 利用了 transform-origin,控制了元素的旋转中心

发现没,其实几乎大部分的有意思的 CSS 效果,都是运用了类似技巧:

简单的说就是,我们看到的动画只是原本现象的一小部分,通过特定的裁剪、透明度的变化、遮罩等,让我们最后只看到了原本现象的一部分。

border-image 的妙用

利用 border-image,我们也可以实现一些有意思的边框动画。关于 border-image,有一篇非常好的讲解文章 -- border-image 的正确用法,本文不对基本定义做过多的讲解。

如果我们有这样一张图:

便可以利用 border-image-sliceborder-image-repeat 的特性,得到类似的边框图案:

div {
  width: 200px;
  height: 120px;
  border: 24px solid;
  border-image: url(image-url);
  border-image-slice: 32;
  border-image-repeat: round;
}

在这个基础上,可以随便改变元素的高宽,如此便能扩展到任意大小的容器边框中:

CodePen Demo -- border-image Demo

接着,在这篇文章 -- How to Animate a SVG with border-image 中,还讲解了一种利用 border-image 的边框动画,非常的酷炫。

与上面例子不一样的是,我们只需要让我们的图案,动起来,就是我们需要这样一个背景图(掘金不支持 SVG 动图,原图地址):

那么,我们也就能得到运动的边框图,代码完全一样,但是,边框是运动的:

CodePen Demo -- Dancing Skull Border

border-image 使用渐变

border-image 除了贴图引用 url 之外,也是可以直接填充颜色或者是渐变的。

之前也有一篇关于 border-image 的文章 -- 巧妙实现带圆角的渐变边框

我们可以利用 border-image + filter + clip-path 实现渐变变换的圆角边框:

.border-image-clip-path {
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

CodePen Demo -- clip-path、border-image 加 filter 实现圆角渐变边框

最后

本文介绍了一些我认为比较有意思的边框动画小技巧,当然 CSS 产生还有非常多有意思的效果,限于篇幅,不一一展开。

本文到此结束,希望对你有帮助 :),想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

查看原文

akez 关注了用户 · 1月6日

无闻 @unknwon

追逐自由的学术境界,为了技术的精湛而坚持不懈。

关注 15

akez 关注了专栏 · 1月6日

煎鱼的清汤锅

今天写代码了吗 :-) 博客地址:https://github.com/EDDYCJY/blog

关注 7544

akez 收藏了文章 · 2020-12-17

不会这些搜索技巧,别说你懂GitHub!

图片

很多的小伙伴,经常会有这样的困惑,我看了很多技术的学习文档、书籍、甚至视频,我想动手实践,于是我打开了GitHub,想找个开源项目,进行学习,获取项目实战经验。这个时候很多小伙伴就会面临这样的问题:“我不会搜啊,我该怎么找呀?”,最终只能放弃。

相信看完这篇文章,你就可以学会如何精准地在GitHub搜索项目。

开源项目的组成部分

在讲清楚之前呢,我们先来了解一下一个开源项目有哪些组成部分:

  • name: 项目名
  • description: 项目的简要描述
  • 项目的源码
  • README.md: 项目的详细情况的介绍

那么除了这些要素之外,项目本身的star数和fork数,也是评判一个开源项目是否火热的标准,这同时也是一个很重要的搜索标准。另外我们也要注意观察这个项目的最近更新日期,因为项目越活跃,那么它的更新日期也更加频繁。

以上要素就是我们在进行搜索的时候要注意的一些关键点。

如何搜索

那我们到底如何搜索呢?

假设我们现在要搜索React,相信大部分小伙伴都是直接在搜索框里输入:“React”,然后一回车,你就会发现情况像下面这样:图片搜索结果会显示非常多的开源项目,简直让你应接不暇,无从下手,很多小伙伴搜到这一步就放弃了,因为项目太多了,根本不知道如何找到自己感兴趣的开源项目,所以这样搜索非常的不准确。所以我们来学习一下稍微精确一点的搜索方法。

按照 name 搜索

搜索项目名里面包含React的项目:

in:name React

得到如下结果:图片可以看到,这些搜索结果都是项目名里面带有“React”关键字的项目,但是项目数量依旧很多。

现在我们来约束一下:

比如我再精确到项目的star数大于5000+:

in:name React stars:>5000

结果是这样的:搜索结果瞬间精确了很多,现在只有114个项目可供选择。当然我们一般不会把star数设置得这么高,一般设置个1000就差不多了。

同理,我们也可以按照fork的数量来进行搜索:

in:name React stars:>5000 forks:>3000

图片你会发现,结果越来越精确!

按照 README 来搜索

搜索README.md里面包含React的项目:

in:readme React

结果有这么多,那么我们再限制一下它的star数和fork数:

in:readme React stars:>3000 forks:>3000

图片搜索结果一下子精确到了90个。这个时候你再去选择项目,就会变得容易很多。

按照 descriptin 搜索

假设我们现在要学习微服务的项目,我们搜索项目描述(description)里面包含微服务的项目:

in:description 微服务

图片结果有这么多,那我们接着增加一些筛选条件:

in:description 微服务 language:python 

language:python的意思是我们把语言限制为python,我们来看看结果如何:图片搜索结果精确了很多。

假如在这些项目里面,我们想要找到最近才更新的项目,意思是更新时间就在最近,我们可以这样:

in:description 微服务 language:python pushed:>2020-01-01

pushed:>2020-01-01的意思是我们把项目的最后更新时间限制到2020-01-01之后,我们来看看结果如何:图片搜索结果只有8个了,这几个项目就属于更新比较活跃的项目,这下再也不纠结了。

总结

好,我们来总结一下。我们想要进行精准搜索,无非就是增加筛选条件:

in:name xxx // 按照项目名搜索
in:readme xxx // 按照README搜索
in:description xxx // 按照description搜索

那么在这里面呢,我们又可以增加筛选条件:

stars:>xxx // stars数大于xxx
forks:>xxx // forks数大于xxx
language:xxx // 编程语言是xxx
pushed:>YYYY-MM-DD // 最后更新时间大于YYYY-MM-DD

以上就是我们在GitHub上面精准搜索项目的一些小技巧,希望对你有所帮助!

作者:觉非
链接:https://juejin.im/post/5e3d01...

image

查看原文

认证与成就

  • 获得 2 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2020-11-02
个人主页被 19k 人浏览