砖家
# CSS单边颜色渐变倒计时圆环实现 工作中需要实现尾部红色警告的一个圆环倒计时，网上搜了一圈，同时满足`css`，`单边颜色渐变`，`圆形`的案例还真没有，光`单边颜色渐变`的案例都几乎没有。那我自己实现一个吧，不做不知道，一做吓一跳，竟然花了好几个小时才完成，特此记录一下，有缘人拿去。 直接上结果图 ## 1. 拆解 这个进度条可以拆解成两部分 1. 画一个三边绿色，一边渐变的圆环 2. 灰色进度条按进度覆盖在彩色的圆环上面。 ## 2. 单边渐变的圆环 思考下思路：一个盒子，三个边是绿色，一个边是绿色到红色的渐变色，然后用`border-radius`弯曲成一个圆。 哈哈，这么一想，好简单啊。 but，but，只有单边颜色渐变用`css`是没法实现的。吐血~，不信你去试试，去查查。 难点就在如何实现单边颜色渐变这里。 follow me~ ### 2.1 三边绿色，一边透明的圆环 这步非常简单 ``` *{ box-sizing: border-box; }...
# react-family框架兼容IE8的艰辛旅程 本着学习的目的，在[react-family](https://github.com/brickspert/react-family)框架基础上，做了最小的修改，使框架兼容了IE8浏览器。 预览地址：[https://brickspert.github.io/react-family-ie8/index.html](https://brickspert.github.io/react-family-ie8/index.html) 源码地址：[react-family-ie8](https://github.com/brickspert/react-family-ie8) 这是一个痛苦的过程，不过看到结果还是非常开心的。 下面就让我们开始吧。 第一部分，我们先修改开发坏境及开发配置文件~ 1. react降级 `npm install [email protected] [email protected] --save` 2. webpack降级到v1 备注：网上也有很多人说，webpack v3也能兼容IE8，但是我试了很长时间也没搞好。被迫降版本了，这里应该是我的问题。 `npm install [email protected] [email protected] --save-dev` 3. babel-loader降级 webpack 1.x 对应 babel-loader...
github: https://github.com/umijs/hox 别着急喷，我已经能想到你为什么会进来看这个文章了，当你看到这个题目的时候，你一定会有几连问： **基于 React Hooks 状态管理器的轮子太多了，你们再造一个有什么意思？** 我并不是针对某个轮子，我只想说现有所有的轮子都囿于 `redux` ， `unstated-next` 的思想，无非就是 `action` ， `dispatch` ， `reducer` ， `useStore` ， `Provider` ， `Context` 这些东西，在这些东西上做排列组合。概念一大堆，理解成本不低，用起来还都差不多。 **为什么你敢说你们是“下一代”？** hox 够简单，一个 API，几乎无学习成本。够好用，你会用 Hooks，就会用 hox。我想象不到比我们更简单，更好用的轮子怎么造出来？...
目前各大虚拟货币交易所都把理财模块放到了比较高的优先级，普通用户有闲币的情况下，也会选择购买一些理财产品，以博取一些收益。 但虚拟货币相较于法币，自身本来就有一定的理解成本，再叠加上理财产品的复杂规则，经常会把人绕晕。 今天这篇文章，我会用大白话讲解各种虚拟货币理财产品，让大家知道各种理财产品的原理。毕竟有一句话是这样的「**如果你不知道收益的来源是什么，那么你就是收益来源**」。 ## 1. 简单理财 这里的简单理财是指「理财规则非常简单，和法币原理一样，没有区块链知识也能懂」。 ### 1.1 savings 对于普通人，最简单的理财方式就是：**把钱存在银行，银行给我们利息，活期利息低一点，定期利息高一点**。 在存款理财的模式下，银行会用我们的存款去博取更高收益，比如：给企业贷款、房贷、购买债券等等。 虚拟货币 savings 理财和银行存款原理一样，交易所承担了银行的角色，我们把币存在交易所，交易所支付我们利息。 交易所会用我们的存款去博取更高收益，比如：杠杆放贷、POS 质押赚币等各种低风险途径。 这里需要注意的是，很多平台将这种理财产品叫做「余币宝」，会让我们以为是类似支付宝「余额宝」的理财产品，但其实底层原理完全不同。「余额宝」的收益是来源于货币基金，而「余币宝」的收益则来源于交易所的投资。 以下为 Binance 和 OKX 交易所关于该类型理财产品收益来源的说明。 ### 1.2 借贷 借贷类型的产品，也是我们很好的理解的最传统的赚钱方式：「私人借贷，我把钱借给你，你给我利息」。 在虚拟货币市场上，很多用户想借钱加杠杆，这时候如果我们有闲钱，就可以约定利息，借给他们。当然这其中需要交易所做中介，保证借钱的人能按时还钱，所以交易所也会在中间抽取一定的手续费。 以下为...
Telegram 是全球顶流的社交软件，目前其提供了机器人 bot 和 mini app，可以非常方便的开发三方服务。 本文通过实现一个 TodoList 服务，以跑通完整的开发流程。 ## 环境准备 建议使用 Test 环境开发，限制条件会少很多。如何打开 Test 环境，参考[官方文档](https://core.telegram.org/bots/webapps#testing-mini-apps)，比较简单。 以 MacOS 版本为例： 1. 点击 10 下设置按钮，打开 Debug 面板 2. 开启 Debug 模式 3....
前段时间社区上大肆讨论「前端已死」，各种唱衰前端的言论此起彼伏，真是闻者落泪，听者伤心。 最近又听说某大厂取消大前端部门，前端被拆分到各个业务组。很多前端高 P 或离职，或被裁，或转后端。 这是前端的落日？ 今天就瞎聊聊，聊到哪算哪。 ## 前端技术发展趋于稳定 过去前端最被开发者诟病的是发展太快了，三天不学前端就跟不上了。 在我个人的前端经历中，技术栈从 Jquery 到 Angular，再到 React，前端技术快速切换，同时配套的前端研发体系也在不断推倒重建。 仅仅 React，从 V14 到 V15，再到 V16，一路快速迭代，每一个版本都有质的飞跃。尤其是 V16.8 hooks 出来之后，各种生态工具又得重建。 但最近几年，前端技术发展似乎慢了下来，React 16.8 版本还是 19 年发布的，距离现在已经四年多时间了，在这四年多时间内，React 虽然发布了 V17、V18，但并没有什么质的提升。对于我而言，只要能用...
 > 当我躺在核磁共振机器里，就像科幻电影中的冷冻仓，我希望自己被封印在里面，睡个几百年。 我并没有写年终总结的习惯，以前也从来没写过。 一来是因为我总是觉得农历新年才是一年的开始，另外就是觉得给自己定新年目标也是一定完不成的~ 今年有点例外，我想写点东西，总结下 2022 年，让它赶紧过去。Never see you 2022~ ## 1. 死亡 十二月的某个周日晚上，我正在快乐的玩手机玩电脑，慢慢的发现胳膊没有力气，拿不动手机了，手指也几乎打不出来字了。大约 10 分钟之后，全身已经没有力气了，从椅子上站起来都吃力。 然后就喊我爸爸开车带我去医院急诊，住院了一星期。 当时的感受就像一只充满气的气球，被戳了一个大口子，气在飞快的跑，气球越来越软，但气球没有任何办法。 过去 30 年，我的身体一直很健康，完全没有任何征兆。不夸张的说，我当时觉得自己要完蛋了，甚至和我老婆交代了一些事情。 这件事情对我的影响非常大，我希望 2022 年赶快过去，走好不送。 经历过这件事情之后，想和大家分享一些我的想法。 ### 1.1 及时享乐 上帝给了我们几十年的健康时光，我们碌碌无为。...
