查看详情

CSS 渐变字体实现

最近同事实现了 CSS 渐变的边框，于是乎自己想了下如何实现这个渐变字体。如果你有 SVG 经验的话，可能会非常快速的找到方法；当然如果你知道 canvas 肯定也是一个比较费力的解决方案，我们这里主要说下纯 CSS 的解决方案. 这里需要利用几个属性： background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面 -webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性，则使用 color 属性的值。 我们通过填充渐变背景，并且将于背景延伸到字体内容即可。 span { font-size: 72px; font-family: arial; background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 改变渐变方向 .flare { font-size: 72px; background: linear-gradient(#f12711, #f5af19); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 详情 »

查看详情

TP 50 小计

在新公司由于工程师会更多的参加到数据分析中来，因此有的术语，尤其英文环境下还是需要去了解和学习的。比如 TP 50. 自己才开始看到时候还有些差异，但是透过上下文是能猜出什么意思来的。 这个是亚马逊的测试童鞋发给我的，自己之前确实没有太多统计学的工作经验，因此记录一下。 Top percentitle, TP 是一个统计学术语，表示一组数据按照从小到大排序，并计算器累计百分位则某一百分位的值就为这百分位数。 常见的我们会听到 TP50, TP90, TP99。 比如 一组数据 [10s, 1000s, 100s, 2s] 表示请求时长。 排完序后 [2s, 10s, 100s, 1000s] TP 50 就是 Math.ceil(4 * 0.5) = 2 也就是第二位的值 10s； TP 90 就是 Math.ceil(4 * 0.9) = 4 也就是最后一个 1000s。 有的运算会更加精细， 详情 »

查看详情

外企半年 Review

这大概是第三篇关于最近工作的一些回顾。前两篇可以在这里阅读: 来 Tubi 工作的前前后后 外企试用期回忆录 上一篇是3月份写的，那个时候刚过完试用期，至今差不多小半年左右，自己也算是扎稳了脚跟。自己觉得在外企和相对国内大厂，在呆过这么长之后，可以再做一次对比（自己在阿里巴巴-大文娱2017和现任公司的对比，仅仅来自个人的体验）: 大厂 外企 工作时间 10-11 个小时(包含午餐) 8-9 个小时(包含午餐) 假期 5天年假 + 2 天路途假 15天年假 + 12 holiday 工作压力 比较累，感觉工作内容比较多 这个完全看自己，外企自由度很高，如果你想进一步，压力挺大，如果现状不错，压力相对轻松 工作难度 难度相对较小，可以找到的资源比较多 难度较大，找到的资源相对较小 福利 节假日礼物都有 节假日礼物都有 个人的工作认知变化 我觉得这九个月，一晃眼而过。我觉得这里面有一些和我之前工作认知上的差异： 美国的工程师很厉害。硬编码能力真的很强，比我们更加注意代码风格，而且文档和逻辑能力都很强， 详情 »

查看详情

HTML5 Video VideoPlaybackQuality 实现丢帧统计

在 Web 开发中，我们依赖于 Video 元素进行视频播放，相对 Android 或者 Windows 客户端程序，我们更加依赖浏览器测对 Video 元素提供了什么样的能力。 而如果我们需要对丢帧率进行统计，现在有了 VideoPlaybackQuality 来完成改功能。 目前主流浏览器都得到了支持 VideoPlaybackQuality 对象表示了一系列描述视频播放质量的指标。 可以通过 HTMLVideoElement.getVideoPlaybackQuality() 创建一个实例来获取。 里面包含下面的属性; .creationTime 一个用毫秒表示从开始页面浏览到对象创建的 DOMHighResTimeStamp 对象 .totalVideoFrames 表示相 HTMLVideoElement 自从创建起的已创建和丢弃帧数数量总和的值 .droppedVideoFrames 表示相关联的 HTMLVideoElement 自从创建起的已丢弃帧数数量值 .corruptedVideoFrames 一个表示相关联的 HTMLVideoElement 自从创建起的损坏帧数数量的值。一个损坏帧可能属于创建帧或丢弃帧 这样我们通过简单的 droppedVideoFrames / totalVideoFrames 来实现一个丢帧比例的计算，从而实现一个质量的保证。而 hls.js-fps-controller.ts 也是采用相关 API 来实现播控质量的控制。 checkFPSInterval( 详情 »

查看详情

HTML5 Video 元素 Ready State 分析

最近一直在做 MSE 相关的事情，机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究，于是写下这篇文章作为记录。 Video 元素维持内部几个非常重要的状态，这些都是只读的: paused 属性，你可以直接从 video elment 上读取，当你暂停视频的时候，Video 元素会讲这个属性值改为 true, 这里还有一些别的情况，我会在后面一篇文章分析 readyState 属性，当然你也可以从 Video 元素上读取，不同 readyState 意味着 video 的不同状态。 官方罗列了这些状态值: // video element ready state Enum const unsigned short HAVE_NOTHING = 0; const unsigned short HAVE_METADATA = 1; const unsigned short HAVE_CURRENT_DATA 详情 »

查看详情

对于 Web 开发者非常有用的 ADB 命令

虽然 adb 是 Android 开发的同学经常用到的命令行工具，但是对于做一些 Webview 页面的调试或者 Hybrid App 开发前端同学，可能有的时候也需要接触下，尤其进行关键日志的搜集和查找。这里罗列下自己经常会用到的，记录下。 罗列当前的包名，可以展示当前安装的包的。 adb shell cmd package list packages 进行某些包的日志输出，比如你可以换成自己的应用包名。 adb logcat --pid=`adb shell pidof -s xxx.your.pakcage.com` 显示某个包当前的一些系统信息，比如运行内存信息，关于 Android 的内存，你可以读这篇文章了解更加每个参数含义: https://developer.android.com/tools/dumpsys#meminfo adb shell dumpsys meminfo | find 'com.xxx. 详情 »

查看详情

居家办公初体验

由于公司至今保留了居家办公的申请许可，只要理由合理，就可以通过，比如回老家看孩子。 自己申请了一周居家办公和一天年假，前后差不多在老家就有 3(PTO + Weekend)+5+1 = 9 天左右。 关于工作 由于是研发类，所以确保电脑，网络就行。回到老家，Wi-Fi还是需要靠谱，流量却是贵。然后能够正常 VPN 提交代码就具备最基本的居家办公条件了。在老家由于父母和爷爷奶奶都是第一次看的新孙子或者曾孙，自然很兴奋，所以完全不用操心自己带孩子，所以自己还算可以全身心投入到工作中来，没有太影响效率？ 我们有日报机制，导致我们居家和在公司效率其实大差不差，毕竟每晚都要写，滑水难度过大。 其他优点 不用担心吃的问题。回到老家，一日三餐都有人做饭，而且周边有很多从小就一直吃到大的小餐馆，所以这次回去真是吃的太开心了， 晚上有时间和家里人一起吃饭看电视。毕竟在外面的打工人除了春节，在家时间很少，更别说一起吃饭看电视这些。所以算是让父母也有很好的相处机会。 小提示： 如果有喝咖啡习惯的，一定记得自己带三合一或者咖啡液，当然如果在县城或者市区，到不必担心这个。 最好还是有基本的桌子和椅子，这次回去才开始没办公椅，还好京东给力，第二天到了。 下次代办 这次居家办公给了自己很好的感受，下次回去自己会申请更长比如2周，然后再买一个大一点的办公桌， 详情 »

查看详情

立秋

持续一个多的高温天气，终于在台风过后开始趋于缓和；来北京这么多年，头一次觉得度过了特别闷热的暑假；年月会重复着，但是总有新的体验等着； 新的角色 其实对于父亲这个角色而言。于我现在的心里还是很远，因为可能 90 后计划生育的独特的环境，外加后来生活条件的整体改善，90后的成熟似乎都偏晚点。之前就有新闻说，很多年轻人至今会给自己买玩具。可能很多人成年人还是大孩子的状态；所以，我也是似乎处于懵懵懂懂就开始成为了父亲。 当然，我所理解的父亲，包含着本有的责任和义务。这是不可推卸的，如同你将他引导人间，你就有责任去关注未来的成长。这可能是非常浅层次的理解。如同，你所经历的人生，和这一辈人简直天差地别；而且你所脑海里构建的信息也与上一辈责任完全不一样。如同，我们现在或多或少受到部分西式观点的影响。更加尊重他作为独立人个体的存在价值和含义，不因为所谓血缘或者道德去绑定他的所作所为。 当然，孩子还不到一岁，和他要迈向未来熟数年的人生相比，简直沧海一粟；我和孩子妈经常说，肯定不会鸡娃，也没有那么多心思去鸡娃。完全随着他的个性；但是看看80后的孩子，他们的父母难道也曾一开始就想鸡娃。内卷的社会，必然慢慢内卷到孩子。 然而似乎有些变数，因为孩子真的少了很多。所以他们是幸运的，也相信20-30年后这一批人，可以真的去 Follow your heart. Not follow 详情 »

查看详情

周末 OnCall 需要支付工资么

最近在聊 OnCall(值班)机制时候，我们就讨论过，是否 OnCall 需要给参与的人员付工资呢？？ 其实据我之前的历史经验，OnCall 在中国的绝大多数公司是没有的。之前猿辅导的时候，推出了另外一种 OnCall 机制，就是到公司 OnCall 但是需要完成相应的 Ticket 任务; 这样会给予加班一天，你可以选择调休或者后面给予一定的假期工资的赋予； 其实 OnCall 有很多种，比如有的是，一定时间段，比如下班晚上 7:00-12:00; 更多的是周末，周末 OnCall 对于很多人实际上有影响的，比如，你由于需要盯着你的聊天软件，以及相应的邮件或者 Dashboard; 你并不能非常自由从事的周末计划；但是它的确不同于正常的工作，因为你并不需要完成相应代码需求或者测试需求； 自己好奇，在美国那边的 OnCall 劳动法律有什么规定么？毕竟我们知道可能欧洲或者美国的企业，对于劳动法的执行还是比国内好一点； 在这篇 Do You Get Paid for Being on 详情 »

查看详情

英雄联盟周报-2023-7-23

这一周主要玩了三把，平均输出了 2/9/6 的战绩；不如预期；感觉最大的问题是开局不顺利，容易崩盘；我觉得下一次，我应该先调整心态，即使前期不顺利，也要心怀目标，这是一个推塔游戏，补兵，推塔很重要；前期不能因为对方强势，就上头，而应该坚持自己的原则，按照自己的目标去运营游戏； 自己玩了三把，两把狐狸，一把奎桑提；奎桑提是第一次玩，非常不熟练，对位 ADC 容易被对方点着A；所以自己还需要再熟练一些近战英雄的拉扯； 详情 »