注册
环信即时通讯云

环信即时通讯云

单聊、群聊、聊天室...
环信开发文档

环信开发文档

环信FAQ

环信FAQ

集成常见问题及答案
RTE开发者社区

RTE开发者社区

汇聚音视频领域技术干货,分享行业资讯
技术讨论区

技术讨论区

技术交流、答疑
资源下载

资源下载

收集了海量宝藏开发资源
iOS Library

iOS Library

不需要辛辛苦苦的去找轮子, 这里都有
Android Library

Android Library

不需要辛辛苦苦的去找轮子, 这里都有

开发一个网站,用户密码你打算怎么存储

我们在开发网站或者APP时,首先要解决的问题,就是如何安全地传输和存储用户的密码。一些大公司的用户数据库泄露事件也时有发生,带来非常大的负面影响。因此,如何安全传输存储用户密码,是每位程序员必备的基础。本文将跟大家一起学习,如何安全传输存储用户的密码。 1....
继续阅读 »

我们在开发网站或者APP时,首先要解决的问题,就是如何安全地传输和存储用户的密码。一些大公司的用户数据库泄露事件也时有发生,带来非常大的负面影响。因此,如何安全传输存储用户密码,是每位程序员必备的基础。本文将跟大家一起学习,如何安全传输存储用户的密码。


image.png


1. 如何安全地传输用户的密码


要拒绝用户密码在网络上裸奔,我们很容易就想到使用https协议,那先来回顾下https相关知识吧~


1.1 https 协议


image.png



  • 「http的三大风险」


为什么要使用https协议呢?http它不香吗? 因为http是明文信息传输的。如果在茫茫的网络海洋,使用http协议,有以下三大风险:




  • 窃听/嗅探风险:第三方可以截获通信数据。

  • 数据篡改风险:第三方获取到通信数据后,会进行恶意修改。

  • 身份伪造风险:第三方可以冒充他人身份参与通信。



如果传输不重要的信息还好,但是传输用户密码这些敏感信息,那可不得了。所以一般都要使用https协议传输用户密码信息。



  • 「https 原理」


https原理是什么呢?为什么它能解决http的三大风险呢?



https = http + SSL/TLS, SSL/TLS 是传输层加密协议,它提供内容加密、身份认证、数据完整性校验,以解决数据传输的安全性问题。



为了加深https原理的理解,我们一起复习一下 一次完整https的请求流程吧~


image.png




  1. 客户端发起https请求

  2. 服务器必须要有一套数字证书,可以自己制作,也可以向权威机构申请。这套证书其实就是一对公私钥。

  3. 服务器将自己的数字证书(含有公钥、证书的颁发机构等)发送给客户端。

  4. 客户端收到服务器端的数字证书之后,会对其进行验证,主要验证公钥是否有效,比如颁发机构,过期时间等等。如果不通过,则弹出警告框。如果证书没问题,则生成一个密钥(对称加密算法的密钥,其实是一个随机值),并且用证书的公钥对这个随机值加密。

  5. 客户端会发起https中的第二个请求,将加密之后的客户端密钥(随机值)发送给服务器。

  6. 服务器接收到客户端发来的密钥之后,会用自己的私钥对其进行非对称解密,解密之后得到客户端密钥,然后用客户端密钥对返回数据进行对称加密,这样数据就变成了密文。

  7. 服务器将加密后的密文返回给客户端。

  8. 客户端收到服务器发返回的密文,用自己的密钥(客户端密钥)对其进行对称解密,得到服务器返回的数据。




  • 「https一定安全吗?」


https的数据传输过程,数据都是密文的,那么,使用了https协议传输密码信息,一定是安全的吗?其实不然




  • 比如,https 完全就是建立在证书可信的基础上的呢。但是如果遇到中间人伪造证书,一旦客户端通过验证,安全性顿时就没了哦!平时各种钓鱼不可描述的网站,很可能就是黑客在诱导用户安装它们的伪造证书!

  • 通过伪造证书,https也是可能被抓包的哦。



1.2 对称加密算法


既然使用了https协议传输用户密码,还是 「不一定安全」,那么,我们就给用户密码 「加密再传输」 呗~


加密算法有 「对称加密」「非对称加密」 两大类。用哪种类型的加密算法 「靠谱」 呢?



对称加密:加密和解密使用 「相同密钥」 的加密算法。



image.png
常用的对称加密算法主要有以下几种哈:


image.png
如果使用对称加密算法,需要考虑 「密钥如何给到对方」 ,如果密钥还是网络传输给对方,传输过程,被中间人拿到的话,也是有风险的哦。


1.3 非对称加密算法


再考虑一下非对称加密算法呢?



「非对称加密:」 非对称加密算法需要两个密钥(公开密钥和私有密钥)。公钥与私钥是成对存在的,如果用公钥对数据进行加密,只有对应的私钥才能解密。



image.png


常用的非对称加密算法主要有以下几种哈:


image.png



如果使用非对称加密算法,也需要考虑 「密钥公钥如何给到对方」 ,如果公钥还是网络传输给对方,传输过程,被中间人拿到的话,会有什么问题呢?「他们是不是可以伪造公钥,把伪造的公钥给客户端,然后,用自己的私钥等公钥加密的数据过来?」 大家可以思考下这个问题哈~



我们直接 「登录一下百度」 ,抓下接口请求,验证一发大厂是怎么加密的。可以发现有获取公钥接口,如下:


image.png
再看下登录接口,发现就是RSA算法,RSA就是 「非对称加密算法」 。其实百度前端是用了JavaScript库 「jsencrypt」 ,在github的star还挺多的。


image.png
因此,我们可以用 「https + 非对称加密算法(如RSA)」 传输用户密码~


2. 如何安全地存储你的密码?


假设密码已经安全到达服务端啦,那么,如何存储用户的密码呢?一定不能明文存储密码到数据库哦!可以用 「哈希摘要算法加密密码」 ,再保存到数据库。



哈希摘要算法:只能从明文生成一个对应的哈希值,不能反过来根据哈希值得到对应的明文。



2.1  MD5摘要算法保护你的密码


MD5 是一种非常经典的哈希摘要算法,被广泛应用于数据完整性校验、数据(消息)摘要、数据加密等。但是仅仅使用 MD5 对密码进行摘要,并不安全。我们看个例子,如下:


public class MD5Test {  
    public static void main(String[] args) {
        String password = "abc123456";
        System.out.println(DigestUtils.md5Hex(password));
    }
}

运行结果:
0659c7992e268962384eb17fafe88364


在MD5免费破解网站一输入,马上就可以看到原密码了。。。


image.png
试想一下,如果黑客构建一个超大的数据库,把所有20位数字以内的数字和字母组合的密码全部计算MD5哈希值出来,并且把密码和它们对应的哈希值存到里面去(这就是 「彩虹表」 )。在破解密码的时候,只需要查一下这个彩虹表就完事了。所以 「单单MD5对密码取哈希值存储」 ,已经不安全啦~


2.2  MD5+盐摘要算法保护用户的密码


那么,为什么不试一下MD5+盐呢?什么是 「加盐」



在密码学中,是指通过在密码任意固定位置插入特定的字符串,让散列后的结果和使用原始密码的散列结果不相符,这种过程称之为“加盐”。



用户密码+盐之后,进行哈希散列,再保存到数据库。这样可以有效应对彩虹表破解法。但是呢,使用加盐,需要注意一下几点:




  • 不能在代码中写死盐,且盐需要有一定的长度(盐写死太简单的话,黑客可能注册几个账号反推出来)

  • 每一个密码都有独立的盐,并且盐要长一点,比如超过 20 位。(盐太短,加上原始密码太短,容易破解)

  • 最好是随机的值,并且是全球唯一的,意味着全球不可能有现成的彩虹表给你用。



2.3 提升密码存储安全的利器登场,Bcrypt


即使是加了盐,密码仍有可能被暴力破解。因此,我们可以采取更 「慢一点」 的算法,让黑客破解密码付出更大的代价,甚至迫使他们放弃。提升密码存储安全的利器~Bcrypt,可以闪亮登场啦。



实际上,Spring Security 已经废弃了 MessageDigestPasswordEncoder,推荐使用BCryptPasswordEncoder,也就是BCrypt来进行密码哈希。BCrypt 生而为保存密码设计的算法,相比 MD5 要慢很多。



看个例子对比一下吧:


public class BCryptTest {  

    public static void main(String[] args) {
        String password = "123456";
        long md5Begin = System.currentTimeMillis();
        DigestUtils.md5Hex(password);
        long md5End = System.currentTimeMillis();
        System.out.println("md5 time:"+(md5End - md5Begin));
        long bcrytBegin = System.currentTimeMillis();
        BCrypt.hashpw(password, BCrypt.gensalt(10));
        long bcrytEnd = System.currentTimeMillis();
        System.out.println("bcrypt Time:" + (bcrytEnd- bcrytBegin));
    }
}

运行结果:


md5 time:47


bcrypt Time:1597


粗略对比发现,BCrypt比MD5慢几十倍,黑客想暴力破解的话,就需要花费几十倍的代价。因此一般情况,建议使用Bcrypt来存储用户的密码


3. 总结



  • 因此,一般使用https 协议 + 非对称加密算法(如RSA)来传输用户密码,为了更加安全,可以在前端构造一下随机因子哦。

  • 使用BCrypt + 盐存储用户密码。

  • 在感知到暴力破解危害的时候,「开启短信验证、图形验证码、账号暂时锁定」 等防御机制来抵御暴力破解。


作者:小王和八蛋
来源:juejin.cn/post/7260140790546251831
收起阅读 »

2022被裁员两次的应届毕业生的年终总结

前言 “生活的苦可以被疲劳麻痹、被娱乐转移,最终变得习以为常、得过且过,可以称之为钝化。学习的苦在于,始终要保持敏锐而清醒的认知,乃至丰沛的感情,这不妨叫锐化。” 1. 二月,初到上海 1.1 第一段艰辛的实习生涯 从学校到校园,仿佛好像是一瞬之间。现在回想...
继续阅读 »

前言


“生活的苦可以被疲劳麻痹、被娱乐转移,最终变得习以为常、得过且过,可以称之为钝化。学习的苦在于,始终要保持敏锐而清醒的认知,乃至丰沛的感情,这不妨叫锐化。”



1. 二月,初到上海


1.1 第一段艰辛的实习生涯


从学校到校园,仿佛好像是一瞬之间。现在回想起21年的秋招,也算是收获满满,拿下了不少大大小小好几家公司的offer。那时候对于面试题和自己的项目都有较为深刻的印象,由于本人表达能力还不错(面试一堆胡吹),经过五轮面试最终接下了壹药网的offer。 仿佛一切美好都在向我招手,世间是如此的美好。


image.png在2.17入职之后,也算是正式开启了社畜的角色。奈何在公司工作不到半个月之后,开始迎来了为期三个多月的疫情,疫情不仅是对公司有着强烈的冲击,对打工人也是晴天霹雳。


由于是第一次实习,Git工具根本就不会用 (此时省略一万点艰辛,以致于我们老大叫带我的导师,专门给我先培训好我的Git技能,在这里也是超级感谢我的导师,在远程办公 事务繁忙 我还贼菜的情况下,历时一个多月我的GIT终于出师)。

不过在实习期间,也学到了很多中型的公司的开发流程以及代码规范等等,也是宝贵的实习经历让我逐渐过渡到一个标准的社畜。


2.六月,第一次被裁员


在疫情解封的第一周的第三天下午,领导把我叫到会议室,通知所有的校招生全部解约。那时已是6.13号,校招已经结束,并且我已经答辩结束顺利 “毕业” 了。此时陷入了非常被动的局势,校招已经过了时间,社招没有工作经验。
那时候让我真真切切感受到互联网公司的不稳定,也让我感受到找工作的不容易。此时我也是被迫开始了海投模式,每天都在刷BOSS直聘,每天都在EMO ,并且面试题根本看不进去啊,谁能懂?

此时逃离上海成为了我最大的想法,奈何疫情当下,去哪里都要隔离 并且杭州的公司是一家回应的都没有,此时我内心是奔腾的。 有那种陷入谷底的绝望(没敢和家里面人说,只能自己硬抗)


2.1 试用期两个月,正式工两个月


肯定是上天眷顾我,觉得我自己硬扛着太不容易了。给我了个机会,在海投十天之后,那天上午突然一个电话打给我,问我下午有没有时间面试,此时我内心的感觉(只要你们愿意要我,我愿意当牛做马,工资啥的都无所谓,主要是给老板打工)。 当时也算是比较幸运,在我的再一次胡说海吹之下,拿到了第二家公司的offer。 试用期两个月,工资打八折。这家公司入职之后,公司全是年轻人,技术用的也很新,主要是都是河南人 真的亲切啊。我也是很快就融入了公司的氛围里面,开始称兄道弟的。两个月后在我的班门弄斧之下,顺利转正了,虽然自己陆陆续续也弄出了好几个线上较为严重的BUG 但还是在大家的努力下成功补救了回来。超级感谢当时公司里面的雷哥,权哥,昊哥等等,帮我帮了超级多。同时也督促我要一直看书一直学习来着。


xuexi.png


于是乎,周六周日有时间都会去公司熟悉业务,精进自己的代码能力。



早上上班拍的公司照片,真的超级好看鸭。


3.十一月,第二次被裁员


就这样在公司一直干着,经常会加班(1.5倍的加班费,真的超级香),可是后来也陆陆续续有些消息说公司业绩不太行,疫情(再一次给我送来了惊喜),然后11.25号又被老大 再一次叫到了办公室里面,开门见山,立马滚蛋。

就是如此狗血,就是这么残忍。我现在依稀记得,就在上周我又弄出了一个超级大的BUG,导致业务受到了极大的影响。

业务改版,对之前老的数据迁移有问题,并且新的数据也有部分问题(还是太不认真,太年轻了),导致投诉电话不断,产品直接都要崩溃。没办法,又有好多人给我擦屁股。然后第二周老板宣布裁员,我和一个前端都被开除了。那天上海降温超级明显,并且还下着小雨和我的心情是一样一样的。


dierci.jpg


那天拍的最后一次公司的图片


2.十二月,开启第三份工作


在第二次被裁员之后,我是真的对自己产生了深深地怀疑,也觉得为什么我一个应届毕业生要被裁员两次。不得不否认,我的技术水平是真的菜,代码水平也是真的烂,运气也真的好差劲。

对啊,为什么幸福不是我,我没有乱七八糟的圈子,不出去乱玩每天不是上班就是下班,下班就回去煮饭吃,看看书就睡觉,周末休息就回家,我不明白生活为什么要给予我如此重重的打击,可是生活总得继续下去,我也只能收拾好行李,再出发。
不过还好,在我摆烂了大概几天之后,我又开始再一次的海投模式 同样收到的回复很少,很少有需要2022届毕业生的,简历都不太好包装。好像上帝给我关了一扇门,总会给我开一扇窗。那个本来可以不认真对待的面试题,在我认认真真对待之后,成功收到了一面通知,然后线下的面试(我不得不承认有被打击到,但是我的胡说海吹的功夫也不是盖得),最终成功拿下了两家公司的offer(另一家没有细讲,因为没去,为什么没去,钱没给到位))。


zijie.jpg


面试路上,路过字节


2023年一月,找到对象


哈哈哈哈哈哈哈哈哈哈哈嗝,虽然2022年职场过得比较坎坷。但是我想告诉大家的是,大年初一我就遇到了我对象。哈哈哈哈哈哈哈哈哈哈嗝。她真的超级超级好,我也超级超级喜欢她。2023除了升职加薪,那就是好好爱她,带她吃好多好吃的,玩好多好玩的。

送大家一句话: 没娶的别慌,待嫁的别忙, 经营好自己,珍惜当下时光。一切该来的总会到。 怕什么,岁月漫长,你心地善良 终会有一人陪你骑马喝酒走四方


seeMovie.png


一起看的第一场电影


作者:厦天的梦想
来源:juejin.cn/post/7197411581927833655
收起阅读 »

回看 2023雷军年度演讲·《成长》

一、武大往事 1)武大学习 1987 年考上了武汉大学,武大图书馆看了一本书《硅谷之火》,奠定了一生的 梦想。创办一家伟大的公司,梦想之火彻底点燃。 大一新生,目标从想创办伟大的公司,到把书念好的正事思想观念的转变。如何把书读的不同凡响?确定一个两...
继续阅读 »

一、武大往事


武大往事.png


1)武大学习


硅谷之火.png



  • 1987 年考上了武汉大学,武大图书馆看了一本书《硅谷之火》,奠定了一生的 梦想。创办一家伟大的公司,梦想之火彻底点燃。


大一新生.png



  • 大一新生,目标从想创办伟大的公司,到把书念好的正事思想观念的转变。如何把书读的不同凡响?确定一个两年修改完大学四年的所有学分地域模式的目标。解决问题:

    • 学分制,如何选课?

    • 积极主动,找老乡学长请教。

    • 遇到的问题如何解决(认知:不是独一无二,绝大部分别人都遇到了,别人都解决了,你所需要做的就是找个懂的人问一问(这个能解决大问题))。




标准答案.png


2)如何搞定自学?



  • 课程难度大:数学系分离的计算机系,全部是数学专业数学,难度大。

  • 开窍(往下读,遇到看不懂的先跳过去),知识点不是绝对线性的。

  • 自学中寻找各种方法,用不同的方法处理自己学习中遇到的问题。

  • 当今社会瞬息万变,自己从事的职业可能不是自己所学的专业,相差很多。


两年修完所有学分.png



学习能力是最重要的能力,一定要掌握各种各样的学习方法,同时要养成终生学习的习惯,你才足以面未来所有的挑战。



3)搞定点名



  • 与高年级一起上,两倍的课程的难度,可能互相冲突。分析点名的目的,解决实际问题:加深老师对自己的印象,形成一个好的印象,之后点名缺课,就不是问题了。

  • 克服了重重困难,终于两年搞定大学的所有的学分。


二、第二个目标:成为一个优秀的程序员


成为优秀的程序员.png


上机资源少,只有一台 68000 的小型机。每周只有两次机会练习,每次只有两个小时。如何获取更多的计算机上机机会?


汇编代码.png



  • 寻找和获取额外的上机实践机会。

  • 在纸上练习打字键盘,提升自己的打字能力。

  • 在纸上写程序,写到像教材的示范程序一样。

  • 第一门编程语言《Pascal 语言编程设计》,并成功进入新版教材。

  • 进入老师实验室做课题,有更多机会使用计算机,最终修成了技术高手。

  • 参与内存管理开源工具开发,并在圈内广受欢迎。


三、第三个目标: 在学报上发论文


发论文.png
本科生发论文困难。90年度初,国内计算机病毒第一次大爆发。得到两位老师的帮助,写了第一波的杀毒软件,将这些内容整理出了论文,1992年8月《计算机研究与发展》 被录用了和发表。


敢想敢干.png



年轻人还是要敢想敢干... 一往无前,先干了再说,也许没有想象中那么难。



四、梦想与成长


梦想与成长.png



梦想被点燃了,我幸运的是真的把梦想当回事,并且学会了拆解成一个有一个的目标,然后竭尽全力去完成。



五、创业之旅


创业之旅.png
武汉电子一条街,从小企业蹭最新的电脑,到得到技术上的认可。到写加密软件。同时两台电脑的 一台写程序,一套跑测试(因为两台电脑,可以用 快乐加倍)。 15 天高强度开发,输出了 BITLOK 商业加密软件,1989 年 8 月发布,因为在圈内获得不少的关注买了很年,也因此获得了不少的收入。



一个人的能力再强,也是有限的,找互补的朋友一起干,更容易成功。



六、创业


80年末网络设备公司.png


创办三色公司(三色计算机部),包含四个创始人,每个人股份占比(25%)。 出现了管理上问题:



第一个问题:谁说了算?



1)创业维艰



  • 大学开始创业,开始解决问题,并获得了一些收获

  • 创业艰难的小故事

  • 创业失败,回归学校

  • 复盘问题



创办公司太不容易,光有技术是不够的,还有太多的东西要学。



2)创业与成长


创业.png


2.1) 金山


快与远.png
金山内部, 35 年来最重要的经验:



一个人可能走的更快,但一群人走,才能走的更远。



也正是如此完成了,从程序员到管理者的蜕变;


2.2)创办小米


改变中国制造业,创新的商业模式,梦想逐步实现。



回望三十多年的创业之旅,就是不断追寻梦想并不断成长的过程。



七、高端探索


高端探索.png


争议问题:



  1. 做高端太难了,能不能不做?

  2. 用小米品牌能做成高端吗?



高端是小米发展的必由之路,更是生死之战。



影像探索



  • dxo 评测第一,但是用户不满意

  • 徕卡老师,与徕卡合作

  • 摄影文化、人文摄影

  • 小米 13 小屏探索


八、认知与成长


认知的突破.png



只有认知的突破,才能带来真正的成长。




每一段经历,每一次蜕变,都是一次认知的突破,更是一次关键的成长。



九、在时代变迁的洪流中,怎么才能保持内心的平静呢?


成长.png



  • 成长!



只有脚踏实地的成长,才有足够的自信、勇气与决心,去迎接所有未知的挑战;只有脚踏实地的成长,才能让自己内心充实,眼里有光,时时刻刻充满力量。




  • 人生是一场马拉松,一时的成败得失,都不那么重要。

  • 所有人生难题,都将在成长中找到答案。

  • 人因梦想而伟大,又因坚持梦想而成长!


作者:进二开物
来源:juejin.cn/post/7276674188215386152
收起阅读 »

Android:实现一个简单带动画的展开收起功能

大家好,我是似曾相识2022。不喜欢唱跳篮球,但对杰伦的Rap却情有独钟。 今天给大家带来一个展开和收起的简单效果。如果只是代码中简单设置显示或隐藏,熟悉安卓系统的朋友都知道,那一定是闪现。所以笔者结合了动画,使得体验效果瞬间提升一个档次。话不多说,直接上效...
继续阅读 »

大家好,我是似曾相识2022。不喜欢唱跳篮球,但对杰伦的Rap却情有独钟。



今天给大家带来一个展开和收起的简单效果。如果只是代码中简单设置显示或隐藏,熟悉安卓系统的朋友都知道,那一定是闪现。所以笔者结合了动画,使得体验效果瞬间提升一个档次。话不多说,直接上效果:


1.gif


首先观察图中效果,视图有展开和折叠两种状态,右侧图标和文字会跟随这个状态改变。那么其中就有折叠的高度和展开的高度需要我们记录。折叠高度是固定的,展开高度需要动态获取。需要注意的是不能直接通过视图直接获取高度,因为视图的绘制和Activity的生命周期是不同步的,在Activity中直接lin.height获取高度无法保证此时的视图已经完成计算。这里直接用简单的post方式获取到绘制完成的总高度。原理是将这个消息放到队列最后一条,这样就可以保证回调方法中能够获取到真实的高度。


lin?.post {
val h = lin!!.height
hight = if (h > 0) h else baseHight

if (h > 0 && ivTop?.visibility == View.GONE) {
ivTop?.visibility = View.VISIBLE
}
}

接下来就是动画的使用和动态控制视图的高度了。这里需要用到属性动画,我们知道的属性动画有ValueAnimatorObjectAnimatorObjectAnimator是继承于ValueAnimator,说明ValueAnimator能做的事情ObjectAnimator也可以实现。由于我们要控制的视图不止一个,所以还是使用ValueAnimator方便点。通过addUpdateListener添加监听后,animation.animatedValue就是我们需要的当前值。在此处不停将当前高度赋值给视图,并且图标也根据这个值进行等比例的旋转以到达到视图不停更新。


//根据展开、关闭状态传入对应高度
val animator = ValueAnimator.ofInt(
if (isExpand) hight - baseHight else 0,
if (isExpand) 0 else hight - baseHight
)
animator.addUpdateListener { animation ->
val params = lin?.layoutParams
params?.height = if ((animation.animatedValue as Int) < baseHight) baseHight else (animation.animatedValue as Int) //当高度小于基础高度时 给与基础高度
lin?.layoutParams = params//拿到当前高度
//图标旋转
ivTop?.rotation = (animation.animatedValue as Int) * 180f / (hight - baseHight)

}
animator.duration = 500//动画时长
animator.start()

isExpand = !isExpand
tvExpand?.text = if (isExpand) "关闭" else "展开"

编写过程需要注意展开和收起状态下值的正确输入,在回调方法中获取对应的当前值并赋值。


好了,一个简单的展开收起功能就实现了,希望对大家有所帮助。


作者:似曾相识2022
来源:juejin.cn/post/7273079438991376439
收起阅读 »

韩国程序员面试考什么?

大家好,我是老三,在G站闲逛的时候,从每日热门上,看到一个韩国的技术面试项目,感觉有点好奇,忍不住点进去看看。 韩国的面试都考什么?有没有国内的卷呢? 可以看到,有8.k star,2.2k forks,在韩国应该算是顶流的开源项目了。 再看看贡献者,嗯,...
继续阅读 »

大家好,我是老三,在G站闲逛的时候,从每日热门上,看到一个韩国的技术面试项目,感觉有点好奇,忍不住点进去看看。


韩国的面试都考什么?有没有国内的卷呢?
瘦巴巴的老爷们


可以看到,有8.k star,2.2k forks,在韩国应该算是顶流的开源项目了。


star


再看看贡献者,嗯,明显看出来是韩国人。
贡献者


整体看一下内容。


第一大部分是计算机科学,有这些小类:



  • 计算机组成


计算机组成原理



  • 数据结构


数据结构




  • 数据库
    数据库




  • 网络




网络



  • 操作系统


操作系统


软件工程


先不说内容,韩文看起来也够呛,但是基础这一块,内容结构还是比较完整的。


第二大部分是算法:
算法


十大排序、二分查找、DFS\BFS…… 大概也是那些东西。


第三大部分是设计模式,内容不多。
设计模式


第四大部分是面试题:
面试题


终于到了比较感兴趣的部分了,点进语言部分,进去看看韩国人面试都问什么,随便抽几道看看:
面试题



  • Vector和ArrayList的区别?

  • 值传递 vs 引用传递?

  • 进程和线程的区别?

  • 死锁的四个条件是什么?

  • 页面置换算法?

  • 数据库是无状态的吗?

  • oracle和mysql的区别?

  • 说说数据库的索引?

  • OSI7层体系结构?

  • http和https的区别是?

  • DI(Dependency Injection)?

  • AOP(Aspect Oriented Programming)?

  • ……


定睛一看,有种熟悉的感觉,天下八股都一样么?


第五大部分是编程语言:
编程语言


包含了C、C++、Java、JavaScript、Python。


稍微看看Java部分,也很熟悉的感觉:



  • Java编译过程

  • 值传递 vs 引用传递

  • String & StringBuffer & StringBuilder

  • Thread使用


还有其它的Web、Linux、新技术部分就懒得再一一列出了,大家可以自己去看。


这个仓库,让我来评价评价,好,但不是特别好,为什么呢?大家可以看看国内类似的知识仓库,比如JavaGuide,那家伙,内容丰富的!和国内的相比,这个仓库还是单薄了一些——当然也可能是韩国的IT环境没那么卷,这些就够用了。


再扯点有点没的,我对韩国的IT稍微有一点点了解,通过Kakao。之前对接过Kakao的支付——Kakao是什么呢?大家可以理解为韩国的微信就行了,怎么说呢,有点离谱,他们的支付每天大概九点多到十点多要停服维护,你能想象微信支付每天有一个小时不可用吗?


也有同事对接过Kakao的登录,很简单的一个Oauth2,预估两三天搞定,结果也是各种状况,搞了差不多两周。


可能韩国的IT环境真的没有那么卷吧!


有没有对韩国IT行业、IT面试有更多了解的读者朋友呢?欢迎和老三交流。



对了,仓库地址是:github.com/gyoogle/tec…



作者:三分恶
来源:juejin.cn/post/7162709958574735397
收起阅读 »

帮你省时间,看看 bun v1.0 怎么用!

web
本文基于 Window Ubuntu WSL 环境测试,本文只选取重点,细节需查看文档 一、bun v1.0 做了什么? all in JavaScript/TypeScript app。看起真的很了不起! 作为JS/TS运行时 作为包管理工具和包运行...
继续阅读 »

本文基于 Window Ubuntu WSL 环境测试,本文只选取重点,细节需查看文档



一、bun v1.0 做了什么?



all in JavaScript/TypeScript app。看起真的很了不起!




  • 作为JS/TS运行时

  • 作为包管理工具和包运行器

  • 作为构建工具

  • 作为测试运行器

  • 对外提供 API


资源



二、安装 bun v1.0



bun 目前不支持 window 环境,但是可以在 wsl 中使用。



2.1) 各种安装方法



  • curl


curl -fsSL https://bun.sh/install | bash # 检查:which bun


  • 使用 npm 安装


npm install -g bun # 检查:which bun


  • 其他平台的安装方法



brew tap oven-sh/bun # for macOS and Linux
brew install bun # brew
docker pull oven/bun # docker

2.2) bun 提供的命令


命令描述
init初始化一个 bun 项目
run运行一个文件或者脚本
test运行测试
xbun x 的别名,类似于 npx
repl进入交互式环境
create使用模板创建项目
install安装依赖
add添加依赖
remove移除依赖
update更新依赖
link全局链接一个 npm 包
unlink移除全局链接的 npm 包
pm更多的包管理命令
build打包 TypeScript/JavaScript 文件到单个文件
update获取最新的 bun 版本

三、作为 JS/TS 运行时


bun index.js // 运行 js 文件
bun run index.ts // 运行 ts 文件
// 其他相关的 tsx/jsx/...

如果直接运行 index.tsx 没有任何依赖会报错:


const Ad = <div>ad</div>

console.log(Ad)

// bun index.tsx
// 错误:Cannot find module "react/jsx-dev-runtime" from "/xxx/index.tsx"

四、作为包管理工具和包运行器


4.1)初始化一个项目


bun init # 与 npm init -y 类似

4.2)使用脚手架


# 与 npx 类似, 以下可能常用的初始化项目的脚手架
bun create react-app
bun create remix
bun create next-app
bun create nuxt-app

五、作为构建工具



  • 初始化一个简单的项目


cd your_dir
bun init # 默认
bun add react react-dom # 添加依赖包
touch index.tsx


  • 添加 TSX 文件内容


import React from 'react'

const App = () => {
return <div>This is App</div>
}


  • 打包 bun build


bun build ./index.tsx --outfile=bundle.js


提示:bundle.js 中打包了 react 相关的包。



六、作为测试运行器


测试与 Jest 非常相似, 以下是官方示例:


import { expect, test } from "bun:test";

test("2 + 2", () => {
expect(2 + 2).toBe(4);
});

运行时测试:


bun test

速度很快,输出结果:


bun test v1.0.0 (822a00c4)

t.test.ts:
✓ 2 + 2 [1.03ms]

1 pass
0 fail
1 expect() calls
Ran 1 tests across 1 files. [92.00ms]

七、对外提供 API


项目描述
HTTP 服务处理 HTTP 请求和响应
WebSocket 套接字支持 WebSocket 连接
Workers 工具在后台运行多线程任务
Binary data处理二进制数据
Streams流处理
File I/O文件输入/输出操作
import.meta访问模块元信息
SQLite使用 SQLite 数据库
FileSystemRouter文件系统路由器
TCP socketsTCP 套接字通信
Globals全局变量和对象
Child processes创建子进程
Transpiler转译器
Hashing哈希函数和算法
Console控制台输出
FFI外部函数接口
HTMLRewriterHTML 重写和转换
Testing测试工具和框架
Utils实用工具函数
Node-APINode.js API 访问

八、展望



  • windows 支持


小结


本文主要讲解了 bun v1.0 中所做的事情,包含极速的运行时、一体化的包管理工具、内置测试运行器、构建应用(打包)和对象提供各种类型的 API(兼容 Node API(非完全)),如此功能能完整的 bun 你想尝试一下吗?


作者:进二开物
来源:juejin.cn/post/7277399972916428835
收起阅读 »

百度工程师移动开发避坑指南——Swift语言篇

iOS
上一篇我们介绍了移动开发常见的内存泄漏问题,见《百度工程师移动开发避坑指南——内存泄漏篇》。本篇我们将介绍Swift语言部分常见问题。 对于Swift开发者,Swift较于OC一个很大的不同就是引入了可选类型(Optional),刚接触Swift的开发者很容易...
继续阅读 »

上一篇我们介绍了移动开发常见的内存泄漏问题,见《百度工程师移动开发避坑指南——内存泄漏篇》。本篇我们将介绍Swift语言部分常见问题。


对于Swift开发者,Swift较于OC一个很大的不同就是引入了可选类型(Optional),刚接触Swift的开发者很容易在相关代码上踩坑。


本期我们带来与Swift可选类型相关的几个避坑指南:可选类型要判空;避免使用隐式解包可选类型;合理使用Objective-C标识符;谨慎使用强制类型转换。希望能对Swift开发者有所帮助。


一、可选类型(Optional)要判空


在Objective-C中,可以使用nil来表示对象为空,但是使用一个为nil的对象通常是不安全的,如果使用不慎会出现崩溃或者其它异常问题。在Swift中,开发者可以使用可选类型表示变量有值或者没有值,可以更加清晰的表达类型是否可以安全的使用。如果一个变量可能为空,那么在声明时可以使用?来表示,使用前需要进行解包。例如:

var optionalString: String?

在使用可选类型对象时,需要进行解包操作,有两种解包方式:强制解包与可选绑定。


强制解包使用 ! 修饰一个可选对象 ,相当于告诉编译器『我知道这是一个可选类型,但在这里我可以保证他不为空,编译时请忽略此处的可空校验』,例如:

let unwrappedString: String = optionalString!  // 运行时报错:Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional value

这里使用 ! 进行了强制解包,如果optionalString为nil,将会产生运行时错误,发生崩溃。**因此,在使用 ! 进行强制解包时,必须保证变量不为nil,要对变量进行判空处理,**如下:

if optionalString != nil {
let unwrappedString = optionalString!
}

相较于强制解包的不安全性,一般而言推荐另一种解包方式,即可选绑定。例如:

if let optionalString = optionalString {
// 这里optionalString不为nil,是已经解包后的类型,可以直接使用
}

综上,在对可选类型进行解包时应尽量避免使用强制解包,采用可选绑定替代。如果一定要使用强制解包,那么必须在逻辑上完全保证类型不为空,并且做好注释工作,以增加后续代码的可维护性。


二、避免使用隐式解包可选类型(Implicitly Unwrapped Optionals)


由于可选类型每次使用之前都需要进行显式解包操作,有时变量在第一次赋值之后,就会一直有值,如果每次使用都显式解包,显得繁琐,Swift引入了隐式解包可选类型,隐式解包可选类型可以使用 ! 来表示,并且使用时不需要显式解包,可以直接使用,例如:

var implicitlyUnwrappedOptionalString: String! = "implicitlyUnwrappedOptionalString"
var implicitlyString: String = implicitlyUnwrappedOptionalString

上述例子的隐式解包,在编译和运行过程中都不会发生问题,但如果在两行代码中间插入一行 implicitlyUnwrappedOptionalString = nil将会产生运行时错误,发生崩溃。


在我们实际项目中,一个模块通常由多人维护,通常很难保证变量在第一次赋值之后一直不为nil或者只有在第一次正确赋值之后使用,从安全角度考虑,在使用隐式解包类型之前也要进行判空操作,但这样就和使用可选类型没有区别。对于可选类型(?),不经过解包直接使用编译器会报告错误,对于隐式解包类型,则可直接使用,编译器无法帮助我们做出是否为空的检查。因此,在实际项目中,不推荐使用隐式解包可选类型,如果一个变量是非空的,则选择非空类型,如果不能保证是非空的,则选择使用可选类型。


三、合理使用Objective-C标识符


与Swift不同的是,OC是一种动态类型语言,对于OC而言没有optional这个概念,无法在编译期间检查对象是否可空。苹果在 Xcode 6.3 中引入了一个 Objective-C 的新特性:Nullability Annotations,允许编码时使用nonnull、nullable、null_unspecified等标识符告诉编译器对象是否是可空或者非空的,各标识符含义如下:


nonnull,表示对象是非空的,有__nonnull和_Nonnull等价标识符。


nullable,表示对象可能是空的,有__nullable 和_Nullable等价标识符。


null_unspecified,不知道对象是否为空,有__null_unspecified等价标识符。


OC标识符标注的对象类型和Swift类型对应关系如下:




除了以上标识符外,现在通过Xcode创建的头文件默认被 NS_ASSUME_NONNULL_BEGIN 和 NS_ASSUME_NONNULL_END 包住,即在这之间声明的对象默认标识符是 nonnull 的。


在Swift与OC混编场景,编译器会根据OC标识符将OC的对象类型转换成Swift类型,如果没有显式的标识,默认是null_unspecified。例如:

@interface ExampleOCClass : NSObject
// 没有指定标识符,且没有被NS_ASSUME_NONNULL_BEGIN和NS_ASSUME_NONNULL_END包裹,标识符默认为null_unspecified
+ (ExampleOCClass *)getExampleObject;
@end

@implementation ExampleOCClass
+ (ExampleOCClass *)getExampleObject {
return nil; // OC代码直接返回nil
}
@end
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let _ = ExampleOCClass.getExampleObject().description // 报错:Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value
}
}

在上面例子中,Swift代码调用OC接口获取一个对象,编译器隐式的将OC接口返回的对象转换为隐式解包类型来处理。由于隐式解包类型可以不显式解包直接使用,使用者往往会忽略OC返回的是隐式解包类型,不通过判空而直接使用。但当代码执行时,由于OC接口返回了一个nil,导致Swift代码解包失败,发生运行时错误。


在实际编码中,推荐显式指定OC对象为nonnull或者nullable,针对上述代码进行修改后如下:

@interface ExampleOCClass : NSObject
/// 获取可空的对象
+ (nullable ExampleOCClass *)getOptionalExampleObject;
/// 获取不可空的对象
+ (nonnull ExampleOCClass *)getNonOptionalExampleObject;
@end

@implementation ExampleOCClass
+ (ExampleOCClass *)getOptionalExampleObject {
return nil;
}
+ (ExampleOCClass *)getNonOptionalExampleObject {
return [[ExampleOCClass alloc] init];
}
@end
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 标注nullable后,编译器调用接口时,会强制加上 ?
let _ = ExampleOCClass.getOptionalExampleObject()?.description
// 标注nonnull后,编译器将会把接口返回当做不可空来处理
let _ = ExampleOCClass.getNonOptionalExampleObject().description
}
}

在OC对象加上nonnull或者nullable标识符后,相当于给OC代码增加了类似Swift的『静态类型语言的特性』,使得编译器可以对代码进行可空类型检测,有效的降低了混编时崩溃的风险。但这种『静态特性』并不对OC完全有效,例如以下代码,虽然声明返回类型是nonnull的,但是依然可以返回nil:

@implementation ExampleOCClass
+ (nonnull ExampleOCClass *)getNonOptionalExampleObject {
return nil; // 接口声明不可空,但实际上返回一个空对象,可以通过编译,如果Swift当作非空对象使用,则会发生崩溃
}
@end
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
ExampleOCClass.getNonOptionalExampleObject().description
}
}

基于以上例子,依然会产生运行时错误。从安全性的角度上来说,似乎Swift最好在使用所有OC的接口时都进行判空处理。但实际上这将导致Swift的代码充斥着大量冗余的判空代码,大大降低代码的可维护性,同时也违背了『暴露问题,而非隐藏问题』的编码原则,并不推荐这么做,合理的做法是在OC侧做好安全校验,OC对返回类型应做好检验,保证返回类型的正确性,以及返回值和标识符能够对应。


综合来看,OC侧标识符最好遵循如下使用原则:


1、不推荐使用NS_ASSUME_NONNULL_BEGIN和NS_ASSUME_NONNULL_END,因为默认修饰符是nonnull的,在实际开发中很容易忽略返回的对象是否为空。返回空则会导致Swift运行时错误。推荐所有涉及混编的OC接口都需要显式使用相应的标识符修饰。


2、OC接口要谨慎使用 nonnull 修饰 ,必须确保返回值不可能是空的情况下使用,任何不能确定不可空的接口都需要标注为nullable。


3、为避免Swift侧不必要的类型、判空等校验(违背Swift设计理念),在理想状态下需在OC侧进行类型的校验,保证返回对象和标注的标识符完全正确,这样Swift则可以完全信赖OC返回的对象类型。


4、在Swift调用OC代码时,要关注OC返回的类型,尤其是返回隐式解包类型时,要做好判空处理。


5、在OC代码支持Swift调用前,提前对OC代码做好返回类型和标识符的检查,确保返回Swift的对象是安全的。


四、谨慎使用强制类型转换


GEEK TALK


Swift 作为强类型语言,禁止一切默认类型转换,这要求编码者需要明确定义每一个变量的类型,在需要类型转换时必须显式的进行类型转换。Swift可以使用as和as?运算符进行类型转换。


as运算符用于强制类型转换,在类型兼容情况下,可以将一个类型转换为另一个类型,例如:

var d = 3.0 // 默认推断为 Double 类型
var f: Float = 1.0 // 显式指定为 Float 类型
d = f // 编译器将报错“Cannot assign value of type 'Float' to type 'Double'”
d = f as Double // 需要将Float类型转换为Double类型,才能赋值给f

除了以上列举的基本类型外,Swift还兼容基础类型与对应的OC类型的转换,比如NSArray/Array、NSString/String、NSDictionary/Dictionary。


如果类型转换失败,将会导致运行时错误。例如:

let string: Any = "string"
let array = string as Array // 运行时错误

这里string变量实际是一个String类型,尝试将String类型转换成Array类型,将导致运行时错误。


另一种类型转换的方式是使用as?运算符,如果转换成功,返回一个转换类型的可选类型,如果转换失败,返回nil。例如:

let string: Any = "string"
let array = string as? Array // 转换失败,不会产生运行时错误

这里由于无法将String类型转换为Array类型,因此转换失败,array变量的值为nil,但不会产生运行时错误。


综合来看,在进行类型转换时,需要注意以下几点:


1、类型转换只能在兼容的类型之间进行,例如Double和Float可以相互转换,但String和Array之间不能相互转换。


2、如果使用as进行强制类型转换,需要确保转换是安全的,否则将会导致运行时错误。如果不能确保转换类型之间是兼容的,则应该使用as?运算符,例如将网络数据解析成模型数据时,无法保证网络数据的类型,应该使用as?。


3、在使用as?运算符进行类型转换时,需要注意返回值可能为nil的情况。


----------  END  ----------


推荐阅读【技术加油站】系列:


百度工程师移动开发避坑指南——内存泄漏篇


百度程序员开发避坑指南(Go语言篇)


百度程序员开发避坑指南(3)


百度程序员开发避坑指南(移动端篇)


百度程序员开发避坑指南(前端篇)


作者:百度Geek说
链接:https://juejin.cn/post/7236554895141716026
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

为什么react中的hooks都要放在顶部?

1. 使用场景: 公司开会的时候有师兄问到为什么hooks定义一般都写在顶部,对于这个问题我以前总结过,这次看了 react新文档后我给出更加详细的解释并给出具体代码来解释为什么要放在顶部。 2.官网解释: 1.官网截图镇楼: 2.那我写在条件语句中会怎样 ...
继续阅读 »

1. 使用场景:


公司开会的时候有师兄问到为什么hooks定义一般都写在顶部,对于这个问题我以前总结过,这次看了
react新文档后我给出更加详细的解释并给出具体代码来解释为什么要放在顶部。


2.官网解释:


1.官网截图镇楼:




2.那我写在条件语句中会怎样


我给出一段代码:其中const [message, setMessage] = useState('');写在了条件语句里面

import { useState } from 'react';

export default function FeedbackForm() {
const [isSent, setIsSent] = useState(false);
if (isSent) {
return <h1>Thank you!</h1>;
} else {
// eslint-disable-next-line
const [message, setMessage] = useState('');
return (
<form onSubmit={e => {
e.preventDefault();
alert(`Sending: "${message}"`);
setIsSent(true);
}}>
<textarea
placeholder="Message"
value={message}
onChange={e => setMessage(e.target.value)}
/>
<br />
<button type="submit">Send</button>
</form>
);
}
}

效果图:这是一个收集用户反馈的小表单。当反馈被提交时



 它应该显示一条感谢信息,当我点击确定时出现一条错误。




“渲染的 hooks 比预期的少”


3.那我不写在顶部可能会怎样


下方的const [message, setMessage] = useState('');并没有写在顶部

   import { useState } from 'react';

export default function FeedbackForm() {
const [isSent, setIsSent] = useState(false);
if (isSent) {
return <h1>Thank you!</h1>;
}
const [message, setMessage] = useState('');
return (
<form onSubmit={e => {
e.preventDefault();
alert(`Sending: "${message}"`);
setIsSent(true);
}}>
<textarea
placeholder="Message"
value={message}
onChange={e => setMessage(e.target.value)}
/>
<br />
<button type="submit">Send</button>
</form>
);
}
}

效果图:



 点击确认后:
同样出现这个错误:提前return导致后面一个hooks没有渲染。




4.原因分析


从源码的角度来说的话,React会在内部创建一个名为“Hooks”(中文为钩子)的数据结构来追踪每个组件的状态。


在函数组件中调用Hook时,React会根据Hook的类型将其添加到当前组件的Hooks链表中。然后,React会将这些Hooks存储在Fiber节点的“memoizedState”字段中,以便在下一次渲染时使用。


如果你在代码中多次调用同一个Hook,React会根据Hooks的顺序将其添加到当前组件的Hooks链表中。这样,React就可以确定哪个状态应该与哪个组件关联,并且能够正确地更新UI。


以下是一个示例代码片段:

import { useState, useEffect } from 'react';

function useCustomHook() {

const [count, setCount] = useState(0);

useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
return [count, setCount];
}

export default function MyComponent() {

const [count, setCount] = useCustomHook();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

在上面的代码中,useCustomHook是一个自定义Hook,它使用useStateuseEffectHook来管理状态。在MyComponent中,我们调用自定义Hook并使用返回值来渲染UI。


由于useCustomHook只能在函数组件或其他自定义Hooks的最顶层调用,我们不能将它嵌套在条件语句、循环或其他函数内部。如果这样做,React将无法正确追踪状态并更新UI,可能导致不可预测的结果。如果我们条件渲染中使用可能导致没有引入useCustomHook(),从而导致错误。


总结描述就是创建了一个链表,当在条件语句中使用hooks时可能会导致前后两次链表不同,从而导致错误,所以我们必须尽可能避免这种错误从而写在顶部。


作者:北海天空
链接:https://juejin.cn/post/7223586612927971388
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

😕😕刚工作三天就被裁是一种怎样的体验

前言 还有谁?刚上三天班就被公司公司的工作不适合我,叫我先提升一下。 后面我也向公司那边讨要了一个说法,我只能说他们那边的说辞让我有些不服气。 现在之所以把这件事在掘金上记录一下,一是记录一下自己的成长轨迹,二也是想问问大家的看法  经过 我今年大三...
继续阅读 »

前言


还有谁?刚上三天班就被公司公司的工作不适合我,叫我先提升一下。


后面我也向公司那边讨要了一个说法,我只能说他们那边的说辞让我有些不服气。


现在之所以把这件事在掘金上记录一下,一是记录一下自己的成长轨迹,二也是想问问大家的看法 



经过


我今年大三,在江西的一所普通大学。


今年三月份开始学的前端,然后到了八月底,自己手上也有了两个玩具项目,就开始背一背八股文,也尝试去体验一下面试的滋味。


一直陆陆续续的突然发现了这家公司A,因为听说A可以接受大三远程实习,所以我就很努力的开始准备这家的面试。


到了九月底,我记得我那个时候还在上课,突然那边打电话给我,问我现在是否能面试?因为这次比较突兀,所以那边也没问什么问题,就问了一些很基础的react hooks以及深浅拷贝。然后就说我的面试通过了,但正式上班之前他要布置一个任务给我,叫我去模仿一下一款小程序,只要实现里面一些页面和功能即可。他说这些天就相当于我的试用期,看我配不配他们给我的100元一天的薪水。


大概到了10月13号,他们说我仿写的项目达到了他们的预期,可以把我的一些身份信息交给他了,然后17号正式入职。讲真的那个时候我还是很开心的,毕竟要开始自己第一份工作了,虽然收入不高,但足以让我不用再向家里要生活费了,以及后面寒假和明年暑假的时候也可以更好面一些大厂的实习。


10月17号,这一天我都没开始写代码,因为他那边的项目我运行不起来,而且他们那边的代码是用了函数式组件和类式组件混用,以及一些taro的知识。他们就干脆叫我自己重写一下他们的项目,用h5开发即可。


10月18号,我在这一天写了一白天的代码,自我感觉还可以,晚上到了git提交阶段,问题出现了,还是大问题。因为在git操作这一块我不太熟悉,自己之前也都是在gitee上和vscode绑定进行代码的提交,指令没怎么用过。然后用我自己用http复制仓库连接这一步它总报错,说拒绝连接。为此我在网上搜了好多种方法都没有找到解决办法,最后实在不得已问了他们。反正那一个晚上确实弄了好久也没弄好把我心态也给搞崩了,也把他们问的有点烦了。这一块是我自己的问题。


10月19号,那天一从床上蹦起来,我又开始了上传提交工作,果然睡了一觉效率高了很多,花了半个小时终于完成了昨天我一个晚上的工作。然后我又开始了项目的还原工作。一直到了晚上我才开始问了一个问题,问题都还没叙述完,他那边就来电话了,说我暂时不适合这份工作。。




沟通


他也打电话和我沟通了一下,就是他认为:


首先我样式写的有问题。关于这一点我在入职之前就和他说了我这一块不太好,但是我觉得我自己写的样式虽然不好,但是也绝对不会很差的那种,最多就是写的不够优雅。


其次就是他觉得我和他沟通有问题。比如这个项目,他叫我在他给的基础上完善一些功能设置一些接口,然后我和他说要不我先把他给的项目先还原了,再在这个基础上再进行添加。他说了OK。结果我做完后他又认为我还原页面还是不行,说这样写后面还要再重新写过,等于没写。。。


最后也是让我特别不解的地方,他说我要转变心态,不能以学习的心态来做这份工作。这我能理解,公司招人当然是要人来干活的,但我每天只会问他一两个问题,而且我在问这些问题之前都至少自己思考过半个小时以上才来找他。对于这点我自己也感觉迷,因为我知道问多了问题肯定会很麻烦人家,但如果不问问题,全靠我自己解决,这样每天的产出又很少,而且他那边都没有给我布置过每日任务,那几天都是我准备干什么然后和他说一声。


虽然他最后也说了,他还要考虑考虑,下个礼拜一给我答复。但是我今天还是忍不住,自己也和他说了一些我的看法。




我全文大概是这么说的:



在你考虑留不留我之前我也想说几句话,我觉得成年人处理事情应该要严谨一点。拿你对我的要求举例吧,首先至于我的能力,没错,我的能力肯定是有问题的,在面试和入职之前我就把我的问题和你说了,你也说这是小事,后面可以学。然后我是在你这里通过了面试的,面试通过起码能说明你对我能力的一种认可吧。面试通过后你叫我去仿小程序,说是试用期的意思,好,我也认真完成了,你也说我可以交作业了。这难道不意味着我试用期也通过了吗?然后我们开始谈协议,叫我签三个月还是六个月,叫我交材料。我现在还没进入社会,我也不知道你这边的协议有没有法律效力,但我还是很信任你,所以没和你谈协议这边的严谨性和合法性。结果我等来的就是工作三天被你说不合适,我还是个学生,没有进入社会也不知道这样算不算毁约,因为我不懂,而且对我来说这也不是个重点,重要的是一个公司对他们自己承诺的一个态度。其次,就是你说我要换一种心态,不能以学习的心态来做这份工作,我能理解,公司招人当然是要人来干活的,你平常的工作很忙我知道,总这样问你问题肯定会让你很烦,但我每天真的就是只会问你一两个问题,而且我在问这些问题之前都至少自己思考过半个小时以上才来找你的。对于这一点我也感觉很委屈,我知道问多了问题会麻烦你,但如果不问问题,全靠我自己解决,这样每天的产出肯定又不达标,不等你来说我,我自己也过意不去。问又不是,不问又不是。害。。。最后我觉得按你的要求的话,你不应该去招一天100的实习生来帮你干这种活,应该招正式员工。



最后问他要三天薪水的时候还被他扣了两天,第一天说我没提交代码,他说他之前和我说过,但我看协议上根本就没有写,然后第三天那个又不算。。。
更离谱的是一天薪水还说要过几天给我。。。。


补一张协议




最后


自己肯定是也有问题的,自身的实力肯定有待提升,但他的说辞真的令我不满意。


远程实习我也有点怕了,难道每天问一两个问题都不行吗?


另外我在合同法律这一块应该也要认真严谨一点,当时是真的比较信任他,所以没怎么注意。


害,过去了的就让它过去吧,可惜少了一段实习经历,但我也多出来了很多时间去学一些新的东西,可以好好准备一下寒假实习。


作者:大眼睛图图
链接:https://juejin.cn/post/7156483709338648613
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

你可能并不需要useEffect

相信大家在写react时都有这样的经历:在项目中使用了大量的useEffect,以至于让我们的代码变得混乱和难以维护。 难道说useEffect这个hook不好吗?并不是这样的,只是我们一直在滥用而已。 在这篇文章中,我将展示怎样使用其他方法来代替useEff...
继续阅读 »

相信大家在写react时都有这样的经历:在项目中使用了大量的useEffect,以至于让我们的代码变得混乱和难以维护。


难道说useEffect这个hook不好吗?并不是这样的,只是我们一直在滥用而已。


在这篇文章中,我将展示怎样使用其他方法来代替useEffect。


什么是useEffect


useEffect允许我们在函数组件中执行副作用。它可以模拟 componentDidMount、componentDidUpdate 和componentWillUnmount。我们可以用它来做很多事情。但是它也是一个非常危险的钩子,可能会导致很多bug。


为什么useEffect是容易出现bug的


来看一个定时器的例子:

import React, { useEffect } from 'react'

const Counter = () => {
const [count, setCount] = useState(0)

useEffect(() => {
const timer = setInterval(() => {
setCount((c) => c + 1)
}, 1000)
})

return <div>{count}</div>
}

这是一个非常常见的例子,但是它是非常不好。因为如果组件由于某种原因重新渲染,就会重新设置定时器。该定时器将每秒调用两次,很容易导致内存泄漏。


怎样修复它?


useRef

import React, { useEffect, useRef } from 'react'

const Counter = () => {
const [count, setCount] = useState(0)
const timerRef = useRef()

useEffect(() => {
timerRef.current = setInterval(() => {
setCount((c) => c + 1)
}, 1000)
return () => clearInterval(timerRef.current)
}, [])

return <div>{count}</div>
}

它不会在每次组件重新渲染时设置定时器。但是我们在项目中并不是这么简单的代码。而是各种状态,做各种事情。


你以为你写的useEffect

useEffect(() => {
doSomething()

return () => cleanup()
}, [whenThisChanges])

实际上是这样的

useEffect(() => {
if (foo && bar && (baz || quo)) {
doSomething()
} else {
doSomethingElse()
}
// 遗忘清理函数。
}, [foo, bar, baz, quo, ...])

写了一堆的逻辑,这种代码非常混乱难以维护。


useEffect 到底是用来干啥的


useEffect是一种将React与一些外部系统(网络、订阅、DOM)同步的方法。如果你没有任何外部系统,只是试图用useEffect管理数据流,你就会遇到问题。



有时我们并不需要useEffect


1.我们不需要useEffect转化数据

const Cart = () => {
const [items, setItems] = useState([])
const [total, setTotal] = useState(0)

useEffect(() => {
setTotal(items.reduce((total, item) => total + item.price, 0))
}, [items])

// ...
}

上面代码使用useEffect来进行数据的转化,效率很低。其实并不需要使用useEffect。当某些值可以从现有的props或state中计算出来时,不要把它放在状态中,在渲染期间计算它。

const Cart = () => {
const [items, setItems] = useState([])
const [total, setTotal] = useState(0)

const totalNum = items.reduce((total, item) => total + item.price, 0)

// ...
}

如果计算逻辑比较复杂,可以使用useMemo:

const Cart = () => {
const [items, setItems] = useState([])
const total = useMemo(() => {
return items.reduce((total, item) => total + item.price, 0)
}, [items])

// ...
}

2.使用useSyncExternalStore代替useEffect


useSyncExternalStore


常见方式:

const Store = () => {
const [isConnected, setIsConnected] = useState(true)

useEffect(() => {
const sub = storeApi.subscribe(({ status }) => {
setIsConnected(status === 'connected')
})

return () => {
sub.unsubscribe()
}
}, [])

// ...
}

更好的方式:

const Store = () => {
const isConnected = useSyncExternalStore(
storeApi.subscribe,
() => storeApi.getStatus() === 'connected',
true
)

// ...
}

3.没必要使用useEffect与父组件通信

const ChildProduct = ({ onOpen, onClose }) => {
const [isOpen, setIsOpen] = useState(false)

useEffect(() => {
if (isOpen) {
onOpen()
} else {
onClose()
}
}, [isOpen])

return (
<div>
<button
onClick={() => {
setIsOpen(!isOpen)
}}
>
Toggle quick view
</button>
</div>
)
}

更好的方式,可以使用事件处理函数代替:

const ChildProduct = ({ onOpen, onClose }) => {
const [isOpen, setIsOpen] = useState(false)

const handleToggle = () => {
const nextIsOpen = !isOpen;
setIsOpen(nextIsOpen)

if (nextIsOpen) {
onOpen()
} else {
onClose()
}
}

return (
<div>
<button
onClick={}
>
Toggle quick view
</button>
</div>
)
}

4.没必要使用useEffect初始化应用程序

const Store = () => {
useEffect(() => {
storeApi.authenticate()
}, [])

// ...
}

更好的方式:


方式一:

const Store = () => {
const didAuthenticateRef = useRef()

useEffect(() => {
if (didAuthenticateRef.current) return

storeApi.authenticate()

didAuthenticateRef.current = true
}, [])

// ...
}

方式二:

let didAuthenticate = false

const Store = () => {
useEffect(() => {
if (didAuthenticate) return

storeApi.authenticate()

didAuthenticate = true
}, [])

// ...
}

方式三:

if (typeof window !== 'undefined') {
storeApi.authenticate()
}

const Store = () => {
// ...
}

5.没必要在useEffect请求数据


常见写法

const Store = () => {
const [items, setItems] = useState([])

useEffect(() => {
let isCanceled = false

getItems().then((data) => {
if (isCanceled) return

setItems(data)
})

return () => {
isCanceled = true
}
})

// ...
}

更好的方式:


没有必要使用useEffect,可以使用swr:

import useSWR from 'swr'

export default function Page() {
const { data, error } = useSWR('/api/data', fetcher)

if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>

return <div>hello {data}!</div>
}

使用react-query:

import { getItems } from './storeApi'
import { useQuery, useQueryClient } from 'react-query'

const Store = () => {
const queryClient = useQueryClient()

return (
<button
onClick={() => {
queryClient.prefetchQuery('items', getItems)
}}
>
See items
</button>
)
}

const Items = () => {
const { data, isLoading, isError } = useQuery('items', getItems)

// ...
}

没有正式发布的react的 use函数

function Note({ id }) {
const note = use(fetchNote(id))

return (
<div>
<h1>{note.title}</h1>
<section>{note.body}</section>
</div>
)
}

reference


http://www.youtube.com/watch?v=bGz…


作者:今天学到了
链接:https://juejin.cn/post/7182110095554117692
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

将项目依赖从 CocoaPods 迁移到 SPM

iOS
昨天的文章讲了如何删除项目中的 CocoaPods 依赖,文章中也有提到未来的趋势一定是从 CocoaPods 到 Swift Package Manager(SPM),今天就来讲讲如何添加 SPM 依赖。 SPM 是苹果在2018年推出的供 Swift 开发...
继续阅读 »


昨天的文章讲了如何删除项目中的 CocoaPods 依赖,文章中也有提到未来的趋势一定是从 CocoaPods 到 Swift Package Manager(SPM),今天就来讲讲如何添加 SPM 依赖。


SPM 是苹果在2018年推出的供 Swift 开发者进行包管理的工具,从 Xcode 11 开始支持。


首先打开 Xcode,点击项目根目录,选择 PROJECT,然后选择第三个 Tab,Package Dependencies,最后点击下边的加号按钮。



之后会出现 Package 的选择面板:



然后在右上角的输入框中输入你要依赖的项目地址,如果不知道项目地址可以到依赖包的官方页面查看,比如我们要添加 Alamofire,就可以到其 Github 页面 github.com/Alamofire/A…,文档中有 Swift Package Manager 的安装方法:




拷贝这个地址复制到前边说的输入框内,Xcode 会自动帮我们找到这个库,在右侧可以选择你需要依赖的版本以及对应的 Target:




最后点击右下角的 Add Package 按钮,随后 Xcode 会下载这个仓库,并弹出面板让我们选择要添加到哪个 Target,最后再次点击 Add Package 即可



添加完成后,我们就可以在 Xcode 项目中看到这个依赖被成功添加进来了。



之后你就可以开始愉快的使用它们了:

import UIKit
import Alamofire

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
AF.request("https://apple.com").response { res in
debugPrint(res)
}
}
}


最后我还下载了一些 swift 开发中主流的一些库,安装都很快,用起来可以说非常方便了。



除了在 GitHub 上找 swift 包之外,Swift Package Index(SPI) 也是一个不错的选择,SPI 是一个开源的 swift 包集合地,这里包含了大量的 swift 开源库,并且在前不久,苹果官方赞助了 SPI,以确保它能正常的发展下去,在不久的将来,Swift 开源库可能不支持 CocoaPods,但一定会支持 Swift Package Manager。


参考资料


[1]


Swift Package Index: swiftpackageindex.com/


作者:iOS新知
链接:https://juejin.cn/post/7255973942543777850
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

iOS 判断系统版本

iOS
方案一double systemVersion = [UIDevice currentDevice].systemVersion.boolValue; if (systemVersion >= 7.0) { // >= iOS 7.0 }...
继续阅读 »

方案一

double systemVersion = [UIDevice currentDevice].systemVersion.boolValue;

if (systemVersion >= 7.0) {
// >= iOS 7.0
} else {
// < iOS 7.0
}

if (systemVersion >= 10.0) {
// >= iOS 10.0
} else {
// < iOS 10.0
}

如果只是大致判断是哪个系统版本,上面的方法是可行的,如果具体到某个版本,如 10.0.1,那就会有偏差。我们知道 systemVersion 依旧是10.0。


方案二

NSString *systemVersion = [UIDevice currentDevice].systemVersion;
NSComparisonResult comparisonResult = [systemVersion compare:@"10.0.1" options:NSNumericSearch];

if (comparisonResult == NSOrderedAscending) {
// < iOS 10.0.1
} else if (comparisonResult == NSOrderedSame) {
// = iOS 10.0.1
} else if (comparisonResult == NSOrderedDescending) {
// > iOS 10.0.1
}

// 或者

if (comparisonResult != NSOrderedAscending) {
// >= iOS 10.0.1
} else {
// < iOS 10.0.1
}

有篇博客提到这种方法不靠谱。比如系统版本是 10.1.1,而我们提供的版本是 8.2,会返回NSOrderedAscending,即认为 10.1.1 < 8.2 。


其实,用这样的比较方式 NSComparisonResult comparisonResult = [systemVersion compare:@"10.0.1"],的确会出现这种情况,因为默认是每个字符逐个比较,即 1(0.1.1) < 8(.2),结果可想而知。但我是用 NSNumericSearch 方式比较的,即数值的比较,不是字符比较,也不需要转化成NSValue(NSNumber) 再去比较。


方案三

if (NSFoundationVersionNumber >= NSFoundationVersionNumber_iOS_7_0) {
// >= iOS 7.0
} else {
// < iOS 7.0
}

// 或者

if (kCFCoreFoundationVersionNumber >= kCFCoreFoundationVersionNumber_iOS_7_0) {
// >= iOS 7.0
} else {
// < iOS 7.0
}

这些宏定义是 Apple 预先定义好的,如下:

#if TARGET_OS_IPHONE
...
#define NSFoundationVersionNumber_iOS_9_4 1280.25
#define NSFoundationVersionNumber_iOS_9_x_Max 1299
#endif


细心的童靴可能已经发现问题了。Apple 没有提供 iOS 10 以后的宏?,我们要判断iOS10.0以后的版本该怎么做呢?
有篇博客中提到,iOS10.0以后版本号提供了,并且逐次降低了,并提供了依据。

#if TARGET_OS_MAC
#define NSFoundationVersionNumber10_1_1 425.00
#define NSFoundationVersionNumber10_1_2 425.00
#define NSFoundationVersionNumber10_1_3 425.00
#define NSFoundationVersionNumber10_1_4 425.00
...
#endif


我想这位童鞋可能没仔细看, 这两组宏是分别针对iPhone和macOS的,不能混为一谈的。


所以也只能像下面的方式来大致判断iOS 10.0, 但之前的iOS版本是可以准确判断的。

if (NSFoundationVersionNumber > floor(NSFoundationVersionNumber_iOS_9_x_Max)) {
// > iOS 10.0
} else {
// <= iOS 10.0
}

方案四


在iOS8.0中,Apple也提供了NSProcessInfo 这个类来检测版本问题。

@property (readonly) NSOperatingSystemVersion operatingSystemVersion NS_AVAILABLE(10_10, 8_0);
- (BOOL) isOperatingSystemAtLeastVersion:(NSOperatingSystemVersion)version NS_AVAILABLE(10_10, 8_0);

所以这样检测:

if ([[NSProcessInfo processInfo] isOperatingSystemAtLeastVersion:(NSOperatingSystemVersion){.majorVersion = 8, .minorVersion = 3, .patchVersion = 0}]) {
// >= iOS 8.3
} else {
// < iOS 8.3
}

用来判断iOS 10.0以上的各个版本也是没有问题的,唯一的缺点就是不能准确版本是哪个版本,当然这种情况很少。如果是这种情况,可以通过字符串的比较判断。


方案五


通过判断某种特定的类有没有被定义,或者类能不能响应哪个特定版本才有的方法。
比如,UIAlertController 是在iOS 8.0才被引进来的一个类,我们这个依据来判断版本

if (NSClassFromString(@"UIAlertController")) {
// >= iOS 8.0
} else {
// < iOS 8.0
}

说到这里,就顺便提一下在编译期间如何进行版本控制,依然用UIAlertController 来说明。

NS_CLASS_AVAILABLE_IOS(8_0) @interface UIAlertController : UIViewController

NS_CLASS_AVAILABLE_IOS(8_0) 这个宏说明,UIAlertController 是在iOS8.0才被引进来的API,那如果我们在iOS7.0上使用,应用程序就会挂掉,那么如何在iOS8.0及以后的版本使用UIAlertController ,而在iOS8.0以前的版本中仍然使用UIAlertView 呢?


这里我们会介绍一下在#import <AvailabilityInternal.h> 中的两个宏定义:


*__IPHONE_OS_VERSION_MIN_REQUIRED


*__IPHONE_OS_VERSION_MAX_ALLOWED


从字面意思就可以直到,__IPHONE_OS_VERSION_MIN_REQUIRED 表示iPhone支持最低的版本系统,__IPHONE_OS_VERSION_MAX_ALLOWED 表示iPhone允许最高的系统版本。


__IPHONE_OS_VERSION_MAX_ALLOWED 的取值来自iOS SDK的版本,比如我现在使用的是Xcode Version 8.2.1(8C1002),SDK版本是iOS 10.2,怎么看Xcode里SDK的iOS版本呢?



进入PROJECT,选择Build Setting,在Architectures中的Base SDK中可以查看当前的iOS SDK版本。



打印这个宏,可以看到它一直输出100200。


__IPHONE_OS_VERSION_MIN_REQUIRED 的取值来自项目TARGETS的Deployment Target,即APP愿意支持的最低版本。如果我们修改它为8.2,打印这个宏,会发现输出80200,默认为10.2。


通常,__IPHONE_OS_VERSION_MAX_ALLOWED 可以代表当前的SDK的版本,用来判断当前版本是否开始支持或具有某些功能。而__IPHONE_OS_VERSION_MIN_REQUIRED 则是当前SDK支持的最低版本,用来判断当前版本是否仍然支持或具有某些功能。


回到UIAlertController 使用的问题,我们就可以使用这些宏,添加版本检测判断,从而使我们的代码更健壮。

 - (void)showAlertView {
#if defined(__IPHONE_OS_VERSION_MIN_REQUIRED) && __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_9_0
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Title" message:@"message" delegate:nil cancelButtonTitle:@"Cancel" otherButtonTitles:@"OK", nil];
[alertView show];
#else
if (NSFoundationVersionNumber >= NSFoundationVersionNumber_iOS_8_0) {
UIAlertController *alertViewController = [UIAlertController alertControllerWithTitle:@"Title" message:@"message" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleCancel handler:nil];
UIAlertAction *otherAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];

[alertViewController addAction:cancelAction];
[alertViewController addAction:otherAction];

[self presentViewController:alertViewController animated:YES completion:NULL];
}
#endif
}

方案六


iOS 11.0 以后,Apple加入了新的API,以后我们就可以像在Swift中的那样,很方便的判断系统版本了。

if (@available(iOS 11.0, *)) {
// iOS 11.0 及以后的版本
} else {
// iOS 11.0 之前
}

参考链接


作者:蒙哥卡恩就是我
链接:https://juejin.cn/post/7277111344003399734
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

我的天!多个知名组件库都出现了类似的bug!

前言 首先声明,没有标题党哈! 以下我知道的国内知名react组件库全部都有这个bug,你们现在都能去复现,一个提pr的好机会就让给你们了,哈哈!复现组件库: 阿里系:ant design, fusion design,字节系:arco design...
继续阅读 »

前言


首先声明,没有标题党哈!


以下我知道的国内知名react组件库全部都有这个bug,你们现在都能去复现,一个提pr的好机会就让给你们了,哈哈!复现组件库:



本来字节还有一个semi design,结果我发现它没有Affix组件,也就是固钉组件,让他躲过一劫,他有这个组件我也觉得肯定会复现相同的bug。


Affix组件是什么,以及bug复现


Affix组件(固钉组件)能将页面元素钉在可视范围。如下图:




这个button组件,会在距离顶部80px的时候会固定在屏幕上(position: fixed),如下图:




如何复现bug


你在这个button元素任意父元素上,加上以下任意style属性


  • will-change: transform;
  • will-change: filter;
  • will-change: perspective;
  • transform 不为none
  • perspective不为none
  • 非safari浏览器,filter属性不为none
  • 非safari浏览器,backdrop-filter属性不为none
  • 等等

都可以让这个固定组件失效,就是原本是距离顶部80px固定。


我的组件库没有这个bug,哈哈


mx-design


目前组件不是很多,还在努力迭代中,不知道凭借没有这个bug的小小优点,能不能从你手里取一个star,哈哈


bug原因


affix组件无非都是用了fixed布局,我是如何发现这个bug的呢,我的组件库动画系统用的framer-motion,我本来是想在react-router切换路由的时候整点动画的,动画效果就是给body元素加入例如transform的变化。


然后我再看我的固钉组件怎么失效了。。。后来仔细一想,才发现想起来fixed布局的一个坑就是,大家都以为fixed布局相对的父元素是window窗口,其实是错误的!


真正的规则如下(以下说的包含块就是fixed布局的定位父元素):

  1. 如果 position 属性是 absolute 或 fixed,包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的:

  • transform 或 perspective 的值不是 none
  • will-change 的值是 transform 或 perspective
  • filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效)。
  • contain 的值是 paint(例如:contain: paint;
  • backdrop-filter 的值不是 none(例如:backdrop-filter: blur(10px);

评论区有很多同学居然觉的这不是bug?


其实这个问题本质是定位错误,在这些组件库里,同样使用到定位的有,例如Tooltip,Select,Popuver等等,明显这些组件跟写Affix组件的不是一个人,其他组件这个bug是没有的,只有Affix组件出现了,所以你说这是不是bug。


还有,如果因为引用了Affix组件,这个固定元素的任一父元素都不能用以上的css属性,我作为使用者,我用了动画库,动画库使用transfrom做Gpu加速,你说不让我用了,因为引起Affix组件bug,我心里想凭啥啊,明明加两行代码就解决了。


最后,只要做过定位组件的同学,其复杂度在前端算是比较高的了,这也是为什么有些组件库直接用第三方定位组件库(floating-ui,@popper-js),而不是自己去实现,因为自己实现很容易出bug,这也是例如以上组件库Tooltip为什么能适应很多边界case而不出bug。


所以你想想,这仅仅是定位组件遇到的一个很小的问题,你这个都解决不了,什么都怪css,你觉得用户会这么想吗,一有css,你所有跟定位相关的组件全部都不能用了,你们还讲理不?


总之一句话,你不能把定位组件的复杂度高怪用户没好好用,建议去看看floating-ui的源码,或者之前我写的@popper-js定位组件的简要逻辑梳理,你就会意识到定位组件不简单。边界case多如牛毛。


解决方案


  • 首先是找出要固定元素的定位元素(定位元素的判断逻辑上面写了),然后如果定位元素是window,那么跟目前所有组件库的逻辑一样,所以没有bug,如果不是window,就要求出相对定位父元素距离可视窗口顶部的top的值
  • 然后在我们原本要定位的值,比如距离顶部80px的时候固定,此时80px再减去上面说的定位父元素距离可视窗口顶部的top的值,就没有bug了

具体代码如下:


  • offsetParent固定元素的定位上下文,也就是相对定位的父元素
  • fixedTop是我们要触发固定的值,比如距离可视窗口顶部80px就固定
affixDom.style.top = `${isHTMLElement(offsetParent) ? (fixedTop as number) - offsetParent.getBoundingClientRect().top : fixedTop}px`;

如何找出offsetParent,也就是定位上下文

export function getContainingBlock(element: Element) {
let currentNode = element.parentElement;
while (currentNode) {
if (isContainingBlock(currentNode)) return currentNode;
currentNode = currentNode.parentElement;
}
return null;
}

工具方法,isContainingBlock如下:

import { isSafari } from './isSafari';

export function isContainingBlock(element: Element): boolean {
const safari = isSafari();
const css = getComputedStyle(element);

// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
return (
css.transform !== 'none' ||
css.perspective !== 'none' ||
(css.containerType ? css.containerType !== 'normal' : false) ||
(!safari && (css.backdropFilter ? css.backdropFilter !== 'none' : false)) ||
(!safari && (css.filter ? css.filter !== 'none' : false)) ||
['transform', 'perspective', 'filter'].some((value) => (css.willChange || '').includes(value)) ||
['paint', 'layout', 'strict', 'content'].some((value) => (css.contain || '').includes(value))
);
}


本文完毕,求关注,求star!!!对于react组件库感兴趣的小伙伴,欢迎加群一起交流哦!


作者:孟祥_成都
链接:https://juejin.cn/post/7265121637497733155
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

紧急需求‼️实现iOS启动图动态置灰

iOS
前言 相信这几天各大互联网应用首页置灰已经接踵而至,事情缘由我就不太赘述。毫无疑问,我司从30号当晚就收到紧急需求,我们要求1号必须紧急发版,除了常规的首页支持配置的动态置灰外,我们还要求另外一个需求就是,启动图也需要支持动态配置灰功能,经过几个同事的努力,于...
继续阅读 »

前言


相信这几天各大互联网应用首页置灰已经接踵而至,事情缘由我就不太赘述。毫无疑问,我司从30号当晚就收到紧急需求,我们要求1号必须紧急发版,除了常规的首页支持配置的动态置灰外,我们还要求另外一个需求就是,启动图也需要支持动态配置灰功能,经过几个同事的努力,于1号当晚顺利的发版了,第二天一早便成功上线,在此记录一下实现iOS启动图动态置灰的方案心得。


方案过程


实话说,当我接到此需求时,我负责的是实现iOS启动图动态置灰,当时我不太确认是否能实现,我能想到的是马上搜百度、谷歌、掘金等看是否有现成的轮子,答案肯定是有的,分别是



此方案非常轻量级,只有BBADynamicLaunchImage一个类,功能也只有一个,即查找系统缓存的启动图路径,使用我们提供的UIImage替换掉。其他版本控制本非必要需求我们自己代码控制即可。最终我也是直接采用了这个方案,其他控制由我代码自己编写核心方法如下。PS:(虽然提供iOS13之前的启动图路径查找,但是经过我实测一台iOS12的设备是不生效的,只有iOS13意思机型生效)


/// 系统启动图缓存路径

+ (NSString *)launchImageCacheDirectory {

NSString *bundleID = [NSBundle mainBundle].infoDictionary[@"CFBundleIdentifier"];

NSFileManager *fm = [NSFileManager defaultManager];

// iOS13之前

NSString *cachesDirectory = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];

NSString *snapshotsPath = [[cachesDirectory stringByAppendingPathComponent:@"Snapshots"] stringByAppendingPathComponent:bundleID];

if ([fm fileExistsAtPath:snapshotsPath]) {

return snapshotsPath;

}

// iOS13

NSString *libraryDirectory = [NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES) firstObject];

snapshotsPath = [NSString stringWithFormat:@"%@/SplashBoard/Snapshots/%@ - {DEFAULT GROUP}", libraryDirectory, bundleID];

if ([fm fileExistsAtPath:snapshotsPath]) {

return snapshotsPath;

}

return nil;

}



稍微吐槽下这个库,此库也是我一开始使用的。它也是基于BBADynamicLaunchImage做了一些拓展。比如版本控制,但是它内置的版本控制有漏洞,它只支持CFBundleShortVersionString,也就是我们俗称的大版本,如果我build号改了版本号不变岂不是有问题?(这也是我打包后不生效调试了好久才发现的问题)而且要支持动态置灰,不发版恢复原图就更加有问题。最后也是弃用了,当然这个库支持暗黑模式下的启动图,但是我本身app就是不支持的这个功能就聊胜于无了,最终该用了上边的方案,动态控制由我自己处理。


启动图如何置灰


要实现启动图和原图一模一样只是变成灰白,这里就稍微要花一点点心思了。众所周知我们现在iOS启动图都是直接用LaunchScreen这个Storyborad生成的,那我们是否能加载这个LaunchScreen,然后截取UIView的图片,之后再通过bitmap转换成一张灰白图?答案是显而易见的,代码如下。


首先我们要给LaunchScreen定义一个id,因为默认没有人去加载它,它也没有id。



代码如下:


生成启动图原图或灰白图方法,注意此方法要在主线程跑。


+ (UIImage *)createLaunchScreenImage:(BOOL)isNeedGray {

UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];

UIViewController *vc = [sb instantiateViewControllerWithIdentifier:@"LaunchScreen"];

[vc loadViewIfNeeded];

vc.view.frame = UIScreen.mainScreen.bounds;

UIImage *image = [vc.view snapshotImage];

if (isNeedGray) {

image = [image createGrayImage];

}

return image;

}



UIView截图

func snapshotImage() -> UIImage? {

UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.isOpaque, 0);

self.layer.render(in: UIGraphicsGetCurrentContext()!)

let image = UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()

return image

}


生成灰白图方法,由于启动图必须size匹配,所以scale那些要处理好。


-(UIImage*)createGrayImage {

int width = self.size.width * self.scale;

int height = self.size.height * self.scale;

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();

CGContextRef context =CGBitmapContextCreate(nil,

width,

height,

8,// bits per component

0,

colorSpace,

kCGBitmapByteOrderDefault);

CGColorSpaceRelease(colorSpace);

if(context ==NULL) {

return nil;

}

CGContextDrawImage(context,

CGRectMake(0,0, width, height), self.CGImage);

UIImage*grayImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context) scale:self.scale orientation:self.imageOrientation];

CGContextRelease(context);

return grayImage;

}


动态替换


我们只需要请求后台配置,需要灰白就提供灰白图,当配置失效,需要还原时候,根据上面方法,直接渲染一个LaunchScreen原图即可,当然其中还要做好持久化控制,不要处理多次替换,替换生效后不再处理。


末尾


以上就是我实现此次iOS启动图动态置灰的全过程,由于过程的艰辛,加之我自己是一个Swifter。估计不久将来,我也会基于Swift写一个稍微友好点的库,在此立个Flag。


作者:jerryfans
链接:https://juejin.cn/post/7172983260966813709
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

人生不必要精彩,但得有故事

今年已然过半了,乘着中午午休时间,写点感想吧,或许可作为今年的年中总结。 目前现状 话题来源于中午吃饭和同事的闲聊,问及平时都有些什么爱好。我们双方细想了一阵后都噗嗤一笑,发现人到了中年好像很难再有真正的兴趣爱好。 平时除了工作,下班后回家陪陪孩子,再加上处理...
继续阅读 »

今年已然过半了,乘着中午午休时间,写点感想吧,或许可作为今年的年中总结。


目前现状


话题来源于中午吃饭和同事的闲聊,问及平时都有些什么爱好。我们双方细想了一阵后都噗嗤一笑,发现人到了中年好像很难再有真正的兴趣爱好。
平时除了工作,下班后回家陪陪孩子,再加上处理一些家庭琐事。几乎抽不出什么时间做一些自己感兴趣的事了。



究其原因,我觉得有两点:



  1. 精力不足,时间不够用

  2. 随着时间的消磨,渐渐对曾经感兴趣的事没有了热情


如果是第一点,我觉得还好,时间不够用,还可以通过规划,提高效率来解决。但如果一旦是对生活和工作没有了激情,那就很危险了。需要我们来做个自我反思了。


都说上班工作的人,每天的生活按部就班,年复一年,眼里渐渐没有了光。


遥想当年毕业时我们信心满满,踌躇满志。可如今我们却被曾今挚爱的工作折磨的毫无斗志,是我们选择了向生活妥协。


生活和理想之间出现了一道鸿沟。我们需要重新拾起那份挚爱,找寻失去的那道光。


时间从来不以人的意志为转移,不管你怎么对待你的生活,它都是稍纵即逝。为何不让自己的生活过的更丰富些!


人生不必要精彩,但得有故事,这就是今天要聊的主题。


作为程序员的自己,还是有点折腾的劲在的。看了很多互联网技术从业者的职业打怪升级之路。好像很多都与写作有关,再就是自由开发者那一类,他们有的后来转到了自媒体,
有的做出了很不错的 side project,最终被收购实现财务自由。人生有很多的可能性,不要被自己的职业工作所裹挟。


业余工作


今年除了工作在有条不紊的进行,我的业余时间一部分被孩子占了,周末会带着她出去玩玩,下班后回家也会陪着她玩会。睡觉前跟她互动直到睡着。这么一看,留给自己的时间
也不多了。虽然时间比较紧凑,但也还是产出了点成果。


主要内容有:



  1. 前端开发笔记的博客每月都有持续地更新,期间会同步一些好的文章到各个知识平台(掘金、简书、CSDN、开发者头条);

  2. 从五月份开始,重构了“太空编程” 站点,陆陆续续在完善和新增了一部分内容:

    • 十几篇博客文章

    • 四五个独立页面,有工具和代码示例的介绍

    • 知识库作为前端知识体系的梳理和总结



  3. 学习 React 框架开发,作为实战产出了几个应用小工具:

    • VISITOR BADGE

    • 分割线工具

    • 代码图片生成工具



  4. 公众号偶有推送认为写的比较好的文章


收获成果


另外出乎意料的是,“前端开发笔记” 博客关于 磁力猫 的关键字搜索每天都有可观的流量进来,
后来竟然有广告主主动找来,买下了广告链接。这样就有了一份意外的收入。


百度统计


从三月份到现在持续在续费,没想到会这么久。



网站上挂了 Google Ads 平台广告,目前收入情况:



公众号粉丝量也已经达到了 1269,虽然目前每月只有少得可怜的流量主广告收入。


掘金上有两篇高赞收藏量很高的文章,截止目前:



  • 如何让自己的前端知识更全面 赞 842收藏 2905

  • 前端 UI 组件库有哪些选择 赞 246收藏 685


掘金账号等级到了 LV.5,粉丝突破 200,网站很大一部分流量来自掘金,所以让我坚信要用很长一段时间好好把账号养起来。


总结


今年会围绕以上四点内容持续发力,努力产出优质的分享内容。把自己的前端知识体系打牢,深入 React 开发实践是目前的主要任务。现在在写作方面是能写了,但是质量不高,要想写出通俗易懂的
技术文章还有很长的一段路要走。


生命不息,折腾不止!


作者:编程范儿
来源:juejin.cn/post/7261533443895935033
收起阅读 »

当一个程序员从产品角度思考技术

近期做需求中有一些感想,在这里记录下。 1. 产品究竟是谁的 人人都是产品经理,并不是一句口号,每个人都是用户,即便你是研发、设计、测试,都有无数的时间,和世界上最优秀的产品打交道。最优秀的产品包括你的电脑、手机,和那些最流行的APP。 所以,如果某个产品经理...
继续阅读 »

近期做需求中有一些感想,在这里记录下。


1. 产品究竟是谁的


人人都是产品经理,并不是一句口号,每个人都是用户,即便你是研发、设计、测试,都有无数的时间,和世界上最优秀的产品打交道。最优秀的产品包括你的电脑、手机,和那些最流行的APP。


所以,如果某个产品经理一言堂,那这个产品大概率不会太成功。除非他真的厉害,并且有数据支撑,比如乔布斯这种。产品不是政治,产品是可以讨论的。


如果一些交互设计难以理解,研发都用着费劲,怎么在普通人中推广呢?


另一个问题,研发需要了解并思考产品的逻辑吗?


答案肯定是需要的,产品是有逻辑的,研发可以根据产品的逻辑,判断、预测未来的变化,抽出稳定性更强的代码。


一个工作3年和工作10年的研发的一个区别就在于,对于产品逻辑的理解,大概工作更久的人更容易预测产品未来的变化,会在代码编写、结构设计时就拆分出不变与变化,从而让代码更易维护。但是,如果每次新来一个需求,都从0开始,从不思考,就另当别论了。


2. 定制与通用


通用和定制往往是对立的,一个需求如果是定制的,意味着不够通用。


前一阵做了一个国际化的需求,国际化其实就代表通用,本地化代表定制。


但是如果同一类型定制的多了,就可以变为通用需求。本质上一个string/number/boolean类型总是可以扩展成array的。


比如H5的自动化测试报告处理,和小程序的处理,是可以通用化的。


这给我们一个启示是,要多沉淀东西,做过的那么多需求,比如表单系统、权限系统,这些工作即使一两年内不会重复,但是时间拉长来,总会在职业生涯的某个阶段重新做一次。


还有,我们加班那么多,是不是产品设计、需求提出、技术实现的时候,通用性考虑的就不足呢,所以今天在A上拧一个螺丝,明天在B上拧一个螺丝。


可怕的是,这两个螺丝都是一样的残次品。


通用性在不同的层次上有不同的表现,比如总监可以考虑业务的通用,产品经理考虑产品的通用,开发则考虑代码和系统层面的。


组件化的基础也是通用性,如果一个组件可以被复用,说明它是通用的。


3. 复用性


应当努力追求高复用,不论是组件,还是工具,为什么呢?



  1. 从零实现成本高

  2. 复制粘贴然后改一点,看似成本也不高,后续维护、迭代更新则成本高


实践证明,组件、工具的迭代更新的频率,一般是高于认知的。即便你当下觉得它很稳定了、很完美了,也很有可能在未来某个时候优化,因为人的认识总是有局限性的


组件高复用,可以统一升级、统一优化、统一迭代。不同维度的组织都应该追求高复用,包括个人、项目、团队。


4. 字段名


发现一个现象,大家在字段命名的时候比较洒脱。



  • 格式比较多样,比如角色Id:roleIdrole_idroleid,子活动Id:childidchild_idchildId

  • 名称也多样,比如手机号:phonemobile,头像:headheader


大家好像习惯了这种乱七八糟的命名,倘若统一了,反而觉得难受。


在其他地方没得到的自由,终于在命名时得到了。


这种字段命名问题和上面的通用化有些关系,如果不能统一,谈何通用呢,通用化的基础一定是标准化。


为什么大家会在命名时候,这么随意呢?大概率是因为他根本没考虑过下游开发者的感受,比如前端。


下游开发者做起来是很痛苦的,他知道这个协议会包含子活动Id,但是他必须去协议页面查看,才能知道究竟是哪种命名,是childid、还是childId、还是child_id?并且,他在向他的下游或下级页面、组件传递时,需要考虑对方需要的是什么,必须做一层转换。如果他不知道转换或者不想转换,让下游直接修改字段名,那整个项目就更“精彩”了。


意识也是一种能力。能够预见到一些可能带来的问题,并尽量规避掉,也是一种好习惯。


5. 代码是资产还是负债


总看到有人说,代码是负债,个人不敢苟同,倘若代码都是负债,你还在这敲锤子啊,岂不是越欠越多,回家睡大觉不是更好?


大部分人之所以认为代码是负债,是因为维护起来费劲,一看代码就头疼,每次改代码都像是上刀山,这能不是负债吗。


或者改别人写的代码,小心翼翼、胆战心惊、如履薄冰,生怕解决一个问题,带来其他问题。


所以,个人认为,质量高的代码是资产,写的像X一样的是负债。


“大处着眼,小处着手”,架构、系统相关可以视为“大处”,代码规范、代码质量可以视为“小处”。


最近看到公共基础库很多很多的魔法字符串,开发没有意识去抽离,维护这样的代码就比较头疼了。


好的代码一般是模块化,抽象化,通用化,配置化。失控的代码,没有模块化,没有整理,没有规律,没法维护,没法复用。没有解耦,维护起来相当麻烦。


甚至有人说,“单元测试有什么用?“


6. 兜底


有一个需求,A类型的奖品不需要展示,B类型的奖品可以展示,后台让前端“兜底”,过滤下这个类型的奖品。


想到这个只是产品的上层逻辑,是极容易变化的,今天屏蔽A、明天屏蔽B,后天可能又要放开A、B。


兜底应该是对边界的兼容,比如:



  • 多重if else中最后的else

  • 对空值给默认值

  • 对解析失败的捕获

  • 对不同机型、不同环境的兼容性


像这种产品上的逻辑怎么会是兜底呢?这种过滤其实是数据层面的处理,越在上游处理越简单,因为用数据的地方总是无法控制的。


这其实反映出另一个问题,前后台责任不明确,这次你帮我多处理一下,下次我帮你多处理一下。本来后台该做的事,放到前端来做,下一次,本来前端该兼容的,让后台来做。


前端应该始终兼容空值边界,比如a.b,当a不存在时候的取值异常。组件、页面总是可能复用的,如果下个prop或者cgi没传,就要付出额外的时间成本处理错误。


前端兼容性大多是为了系统鲁棒性。


此外,处理数据的逻辑应该放在一起,如果这里增加一点字段、那里改变一下结构,又没有类型提示的话,后期维护起来很难受。


前端当变量为undefinednull时,会报错的语法或API:


Object.keys(null)
Object.keys(undefined)
// 会报错,Uncaught TypeError: Cannot convert undefined or null to object

a.toString(); // a 为 undefined 或 null
// Uncaught TypeError: Cannot read properties of null (reading 'toString')

7. 兼容


上面提到了兼容,其实兼容有两种:



向前兼容(forward compatibility) = 向上兼容(upward compatibility),也就是向未来兼容,即现在设计的软件要考虑未来还能不能用。
向后兼容(backward compatibility) = 向下兼容(downward compatibility),也就是向过去兼容,即现在设计的软件要考虑旧版本的数据还能不能用。



一般说的兼容指的是向后兼容。在框架、基础库升级的过程中,如何实现向后兼容、平稳过渡呢?


通常是设置一个过渡版本,比如v1版本的旧API,在v2版本时候同时提供新老两种写法,并标明旧APi即将废弃,然后在v3版本正式废弃掉旧API。


如果不提供过渡版本,一般会导致开发者不敢升级,比如vue2vue3就没有做到平滑过度,导致现在很多项目都是vue2


8. 变化


代码维护、迭代过程中最重要的事情之一就是控制变化,应该始终将变化的部分做到可控。


其实现代社会就很符合这个规范,电网、能源、航空、铁路等,这些核心产业都被国家握在手里,其他一些小打小闹的产业,比如餐饮、互联网等,随私企去折腾。


对于大型项目,核心模块,比如基础UI组件库、网络框架、核心逻辑,都应该以一种稳定的形式存在,比如npm包、基础库,不能今天改、明天又改。


为什么函数粒度要细呢,也就是常说的一个函数只完成一个功能?其实本质也是控制了变化,如果一个函数同时完成多个功能,那么改动的可能性就更高,就更容易出错。


稳定性是我们一直追求的目标,一般来说,我们更喜欢发挥稳定的球员,而不是“神经刀”。


代码也是一样,控制变化,其实就是保持稳定性。


为什么要追求稳定呢?本质上是变化的成本太高了,越复杂、越底层的组件、工具,改动风险越高,因为复用的地方多,很可能牵一发而动全身。即使做到了高内聚、低耦合,如果改动不是向下兼容的,上层就要一起更新,会增加时间成本、出错概率。




稳定并不意味着一成不变、一定没有变化,比如一个组件库,内部的优化可以一直做,只是对外的API、展现的形式需要稳定,也就是与之前保持一致。


9. 写文章


写文章会耽误工作吗?就个人经验来说,写文章不但不会影响工作,反而会提升效率。


因为写文章一定是因为有自己的思考才写,不论是解决了问题、还是总结了方法,都是有或多或少的思考,大脑一定是活跃的


没写文章的时候,看似工作时间投入更多,其实脑子已经不转了,没有自己的理解,没有总结思考,工作效率其实非常低。


这就好像,那些成绩好的同学其他方面也有特长,比如体育、文艺,反而是那些成绩差的才干啥啥不行。


为什么会这样呢?因为思考这个东西是相通的,好多东西底层是一样的,会了一样就可以触类旁通、举一反三。


10. 低代码


最近人工智能生成代码的方式很火,更新了人们对“低代码”的认知。低代码、零代码的本质是为了提升开发效率,提高生产力,只要能达到此目的的都是低代码。


因此,广义的低代码有下面几种:



  • 从手上已有的其他项目中复制粘贴,比如之前有了一个项目表格,现在要做一个操作记录表格,直接复制粘贴然后改改即可。

  • 从搜索引擎中搜索,然后复制搜到的内容

  • 从一些可视化界面,拖拽组件而成,即目前人们常说的低代码平台

  • 人工智能生成


哪种会成为未来的主流呢?衡量标准有下面几个:



  1. 实现成本低,狭义的低代码平台需要搭建,而且越复杂的项目搭建成本越高

  2. 实现效果好,开发者改动少,并且接近需求


从上面的标准来看,个人目前看好AI。


11. Mixin


有许多人很排斥使用Mixin,弃之如敝屣,其实只是使用姿势不对而已。



  1. 一个Mixin文件中的内容应该高内聚,需符合单一职责原则,围绕一个中心,不能做两件事。

  2. 尽量减少使用全局Mixin,多用单文件引入。


只要做到上面两点,Mixin就可以化为高复用的利器。


12. 小而美


“小”的优点:



  1. 易于理解和学习。如果你想要写出全世界都是用的程序,那这一点很重要,无论是大牛还是小白,都能轻松是用,才能推广开来。

  2. 易于维护。即便是自己写的代码,过半年自己都忘记当时写的是什么了,要考虑这一点。

  3. 消耗更少的资源。“小”到制作一件事,用多少就消耗多少,不做一点额外的开销和浪费。

  4. 更易于和其他工具结合。即可扩展性更好,符合开放封闭原则。


让每个程序只做好一件事(单一职责原则),这个和准则1(小即是美)表达的意思一致。


只做好一件事,说明足够小。越是大型的系统,这个原则越重要,否则越大就越乱。


书中列举了一个范例 —— ls命令。ls本来是很简单的一个命令,现在却搞的有 20 多个参数,而且正在逐步增加。这就使得ls慢慢变成一个很庞大的命令,但我们日常 90% 的场景都使用它最简单的功能。理想的做法是,ls还保持简洁的功能,另外开发新的命令来满足其他配置参数实现的功能。这就例如,cat可查看全部内容,想看头或者尾,分别使用headtail——这就分的清晰了。


某BG就是典型的小而美,灵活。


13. 沉淀


沉淀了多少组件、公共方法,这才是业务开发中重要的。


沉淀是分等级的。项目越大,项目分层越多,沉淀等级越多。底层的更纯粹,应当尽可能沉到底层。以最近维护的几个项目为例:


t-comm > uni-plugin-light > press-ui

组件库由于必须依赖框架,所以不能和JS/TS工具一样可以沉到最底层。


一句话总结就是,能沉到多底就沉到多底。


14. 研效


很多人都在提研效,PPT里、总结邮件里,但其实并没懂研效的本质,个人看来,研效关键点有两个:



  1. 是否有足够多自动化的工具,比如CI、配置中心、自动化测试、自动同步工具、任务调度平台

  2. 是否沉淀了足够多的组件,新需求来了后,可以调用现成的能力,需求做完了后,又沉淀了另一些能力


如何判断一个部门、团队、个人是否对研效敏感呢?只要看他对上面两个方向的重视程度就行了。


堆人力,轻研效的特点是:



  1. 对工具轻视、恐惧,喜欢最原始的方式,喜欢刀耕火种

  2. 对沉淀轻视、恐惧,做什么都是一次性的,从不总结


15. 简单



Keep it simple. Keep it stupid.



这句话固然是对的,个人理解更重要的是“化繁为简”。业务不可能一直简单,组件库、工具不可能没有复杂的部分,重要的是有化繁为简的能力。


什么是化繁为简的能力呢,应该包括抽象能力、理解能力、总结归纳、聚类、举一反三等。


16. 耦合


什么是耦合?


程序里的耦合指的是依赖关系,比如A模块中引入了B、C、D模块的内容,就产生了耦合。


如果A、B两个项目用脚本同步一些代码,算耦合吗?当然不算,根本没有依赖关系的产生,删掉A,B一样可以运行。


JS中函数是一等公民,函数中的参数传递是耦合的最佳方式。挂载在window或文件中的全局变量上,这种耦合方式是最差的,难维护的,难以追踪的。


17. 大组件


大组件并不意味着大文件,press-ui可以提供由多个小组件构成的大组件,但不能是大文件,因为这样不灵活,如果需要变更、扩展的话,更改的东西多,容易出错。


同时,大组件意味着events会很多,props很多或者很大。


大组件在有些场景下,是有好处的。比如这个组件很多地方要用,比如横竖版、管理端都要用,那么把这个组件封装下,一个mode就可以解决多端问题,到了业务层就不用写太多重复代码了。


18. 就近原则


组件的样式应该就近写在组件附近,而不能是在page层覆盖。为什么呢,因为一旦多个page都使用这个组件,那么覆盖关系就很难追踪。而如果只有一个page使用,那么就应该写在page的附近,不必提取到组件库中。


19. 新工具


前端框架更新很快,有人可能会说华而不实,花里胡哨,okr项目,没有vue2香。


这里简单分析下用新技术的必要性。




  • 从学习角度上,一个社区流行的新框架、新工具,能让诸多项目自发迁移、升级,不是公司因为各种利益强推的,一定是做对了什么,不管是原理、方法论还是思想,都值得去学习。




  • 从生产力角度上,新框架大规模取代旧工具,一定在开发效率、性能、可维护性等方面有提升,而且一般不止一个维度。作为上层应用开发者(API工程师),更应该利用好这些工具。




  • 先发优势,一般新框架稍微稳定一点时,做有关它的生态工具会比较容易得到广泛应用。比如vue3刚稳定时,做个vue3组件库,容易推广,如果现在做,基本很难推了,该趟过的坑都趟过了,也经过了生产环境的考验,凭什么让别人用你的呢?




当然了,你永远无法叫醒一个装睡的人。


20. 人


一个工具会被写成什么样子,取决于人。


举个例子,某库迭代了一次又一次,一直没有稳定,又开始改,个人觉得基本还是白搭。因为开发者还是那一批人,他们之前写什么样的代码,之后大概也会写成什么样。


没有方法论的升级,没有任何反思,不懂抽离,不懂封装,只是换个地方,套个壳而已。


21. t-comm



  • 尽量分类,不要什么都往utils目录下放,否则utils目录会爆炸,难以寻找

    • 如果贪图一时快,都放到utils中,无疑是给自己挖坑,以后还需要重构

    • index.ts中行数,等于ll src | grep '^d'| wc -l的值-1,排除types



  • 一定在导出的第一层,进行导出文件的指定,第二层、第三层等后面的导出要用*

    • 第一层不能用*,否则一些方法不想导出,也被导出了

    • 后面不能指定,因为前面指定过了,后面再指定就重复了,而且改很麻烦,容易遗漏




// base/function/index.ts
export {
parseFunction,
cached,
} from './function';


// base/index.ts
export * from './function';
export * from './list';
export * from './number';
export * from './object';
export * from './string';


// index.ts
export * from './base';


  • 按照文件的ASCII顺序,也就是文件/文件夹的默认顺序,来导出文件,这样容易对比,不容易遗漏


export * from './base';
export * from './canvas';
export * from './clipboard';
export * from './color';
export * from './cookie';
export * from './cron';

22. 理解


有时候我们能把事情做成什么样,取决于我们对它的理解。


你如果把微信当成抖音做,大概做不好。苹果就有一个口号,“Think Different”,这是它的格局,也是他们对自己产品的理解。


做组件库、基础库,甚至是普通需求也要有自己的理解。


作者:Novlan1
来源:juejin.cn/post/7277798325637070889
收起阅读 »

揭秘外卖平台的附近公里设计

背景 相信大家都有点外卖的时候去按照附近公里排序的习惯,那附近的公里是怎么设计的呢?今天shigen带你一起揭秘。 分析 我们先明确一下需求,每个商家都有一个地址对吧,我们也有一个地址,我们点餐的时候,就是以我们自己所在的位置为圆心,向外辐射,这一圈上有一堆的...
继续阅读 »

背景


相信大家都有点外卖的时候去按照附近公里排序的习惯,那附近的公里是怎么设计的呢?今天shigen带你一起揭秘。


分析


我们先明确一下需求,每个商家都有一个地址对吧,我们也有一个地址,我们点餐的时候,就是以我们自己所在的位置为圆心,向外辐射,这一圈上有一堆的商家。类似我下方的图展示:



想到了位置,我们自然想到了卫星定位,想到了二维的坐标。那这个需求我们有什么好的设计方案吗?


redis的GEO地理位置坐标这个数据结构刚好能解决我们的需求。


GEO


GEO 是一种地理空间数据结构,它可以存储和处理地理位置信息。它以有序集合(Sorted Set)的形式存储地理位置的经度和纬度,以及与之关联的成员。


以下是 Redis GEO 的一些常见操作:



  1. GEOADD key longitude latitude member [longitude latitude member ...]:将一个或多个地理位置及其成员添加到指定的键中。 示例:GEOADD cities -122.4194 37.7749 "San Francisco" -74.0059 40.7128 "New York"

  2. GEODIST key member1 member2 [unit]:计算两个成员之间的距离。 示例:GEODIST cities "San Francisco" "New York" km

  3. GEOPOS key member [member ...]:获取一个或多个成员的经度和纬度。 示例:GEOPOS cities "San Francisco" "New York"

  4. GEORADIUS key longitude latitude radius unit [WITHCOORD] [WITHDIST] [COUNT count] [ASC|DESC] [STORE key] [STOREDIST key]:根据给定的经纬度和半径,在指定范围内查找与给定位置相匹配的成员。 示例:GEORADIUS cities -122.4194 37.7749 100 km WITHDIST COUNT 5


Redis 的 GEO 功能可用于许多应用场景,例如:



  • 位置服务:可以存储城市、商店、用户等位置信息,并通过距离计算来查找附近的位置。

  • 地理围栏:可以存储地理围栏的边界信息,并检查给定的位置是否在围栏内。

  • 最短路径:可以将城市或节点作为地理位置,结合图算法,查找两个位置之间的最短路径。

  • 热点分析:可以根据位置信息生成热力图,统计热门区域或目标位置的访问频率。


Redis 的 GEO 功能提供了方便且高效的方式来存储和操作地理位置信息,使得处理地理空间数据变得更加简单和快速。



默默的说一句,redis在路径规划下边竟然也这么厉害!



好的,那我们就来开始实现吧。今天我的操作还是用代码来展示,毕竟经纬度在控制台输入可能会出错。


代码实现


今天的案例是将湖北省武汉市各个区的数据存储在redis中,并以我所在的位置计算离别的区距离,以及我最近10km内的区。数据来源



我的测试代码如下,其中的运行结果也在对应的注释上有显示。



因为代码图片的宽度过长,导致代码字体很小,在移动端可尝试横屏观看;在PC端可尝试右键在新标签页打开图片。




以上的代码案例也参考:Redis GEO 常用 RedisTemplate API(Java),感谢作者提供的代码案例支持。


总结


对于需要存储地理数据和需要进行地理计算的需求,可以尝试使用redis进行解决。当然,elasticsearch也提供了对应的数据类型支持。有机会的话,shigen也会逐一的展开分析讲解。感谢伙伴们的支持。


shigen一起,每天不一样!


作者:shigen01
来源:juejin.cn/post/7275595571733282853
收起阅读 »

当以有涯之生,多行未做之事

造的轮子各种“抛锚”,心无旁骛“查案”自得其乐,日志一行行输出,紧盯屏幕唯恐遗漏任何细节。最后水落石出真相大白,揉搓酸痛睡眼,见有斑点血块。 明明心羡老庄,骑青牛西去,驾鲲鹏高飞---却只能在愈发稀少的酣眠中。身在凡尘结庐人境,无时不向往桃花源,又常自作五柳生...
继续阅读 »

造的轮子各种“抛锚”,心无旁骛“查案”自得其乐,日志一行行输出,紧盯屏幕唯恐遗漏任何细节。最后水落石出真相大白,揉搓酸痛睡眼,见有斑点血块。


明明心羡老庄,骑青牛西去,驾鲲鹏高飞---却只能在愈发稀少的酣眠中。身在凡尘结庐人境,无时不向往桃花源,又常自作五柳生,而被时代洪流,为资本巨手,被社会车轮惯性,夹持裹挟牢牢吞噬,活成了杰克伦敦及其马丁伊登。恐怖的是还打了鸡血般歆享,只能在夜深人静偶尔发现。


12年前那个闷热暑假,我读塞林格『麦田里的守望者』,不解其意味如嚼蜡。更对『Beat Generation』模糊朦胧,缺乏真切感知。多年后,似乎有一些懂了,却亦成为局中人。


再过100年,此刻的绝大多数生物体都将归为齑粉。而过后1000年,能将名姓遗物留存下的,能有几个?恐多不过一二。不惭自认好铁,不甘宰鸡屠狗,却也找不好方位,目不见睫皓首穷经。


每当这般忖夺,实觉人生之趣不过如此,牵绊者,唯父母亲友,连兴趣爱好。正是亲戚情话,琴书消忧。转念又想,更当以有涯之生,多行未做之事。这消弭了对挫折的痛楚,也减弱了于成功的喜悦,更在不仄足中,一直在奔跑,不太敢停歇。


“我们生活在一个不值得大师用文字记录的时代”,回溯展望,看似日新月异实则千篇一律。结婚生子,困于奶粉尿布,便无暇无心“胡思乱想”。子又生孙,孙又生子,总会有某些瞬间,踏进同一条河流。我想到了故事里,黄土坡的那个放羊娃。当略带讥嘻看完,心有庆幸,却无意识到,都大抵如此。…


幸甚是凡夫俗子,惦念着天亮的一顿饕餮,就能暂歇扫去千般愁绪。




作者:fliter
来源:juejin.cn/post/7277799132119629882
收起阅读 »

彻底搞懂小程序登录流程-附小程序和服务端代码

web
编者按:本文作者奇舞团高级前端开发工程师冯通 用户登录是大部分完整 App 必备的流程 一个简单的用户系统需要关注至少这些层面 安全性(加密) 持久化登录态(类似cookie) 登录过期处理 确保用户唯一性, 避免出现多账号 授权 绑定用户昵称头像等信息 ...
继续阅读 »

编者按:本文作者奇舞团高级前端开发工程师冯通



用户登录是大部分完整 App 必备的流程


一个简单的用户系统需要关注至少这些层面



  • 安全性(加密)

  • 持久化登录态(类似cookie)

  • 登录过期处理

  • 确保用户唯一性, 避免出现多账号

  • 授权

  • 绑定用户昵称头像等信息

  • 绑定手机号(实名和密保方式)


很多的业务需求都可以抽象成 Restful 接口配合 CRUD 操作


但登录流程却是错综复杂, 各个平台有各自的流程, 反倒成了项目中费时间的部分, 比如小程序的登录流程



对于一个从零开始的项目来说, 搞定登录流程, 就是一个好的开始, 一个好的开始, 就是成功的一半


本文就以微信小程序这个平台, 讲述一个完整的自定义用户登录流程, 一起来啃这块难啃的骨头


名词解释


先给登录流程时序图中出现的名词简单做一个解释



  • code 临时登录凭证, 有效期五分钟, 通过 wx.login() 获取

  • session_key 会话密钥, 服务端通过 code2Session 获取

  • openId 用户在该小程序下的用户唯一标识, 永远不变, 服务端通过 code 获取

  • unionId 用户在同一个微信开放平台帐号(公众号, 小程序, 网站, 移动应用)下的唯一标识, 永远不变

  • appId 小程序唯一标识

  • appSecret 小程序的 app secret, 可以和 code, appId 一起换取 session_key


其他名词



  • rawData 不包括敏感信息的原始数据字符串,用于计算签名

  • encryptedData 包含敏感信息的用户信息, 是加密的

  • signature 用于校验用户信息是否无篡改

  • iv 加密算法的初始向量



哪些信息是敏感信息呢? 手机号, openId, unionId, 可以看出这些值都可以唯一定位一个用户, 而昵称, 头像这些不能定位用户的都不是敏感信息



小程序登录相关函数



  • wx.login

  • wx.getUserInfo

  • wx.checkSession


小程序的 promise


我们发现小程序的异步接口都是 success 和 fail 的回调, 很容易写出回调地狱


因此可以先简单实现一个 wx 异步函数转成 promise 的工具函数


const promisify = original => {
return function(opt) {
return new Promise((resolve, reject) => {
opt = Object.assign({
success: resolve,
fail: reject
}, opt)
original(opt)
})
}
}

这样我们就可以这样调用函数了


promisify(wx.getStorage)({key: 'key'}).then(value => {
// success
}).catch(reason => {
// fail
})

服务端实现


本 demo 的服务端实现基于 express.js



注意, 为了 demo 的简洁性, 服务端使用 js 变量来保存用户数据, 也就是说如果重启服务端, 用户数据就清空了




如需持久化存储用户数据, 可以自行实现数据库相关逻辑



// 存储所有用户信息
const users = {
// openId 作为索引
openId: {
// 数据结构如下
openId: '', // 理论上不应该返回给前端
sessionKey: '',
nickName: '',
avatarUrl: '',
unionId: '',
phoneNumber: ''
}
}

app
.use(bodyParser.json())
.use(session({
secret: 'alittlegirl',
resave: false,
saveUninitialized: true
}))

小程序登录


我们先实现一个基本的 oauth 授权登录



oauth 授权登录主要是 code 换取 openId 和 sessionKey 的过程



前端小程序登录


写在 app.js 中


login () {
console.log('登录')
return util.promisify(wx.login)().then(({code}) => {
console.log(`code: ${code}`)
return http.post('/oauth/login', {
code,
type: 'wxapp'
})
})
}

服务端实现 oauth 授权


服务端实现上述 /oauth/login 这个接口


app
.post('/oauth/login', (req, res) => {
var params = req.body
var {code, type} = params
if (type === 'wxapp') {
// code 换取 openId 和 sessionKey 的主要逻辑
axios.get('https://api.weixin.qq.com/sns/jscode2session', {
params: {
appid: config.appId,
secret: config.appSecret,
js_code: code,
grant_type: 'authorization_code'
}
}).then(({data}) => {
var openId = data.openid
var user = users[openId]
if (!user) {
user = {
openId,
sessionKey: data.session_key
}
users[openId] = user
console.log('新用户', user)
} else {
console.log('老用户', user)
}
req.session.openId = user.openId
req.user = user
}).then(() => {
res.send({
code: 0
})
})
} else {
throw new Error('未知的授权类型')
}
})

获取用户信息


登录系统中都会有一个重要的功能: 获取用户信息, 我们称之为 getUserInfo


如果已登录用户调用 getUserInfo 则返回用户信息, 比如昵称, 头像等, 如果未登录则返回"用户未登录"



也就是说此接口还有判断用户是否登录的功效...



小程序的用户信息一般存储在 app.globalData.userInfo 中(模板如此)


我们在服务端加上前置中间件, 通过 session 来获取对应的用户信息, 并放在 req 对象中


app
.use((req, res, next) => {
req.user = users[req.session.openId]
next()
})

然后实现 /user/info 接口, 用来返回用户信息


app
.get('/user/info', (req, res) => {
if (req.user) {
return res.send({
code: 0,
data: req.user
})
}
throw new Error('用户未登录')
})

小程序调用用户信息接口


getUserInfo () {
return http.get('/user/info').then(response => {
let data = response.data
if (data && typeof data === 'object') {
// 获取用户信息成功则保存到全局
this.globalData.userInfo = data
return data
}
return Promise.reject(response)
})
}

专为小程序发请求设计的库


小程序代码通过 http.get, http.post 这样的 api 来发请求, 背后使用了一个请求库


@chunpu/http 是一个专门为小程序设计的 http 请求库, 可以在小程序上像 axios 一样发请求, 支持拦截器等强大功能, 甚至比 axios 更顺手


初始化方法如下


import http from '@chunpu/http'

http.init({
baseURL: 'http://localhost:9999', // 定义 baseURL, 用于本地测试
wx // 标记是微信小程序用
})

具体使用方法可参照文档 github.com/chunpu/http…


自定义登录态持久化


浏览器有 cookie, 然而小程序没有 cookie, 那怎么模仿出像网页这样的登录态呢?


这里要用到小程序自己的持久化接口, 也就是 setStorage 和 getStorage


为了方便各端共用接口, 或者直接复用 web 接口, 我们自行实现一个简单的读 cookie 和种 cookie 的逻辑


先是要根依据返回的 http response headers 来种上 cookie, 此处我们用到了 @chunpu/http 中的 response 拦截器, 和 axios 用法一样


http.interceptors.response.use(response => {
// 种 cookie
var {headers} = response
var cookies = headers['set-cookie'] || ''
cookies = cookies.split(/, */).reduce((prev, item) => {
item = item.split(/; */)[0]
var obj = http.qs.parse(item)
return Object.assign(prev, obj)
}, {})
if (cookies) {
return util.promisify(wx.getStorage)({
key: 'cookie'
}).catch(() => {}).then(res => {
res = res || {}
var allCookies = res.data || {}
Object.assign(allCookies, cookies)
return util.promisify(wx.setStorage)({
key: 'cookie',
data: allCookies
})
}).then(() => {
return response
})
}
return response
})

当然我们还需要在发请求的时候带上所有 cookie, 此处用的是 request 拦截器


http.interceptors.request.use(config => {
// 给请求带上 cookie
return util.promisify(wx.getStorage)({
key: 'cookie'
}).catch(() => {}).then(res => {
if (res && res.data) {
Object.assign(config.headers, {
Cookie: http.qs.stringify(res.data, ';', '=')
})
}
return config
})
})

登录态的有效期


我们知道, 浏览器里面的登录态 cookie 是有失效时间的, 比如一天, 七天, 或者一个月


也许有朋友会提出疑问, 直接用 storage 的话, 小程序的登录态有效期怎么办?


问到点上了! 小程序已经帮我们实现好了 session 有效期的判断 wx.checkSession


它比 cookie 更智能, 官方文档描述如下



通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序,用户登录态越有可能失效。反之如果用户一直在使用小程序,则用户登录态一直保持有效



也就是说小程序还会帮我们自动 renew 咱们的登录态, 简直是人工智能 cookie, 点个赞👍


那具体在前端怎么操作呢? 代码写在 app.js 中


onLaunch: function () {
util.promisify(wx.checkSession)().then(() => {
console.log('session 生效')
return this.getUserInfo()
}).then(userInfo => {
console.log('登录成功', userInfo)
}).catch(err => {
console.log('自动登录失败, 重新登录', err)
return this.login()
}).catch(err => {
console.log('手动登录失败', err)
})
}

要注意, 这里的 session 不仅是前端的登录态, 也是后端 session_key 的有效期, 前端登录态失效了, 那后端也失效了需要更新 session_key



理论上小程序也可以自定义登录失效时间策略, 但这样的话我们需要考虑开发者自己的失效时间和小程序接口服务的失效时间, 还不如保持统一来的简单



确保每个 Page 都能获取到 userInfo


如果在新建小程序项目中选择 建立普通快速启动模板


我们会得到一个可以直接运行的模板


点开代码一看, 大部分代码都在处理 userInfo....



注释里写着



由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回




所以此处加入 callback 以防止这种情况



但这样的模板并不科学, 这样仅仅是考虑了首页需要用户信息的情况, 如果扫码进入的页面也需要用户信息呢? 还有直接进入跳转的未支付页活动页等...


如果每个页面都这样判断一遍是否加载完用户信息, 代码显得过于冗余


此时我们想到了 jQuery 的 ready 函数 $(function), 只要 document ready 了, 就可以直接执行函数里面的代码, 如果 document 还没 ready, 就等到 ready 后执行代码


就这个思路了! 我们把小程序的 App 当成网页的 document


我们的目标是可以这样在 Page 中不会出错的获取 userInfo


Page({
data: {
userInfo: null
},
onLoad: function () {
app.ready(() => {
this.setData({
userInfo: app.globalData.userInfo
})
})
}
})

此处我们使用 min-ready 来实现此功能


代码实现依然写在 app.js 中


import Ready from 'min-ready'

const ready = Ready()

App({
getUserInfo () {
// 获取用户信息作为全局方法
return http.get('/user/info').then(response => {
let data = response.data
if (data && typeof data === 'object') {
this.globalData.userInfo = data
// 获取 userInfo 成功的时机就是 app ready 的时机
ready.open()
return data
}
return Promise.reject(response)
})
},
ready (func) {
// 把函数放入队列中
ready.queue(func)
}
})

绑定用户信息和手机号


仅仅获取用户的 openId 是远远不够的, openId 只能标记用户, 连用户的昵称和头像都拿不到


如何获取这些用户信息然后存到后端数据库中呢?


我们在服务端实现这两个接口, 绑定用户信息, 绑定用户手机号


app
.post('/user/bindinfo', (req, res) => {
var user = req.user
if (user) {
var {encryptedData, iv} = req.body
var pc = new WXBizDataCrypt(config.appId, user.sessionKey)
var data = pc.decryptData(encryptedData, iv)
Object.assign(user, data)
return res.send({
code: 0
})
}
throw new Error('用户未登录')
})

.post('/user/bindphone', (req, res) => {
var user = req.user
if (user) {
var {encryptedData, iv} = req.body
var pc = new WXBizDataCrypt(config.appId, user.sessionKey)
var data = pc.decryptData(encryptedData, iv)
Object.assign(user, data)
return res.send({
code: 0
})
}
throw new Error('用户未登录')
})

小程序个人中心 wxml 实现如下


<view wx:if="userInfo" class="userinfo">
<button
wx:if="{{!userInfo.nickName}}"
type="primary"
open-type="getUserInfo"
bindgetuserinfo="bindUserInfo">
获取头像昵称 </button>
<block wx:else>
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>

<button
wx:if="{{!userInfo.phoneNumber}}"
type="primary"
style="margin-top: 20px;"
open-type="getPhoneNumber"
bindgetphonenumber="bindPhoneNumber">
绑定手机号 </button>
<text wx:else>{{userInfo.phoneNumber}}</text>
</view>

小程序中的 bindUserInfo 和 bindPhoneNumber 函数, 根据微信最新的策略, 这俩操作都需要用户点击按钮统一授权才能触发


bindUserInfo (e) {
var detail = e.detail
if (detail.iv) {
http.post('/user/bindinfo', {
encryptedData: detail.encryptedData,
iv: detail.iv,
signature: detail.signature
}).then(() => {
return app.getUserInfo().then(userInfo => {
this.setData({
userInfo: userInfo
})
})
})
}
},
bindPhoneNumber (e) {
var detail = e.detail
if (detail.iv) {
http.post('/user/bindphone', {
encryptedData: detail.encryptedData,
iv: detail.iv
}).then(() => {
return app.getUserInfo().then(userInfo => {
this.setData({
userInfo: userInfo
})
})
})
}
}

代码


本文所提到的代码都可以在我的 github 上找到


小程序代码在 wxapp-login-demo


服务端 Node.js 代码在 wxapp-login-server


关于奇舞周刊


《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。



作者:奇舞精选
来源:juejin.cn/post/6844903702726180871
收起阅读 »

如何过完有效率的一周

时间管理有用 Or 无用? 上一篇面试反思被黄佬转载后,群里很多人反馈 时间利用率这么高是怎么做到的?难道我没有娱乐时间吗?为什么我自己就坚持不下去? 《如何过有效率的人生》给我埋下了种子 其实我也是受另外一个作者的影响,公众号:《如何过有效率的人生》,作者:...
继续阅读 »

时间管理有用 Or 无用?


上一篇面试反思被黄佬转载后,群里很多人反馈 时间利用率这么高是怎么做到的?难道我没有娱乐时间吗?为什么我自己就坚持不下去?


《如何过有效率的人生》给我埋下了种子


其实我也是受另外一个作者的影响,公众号:《如何过有效率的人生》,作者:“Abby”


这位作者是在两年前的内部分享中认识的(下面有链接),听完分享之后立马关注了公众号,那时我心理想的和你们一样,也是充满了各种疑惑。



幸运的是 这门课 被腾讯学堂开放出来了,大家都可以看看这套时间管理课程,相信我读完之后一定会有所收获。


鹅厂“高手在民间”| 互联网加班狗如何高效工作,腾出空,去生活?



《面试反思》让这颗种子发了芽




这不就是 时间管理吗,很自然的想起了abby老师 时间管理方法,于是 这次我决定跟上老师的步伐 给自己也制定一个时间管理的系统



如何入手时间管理?


思想认知跟上了,那么怎么做呢?


规划自己的人生系统



我们一生当中值得我们做的事情很少,大部分人都在浑浑噩噩浑然不知的情况下度过了一年又一年,没有成长也对生活生了倦怠



给自己留出 半个小时的时间,想想对于自己来说 哪些系统是有意义的, 写下来 这就是你的年度Flag。


也可以先 按照我的系统来 然后在做的过程中 找到对自己真正有意义感兴趣的系统。



人生系统要具体划分出来 任务细项


为什么要做这一步? 这涉及到决策疲劳,想想看 我们是不是决定做一件事情的时候 总是会被一些无关紧要的选择题消耗精力(读哪本书? 看哪个视频?)。



因此 我们要列出具体的任务事项,等到做事情的时候就不需要被选择消耗精力了,傻瓜式的执行就好了~~



人生系统如何划分 任务细项



任务纬度 是 人生系统里面很重要的指标,代表着某一个领域范围,详情内容是真正要执行的动作。



对于读书任务来说 任务是某一个领域的(认知/心理/理财/技术/,,,,,,),而详情内容就是 认知领域的数据有哪些,理财领域的书籍有哪些



强制规划自己的时间安排


为什么要做强制的时间规划



如果找不到目标或者一个做事习惯,那么就会浑浑噩噩的浪费掉时间。




这大概也是熵增定律吧哈哈,得有一个尺度去规范我们的时间管理,去制约我们的行为;不然时间就会 无意义的流逝掉。



曾经的我 也是 一个懒癌,荒废了很多时间,从我的个人介绍中 就能看出来。。。。哈哈哈



言归正传,时间管理 大家都知道 , 但是真正做的时候很难。为什么?也是上面的原因导致的:决策疲劳。能做的事情太多了, 这也想做,那也想做 在纠结中 浪费了很多时间~~~


不如就从现在做起, 给自己两小时的时间(我就是这样),梳理一下自己的时间安排。


当然也可以抄我的作业,后面根据你的 实际情况进行调整


我的工作日时间规划


上午下午

我的周末时间规划


周六

周日

月日历


工作日



周六


周日



“时间印迹”- 量化时间 让时间流逝的更有~意义


为什么要记录时间:优化之前先量化



人都有一种高估自己的心理,总觉得自己做完一件事情,应该花不了多长时间,其实记录过时间的人都知道,预估值和实际值往往差距还挺大,这也即著名的侯世达定律: *“实际做事花费的时间总是比预期的要长,即使预期中考虑了侯世达定律” *。



而通过记录时间,就可以让我们踏踏实实感受到自己的真实水平,而不是脱离实际,好高骛远。




但身处互联网时代,干扰我们注意力的事情太多太多,在纸上记录时间的切换成本很高,我曾尝试了好几次都坚持不下来。后来发现了这款用起来非常顺手的软件--时间印迹(IOS)。


记录时间的好处有哪些?



  1. 能够清楚的知道自己每类事情每天的花费占比多少,进而推算当天的价值有多大,是不是被浪费掉了;

  2. 感受到时间在滴滴答答的流逝,做事情更高效了;

  3. 预估时间更准了,比如:开发一个普通报表的时间,整个流程做完不超过半小时;完成一次好的PPT分享至少需要准备3天时间;

  4. 能更脚踏实地的踩稳今天了,深知:明天有明天的功课,今天的功课今天必须得完成


时间印迹-- 量化时间

怎样记录时间--轻轻一点“计时”


之前说到 量化时间,那么如何做呢?



首先记录自己当前每天的时间消耗状况(轻点计时),然后回顾自己一周的时间消耗,开始小步优化自己的时间安排



怎样记录时间--轻轻一点“计时”

让记录时间更有动力:热力图~


让记录时间更有动力:热力图~

时间管理成果展示:我的六大人生系统


读书系统


技术力:Flomo


技术力目前的学习领地 是在极客时间,极客时间中的笔记系统对于导出不太友好,所以我直接记录在了flomo中。


flomo热力图

通用力:语雀文档


关于技术力的东西 市面上有整个技术学习路线图辅助我 搭建个人技术能力框架,但是对于通用力来说范围太广,没有约定俗成的一种规范和标准,因此只能自己摸索。


好在最近阅读的“如何读书”专栏中的书 给了我一些启发,对于通用力的书籍如何记录笔记也有了些自己的框架。



高效阅读读书笔记


高效阅读笔记

如何阅读一本书 读书笔记


如何阅读一本书笔记


整理系统


时间印迹


记录只需要轻轻一点,目前一天总时间花费 大概在三分钟左右。



更方便的回顾查看自己过去一天过去一周,一月,一年的时间花费,目前终身会员有优惠,持续到十月八号,有兴趣的可以看看(独立开发者做的产品)。




飞书汇报


目前来说模板太长了哈哈哈,不过搭了一个框架之后需要填的内容很少。


日报目前可以 控制在十分钟以内




反思系统


飞书妙计


大致可以控制在十五分钟左右,以后要控制在十分钟以内。




作者:北洋
来源:juejin.cn/post/7276675247597305867
收起阅读 »

30岁之前什么新技术我都学,30岁之后什么新技术我都不学。

前言 今年是我步入程序员行业的第9年,大概到明年年后就满10年了。 有些唏嘘,嗯,又多干一年(又多活一年)。 现在依稀记得当年玩仙剑四最后慕容紫英说的那句话: 人生一场虚空大梦,韶华白首,不过转瞬。唯有天道恒在,循环往复,不曾更改。 现实生活的...
继续阅读 »

前言


1.jpeg



今年是我步入程序员行业的第9年,大概到明年年后就满10年了。




有些唏嘘,嗯,又多干一年(又多活一年)。




现在依稀记得当年玩仙剑四最后慕容紫英说的那句话:


人生一场虚空大梦,韶华白首,不过转瞬。唯有天道恒在,循环往复,不曾更改。




现实生活的冰冷和枯燥,大体也就这般了吧。



30岁之前


1、高考失利



2007年,我在全国高考失利了,总分469,理科生,在当时来讲,最多也就是二本二了。




而我在之前的大多数模拟考中,都是530分以上,我自认为是比较努力的那一类学生。




无数个日日夜夜,起早贪黑,一次考试,竹篮打水,前功尽弃。




遥想古代学子名落孙山的落魄心情,人生第一次脱离书本得到体会。




同时,高考的失利,让十八岁的我第一次明白,原来努力真不一定有用。



2、去当兵了



2007年左右参军的人,有不少是因为《士兵突击》而去的,唯一腔热血尔。




我不是。




我报了湖北第二师范大学,当年的分数勉强能过的,学校也打电话了。




我十几岁就是个对未来有些许规划的人,知道上不了理想中的大学,家庭经济也支撑不起复读一年,我立马就决定选专业为主,老师是我很早就在内心有计较的一个方向。




父母的反对是出乎我意料之外的,他们魔怔了,竟然让我去参军,进去考军校。




我愤怒且惊慌,大闹一场,事后得知是一位亲戚的怂恿,说是认识里面的人,可以走关系,也说我本身成绩不错,那几年去部队的很多都是小混混或者家里管不了的,文化水平很低,我这样的学生去了机会很大。




我的亲戚不多言,当时在创业做生意,到处筹钱,想让我父母抵押房子,父母认知浅,被忽悠了,中邪一样。




我是个孝顺的孩子,母亲血压一直不好,我妥协了,条件就是不许抵押房子给他们,否则一死了之。




事后证明我的强硬是对的,其他有些亲戚被骗了,父母才大梦初醒,我从懂事开始,一直在大事上从不糊涂。




去部队了,父母哭很惨,一个月后就后悔了,因为我是独子。




我在新兵连像行尸走肉一般熬了3个月,每天就三件事:跑步呕吐、单杠吊死猪、紧急集合。连吃饭和挨打都不在我的记忆中。




那个时候,在部队,城市兵是差农村兵很大一截的。



3、考军校?



当兵后悔两年,不当兵后悔一辈子,不知道现在部队还流行这句话不。




在部队,我最苦的日子回忆起来基本都是一群武汉兵带来的,他们很抱团,但是又很爱欺负同样是湖北的新兵,我给他们洗过沾屎的内裤,也被他们罚过吃没打扫干净的蜘蛛网。




到现在我都没明白为什么,而两广的兵、湖南的兵、江西的兵、温州的兵,都很团结,那两年义务兵,最照顾我的反而是广东的老兵。




虽然不提倡这个,但部队就是个大熔炉,抱团随处可见,湖北兵的尔虞我诈,是我心头至今的一片阴霾。




我真正适应部队生活是在一年后,成为了上等兵,人就是这样,改变不了,那就努力适应。




硬要说我当兵后对国家有什么贡献,大的没有,但赶上了2008年特大冰灾。




而我所在的部队驻地湖南,又是重灾区,什么郴州、衡阳很多地方都被砸烂了。




开个玩笑,如果我不做程序员了,我觉得体力活我还能捡回来一点,因为我的铁锹和镐头功力很深,都是在抗冰灾以及挖电缆沟的时候练出来的。




第二年开始,我体能达到了巅峰,一个山地5公里跑下来甚至没怎么喘气,对于从小体弱多病的我而言,倒是个惊喜,有种内功大成的感觉。




除此之外,也没有更多惊喜了,所谓考军校,名额是有的,但机会没有,因为有关系的兵是可以被安排到一些执勤点或哨所,安静的温习功课准备考试的,我这样的就一直训练、干活,想挑灯夜战连复习资料都没。




当年在部队还可以考军校,现在估计不行了,没有分数线,就是按分数从高到低录取一定的人头即可,对我来说确实很大机会。




我在部队没关系,家里也走不到关系,有关系的在新兵结束刚下连队就被安排去学开车、学叉车、学训犬、学修坦克(有一个战友学了但没留队是我心中一个未解之谜)之类的等等,我这种没关系的就在连队一直训练、出公差、偶尔种地养猪放牛,过着与世隔绝的田园生活。




考军校那只能是大梦一场。




终究是退伍了,也没什么留恋,但确实没后悔过,给了我一些很不同的人生经历和视角。



4、退伍了做什么



我有一群战友在部队欠了钱,退伍的时候小店老板在大门口拦着不让走,什么时候还钱什么时候走。




这算是意外留队了么……




后面他们电话找父母打钱过来才放走的,和我这种还攒了几千块的相比,确实谈不上光荣退伍了。




我带着一个嘉奖和一个优秀士兵的勋章回去了,父母凌晨在火车站看到我的那一刻喜极而泣,抱着我不撒手,我也对过往的事情释怀了。




当年,政策上更关照城市兵,退伍回来还有2万多的补贴,而农村兵没有。




我交出在部队攒的几千块钱,加上政府给的2万多补贴,给家里缓解了很大的压力,度过了那两年最艰难的时期,算是我成年后为数不多开心的事情。




至于接下来做什么,我有想过,继续上大学,但年纪大了,家里情况如此,我果断放弃了。




我选择了一个2010年左右逐渐新兴且我认为很有潜力的行业,动漫专业,也是我本身喜欢的东西,有了我前面的经历,我更清楚了,要做自己喜欢的事情,才能有动力去深耕,自己也会快乐。




父母总觉得亏欠我,所以什么都支持我,我理解但也不希望这样相处。




我兴致勃勃地报了这个学校,同时也报了成人大学,费用相对低一些,每年出一部分,对于全日制大学无望的我而言,这是最佳选择。




怀揣着异样的心情,我准备迎接新的人生起点。



5、误入编程行业


2.jpeg



我的人生在18-24岁的期间,都是颠簸的。




我选择的动漫专业在那一年只剩下建筑动漫,而我决定退而求其次的时候,这个专业也没了,因为和学校合作的一家深圳企业满额了。




我人都快昏了,这个时间点我还去哪里找专业,可以说已经没了。




再花时间去选择吗,我甚至厌恶了选择,我也没有那个条件选择,再拖一年看看?我本身就比别人更晚步入社会了。




我知道这一年我必须要入学,否则所有的计划都会被打乱。




编程行业是该校老师对我的建议,因为他们有华为回来的Java高级工程师做老师,还有拿到微软高级认证的专家授课。




什么华为?没听过,什么微软?修电脑的吗。




我当时大概就是这样的心情,入学测验体会了一把,那简直是颠覆了我的认知,那些代码就像蝌蚪文一样,多看一眼都浑身难受。




一直到截止报名的最后两天,我才终于咬牙进来了,再苦能比部队生活更艰苦吗?改造过的人,有军事素养,还怕学不会吗。




我本质上是一个误入编程行业的人,在入行前5年,我都没喜欢过这个行业。



6、Java和.Net选哪个



在2010年-2014年之间,我回头来看,Java是处在最大红利期的时候,但.Net也不不遑多让。




我在第一年的时候,是两个一起学的,.Net很舒适,各种拖控件,熟悉了之后那叫一个快,Java就枯燥多了,编码非常多,和现在比,以前真的很多。




HTML、CSS、JS、JSP、Struts2(Struts1即将淘汰)、Hibernate、Spring,再加上个三大数据库,那个时候的Java课程其实就这些东西。




第二年的时候我拿到了程序员资格证,也考过了.Net的很多微软认证,这个时候我才真正对编程有了一些入门的感觉,也就是知道它到底是个啥玩意儿了。




第三年的时候,参加了当时省内举办的一个编程赛事,还和同学一起写项目拿了个小奖,这算是对编程的实战有了新的体会。




编程最快乐的事情,即使到现在,也依然是产出成果的时候。




我最终还是选择了Java为主修语言,因为好找工作,就这么简单。




没想到的是,Java到现在,还是最好找工作的语言,这里面有太多戏剧性,但只能说明它确实厉害。



7、参加工作了



2014年是我参加工作的第一年,我选择了去广州,因为我在部队所属的军区就是广州军区。




我的心情是带着欢快和紧张的,我年纪其实不小了,和正规大学生比,我其实已经比他们晚了两年步入现实社会。




但找工作比我预想的容易很多,或者说太容易了,因为当时的IT公司除了大厂和事业单位,几乎是不看学历的,更看中你是否能马上开始干活。




简历刚投出去,就有三四个面试电话过来,凭着我当时的准备,很容易就过了两个,开价都是5000。




带队老师说我在学校的时候个人能力就比较强,让我这几天再试试多面几个,我答应了。




后面每天都有不少电话面试,我一共面了大概7个公司,最终选择了开价最高的那个6000的。




收到offer的时候我开心坏了,终于工作了,而且一个月6000,五险一金,试用期给80%,在当时入行的程序员里面算是挺高了。




其他同学还在苦苦面试,我顺便也给他们一些指导,睡觉前也在想拿到第一个月工资该怎么花。




那几年有两个培训机构其实很火,叫北大青鸟和清华IT,广告里面都是白领一样的老师和学生,令人眼馋。




而当我背着笔记本,胸前挂上工牌的那一刻,我真觉得自己是白领了。



8、工作和学习真不一样



我在第一家公司受了严重的打击,一度一蹶不振。




因为我明明在学校学了很多,也很优秀,但在公司,我是懵圈的。




业务读不懂,我连CRUD都步履维艰,一些没见过的技术,你不学会甚至没法干活。




在公司就是这样,你干不了活,就是不行,因为在学校你是付钱的客户,在公司,你只是拿钱的工人。




半年后,我的主管,一位湖北仙桃的半个老乡,对我有了很大的意见,甚至在办公室吼我。




我感觉丢脸极了,即使不抬头我也知道很多人都在看着我,这种无力的屈辱感如蚂蚁钻心一般。




我提离职了,才半年多,我扛不住了,选择了远离,主管很快就批了。




为什么我在外地对湖北人一直避之不及,除了在部队的时候经历过一次,就是这一次带来的心灵打击了。




在离职正式要走的那一天,我的主管湖北老乡来送我,他说了一句我现在都忘不了的话。




你可能不适合这个行业,可以考虑做点别的。




轰……




不是我一拳轰出打爆他脑袋哈,而是当时内心的感觉,头皮好像都要炸开了,我是失魂落魄走出公司回到出租屋里的。




接下来,我整整半年没找工作,靠着自己的一点钱,公司发的工资,以及同学的接济,勉强度过了半年。




为什么我不找了,因为内心害怕,害怕那种在公司里什么也不会,对着一个问题或BUG解决一天也解决不了,也不好意思总是问别人,那种每天只希望早点下班的煎熬、度日如年的感觉。




在学校,我很优秀,很努力,还拿过奖,工作后,我竟然一无是处,什么活也干不好。




工作和学习,真的不太一样。



9、编程是需要开窍的


3.jpeg



假装在外地工作不错,第一年回老家过年,父母听闻后洋溢着幸福的笑容。




在家的温暖和同学的鼓励下,我才重拾信心,年后又开始找工作。




这一次,我找到了一家传统行业的公司,给电网做服务的,薪水开了7500,比我预期要好很多。




有了前面的经历,这次我领悟了一些事情。




进了公司之后,我首先就请同组的同事和主管一起吃了个饭,还去了KTV,增进了一下感情。




大家觉得我很好相处,后面果然顺利很多,同事们都对我提供帮助,主管也经常问我有没有什么困难。




接下来的几个月,我慢慢熟悉了很多业务,做项目和日常维护也有了一些心得,每次处理一个问题,我都会记录下来,久而久之,我的积累甚至能比公司驻场的运维人员还强了。




传统企业对接接口是非常多的,主要是webservice,这是在学校老师不怎么教的,所以我根本不会。




正因为有了前面和同事打好关系,才有人愿意给我更多帮助,我才能掌握公司的很多常用技术,而这些都是你在一个公司的立身之本。




这种情况一直维持到了第二年,加起来是我工作3年的时候,我对很多脉络都理顺了,对编程的一些系统认识,以及项目在企业中的运作也了然于胸。




工作第3年,这是我第一次发现,我好像开窍了,忽然知道项目该怎么写了,接口该怎么写了,不需要问任何人,很奇妙的感觉。




现在的程序员刚工作就要收入过万,动辄就会分布式架构之类的,对我这种经历的程序员而言,我是理解不了的,我要到第3年才真觉得自己开窍了。




难道真的是时代变了。



10、传统行业能学到的也多



进什么行业,对刚入行的程序员来说,不是每个人都能做出选择的。




有不少程序员其实都进了传统行业,服务于政企、事业单位等等。




我这样在传统行业呆了5年的人,对于传统行业的看法也是能不进就不进,但没选择也别觉得它就差劲。




很多传统行业所用的技术其实是过时的,跟不上主流的,这和服务的对象有关,讲究求稳不求变。




但你千万别以为传统行业什么都学不到,我在前面提到的这家公司,主管曾经跟我说过一段话很有道理。




不管在什么行业,只要你肯学,你都能学到东西,你不肯学,在哪里都一样。




我在这家传统行业,学到了电力行业的诸多业务,驻场期间学到了其他厂家的一些技术,比如SOA的服务架构、dubbo、zookeeper、RabbitMQ、netty等技术,都是在此期间互相交流学到的。




同时,传统行业的工作比较有规律,只要掌握了以后,是有节奏的,你很好把控自己的时间,我在这5年期间,还通过摸鱼陆续学会了后面几年开始兴起的SpringBoot、SpringCloud、docker等技术。




如果是在互联网公司,它如果不采用某些技术,因为工作紧凑,加班也多,你是万万学不到的,只能靠自己挤时间。




这就是有得有失,你如果是在传统行业混日子,那确实白瞎,你如果利用好时间,搞不好3年时间下来你比互联网公司的一些程序员懂得的还多。




我就是在传统行业的这5年,凭借自学,薪水翻倍的,甚至在回老家之后,进入了一家互联网公司,也得心应手,成为了研发骨干。



30岁之后


1、30岁是个分水岭



我从不觉得35岁对于一个程序员是分水岭,反而觉得30岁才是。




对于普通人出身的程序员而言,30岁你将面临的最重要的一件事就是终身大事。




这是哪怕最终你可以逃掉,但过程你绝对逃不掉的人生转折点。




看过我以前文章的就知道,我个人是倾向于大家努力走入婚姻的,这不是强迫,而是陈述大自然的规律。




我在26岁的时候,家里已经开始稍微提一下谈朋友的事了,更多的是开玩笑的口吻。




在28岁的时候,他们的口吻已经略显严肃了,而我也试着相亲过两个。




没成功,更多的是尴尬,你要知道,相亲是要牵扯到第三方的,往往牵线的会是熟人或者你父母的熟人,你谈不好终归会让这里面的关系变的比正常关系微妙。




而29岁的时候,这种压力就真的逐渐步入顶峰,因为父母的传统思维依然是,过了30岁就不好找了。




所以你会面临除了工作以外的,来自家庭的关于个人问题的巨大压力。




尤其是程序员,很多还是不怎么会谈朋友的,工作加班、学新技术、看动漫、打游戏……如果再来个看综艺的习惯,你还有什么时间谈恋爱。




我很不幸,30岁依然没谈好,但我有别于许多自暴自弃顺其自然的人,我在30岁那年做了一件没有后悔的事。




我在薪水翻倍,并且即将升任新小组的研发主管的这一年,选择了离职回老家。




公司有些惊讶,试图挽留过,但因为牵扯到我的个人问题,他们最终不好说什么。




所以,在广州摸爬滚打混迹6年的我,提着一个包来到广州,最后又提着一个包离开广州。




原来人生做出选择没那么难,就是一个包的事情。



2、相亲是个体力活


4.jpeg



回到老家是2019年,幸运的是,年底就开始传出疫情,第二年年初就爆发了。




如果我没有鬼使神差的回来,我估计很长时间都回不来了,可能还会让父母急到崩溃。




我很顺利的在老家找到了一家互联网公司,是个小公司,给我开了6.5k,目前凭着我的努力已经涨到了7.5k。




和在外地相比,薪水何止腰斩,一度让我很不习惯,但我所得也很多,吃穿有家人更多照料了,没有广州那种湿热的环境,身体也逐渐变好了。




果然,身体的健康有很大一部分来源于心情。




工作的问题解决了,相亲就是个难题了。




我回忆起来,大概相亲了不止10个,按照当初我母亲的斥责:你相亲的对象都能凑几桌麻将了。




很累,相亲真的很累,不止身体,还有心理。




要么你看不上别人,要么别人看不上你。我对此的形容是,不分男女,大家都有问题,就像一堆烂萝卜,最后都剩在一个框里,还要让这框里的烂萝卜成双成对。




这简直是双倍难度……




我能坦然接受相亲也是有过长足的心理建设的,我年轻点的时候始终希望,我的意中人有一天会驾着七彩……哦不对,我的意中人一定要是我喜欢的,否则宁愿不谈。




想法没错,但想要走入婚姻,那确实得想开点,否则犹如大海捞针,真心随缘了,和尚都不会这么干。




我坚持下来后,32岁这年终究是修成正果,其中我付出的努力和艰辛不足为外人道也,如果你不愿意在这个年纪为这件事主动付出更多,以现在的社会情况,那确实很难成家。




我有了一个谈不上特别喜欢,但确实相互合适的另一半,33岁小孩出生,目前也一岁多了,相处这几年下来,夫妻也算挺和睦,家中矛盾不能说没有,总体和我预想的生活差别不大。




重要的是,有了家庭,步入了婚姻,哪怕琐事缠身,但内心已然安定,对未来没有孤独感,可以明确下一步的方向,努力在事业上投入更多心神而不被人生大事所干扰、打乱。




我想古人说的三十而立,可能包含这个意味在里面,这是我30岁之前不可能理解的。



3、30岁之后的程序员



我在30岁之前,学了非常多的技术,最离谱的时候,我花钱买服务器来搭建大型分布式架构,以帮助我提升自己的专业能力。




回到老家之后,我进入了一家互联网医疗行业,涵盖的业务范围还挺广,包含了智慧医院、互联网医疗、统一支付平台、医保支付、动账消息推送等等。




像一些动账消息,一月会有几次需要当日推送百万消息通知,比不了大厂,但在二三线城市算是有一定技术能力的企业了。




技术虽然掌握的挺多,但30岁之后如果一直徘徊于此,就国情而言,这样的程序员应该还是走错了。




这些年我写的接口有多少已经数不清了,看过烂到流脓的代码,也看过美丽如画的代码。




这里面就我知道的一些同事和同学,写过美丽如画代码的,有部分可能已经没干了,而写过烂到流脓代码的人,还有依然坚守在岗位上,甚至混的越来越好的那种。




我有一起吃饭交流过,算是琢磨出一点感悟来。




30岁之后,技术固然重要,人情世故可能更重要。




有些人,技术也许一般,也就是能干活的程度,但不妨碍他认识的人多,朋友多,有些程序员就喜欢这样的人,好相处,好沟通,平时乐于助人,也爱一起出来玩、吹牛皮。




至于技术上的问题,如果同事不再是同事,而是朋友,帮你解决真不是什么难事。



4、资源共享很重要



我目前这家互联网公司,在疫情爆发的2020年初,因为公司是医疗行业,必须在家熬夜支撑,甚至6天内就要出一个线上运行的项目,帮医生和患者们排忧解难。




我的主管也是刚来没多久的一个高级工程师,临危受命,带领我们几个一起做。




他规划和安排了一些事情,有些其实我感到不合理,但别人不说,我自认为有些经验,会据理力争。




到了这个年纪的程序员,都会有这样的通病,谁也不服谁。




这也给我后面的祸患埋下了一些伏笔。




矛盾爆发在初五的凌晨,我在微信通话中抱怨了几句,他没有说什么。




但第二天开始,什么活也不给我安排了,直到项目紧急上线,后面依然也没安排,我就知道自己得罪人了。




果不其然,因为疫情都在家里,公司要求每天报备,然后每周在一起钉钉群通话,每个人说自己这周干了些什么。




我贼尴尬,活都没安排,我说什么,之前还硬气呢,不安排干活我乐得清闲,原来这是给我摆了一道。




一周后,他又给我重新安排事情做了,此时我完全接受安排,一句抱怨都没了,大家心知肚明也都没主动提这茬,仍然正常交流。




后面我才知道,这人居然还是总经理从武汉请回来的一个大佬,技术很厉害,管理能力也很强。




接下来几年,我确实从他身上学到了非常多的东西,尤其是底层的一些原理,以前一知半解,现在茅塞顿开。




从那次矛盾之后,我就很主动的和他搞好关系,慢慢从他那里了解到一件重要的事情。




他已经是38岁的程序员,他的朋友圈有非常多很厉害的同行,有他以前的同学,也有他的前同事,还有他这些年网上认识的一些技术圈的人。




他说了一句话我感觉非常好,大概意思如下。




“现在是信息共享,资源共享的时代,程序员要学会扩大交际圈,得到更多可以共享的资源。”




他说他为什么能在疫情这么艰难的时期能进入到这家公司还成为技术主管,就是因为前两年结识了现在的总经理,才会有这样的机会。




除此以外,他能接收到的圈内资讯也比我快,遇到棘手的问题时,能咨询的圈内朋友也多,换成我,只能硬着头皮找BUG。




他还一直和很多同学保持着密切联系,这些同学在北上广都有,目前有的也是技术骨干了,他之前还把自己亲戚的小孩推荐给了上海一个同学所在的公司,不得不说这人脉令人佩服。




我是被深深震撼了,如果我不是运气好,我根本没机会进来,可能还在到处奔波,而他因为圈子广,比别人有更多找到工作的机会,一个电话就来了。




这些道理,我30岁之前连想的意思都没有,只是一门心思埋头苦学,追求新技术。




可技术年年都有新的,你学的完吗?你学不完。




人脉年年也能有新的,积累的越多,资源越多,你主动积累过吗?你没有,这对你来说可都是隐形财富。



5、不要贴35岁标签


5.jpeg



35岁的标签谁给你贴的?




是社会吗,是技术圈子吗,是公司和企业吗?他们只占一半,剩下一半是你自己贴的。




如果20-25是一个程序员入门编程行业的时期,那么26-30就是一个程序员技术能力爆发的时期。




这个时期有小部分程序员会主动加强对未来道路的铺垫和积累,这小部分人我是佩服的。




比如我入驻CSDN已经12年了,去年我偶然看到一个和我同年加入CSDN的博主,如今已经是知名大博主了,并且形成了自己的矩阵,有了庞大的粉丝关注。




比如天蚕土豆大火了这么多年,而我其实就在他后面一两年开始写小说,写的时候《斗破苍穹》还没火出圈,遗憾的是,我把当初的小白文红利期放弃了。




我年轻时做什么都喜欢半途而废,不是我意识不到,而是我控制不了,有多少人也是这样?




从学习算起,我入行编程领域是2010年,如果早点就开始有意识的积累,现在估计也有庞大的圈内资源了。




从写小说算起,我如果当时坚持下来,趁着小白文红利期,估计现在开新书也有一批死忠粉了。




类似的事情,我经历过好多次。




对于绝大部分程序员来说,像我这样的一类人终究是占比更多的。




大家更愿意把20-30岁的时光贡献给数之不尽的新技术,用以维持在编程领域的水平。




这无可厚非,精力有限,想要技术更厉害,保持学习是唯一路径。




可30岁之后,这种思维要主动求变了,继续保持学习固然重要,侧重点也许需要调整。




像我,30岁之后很少学习新技术,只是保持关注,但我拥有快速掌握新技术的能力,所以心里不慌。




30岁之前的程序员,如果你没有在这个阶段拥有这个能力,那么你这个阶段我认为是失败的。




30岁之后,需要开始多结交朋友,拓展资源,你入驻的平台是资源,你的朋友圈是资源,你待过的公司更是重要的资源。




你仔细想想,你待过的公司,那些同事你有好好维系关系吗,研发同事你还有联系吗,人事你还有联系吗,商务部销售部的同事你有联系吗,运维同事你有联系吗。




其次,你作为大学生,如果是科班生,你的同学大部分都应该是同行业的,你还都有联系吗,有互相交换信息交换资源吗?也许你26岁之前还有,但快30岁或者30岁之后就逐渐淡了。




为什么淡了,因为你自己的事情多了,就没有主动维系了,这是你的资源,你都不维系,指望资源缠着你吗。




大部分程序员是肯定没有考虑这些的,而等到30岁之后才想起,会留下很多遗憾,这都是喂到你嘴里你都不要的财富。




我鼓励30岁之后的程序员,在有了家庭以后,把更多精力放在周围看得见摸得着的资源和人际关系上,绝不能继续陷入追求新技术的泥沼中。




35岁的标签其实在30岁就已经决定了,5年时间足够你取下这个标签。




我认为,这是中国式程序员需要面临和沉思的课题。



总结



我一开始是有大纲的,这是以前写小说的习惯,大概就规划了3000字左右。




但是写到中途我发现,像我这样比上不齐,比下有余的程序员,应该是挺多的,毕竟我周围就有。




越写越觉得内心有一丝渴望得到救赎的悸动。




所以像我这样一群已经过了30岁的程序员,他们的生活和经历,是值得解析的,对于年轻点的程序员是有借鉴意义的。




因此我修改了大纲,加入了个人从成年后到目前为止的简要经历,每个阶段给了一些心理路程。




希望这种步入编程行业的经历,能够对仍旧或热爱、或挣扎、或迷茫的同行业者们一点正面积极的思考。




如果喜欢,可以点赞收藏关注,持续分享各种干货。


作者:程序员济癫
来源:juejin.cn/post/7274149231367454739
收起阅读 »

Bun 1.0 正式发布,爆火的前端运行时,速度遥遥领先!

web
9 月 8 日,前端运行时 Bun 1.0 正式发布,如今,Bun 已经稳定并且适用于生产环境。Bun 不仅是一个专注性能与开发者体验的全新 JavaScript 运行时,还是一个快速的、全能的工具包,可用于运行、构建、测试和调试JavaScript和Type...
继续阅读 »

9 月 8 日,前端运行时 Bun 1.0 正式发布,如今,Bun 已经稳定并且适用于生产环境。Bun 不仅是一个专注性能与开发者体验的全新 JavaScript 运行时,还是一个快速的、全能的工具包,可用于运行、构建、测试和调试JavaScript和TypeScript代码,无论是从单个文件还是完整的全栈应用。
image.png
2022年,Bun 发布,随即爆火,成为年度最火的前端项目:
image.png
Bun 的流行程度伴随着在去年夏天发布的第一个 Beta 版而爆炸性增长:仅一个月内,就在 GitHub 上获得了超过两万颗 Star。
star-history-202397.png



Bun 不仅仅是一个运行时。它也是:



  • 一个包管理器 (类似 Yarn、 NPM、 PNPM)

  • 一个构建工具 (类似 Webpack、 ESBuild、 Parcel)

  • 一个测试运行器

  • ...


所以 Bun 可以通过读取 package.json 来安装依赖项。Bun 还可以运行脚本。不管它做什么都比其他工具更快。Bun 在 JavaScript 生态系统的许多方面都有新的尝试,其中的重点是性能。它优先支持标准的 Web API,如 Fetch。它也支持许多 Node.js APIs,使其能与大多数 NPM 包兼容。



安装 Bun:


// npm
npm install -g bun

// brew
brew tap oven-sh/bun
brew install bun

// curl
curl -fsSL https://bun.sh/install | bash

// docker
docker pull oven/bun
docker run --rm --init --ulimit memlock=-1:-1 oven/bun

更新 Bun:


bun upgrade

下面就来看看 Bun 是什么,1.0 版本带来了哪些更新!


Bun:全能的工具包


JavaScript 成熟、发展迅速,并且有着充满活力和激情的开发者社区。然而,自14年前Node.js发布以来,JavaScript 的工具链变得越来越庞大和复杂。这是因为在发展过程中,各种工具被逐渐添加进来,但没有一个统一的集中规划,导致工具链缺乏整体性和效率,变得运行缓慢和复杂。


Bun 为什么会出现?


Bun的目标很简单,就是要消除JavaScript工具链的缓慢和复杂性,但同时保留JavaScript本身的优点。Bun希望让开发者继续使用喜欢的库和框架,并且无需放弃已经熟悉的规范和约定。


为了实现这个目标,可能需要放弃一些在使用Bun之后变得不再必要的工具:



  • Node.js:Bun 的一个可以直接替代的工具,因此不再需要以下工具:

    • node

    • npx:Bun 的 bunx 命令比 npx 快5倍。

    • nodemon:Bun 内置了监听模式,无需使用 nodemon

    • dotenvcross-env:Bun 默认支持读取.env文件的配置。



  • 转译器:Bun 可以运行.js.ts、``.cjs.mjs.jsx.tsx文件,因此不再需要以下工具:

    • tsc:仍然可以保留它用于类型检查!

    • babel.babelrc@babel/preset-*:不再需要使用 Babel 进行转译。

    • ts-nodets-node-esm:Bun 可以直接运行 TypeScript 文件。

    • tsx:Bun可以直接运行 TypeScript 的 JSX 文件。



  • 构建工具:Bun 具有一流的性能和与esbuild兼容的插件API,因此不再需要以下工具:

    • esbuild

    • webpack

    • parcel, .parcelrc

    • rollup, rollup.config.js



  • 包管理器:Bun 是一个与 npm 兼容的包管理器,可以使用熟悉的命令。它可以读取 package.json文件并将依赖写入node_modules目录,与其他包管理器的行为类似,因此可以替换以下工具:

    • npm, .npmrc, package-lock.json

    • yarn,yarn.lock

    • pnpm, pnpm.lock, pnpm-workspace.yaml

    • lern



  • 测试库:Bun是一个支持Jest的测试运行器,具有快照测试、模拟和代码覆盖率等功能,因此不再需要以下测试相关的工具:

    • jest, jest.config.js

    • ts-jest, @swc/jest, babel-jest

    • jest-extended

    • vitest, vitest.config.ts




尽管这些工具都有自己的优点,但使用它们时往往需要将它们全部集成在一起,这会导致开发过程变得缓慢和复杂。而Bun通过成为一个单一的工具包,提供了最佳的开发者体验,从性能到API设计都力求做到最好。


Bun:JavaScript 运行时


Bun是一个快速的JavaScript运行时。旨在提供出色的性能和开发体验。它的设计旨在解决开发过程中的各种痛点,使开发者的工作更加轻松和愉快。


与Node.js兼容


Bun 是可以直接替代 Node.js 的。这意味着现有的 Node.js 应用和 npm 包可以在 Bun 中正常工作。Bun 内置了对 Node.js API 的支持,包括:



  • 内置模块,如fspathnet

  • 全局对象,如__dirnameprocess

  • Node.js 模块解析算法(例如node_modules


尽管与 Node.js 完全兼容是不可能的,特别是一些依赖于v8版本的特性,但 Bun 几乎可以运行任何现有的 Node.js 应用。


Bun经过了与最受欢迎的Node.js包的兼容性测试,支持与Express、Koa、Hapi等服务端框架以及其他流行的全栈框架的无缝集成。开发者可以放心地在Bun中使用这些库和框架,并享受到更好的开发体验。
image.png
使用Next.js、Remix、Nuxt、Astro、SvelteKit、Nest、SolidStart和Vite构建的全栈应用可以在Bun中运行。


速度


Bun的速度非常快,启动速度比 Node.js 快 4 倍。当运行TypeScript文件时,这种差异会更加明显,因为在Node.js中运行TypeScript文件需要先进行转译才能运行。
image.png
Bun在运行一个简单的"Hello World" TypeScript文件时,比在Node.js中使用esbuild运行速度快5倍。


Bun使用的是Apple的WebKit引擎,而不是像Node.js和其他运行时一样使用Google的V8引擎。WebKit引擎是Safari浏览器的核心引擎,每天被数十亿的设备使用。它经过了长时间的实际应用和测试,具备快速和高效的特性。


TypeScript 和 JSX 支持


Bun内置了JavaScript转译器,因此可以运行JavaScript、TypeScript甚至JSX/TSX文件,无需任何依赖。


// 运行 TS 文件
bun index.ts

// 运行 JSX/TSX 文件
bun index.tsx

ESM 和 CommonJS 兼容


从CommonJS到ES模块的过渡一直是缓慢而充满挑战的。在引入ESM之后,Node.js花了5年时间才在没有--experimental-modules标志的情况下支持它。尽管如此,生态系统仍然充斥着CommonJS。


Bun 同时支持这两种模块系统。无论是使用CommonJS的.js扩展名、.cjs扩展名,还是使用ES模块的.mjs扩展名,Bun都会进行正确的解析和执行,而无需额外的配置。


甚至可以在同一个文件中同时使用importrequire()


import lodash from "lodash";
const _ = require("underscore");

Web API


Bun 内置支持浏览器中可用的Web标准API,如fetchRequestResponseWebSocketReadableStream等。


const response = await fetch("https://example.com/");
const text = await response.text();

开发者不再需要安装像node-fetchws这样的包。Bun内置的 Web API 是使用原生代码实现的,比第三方替代方案更快速和可靠。


热重载


Bun提供了热重载功能,可以在开发过程中实现文件的自动重新加载。只需在运行Bun时加上--hot参数,当文件发生变化时,Bun 就会自动重新加载你的应用,从而提高开发效率。


bun --hot server.ts

与像nodemon这样完全重新启动整个进程的工具不同,Bun 在重新加载代码时不会终止旧进程。这意味着HTTP和WebSocket连接不会断开,并且状态不会丢失。
hot (1).gif


插件


Bun 被设计为高度可定制的。
可以定义插件来拦截导入操作并执行自定义的加载逻辑。插件可以添加对其他文件类型的支持,比如.yaml.png。插件API的设计灵感来自于esbuild,这意味着大多数esbuild插件在 sBun 中也可以正常工作。


import { plugin } from "bun";

plugin({
name: "YAML",
async setup(build) {
const { load } = await import("js-yaml");
const { readFileSync } = await import("fs");
build.onLoad({ filter: /.(yaml|yml)$/ }, (args) => {
const text = readFileSync(args.path, "utf8");
const exports = load(text) as Record<string, any>;
return { exports, loader: "object" };
});
},
});

Bun API


Bun内部提供了针对开发者最常用需求的标准库API,并对其进行了高度优化。与Node.js的API不同,Node.js的API存在着向后兼容的考虑,而Bun的原生API则专注于提供更快速和更易于使用的功能。


Bun.file()


使用Bun.file()可以懒加载位于特定路径的文件。


const file = Bun.file("package.json");
const contents = await file.text();

它返回一个扩展了 Web 标准FileBunFile对象。文件内容可以以多种格式进行懒加载。


Bun.serve({
port: 3000,
fetch(request) {
return new Response("Hello from Bun!");
},
});

Bun每秒可以处理的请求比 Node.js 多 4 倍。


也可以使用tls选项来配置TLS(传输层安全协议)。


Bun.serve({
port: 3000,
fetch(request) {
return new Response("Hello from Bun!");
},
tls: {
key: Bun.file("/path/to/key.pem"),
cert: Bun.file("/path/to/cert.pem"),
}
});

Bun内置了对WebSocket的支持,只需要在websocket中定义一个事件处理程序来实现同时支持HTTP和WebSocket。而Node.js没有提供内置的WebSocket API,所以需要使用第三方依赖库(例如ws)来实现WebSocket的支持。因此,使用Bun可以更加方便和简单地实现WebSocket功能。


Bun.serve({
fetch() { ... },
websocket: {
open(ws) { ... },
message(ws, data) { ... },
close(ws, code, reason) { ... },
},
});

Bun 每秒可以处理的消息比在 Node.js 上使用 ws 库多 5 倍。


bun:sqlite


Bun内置了对 SQLite 的支持。它提供了一个受到better-sqlite3启发的API,但是使用本地代码编写,以达到更快的执行速度。


import { Database } from "bun:sqlite";

const db = new Database(":memory:");
const query = db.query("select 'Bun' as runtime;");
query.get(); // => { runtime: "Bun" }

在 Node.js 上,Bun 执行 SQLite 查询操作的速度比better-sqlite3快 4 倍。


Bun.password


Bun 还支持一些常见但复杂的API,不用自己去实现它们。


例如,可以使用Bun.password来使用bcryptargon2算法进行密码哈希和验证,无需外部依赖。


const password = "super-secure-pa$$word";
const hash = await Bun.password.hash(password);
// => $argon2id$v=19$m=65536,t=2,p=1$tFq+9AVr1bfPxQdh...

const isMatch = await Bun.password.verify(password, hash);
// => true

Bun:包管理器


Bun是一个包管理器。即使不使用Bun作为运行时环境,它内置的包管理器也可以加速开发流程。以前在安装依赖项时需要盯着npm的加载动画,现在可以通过Bun的包管理器更高效地进行依赖项的安装。


Bun可能看起来像你熟悉的包管理器:


bun install
bun add <package> [--dev|--production|--peer]
bun remove <package>
bun update <package>

安装速度


Bun的安装速度比 npm、yarn 和 pnpm 快好几个数量级。它利用全局模块缓存来避免从npm注册表中重复下载,并使用每个操作系统上最快速的系统调用。
image.png


运行脚本


很可能你已经有一段时间没有直接使用 Node 来运行脚本了。相反,通常使用包管理器(如npm、yarn等)与框架和命令行界面(CLI)进行交互,以构建应用。


npm run dev

你可以用bun run来替换npm run,每次运行命令都能节省 150 毫秒的时间。


这些数字可能看起来很小,但在运行命令行界面(CLI)时,感知上的差异是巨大的。使用"npm run"会明显感到延迟:
265893417-fbfb4172-5a91-4158-904f-55f2dbb0acde.gif而使用bun run则感觉几乎瞬间完成:
image.png
并不只是针对npm进行比较。实际上,bun run <command>的速度比yarn和pnpm中相应的命令更快。


脚本运行平均时间
npm run176ms
yarn run131ms
pnpm run259ms
bun run7ms 🚀

Bun:测试运行器


如果你以前在 JavaScript 中写过测试,可能了解 Jest,它开创了“expect”风格的API。


Bun有一个内置的测试模块bun:test,它与Jest完全兼容。


import { test, expect } from "bun:test";

test("2 + 2", () => {
expect(2 + 2).toBe(4);
});

可以使用bun test命令来运行测试:


bun test

还将获得 Bun 运行时的所有优势,包括TypeScript和JSX支持。


从Jest或Vite迁移很简单。@jest/globalsvitest的任何导入将在内部重新映射到bun:test,因此即使不进行任何代码更改,一切也将正常运行。


import { test } from "@jest/globals";

describe("test suite", () => {
// ...
});

在与 zod 的测试套件进行基准测试中,Bun比Jest快13倍,比Vite快8倍。
image.png
Bun的匹配器由快速的原生代码实现,Bun中的expect().toEqual()比Jest快100倍,比Vite快10倍。


可以使用bun test命令来加快 CI 构建速度,如果在Github Actions中,可以使用官方的oven-sh/setup-bun操作来设置Bun


name: CI
on: [push, pull_request]

jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: oven-sh/setup-bun@v1
- run: bun test

Bun会自动为测试失败的部分添加注释,以便在持续集成(CI)日志中更容易理解。这样,当出现测试失败时,可以直接从日志中读取Bun提供的注释,而不需要深入分析代码和测试结果,从而更方便地检查问题所在。
image.png


Bun:构建工具


Bun是一个JavaScript和TypeScript的构建工具和代码压缩工具,可用于将代码打包成适用于浏览器、Node.js和其他平台的形式。


bun build ./index.tsx --outdir ./build

Bun 受到了 esbuild 的启发,并提供了兼容的插件API。


import mdx from "@mdx-js/esbuild";

Bun.build({
entrypoints: ["index.tsx"],
outdir: "build",
plugins: [mdx()],
});

Bun 的插件 API 是通用的,这意味着它适用于打包工具和运行时。所以前面提到的.yaml插件可以在这里使用,以支持在打包过程中导入.yaml文件。


根据esbuild的基准测试,Bun比esbuild快1.75倍,比Parcel 2快150倍,比Rollup + Terser快180倍,比Webpack快220倍。
image.png
由于Bun的运行时和打包工具是集成在一起的,这意味着Bun可以做其他打包工具无法做到的事情。


Bun引入了JavaScript宏机制,可以在打包时运行JavaScript函数。这些函数返回的值会直接内联到打包文件中。


// release.ts
export async function getRelease(): Promise<string> {
const response = await fetch(
"https://api.github.com/repos/oven-sh/bun/releases/latest"
);
const { tag_name } = await response.json();
return tag_name;
}

// index.ts
import { getRelease } from "./release.ts" with { type: "macro" };

// release的值是在打包时进行评估的,并且内联到打包文件中,而不是在运行时执行。
const release = await getRelease();

bun build index.ts
// index.ts
var release = await "bun-v1.0.0";

Bun:可以做更多事


Bun 在 macOS 和 Linux 上提供了原生构建支持,但 Windows 一直是一个明显的缺失。以前,在 Windows 上运行 Bun 需要安装 Windows 子系统来运行Linux系统,但现在不再需要。


Bun 首次发布了一个实验性的、专为Windows平台的本地版本的 Bun。这意味着Windows用户现在可以直接在其操作系统上使用 Bun,而无需额外的配置。
image.png
尽管Bun的macOS和Linux版本已经可以用于生产环境,但Windows版本目前仍然处于高度实验阶段。目前只支持JavaScript运行时,而包管理器、测试运行器和打包工具在稳定性更高之前都将被禁用。性能方面也还未进行优化。


Bun:面向未来


Bun 1.0 只是一个开始。Bun 团队正在开发一种全新的部署JavaScript和TypeScript到生产环境的方式,期待 Bun 未来更好的表现!


作者:CUGGZ
来源:juejin.cn/post/7277387014046335010
收起阅读 »

旅行的意义

写在前面 马上就到国庆了,估计不少朋友都有出去旅行的计划,曾几何时,我还是个“网瘾少年”,旅行在我眼里毫不夸张的讲就是浪费时间。随着年岁的增长,也慢慢开始主动或被动的出去走走,现在想想大多都是火车模式:“逛吃逛吃”,虽然好像也挺乐呵,但是感觉也只是在跟着人潮往...
继续阅读 »

写在前面


马上就到国庆了,估计不少朋友都有出去旅行的计划,曾几何时,我还是个“网瘾少年”,旅行在我眼里毫不夸张的讲就是浪费时间。随着年岁的增长,也慢慢开始主动或被动的出去走走,现在想想大多都是火车模式:“逛吃逛吃”,虽然好像也挺乐呵,但是感觉也只是在跟着人潮往前走,并没有驻足思考过为什么要去到那里,前段时间偶然开始思考旅行的意义这个命题,而这次我好像找到了我内心的答案。


缘起


之前有段时间感觉自己工作状态不是很好,正好系统也在提醒我有几天年假快过期了,于是就请了两天假,加上周末凑了个4天小长假,打算出去玩一玩,来一场说走就走的旅行。


说干就干,按照喜好挑选候选目的地、规避当时风头正劲的台风影响确定行程、查阅资料做好了几天攻略、订车票/酒店、收拾行李,一气呵成。当我拎包正要出门时,脸上的口罩提醒了我,现在还还是疫情时期(得益于广州市政府和防疫人员的付出,今年广州上半年疫情控制的比较好,所以我已经很久没有那种被疫情支配的恐惧了,听我说,谢...),我赶紧查了下目的地的疫情风险等级,结果是属于中高风险区,而且令人沮丧的是几个想去的候选目的地都或多或少都有疫情。


最终经过深思熟虑我放弃了这次“说走就走的旅行”,往大了说是此行可能有碍国家疫情防控大局,往小了说就是我还要保住这份工🐶。


短短两个小时,我的心情像过山车从高到低再到平静,正如尼布尔的祈祷文:“上帝,请赐予我平静,去接受我无法改变的;给予我勇气,去改变我能改变的;赐我智慧,分辨这两者的区别。”,有些事情显然不是我们能控制和改变的,我逐渐接受了我无法去到目的地旅行的事实并恢复平静。


平静后我开始思考,我以前好像并不是一个热爱旅行的人,为什么这次却“火急火燎”的想出去?旅行的意义是什么?


旅行是为了____


旅行是为了看美景,尝美食,这可能是最简单纯粹的理由了,去到不同的地方品尝各地美食,这是一名吃货的自我修养。虽说国内各种所谓网红景区如今已是商业化严重,卖着琳琅满目却同是来自义乌的小商品,各地小吃街好像也都在卖着类似的烤面筋、臭豆腐和大鱿鱼。


旅行是为了了解世界,开阔眼界,正如老话说的读万卷书,行万里路,能开阔眼界,增加阅历是极好的,但是后来我发现这也是需要一定人文素养门槛的,比如去长城如果不了解背后的历史事件和故事,只是走马观花,那回来也许只能感叹:“长城啊,真***长!”


旅行是为了逃离和放松,每个人都有可能在工作或生活中遭遇挫折,尤其是近几年随着各种所谓“红利”基本到头,本人所在的互联网行业势头逐渐放缓,叠加一些不可抗力因素影响,致使“寒冬”在今年春夏提前到来,寒气也确确实实传给了每一个人。有时候遇到一些无力改变的坏事确实会让人心情很 down,此时来一次旅行,换一个环境,换一种心情,也不失为一剂良药,毕竟心情变好了,事情才能变好。


...


还有很多其他理由,旅行是为了拍照发朋友圈、为了交友等等。这些答案都没错,但是我好像还没有找到我内心的答案。


灵感


休假结束后,我继续回到公司“搬砖”,日子就这样一天天过去,直到某一天周末,那天天气很好,临时起意想去附近的海珠湖看看,走在湖边的林荫道,听着鸟语,闻着花香,望着波光粼粼的湖面和湖面上惬意游动的野鸭群,微风夹杂着泥土的气息拂面而过,我感觉到心旷神怡,身心放松,最后在湖边一直待到了日落才回家。


在回家的路上,我感觉这一天美好而充实,有一种久违的“活着”的感觉,这样的一天应该被记录下来,于是我发了上一篇图文:2022.08.20,而且我突然有了灵感,今天的湖边漫步也可以看做一次短暂的旅行,从中我好像找到了我想要的答案:旅行的意义,就在于给生命留下更多的回忆。


那么更多的回忆有什么用呢?


主观时间与客观时间


客观的时间是匀速而精确的,一秒一分一天一年,因为它就是人类发明出来用于衡量的一种工具;但是主观的时间却不是,相信很多人都有这样一种感觉,随着年龄的增长感觉时间过得越来越快


小时候感觉时间过得很慢,度日如年,盼望着墙上的钟转快点,盼望着能早点下课,盼望着能快点长大;而长大后(尤其是参加工作后),却感觉时间过得很快,度年如日,仿佛一眨眼,青春就不在了。(想想你过去几年记得的日子有哪些?)


这就是「主观时间的加速」,为什么会有这个现象呢,主要是因为单位时间内留下的回忆密度不同,小时候经历的事物少,每天都是崭新的一天,新的知识、新的朋友、新的世界,我们的大脑会对这些新鲜的事物产生印象,形成许多回忆;而长大后,除非主动探索,否则其实很少再遇到新鲜的事物,每天走相同的路,接触相同的人,我们的大脑不会记忆这些重复的事物,也就不会留下记忆,久而久之就会感觉过去一周,一个月甚至一年也没留下什么有印象的事


一个人生命的长度当然可以用客观存活时间来衡量,但是在了解了主观时间的加速之后,就会发现用客观时间衡量其实并不准确,假如一个人活了100岁,但是其生命中的大部分日子都是重复的,没有回忆的,那其实他的主观生命长度可能并没有一个只活了50岁却拥有丰富人生回忆的人长,所以在追求客观时间上长寿的同时,我们更应该追求的是主观时间上的“长寿”


所以回到前面的问题,回忆有什么用,答案就是:回忆可以增加一个人主观生命的长度


旅游就是一中很好的留下回忆的方式,来到一个新的地方,会遇见很多你没见过、听过、尝过的事物,这会充分调动我们的每一种感官,将这些新鲜事物记录在我们大脑中,形成回忆。想到这里,我似乎能够理解那些变卖家产环游世界的人了。


新的体验


当然,不是所有人都想要或者能够环游世界,旅行也算是个有一定门槛的活动,需要时间和金钱的支撑。那么除了旅行之外,有没有别的方式来增加我们的回忆,从而延长主观生命呢?


很多人把旅行定义为 “看不同的风景,遇见不同的人”,其中关键不在风景和人,而在于不同二字,因为有区别于之前不同的体验,才能引起大脑的注意并留下印象,所以只要是能带来「新的体验」的事物都可以增加我们的回忆。(还有一点可以增加回忆,就是带来较大情绪的事物,比如某次成功或者失败,也很容易理解,这里就不展开了)


新的体验可以来自很多地方,也可大可小,比如尝试一项新的运动,吃一家新的餐厅,学一门新的乐器,甚至走一条不同的路,当然也不仅局限于生活中,工作上我们也可以积极去寻找新的体验,不断拓宽自己的边界


再说回旅行的事,旅行确实可以留下回忆,但是这其实是旅行的结果,而在旅行的过程中,我们应该学会感受当下,就像那次“湖边漫步”和前面说的各种答案,尽情地去欣赏美景、品尝美食、了解世界、发朋友圈、交友,美好的回忆自然就会产生。


最后


马上就到国庆了,我准备计划一场旅行,还是像往常一样地“逛吃逛吃”,但是这次,我想我的内心会变得更加清澈和坚定。


作者:等开会
链接:https://juejin.cn/post/7146481671372537869
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Htmx 意外走红,我们从 React“退回去”后:代码行数减少 67%,JS 依赖项从 255 下降到 9

htmx 的走红 过去 Web 非常简单。URL 指向服务器,服务器将数据混合成 html,然后在浏览器上呈现该响应。围绕这种简单范式,诞生了各种 Javascript 框架,以前可能需要数月时间完成的一个应用程序基本功能,现在借助这些框架创建相对复杂的项目却...
继续阅读 »

htmx 的走红


过去 Web 非常简单。URL 指向服务器,服务器将数据混合成 html,然后在浏览器上呈现该响应。围绕这种简单范式,诞生了各种 Javascript 框架,以前可能需要数月时间完成的一个应用程序基本功能,现在借助这些框架创建相对复杂的项目却只需要数小时,我们节省了很多时间,从而可以将更多精力花在业务逻辑和应用程序设计上。


但随着 Web 不断地发展,Javascript 失控了。不知何故,我们决定向用户抛出大量 App,并在使用时发出不断增加的网络请求;不知何故,为了生成 html,我们必须使用 JSON,发出数十个网络请求,丢弃我们在这些请求中获得的大部分数据,用一个越来越不透明的 JavaScript 框架黑匣子将 JSON 转换为 html,然后将新的 html 修补到 DOM 中......


难道大家快忘记了我们可以在服务器上渲染 html 吗?更快、更一致、更接近应用程序的实际状态,并且不会向用户设备发送任何不必要的数据?但是如果没有 Javascript,我们必须在每次操作时重新加载页面。



现在,有一个新的库出现了,摒弃了定制化的方法,这就是 htmx。作为 Web 开发未来理念的一种实现,它的原理很简单:

  • 从任何用户事件发出 AJAX 请求。

  • 让服务器生成代表该请求的新应用程序状态的 html。

  • 在响应中发送该 html。

  • 将该元素推到它应该去的 DOM 中。


htmx 出现在 2020 年,创建者Carson Gross 说 htmx 来源自他于 2013 年研究的一个项目intercooler.js。2020 年,他重写了不依赖 jQuery 的 intercooler.js,并将其重命名为 htmx。然后他惊讶的发现 Django 社区迅速并戏剧性地接受了它!



图片来源:lp.jetbrains.com/django-deve…2021-486/


Carson Gross认为 htmx 设法抓住了开发者对现有 Javascript 框架不满的浪潮,“这些框架非常复杂,并且经常将 Django 变成一个愚蠢的 JSON 生产者”,而 htmx 与开箱即用的 Django 配合得更好,因为它通过 html 与服务器交互,而 Django 非常擅长生成 html。


对于 htmx 的迅速走红,Carson Gross 发出了一声感叹:这真是“十年窗下无人问,一举成名天下知(this is another example of a decade-long overnight success)”。


htmx 的实际效果


可以肯定的一点是 htmx 绝对能用,单从理论上讲,这个方法确实值得称道。但软件问题终究要归结于实践效果:效果好吗,能不能给前端开发带来改善?


在 DjangoCon 2022 上,Contexte 的 David Guillot 演示了他们在真实 SaaS 产品上实现了从 React 到 htmx 的迁移,而且效果非常好,堪称“一切 htmx 演示之母”(视频地址:http://www.youtube.com/watch?v=3GO…)。


Contexte 的项目开始于 2017 年,其后端相当复杂,前端 UI 也非常丰富,但团队非常小。所以他们在一开始的时候跟随潮流选择了 React 来“构建API绑定 SPA、实现客户端状态管理、前后端状态分离”等。但实际应用中,因为 API 设计不当,DOM 树太深,又需要加载很多信息,导致 UI“非常非常缓慢”。在敏捷开发的要求下,团队里唯一的 Javascript 专家对项目的复杂性表现得一无所措,因此他们决定试试 htmx。


九大数据提升



于是我们决定大胆尝试,花几个月时间用简单的 Django 模板和 htmx 替换掉了 SaaS 产品中已经使用两年的 React UI。这里我们分享了一些相关经验,公布各项具体指标,希望能帮同样关注 htmx 的朋友们找到说服 CTO 的理由!

  • 这项工作共耗费了约 2 个月时间(使用 21K 行代码库,主要是 JavaScript)

  • 不会降低应用程序的用户体验(UX)

  • 将代码库体积减小了 67%(由 21500 行削减至 7200 行)

  • 将 Python 代码量增加了 140%(由 500 行增加至 1200 行);这对更喜欢 Python 的开发者们应该是好事

  • 将 JS 总体依赖项减少了 96%(由 255 个减少至 9 个)


  • 将 Web 构建时间缩短了 88%(由 40 秒缩短至 5 秒)

  • 首次加载交互时间缩短了 50%至 60%(由 2 到 6 秒,缩短至 1 到 2 秒)

  • 使用 htmx 时可以配合更大的数据集,超越 React 的处理极限

  • Web 应用程序的内存使用量减少了 46%(由 75 MB 降低至 40 MB)



这些数字令人颇为意外,也反映出 Contexte 应用程序高度契合超媒体的这一客观结果:这是一款以内容为中心的应用程序,用于显示大量文本和图像。很明显,其他 Web 应用程序在迁移之后恐怕很难有同样夸张的提升幅度。


但一些开发者仍然相信,大部分应用程序在采用超媒体/htmx 方法之后,肯定也迎来显著的改善,至少在部分系统中大受裨益。


开发团队组成


可能很多朋友没有注意,移植本身对团队结构也有直接影响。在 Contexte 使用 React 的时候,后端与前端之间存在硬性割裂,其中两位开发者全职管理后端,一位开发者单纯管理前端,另有一名开发者负责“全栈”。(这里的「全栈」,代表这位开发者能够轻松接手前端和后端工作,因此能够在整个「栈」上独立开发功能。)



而在移植至 htmx 之后,整个团队全都成了“全栈”开发人员。于是每位团队成员都更高效,能够贡献出更多价值。这也让开发变得更有乐趣,因为开发人员自己就能掌握完整功能。最后,转向 htmx 也让软件优化度上了一个台阶,现在开发人员可以在栈内的任意位置进行优化,无需与其他开发者提前协调。


htmx 是传统思路的回归


如今,单页应用(SPA)可谓风靡一时:配合 React、Redux 或 Angular 等库的 JS 或 TS 密集型前端,已经成为创建 Web 应用程序的主流方式。以一个需要转译成 JS 的 SPA 应用为例:



但 htmx 风潮已经袭来,人们开始强调一种“傻瓜客户端”方法,即由服务器生成 html 本体并发送至客户端,意味着 UI 事件会被发送至服务器进行处理。



用这个例子进行前后对比,我们就会看到前者涉及的活动部件更多。从客户端角度出发,后者其实回避了定制化客户端技术,采取更简单的方法将原本只作为数据引擎的服务器变成了视图引擎。


后一种方法被称为 AJAX(异步 JavaScript 与 XML)。这种简单思路能够让 Web 应用程序获得更高的响应性体验,同时消除了糟糕的“回发”(postback,即网页完全刷新),由此回避了极其低效的“viewstate”等.NET 技术。


htmx 在很多方面都体现出对 AJAX 思路的回归,最大的区别就是它仅仅作为新的声明性 html 属性出现,负责指示触发条件是什么、要发布到哪个端点等。


另一个得到简化的元素是物理应用程序的结构与构建管道。因为不再涉及手工编写 JS,而且整个应用程序都基于服务器,因此不再对 JS 压缩器、捆绑器和转译器做(即时)要求。就连客户端项目也能解放出来,一切都由 Web 服务器项目负责完成,所有应用程序代码都在.NET 之上运行。从这个角度来看,这与高度依赖服务器的Blazor Server编程模型倒是颇有异曲同工之妙。


技术和软件开发领域存在一种有趣的现象,就是同样的模式迭起兴衰、周而复始。随着 SPA 的兴起,人们一度以为 AJAX 已经过气了,但其基本思路如今正卷土重来。这其中当然会有不同的权衡,例如更高的服务器负载和网络流量(毕竟现在我们发送的是数据视图,而不只是数据),但能让开发者多个选择肯定不是坏事。


虽然不敢确定这种趋势是否适用于包含丰富用户体验的高复杂度应用程序,但毫无疑问,相当一部分 Web 应用程序并不需要完整的 SPA 结构。对于这类用例,简单的 htmx 应用程序可能就是最好的解决方案。


参考链接:


news.ycombinator.com/item?id=332…


htmx.org/essays/a-re…


http://www.reddit.com/r/django/co…


mekhami.github.io/2021/03/26/…


http://www.compositional-it.com/news-blog/m…


作者:MobTech开发者
链接:https://juejin.cn/post/7156507227669413895
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

揭秘 Google Cloud Next '23:生成式 AI 的探索之路与开发范式变革

戳这里了解更多 前言: 8 月底,谷歌以「AI 与云科技驱动创新」为题,举办了为期三天的 Google Cloud Next ’23 大会,展示了谷歌在基础架构、数据和 AI、Workspace 协作和信息安全解决方案等全系列产品不断创新的成果。 乍看之下似乎...
继续阅读 »


戳这里了解更多


前言:


8 月底,谷歌以「AI 与云科技驱动创新」为题,举办了为期三天的 Google Cloud Next ’23 大会,展示了谷歌在基础架构、数据和 AI、Workspace 协作和信息安全解决方案等全系列产品不断创新的成果。


乍看之下似乎又是一场「大而全」的行业大会,但全程看完之后会明显的感受到,本次大会的内容全部围绕住了一个重心 —— 「生成式 AI」。


生成式 AI 作为近一两年最热门的技术话题没有之一,大家的谈论早已经超出了技术的范畴。如何应用、如何融合、如何落地,各行各业都在探索生成式 AI 带来的可能性。但除了 ChatGPT 这类的聊天机器人,似乎还没有特别成功的落地工具或者应用,哪怕是技术本源所在的研发领域也如是。


谷歌这次,似乎给出了一个参考答案。


一、Google Next '23:生成式 AI 的探索之路


生成式 AI 与传统 AI 技术最根本的区别在于前者通过理解自然语言创建内容,而后者依赖的是编程语言,这是生成式 AI 技术的关键变革特征,也是以前从未有过的能力。并且生成式 AI 能够以文本、图像、视频、音频和代码的形式生成新内容,而传统的 AI 系统训练计算机对人类行为、商业结果等进行预测。


对于许多人来说,第一次切身感知到生成式 AI 技术就是通过 ChatGPT。作为一种人工智能聊天机器人,在 2022 年 11 月迅速风靡全球。


大部分人不知道的是,ChatGPT 在架构层使用的是 Transformer 这一语言处理架构,该架构实际上便是谷歌在 2017 年的论文《Attention Is All You Need》中提出的。


谷歌作为一家成立了 25 年的公司,曾经在搜索、邮箱等领域取得了很多成绩,但在 AI 领域却面临了一些质疑。此前有媒体表示“谷歌在人工智能领域没有‘秘密武器’,无法赢得这场竞争。”而今年 5 月份的 Google I/O 以及前几日的 Google Cloud Next '23,可能正是在某种程度上回击了这种言论。


正如 Alphabet 和谷歌首席执行官桑达尔·皮查伊 (Sundar Pichai) 在活动开幕式上表示:


在过去几年与企业领导者的交谈中,我听到了一个类似的主题。从桌面到移动,到云,再到现在的人工智能,他们需要的是一直走在技术突破前沿的合作伙伴。很多转变确实令人兴奋,但同时也会带来不确定性。向人工智能的转变无疑就是如此。


作为一家公司,我们已经为这一时刻准备了一段时间。在过去的七年里,我们采取了人工智能先行的方法,应用人工智能使我们的产品从根本上更加可用。我们相信,让人工智能为每个人带来帮助,是我们在未来十年完成使命的最重要方式。


先内部小规模测试,再面向大众开放成熟的能力。谷歌也许确实没有“秘密武器”,但可能重点在于并不需要“秘密”,准备好之后,拿出来大家正面比划一下。这次的大会中,谷歌便亮出了其武器:


1**、**Cloud TPU v5e


生成式 AI 带来许多先进的功能,并可广泛使用于各种应用,但不可否认的是更加迫切的需要更先进、更强大的基础架构,设计和构建计算基础设施的传统方法已不足以满足生成式 AI 和大语言模型 (LLM) 等新兴工作负载的需求。为了解决这个问题,谷歌推出了 Cloud TPU v5e,一款最新且最具成本效益的 TPU。


TPU 是专门为大型人工智能模型的训练和推理而设计的定制人工智能芯片。客户可以使用单个 Cloud TPU 平台来运作大规模 AI 训练和推理。根据大会公开信息展示,Cloud TPU v5e 可扩展到数万个芯片并针对效率进行了优化。与 Cloud TPU v4 相比,每美元的训练效率可提升 2 倍,每美元的推论效率可提升 2.5 倍。


2**、**Vertex AI


在 2021 年 Google I/O 大会中,谷歌推出了 Vertex AI 托管式机器学习平台,用来帮助开发者更轻松地构建、部署和维护其机器学习模型。在本次的大会上,则正式推出了 Vertex AI 的搜索和对话功能,并将 ML 模型数量增加到 100 多个,这些模型都依据不同任务和不同大小进行了优化,包括文本、聊天、图像、语音、软件代码等等。


为了进一步平衡用户使用大模型进行建模的灵活性,以及他们可以生成的场景与推理成本以及微调能力,谷歌还为 Vertex AI 带来了扩展功能和 Grounding 等新的功能和工具。


借助 Vertex AI 扩展功能,开发者可以将 Model Garden 模型库中的模型与实时数据、专有数据或第三方平台(如 CRM 系统或电子邮件)连接起来,从而提供即时信息、集成公司数据并代表用户采取行动。这为生成式 AI 应用程序开辟了无限的新可能性。


Grounding 则是适用于 Vertex AI 基础模型、搜索及对话(Search and Conversation)的一项服务,可以协助客户将回复纳入企业自身的数据中,以提供更准确的回复内容。这一功能的重点在于可以一定程度上避免现阶段 AI 的“胡言乱语”,从而规避一些风险或者问题。


3**、**Duet AI


在 5 月的 I/O 大会上,Google Cloud 推出了 Duet AI。官方将其描述为“一位重要的协作伙伴、教练、灵感来源,和生产力推进器”,比如将 Docs 大纲转换成 Slides 中的演示文档,根据表格中的数据生成对应的图表;或者把 Duet AI 当做一个创作型的工具,用它来撰写电子邮件、生成图像、做会议纪要、检查文章的语法错误等等。


但当时的 Duet AI 只能在 Workspace 中使用,这次则扩展到了 Google Cloud 和 BigQuery 中,并推出更多适用的 AI 功能。例如 BigQuery 中的 Duet AI 旨在通过生成完整的函数和代码块,让用户专注于逻辑结果。它还可以建议和编写 Python 代码和 SQL 查询。这将进一步发挥 Duet AI "编码专家、软件可靠性工程师、数据库专家、数据分析专家和网络安全顾问 "的作用。


数据是生成式 AI 的核心,不难看出谷歌这次的更新迭代正式为了帮助数据团队进一步提高生产力,协助组织发挥数据及 AI 的最大潜力。


二、一些后续思考:生成式 AI 带来的开发范式变革


从基建、到平台再到应用,草蛇灰线,伏脉千里。谷歌在生成式 AI 领域的探索,其实并不像大家所想的有些“掉队”,而是在另一个维度提前布局。


25 年来,谷歌不断投资数据中心和网络,现在已经拥有涵盖 38 个云区域的全球网络,根据官方所说,目标是在 2030 年完全实现全天候采用无碳能源维持运营。谷歌的 AI 基础架构也在业界占据很大的份额,有超过 70% 的生成式 AI 独角兽公司和超过一半获得融资的生成式 AI 初创公司,都是 Google Cloud 客户。


"我们从每一层开始。这是对整个堆栈的重新构想。"这是英伟达的黄仁勋在 Google Cloud Next '23 中传递的一个态度,"生成式人工智能正在彻底改变计算堆栈的每一层。我们两家公司(英伟达和谷歌)拥有世界上最有才华的两支计算科学团队,将为生成式人工智能重新发明云基础设施。"


开发者关注的,是如何借助生成式 AI 的能力&工具提效;企业关注的,是如何借助生成式 AI 来迭代业务产品抢占市场心智。但对谷歌这类“搞基建”的公司而言,关注堆栈的每一层、关注堆栈的整体结构,才有可能推进技术的发展,实现传统开发范式的变革。


今年年初,谷歌推出了 Security AI Workbench,这是业界首创的可扩展平台,由谷歌的新一代安全性大语言模型 Sec-PaLM 2 驱动,结合了谷歌独有的观测技术,能帮助开发者掌握不断变化的安全性威胁,并针对网络安全操作进行微调。


几周前,谷歌推出 Chronicle CyberShield,能解决数据孤岛的问题,也能集中管理安全性数据,并统一规划处理方式。


“我们正处于一个由人工智能推动的全新数字化转型时代,”Google Cloud 首席执行官库里安说,“这项技术已经在改善企业的运营方式以及人类之间的互动方式。它正在改变医生照顾病人的方式、人们沟通的方式,甚至我们在工作中的安全方式。而这仅仅是个开始。”


生成式 AI 通过 ChatGPT 类的工具产品,已经在艺术创作、代码生成等领域带来了未曾设想过的便利,随着基础设施的迭代演进,相信现阶段的开发范式变革,可能真的仅仅是个开始。


结语:


生成式 AI 兴起之后,业界纷纷提出“想象力等于生产力”之类的观点,并借助一些场景的应用为佐证。谷歌这次的大会发布,无论是对生成式 AI 技术的推动,还是开发工具&服务的迭代,都给了我们更多的信心与想象的方向。


无论是从 AI 最佳化的基础架构,到注入了生成式 AI 强大功能的数据分析和信息安全服务;还是从增加了更多新模型和工具的 Vertex AI 平台,到扩大了支持 Duet AI 的 Workspace 和 Google Cloud,这些技术都是难得的探索与尝试,这些演变或者变革都是迈向下一次重大演变的正确方向的垫脚石。


对于开发者这一最了解技术本质的人群而言,我们能做的就是拥抱变化与发展,与企业、社区、生态一起,持续探索与创新。在变革到来前,找到要去的方向;在变革到来后,找到自己的位置。


Tips:会后的配套学习资料,给你准备好了!


为了让中国的开发者们更好地 Get 新技术、新发展,Google Cloud 今年同样安排了会后的配套系列课程 —— 「Next ’23 中文精选课」。


今年的课程将聚焦 AI/ML、安全合规、数据库、数据分析、DevOps、应用程序开发等领域,解读最新技术发布与行业实践应用,解读 Next ’23 发布的 100 项创新成果 。


发布会中没来得及讲的、没讲完的,都在这次的课程中了👌


据官方的信息展示,这次的中文精选课不仅有技术干货,更给开发者提供了多种互动方式体验,以及一批 Google Cloud 官方周边礼品,旅行颈枕、无线鼠标、电竞游戏耳机、蓝牙音箱,甚至还有 Google 25 周年纪念版安卓小人!


作者:稀土君
链接:https://juejin.cn/post/7277395050508730425
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

iOS Universal link

iOS
1. Universal link 介绍 1.1 Universal link 是什么 Universal Link 是苹果在 WWDC 上提出的 iOS9 的新特性之一。此特性类似于深层链接,并能够方便地通过打开一个 Https 链接来直接启动您的客户端应用...
继续阅读 »

1. Universal link 介绍


1.1 Universal link 是什么


Universal Link 是苹果在 WWDC 上提出的 iOS9 的新特性之一。此特性类似于深层链接,并能够方便地通过打开一个 Https 链接来直接启动您的客户端应用(手机有安装 App)。对比起以往所使用的 URL Scheme,这种新特性在实现 web-app 的无缝链接时能够提供极佳的用户体验。


当你的应用支持 Universal Link(通用链接),当用户点击一个链接是可以跳转到你的网站并获得无缝重定向到对应的 APP,且不需要通过 Safari 浏览器。如果你的应用不支持的话,则会在 Safari 中打开该链接。在苹果开发者中可以看到对它的介绍是:



Seamlessly link to content inside your app, or on your website in iOS 9 or later. With universal links, you can always give users the most integrated mobile experience, even when your app isn’t installed on their device.



1.2 Universal link 的应用场景


使用 Universal Link(通用链接)可以让用户在 Safari 浏览器或者其他 APP 的 webview 中拉起相应的 APP,也可以在 APP 中使用相应的功能,从而来把用户引流到 APP 中。


这具体是一种怎样的情景呢?举个例子,你的用户 safari 里面浏览一个你们公司的网页,而此时用户手机也同时安装有你们公司的 App;而 Universal Link 能够使得用户在打开某个详情页时直接打开你的 app 并到达 app 中相应的内容页面,从而实施用户想要的操作(例如查看某条新闻,查看某个商品的明细等等)。比如在 Safari 浏览器中进入淘宝网页点击打开 APP 则会使用 Universal Link(通用链接)来拉起淘宝 APP。


1.3 Universal link 跳转的好处

  • 唯一性: 不像自定义的 URL Scheme,因为它使用标准的 HTTPS 协议链接到你的 web 站点,所以一般不会被其它的 APP 所声明。另外,URL scheme 因为是自定义的协议,所以在没有安装 app 的情况下是无法直接打开的(在 Safari 中还会出现一个不可打开的弹窗),而 Universal Link(通用链接)本身是一个 HTTPS 链接,所以有更好的兼容性;

  • 安全: 当用户的手机上安装了你的 APP,那么系统会去你配置的网站上去下载你上传上去的说明文件(这个说明文件声明了当前该 HTTPS 链接可以打开那些 APP)。因为只有你自己才能上传文件到你网站的根目录,所以你的网站和你的 APP 之间的关联是安全的;

  • 可变: 当用户手机上没有安装你的 APP 的时候,Universal Link(通用链接)也能够工作。如果你愿意,在没有安装你的 app 的时候,用户点击链接,会在 safari 中展示你网站的内容;

  • 简单: 一个 HTTPS 的链接,可以同时作用于网站和 APP;

  • 私有: 其它 APP 可以在不需要知道你的 APP 是否安装了的情况下和你的 APP 相互通信。


2. Universal link 配置和运行


2.1 配置 App ID 支持 Associated Domains


登录developer.apple.com/ 苹果开发者中心,找到对应的 App ID,在 Application Services 列表里有 Associated Domains 一条,把它变为 Enabled 就可以了。



2.2 配置 iOS App 工程


Xcode 11.0 版本


工程配置中相应功能:targets->Signing&Capabilites->Capability->Associated Domains,在其中的 Domains 中填入你想支持的域名,也必须必须以 applinks:为前缀。


具体步骤如下图:





Xcode 11.0 以下版本


工程配置中相应功能:targets->Capabilites->Associated Domains,在其中的 Domains 中填入你想支持的域名,必须以 applinks:为前缀。


配置项目中的 Associated Domains:



2.2 配置和上传 apple-app-association


究竟哪些的 url 会被识别为 Universal Link,全看这个 apple-app-association 文件Apple Document UniversalLinks.html

  • 你的域名必须支持 Https

  • 域名 根目录 或者 .well-known 目录下放这个文件apple-app-association,不带任何后缀

  • 文件为 json 保存为文本即可

  • json 按着官网要求填写即可


apple-app-site-association模板:

{    "applinks": {        "apps": [],        "details": [            {                "appID": "9JA89QQLNQ.com.apple.wwdc",                "paths": [ "/wwdc/news/", "/videos/wwdc/2015/*"]            },            {                "appID": "ABCD1234.com.apple.wwdc",                "paths": [ "*" ]            }        ]    }}

复制代码


说明:



appID: 组成方式是 teamId.yourapp’s bundle identifier。如上面的 9JA89QQLNQ 就是 teamId。登陆开发者中心,在 Account -> Membership 里面可以找到 Team ID。




paths: 设定你的 app 支持的路径列表,只有这些指定的路径的链接,才能被 app 所处理。星号的写法代表了可识 别域名下所有链接。



上传指定文件:上传该文件到你的域名所对应的根目录或者.well-known 目录下,这是为了苹果能获取到你上传的文件。上传完后,自己先访问一下,看看是否能够获取到,当你在浏览器中输入这个文件链接后,应该是直接下载 apple-app-site-association 文件。


2.4 如何验证 Universal link 生效

  • 可以使用 iOS 自带的备忘录程序,输入链接,长按链接,如果弹出菜单中有”在‘xxx’中打开”,即表示配置生效。

  • 或者将要测试的网址在Safari中打开,在出现的网页上方下滑,可以看到有在”xxx”应用中打开, 出现菜单:



当点击某个链接,直接可以进我们的 app 了,但是我们的目的是要能够获取到用户进来的链接,根据链接来展示给用户相应的内容。


AppDelegate里中实现代理方法,官方链接:Handling Universal Links


Objective-C:

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {    if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb])    {        NSURL *url = userActivity.webpageURL;        if (url是我们希望处理的)        {            //进行我们的处理        }        else        {            [[UIApplication sharedApplication] openURL:url];        }    }         return YES;}

复制代码


Swift:

func application(_ application: UIApplication,                 continue userActivity: NSUserActivity,                 restorationHandler: @escaping ([Any]?) -> Void) -> Bool{    guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,        let incomingURL = userActivity.webpageURL,        let components = NSURLComponents(url: incomingURL, resolvingAgainstBaseURL: true),        let path = components.path,        let params = components.queryItems else {            return false    }        print("path = (path)")        if let albumName = params.first(where: { $0.name == "albumname" } )?.value,        let photoIndex = params.first(where: { $0.name == "index" })?.value {                print("album = (albumName)")        print("photoIndex = (photoIndex)")        return true            } else {        print("Either album name or photo index missing")        return false    }}

复制代码


3. Universal link 遇到的问题和解决方法


3.1 跨域


前端开发经常面临跨域问题,恩 Universal Link 也有跨域问题,但不一样的是,Universal Link,必须要求跨域,如果不跨域,就不行,就失效,就不工作。(iOS 9.2 之后的改动,苹果就这么规定这么设计的)


这也是上面拿知乎举例子的时候重点强调的一个问题,知乎为什么使用oia.zhihu.com做 Universal Link?

  • 假如当前网页的域名是 A

  • 当前网页发起跳转的域名是 B

  • 必须要求 B 和 A 是不同域名,才会触发 Universal Link

  • 如果 B 和 A 是相同域名,只会继续在当前 WebView 里面进行跳转,哪怕你的 Universal Link 一切正常,根本不会打开 App


是不是不太好理解,那直接拿知乎举例子


有心人可能看到,知乎的 Universal Link 配置的是 oia.zhihu.com 这个域名,并且对这个域名下比如/answers /questions /people 等 urlpath 进行了识别,也就是说,知乎的 universal link,只有当你访问 https://oia.zhihu.com/questions/xxxx,在移动端会触发 Universal Link,而知乎正经的 Urlhttps//www.zhihu.com/questions/xxx是不会触发 Universal Link 的,知乎为什么制作,为什么不把他的主域名配置 Universal Link,就是由于 Universal Link 的跨域的原因。


知乎的一般网页 URL 都是http://www.zhihu.com域名,你在微信朋友圈看到了知乎的问题分享,如果 copy url 你就能看到这样的链接


http://www.zhihu.com/question/22…



微信里其实是屏蔽 Schema 的,但是你依然能看到大大的一个按钮App内打开,这确实就是通过 Universal Link 来实现的,但如果知乎把 Universal Link 配在了http://www.zhihu.com域名,那么即便已经安装了 App,Universal Link 也是不会生效的。


一般的公司都会有自己的主域名,比如知乎的http://www.zhihu.com,在各处分享传播的时候,也都是直接分享基于主域名的 url,但为了解决苹果强制要求跨域才生效的问题,Universal Link 就不能配置在主域名下,于是知乎才会准备一个oia.zhihu.com域名,专为 Universal Link 使用,不会跟任何主动传播分享的域名撞车,从而在任何活动 WAP 页面里,都能顺利让 Universal Link 生效。


跨域的另外一个好处是可以突破微信跳转限制,支持微信无缝跳转到 App.


简单一句话



只有当前 webview 的 url 域名,与跳转目标 url 域名不一致时,Universal Link 才生效



3.2 更新


apple-app-association 的更新时机有以下两种:

  • 每次 App 安装后的第一次 Launch,会拉取 apple-app-association

  • Appstore 每次 App 的版本更新后的第一次 Launch,也会更新 apple-app-association


所以反复重新杀 APP 重开完全没用,删了 App 重装确实有用,但不可能让用户这么去做。也就是说,一旦不小心因为意外 apple-app-association,想要挽回又让那部分用户无感,App 再发一个版本就好了


3.3 Universal Link 用户行为


Universal Link 触发后打开 App,这时候 App 的状态栏右上角会有文字提示来自 XXApp,可以点状态栏的文字快速返回原来的 AP


如果用户点了返回微信,就会被苹果记住,认为用户并不需要跳出原 App 打开新 App,因此这个 App 的 Universal Link 会被关闭,再也无效。


想要开启也不是不行,让用户重新用 safari 打开,universal link 的页面,然后会出现很像苹果 smart bar 的东西,那个东西点了后就能打开


4. H5 端的 Universal Link 业务部署


H5 端的 Universal Link 跳转,从产品经理的角度看,需要满足以下 2 个需求:

  • 如果已安装 App,跳转对应界面

  • 如果没安装 App,跳转 App 下载界面


H5 端部署 Universal Link 示例:

router.use('/view', function (req, res, next) {    var path = req.path;    res.redirect('https://www.xxx.com/view' + path + '?xxx=xxx');});

复制代码


整个效果就是

  • 跳转https://www.xxx.com/view/*

  • 已安装 App

  • 打开 App 触发 handleUniversalLink

  • 走到/view/分支,拼接阅读页路由跳转

  • 未安装 AppWebView

  • 原地跳转https://``www.xxx.com``/view/*

  • 命中服务器的重定向逻辑

  • 重定向到https://``www.xxx.com``/view/*

  • 打开相应的 H5 页面



作者:Silence_xl
链接:https://juejin.cn/post/7233626231579689019
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

价格.0处理

iOS
在项目中有500.0或者500.00的情况需要处理 实习的同学写了一段这样的代码public extension String { var trimZero: String { replacingOccurrences(of: ".00...
继续阅读 »

在项目中有500.0或者500.00的情况需要处理


实习的同学写了一段这样的代码

public extension String {
var trimZero: String {
replacingOccurrences(of: ".00", with: "").replacingOccurrences(of: ".0", with:"")
}
}

咋一看似乎没啥问题,结果也符合预期




但是上面的case其实没有覆盖全,例如:500.01,那上面的处理方式就有bug了,会被处理成5001


正确的处理方式

public extension String {
var trimZero: String {
guard let value = Double(self) else { return self }
let formatter = NumberFormatter()
formatter.minimumFractionDigits = 0
formatter.maximumFractionDigits = 2
return formatter.string(from: NSNumber(value: value)) ?? self
}
}

测试结果




参考



作者:xiAo_Ju
链接:https://juejin.cn/post/7273684196635525139
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Taro开发小程序记录-海报生成

Taro开发小程序记录-海报生成在公司开发的第一个项目是一个简单的Taro小程序项目,主要应用的则是微信小程序,由于是第一次使用Taro,所以在开发过程中遇到的一些问题和一些开发技巧,记录一下,方便以后进行查看,也与大家进行分享。 自定义海报 说到自定义海报...
继续阅读 »

Taro开发小程序记录-海报生成


在公司开发的第一个项目是一个简单的Taro小程序项目,主要应用的则是微信小程序,由于是第一次使用Taro,所以在开发过程中遇到的一些问题和一些开发技巧,记录一下,方便以后进行查看,也与大家进行分享。



自定义海报


说到自定义海报可以说是很多小程序中都会进行开发的内容,比如需要进行二维码的保存,然后再对二维码进行一点文字的修饰,涉及到这方面的时候我们就需要使用canvas了。


在实际开发的过程中,遇到了一些很坑的问题,当我们需要使用离屏canvas来进行绘制时,我们可能就会遇到问题(我自己就遇到了)。


对于安卓端,我们可以正常的使用OffscreenCanvas来创建离屏canvas,然后绘制相关内容,最后在使用Taro.canvasToTempFilePath方法保存到临时文件下,Taro.canvasToTempFilePath方法会返回文件路径,我们就可以通过获取到的文件路径来进行下载。


下面是安卓端的一个🌰,大家有需要也可以直接拿去使用


  • 需要使用到的方法
 /**
  * @description 获取二维码图像
  */
 export const qrCodeImage = async (qrCodeValue: string, size: number = 128) => {
     /* NOTE: 通过创建离屏canvas承载code */
     const context = createOffscreenCanvas('2d', size, size);
     QRCode.toCanvas(context, qrCodeValue, { width: size, height: size, margin: 1 });
     return (context as unknown as HTMLCanvasElement).toDataURL();
 };
 /**
  * @description 创建离屏canvas对象,width与height单位为px
  */
 export const createOffscreenCanvas = (type: '2d' | 'webgl', width: number = 100, height: number = 100) => {
     return Taro.createOffscreenCanvas({ type, width, height });
 };
 /**
  * @description 将传入的图片url转换成一个ImageElement对象
  */
 export const loadImageByUrlToCanvasImageData = async (url: string, width: number = 100, height: number = 100) => {
     const context = createOffscreenCanvas('2d', width, height);
     const imageElement = context.createImage();
     await new Promise(resolve => {
         imageElement.onload = resolve;
         imageElement.src = url;
    });
     return imageElement;
 };
 /**
  * @description 将canvas转成图片文件并保存在临时路径下
  */
 export const changeCanvasToImageFileAndSaveToTempFilePath = async (options: Taro.canvasToTempFilePath.Option) => {
     const successCallback = await Taro.canvasToTempFilePath(options);
     return successCallback.tempFilePath;
 };
 interface SettingOptions {
     title: string;
     titleInfo: {
         dx: number;
         dy: number;
         color?: string;
         font?: string;
    };
     imageUrl: string;
     imagePos: {
         dx: number;
         dy: number;
    };
     width: number;
     height: number;
 }
 /**
  * @description 获取二维码图像并设置标题
  */
 export const generateQrCodeWithTitle = async (option: SettingOptions): Promise<string> => {
     const {
         title,
         titleInfo,
         imageUrl,
         imagePos,
         width,
         height,
    } = option;
     const context = await createOffscreenCanvas('2d', width, height);
     const ctx = (context.getContext('2d') as CanvasRenderingContext2D);
     const imgElement: any = await loadImageByUrlToCanvasImageData(imageUrl, width, height);
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, width, height);
     ctx.fillStyle = titleInfo.color || 'black';
     ctx.font = titleInfo.font || '';
     ctx.textAlign = 'center';
     ctx.fillText(title, titleInfo.dx || 0, titleInfo.dy || 0);
     ctx.drawImage(imgElement, imagePos.dx, imagePos.dy);
 
     const filePath = await changeCanvasToImageFileAndSaveToTempFilePath({
         canvas: (context as Canvas),
         width,
         height,
         fileType: 'png',
         destWidth: width,
         destHeight: height,
    });
     return filePath;
 };
 /**
  * @description 保存图片
  */
 export const saveImage = async (urls: string[], isLocal: boolean = true) => {
     let filePath = urls;
     if (!isLocal) {
         filePath = await netImageToLocal(urls);
    }
     await Promise.all(filePath.map(path => {
         return Taro.saveImageToPhotosAlbum({ filePath: path });
    }));
 
     return true;
 };
 /**
  * @description 加载在线图片,并返回临时图片文件地址
  */
 export const netImageToLocal = async (urls: string[]) => {
     const res = await Promise.all(urls.map((url:string) => {
         return Taro.downloadFile({ url });
    }));
 
     const result = res.map(data => {
         if (data.statusCode === 200) {
             return data.tempFilePath;
        }
         throw new Error(data.errMsg);
    });
 
     return result;
 };
 /**
  * @description 判断用户是否授权保存图片
  */
 export const checkHasAuthorizedSaveImagePermissions = async () => {
     const setting = await Taro.getSetting();
     const { authSetting } = setting;
     return authSetting['scope.writePhotosAlbum'];
 };
 /**
  * @description 下载图片,需要区分是本地图片还是在线图片
  */
 export const downloadImage = async (urls: string[], isLocal: boolean = true) => {
     const hasSaveImagePermissions = await checkHasAuthorizedSaveImagePermissions();
     if (hasSaveImagePermissions === undefined) {
         // NOTE: 用户未授权情况下,进行用户授权,允许保存图片
         await Taro.authorize({ scope: 'scope.writePhotosAlbum' });
         return await saveImage(urls, isLocal);
    } else if (typeof hasSaveImagePermissions === 'boolean' && !hasSaveImagePermissions) {
         return new Promise((resolve, reject) => {
             Taro.showModal({
                 title: '是否授权保存到相册',
                 content: '需要获取您的保存图片权限,请确认授权,否则图片将无法保存到相册',
                 success: (result) => {
                     if (result.confirm) {
                         Taro.openSetting({
                             success: async (data) => {
                                 if (data.authSetting['scope.writePhotosAlbum']) {
                                     showLoadingModal('正在保存...');
                                     resolve(await saveImage(urls, isLocal));
                                }
                            },
                        });
                    } else {
                         reject(new Error('未授予保存权限'));
                    }
                },
            });
        });
    }
     await saveImage(urls, isLocal);
     return true;
 };

  • 生成海报(二维码+标题头)

 /**
  * @description 获取二维码图像并设置标题
  */
 export const generateQrCodeWithTitle = async (option: SettingOptions): Promise<string> => {
     const {
         title,
         titleInfo,
         imageUrl,
         imagePos,
         width,
         height,
    } = option;
     const context = await createOffscreenCanvas('2d', width, height);
     const ctx = (context.getContext('2d') as CanvasRenderingContext2D);
     const imgElement: any = await loadImageByUrlToCanvasImageData(imageUrl, width, height);
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, width, height);
     ctx.fillStyle = titleInfo.color || 'black';
     ctx.font = titleInfo.font || '';
     ctx.textAlign = 'center';
     ctx.fillText(title, titleInfo.dx || 0, titleInfo.dy || 0);
     ctx.drawImage(imgElement, imagePos.dx, imagePos.dy);
 
     const filePath = await changeCanvasToImageFileAndSaveToTempFilePath({
         canvas: (context as Canvas),
         width,
         height,
         fileType: 'png',
         destWidth: width,
         destHeight: height,
    });
     return filePath;
 };

  • 具体使用

 export const saveQrCodeImageWithTitle = async () => {
     const url = await qrCodeImage(enterAiyongShopUrl(), 160);
     const imgUrl: string = await generateQrCodeWithTitle({
         title: 'adsionli菜鸡前端',
         titleInfo: {
             dx: 95,
             dy: 20,
             font: '600 14px PingFang SC',
             color: 'black',
        },
         imageUrl: url,
         imagePos: {
             dx: 15,
             dy: 34,
        },
         width: 190,
         height: 204,
    });
     await downloadImage([imgUrl]);
 }


上面三块内容就可以组成我们的海报生成了,这里面的主要步骤不是很难,包括了几个方面:


  1. 用户授权鉴定,主要是是否允许保存,这里做了一点处理,就是可以在用户第一次授权不允许时,进行二次授权调起,这个可以看一下上面的downloadImage这个函数,以及用于判断用户是否授权的checkHasAuthorizedSaveImagePermissions这个函数
  2. 创建OffscreenCanvas并进行绘制,这里其实没有太多的难点,主要就是需要知道,如果我们使用image的内容的话,或者是一个图片的url时,我们需要先将其绘制到一个canvas上(这里可以获取imageElement对象,也可以直接使用canvas),这样方便我们后面进行drawImage时进行使用
  3. 图片保存,这里也有一个需要注意的点,如果图片(或二维码)是网络图片的话,我们需要处理以下,先将其转成本地图片,也就是通过netImageToLocal这个方法,然后再还给对应的将图片画在canvas上的方法。最后的保存很简单,我们可以直接使用Taro.canvasToTempFilePath这个方法转到临时地址,再通过downloadImage就可以搞定了。

感觉好像很麻烦,其实就四步:图片加载转化—>canvas绘制—>用户鉴权—>图片保存。


安卓端实现起来还是很简单的,但是这些方法对于ios端就出现了问题,如果按照上面的路线进行海报绘制保存的话,在ios端就会报一个错误(在本地开发的时候并不会抛出): canvasToTempFilePath:fail invalid viewId


这一步错误就是发生在Taro.canvasToTempFilePath这里,保存到临时文件时会触发,然后这一切的原因就是使用了OffscreenCanvas离屏canvas造成的。


所以为了能够兼容ios端的这个问题,有了以下的修改:


首先需要在我们要下载海报的pages中,添加一个Canvas,帮助我们可以获取CanvasElement

 <Canvas
     type='2d'
     id='qrCodeOut'
     className='aiyong-shop__qrCode'
 />

这里需要注意一下,我们需要添加一个type='2d'的属性,这是为了能够使用官方提供的获取Canvas2dContext的属性,这样就可以不使用createCanvasContext这个方法来获取了(毕竟已经被官方停止维护了)。


然后我们就可以获取一下CanvasElement对象了

 /**
  * @description 获取canvas标签对象
  */
 export const getCanvasElement = (canvasId: string): Promise<Taro.NodesRef> => {
     return new Promise(resolve => {
         const canvasSelect: Taro.NodesRef = selectQuery().select(`#${canvasId}`);
         canvasSelect.node().exec((res: Taro.NodesRef) => {
             resolve(res);
        });
    });
 };

注:这里又有一个小坑,我们在获取CanvasElement之后,如果直接进行绘制的话,这里存在一个问题,就是这个CanvasElementwidth:300、height:150被限制死了,所以我们需要自己在拿到CanvasElement之后,在设置一下width、height

 const canvasNodeRef = await getCanvasElement(canvas);
 let context;
 if (canvasNodeRef && canvasNodeRef[0].node !== null) {
     context = canvasNodeRef[0].node;
    (context as Taro.Canvas).width = width;
    (context as Taro.Canvas).height = height;
 }

好了,改造完成,这样就可以兼容ios端的内容了,实际我们只需要修改generateQrCodeWithTitle这个方法和page新增Canvas用于获取CanvasElement就可以了,其他可以不要动。修改后的generateQrCodeWithTitle方法如下:

 /**
  * @description 获取二维码图像并设置标题
  */
 export const generateQrCodeWithTitle = async (option: SettingOptions): Promise<string> => {
     const {
         title,
         titleInfo,
         imageUrl,
         imagePos,
         width,
         height,
         qrCodeSize,
         canvas,
    } = option;
     const canvasNodeRef = await getCanvasElement(canvas);
     let context;
     if (canvasNodeRef && canvasNodeRef[0].node !== null) {
         context = canvasNodeRef[0].node;
        (context as Taro.Canvas).width = width;
        (context as Taro.Canvas).height = height;
    }
     const ctx = (context.getContext('2d') as CanvasRenderingContext2D);
     const imgElement: Taro.Image = await loadImageByUrlToCanvasImageData(imageUrl, qrCodeSize.width, qrCodeSize.height);
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, width, height);
     ctx.fillStyle = titleInfo.color || 'black';
     ctx.font = titleInfo.font || '';
     ctx.textAlign = 'center';
     ctx.fillText(title, titleInfo.dx || 0, titleInfo.dy || 0);
     ctx.drawImage((imgElement as HTMLImageElement), imagePos.dx, imagePos.dy, imgElement.width, qrCodeSize.height);
 
     const filePath = await changeCanvasToImageFileAndSaveToTempFilePath({
         canvas: (context as Canvas),
         width,
         height,
         fileType: 'png',
         destWidth: width,
         destHeight: height,
    });
     return filePath;
 };


如果大家不想让海报被人看到,那可以设置一下css

 .qrCode {
     position: fixed;
     left: 100%;
 }

这样就可以啦



突然发现内容可能有点多了,所以打算分成两篇进行Taro使用过程中的总结,开发完之后进行总结,总是可以让自己回顾在开发过程中遇到的问题的进一步进行思考,这是一个很好的进步过程,加油加油!!!


作者:Adsionli
链接:https://juejin.cn/post/7244452419458498616
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

iOS项目运行时XCode内存暴涨、速度慢、卡的解决过程

iOS
XCode老罢工 从今年开始,项目中一个组件的主工程在开发过程中,运行编译时间耗时长,XCode是不是都会转菊花,平均每次编译的时间大概在5min左右,非常影响开发效率,今日刚好提测完,抽空仔细看看为何如此卡顿。环境 在卡顿的时候打开活动监视器,发现XCode...
继续阅读 »

XCode老罢工


从今年开始,项目中一个组件的主工程在开发过程中,运行编译时间耗时长,XCode是不是都会转菊花,平均每次编译的时间大概在5min左右,非常影响开发效率,今日刚好提测完,抽空仔细看看为何如此卡顿。

环境



在卡顿的时候打开活动监视器,发现XCode占用内存非常高,平均在20GB左右,峰值达到60GB




在Command + k 删除DerivedData 里面的缓存之后,还是没有明显的加速结果。


寻找原因


查看编译日志




发现组件内的所有文件在编译的时候都会有几个相似的警告。


这些警告来自同一个文件,通过pch文件引用。


有警告的文件是该组件的网络请求文件,是很早以前建立的,文件里面没有自动生成NS_ASSUME_NONNULL_BEGIN文件内大概有几百个警告。在编译文件的时候,这些警告都会去做缓存、分析。导致运行起来非常卡顿。


解决


消除警告,重新编译,发现项目跑起来非常的舒畅!


如果是有其他第三方库或者组件的警告,可以在podFile中增加 :inhibit_warnings => true 来避免编译的时候检查警告。这种方式也会加快编译速度。

pod 'XXNetEngineModule', :inhibit_warnings => true

可以看到解决完XCode的内存大小基本就在1GB左右。编译速度也基本上能达到秒启(10s内)。




作者:王飞飞不会飞
链接:https://juejin.cn/post/7207737667990945850
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

chrome 搞事,下个月全面删除 Event.path

背景 前两天下午,测试同学反馈生产环境有个功能出现异常,然后给我发了张报错截图。  随后在测试同学的电脑复现并排查问题,通过异常断点,捕捉到异常信息如下:  可以看到异常的原因是 n.path 的值为 undefined,因此 n.path...
继续阅读 »

背景


前两天下午,测试同学反馈生产环境有个功能出现异常,然后给我发了张报错截图。 



随后在测试同学的电脑复现并排查问题,通过异常断点,捕捉到异常信息如下: 



可以看到异常的原因是 n.path 的值为 undefined,因此 n.path.find 等价于 undefined.find,因此程序报错。其中 n 是一个 Event 实例;path 是事件冒泡经过的节点组成的数组。n.path 有值的情况如下: 


Event.path 不是标准属性,常见于 chrome 浏览器,取不到值出现异常不足为奇,只要做个兼容就搞定了,当 Event.path 取不到值时就取 Event.composedPath()。那这是兼容性问题吗,事情好像没有这么简单。仔细对比上述两张截图可以发现,异常时 Event 实例甚至不存在 path 属性,这跟属性存在但值为空是两码事。


进一步排查


好好的 path 属性怎么就不翼而飞了,这是个神奇的问题。当我用自己电脑尝试复现问题时,发现功能正常且无法复现,事情变得更加神奇。两边浏览器都升到了最新版 chrome 108,区别是系统不同,一个是 windows 一个是 macOS。也就是 说同样的代码在同样的软件上跑出了不同结果,这说明可能不是代码或兼容性问题。


为找出真正的原因,我做了几组对照实验,以排除代码、硬件、操作系统和浏览器的影响。情况如下 :


分析这些结果,出现了更有意思的事:只有一种情况会出现异常,使用测试同学的电脑且浏览器是 chrome 108;当改变电脑、系统、浏览器、浏览器版本等因素时结果都是正常。 也就是说导致异常的因素居然不是单一的,而是多个因素组合(测试同学电脑+chrome+108 版本)产生的结果。



chromium issue 的助攻


从上面的结果看好像没办法再继续排查下去,不过从经验判断,多半是 chrome 又在搞事,这时候可以去 chromium issue 里找找蛛丝马迹,经过一番搜索找到了这条 issue: Issue 1277431: Remove event.path。 



issue 标题很直白,Event.path 将被删除。 从 issue 内容可以看到,这次搞事是从 2021 年 12 月 7 日开始,起因是 chromium 开发团队认为 Event.path 属于非标准 API,会导致 Firefox 等其他浏览器的兼容性问题,于是他们决定将其删除。目前这个变更在 chrome 108 属于灰度阶段,在即将发布的 chrome 109 上会全面应用,webview 则是从 109 版本开始逐步禁用。


变更详情和计划


另外 issue 中提到这个变更会在 console 中进行告警。 



console 中确实有这个告警,不过藏在 console 面板的右上角,不太容易发现,而且需要调用 Event.path 后才会显示。点进去之后会跳转到 Issues 面板并显示详细信息。
 



从图中可以看到这个变更属于 Breaking Change,即破坏性变更。另外可以看到变更详情链接版本计划链接。打开变更详情链接可以看到详细的说明、目的、状态、开发阶段等信息。 



打开版本计划链接可以看到,chrome 108 已经在 2022-11-29 正式发布(Stable Release Tue, Nov 29, 2022),chrome 109 将在 2023-01-10 正式发布(Stable Release Tue, Jan 10, 2023)。 



验证


由于英文水平有限,为了避免个人理解存在歧义,使用 chrome 的前瞻版本进行测试,以验证 chrome 108 之后的版本是否真的会应用这个变更。


  • 测试使用的系统为 macOS,浏览器版本包括:chrome-stable(108.0.5359.124)、chrome-beta(109.0.5414.36)、chrome-dev(110.0.5464.2)、chrome-canary(110.0.5477.0)。



  • 测试代码如下
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
function test() {
console.log("event.path is:", window.event.path);
}
</script>
<h1 onclick="test()">click me</h1>
</body>
</html>

  • 测试结果如下

chrome-stable(108.0.5359.124)在 macOS 下 Event.path 有值,结合上文的对照实验中 windows10 下一个有值一个为空。说明 chrome 108 中该变更属于灰度阶段。
image.png


chrome-beta(109.0.5414.36)、chrome-dev(110.0.5464.2)、chrome-canary(110.0.5477.0)在 macOS 下 Event.path 都为空,说明 chrome 109 之后全面删除了 Event.path 属性。
image.png


解决方案


先看影响范围,从项目维度来看,所有前端项目都可能受到影响;从代码维度来看,项目源码和第三方依赖都可能受影响。在 github 中搜索发现 swipperopenlayers 等第三方库中都有相关 issue。因此解决方案需要全面考虑:最好对所有项目都进行排查修复,另外不仅要排查源码,还要考虑第三方库。


根据官方建议及综合考虑,推荐在前端项目中统一添加如下 polyfill 代码:

  Object.defineProperty(Event.prototype, "path", {
get() {
return this.composedPath();
},
});

最后


chrome 109 预计在 2023-01-10 正式发布,届时会全面禁用 Event.path,所有源码中使用该属性或第三方库使用该属性的前端项目都可能会出现异常,还有 20 几天时间,建议尽快排查修复。


一些经验

  • 关注 devtools 中的 console、issue 等各种告警信息,有助于调试和排查问题、以及发现潜在的问题
    • 关注 chorme 迭代计划,有条件可以做前瞻性测试,预防未来可能发生的异常



    作者:Whilconn
    链接:https://juejin.cn/post/7177645078146449466
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    收起阅读 »

    领导让我面试别人,我准备了那些面试题

    关于领导让我面试别人,我准备了那些面试题 前端领导一天对我说你准备下面试题,然后我会筛选些简历给到你,你到时候负责一面。然后大致跟领导聊了下需要那样得,有没有什么具体要求。 大致就是要求能干活,不管是表格、echarts等能立刻上手,别是刚培训班出来得就行...
    继续阅读 »

    关于领导让我面试别人,我准备了那些面试题



    前端领导一天对我说你准备下面试题,然后我会筛选些简历给到你,你到时候负责一面。然后大致跟领导聊了下需要那样得,有没有什么具体要求。



    大致就是要求能干活,不管是表格、echarts等能立刻上手,别是刚培训班出来得就行。


    可能也是上个同事来了一个礼拜也没写出来什么太多东西。然后领导最后跟我们说他每天我看到再微信聊天, 让写个表格都能墨迹半天写不出来。本来再一周得时候都能看出大致水平了,但是领导觉得都招进来了好好学,每天积极学习也是愿意培养得。最后领导跟我们说他既然不愿意学,每天就是按时下班等情况吧就让人走了总共算是待了两个礼拜,工资也正常发放了。


    我也是去看了好多面试得一些经验,希望能招到合适得同事,一荣俱荣,我也是想我招聘进来得同事能符合岗位要求,不然就是面试官得问题了。记得有一篇文章中说,你跟面试者身份是同等得,不过是你单位需要招聘。刚好我求职而已,不要趾高气扬得去问一些你不知道在哪里看到得新名词去为难人。


    以下就是我准备得一些面试题,我觉得能答得七七八八基本满足干活要求了,然后可能回答得好的我也会基于原问题扩展下。回答不上来也没关系,能回答上来更好了。


    Css



    1. 常用的伪类有哪些?



    可能有些人会一时没想起来,哪有问这么简单得哈哈。我也会稍微提示下:not:hover...我可能更希望面试者能说点其他得比如first-child、last-child、nth-child、before、after等等。




    1. css 说下弹性盒子;



    这个也是工作中必须会的,我可能希望你能说的多点,当然不常用的那些对子盒子的一些属性除外。例如:




    • flex-direction 是更改方向的可以。

    • flex-wrap 是可以设置是否允许换行。

    • justify-content x轴的对齐方式。

    • align-items yz轴的对齐方式。



    1. 说下localstoage/ sessionStroge区别;



    可以从大小啊、特性分别说下。




    1. 清除浮动的方法有哪些 分别说下



    可以简单说下比如overflow: hidden;等。




    1. 说下重排和重绘 什么场景下会发生重排和重绘



    希望面试者能了解dom是怎么样的刷新渲染机制,什么样下就发生重绘(color、background等)、什么样下会发生重排(更改宽高等)。




    1. 实现垂直居中的方法有哪些



    希望面试者能说出两种就很好了,这两种也是经常会用到的,像还有个display:table;...这个我确实也没咋用到。只要能说出:




    1. display: flex; justify-content: center; align-items: center;;

    2. 子元素position: relative;left: 50%;top: 50%; transform: translate(-50%, -50%);


    Js



    由于我们可能是重前端多一点所以对数据转换会要求多点。所以我准备了一些数据处理的面试题如下:



    1、请使用forEach、map、filter、some、every等相关api对1,2,3...,10这些数据进行处理:



    1. 请用相关api计算出1-10累加。(期望得到一个Number: [1,2,3...])

    2. 请用相关api过滤出1-10大于5的值。(期望得到一个Array: [1,2,3...])

    3. 请用相关api得到一个都是乘以*2的新数组(期望得到一个Array: [2,4,6...])

    4. 请用相关api查找出1-10是否有数值11(期望得到一个Boolean: true、false)。

    5. 请用相关api判断1-10中是否都大于5。(期望得到一个Boolean: true、false)

    6. 请用相关api判断1-10中是否存在大于9数值的(期望得到一个Boolean: true、false)。



    如果回答的很好,我还会多问问面试者假如不使用这些数组api函数的话,你能用for循环一样得到相关结果嘛。如果你能说的很好,我会再让面试者自己封装一个forEach、map、filter、some、every那可就太棒了。



    2、说下防抖、节流的场景以及怎么实现这些。



    能说出防抖和节流的用处和场景,假如你能说对应用场景,实现都是使用lodash等或者找的方法使用的也能接收。但是还是希望能写出来一个自己如何实现防抖和节流的。



    3、说下let/count区别



    可以说下两者区别:常量不允许修改等。




    1. let a = 1; let b = a; b = 2;(这个时候a、b分别是什么值?)(加分项:说下原因)

    2. let a = {name: 1}; let b = a; b.name = 3; (这个时候a、b分别是什么值?)(说下原因)


    其实是希望面试者对堆、栈有一定的了解。


    4、事件执行机制
    setTimeout(() => { console.log(2)}, 0); const fn = new Promise(res => { console.log(3); res('success')}); console.log(1); fn.then(res => console.log(4)) 以上代码会输出什么 执行顺序是啥样的(加分项: 说出理由)


    其实是希望面试者对宏任务、微任务有一定的了解,了解代码的执行机制。


    5、说下箭头函数和普通函数的区别:


    说完会继续问下bind\apply\call 用法以及能力 (加分项:怎么实现一个bind、apply、call)


    这里其实是希望面试者能对this能有一定的理解。


    6、说下对浅克隆/深克隆的理解 以及实现一个深克隆函数

    这个问题可能会根据问题3回答情况问答。


    7、说下怎么合并一个数组、对象。



    {...obj1, ...obj2}Object.assign。 数组可以使用concat,如果回答的好我会再问下如何使用for满足。



    8、说下字符串常用的属性api


    说完后会再追问下substr、substring的区别


    9、说下数组的splice 和 slice的区别


    10、const obj = {a: {b: {c: 123 } } }; 希望你写一个get函数如lodash.get(obj, 'a.b.c', '-')一样的函数,就是可以通过传入a.b.c获取到值得一个函数。


    11、const originArray = [{name: '小明', a: 1}, {name: '小明', b: 1}, {name: '小红', a: 1}]希望你对上面数据groupByname,得到{小明: [{name: '小明', a: 1}, {name: '小明', b: 1}], 小红:[{name: '小红', a: 1}]}


    const originArray = [{name: '小明', a: 1}, {name: '小明', b: 1}, {name: '小红', a: 1}]

    /** 调用groupBy(originArray, 'name')得到:
    * {
    * 小明: [{name: '小明', a: 1}, {name: '小明', b: 1}],
    * 小红:[{name: '小红', a: 1}]
    * }
    /


    如果JS回答的很好,基本已经能满足我们的招聘要求了。我后面也会对vue简单问问,放心哈哈 对源码没啥要求,我们要求是能干活就可以。



    VUE



    由于我们单位使用的是vue,我也会象征性的问一些用法相关的,如果你的js回答很好没有使用过vue,一直再使用react等框架,这个我就不会再问了,当然不影响我们的面试结果的,相信你js基础那么好,也就看下文档就能上手了。




    1. vue 组件间传值实现通信的方式有哪些?

    2. 有使用过vueBus嘛(加分项: 说下发布订阅者模式)

    3. 有用过watch嘛? watchdeepimmediate都是干嘛的 有啥作用 (加分项怎么实现一个watch)

    4. v-show 与 v-if 有什么区别?

    5. 说下vue的生命周期?

    6. 说下vuex的个人理解

    7. 说下nextTick使用场景



    其实这里更希望你能说出获取dom等基本就符合问题了。但是如果能答出来nextTick是怎么设计的那可太棒了




    1. 说下路由hash、history的区别



    这里面其实不只是想听到带不带#号,还希望你能说出两者会不会携带路由去请求html,然后你们是怎么处理history下404界面的。



    加分项



    一般达到这里已经满足我们得招聘要求了,这个时候我可能会多问一些完事把整体情况汇报给领导,由领导下决定选择谁入职




    1. 使用过canvas嘛(都用canvas再场景下实现了什么功能)

    2. 使用echarts都画过那些图表(解决过什么困难)

    3. 都用webpack做过什么?

    4. vue中假如请求api不以api/v1统一规范开头了 怎么实现接口转发?


    结语



    面试前还是要多准备准备,以上就是我面试新同事准备得一些面试题,其实好多同学都卡再了js,js基础不够扎实。 相比与学习框架api,语法,我更会花更多时间再js上面。 然后再去了解框架好的设计以及API得实现。



    作者:三原
    来源:juejin.cn/post/7262349502920540217
    收起阅读 »

    谈谈用行政手段解决行业问题

    很多企业常常用行政的手段,去解决行业的问题。 这个问题是一名叫“小赵”的读者反馈给我的。 这里的“行政”一词,是指一种通用的管理与协调方式,而“行业”指的是某个特定的专业领域。 小赵在一家软件企业的研发部做开发。请记住这是一个研发部,他是一个技术工种。但是,...
    继续阅读 »

    很多企业常常用行政的手段,去解决行业的问题。



    这个问题是一名叫“小赵”的读者反馈给我的。


    这里的“行政”一词,是指一种通用的管理与协调方式,而“行业”指的是某个特定的专业领域。


    小赵在一家软件企业的研发部做开发。请记住这是一个研发部,他是一个技术工种。但是,他的会议非常多,基本上一坐到工位就得再站起来去开会。而会议的内容多是关于开发流程的:原型评审会、技术分析会、工期评估会……


    后来,他们开发出的产品,全是bug,无法运行,常常强制交付,遭到客户频繁投诉。


    领导层很震怒,要求解决问题。


    于是,大家分析原因,各抒己见,最终汇总整理,原因如下:



    • 产品没有设计好就交给技术

    • 技术没有思考就开始写代码

    • 功能没做完就交给测试验证


    最终,领导层觉得需要加强监管。于是,他们决定在原型评审之前,加个宣贯会作为预热。后来宣贯会没有达到效果,又加上了个预宣贯会作为宣贯会的预热……


    结果,这个团队的产出质量依然没有改善。随后,领导层很震怒,要求分析原因,解决问题。


    于是,大家不吐不快,纷纷吐槽会议太多,光开会了,没时间干活。领导层一听,决定开会研究一下,如何减少会议、提高效率。


    通过对基层进行访谈,然后以会议的形式汇报给中层,中层汇报给高层。最终形成一份总结,再以全员会议的形式同全体员工宣讲。


    结果,依然没有改善。于是,领导层再次要求解决问题。于是大家便开会讨论,会议的主题是:为什么那套减少开会的方案没有起到少开会的作用?


    后来,还是没有改善。通过一次次争吵,各抒己见,相互吐槽,最终领导发现,原来各部门之间相互不满意,测试觉得技术不行,技术觉得产品不行,产品觉得运营不行。领导点点头,似乎已经成功了,当即决定,引入相互评价机制。将各部门人员之间的互评作为重要考核,与工资挂钩。出于利益考虑,各方势必会让各方都满意。这样一来,问题就解决了。


    实际上,后续更精彩,研发的重点就转移到人情世故了……先到这吧,只是想让大家感受下“行政”模式。


    上面说的情况,在我看来,绝不是一个“不断完善”的过程。这种完善没有尽头。大家都在想办法解决问题,没有人思考问题产生的原因。这无异于办公室漏水了,大家合力去清扫,没有人关心漏点在哪里。


    小赵反馈,他们公司更重视每个会议是否被召开,大家似乎并不关心工作内容本身。


    比如,测试用例评审。虽然测试要拿着用例一条条去验证开发的成果。但是直到会上,开发人员从来都没有提前看过,整场会议从头到尾,大家一个问题也没有。有流程吗?有!流程是提前1天发出来让大家准备问题。


    再比如,开发返讲时,一半以上的人都在看手机。快结束时,就连主讲者都长出一口气:“哎呀,终于讲完了!”。他并不关心其他人听没听懂,重要的是自己讲完了。别人就是不听,我又能怎么样?


    在我看来,小赵公司的开发流程,从第一个版开始就是规范和专业的。已经包含了软件开发的各个关键节点。但是,他们每一步都没有落实到位


    就拿测试用例评审会来说。开会之前,有没有人确认过里面的内容大家都看过了?看了的话,问几个问题;没看,等你看完后再开。但是一旦给你时间看了,你依然无视它,一问三不知,不好意思,得给你记上一笔。
    开会过程中,人家讲的条例,有没有和你理解不一致的地方。如有,请提出来。如果后面你做完了,对于有明确描述的操作,你再说当时我不知道,那么不好意思,给你记上一笔……


    在具有大家共同认可标准的前提下,每一项会议都要落地砸坑,步步有效。有了落实,甚至不开会都行。


    这并非是不人性化,这不就是你正常的工作吗?最符合职场人的人性化是摸鱼。领导多辛苦一点,担负起把控和监管的责任,员工就无法摸鱼。从领导开始就摸鱼,员工就直接下网了。


    除了落实到位,还有一个专业性的问题。对于落实流程,“行政”手段再勤劳一点也是可以做到的。但是,到专业性这儿,就得由专业的人来干了。


    每一项流程怎样的标准才算是做到位?什么样的员工才是好员工?通过民主的形式,没有答案。这段代码写得好不好、那种技术方案能不能支撑起五万人同时访问,大家来投个票吧!保洁说,我觉得行!产品说,我觉得不行!采购幸好问了下,发现居然还需要买服务器,当即反对。他们各有各的意图。给我添麻烦了,我就不同意。跟我没关系,我就送个人情,举个手。专业的事情,就该专业的人一言堂,给我权力的同时,也让我承担责任。


    实际上,并非所有老板都愿意孤注一掷,完全相信某个员工的建议。他们常常通过自己的方式去做流程干预。尤其遇到需要决断的问题时,因为不够专业,往往采取通用的行政手段去解决。比如引入相互监视来保证不偷懒,再设立秘密小组来监督大家确实在相互监视。如此下去,无限不循环……


    以前我感觉老板们这种做法不明智,我也想不通他们为什么这么想。直到那天我看到一段历史,忽然明白这是人类的通病。


    话说拿破仑时期,两方打仗,都是各自码好了人,面对面。然后相互往对方扔炮弹。这种硬杠的方式,似乎有点弱智。难道就没有攻城掠地的形式吗?其实之前是有的,而且国王很重视城池的建设,认为那是安全的保障。但是建设城池时,负责建设的工匠总是糊弄国王,而国王又看不懂,最后导致腐败严重,还没打仗国家就虚了。最后,国王们就干脆不用城池做保护了,用省下做城池的钱,直接养兵更实惠。


    如果国王是做工程出身,那肯定不会被骗。但是又有多少国王干过瓦匠呢?因此,不论哪个组织的老大,采用自己熟悉的行政手段去干预流程,起码是保底的。


    当然,遇到专业的管理更好。两者很好区分。专业者一般是帮助你,行政者一般是质疑你。帮助你的人,他首先会了解你在做一件什么事,然后给出指导。而质疑你的人,则会想方设法拿出证据来,比如某件事物存在,先去证明是你不行,然后借机让你继续想办法。


    其实,拿破仑之后,城池的建设又兴起了。因为后来各种建设规范,甚至财务审计等制度也健全起来,即便是很狡猾的工匠,也难以再搞出腐败。反而导致工匠们认为建设城池是一份荣耀,自己是为了国家的荣誉而战。


    作者:TF男孩
    来源:juejin.cn/post/7270427148192071735
    收起阅读 »

    30岁程序媛求职路复盘:文转码+失业半年+PHP如何涨薪5K的!?

    这篇文章来自一位群友的分享: 这篇文章写于下班路上,刚刚入职不久,我想再冲刺一下大厂,阳哥建议我坚持总结打卡,可以尝试写写博客。 那我就从这篇开始吧,希望开个好头! 上班的感觉真好 今天是入职的第二周,还在熟悉业务和代码,晚上下班和周末还在补业务知识和技术栈...
    继续阅读 »

    这篇文章来自一位群友的分享:


    这篇文章写于下班路上,刚刚入职不久,我想再冲刺一下大厂,阳哥建议我坚持总结打卡,可以尝试写写博客。


    那我就从这篇开始吧,希望开个好头!



    上班的感觉真好


    今天是入职的第二周,还在熟悉业务和代码,晚上下班和周末还在补业务知识和技术栈。


    我就趁着在地铁上的时间来复盘一下2023年的上半年的求职之路好了。


    遥想一月


    一月十八号公司宣布深圳研发部解散,给了n+1赔偿,我当时很开心,因为我本来也打算换工作。


    现在看来真是盲目乐观了!真是没想到,紧接着迎来了长达七个月的失业时光😭。


    自我怀疑


    那段时间太痛苦了:简历投出去,已读不回,面试也没有。


    这期间我恶补了好多八股文,甚至还学了些计算机网络,操作系统的知识。但是感觉学的很不系统,东一榔头,西一杠子,有点熊瞎子掰玉米的感觉。


    然后偶然机会去朋友公司,写了一个月Go,种种原因,一个月后我又离职了,这时候差不多五月份了,我想干脆转Go吧,两个都投简历,机会应该能多一点,就这样我今天学点PHP看看源码,明天学下Go的基础。反复摇摆,反复横跳,啥都没学好,面试也约不到,每天就是蒙头学,心里一直很难过...


    上有老下有小的,只有我老公一个人上班,我在家跟我爸妈我娃一起,心里真的万分沮丧,觉得自己像个垃圾,对自己非常失望,然后又会自己给自己打气,说加油吧,努力学,起码能在机会来了时候努力抓住!就一直在这样自我鼓励和自我厌弃中来回反复。


    迎来转机


    时间到了六月底,迎来了转机,我在微信群里看到阳哥在帮群友做简历优化和就业辅导。我就和阳哥联系了一下,说明了我的情况。


    阳哥建议我不要再摇摆不定了,踏踏实实去学Go肯定比继续做PHP有前途,也帮我规划了从学Go到求职找工作的学习路线。


    然后我就度过了特别充实且痛苦的一个半月,按照制定好的学习路线去学,学完一个阶段就和阳哥约模拟面试,期间也碰到了不少自己没搞懂的问题,有的问ChatGPT解决了,有的问阳哥解决了。


    和之前相比,目标明确了,就不会像之前那么焦虑。



    就这样我把Go基础、并发编程、数据库、缓存、消息队列、计网、项目、简历的问题等等都和阳哥过了一遍,靠谱的很!我心里终于有底了,也有重新约面试的底气了!


    阳哥靠谱


    这里我夸阳哥几句:我第一个面试的前一天,很紧张,跟阳哥吐槽了几句。当时正好赶上周日休息,阳哥马上就说下午或者晚上回到家就给我做个模拟面试,针对这个公司的岗位需求来做个突击辅导,当时我很意外也很感动。我想着是周日,再说也是第一家面试只是刷经验包,也没有跟阳哥提先说给我面面,但是他还主动找我来做辅导😂,反正当时心里挺感谢的,然后阳哥就腾讯会议和我聊了一个多小时:从自我介绍到专业技能、再到项目经验怎么挖掘亮点等等,结合这家公司的要求又过了一遍,这样聊下来之后,我心里就有谱多了,也不慌了。


    面试复盘


    我一共面了三家就找到工作了:真的是没想到在我踏踏实实学Go一个半月之后,才面试了三家就顺利入职了。


    后来反思了一下,这肯定和我运气好有关系,但是更重要的,和我加入训练营之后这一个多月的突击学习关系更大!这一个多月遭的罪是值得的!


    第一家


    第一家技术点问的很少,问的都是管理经验啥的,问给你个团队怎么管理,但是就很搞笑,薪资范围15K-20K招带团队的😂,你是在逗我吗!?


    反正没什么有用信息感觉,就不细聊啦~


    第二家


    第二家就是我现在入职的公司,针对简历项目问了很多,这个我还是很有底的,毕竟我的简历优化迭代了好几遍,阳哥也针对我的简历做了多次模拟面试了。 另外这家公司的一面面试官也特别好,能感觉到面试官很有水平,能挖掘我的闪光点,一面的整体过程都比较舒服。


    二面就一言难尽,二面的面试官完全换了一个风格,我感觉自己一直在被打压,我的情绪就有点崩,有点上头。还好加入训练营之后和阳哥做了好几次模拟面试,硬着头皮把能回答的都回答了。另外阳哥和我说,有不懂的就和面试官主动问他们的解决方案是什么,我也问了下,也从面试中学到了东西,虽然这场面试情绪有点崩,但是该说的还是说到了!


    二面整体不如一面试理想,二面到最后一面的面试官进来缓和了一下气氛,还算画了一个不错的句号吧。


    然后就让我回去等通知了...


    万万没想到,第二天就说通过了(说实话我是有些意料之外的,就像我和阳哥说的,我是不是在做梦,竟然有种范进中举的感觉,哈哈)


    因为我感觉不够真实,再加上第二家只是口头承诺,没有发任何实质性的东西。所以我又和阳哥约了一场模拟面试,再为后面的面试继续做准备(万一这家公司放我鸽子呢...)


    第三家


    第三家,有不少问题模拟面试的时候阳哥都问过我,但是我记得不牢,当时记住了,没多久又忘了,导致我回答时候都比较模棱两可,不够深入。因为我只记得框架和整体思路,阳哥和我讲的太细节、偏底层的东西我就有点记不清了。


    第三家的面试官就说我技术掌握的不够深,我心里想:你再给我时间准备一个星期试试,我可以深到你难以想象!😂 反正当时出了门还是有些挫败感,冷静一会之后安慰自己加油干:暴露的问题越多越能去补救,下一个面试就可以回答很好了。


    怎么说呢,第三家对我还是很有帮助的:让我非常珍惜目前的工作机会!



    第二家的转机


    就这样还在自我安慰和鼓励的同时,准备和阳哥复盘一些不确定的问题,第二家就不只是口头承诺了,而是正式发Offer走流程了!开心!!! 然后我就开始有针对性的准备新公司需要的技术栈了。


    薪资涨幅也很满意,这只是我做Go的一个起点,但绝不是终点!等稳定下来我打算继续向阳哥请教,我要冲刺大厂!!!


    小建议:



    1. 失业期间负能量多的群建议屏蔽不看,很扰乱心情,我当时看了满屏的失业找不到工作,很焦虑。我又去找阳哥,我说怎么办,我觉得我永远也找不到工作了,阳哥说不会,那是他们自己的问题,能找到工作的人不会在群里抱怨环境不好,有问题针对性解决就好了,你按照计划去做事,不要受别人的影响。

    2. 另外还要发几句牢骚,我开始投简历前跟阳哥说,我决定拼了,深圳投完了投广州,杭州,北京,还不能有一个开发工作给我? 然后我就上班了😀,爱拼的女生运气不会太差!

    3. 真的不要摇摆,不要像我刚开始一样既想做PHP,又想做Go,这样大概率啥都做不好!瞄准一个方向,然后踏踏实实的去做事情!

    4. 做思维导图、坚持总结真的是个好习惯,再次感谢阳哥,这招真的太好用了,而且一旦坚持下来,养成习惯,真的很香,能明显提高学习效率,梳理清楚知识体系。

    5. 接下来的日子,还要像之前一样:坚持总结打卡,挑战写博客,把技术再深挖一下,冲刺大厂! 也算给自己立个Flag。



    好了,我到站了,还在找工作的伙计们加油啦!💪


    阳哥读后感


    首先很感谢对我的肯定,这位群友的分享让我很感动!也给了我继续帮大家做简历优化和就业的信心!


    最近帮不少朋友都拿到了满意的Offer,可以说是我最有成就感的事情了。


    作者:王中阳Go
    来源:juejin.cn/post/7275550543287697468
    收起阅读 »

    Android 沉浸式状态栏,透明状态栏 采用系统api,超简单近乎完美的实现

    前言 沉浸式的适配有多麻烦,相信大家既然来搜索这个,就说明都在为此苦恼,那么看看这篇文章吧,也许对你有所帮助(最下面有源码链接) 有写的不对的地方,欢迎指出 从adnroid 6.0开始,官方逐渐完善了这方面的api,直到android 11... ... 让...
    继续阅读 »

    前言


    沉浸式的适配有多麻烦,相信大家既然来搜索这个,就说明都在为此苦恼,那么看看这篇文章吧,也许对你有所帮助(最下面有源码链接)


    有写的不对的地方,欢迎指出


    从adnroid 6.0开始,官方逐渐完善了这方面的api,直到android 11...


    ... 让我们直接开始吧


    导入核心包


    老项目非androidx的请自行研究下,这里使用的是androidx,并且用的kotlin语言
    本次实现方式跟windowInsets息息相关,这可真是个好东西
    首先是需要导入核心包
    androidx.core:core

    kotlin可选择导入这个:
    androidx.core:core-ktx
    我用的版本是
    androidx.core:core-ktx:1.12.0

    开启 “沉浸式” 支持


    沉浸式原本的意思似乎是指全屏吧。。。算了,不管那么多,喊习惯了 沉浸式状态栏,就这么称呼吧。

    在activity 的oncreate里调用
    //将decorView的fitSystemWindows属性设置为false
    WindowCompat.setDecorFitsSystemWindows(window, false)
    //设置状态栏颜色为透明
    window.statusBarColor = Color.TRANSPARENT
    //是否需要改变状态栏上的 图标、字体 的颜色
    //获取InsetsController
    val insetsController = WindowCompat.getInsetsController(window, window.decorView)
    //mask:遮罩 默认是false
    //mask = true 状态栏字体颜色为黑色,一般在状态栏下面的背景色为浅色时使用
    //mask = false 状态栏字体颜色为白色,一般在状态栏下面的背景色为深色时使用
    var mask = true
    insetsController.isAppearanceLightStatusBars = mask
    //底部导航栏是否需要修改
    //android Q+ 去掉虚拟导航键 的灰色半透明遮罩
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    window.isNavigationBarContrastEnforced = false
    }
    //设置虚拟导航键的 背景色为透明
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    //8.0+ 虚拟导航键图标颜色可以修改,所以背景可以用透明
    window.navigationBarColor = Color.TRANSPARENT
    } else {
    //低版本因为导航键图标颜色无法修改,建议用黑色,不要透明
    window.navigationBarColor = Color.BLACK
    }
    //是否需要修改导航键的颜色,mask 同上面状态栏的一样
    insetsController.isAppearanceLightNavigationBars = mask

    修改 状态栏、虚拟导航键 的图标颜色,可以在任意需要的时候设置,防止图标和字体颜色和背景色一致导致看不清

    补充一下:
    状态栏和虚拟导航栏的背景色要注意以下问题:
    1.在低于6.0的手机上,状态栏上的图标、字体颜色是白色且不支持修改的,MIUI,Flyme这些除外,因为它们有自己的api能实现修改颜色
    2.在低于8.0的手机上,虚拟导航栏的图标、字体颜色是白色且不支持修改的,MIUI,Flyme这些除外,因为他们有自己的api能实现修改颜色
    解决方案:
    低于指定版本的系统上,对应的颜色就不要用透明,除非你的APP页面是深色背景,否则,建议采用半透明的灰色

    在带有刘海或者挖孔屏上,横屏时刘海或者挖孔的那条边会有黑边,解决方法是:
    给APP的主题v27加上
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    参考图:

    image.png


    监听OnApplyWindowInsetsListener


    //准备一个boolean变量 作为是否在跑动画的标记
    var flagProgress = false

    //这里可以使用decorView或者是任意view
    val view = window.decorView

    //监听windowInsets变化
    ViewCompat.setOnApplyWindowInsetsListener(view) { view: View, insetsCompat: WindowInsetsCompat ->
    //如果要配合下面的setWindowInsetsAnimationCallback一起用的话,一定要记得,onProgress的时候,这里做个拦截,直接返回 insets
    if (flagProgress) return@setOnApplyWindowInsetsListener insetsCompat
    //在这里开始给需要的控件分发windowInsets

    //最后,选择不消费这个insets,也可以选择消费掉,不在往子控件分发
    insetsCompat
    }
    //带平滑过渡的windowInsets变化,ViewCompat中的这个,官方提供了 api 21-api 29的支持,本来这个只支持 api 30+的,相当不错!
    //启用setWindowInsetsAnimationCallback的同时,也必须要启用上面的setOnApplyWindowInsetsListener,否则在某些情况下,windowInsets改变了,但是因为不会触发setWindowInsetsAnimationCallback导致padding没有更新到UI上
    //DISPATCH_MODE_CONTINUE_ON_SUBTREE这个代表动画事件继续分发下去给子View
    ViewCompat.setWindowInsetsAnimationCallback(view, object : WindowInsetsAnimationCompat.Callback(DISPATCH_MODE_CONTINUE_ON_SUBTREE) {
    override fun onProgress(insetsCompat: WindowInsetsCompat, runningAnimations: List<WindowInsetsAnimationCompat>): WindowInsetsCompat {
    //每一帧的windowInsets
    //可以在这里分发给需要的View。例如给一个聊天窗口包含editText的布局设置这个padding,可以实现键盘弹起时,在底部的editText跟着键盘一起滑上去,参考微信聊天界面,这个比微信还丝滑(android 11+最完美)。
    //最后,直接原样return,不消费
    return insetsCompat
    }

    override fun onEnd(animation: WindowInsetsAnimationCompat) {
    super.onEnd(animation)
    //动画结束,将标记置否
    flagProgress = false
    }

    override fun onPrepare(animation: WindowInsetsAnimationCompat) {
    super.onPrepare(animation)
    //动画准备开始,在这里可以记录一些UI状态信息,这里将标记设置为true
    flagProgress = true
    }
    })

    读取高度值


    通过上面的监听,我们能拿到WindowInsetsCompat对象,现在,我们从这里面取到我们需要的高度值


    先定义几个变量,我们需要拿的包含:
    1. 刘海,挖空区域所占据的宽度或者是高度
    2. 被系统栏遮挡的区域
    3. 被输入法遮挡的区域

    //cutoutPadding 刘海,挖孔区域的padding
    var cutoutPaddingLeft = 0
    var cutoutPaddingTop = 0
    var cutoutPaddingRight = 0
    var cutoutPaddingBottom = 0

    //获取刘海,挖孔的高度,因为这个不是所有手机都有,所以,需要判空
    insetsCompat.displayCutout?.let { displayCutout ->
    cutoutPaddingTop = displayCutout.safeInsetTop
    cutoutPaddingLeft = displayCutout.safeInsetLeft
    cutoutPaddingRight = displayCutout.safeInsetRight
    cutoutPaddingBottom = displayCutout.safeInsetBottom
    }


    //systemBarPadding 系统栏区域的padding
    var systemBarPaddingLeft = 0
    var systemBarPaddingTop = 0
    var systemBarPaddingRight = 0
    var systemBarPaddingBottom = 0

    //获取系统栏区域的padding
    //系统栏 + 输入法
    val systemBars = insetsCompat.getInsets(WindowInsetsCompat.Type.ime() or WindowInsetsCompat.Type.systemBars())
    //左右两侧的padding通常直接赋值即可,如果横屏状态下,虚拟导航栏在侧边,那么systemBars.left或者systemBars.right的值就是它的宽度,竖屏情况下,一般都是0
    systemWindowInsetLeft = systemBars.left
    systemWindowInsetRight = systemBars.right
    //这里判断下输入法 和 虚拟导航栏是否存在,如果存在才设置paddingBottom
    if (insetsCompat.isVisible(WindowInsetsCompat.Type.ime()) || insetsCompat.isVisible(WindowInsetsCompat.Type.navigationBars())) {
    systemWindowInsetBottom = systemBars.bottom
    }
    //同样判断下状态栏
    if (insetsCompat.isVisible(WindowInsetsCompat.Type.statusBars())) {
    systemWindowInsetTop = systemBars.top
    }

    到这里,我们需要的信息已经全部获取到了,接下来就是根据需求,设置padding属性了

    补充一下:
    我发现在低于android 11的手机上,insets.isVisible(Type)返回始终为true
    并且,即使系统栏被隐藏,systemBars.top, systemBars.bottom也始终会有高度
    所以这里


    保留原本的Padding属性


    上述获取的值,直接去设置padding的话,会导致原本的padding属性失效,所以我们需要在首次设置监听,先保存一份原本的padding属性,在最后设置padding的时候,把这份原本的padding值加上即可,就不贴代码了。


    第一次写文章,写的粗糙了点

    可能我写的不太好,没看懂也没关系,直接去看完整代码吧


    我专门写了个小工具,可以去看看:
    沉浸式系统栏 小工具


    如果有更好的优化方案,欢迎在github上提出,我们一起互相学习!


    作者:Matchasxiaobin
    来源:juejin.cn/post/7275943802938130472
    收起阅读 »

    如何在上班时间利用终端控制台摸鱼🧐🧐🧐

    web
    作为一个资深的摸鱼小能手,班我们每天要上,终端也是我们也要每天要用到的,那么有什么办法可以在控制台终端中去摸鱼呢,那么在接下来的文章中我们就来看看它可以做到怎么样摸鱼。 简介 在我们开发的项目中,几乎有很多项目要都是使用 webpack 作为构建工具来进行开发...
    继续阅读 »

    作为一个资深的摸鱼小能手,班我们每天要上,终端也是我们也要每天要用到的,那么有什么办法可以在控制台终端中去摸鱼呢,那么在接下来的文章中我们就来看看它可以做到怎么样摸鱼。


    简介


    在我们开发的项目中,几乎有很多项目要都是使用 webpack 作为构建工具来进行开发的,在它进行构建的时候,会有一些信息会输出在控制台上面,如下图所示:


    20230910150719


    爱瞎折腾的朋友们可能就会想了,为什么 create-react-pp 也是用的 webpack 作为构建工具,为什么我的输出和它的输出是不一样的呢?


    20230910150945


    compiler


    通过查阅文档,我发现了问题所在,原来在 webpack 中它提供了一个 compiler 钩子,它用来监控文件系统的 监听(watching) 机制,并且在文件修改时重新编译。 当处于监听模式(watch mode)时, compiler 会触发诸如 watchRun, watchClose 和 invalid 等额外的事件。


    done 钩子就是当我们的代码被编译完成的时候被调用的。


    如何调用 done 钩子


    要想调用我们的 done 钩子,首先我们要引入 webpack 包,并把 webpack 配置传递给 webpack 函数,如下图所示:


    20230910151624


    接下来我们看看终端输出:


    20230910151749


    这些就是我们的一些 webpack 配置,在这个 compiler 对象上,它存在一个 hooks 对象,如下代码所示:


    compiler.hooks.done.tap("done", async (stats) => {
    console.log(11111111111111);
    });

    它会在代码编译完成阶段调用该回调函数:


    20230910152621


    咦,你会发现了,代码编译执行完成,我的终端上的输出会这么干净,是因为在输出控制台之前, 已经被我调用了一个函数清空了。


    通过这个函数,你可以情况控制台上的一些输出信息,如下代码所示:


    function clearConsole() {
    process.stdout.write(
    process.platform === "win32" ? "\x1B[2J\x1B[0f" : "\x1B[2J\x1B[3J\x1B[H"
    );
    }

    再调用以下,你会发现控制台上面很干净的,图下图所示:


    20230910153357


    要想这一些个性化的输出,我们直接在这个回调函数中打印输出就可以了,如果你要你输出的信息和项目中的信息有关,你可以利用 stats 这个参数:


    20230910160905


    大概就这样子,如果你想更好玩的话,你可以使用一些网络请求库,去获取一些网络资源:


    20230910161247


    去获取这些资源都是可以的呀。


    总结


    如果你的项目是使用的 webpack,并且要想在项目的开发中自定义,你可以通过 compiler.hooks 的方式去监听不同的钩子,然后通过不同的方式来实现不同的信息输出。


    源代码地址


    作者:Moment
    来源:juejin.cn/post/7277065056575848448
    收起阅读 »

    花亿点时间,写个Android抓包库

    0x1、引言 上周五版本刚提测,这周边改BUG边摸鱼,百无聊赖,想起前不久没业务需求时,随手写的Android抓包库。 就公司的APP集成了 抓包功能,目的是:方便非Android开发的同事在 接口联调和测试阶段 能够看到APP的请求日志,进行一些简单的问题定...
    继续阅读 »

    0x1、引言


    上周五版本刚提测,这周边改BUG边摸鱼,百无聊赖,想起前不久没业务需求时,随手写的Android抓包库。


    就公司的APP集成了 抓包功能,目的是:方便非Android开发的同事在 接口联调和测试阶段 能够看到APP的请求日志,进行一些简单的问题定位(如接口字段错误返回,导致APP UI显示异常),不用动不动就来找Android崽~


    手机摇一摇,就能查看 APP发起的请求列表具体的请求信息



    能用,但存在一些问题,先是 代码层面



    • 耦合:抓包代码直接硬编码在项目中,线上包不需要抓包功能,也会把这部分代码打包到APK里

    • 复用性差:其它APP想添加抓包功能,需要CV大量代码...

    • 安全性:是否启用抓包功能,通过 BuildConfig.DEBUG 来判断,二次打包修改AndroidManifest.xml文件添加 android:debuggable="true" 或者 root手机后修改ro.debuggable为1 设置手机为可调试模式,生产环境的接口请求一览无余。


    当然,上面的安全性有点 夸大 了,编译时,编译器会进一步优化代码,可能会删除未使用的变量或代码块。比如这样的代码:


    if (BuildConfig.DEBUG) {
    xxx.setBaseUrl(Config.DEBUG_BASE_URL);
    } else {
    xxx.setBaseUrl(Config.RELEASE_BASE_URL);
    }

    Release打包,BuildConfig.DEBUG永远为false,编译器会优化下代码,编译后的代码可能就剩这句:


    xxx.setBaseUrl(Config.RELEASE_BASE_URL);

    不信的读者可以反编译自己的APP试试康~


    尽管编译后的Release包不包含 启用抓包的代码,但是把抓包代码打包到APK里,始终是不妥的。


    毕竟,反编译apk,smail加个启用抓包的代码,并不是什么难事,最好的处理方式还是不要把抓包代码打包到Release APK中!


    接着说说 实用性层面



    • 请求相关信息太少:只有URL、请求参数和响应参数这三个数据,状态吗码都没有,有时需要看下请求头或响应头参数。

    • 只能看不能复制:有时需要把请求参数发给后端。

    • 字段查找全靠肉眼扫:请求/响应Json很长的时候,看到眼花😵‍💫。

    • 不支持URL过滤: 执行一个操作,唰唰唰一堆请求,然后就是滑滑滑,肉👀筛URL。

    • 请求记录不会动态更新,要看新请求得关闭页面再打开。

    • 等等...


    综上,还是有必要完善下这个库的,毕竟也是能 提高团队研发效率的一小环~


    说得天花龙凤,其实没啥技术难点,库的本质就是:自定义一个okhttp拦截器获取请求相关信息然后进行一系列封装 而已。


    库不支持HttpUrlConnection、Flutter、其它协议包的抓取!!!此抓包库的定位是:方便非Android崽,查看公司APP的请求日志


    如果是 Android崽或者愿意折腾,想抓手机所有APP包 的朋友,可以参考下面两篇文章:



    接着简单记录下库的开发流程~


    0x2、库


    ① 拦截器 和 请求实体类


    这一步就是了解API,把能抠的参数都抠出来,请求/响应头,请求体响应体,没啥太的难度,直接参考 lygttpod/AndroidMonitor 拦截器部分的代码:


    class CaptureInterceptor : Interceptor {
    private var maxContentLength = 5L * 1024 * 1024

    override fun intercept(chain: Interceptor.Chain): Response {
    val request = chain.request()
    val networkLog = NetworkLog().apply {
    method = request.method() // 请求方法
    request.url().toString().takeIf(String::isNotEmpty)?.let(URI::create)?.let { uri ->
    url = "$uri" // 请求地址
    host = uri.host
    path = uri.path + if (uri.query != null) "?${uri.query}" else ""
    scheme = uri.scheme
    requestTime = System.currentTimeMillis()
    }
    requestHeaders = request.headers().toJsonString() // 请求头
    request.body()?.let { body -> body.contentType()?.let { requestContentType = "$it" } }
    }
    val startTime = System.nanoTime() // 记录请求发起时间(微秒级别)
    val requestBody = request.body()
    requestBody?.contentType()?.let { networkLog.requestContentType = "$it" }
    when {
    // 请求头为空、未知编码类、双工(可读可写)、请求体只能用一次
    requestBody == null || bodyHasUnknownEncoding(request.headers()) || requestBody.isDuplex || requestBody.isOneShot -> {}
    // 上传文件
    requestBody is MultipartBody -> {
    networkLog.requestBody = StringBuilder().apply {
    requestBody.parts().forEach {
    val key = it.headers()?.value(0)
    append(
    if (it.body().contentType()?.toString()?.contains("octet-stream") == true)
    "${key}; value=文件流\n" else "${key}; value=${it.body().readString()}\n"
    )
    }
    }.toString()
    }
    else -> {
    val buffer = Buffer()
    requestBody.writeTo(buffer)
    val charset = requestBody.contentType()?.charset(StandardCharsets.UTF_8) ?: StandardCharsets.UTF_8
    if (buffer.isProbablyUtf8()) networkLog.requestBody =
    formatBody(buffer.readString(charset), networkLog.requestContentType)
    }
    }

    val response: Response
    try {
    response = chain.proceed(request)
    networkLog.apply {
    responseHeaders = response.headers().toJsonString() // 响应头
    responseTime = System.currentTimeMillis()
    duration = TimeUnit.NANOSECONDS.toMillis(System.nanoTime() - startTime) // 当前时间减去请求发起时间得出响应时间
    protocol = response.protocol().toString()
    responseCode = response.code()
    responseMessage = response.message()
    }
    val responseBody = response.body()
    responseBody?.contentType()?.let { networkLog.responseContentType = "$it" }
    val bodyHasUnknownEncoding = bodyHasUnknownEncoding(response.headers())
    // 响应体不为空、支持获取响应体、知道编码类型
    if (responseBody != null && response.promisesBody() && !bodyHasUnknownEncoding) {
    val source = responseBody.source()
    source.request(Long.MAX_VALUE) // 将响应体的内容都读取到缓冲区中
    var buffer = source.buffer // 获取响应体源数据流
    // 如果响应体经过Gzip压缩,先解压缩
    if (bodyGzipped(response.headers())) {
    GzipSource(buffer.clone()).use { gzippedResponseBody ->
    buffer = Buffer()
    buffer.writeAll(gzippedResponseBody)
    }
    }
    // 获取不到字符集的话默认使用UTF-8 字符集
    val charset = responseBody.contentType()?.charset(StandardCharsets.UTF_8) ?: StandardCharsets.UTF_8
    if (responseBody.contentLength() != 0L && buffer.isProbablyUtf8()) {
    val body = readFromBuffer(buffer.clone(), charset)
    networkLog.responseBody = formatBody(body, networkLog.responseContentType)
    }
    networkLog.responseContentLength = buffer.size()
    }
    NetworkCapture.insertNetworkLog(networkLog)
    Log.d("NetworkInterceptor", networkLog.toString())
    return response
    } catch (e: Exception) {
    networkLog.errorMsg = "$e"
    Log.e("NetworkInterceptor", networkLog.toString())
    NetworkCapture.insertNetworkLog(networkLog)
    throw e
    }
    }

    // 检查头中的内容编码是否为除了 "identity" 和 "gzip" 外的其他未知编码类型
    private fun bodyHasUnknownEncoding(headers: Headers): Boolean {
    val contentEncoding = headers["Content-Encoding"] ?: return false
    return !contentEncoding.equals("identity", ignoreCase = true) &&
    !contentEncoding.equals("gzip", ignoreCase = true)
    }

    // 判断头是否包含Gzip压缩
    private fun bodyGzipped(headers: Headers): Boolean {
    return "gzip".equals(headers["Content-Encoding"], ignoreCase = true)
    }

    // 从缓冲区读取字符串数据
    private fun readFromBuffer(buffer: Buffer, charset: Charset?): String {
    val bufferSize = buffer.size()
    val maxBytes = min(bufferSize, maxContentLength)
    return StringBuilder().apply {
    try {
    append(buffer.readString(maxBytes, charset!!))
    } catch (e: EOFException) {
    append("\n\n--- Unexpected end of content ---")
    }
    if (bufferSize > maxContentLength) append("\n\n--- Content truncated ---")
    }.toString()
    }

    }

    请求实体:


    data class NetworkLog(
    var id: Long? = null,
    var method: String? = null,
    var url: String? = null,
    var scheme: String? = null,
    var protocol: String? = null,
    var host: String? = null,
    var path: String? = null,
    var duration: Long? = null,
    var requestTime: Long? = null,
    var requestHeaders: String? = null,
    var requestBody: String? = null,
    var requestContentType: String? = null,
    var responseCode: Int? = null,
    var responseTime: Long? = null,
    var responseHeaders: String? = null,
    var responseBody: String? = null,
    var responseMessage: String? = null,
    var responseContentType: String? = null,
    var responseContentLength: Long? = null,
    var errorMsg: String? = null,
    var source: String? = null
    ) : Serializable {
    fun getRequestTimeStr(): String =
    if (requestTime == null) "无" else TIME_LONG.format(Date(requestTime!!))

    fun getResponseTimeStr(): String =
    if (requestTime == null) "无" else TIME_LONG.format(Date(responseTime!!))
    }

    ② 数据库 和 Dao


    直接用原生SQLite实现,就一张表和一些简单操作,就不另外引个第三方库了,自定义SQLiteOpenHelper:


    class NetworkLogDB(context: Context) :
    SQLiteOpenHelper(context, "cp_network_capture.db", null, DB_VERSION) {
    companion object {
    private const val DB_VERSION = 1
    }

    override fun onCreate(db: SQLiteDatabase?) {
    db?.execSQL(NetworkLogDao.createTableSql())
    }

    override fun onUpgrade(db: SQLiteDatabase?, oldVersion: Int, newVersion: Int) {}
    }

    接着在Dao里编写建表,增删查表的方法:


    class NetworkLogDao(private val db: NetworkLogDB) {
    companion object {
    const val TABLE_NAME = "network_log"

    /**
    * 建表SQL语句
    * */

    fun createTableSql() = StringBuilder("CREATE TABLE $TABLE_NAME(").apply {
    append("id INTEGER PRIMARY KEY AUTOINCREMENT,")
    append("method TEXT,")
    append("url TEXT,")
    append("scheme TEXT,")
    append("protocol TEXT,")
    append("host TEXT,")
    append("path TEXT,")
    append("duration INTEGER,")
    append("requestTime INTEGER,")
    append("requestHeaders TEXT,")
    append("requestBody TEXT,")
    append("requestContentType TEXT,")
    append("responseCode INTEGER,")
    append("responseTime INTEGER,")
    append("responseHeaders TEXT,")
    append("responseBody TEXT,")
    append("responseMessage TEXT,")
    append("responseContentType TEXT,")
    append("responseContentLength INTEGER,")
    append("errorMsg STRING,")
    append("source STRING")
    append(")")
    }.toString()
    }


    /**
    * 插入数据
    * */

    fun insert(data: NetworkLog) {
    db.writableDatabase.insert(TABLE_NAME, null, ContentValues().apply {
    put("method", data.method)
    put("url", data.url)
    put("scheme", data.scheme)
    put("protocol", data.protocol)
    put("host", data.host)
    put("path", data.path)
    put("duration", data.duration)
    put("requestTime", data.requestTime)
    put("requestHeaders", data.requestHeaders)
    put("requestBody", data.requestBody)
    put("requestBody", data.requestBody)
    put("requestContentType", data.requestContentType)
    put("responseCode", data.responseCode)
    put("responseTime", data.responseTime)
    put("responseHeaders", data.responseHeaders)
    put("responseBody", data.responseBody)
    put("responseMessage", data.responseMessage)
    put("responseContentType", data.responseContentType)
    put("responseContentLength", data.responseContentLength)
    put("errorMsg", data.errorMsg)
    put("source", data.source)
    })
    NetworkCapture.context?.contentResolver?.notifyChange(NetworkCapture.networkLogTableUri, null)
    }

    /**
    * 查询数据
    * @param offset 第几页,从0开始
    * @param limit 分页条数
    * */

    fun query(
    offset: Int = 0,
    limit: Int = 20,
    selection: String? = null,
    selectionArgs: Array<String>? = null
    )
    : ArrayList<NetworkLog> {
    val logList = arrayListOf<NetworkLog>()
    val cursor = db.readableDatabase.query(
    TABLE_NAME, null, selection, selectionArgs, null, null, "id DESC", "${offset * limit},${limit}"
    )
    if (cursor.moveToFirst()) {
    do {
    logList.add(NetworkLog().apply {
    id = cursor.getLong(0)
    method = cursor.getString(1)
    url = cursor.getString(2)
    scheme = cursor.getString(3)
    protocol = cursor.getString(4)
    host = cursor.getString(5)
    path = cursor.getString(6)
    duration = cursor.getLong(7)
    requestTime = cursor.getLong(8)
    requestHeaders = cursor.getString(9)
    requestBody = cursor.getString(10)
    requestContentType = cursor.getString(11)
    responseCode = cursor.getInt(12)
    responseTime = cursor.getLong(13)
    responseHeaders = cursor.getString(14)
    responseBody = cursor.getString(15)
    responseMessage = cursor.getString(16)
    responseContentType = cursor.getString(17)
    responseContentLength = cursor.getLong(18)
    errorMsg = cursor.getString(19)
    source = cursor.getString(20)

    })
    } while (cursor.moveToNext())
    }
    cursor.close()
    return logList
    }

    /**
    * 根据id删除数据
    * @param id 记录id
    * */

    fun deleteById(id: Long) {
    db.writableDatabase.delete(TABLE_NAME, "id = ?", arrayOf("$id"))
    }

    /**
    * 清空数据
    * */

    fun clear() {
    db.writableDatabase.delete(TABLE_NAME, null, null)
    }
    }

    ③ UI 与 交互


    没带安卓机回家...待补充图片...


    ④ 集成方式


    参考leakcanary的集成方式,利用 activity-alias 标签单独创建一个桌面图标,作为抓包页面入口:


    <activity-alias
    android:name=".NetworkCaptureActivity"
    android:exported="true"
    android:icon="@mipmap/cp_network_capture_logo"
    android:label="抓包"
    android:targetActivity="cn.coderpig.cp_network_capture.ui.activity.NetworkCaptureActivity"
    android:taskAffinity="cn.coderpig.cp_dev_helper.${applicationId}">

    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    </activity-alias>

    接着是Context传递的,自定义一个ContentProvider,在onCreate()处获得,顺带加上监听数据库变化:


    class CpNetworkCaptureProvider : ContentProvider() {
    override fun onCreate(): Boolean {
    val context = context
    if (context == null) {
    Log.e(TAG, "CpNetworkCapture库初始化Context失败")
    } else {
    Log.e(TAG, context.packageName)
    NetworkCapture.init(context)
    }
    return true
    }

    override fun query(
    uri: Uri,
    projection: Array<out String>?,
    selection: String?,
    selectionArgs: Array<out String>?,
    sortOrder: String?
    )
    : Cursor? = null

    override fun getType(uri: Uri): String? = null
    override fun insert(uri: Uri, values: ContentValues?): Uri? = null
    override fun delete(uri: Uri, selection: String?, selectionArgs: Array<out String>?) = 0
    override fun update(uri: Uri, values: ContentValues?, selection: String?, selectionArgs: Array<out String>?) = 0
    }

    接着使用 debugImplementation 方式导入依赖,打debug包才会打包这部分代码,接着使用使用反射的方式添加抓包拦截器即可~


    作者:coder_pig
    来源:juejin.cn/post/7276750877250699320
    收起阅读 »

    发送验证码后的节流倒计时丨刷新 & 重新进入页面,还原倒计时状态

    web
    前言   最近在做一个 H5 工具,需要手机号 + 验证码登录,很自然地,点击发送验证码后需要等待一段时间才能重新发送,用于请求节流,避免用户疯狂点击:     不过这里其实有个隐藏需求——如果仍然在冷却时间内,那么用户无论是刷新或是关闭页面,再次打开登...
    继续阅读 »

    前言


      最近在做一个 H5 工具,需要手机号 + 验证码登录,很自然地,点击发送验证码后需要等待一段时间才能重新发送,用于请求节流,避免用户疯狂点击:





     

      不过这里其实有个隐藏需求——如果仍然在冷却时间内,那么用户无论是刷新或是关闭页面,再次打开登录弹窗,需要直接展示正确的倒计时状态


    解决方案



    使用经典的 localStorage




    1. 发送验证码时,将发送时间 (lastSendingTime) 存入 localStorage,并开启 60 秒倒计时。

    2. 倒计时结束后,清除 localStorage 中的 lastSendingTime

    3. 重新进入页面时,若 localStorage 中存有 lastSendingTime,则说明仍处于冷却时间内,那么计算出剩余的倒计时 N,并开启 N 秒倒计时。


    Talk is cheap, show me the code!


      const [countdown, setCountdown] = useState(60) // 倒计时
    const [canSendCode, setCanSendCode] = useState(true) // 控制按钮文案的状态
    const [timer, setTimer] = useState() // 定时器 ID

    async function sendVerificationCode() {
    try {
    // network request...
    Toast.show({ content: '验证码发送成功' })
    startCountdown()
    setCanSendCode(false)
    } catch (error) {
    setCountdown(0)
    setCanSendCode(true)
    }
    }

    function startCountdown() {
    const nowTime = new Date().getTime()
    const lastSendingTime = localStorage.getItem('lastSendingTime')
    if (lastSendingTime) {
    // 若 localStorage 中存有 lastSendingTime,则说明仍处于冷却时间内,计算出剩余的 countdown
    const restCountdown = 60 - parseInt(((nowTime - lastSendingTime) / 1000), 10)
    setCountdown(restCountdown <= 0 ? 0 : restCountdown)
    } else {
    // 否则说明冷却时间已结束,则 countdown 为 60s,并将发送时间存入 localStorage
    setCountdown(60)
    localStorage.setItem('lastSendingTime', nowTime)
    }

    setTimer(
    setInterval(() => {
    setCountdown(old => old - 1)
    }, 1000),
    )
    }

    // 重新进入页面时,若 localStorage 中存有上次的发送时间,则说明还处于冷却时间内,则调用函数计算剩余倒计时;
    // 否则什么也不做
    useEffect(() => {
    const lastSendingTime = localStorage.getItem('lastSendingTime')
    if (lastSendingTime) {
    setCanSendCode(false)
    startCountdown()
    }

    return () => {
    clearInterval(timer)
    }
    }, [])


    // 监听倒计时,倒计时结束时:
    // * 清空 localStorage 中存储的上次发送时间
    // * 清除定时器
    // * 重置倒计时
    useEffect(() => {
    if (countdown <= 0) {
    setCanSendCode(true)
    localStorage.removeItem('lastSendingTime')
    clearInterval(timer)
    setCountdown(60)
    }
    }, [countdown])

    return (
    {canSendCode ? (
    <span onClick={sendVerificationCode}>
    获取验证码
    </span>

    ) : (
    <span>
    获取验证码({`${countdown}`})
    </span>

    )}
    )

    最终效果





    总结


      一开始感觉这是个很简单的小需求,可能 20min 就写完了,但实际花了两个多小时才把逻辑全部 cover 到,还是不能太自信啊~


    作者:Victor_Ye
    来源:juejin.cn/post/7277187894872014848
    收起阅读 »

    别再用 display: contents 了

    web
    文章讨论了在网站上使用"display: contents"属性可能导致的潜在问题。作者强调了这种做法可能破坏网页的语义结构,并可能对可访问性产生不利影响。文章还提到了一些潜在的解决方案,以帮助开发人员避免这些问题。 下面是正文~~ display: cont...
    继续阅读 »

    文章讨论了在网站上使用"display: contents"属性可能导致的潜在问题。作者强调了这种做法可能破坏网页的语义结构,并可能对可访问性产生不利影响。文章还提到了一些潜在的解决方案,以帮助开发人员避免这些问题。


    下面是正文~~


    display: contents 介绍


    CSS(层叠样式表)中的 display: contents 是一个相对较新的属性值,它对元素的布局和可视化有特殊的影响。当你对一个元素应用 display: contents,这个元素本身就像从DOM(文档对象模型)中消失了一样,而它的所有子元素则会升级到DOM结构中的下一个层级。换句话说,该元素的盒模型将被忽略,它的子元素会取而代之,就像直接插入到父元素中一样。


    假设我们有这样一个HTML结构:


    id="parent">
    id="child1">Child 1
    id="child2">Child 2

    正常情况下,#parent#child1#child2 的父元素,它们在DOM和布局中有一个明确的层级关系。


    现在,如果我们对 #parent 应用 display: contents


    #parent {
    display: contents;
    }

    在这种情况下,#parent 在页面布局中就像是“消失了”一样。它的所有子元素(这里是 #child1#child2)会直接升级到#parent所在的DOM层级。也就是说,在布局和渲染过程中,#child1#child2 将不再被视为 #parent 的子元素,而是像直接插入到 #parent 的父元素中一样。


    这样做的结果是,任何应用于 #parent 的布局和样式都不会影响到页面的渲染,但 #child1#child2 会像正常元素一样被渲染。


    主要用途:



    1. 语义改进:能够改进HTML结构,使其更符合语义,但不影响布局和样式。

    2. 布局优化:在某些复杂的布局场景中,它可以简化DOM结构,提高渲染性能。


    display: contents 和可访问性的长期问题


    从字面上看,这个CSS声明改变了其应用到的元素的显示属性。它使元素“消失”,将其子元素提升到DOM中的下一层级。


    这种声明在很多方面都可能是有用的。讽刺的是,其中一个用例就是改善你工作的底层语义。然而,这个声明一开始的效果有点过头了。


    CSS和可访问性


    不是每个人都意识到这一点,但某些CSS会影响辅助技术的工作方式。就像烧毁你的房子确实会成功地除去其中可能存在的蜘蛛一样,使用 display: contents 可能会完全消除某些元素被辅助技术识别的关键属性。


    简而言之,这会导致按钮不被声明为按钮,表格不被声明和导航为表格,列表也是如此,等等。


    换句话说:当人们说“HTML默认是可访问的”时,display: contents 彻底破坏了这个“默认”。这不好。


    可访问性从业者注意到了这个问题,并提出了完全合理的修复要求。特别值得一提的是Adrian Roselli的勤勉、有条理和实事求是的文档和报告工作。


    修复已经完成,浏览器也已经更新,我们得到了一个快乐的结局。对吗?并不是那么简单。


    回归问题


    在软件开发中,回归可能意味着几件事情。这个词通常用于负面语境,表达更新后的行为不小心恢复到以前,不太理想的工作方式。


    对于 display: contents,这意味着每个人的自动或近乎自动更新的浏览器抛弃了非常必要的错误修复,而没有任何警告或通知,就回到了破坏语义HTML与辅助技术交流的基础属性。


    这种类型的回归不是一个令人讨厌的 bug,而是破坏了 Web 可访问性的基础方面。


    Adrian注意到了这一点。如果你继续阅读我给你链接的部分,他继续注意到这一点。总之,我统计了关于 display: contents 的行为以不可访问的方式回归了16次的更新。


    看问题的角度


    制作浏览器是一件困难的事情。需要考虑很多、很多不同的事情,那还没考虑到软件的复杂性。


    可访问性并不是每个人的首要任务。我可以在这里稍微宽容一些,因为我主要是尝试用我拥有的东西工作,而不是我希望能有的东西。我习惯了应对由于这种优先级而产生的所有小问题、陷阱和杂项。


    然而,能够使用Web界面绝非小事。display: contents 的问题对使用它的界面的人们的生活质量有非常真实、非常可量化的影响。


    我还想让你考虑一下这种打地鼠游戏是如何影响可访问性从业者的。告诉某人他们不能使用一个闪亮的新玩具永远不会受到欢迎。然后告诉他们你可以,但后来又不能了,这会削弱信任和能力的认知。


    别用 display: contents


    现在,我不认为我们这个行业可以自信地使用 display: contents。过去的行为是未来行为的良好指标,而走向地狱的道路是由好意铺成的。


    我现在认为这个声明是不可预测的。常见的“只需用辅助技术测试其支持情况”的回应在这里也不适用——当前浏览器版本中该声明的期望行为并不能保证在该浏览器的未来版本中持续。


    这是一件罕见且令人不安的事情——整个现代Web都是建立在这样的假设之上,即这样的事情不会以这种方式停止工作。这不是互操作性问题,而是由于疏忽造成的伤害。


    display: contents 的回归给我们提供了一个小小的窗口,让我们看到浏览器制作的某些方面是如何(或不是如何)被优先考虑和测试的。


    人们可以发誓说像可访问性和包容性这样的事情是重要的,但当涉及到这个特定的CSS声明时,很明显大多数浏览器制造商是不可信的。


    这个声明在实践中的不稳定性代表了一种非常真实、非常严重的风险,即在你无法控制的情况下,可能会在你的网站或Web应用中引入关键的可访问性问题。


    作者:王大冶
    来源:juejin.cn/post/7275973778915573772
    收起阅读 »

    程序员创业:从技术到商业的转变

    作为一名程序员,我们通常会聚焦于编程技能和技术能力的提升,这也是我们日常工作的主要职责。但是,随着技术的不断发展和市场的变化,仅仅依靠技术能力已经不足以支撑我们在职场上的发展和求职竞争力了。所以,作为一名有远大理想的程序员,我们应该考虑创业的可能性。 为什么程...
    继续阅读 »

    作为一名程序员,我们通常会聚焦于编程技能和技术能力的提升,这也是我们日常工作的主要职责。但是,随着技术的不断发展和市场的变化,仅仅依靠技术能力已经不足以支撑我们在职场上的发展和求职竞争力了。所以,作为一名有远大理想的程序员,我们应该考虑创业的可能性。


    为什么程序员要创业?


    创业其实并非只适用于商学院的毕业生或者有创新理念的企业家。程序员在业内有着相当高的技术储备和市场先知,因此更容易从技术角度前瞻和切入新兴市场,更好地利用技术储备来实现创业梦想。


    此外,创业可以释放我们的潜力,同时也可以让我们找到自己的定位和方向。在创业的过程中,我们可能会遇到各种挑战和困难,但这些挑战也将锻炼我们的意志力和决策能力,让我们更好地发挥自己的潜力。


    创业需要具备的技能


    作为一名技术人员,创业需要具备更多的技能。首先是商业和运营的技能:包括市场分析、用户研究、产品策划、项目管理等。其次是团队管理和沟通能力,在创业的过程中,人才的招聘和管理是核心问题。


    另外,还需要具备跨界合作的能力,通过开放性的合作与交流,借助不同团队的技术和资源,完成创业项目。所以我们应该将跨界合作看作是创业过程中的重要选择,选择和加强自己的跨界交流和合作能力,也能为我们的企业注入活力和创新精神。


    如何创业?


    从技术到商业的转变,从最初想法的诞生到成熟的企业的创立,都需要一个创业的路线图。以下是一些需要注意的事项:

    1. 研究市场:了解市场趋势,分析需求,制定产品策略。可以去参加行业论坛,争取到专业意见和帮助。

    2. 制定商业计划:包括产品方案、市场营销、项目管理、团队建设等。制定一个系统的商业计划是投资者和团队成员对创业企业的认可。

    3. 招募团队:由于我们一般不是经验丰富的企业家,团队的选择尤为重要。要找的不仅要是技能和经验匹配的团队,更要找能一起携手完成创业项目的合作者。

    4. 行动计划:从实现规划步入到实战行动是创业项目的关键。按部就班地完成阶段性任务,控制实施进度和途中变化,在完成一个阶段后可以重新评估计划。

    5. 完成任务并分析:最后,团队成员需要根据企业进展,完整阶段性的目标,做自己的工作。及时完成考核任务并一起分享数据分析、事件解决和项目总结等信息,为项目下一阶段做出准确预测。


    结语


    创业是一条充满挑战性和机遇的路线,也是在我们的技术和业务的进一步升级中一条非常良好的通道。越来越多的技术人员意识到了自己的潜力,开始考虑自己创业的可能性。只要学会逐步掌握创业所需的技能和知识,并制订出详细的创业路线图,大可放手去尝试,才能最终实现自己心中的创业梦想。


    作者:郝学胜
    链接:https://juejin.cn/post/7240465997002047547
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    收起阅读 »

    南洋才女,德艺双馨,孙燕姿本尊回应AI孙燕姿(基于Sadtalker/Python3.10)

    孙燕姿果然不愧是孙燕姿,不愧为南洋理工大学的高材生,近日她在个人官方媒体博客上写了一篇英文版的长文,正式回应现在满城风雨的“AI孙燕姿”现象,流行天后展示了超人一等的智识水平,行文优美,绵恒隽永,对AIGC艺术表现得极其克制,又相当宽容,充满了语言上的古典之美...
    继续阅读 »

    孙燕姿果然不愧是孙燕姿,不愧为南洋理工大学的高材生,近日她在个人官方媒体博客上写了一篇英文版的长文,正式回应现在满城风雨的“AI孙燕姿”现象,流行天后展示了超人一等的智识水平,行文优美,绵恒隽永,对AIGC艺术表现得极其克制,又相当宽容,充满了语言上的古典之美,表现出了“任彼如泰山压顶,我只当清风拂面”的博大胸怀。


    本次我们利用edge-tts和Sadtalker库让AI孙燕姿朗诵本尊的博文,让流行天后念给你听。


    Sadtalker配置


    之前我们曾经使用百度开源的PaddleGAN视觉效果模型中一个子模块Wav2lip实现了人物口型与输入的歌词语音同步,但Wav2lip的问题是虚拟人物的动态效果只能局限在嘴唇附近,事实上,音频和不同面部动作之间的连接是不同的,也就是说,虽然嘴唇运动与音频的联系最强,但可以通过不同的头部姿势和眨眼来反作用于音频。


    和Wav2lip相比,SadTaker是一种通过隐式3D系数调制的风格化音频驱动Talking头部视频生成的库,一方面,它从音频中生成逼真的运动系数(例如,头部姿势、嘴唇运动和眨眼),并单独学习每个运动以减少不确定性。对于表达,通过从的仅嘴唇运动系数和重建的渲染三维人脸上的感知损失(唇读损失,面部landmark loss)中提取系数,设计了一种新的音频到表达系数网络。


    对于程序化的头部姿势,通过学习给定姿势的残差,使用条件VAE来对多样性和逼真的头部运动进行建模。在生成逼真的3DMM系数后,通过一种新颖的3D感知人脸渲染来驱动源图像。并且通过源和驱动的无监督3D关键点生成扭曲场,并扭曲参考图像以生成最终视频。


    Sadtalker可以单独配置,也可以作为Stable-Diffusion-Webui的插件而存在,这里推荐使用Stable-Diffusion插件的形式,因为这样Stable-Diffusion和Sadtalker可以共用一套WebUI的界面,更方便将Stable-Diffusion生成的图片做成动态效果。


    进入到Stable-Diffusion的项目目录:

    cd stable-diffusion-webui

    启动服务:

    python3.10 webui.py

    程序返回:

    Python 3.10.11 (tags/v3.10.11:7d4cc5a, Apr  5 2023, 00:38:17) [MSC v.1929 64 bit (AMD64)]  
    Version: v1.3.0
    Commit hash: 20ae71faa8ef035c31aa3a410b707d792c8203a3
    Installing requirements
    Launching Web UI with arguments: --xformers --opt-sdp-attention --api --lowvram
    Loading weights [b4d453442a] from D:\work\stable-diffusion-webui\models\Stable-diffusion\protogenV22Anime_protogenV22.safetensors
    load Sadtalker Checkpoints from D:\work\stable-diffusion-webui\extensions\SadTalker\checkpoints
    Creating model from config: D:\work\stable-diffusion-webui\configs\v1-inference.yaml
    LatentDiffusion: Running in eps-prediction mode
    DiffusionWrapper has 859.52 M params.
    Running on local URL: http://127.0.0.1:7860

    代表启动成功,随后http://localhost:7860


    选择插件(Extensions)选项卡


    点击从url安装,输入插件地址:github.com/Winfredy/SadTalker


    安装成功后,重启WebUI界面。


    接着需要手动下载相关的模型文件:

    https://pan.baidu.com/s/1nXuVNd0exUl37ISwWqbFGA?pwd=sadt

    随后将模型文件放入项目的stable-diffusion-webui/extensions/SadTalker/checkpoints/目录即可。


    接着配置一下模型目录的环境变量:

    set SADTALKER_CHECKPOINTS=D:/stable-diffusion-webui/extensions/SadTalker/checkpoints/

    至此,SadTalker就配置好了。


    edge-tts音频转录


    之前的歌曲复刻是通过So-vits库对原歌曲的音色进行替换和预测,也就是说需要原版的歌曲作为基础数据。但目前的场景显然有别于歌曲替换,我们首先需要将文本转换为语音,才能替换音色。


    这里使用edge-tts库进行文本转语音操作:

    import asyncio  

    import edge_tts

    TEXT = '''

    As my AI voice takes on a life of its own while I despair over my overhanging stomach and my children's every damn thing, I can't help but want to write something about it.

    My fans have officially switched sides and accepted that I am indeed 冷门歌手 while my AI persona is the current hot property. I mean really, how do you fight with someone who is putting out new albums in the time span of minutes.

    Whether it is ChatGPT or AI or whatever name you want to call it, this "thing" is now capable of mimicking and/or conjuring, unique and complicated content by processing a gazillion chunks of information while piecing and putting together in a most coherent manner the task being asked at hand. Wait a minute, isn't that what humans do? The very task that we have always convinced ourselves; that the formation of thought or opinion is not replicable by robots, the very idea that this is beyond their league, is now the looming thing that will threaten thousands of human conjured jobs. Legal, medical, accountancy, and currently, singing a song.

    You will protest, well I can tell the difference, there is no emotion or variance in tone/breath or whatever technical jargon you can come up with. Sorry to say, I suspect that this would be a very short term response.

    Ironically, in no time at all, no human will be able to rise above that. No human will be able to have access to this amount of information AND make the right calls OR make the right mistakes (ok mayyyybe I'm jumping ahead). This new technology will be able to churn out what exactly EVERYTHING EVERYONE needs. As indie or as warped or as psychotic as you can get, there's probably a unique content that could be created just for you. You are not special you are already predictable and also unfortunately malleable.

    At this point, I feel like a popcorn eater with the best seat in the theatre. (Sidenote: Quite possibly in this case no tech is able to predict what it's like to be me, except when this is published then ok it's free for all). It's like watching that movie that changed alot of our lives Everything Everywhere All At Once, except in this case, I don't think it will be the idea of love that will save the day.

    In this boundless sea of existence, where anything is possible, where nothing matters, I think it will be purity of thought, that being exactly who you are will be enough.

    With this I fare thee well.

    '''

    VOICE = "en-HK-YanNeural"
    OUTPUT_FILE = "./test_en1.mp3"


    async def _main() -> None:
    communicate = edge_tts.Communicate(TEXT, VOICE)
    await communicate.save(OUTPUT_FILE)


    if __name__ == "__main__":
    asyncio.run(_main())

    音频使用英文版本的女声:en-HK-YanNeural,关于edge-tts,请移步:口播神器,基于Edge,微软TTS(text-to-speech)文字转语音免费开源库edge-tts语音合成实践(Python3.10),这里不再赘述。


    随后再将音频文件的音色替换为AI孙燕姿的音色即可:AI天后,在线飙歌,人工智能AI孙燕姿模型应用实践,复刻《遥远的歌》,原唱晴子(Python3.10)


    本地推理和爆显存问题


    准备好生成的图片以及音频文件后,就可以在本地进行推理操作了,访问 localhost:7860



    这里输入参数选择full,如此会保留整个图片区域,否则只保留头部部分。


    生成效果:



    SadTalker会根据音频文件生成对应的口型和表情。


    这里需要注意的是,音频文件只支持MP3或者wav。


    除此以外,推理过程中Pytorch库可能会报这个错误:

    torch.cuda.OutOfMemoryError: CUDA out of memory. Tried to allocate 20.00 MiB (GPU 0; 6.00 GiB total capacity; 5.38 GiB already allocated; 0 bytes free; 5.38 GiB reserved in total by PyTorch) If reserved memory is >> allocated memory try setting max_split_size_mb to avoid fragmentation. See documentation for Memory Management and PYTORCH_CUDA_ALLOC_CONF

    这就是所谓的"爆显存问题"。


    一般情况下,是因为当前GPU的显存不够了所导致的,可以考虑缩小torch分片文件的体积:

    set PYTORCH_CUDA_ALLOC_CONF=max_split_size_mb:60

    如果音频文件实在过大,也可以通过ffmpeg对音频文件切片操作,分多次进行推理:

    ffmpeg -ss 00:00:00 -i test_en.wav -to 00:30:00 -c copy test_en_01.wav

    藉此,就解决了推理过程中的爆显存问题。


    结语


    和Wav2Lip相比,SadTalker(Stylized Audio-Driven Talking-head)提供了更加细微的面部运动细节(如眼睛眨动)等等,可谓是细致入微,巨细靡遗,当然随之而来的是模型数量和推理成本以及推理时间的增加,但显然,这些都是值得的。


    作者:刘悦的技术博客
    链接:https://juejin.cn/post/7241749918451941437
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    收起阅读 »

    开发一个基于环信IM的Vue3聊天室插件,从而快速实现直播间聊天室功能

    前言由于看到有部分的需求为在页面层,快速的引入一个包,并且以简单的配置,就可以快速实现一个聊天窗口,因此尝试以 Vue3 插件的形式开发一个轻量的聊天窗口。这次简单分享一下此插件的实现思路,以及实现过程,并描述一下本次插件发布 npm 的过程。技术栈Vue3p...
    继续阅读 »

    前言

    由于看到有部分的需求为在页面层,快速的引入一个包,并且以简单的配置,就可以快速实现一个聊天窗口,因此尝试以 Vue3 插件的形式开发一个轻量的聊天窗口。

    这次简单分享一下此插件的实现思路,以及实现过程,并描述一下本次插件发布 npm 的过程。

    技术栈

    • Vue3
    • pnpm
    • Typescript
    • Vite

    插件核心目录设计

    📦 emchat-chatroom-widget
    ┣ 📂 build // 插件打包输出的目录
    ┣ 📂 demo // 验证插件demo相关目录
    ┣ 📂 scripts // 打包脚本目录
    ┣ 📂 src // 插件源代码
    ┃ ┣ 📂 components // 组件目录
    ┃ ┣ 📂 container // 容器组件目录
    ┃ ┣ 📂 EaseIM // 环信IM相关目录
    ┃ ┣ 📂 utils // 工具相关目录
    ┃ ┣ 📜 index.ts // 插件入口文件
    ┃ ┗ 📜 install.ts // 插件初始化文件
    ┣ 📜 package.json // 项目配置文件
    ┣ 📜 vite.config.ts // vite配置文件
    ┗ 📜 README.md // 项目说明文档
    ...

    实现过程

    确认功能范围

    首先确认本次插件实现的功能范围,从而围绕要实现的功能着手进行开发准备。

    1. Vue3 框架使用
    2. 轻量配置、仅配置少量参数即可立即使用聊天功能
    3. 页面大小自适应,给定容器宽高,插件内部宽高自适应。
    4. 仅聊天室类型消息支持基础文本,表情,图片。
      暂时第一期仅支持这些功能范围。

    着手开发

    1、创建空白项目

    pnpm create vite emchat-chatroom-widget --template vue-ts

    2、配置eslint pretter 等代码校验、以及代码风格工具。

    pnpm i eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
    pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D

    同时也不要忘了创建对应的 .eslintrc.cjs.prettierrc.cjs

    这里遇到了一个问题:

    这几个文件以 cjs 结尾是因为 package.json 创建时设置了"type": "module" 后你的所有 js 文件默认使用 ESM 模块规范,不支持 commonjs 规范,所以必须显式的声明成 xxx.cjs 才能标识这个是用 commonjs 规范的,把你的配置都改成.cjs 后缀。

    3、配置 scripts 打包脚本

    目录下新建一个文件夹命名为scripts,新加一个 build.js 或者为.ts 文件。

    在该文件中引入vite进行打包时的配置。由于本次插件编写时使用了jsx语法进行编写,因此 vite 打包时也需要引入 jsx 打包插件。
    安装@vitejs/plugin-vue-jsx插件。

    const BASE_VITE_CONFIG = defineConfig({
    publicDir: false, //暂不需要打包静态资源到public文件夹
    plugins: [
    vue(),
    vueJSX(),
    // visualizer({
    // emitFile: true,
    // filename: "stats.html"
    // }),
    dts({
    outputDir: './build/types',
    insertTypesEntry: true, // 插入TS 入口
    copyDtsFiles: true, // 是否将源码里的 .d.ts 文件复制到 outputDir
    }),
    ],
    });

    package.json中增加 build 脚本执行命令,

      "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --fix",
    "build:widget": "node ./scripts/build.js"
    },

    整体 build.js 代码由于篇幅关系,可以后面查看文末的源码地址。

    4、 编写 Vue3 插件入口函数

    import type { App } from 'vue';
    import EasemobChatroom from './container';
    import { initEMClient } from './EaseIM';
    export interface IEeasemobOptions {
    appKey: string;
    }

    export default {
    install: (app: App, options: IEeasemobOptions) => {
    // 在这里编写插件代码
    console.log(app);
    console.log('options', options);
    if (options && options?.appKey) {
    initEMClient(options.appKey);
    } else {
    throw console.error('appKey不能为空');
    }
    app.component(EasemobChatroom.name, EasemobChatroom);
    },
    };

    5、聊天插件入口代码

    聊天插件入口组件主要用来接收插件使用者所传递进来的一些必要参数,比如登录用户 id、密码、token、聊天室 id,以及针对初始化插件的初始状态。

    import { defineComponent, onMounted } from "vue"
    import { EMClient } from "../EaseIM"
    import { useManageChatroom } from "../EaseIM/mangeChatroom"
    import { manageEasemobApis } from "../EaseIM/imApis"
    import "./style/index.css"
    /* components */
    import MessageContainer from "./message"
    import InputBarContainer from "./inputbar"
    console.log("EMClient", EMClient)
    export default defineComponent({
    name: "EasemobChatroom",
    props: {
    username: {
    type: String,
    default: "",
    required: true
    },
    password: {
    type: String,
    default: ""
    },
    accessToken: {
    type: String,
    default: ""
    },
    chatroomId: {
    type: String,
    default: "",
    required: true
    }
    },
    setup(props) {
    const { setCurrentChatroomId } = useManageChatroom()
    const { loginIMWithPassword, loginIMWithAccessToken } = manageEasemobApis()
    const loginIM = async (): Promise<void> => {
    if (!EMClient) return
    try {
    if (props.accessToken) {
    await loginIMWithAccessToken(props.username, props.accessToken)
    } else {
    await loginIMWithPassword(props.username, props.password)
    }
    } catch (error: any) {
    throw `${error.data.message}`
    }
    }
    const closeIM = async (): Promise<void> => {
    console.log(">>>>>断开连接")
    // EMClient.close()
    }
    onMounted(() => {
    loginIM()
    if (props.chatroomId) {
    setCurrentChatroomId(props.chatroomId)
    }
    })
    return {
    loginIM,
    closeIM
    }
    },
    render() {
    return (
    <>
    <div class={"easemob_chatroom_container"}>
    <MessageContainer />
    <InputBarContainer />
    </div>
    </>
    )
    }
    })

    6、输入框组件代码

    主要处理插件输入框功能,实现消息文本内容,图片内容的发送。

    import { defineComponent, ref } from "vue"
    import { EasemobChat } from "easemob-websdk"
    import { EMClient } from "../EaseIM"
    import { useManageChatroom } from "../EaseIM/mangeChatroom"
    /* compoents */
    import InputEmojiComponent from "../components/InputEmojiComponent"
    import UploadImageComponent from "../components/UploadImageComponent"
    import "./style/inputbar.css"
    export enum PLACE_HOLDER_TEXT {
    TEXT = "Enter 发送输入的内容..."
    }
    export default defineComponent({
    name: "InputBarContainer",
    setup() {
    //基础文本发送
    const inputContent = ref("")
    const setInputContent = (event: Event) => {
    inputContent.value = (event.target as HTMLInputElement).value
    }
    const { currentChatroomId, loginUserInfo, sendDisplayMessage } =
    useManageChatroom()
    const sendMessage = async (event: KeyboardEvent) => {
    if (inputContent.value.match(/^\s*$/)) return
    if (event.code === "Enter" && !event.shiftKey) {
    event.preventDefault()
    console.log(">>>>>>调用发送方法")
    const param: EasemobChat.CreateTextMsgParameters = {
    chatType: "chatRoom",
    type: "txt",
    to: currentChatroomId.value,
    msg: inputContent.value,
    from: EMClient.user,
    ext: {
    nickname: loginUserInfo.nickname
    }
    }
    try {
    await sendDisplayMessage(param)
    inputContent.value = ""
    } catch (error) {
    console.log(">>>>>消息发送失败", error)
    }
    }
    }
    const appendEmojitoInput = (emoji: string) => {
    inputContent.value = inputContent.value + emoji
    }
    return () => (
    <>
    <div class={"input_bar_container"}>
    <div class={"control_strip_container"}>
    <InputEmojiComponent onAppendEmojitoInput={appendEmojitoInput} />
    <UploadImageComponent />
    </div>

    <div class={"message_content_input_box"}>
    <input
    class={"message_content_input"}
    type
    ="text"
    value
    ={inputContent.value}
    onInput
    ={setInputContent}
    placeholder
    ={PLACE_HOLDER_TEXT.TEXT}
    onKeyup
    ={sendMessage}
    />
    </div>
    </div>
    </>
    )
    }
    })

    7、消息列表组件代码

    渲染聊天室内收发的消息代码,以及列表滚动。

    import { defineComponent, nextTick, watch } from 'vue';
    import { useManageChatroom } from '../EaseIM/mangeChatroom';
    import { scrollBottom } from '../utils';
    import './style/message.css';
    import { EasemobChat } from 'easemob-websdk';
    const { messageCollect } = useManageChatroom();

    const MessageList = () => {
    const downloadSourceImage = (message: EasemobChat.MessageBody) => {
    if (message.type === 'img') {
    window.open(message.url);
    }
    };
    return (
    <>
    {messageCollect.length > 0 &&
    messageCollect
    .map((msgItem) => {
    return (
    <div class={'message_item_box'} key={msgItem.id}>
    <div class={'message_item_nickname'}>
    {msgItem?.ext?.nickname || msgItem.from}
    </div>
    {msgItem.type === 'txt' && (
    <p class={'message_item_textmsg'}>{msgItem.msg}</p>
    )}
    {msgItem.type === 'img' && (
    <img
    style
    ={'cursor: pointer;'}
    onClick
    ={() => {
    downloadSourceImage(msgItem);
    }}
    src
    ={msgItem.thumb}
    />
    )}
    </div>
    );
    })}
    </>
    );
    };
    export default defineComponent({
    name: 'MessageContainer',
    setup() {
    watch(messageCollect, () => {
    console.log('>>>>>>监听到消息列表改变');
    nextTick(() => {
    const messageContainer = document.querySelector('.message_container');
    setTimeout(() => {
    messageContainer && scrollBottom(messageContainer);
    }, 300);
    });
    });

    return () => {
    return (
    <>
    <div class='message_container'>
    <MessageList />
    </div>
    </>
    );
    };
    },
    });

    8、聊天室内核心方法

    聊天室内部分状态管理

    import { EasemobChat } from "easemob-websdk"
    import { reactive, ref } from "vue"
    import { DisplayMessageType, ILoginUserInfo } from "../types/index"
    import { manageEasemobApis } from "../imApis/"
    const messageCollect = reactive<DisplayMessageType[]>([])
    const loginUserInfo: ILoginUserInfo = {
    loginUserId: "",
    nickname: ""
    }
    const currentChatroomId = ref("")
    export const useManageChatroom = () => {
    const setCurrentChatroomId = (roomId: string) => {
    currentChatroomId.value = roomId
    }
    const setLoginUserInfo = async (loginUserId: string) => {
    const { fetchLoginUserNickname } = manageEasemobApis()
    loginUserInfo.loginUserId = loginUserId
    try {
    const res = await fetchLoginUserNickname(loginUserId)
    loginUserInfo.nickname = res[loginUserId].nickname
    console.log(">>>>>>获取到用户属性", loginUserInfo.nickname)
    } catch (error) {
    console.log(">>>>>>获取失败")
    }
    }
    const pushMessageToList = (message: DisplayMessageType) => {
    messageCollect.push(message)
    }
    const sendDisplayMessage = async (payload: EasemobChat.CreateMsgType) => {
    const { sendTextMessage, sendImageMessage } = manageEasemobApis()
    return new Promise((resolve, reject) => {
    if (payload.type === "txt") {
    sendTextMessage(payload)
    .then(res => {
    messageCollect.push(res as unknown as EasemobChat.TextMsgBody)
    resolve(res)
    })
    .catch(err => {
    reject(err)
    })
    }
    if (payload.type === "img") {
    sendImageMessage(payload)
    .then(res => {
    messageCollect.push(res as unknown as EasemobChat.ImgMsgBody)
    resolve(res)
    })
    .catch(err => {
    reject(err)
    })
    }
    })
    }

    return {
    messageCollect,
    currentChatroomId,
    loginUserInfo,
    setCurrentChatroomId,
    sendDisplayMessage,
    pushMessageToList,
    setLoginUserInfo
    }
    }

    实例化 im sdk

    import EaseSDK, { EasemobChat } from "easemob-websdk"
    import { mountEaseIMListener } from "./listener"
    export let EMClient = {} as EasemobChat.Connection
    export const EMCreateMessage = EaseSDK.message.create
    export const initEMClient = (appKey: string) => {
    EMClient = new EaseSDK.connection({
    appKey: appKey
    })
    mountEaseIMListener(EMClient)
    return EMClient
    }

    挂载聊天室相关监听监听

    import { EasemobChat } from 'easemob-websdk';
    import { useManageChatroom } from '../mangeChatroom';
    import { manageEasemobApis } from '../imApis';
    export const mountEaseIMListener = (EMClient: EasemobChat.Connection) => {
    const { pushMessageToList, setLoginUserInfo, currentChatroomId } =
    useManageChatroom();
    const { joinChatroom } = manageEasemobApis();
    console.log('>>>mountEaseIMListener');
    EMClient.addEventHandler('connection', {
    onConnected: () => {
    console.log('>>>>>onConnected');
    joinChatroom();
    setLoginUserInfo(EMClient.user);
    },
    onDisconnected: () => {
    console.log('>>>>>Disconnected');
    },
    onError: (error: any) => {
    console.log('>>>>>>Error', error);
    },
    });
    EMClient.addEventHandler('message', {
    onTextMessage(msg) {
    if (msg.chatType === 'chatRoom' && msg.to === currentChatroomId.value) {
    pushMessageToList(msg);
    }
    },
    onImageMessage(msg) {
    if (msg.chatType === 'chatRoom' && msg.to === currentChatroomId.value) {
    pushMessageToList(msg);
    }
    },
    });
    EMClient.addEventHandler('chatroomEvent', {
    onChatroomEvent(eventData) {
    console.log('>>>>chatroomEvent', eventData);
    },
    });
    };

    使用方式

    npm install emchat-chatroom-widget
    import EMChatroom from "emchat-chatroom-widget/emchat-chatroom-widget.esm.js"
    //引入插件内部样式
    import "emchat-chatroom-widget/style.css"
    //appKey 需从环信申请
    createApp(App)
    .use(EMChatroom, {
    appKey: "easemob#XXX"
    })
    .mount("#app")

    //模版组件内使用
    /**
    * @param {username} string
    * @param {password} string
    * @param {accessToken} string
    * @param {chatroomId} string
    */

    <EasemobChatroom
    :username="'hfp'"
    :password="'1'"
    :chatroomId="'208712152186885'"
    >
    </EasemobChatroom>

    最终效果

    image.png

    相关代码

    参考资料


    收起阅读 »

    sip中继

    sip
    sip中继是什么?sip是一个基于文本的应用层控制协议,用于创建、修改和释放一个或多个参与者的会话,同时也是一种源于互联网的IP语音会话控制协议。使用SIP,服务提供商可以随意选择标准组件,快速驾驭新技术。不论媒体内容和参与方数量,用户都可以查找和联系对方。s...
    继续阅读 »

    sip中继是什么?

    sip是一个基于文本的应用层控制协议,用于创建、修改和释放一个或多个参与者的会话,同时也是一种源于互联网的IP语音会话控制协议。使用SIP,服务提供商可以随意选择标准组件,快速驾驭新技术。不论媒体内容和参与方数量,用户都可以查找和联系对方。

    sip中继的功能用途

    SIP中继是基于网络连接不同的电话系统和视频会议系统,使它们能够相互通信。这种连接方式可以让用户在不同的地方进行无障碍的沟通交流,提高工作效率。

    sip中继的接入类型

    1、通过语音网关将PSTN转换成SIP:这一种的应用场景是运营商会拉一条电话线到用户的办公网地点。因为这条电话线是铜线的形式,它是无法被IP电话系统直接使用的。
    2、通过数字中继网关将数字中继转换成SIP:这种事其实交付的方式和上面的方法是一样的。唯一不同的是网关的接口不太一样,这个网关是要通过E1的线路接入,然把物理线路转换成sip线路。
    3、运营商SIP IMS中继-网线直连IP PBX:这应该是未来的主流形式。其形式就是运营商拉一条光猫到用户的办公场所。然后光猫上有一条网线可以接在用户的sip系统服务器的网络接口。
    4、三方SIP线路-互联网接入号码:即由基础运营商之外的第三方提供的SIP线路,从用户体验来说,这其实应该是中国最理想的sip中继。这是中国的某些二类电信运营商,或者不是运营商的一些企业,把SIP号码通过互联网的形式直接交付给用户。通过代理商的形式申请号码的这种类型会涉及到号码实名的问题。

    国内SIP中继的分类

    国内的运营商目前提供2种SIP中继连接方式:本地SIP中继和云端SIP中继

    本地sip中继由于是私有网络连接,适合于对安全要求比较高的企业

    云端sip中继通过互联网接入,简单易用


    云SIP中继的优势

    1、云部署,弹性按需扩展
    2、纯软,虚拟化先进架构
    3、云服务器:按需订阅,扩容方便
    4、无需布线:现有网线或者WIFI
    5、无需准备机房机柜
    6、无需专门的电话模块和电话线跳线
    7、无需自己维护:供应商提供整个系统的维护

    结语

    SIP中继是一种用于连接不同SIP网络的设备,它可以将SIP信号从一个网络传输到另一个网络。

    收起阅读 »

    GPT-4耗尽全宇宙数据!OpenAI接连吃官司,竟因数据太缺了,UC伯克利教授发出警告

    穷尽「全网」,生成式AI很快无数据可用。 近日,著名UC伯克利计算机科学家Stuart Russell称,ChatGPT和其他AI工具的训练可能很快耗尽「全宇宙的文本」。 换句话说,训练像ChatGPT这样的AI,将因数据量不够而受阻。 这可能会影响生成式...
    继续阅读 »

    穷尽「全网」,生成式AI很快无数据可用。




    近日,著名UC伯克利计算机科学家Stuart Russell称,ChatGPT和其他AI工具的训练可能很快耗尽「全宇宙的文本」。


    换句话说,训练像ChatGPT这样的AI,将因数据量不够而受阻。




    这可能会影响生成式AI开发人员,在未来几年收集数据,以及训练人工智能的方式。


    同时,Russell认为人工智能将在「语言输入,语言输出」的工作中取代人类。


    数据不够,拿什么凑?



    Russell近来的预测引起了大家重点关注。


    OpenAI和其他生成式AI开发人员,为训练大型语言模型,开始进行数据收集。


    然而,ChatGPT和其他聊天机器人不可或缺的数据收集实践,正面临着越来越多的审查。




    其中就包括,未经个人同意情况下创意被使用,以及平台数据被自由使用感到不满的一些高管。


    但Russell的洞察力指向了另一个潜在的弱点:训练这些数据集的文本短缺。


    去年11月,MIT等研究人员进行的一项研究估计,机器学习数据集可能会在2026年之前耗尽所有「高质量语言数据」。




    论文地址:arxiv.org/pdf/2211.04…


    根据这项研究,「高质量」集中的语言数据来自:书籍、新闻文章、科学论文、维基百科和过滤后的网络内容等。


    而加持当红炸子鸡ChatGPT背后的模型GPT-4同样接受了大量优质文本的训练。


    这些数据来自公共在线的资源(包括数字新闻来源和社交媒体网站)


    从社交媒体网站「数据抓取」,才导致马斯克出手限制用户每天可以查看的推文数量。




    Russell表示,尽管许多报道未经证实,但都详细说明了OpenAI从私人来源购买了文本数据集。虽然这种购买行为可能存在解释,但自然而然的推断是,没有足够的高质量公共数据了。


    一直以来,OpenAI尚未公开GPT-4背后训练的数据。


    而现在,OpenAI需要用「私人数据」来补充其公共语言数据,以创建该公司迄今最强大、最先进的人工智能模型 GPT-4。


    足见,高质量数据确实不够用。


    OpenAI在发布前没有立即回复置评请求。


    OpenAI深陷数据风波



    近来,OpenAI遇上了大麻烦,原因都和数据有关。


    先是16人匿名起诉OpenAI及微软,并提交了长达157页的诉讼,声称他们使用了私人谈话和医疗记录等敏感数据。




    他们的索赔金额高达30亿美元,诉讼中指出,



    尽管制定了购买和使用个人信息的协议,但是OpenAI和微软系统性地从互联网中窃取了3000亿个单词,包括数百万未经同意获取的个人信息。



    这其中包含账户信息、姓名、联系方式、电子邮件、支付信息、交易记录、浏览器数据、社交媒体、聊天数据、cookie等等。


    这些信息被嵌入到ChatGPT中,但这些恰恰反映出个人爱好、观点、工作履历甚至家庭照片等。


    而负责这次起诉的律师事务所Clarkson,此前曾负责过数据泄露和虚假广告等问题的大规模集体诉讼。




    紧接着,这周又有几位全职作者提出,OpenAI未经允许使用了自己的小说训练ChatGPT,构成侵权。


    那么是如何确定使用自己小说训练的呢?


    证据就是,ChatGPT能够针对他们的书生成准确的摘要,这就足以说明这些书被当作数据来训练ChatGPT。


    作者Paul Tremblay和Mona Awad表示,「ChatGPT未经许可就从数千本书中拷贝数据,这侵犯了作者们的版权」。




    起诉书中预估,OpenAI的训练数据中至少包含30万本书,其中很多来自侵权网站。


    比如,GPT-3训练数据情况披露时,其中就包含2个互联网图书语料库,大概占比为15%。


    2位起诉的作者认为,这些数据就是来自一些免费的网址,比如Z-Library、Sci-Hub等。


    另外2018年,OpenAI曾透露训练GPT-1中的数据就包括了7000+本小说。起诉的人认为这些书没有获得作者认可就直接使用。


    另谋他法?



    不得不说,OpenAI使用数据来源一事确实存在诸多争议。


    今年2月,《华尔街日报》记者Francesco Marconi曾表示,新闻媒体的数据也被用来训练ChatGPT。


    Marconi让ChatGPT列了一个清单,竟有20家媒体。




    早在今年5月,Altman在接受采访时曾表示,OpenAI已经有一段时间没有使用付费客户数据来训练大语言模型了。



    客户显然不希望我们训练他们的数据,所以我们改变了计划,不再这么做。





    其实,OpenAI在3月初,曾悄然更新了服务条款。


    Altman提到,现在公司正在开发的新技术,可以使用更少的数据来训练模型。


    或许从OpenAI身上受到了启发,谷歌选择先行堵上这一漏洞。


    7月1日,谷歌更新了其隐私政策,现在的政策中明确谷歌有权收集任何公开可用的数据,并将其用于其人工智能模型的训练。




    谷歌向所有用户表明,只要是自己能够行公开渠道获得的内容,都可以拿来训练Bard以及未来的AI。


    参考资料:


    http://www.businessinsider.com/ai-could-ru…


    作者:新智元
    链接:https://juejin.cn/post/7261932861682778167
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    收起阅读 »

    很佩服的一个Google大佬,离职了。。

    这两天,科技圈又有一个突发的爆款新闻相信不少同学都已经看到了。 那就是75岁的计算机科学家Geoffrey Hinton从谷歌离职了,从而引起了科技界的广泛关注和讨论。 而Hinton自己也证实了这一消息。 提到Geoffrey Hinton这个名字,对于...
    继续阅读 »

    这两天,科技圈又有一个突发的爆款新闻相信不少同学都已经看到了。


    那就是75岁的计算机科学家Geoffrey Hinton从谷歌离职了,从而引起了科技界的广泛关注和讨论。



    而Hinton自己也证实了这一消息。




    提到Geoffrey Hinton这个名字,对于一些了解过AI人工智能和机器学习等领域的同学来说,应该挺熟悉的。


    Hinton是一位享誉全球的人工智能专家,被誉为“神经网络之父”、“深度学习的鼻祖”、“人工智能教父”等等,在这个领域一直以来都是最受尊崇的泰斗之一。



    作为人工智能领域的先驱,他的工作和成就也对该领域的后续发展产生了深远的影响。




    其实算一下时间,距离Hinton 2013年加入谷歌,已经也有十个年头了。


    据报道,Hinton在4月份其实就提出了离职,并于后来直接与谷歌CEO劈柴哥(Sundar Pichai)进行了交谈。


    Hinton在接受媒体访谈时表示,他非常关注人工智能的风险,并表示对自己多年的工作和研究存在遗憾。


    正当大家都在好奇Hinton离职原因的时候,Hinton自己却表示,这样一来可以更加自由地讨论人工智能的风险。





    1947年,Geoffrey Hinton出生于英国温布尔登的一个知识分子家庭。



    他的父亲Howard Everest Hinton是一个研究甲壳虫的英国昆虫学家,而母亲Margaret Clark则是一名教师。


    除此之外,他的高曾祖父George Boole还是著名的逻辑学家,也是现代计算科学的基础布尔代数的发明人,而他的叔叔Colin Clark则是一个著名的经济学家。


    如此看来,Hinton家庭里的很多成员都在学术和研究方面都颇有造诣。




    Hinton主要从事神经网络和机器学习的研究,在AI领域做出过许多重要贡献,其中最著名的当属他在神经网络领域所做的研究工作。



    他在20世纪80年代就已经开启了反向传播算法(Back Propagation, BP算法)的研究,并将其应用于神经网络模型的训练中。这一算法被广泛应用于语音识别、图像识别和自然语言处理等领域。



    除此之外,Hinton还在卷积神经网络(Convolutional Neural Networks,CNN)、深度置信网络(Deep Belief Networks,DBN)、递归神经网络(Recursive Neural Networks,RNN)、胶囊网络(Capsule Network)等领域做出了重要贡献。




    2013年,Hinton加入Google,同时把机器学习相关的很多技术带进了谷歌,同时融合到谷歌的多项业务之中。



    2019年3月,ACM公布了2018年度的图灵奖得主。


    图灵奖大家都知道,是计算机领域的国际最高奖项,也被誉为“计算机界的诺贝尔奖”。


    而Hinton则与蒙特利尔大学计算机科学教授Yoshua Bengio和Meta首席AI科学家Yann LeCun一起因为研究神经网络而获得了该年度的图灵奖,以表彰他们在对应领域所做的杰出贡献。



    除此之外,Hinton在他的学术生涯中发表了数百篇论文,这些论文中提出了许多重要的理论和方法,涵盖了人工智能、机器学习、神经网络、计算机视觉等多个领域。


    而且他的论文被引用的次数也是惊人,这对于这些领域的研究和发展都产生了重要的影响。





    除了自身在机器学习方面的造诣很高,Hinton同时也是一个优秀的老师。


    Hinton带过很多大牛学生,其中不少都被像苹果、Google等这类硅谷科技巨头所挖走,在对应的公司里领导着人工智能相关领域的研究。


    这其中最典型的就是Ilya Sutskever,他是Hinton的学生,同时他也是最近大名鼎鼎的OpenAI公司的联合创始人和首席科学家。



    聊到这里,不得不感叹大佬们的创造力以及对这个领域所作出的贡献。


    既然离开了谷歌,那也就意味着将开启一段新的旅程,也期待着大佬后续给大家带来更多精彩的故事。


    好了,以上就是今天的文章内容,感谢大家的收看,我们下期见。


    作者:CodeSheep
    链接:https://juejin.cn/post/7229687757848690749
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    收起阅读 »

    软件开发者的自身修养

    关键词:工作任务、测试开发、孰能生巧、代码优化、团队开发 一、工作任务 ① 会议主题: 一般在日常的工作会议中,要总结和反思:我这周干了什么、我下周打算干什么、我遇到了什么问题 ② 编程是需要持续投入精力和注意力的智力活动。注意力是稀缺资源,类似于魔力点数。如...
    继续阅读 »

    关键词:工作任务、测试开发、孰能生巧、代码优化、团队开发


    一、工作任务


    会议主题:
    一般在日常的工作会议中,要总结和反思:我这周干了什么、我下周打算干什么、我遇到了什么问题


    编程是需要持续投入精力和注意力的智力活动。注意力是稀缺资源,类似于魔力点数。如果用光了自己的注意力点数,必须花一个小时或者更多的时间做不需要注意力的事情来补充它


    时间拆分:对于每天的工作时间可以参考番茄工作法策略进行时间拆分


    ④ 专业开发人员评估每个任务的优先级,排除个人的喜好和需要,按照真实紧急程度来执行任务


    小步快跑, 以防步履蹒跚


    ⑥ 专业开发人员会用心管理自己的时间和注意力


    需求预估是软件开发人员面对的最简单、也是最可怕的活动之一了


    ⑧ 业务方觉得预估就是承诺,开发方认为预估就是猜测。两者相差迥异


    ⑨ 需求承诺是必须做到的,是关于确定性的


    ⑩ 专业开发人员能够清楚区分预估和承诺。只有在确切知道可以完成的前提下,他们才会给出承诺


    ① 预估任务:达成共识,把大任务分成许多小任务,分开预估再加总,结果会比单独评估大任务要准确很多?这样做之所以能够提高准确度,是因为小任务的预估错误几乎可以忽略,不会对总得结果产生明显影响


    ② 对需要妥善对待的预估结果,专业开发人员会与团队的其他人协商,以取得共识


    二、测试开发


    ① 在工作中,有一种现象叫观察者效应,或者不确定原则。每次你向业务方展示一项功能,他们就获得了比之前更多的信息,这些新信息反过来又会影响他们对整个系统的看法


    ② 专业开发人员,也包括业务方必须确认,需求中没有任何不确定因素


    ③ 开发人员有责任把验收测试与系统联系起来,然后让这些测试通过


    ④ 请记住,身为专业开发人员,你的职责是协助团队开发出最棒的软件。也就是说,每个人都需要关心错误和疏忽,并协力改正


    单元测试是深入系统内部进行,调用特定类的方法;验收测试则是在系统外部,通常是在API或者UI级别进行


    QC:检验产品的质量,保证产品符合客户的需求,是产品质量检查者;QA:审计过程的质量,保证过程被正确执行,是过程质量审计者


    ⑦ 测试策略:单元测试、组件测试、集成测试、系统测试、探索式测试


    ⑧ 8小时其实非常短暂,只有480分钟,28800秒。身为专业的开发人员,你肯定希望能在这短暂的时间里尽可能高效的工作,取得尽可能多的成果


    ⑨ 再说一次,仔细管理自己的时间是你的责任


    三、孰能生巧


    调试时间和编码时间是一样昂贵的


    ② 管理延迟的诀窍,便是早期监测和保持透明。要根据目标定期衡量进度


    ③ 如果可怜的开发人员在压力之下最终屈服,同意尽力赶上截止日期,结局会十分悲惨。那些开发人员会开始抄近路,会额外加班加点工作,抱着创造奇迹的渺茫希望


    ④ 即使你的技能格外高超,也肯定能从另外一名程序员的思考与想法中获益


    测试代码之匹配于产品代码,就如抗体之匹配于抗原一样


    ⑥ 整洁的代码更易于理解,更易于修改,也更易于扩展。代码更简洁了,缺陷也更少了。整个代码库也会随之稳步改善,杜绝业界常见的放任代码劣化而视若不见的状况


    ⑦ 任何事情,只要想做得快,都离不开练习!无论是搏斗还是编程,速度都来源于练习!从练习中学到很多东西,深入了解解决问题的过程,进而掌握更多的方法,提升专业技能


    关于练习的职业道德职业程序员用自己的时间来练习。老板的职责不包括避免你的技术落伍,也不包括为你打造一份好看的履历


    ⑨ 东西画在纸上与真正做出来,是不一样的


    四、代码优化


    ① 好代码应该可扩展、易于维护、易于修改、读起来应该有散文的韵味……


    ② 在经济全球化时代,企业唯利是图,为提升股价而采用裁员、员工过劳和外包等方式,我遇到的这种缩减开发成本的手段,已经消解了高质量程序的存在价值和适宜了。只要一不小心,我们这些开发人员就可能会被要求、被指示或是被欺骗去花一半的时间写出两倍数量的代码


    ③ 客户所要的任何一项功能,一旦写起来,总是远比它开始时所说的要复杂许多


    ④ 很少有人会认真对待自己说的话,并且说到做到


    言必信,行必果


    ⑥ 如果感到疲劳或者心烦意乱,千万不要编码


    ⑦ 专业开发人员善于合理分配个人时间,以确保工作时间段中尽可能富有成效


    ⑧ 流态区:程序员在编写代码时会进入的一种意识高度专注但思维视野却会收拢到狭窄的状态


    创造性输出依赖于创造性输入


    五、团队开发


    ① 我认为自己是团队的一员,而非凌驾于团队之上


    ② 要勇于承担作为一名手艺人工程师所肩负的重大责任


    ③ 代码中难免会出现bug,但并不意味着你不用对它们负责;没人能写出完美的软件,但这并不表示你不用对不完美负责


    ④ 什么样的代码是有缺陷的呢?那些你没把握的代码都是


    ⑤ 我不是在建议,是在要求!你写的每一行代码都要测试,完毕!


    ⑥ 作为开发人员,你需要有个相对迅捷可靠的机制,以此判断所写的代码可否正常工作,并且不会干扰系统的其他部分


    编程是一种创造性活动,写代码是无中生有的创造过程,我们大胆地从混沌之中创建秩序


    ⑧ 他们各表异议相互说“不”,然后找到了双方都能接受的解决方案。他们的表现是专业的


    ⑨ 许诺“尝试”,意味着只要你再加把劲还是可以达成目标的


    作者:纯之风
    来源:juejin.cn/post/7273051203562143763
    收起阅读 »

    做项目和做产品的区别

    TL;DR: 产品最终目标是客观的,项目的最终目标是主观的,产品有长期价值,项目没有。 在这几年中,做过产品也做过项目,在做产品的团队做过项目,也在做项目的团队做过产品。做产品和做项目,看起来没有什么区别,毕竟做产品的团队也是按照项目来开发一个个功能,做项目...
    继续阅读 »

    TL;DR: 产品最终目标是客观的,项目的最终目标是主观的,产品有长期价值,项目没有。



    在这几年中,做过产品也做过项目,在做产品的团队做过项目,也在做项目的团队做过产品。做产品和做项目,看起来没有什么区别,毕竟做产品的团队也是按照项目来开发一个个功能,做项目的团队也是做一个产品交付出去,都是开发。但实际上,做产品和做项目的目标是完全不同的,开发者关注的重点也皆然不同,本文就聊一聊我以为的两者的区别。本文中的产品和项目背景都是IT行业,其他行业我不了解,以下依旧简称为产品和项目。


    产品


    在移动互联网如此发达的今天,每人每天都会接触到无数的产品,涵盖生活和工作的方方面面。这些产品都有一个统一的特征——发布后保持品牌,然后持续迭代。10年前我们用的是微信,今天我们用的还是微信,但是功能已经今非昔比,增长了数倍,但10年前的大多数功能依旧存在。微信已经是中国互联网里最克制的产品之一了,依旧增加了这么多功能,阿里系的APP一直被人诟病臃肿,本质上也是在不停的增加功能。很多2B的产品也是一样,只不过由于对用户有更强的控制力,2B的产品可以更干脆的舍弃一些老旧功能。


    可见,在保持现有功能的基础上不停迭代是产品的基本特征。一个产品自诞生之初开始,就开始了这个过程,直到这个产品即将死去,该过程才会停止。对于开发来说,很难有人预料到一个产品完整的生命周期,尤其是成功的产品。那么一个扩展性强、可维护性好、稳定性高的架构就会成为一个产品的核心价值,这样的架构往往需要经验丰富的开发人员才能设计出来。除了对业务的熟悉程度外,这种架构经验也是开发者在做产品时积累的核心价值。经过历练的开发者可以用之前的经验对类似的业务场景进行快速复制,少走很多弯路,所以之前程序员跳槽的涨薪普遍比较可观。


    产品通常会经历市场和直接使用者的检验,所以评价的标准也是相对客观的,比如产品的营收、盈利能力,用户反馈,增长率,等等。尽管2B的产品某些人会有明显权重更大的评价,比如老板之于钉钉,但一个产品的好坏还是很难由个别人说了算,这也是互联网公司大多靠数据驱动的原因。


    项目


    项目就不一样了,尽管项目做出来的也是一个产品,供客户使用,但是和真正的产品相比有很大的区别。常见的项目形态是甲乙方项目,对于广大的非互联网公司来说,这是更常见的开发形态,这个行业也囊括了众多的开发者。下面聊的项目就是这种甲乙方的项目。需要特别说明的是,这种项目并不一定就很low,也可以非常的高大上,甲乙方都是世界500强也多的是。


    项目一般有明确的周期,在项目周期结束后,项目会整体交给客户,所有权在客户。这样造成了很少有项目开发团队会对项目中做的产品做持续性维护,这在很大程度上削弱了好架构的意义。大部分项目开始时会对要做的事情有明确的预期,技术架构通常只需要满足这个预期即可。有一些项目客户可能会指定技术栈或者一些高屋建瓴的方案,但很少有客户会关心具体的实现方式。由于有明确的维护周期和相关利益者不重视,在项目中没什么人会关注扩展性、维护性这些东西,经验的价值更多体现在项目开始的技术选型上。这种环境对于想要变的更好的开发者是很不利的。


    除了生命周期和持续迭代的差异外,项目和产品另一个最大的区别在于评价体系。由于甲乙方关系的存在,甲方不可能让所有会使用项目产品的人都来评价好坏,这样一定会导致项目的失败,所以甲方就会选出几名利益相关方来负责项目的验收。由于人数有限,再加上负责验收的人可能并不使用项目开发的产品,对于乙方来说,与其做好项目,不如想办法直接搞定负责项目验收的人。毕竟,能不能合格验收实际上是这个几个人的主观评价,项目产品真正的使用者此时还不知道产品的存在。所以在项目中,开发的话语权就变的很小了,所谓的项目经理变成了最重要的人,对于产品来说本应该最重要的业务价值和技术实现,也变成了和甲方几位关键角色的关系。在这种情况下,开发和其他干活的很容易被压榨,因为他们不重要。


    另外,不要觉得上面说的这些对技术不屑一顾的事情只发生在不重视技术的中小型公司。之前说了,甲乙方可能都非常的高大上,技术水平也不低,但这些事情全部会照常发生,这是由利益关系决定的。


    谈谈外包


    最后,谈谈外包。虽然都叫外包,但人员外包和项目外包是完全不同的两种状态。人员外包多见于互联网大厂,这些人虽然关系在外包公司,但做的事情其实和大厂里面的基层员工差异不大,通常做一些难度不高,但重复性强的工作。虽然听起来无趣,但是这些人一般可以看到所在团队的完整代码库的,也可以和大厂员工一样,了解产品的整体设计,跟随产品迭代发展,只要自己愿意,可以很快的积累。前些年人才供不应求时,也有很多外包人员就地转正。虽然理论上这些人可以随时被换掉,但实际上只要不是这个人太差,加上负责的工作难度也不高,大部分团队都希望能有稳定的人员,所以这些人相对稳定,是相对不错的机会。


    另一种就是项目外包了,被外包公司派遣到各个项目上,按照人天收取甲方费用。这种外包工作对于开发者来说就很差了。首先,中国的甲方把乙方当人的少,工作环境普遍堪忧,中国的甲方又基本都希望在现场办公,方便监督,通常来说能有个像样的会议室就不错了。其次,由于真正明白的项目管理的项目经理很少,导致大部分项目实际上都是失控状态,到了中后期开始疲于奔命,最终熬夜加班,勉强交付。这对于开发者的心理和压力都不好,长时间在这种环境中的开发者,很难有精力和意愿把事情做好,更多是糊弄了事,然后开启恶性循环。第三,由于上面谈到的项目的特征,开发者很难在项目中得到积累,更缺少和项目一起成长的机会,大部分开发者都是重复最初1至2年的经验,然后不停的重复。即便有学习意愿的开发者,也缺乏学习的机会和环境,不知道方向在哪,最终丧失成长的机会。


    所以,除了脏简历这种功利的原因,在项目外包的开发者,最好能明确知道自己所处环境的问题,如果有继续前进的意愿,要知道做什么是对自己有用的,等待机会,改变处境。


    总结


    本文结合我之前的经历和看到的现象,对做产品和做项目的差异做了一些个人观点的总结。陈述了一些事实,抽象了一些具体的事例,较为深入的分析了产生差异的原因。这些东西很难改变,个人也没有必要去改变,没有好与坏,只是不同的实际情况。对个人来说,人的主观能动性还是很重要的,即便在做产品的团队,很多人也按照做项目的态度在干活,导致了很多产品扩展困难,难以为继。有的人虽然处在恶劣的环境和巨大的项目压力中,但依然可以每天自我成长,最终找到理想的工作机会。如果这篇文章能帮你看清一点自己的处境,那么我的这点经验就有了价值。


    作者:J_Wang
    来源:juejin.cn/post/7275945995622662183
    收起阅读 »

    产品:请给我实现一个在web端截屏的功能!

    web
    一、故事的开始 最近产品又开始整活了,本来是毫无压力的一周,可以小摸一下鱼的,但是突然有一天跟我说要做一个在网页端截屏的功能。 作为一个工作多年的前端,早已学会了尽可能避开麻烦的需求,只做增删改查就行! 我立马开始了我的反驳,我的理由是市面上截屏的工具有很多的...
    继续阅读 »

    一、故事的开始


    最近产品又开始整活了,本来是毫无压力的一周,可以小摸一下鱼的,但是突然有一天跟我说要做一个在网页端截屏的功能。


    作为一个工作多年的前端,早已学会了尽可能避开麻烦的需求,只做增删改查就行!


    我立马开始了我的反驳,我的理由是市面上截屏的工具有很多的,微信截图、Snipaste都可以做到的,自己实现的话,一是比较麻烦,而是性能也不会很好,没有必要,把更多的时间放在核心业务更合理!


    结果产品跟我说因为公司内部有个可以用来解析图片,生成文本OCR的算法模型,web端需要支持截取网页中部分然后交给模型去训练,微信以及其他的截图工具虽然可以截图,但需要先保存到本地,再上传给模型才行。


    网页端支持截图后可以在在截屏的同时直接上传给模型,减少中间过程,提升业务效率。


    我一听这产品小嘴巴巴的说的还挺有道理,没有办法,只能接了这个需求,从此命运的齿轮开始转动,开始了我漫长而又曲折的思考。


    二、我的思考


    在实现任何需求的时候,我都会在自己的脑子中大概思考一下,评估一下它的难度如何。我发现web端常见的需求是在一张图片上截图,这个还是比较容易的,只需要准备一个canvas,然后利用canvas的方法 drawImage就可以截取这个图片的某个部分了。


    示例如下:


    <!DOCTYPE html>
    <html>
    <head>
    <title>截取图片部分示例</title>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <br>
    <button onclick="cropImage()">截取图片部分</button>
    <br>
    <img id="croppedImage" alt="截取的图片部分">
    <br>

    <script>
    function cropImage() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var image = new Image();

    image.onload = function () {
    // 在canvas上绘制整张图片
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    // 截取图片的一部分,这里示例截取左上角的100x100像素区域
    var startX = 0;
    var startY = 0;
    var width = 100;
    var height = 100;
    var croppedData = ctx.getImageData(startX, startY, width, height);

    // 创建一个新的canvas用于显示截取的部分
    var croppedCanvas = document.createElement('canvas');
    croppedCanvas.width = width;
    croppedCanvas.height = height;
    var croppedCtx = croppedCanvas.getContext('2d');
    croppedCtx.putImageData(croppedData, 0, 0);

    // 将截取的部分显示在页面上
    var croppedImage = document.getElementById('croppedImage');
    croppedImage.src = croppedCanvas.toDataURL();
    };

    // 设置要加载的图片
    image.src = 'your_image.jpg'; // 替换成你要截取的图片的路径
    }
    </script>
    </body>
    </html>

    一、获取像素的思路


    但是目前的这个需求远不止这样简单,因为它的对象是整个document,需要在整个document上截取一部分,我思考了一下,其实假设如果浏览器为我们提供了一个api,能够获取到某个位置的像素信息就好了,这样我将选定的某个区域的每个像素信息获取到,然后在一个像素一个像素绘制到canvas上就好了。


    我本以为我发现了一个很好的方法,可遗憾的是经过调研浏览器并没有为我们提供类似获取某个位置像素信息的API。


    唯一为我们提供获取像素信息的是canvas的这个API。


    <!DOCTYPE html>
    <html>
    <head>
    <title>获取特定像素信息示例</title>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <br>
    <button onclick="getPixelInfo()">获取特定像素信息</button>
    <br>
    <div id="pixelInfo"></div>

    <script>
    function getPixelInfo() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 绘制一些内容到canvas
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);

    // 获取特定位置的像素信息
    var x = 75; // 替换为你想要获取的像素的x坐标
    var y = 75; // 替换为你想要获取的像素的y坐标
    var pixelData = ctx.getImageData(x, y, 1, 1).data;

    // 提取像素的颜色信息
    var red = pixelData[0];
    var green = pixelData[1];
    var blue = pixelData[2];
    var alpha = pixelData[3];

    // 将信息显示在页面上
    var pixelInfo = document.getElementById('pixelInfo');
    pixelInfo.innerHTML = '在位置 (' + x + ', ' + y + ') 的像素信息:<br>';
    pixelInfo.innerHTML += '红色 (R): ' + red + '<br>';
    pixelInfo.innerHTML += '绿色 (G): ' + green + '<br>';
    pixelInfo.innerHTML += '蓝色 (B): ' + blue + '<br>';
    pixelInfo.innerHTML += 'Alpha (透明度): ' + alpha + '<br>';
    }
    </script>
    </body>
    </html>


    浏览器之所以没有为我们提供相应的API获取像素信息,停下来想想也是有道理的,甚至是必要的,因为假设浏览器为我们提供了这个API,那么恶意程序就可以通过这个API,不断的获取你的浏览器页面像素信息,然后全部绘制出来。一旦你的浏览器运行这个段恶意程序,那么你在浏览器干的什么,它会一览无余,相当于在网络的世界里裸奔,毫无隐私可言。


    二、把DOM图片化


    既然不能走捷径直接拿取像素信息,那就得老老实实的把document转换为图片,然后调用canvas的drawImage这个方法来截取图片了。


    在前端领域其实99%的业务场景早已被之前的大佬们都实现过了,相应的轮子也很多。我问了一下chatGPT,它立马给我推荐了大名鼎鼎的html2canvas,这个库能够很好的将任意的dom转化为canvas。这个是它的官网。


    我会心一笑,因为这不就直接能够实现需求了,很容易就可以写出下面的代码了:


    html2canvas(document.body).then(function(canvas) {
    // 将 Canvas 转换为图片数据URL
    var src = canvas.toDataURL("image/png");
    var image = new Image();
    image.src = src;
    image.onload = ()=>{
    const canvas = document.createElement("canvas")
    const ctx = canvas.getContext("2d");
    const width = 100;
    const height = 100;
    canvas.width = width;
    canvas.height = height;
    // 截取以(10,10)为顶点,长为100,宽为100的区域
    ctx.drawImage(image, 10, 10, width, height , 0 , 0 ,width , height);
    }
    });


    上面这段代码就可以实现截取document的特定的某个区域,需求已经实现了,但是我看了一下这个html2canvas库的资源发现并没有那么简单,有两个点并不满足我希望实现的点:


    1.大小


    当我们将html2canvas引入我们的项目的时候,即便压缩过后,它的资源也有近200kb:


    Screen Shot 2023-09-09 at 3.15.10 PM.png


    要知道整个react和react-dom的包压缩过后也才不到150kb,因此在项目只为了一个单一的功能引入一个复杂的资源可能并不划算,引入一个复杂度高的包一个是它会增加构建的时间,另一方面也会增加打包之后的体积。


    如果是普通的web工程可能情有可原,但是因为我会将这需求做到插件当中,插件和普通的web不一样的一点,就是web工程如果更新之后,客户端是自动更新的。但是插件如果更新了,需要客户端手动的下载插件包,然后再在浏览器安装,因此包的大小尽可能小才好,如果一个插件好几十MB的话,那客户端肯定烦死了。


    2.性能


    作为业内知名的html2canvas库,性能方面表现如何呢?


    我们可以看看它的原理,一个dom结构是如何变成一个canvas的呢!


    它的源码在这里:核心的实现是canvas-renderer.ts这个文件。


    当html2canvas拿到dom结构之后,首先为了避免副作用给原dom造成了影响,它会克隆一份全新的dom,然后遍历DOM的每一个节点,将其扁平化,这个过程中会收集每个节点的样式信息,尤其是在界面上的布局的几何信息,存入一个栈中。


    然后再遍历栈中的每一个节点进行绘制,根据之前收集的样式信息进行绘制,就这样一点点的绘制到提前准备的和传入dom同样大小的canvas当中,由于针对很多特殊的元素,都需要处理它的绘制逻辑,比如iframe、input、img、svg等等。所以整个代码就比较多,自然大小就比较大了。


    整个过程其实需要至少3次对整个dom树的遍历才可以绘制出来一个canvas的实例。


    这个就是这个绘制类的主要实现方法:


    Screen Shot 2023-09-09 at 4.08.30 PM.png


    可以看到,它需要考虑的因素确实特别多,类似写这个浏览器的绘制引擎一样,特别复杂。


    要想解决以上的大小的瓶颈。


    第一个方案就是可以将这个资源动态加载,但是一旦动态加载就不能够在离线的环境下使用,在产品层面是不能接受的,因为大家可以想一想如果微信截图的功能在没有网络的时候就使用不了,这个肯定不正常,一般具备工具属性的功能应该尽可能可以做到离线使用,这样才好。


    因此相关的代码资源不能够动态加载。


    二、dom-to-image


    正当我不知道如何解决的时候,我发现另外了一个库dom-to-image,我发现它打包后的大小只有10kb左右,这其实已经一个很可以接受的体积了。这个是它的github主页。好奇的我想知道它是怎么做到只有这么小的体积就能够实现和html2canvas几乎同样的功能的呢?于是我就研究了一下它的实现。


    dom-to-image的实现利用了一个非常灵活的特性--image可以渲染svg


    我们可以复习一下img标签的src可以接受什么样的类型:这里是mdn的说明文档


    可以接受的格式要求是:



    如果我们使用svg格式来渲染图片就可以是这样的方式:


    <!DOCTYPE html>
    <html>
    <head>
    <title>渲染SVG</title>
    </head>
    <body>
    <h1>SVG示例</h1>
    <img src="example.svg" alt="SVG示例">
    </body>
    </html>


    但是也可以是这样的方式:


    <!DOCTYPE html>
    <html>
    <head>
    <title>渲染SVG字符串</title>
    </head>
    <body>
    <div id="svg-container">
    <!-- 这里是将SVG内容渲染到<img>标签中 -->
    <img id="svg-image" src="data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' /></svg>" alt="SVG图像">
    </div>
    </body>
    </html>


    把svg的标签序列化之后直接放在src属性上,image也是可以成功解析的,只不过我们需要添加一个头部:data:image/svg+xml,


    令人兴奋的是,svg并不是只支持svg语法,也支持将其他的xml类型的语法比如html嵌入在其中。antv的x6组件中有非常多这样的应用例子,我给大家截图看一下:


    Screen Shot 2023-09-09 at 4.49.40 PM.png


    在svg中可以通过foreignObject这个标签来嵌套一些其他的xml语法,比如html等,有了这一特性,我们就可以把上面的例子改造一下:


    <!DOCTYPE html>
    <html>
    <head>
    <title>渲染SVG字符串</title>
    </head>
    <body>
    <div id="svg-container">
    <!-- 这里是将SVG内容渲染到<img>标签中 -->
    <img
    id="svg-image"
    src="data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' /><foreignObject>{ 中间可以放 dom序列化后的结果呀 }</foreignObject></svg>"
    alt="SVG图像"
    >

    </div>
    </body>
    </html>


    所以我们可以将dom序列化后的结构插到svg中,这不就天然的形成了一种dom->image的效果么?下面是演示的效果:


    <!DOCTYPE html>
    <html>
    <head>
    <title>渲染SVG字符串</title>
    </head>
    <body>
    <div id="render" style="width: 100px; height: 100px; background: red"></div>
    <br />
    <div id="svg-container">
    <!-- 这里是将SVG内容渲染到<img>标签中 -->
    <img id="svg-image" alt="SVG图像" />
    </div>

    <script>
    const perfix =
    "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><foreignObject x='0' y='0' width='100%' height='100%'>";
    const surfix = "</foreignObject></svg>";

    const render = document.getElementById("render");

    render.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");

    const string = new XMLSerializer()
    .serializeToString(render)
    .replace(/#/g, "%23")
    .replace(/\n/g, "%0A");

    const image = document.getElementById("svg-image");

    const src = perfix + string + surfix;

    console.log(src);

    image.src = src;
    </script>
    </body>
    </html>


    Screen Shot 2023-09-09 at 5.18.12 PM.png


    如果你将这个字符串直接通过浏览器打开,也是可以的,说明浏览器可以直接识别这种形式的媒体资源正确解析对应的资源:


    data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><foreignObject x='0' y='0' width='100%' height='100%'><div id="render" style="width: 100px; height: 100px; background: red" xmlns="http://www.w3.org/1999/xhtml"></div></foreignObject></svg>

    实不相瞒这个就是dom-to-image的核心原理,性能肯定是不错的,因为它是调用浏览器底层的渲染器。


    通过这个dom-to-image我们可以很好的解决资源大小性能这两个瓶颈的点。


    三、优化


    这个库打包后的产物是umd规范的,并且是统一暴露出来的全局变量,因此不支持treeshaking。


    Screen Shot 2023-09-09 at 9.13.08 PM.png


    但是很多方法比如toJpeg、toBlob、等方法我们其实都用不到,所以打包了很多我们不需要的产物,于是其实我们可以把核心的实现自己写一遍,使用1-2kb的空间就可以做到这一点。


    经过以上的思考我们就可以基本上确定方案了:


    基于dom-to-image的原理,实现一个简易的my-dom-to-image,大约只需要100行代码左右就可以做到。


    然后将document.body转化为image,再从这个image中截取特定的部分。


    Screen Shot 2023-09-09 at 9.23.06 PM.png


    好了,以上就是我关于这个需求的一些思考,如果掘友也有一些其他非常有意思的需求,欢迎评论区讨论我们一起头脑风暴啊!!!


    四、最后的话


    以下是我的其他文章,欢迎掘友们阅读哦!


    保姆级讲解JS精度丢失问题(图文结合)


    shell、bash、zsh、powershell、gitbash、cmd这些到底都是啥?


    从0到1开发一个浏览器插件(通俗易懂)


    用零碎时间个人建站(200+赞)


    另外我有一个自己的网站,欢迎来看看 new-story.cn


    创作不易,如果您觉得文章有任何帮助到您的地方,或者触碰到了自己的知识盲区,请帮我点赞收藏一下,或者关注我,我会产出更多高质量文章,最后感谢您的阅读,祝愿大家越来越好。


    作者:Story
    来源:juejin.cn/post/7276694924137463842
    收起阅读 »

    一个简单的TODO,原来这么好用

    平常我们再开发的时候,遇到一些想要之后去编写的部分,或者说再开发某个模块的时候,突然被事情打断,暂时无法实现的代码,以后才会去修复的bug的时候,要如何精准快速的去定位到那个位置呢? 下面来介绍一个很多人会忽律的标记TODO TODO是一个特殊的标记,用于标识...
    继续阅读 »

    平常我们再开发的时候,遇到一些想要之后去编写的部分,或者说再开发某个模块的时候,突然被事情打断,暂时无法实现的代码,以后才会去修复的bug的时候,要如何精准快速的去定位到那个位置呢?


    下面来介绍一个很多人会忽律的标记TODO


    TODO是一个特殊的标记,用于标识需要实现但目前还未实现的功能。这是一个Javadoc的标签,因此它只能应用于类、接口和方法。


    它可以帮助我们跟踪和管理开发中的待办事项。


    使用方法


    首先看一个最基本的使用方法


    @RestController
    public class TestController {

    @GetMapping("/hello")
    public String hello(){
    //TODO do something
    return "Hello World";
    }
    }

    这里我们加上TODO。之后再需要去进行修改的时候。


    直接去搜索就可以了


    image-20230906195743692


    除了这个方法,还有很多隐藏的方法


    进入设置


    image-20230906195949934


    这里就可以自定义todo了


    如果是团队协作的话,每个人可以自定义其他的todo类型。


    也可以用自己喜欢的更加醒目的颜色


    image-20230906200230765


    同时也可以在idea中进行全局的todo查看


    image-20230906200444351


    除了这个之外,还有过滤器,可以进行自定义的todo类型


    image-20230906200527489


    阿里巴巴Java开发手册中对TODO的规范标注主要有以下两点:



    1. TODO:表示需要实现,但目前还未实现的功能。这个标记通常用于类、接口和方法中。

    2. FIXME:标记某代码是错误的,而且不能工作,需要及时纠正的情况。


    最佳实践


    编写一个代码模板


    image-20230906201219291


    image-20230906201810835


    这样,就是一个最佳的实战了。


    作者:小u
    来源:juejin.cn/post/7276696131113959458
    收起阅读 »

    谈谈干前端四年的几点感受

    19年毕业的我,最开始怀揣着无限憧憬进入这个行业 不知不觉,已经工作4年了,如果算上大四实习的时光,也接近5年了。 4年间换了两家公司。 对于工作,我也有过很多的困扰和迷茫,现在依旧在走一步看一步的状态。 或许一觉起来工作没了,都是概率事件。 为什么会有这篇文...
    继续阅读 »

    19年毕业的我,最开始怀揣着无限憧憬进入这个行业


    不知不觉,已经工作4年了,如果算上大四实习的时光,也接近5年了。


    4年间换了两家公司。


    对于工作,我也有过很多的困扰和迷茫,现在依旧在走一步看一步的状态。


    或许一觉起来工作没了,都是概率事件。


    为什么会有这篇文章?


    一是与行业内大佬山月交流了一次,解惑答疑,有所感悟,想记录下心中所想;


    二是呼应一年前的文章《谈谈干前端三年的几点感受》,对比看看自己想法变化。




    前端在一个公司定位


    一年前我说,前端在公司的定位是必要不重要,现在的想法依旧不变,只是对象变了。


    整个技术开发人员,在一个公司的定位都是处于必要但不重要的角色,可替代性非常高。


    可替代的属性越高,价值属性便越低。


    也许局部或者短期看,技术开发的薪资是高的,但这对于公司来说,是成本。


    如果公司要降本增效,最先压榨的也是这部分人员。


    有这样一种说法,“技术傍身,编程改变世界”等等,其实是有些误导人的。


    重要的从来都是想法,是渠道,不是技术。


    只要能想到,大概率都能实现,实现不了就加班想办法实现。


    能够提出想法的人,才处于一个公司重要的地位。


    就正如我看到的,一个公司,核心业务人员离职,公司上下极力挽留,一个开发离职,领导回复祝好。




    我们要学些什么


    学有价值的东西。


    何谓价值,价值就是经过时间考验,依旧不变的东西。


    我个人极其反对花太多精力深入研究各个技术的源码。


    技术说到底是工具,工具最重要的使用,不是本身,而且只要是工具,便都有替代品,


    有新的技术,又会有新的源码,学是学不完的。


    而计算机行业,不变的什么,有价值的是什么?


    是计算机网络,是计算机组成原理,是数据结构与网络,是操作系统,是信息安全,是项目管理,是软件测试。


    以上都是大学中计算机类的专业课程,这些年没有变过。


    具体一点,与前端不变的什么,有价值的是什么?


    是网络请求,是nginx,是性能优化,是前端工程化,是脚手架,是对UI的基本审美。


    当然了,如果做可视化,音视频,跨端方向等等也有属于自己的专业壁垒。


    以上我提到的都属于目前自己看到,前端通用知识。




    如何评价自己的薪资和技术水平


    其实,我们学到的99%的知识是无用的,或者学完不用就忘记了。


    我学习的目的很单纯,就是为了跳槽涨薪。


    让自己的实力能够匹配和市场对我的要求和我自己期望的薪资。


    那么,如何得知自己的薪资水平,是否符合年限,技术水平,是否符合市场要求?


    需要比较。


    我们常说,人要和自己比,不要和别人比,人别人,气死人。但其实这是句自我安慰的鸡汤,不是生活的真相。


    人得自知,不比较,如何自知呢?


    当然,这种事情很难和同事交流,也不建议问同行。


    问同事,同事水平参差不齐,给不了你准确的答案。


    问同行,同行也许自己也发展不顺,多半是同病相怜,或是能给你方向,但给不了方案。


    我的建议是做付费咨询,向行业内大佬求助。


    同行业过来人的经验,更靠谱一些,做不到感同身受,但能明白心中所想。


    我想看到这篇文章的各位,都关注过几位技术大佬,那就去主动搭讪,说明来意,付费咨询。


    “我的薪资目前和我的工作年限匹配吗?我的技术还应该补充哪部分?我应该如何学习某些知识,有没有推荐的学习路线和文章,等等之类的问题”


    而付费是获取能够心安理得的咨询,不要计较那一顿火锅的钱。


    但其实只要搭讪成功,大佬一般都不会收费。




    2023年了,还要不要往大厂努力?


    当然要啊,这个想法和一年前比,没有动摇。


    但是大厂今年都在降本增效,门槛更高了,面试更难了,工作更卷了。


    但这并不能成为放弃的借口。无论结果与否,人总得有个工作上的目标啊。


    正如我的前同事今年初送给我的一句话,


    “备考公务员或者向大厂努力,总得找个目标,找件事情去做吧。如果觉得大厂太卷,那就干一年就走,但这个经历会成为你永久的财富。”




    前端已死?


    今年上半年受chatGPT冲击,这个言论甚嚣尘上。


    我这里不讨论死不死的事情,只觉得这个问题很荒谬,多思考思考就会明白这句话,在创造概念,制造焦虑。


    仔细想想,这波言论最大的受益方还是 做职业教育的那帮人。




    拿多少钱干多少活还是干多少活拿多少钱?


    第一家公司一切都很好。


    我还是义无反顾的离开了,离开后公司发展得更好了。


    离职的直接原因就是,当时要前端使用uni-app做跨端应用,去替换客户端的工作。


    这项工作的直接影响就是,整个公司只前端部门加班,我疲惫不堪的同时,uni-app踩不完的坑,也身心俱疲。


    每当加班到很晚时,委屈总是涌上心头。


    受不了之时,就只剩一个走字。


    这时候,小兵心态就出现了,拿多少钱多少活,我就拿这点工资,整这么多活,我无法承担,只能摆烂了。


    当然,也有领导心态,你得先努力干,干出成果,我拿着成果才去争取涨薪。


    这中间就有一个认知偏差,双方因为角度不同,无法理解对方的心态和想法。


    领导觉得小兵不懂他的良苦用心,小兵觉得领导天天画饼。


    哪种做法是对的呢?


    得就事论事。


    如果这件事情,对你有成长,有帮助,比如做一些工程化,脚手架,性能优化的工作,肯定得先干出成果。


    如果这件事情,对自己是一种消耗,那还是持小兵心态吧。


    如何区分这件事情是对你的帮助还是对自己的消耗呢?


    其实自己最清楚。


    如果干这项工作时,总是充满期待,充满激情,加班也无怨无悔,那就是帮助。


    如果干这项工作时,总是身心俱疲,牢骚满腹,加班会委屈抱怨,那就是消耗。




    人都是不愿意被管理的


    这句话出自山月,我听后豁然开朗。


    今年听闻行业内很多公司严抓考勤,多了很多制度和会议,吐槽随处可见。


    新的领导,势必会带来新的管理制度,新的实施方案。


    人都是不愿意被管理的,所以会引起各种不适应,但是一般一个月后都会销声匿迹,因为已经适应了。


    无法评价这些变化的好与坏。


    身处其中的我们只有慢慢适应,打工到哪里都一样,只要被管理着,都需要面临不同的问题。




    最后


    其实,回顾毕业这些年,19年谣传资本寒冬,然后是防疫三年,到后来前端已死,到现在无法言状的行业颓势。


    正应了那句话,“今年是过去十年最差的一年,却可能是未来十年最好的一年。”


    然后呢,这句话想表达什么?仅仅是传播了一个情绪,放在近些年都受用。


    我想说,


    “大环境的整体劣势,不影响个人的局部优势,我们要想办法建立这种个人优势;”


    “种一棵树最好的时间是十年前,其次是现在。”


    作者:虎妞先生
    来源:juejin.cn/post/7258509816691834917
    收起阅读 »

    突然发现,前端好像没几个做到 CTO 的……

    web
    大家好,我 ssh,这几天,在推上看到了一个节奏,swyx 小哥发了一篇关于前端天花板的讨论,吸引了 150w 左右的阅读。主要是在讲前端天花板,前端人员被集中捆绑在低级别工程师这个行列中,通往 VP(技术副总裁) 或者 CTO 的大门是朝他们关上的。 而他...
    继续阅读 »

    大家好,我 ssh,这几天,在推上看到了一个节奏,swyx 小哥发了一篇关于前端天花板的讨论,吸引了 150w 左右的阅读。主要是在讲前端天花板,前端人员被集中捆绑在低级别工程师这个行列中,通往 VP(技术副总裁) 或者 CTO 的大门是朝他们关上的。


    微信图片_20230726161930.jpg


    而他发出这篇推文的起因,正是 swyx 正文里配的这篇文章截图:



    经过我查询,这是 honeycomb.io 的一篇博客 成为工程 VP 里的一段话。他们没有刻意贬低前端工程师,只是客观的描述了统计情况而已,这反而是更加令人悲观的。


    其实这个问题我也不止一次想过,尤其是有一些校招的同学特别喜欢思考这个问题,之前一次校招的宣讲会后答疑环节,也有不止一个同学过来问我这个问题。


    确实,仔细想想,国内的前端界比较出名的前端出身做到很高职位的,玉伯算是一个代表,后期他基本上已经成为一个产品设计方面的负责人了,脱离了单纯前端的范畴。主导设计了云凤蝶、语雀这些非常 nb 的产品。


    image.png


    image.png


    但是除了玉伯之外,让我们仔细想想,是不是大概率情况下,前端升到更高级别负责人的概率比后端要低很多呢?第一印象是如此,而且我以前在阿里没有隐藏职位的时候,在钉钉上直接搜索 title 来确认过这个问题。


    在阿里,资深前端专家则对应前端的 p9,资深技术专家对应后端的 p9,这两个职位的人数在我印象里是相差很悬殊的,很多倍的关系…… 而且我记得 p9 的前端非常稀少。这其实也侧面反应出大家的主观感受是确有其事的。


    写到这里,我深感焦虑,赶紧去问问万能的 AI:


    ai.sb


    卧槽,被辱骂了一通。拿出我大哥 Dan 也没用!


    回到正题,swyx 又提到,有人说只要成为全栈就好了。



    直接看看这张图:



    全栈并不是口头说说那么简单,有一个小型公司的 CTO 也现身说出了自己的看法:


    image.png


    后端普遍认为前端简单,在国外也一样



    前端成为产品总负责人,比成为技术 vp 的路径要概率更大一些,这也符合玉伯的发展路径:


    image.png


    关于这件事儿,Hacker News 也有一些讨论,不过质量比较差,走偏了:


    开始讨论后端的烂代码了


    讨论男女平等


    我的看法


    看完了几乎全部的讨论以后,我感觉国外的开发者对于前端天花板的看法和国内差不多,确实是认为有后端工程背景的人升为 VP/CTO 级别的概率比较高,而前端更倾向于在框架中日复一日的迷失。


    以我自己的职业经历来说,假设我在使用 React 技术栈,今天在用 redux,明天出了一个 redux-toolkit 来解决 redux 太烂的问题,你迁移过去了,学到了很多范式很充实。再过几个月,又来了个 recoil,又来个 jotai。好像在很忙碌的学习,但其实都没有脱离状态管理的范畴,就像是被困在小学里反复的读五年级,而后端的人可能去研究更广阔的东西了。比如:




    1. 稳定性:各种灾备方案,限流等操作。




    2. 高并发:延迟,tps。




    3. 一致性:数据正确性。




    而前端比较好的处境,就是在一家前端主导产品的公司(比如最近比较火的 AffiNE)参与核心功能的研发,那么可以接触到前端比较深入的一些技术,而且有一帮大牛同事可以陪你玩最新的技术栈。又或者是参与到大型公司的基础架构建设,我了解到的比如性能监控、低代码搭建、serveless 建设、自研 JS 引擎、自研 Rust 编译库,也可以获得比较深入的技术提升。


    不过,大部分人的整个职业生涯可能都在做一些 Vue 或者 React 的应用开发,后台管理系统、活动页等等。。。是不是就完了?人生没希望了?


    再问问 AI:



    我丢,这 AI 吃枪药了吧。


    不过他骂的也不无道理,安心做个平庸的前端又怎么样呢?比起很多职业来说,坐在电脑前敲敲你喜欢的代码,当个快乐的小前端,拿个 10-20k 的薪资,不够过日子的嘛?想想土木老哥在烈日下的样子?



    我对于平庸人生的看法,把注意力转移到自己的生活中,有一个可以坚持热爱的爱好(比如我自己就喜欢踢足球和健身)。做一个自信阳光的小骚年,不是也很不错吗?


    不要高杠杆买房,不要负债太多,保持一定的积蓄习惯,注意资产的合理配置。你肯定能比一般职业的人过得更好,欲望才是万恶之源。


    当然,这只是比较悲观的想法,如果你有一颗上进的心,拼到个资深工程师,有点管理能力的话,再争取个前端小 leader 当当,过上小资点的生活也没问题。


    我的意思是,人生短短几十年,职业不是生活的全部。假设你全心全意拼在工作上,到了 40 岁挣了一堆钱,落了一身的病。你觉得你真的快乐吗?如果钱是快乐的全部的话,李玟也不会得抑郁症,张朝阳也不会因为抑郁放弃公司管理跑去修行了。


    总结


    前端确实天花板比较低,不过那又咋样呢?最终能成为 VP 的人也没几个,如果你从小就就是天之骄子,目标是星辰大海,那你考上 985 的计算机系应该没什么问题,在校招的时候就果断选后端吧,确实有几率爬的更高点,但是付出相应的代价也是必要的(后端头发平均值明显低于前端)。


    屏幕截图 2023-07-29 052610.jpg


    否则,你就做个快乐的小前端,也比其他大多数职业过得舒服。


    作者:ssh_晨曦时梦见兮
    来源:juejin.cn/post/7261807670746513463
    收起阅读 »