> 枪炮一响，黄金万两。故障一出，一年白干。 ## 1. 背景  海恩法则指出：每一起严重事故的背后，必然有 29 次轻微事故和 300 起未遂先兆以及 1000 起事故隐患。 在日常开发工作中，即使我们什么安全措施也不做，好像也基本不会碰到特别严重的线上故障。大部分都是一些小的线上问题，比如样式错乱、文本错误、次按钮不能点击等等。这些问题发现之后，修一下，好像也就过去了，毕竟影响面很小。 但殊不知严重的故障往往就隐藏在这一起一起小的隐患中。 如果我问你：「你负责的系统今年会出现严重事故吗？」 应该没有人敢 100% 保证吧？可能我们会说「有概率，但概率很小」 根据墨菲定律：**凡事只要有可能会出错，那就一定会出错。** 假如每个系统每年有千分之一的可能性出现严重线上故障，那 1000 个系统出现一次线上故障的概率就是 100% 了。 这个故障有多严重，资损多少，影响用户面有多广，谁也没法预测。 我们每个人都坐在炸弹上，什么时候爆炸，威力有多大，谁也不知道，有可能直接把我们崩回家，也可能直接把公司炸没了。 这不，2021 年 2...
> 本篇文章是 B 站视频《前端工程师个人的价值》的文字版，欢迎大家直接去 B 站观看视频，体验更佳。B 站搜索「前端技术砖家」，关注不迷路。 > >  最近脉脉上这张图片在前端圈子中火了起来。这个故事中“毫无人性”的评委在晋升中对前端同学提出了两个置疑点： 1. 业务方向是产品经理决定的，即使前端高质量高效率的完成了前端需求，也不能左右业务结果，那“业务的价值和你有什么关系”？ 2. 前端还原页面，属于前端基本功，难度并不高，换一个人也能做，那“你的价值在哪里”？ 这两个问题是 PUA 吗？有解吗？ **我觉得这个问题有解，并且是前端晋升路上必须想明白的事情：你个人的竞争力在哪里？** 举个大部分前端工程师都明白的案例： 有一个项目，今年整体目标是营收达到一亿元。到年底要评绩效了，这时候前端同学有两种说法： 1. 如果项目目标达成了，那么前端同学会说：按时保质完成业务需求，帮助 XX 项目达成一亿元营收目标，为公司带来了很大价值，应该给我打个好绩效。 2. 如果项目目标没达成，那么前端同学会说：我按时保质完成了业务需求，页面开发的很快，还原度也很高，应该给我打个好绩效。至于业务结果，我们也决定不了。 通过以上案例，其实可以看出，前端开发能控制的部分，就是 “**按时保质完成业务需求**”，其它的部分和前端的关系并不大。所以一般公司给前端打绩效是这样打的： |...
> 如果你对 React 18 还不熟悉，欢迎阅读之前的文章《[React 18 全览](https://github.com/brickspert/blog/issues/48)》 最近 React 发布了 V19 RC 版本，按照惯例，我们对 React 19 的新特性进行一次深度的体验学习，以便尽快上手新特性。 这篇文章，我会通过丰富的示例，演示 React 19 的新特性，以及相较于老版本的差异。同时会附上自己对部分新特性的评价，如有不对，烦请指正。 **本文所有示例代码可以在这里查看：**[https://codesandbox.io/p/sandbox/react19-demo-lmygpv](https://codesandbox.io/p/sandbox/react19-demo-lmygpv) React 19 的最重要改动，是新增了几个 Hook，均是针对 form 和异步网络请求通用能力的封装。有点类似 react-query 的 [useQuery](https://tanstack.com/query/latest/docs/framework/react/overview)，或者...