亚马逊云科技总是在不断重构，以推动创新，而今年 re:Invent 的主角毫无疑问是生成式 AI。这从亚马逊云科技副总裁、首席布道师 Jeff Barr 在 re:Invent 2023 之前就迫不及待地写了一篇关于 PartyRock 的体验试玩教程即可窥见一斑。事实也确实如此。在 Las Vegas，不管是个人开发者，还是企业架构师，亦或是大学教授，无论是来自传统行业还是创新公司，人人都在谈论亚马逊云科技通过重构生成式 AI 而即将到来的创新。首次发布亚马逊云科技生成式 AI 技术堆栈在 re:Invent 2023 最新发布中，亚马逊云科技首次发布了生成式 AI 技术堆栈，包括底层负责训练和推理的基础设施层，中间微调模型需求的工具服务层，以及上层构建生成式AI应用层三个重要层级。通过对这三个层级的不断重构，亚马逊云科技能够为用户提供更具性价比和安全性的技术与服务。Adam Selipsky 发布亚马逊云科技生成式 AI 技术堆栈“我们独特的生成式人工智能堆栈为客户提供了比其他云更大的优势。”对此，亚马逊云科技CEO Adam Selipsky 表示，“并非所有竞争对手都选择在每一层进行创新”。自研+合作，基础设施层的持续创新生成式 AI 并不能单独创造价值，它需要硬件的支持。高性价比的基础设施是生成式 AI 应用构建的关键。Adam Selipsky 曾在采访中强调了在这一领 ...继续阅读 (68)

前言一年一度的亚马逊云科技的 re:Invent 可谓是全球云计算、科技圈的狂欢，每次都能带来一些最前沿的方向标，这次也不例外。在看完一些 keynote 和介绍之后，我也去亲自体验了一些最近发布的内容。其中让我感受最深刻的无疑是 PartyRock 了。PartyRock 真的算是做到了：能让任何人快速的构建一个属于自己的 AI 应用。当然，本文最后也分享我对于其他在 re:Invent 上提到的一些看法和思考。那么，不多说，先来看看今天的主角PartyRock。PartyRock 简介Everyone can build AI apps.这句话是 PartyRock 首页的一句话，它就是 PartyRock 的最好的功能概括了。去年到今年 AI 相关的应用层出不穷，GEN AI 已经太多了。到目前为止，其实我本人已经有点审美疲劳了，因为该看的都看的差不多了，所以说实话体验之前，我并没有对 PartyRock 带有很大期望，最多是体验完了之后厚脸皮来一句 “不过如此”。结果体验完成之后发现我说的是：使用体验下面我就用我自己制作的两个应用和一个官方的应用来说明一下它的使用体验。构建第一个应用 - 选词填空制作的过程其实非常简单，几乎 10 分钟就搞定了。步骤 1点击创建应用之后，在它给出的输入框里面输入你想要做的应用的功能描述，比如说，我最近在学英语，我第一想法就是做个选词填空的应 ...继续阅读 (76)

欢迎关注我的公众号：前端侦探在平时开发中，有时候会碰到下面这种“弧形”样式，主要分为“内凹”和“外凸”两种类型，如下该如何实现呢？或者想一下，有哪些 CSS 属性和“弧形”有关？下面介绍 3 种方式，一起看看吧一、border-radius通常情况下，我们用border-radius都是这样div{ border-radius: 20px; }这样表示 4 个角都是圆角，并且是标准的正圆其实，border-radius还支持斜杠的写法，比如div{ border-radius: 20px / 10px; }这表示，圆角是一个x半径为20px，y半径为10px的椭圆，如下放大来看，其实是这样的进一步，我们将x半径设置成50%，这样就能得到一个完整的弧形了div{ border-radius: 50% / 20px; }效果如下这样就得到了“外凸”的弧形了，是不是很容易？至于“内凹”弧形，单纯的border-radius表示无能为力，可以看接下来的方式二、伪元素+border-radius这个其实大多数同学都能想到的方式，一个矩形和一个椭圆组合起来，不就是一个弧形卡片了吗？原理非常简单用代码实现就是div{ position: relative; } div::after{ content: ''; position: absolute; width: 10 ...继续阅读 (98)

如图所示，这是一个很炫酷的霓虹灯文字效果且背景炫酷，就像很多个灯光闪烁着不同的颜色。本次文章将解析如何用CSS代码实现这个效果，根据上面的动图分析出我们要实现的几个主要功能点：整个背景中有平均分布的小点衬托中心区域文字闪烁效果如同霓虹灯一样文字背景呈多个平均分布的亮点背景亮点的颜色整体呈现渐变色变化1. 默认背景色首先我们来看看如何通过CSS创建一个多个小点背景效果。1.1 设置根元素变量在:root伪类中，定义了一系列的CSS变量，这些变量在整个文档中都是可用的。例如，--rotate用于控制旋转动画的角度，而--radius、--bg、--width等用于定义背景和形状的基本属性。:root { --rotate: 0deg; --radius: 12; --bg: hsl(210 30% 70% / 0.15); --width: 80; --height: 80; --border: 0; --blur: 10; --alpha: 0; font-family: 'Montserrat', sans-serif; }1.2 设计背景样式在body标签中设置了背景的基础样式，使用了径向渐变（radial-gradient）来创建一种特殊的纹理效果。配合background-size和background-position即可完成默认的背景效 ...继续阅读 (117)

今天分享一个由@aemkei等大佬制作的只有348个字节的吃豆人小游戏，如上面动图所示，基本实现了游戏的主要功能，来看看大佬们是如何通过这么短的代码实现整个游戏的效果吧。Github仓库地址：https://github.com/codegolf/pac-man整个游戏使用键盘控制移动吃豆人。以下是游戏界面布局，没有其他的DOM元素，仅通过纯字符实现整个游戏界面和操作。############# # # .# # = Wall # ### # ###.# # # X .#.# X = Ghost # # # ###.#.# # # # o #.#.# o = Player # # ### #.#.# # # ......#.# . = Gold # ### #.###.# #.....#.....# #############整体源代码：<7?D:10-D).toString(2) +3;l=l.split(""),setInterval("if(x^X)for(h =i=l[x]=2,l[x+=d=2%k||9&l;[x+(o=k%2||~-k*14 )]?9&l;[x+d]?0:d:o]=4,l[X]&=7,b=D%4-2,b=b++ %2||b*14,9&l;[X+b]?D++:X+=b,l[ ...继续阅读 (73)

亚马逊 CTO Werner Vogels 博士今年在 re:Invent 上的主题演讲，以一种特殊的角度将亚马逊作为一个最佳实践，向我们展示了如何设计出成本优先的技术架构。“在商业活动中识别最有盈利潜力的领域，并以此为中心来构建和优化整个业务架构。” 这句话其实在某种程度上也昭示了亚马逊的技术哲学，即技术总是围绕商业来构建的，它的目的也是让商业运转得更具效率。这样就不难看出为什么是亚马逊首先将云技术普及给了用户，并且它一直代表了云技术领域最先进的思潮。商业决策驱动了技术决策，这是 Werner Vogels 博士后面展开的重点。一种被称为节制架构（THE FRUGAL ARCHITECT）的设计思想贯穿了这部分内容的始终，而在我看来这也何尝不是一种 Amazon Way。始终关注成本的设计思想根据这一思想，在架构设计之初你就应该考虑成本的地位。它不应该是一种功能需求，而应当作为一种指导思想。一系列的权衡会在架构设计中出现，当然需要记住的是，你的每一个权衡后的决策都会产生成本。亚马逊云科技的很多产品其实就是根据这一思想设计的，比如 Lambda，Firecracker 等等。它们的存在，让你的系统更加灵活且成本可控。如果你遵循成本至上的原则，可以很容易地与这些产品契合，并设计出适合你产品的技术架构。可测量的成本实现成本可控还有一个很重要的前提，你必须知道你付出了多少成本。 Wern ...继续阅读 (64)

热议话题 🔥Advent of Code 2023Advent of Code 是一年一度的编程谜题活动，里面包含着各种技能组合和技能水平的问题，参与者可以使用自己任何擅长喜欢的编程语言来解谜，谜题背后是精心构建的故事情节，让参与者挑战的同时，也享受到娱乐放松。Advent of Code 在每年的圣诞节前25天开始，每天的题目分为两部分，第二部分会更难一些。完成一部分获得一颗星🌟，25天一共50颗星。最后一天只有一个问题，如果已经解决了前面的49个问题，就会自动获得最后一颗星🌟。所以第25天的通过人数也代表25天问题都解决的人数。题目难度循序渐进，从第1天到第25天递增，谜底结果通常是一个数值。如果在解题过程中遇到困难或有疑问，Advent of Code 内有一个在线论坛，可以去看看其他大佬的解法；又或是完成了当天的谜题还觉得不够过瘾，也可以尝试体验一下 Advent of Code 历年的题目。参与 Advent of Code 没有太高的要求，只要具备一些编程知识和解决问题的技能就能参与其中，也不需要有一台高性能的计算机，因为每个问题都有一个解决方案，能在相对较短的时间完成。喜欢挑战自己和热爱编程的朋友，可以一起参与到 Advent of Code 的打卡中，度过这个有仪式感的趣味编程之旅！科技资讯 🌍谷歌地图 UI 设计师谈最近的 UI 更新作者是 15 年前谷歌地图 U ...继续阅读 (67)

亲爱的开发小伙伴们：我是 SegmentFault 思否的社区管理员 思否小姐姐~当你看到这篇文章时，岁末临近，2023 年即将呼啸而过，马上迈入 2024 年的新篇章。对于所有人来说，2023 年都是一次前所未有的经历，2023 年是 AI 领域发展迅猛的一年，各种创新技术和应用不断涌现，为我们的生活和工作带来了巨大的改变。而这一年的特殊经历，也值得我们认真回顾，当生活的节奏发生了变化时，我们是怎么应对挑战，如何在卷与被卷中躺平？过往皆为序章，未来皆可期盼，年度回顾的征文活动如期进行，社区的小伙伴们已经带好小板凳，坐等你的分享～如何参与？一、内容规则：写下属于你的 2023 年故事：标题不限，文体不限，语言不限，字数不少于 500，自由发挥。写作方向参考：年度遇到过最大的 Bug往日不可追，来日犹可为，未放弃梦想的一年过去一年在某个领域有到不错的成长，欢迎分享，我们也想共同进步一直热爱并关注的编程语言排行榜中你的爱还一直“遥遥领先”吗？2024 年，依然要立个 flag一直在坚持做……事情每个值得记录的日子……规则提前说：文章要求原创，内容符合思否社区的内容标准和规范，不得有打广告、加二维码引流和凑字数行为。文章不能只贴代码，否则无法参与评奖。如果发现参与活动的文章是非原创文章，会取消该作者获奖资格。 注：全文超过 50% 与他人创作的内容重复都视为非原创（包括直接 抄袭转载 、 ...继续阅读 (86)

前言    亚马逊云科技在2023 re:Invent全球大会上宣布推出 Amazon Q， 在主题演讲中，亚马逊云科技 CEO Adam Selipsky 将其描述为能够“轻松聊天、生成内容和采取行动”，“一种新型的生成式人工智能助手，旨在工作中为你提供帮助”。 Selipsky说，考虑到这个聊天机器人的对话特性，Q这个名字来源于“问题”（question）这个词。这也是对詹姆斯·邦德小说中角色Q和《星际迷航》中强大人物的模仿。Amazon Q专注于工作场所，而不是面向消费者。它旨在帮助员工完成日常任务，例如总结文档、填写内部文件以及回答有关公司政策的问题。Amazon Q将与其他企业聊天机器人竞争，包括微软Copilot、谷歌Duet AI和ChatGPT Enterprise。看介绍和用途，Amazon Q 想做企业用户的生意，个人用户还是不挣钱啊，据说微软他们那用户量高达150万的AI编程工具GitHub Copilot，平均每个月在每个用户身上都要倒贴20美元，最高能达80美元。亚马逊从企业用户着手，思路还是不错滴，下面就好好体验一下，看看这个"Q"能不能重塑我的工作方式😂一、Amazon Q 聊天功能初体验1. 如何体验 Amazon Q输入https://aws.amazon.com/q，然后点击Get started with ...继续阅读 (74)

11 月 26 日，百度智能云千帆大模型平台黑客马拉松在北京顺利落下帷幕。本次黑客马拉松由百度智能云主办，SegmentFault 思否承办，以“生成未来，为我所用”为主题，鼓励开发者从提升自身工作效率和丰富娱乐生活体验出发，利用百度智能云千帆大模型平台构建创新应用，让生成式 AI 真正“为我所用”，解决实际问题。大赛自启动以来，吸引了来自海内外 40 余个城市地区上千位开发者报名参赛，33 支队伍百余名开发者入围决赛。他们中不仅有来自伦敦政治经济学院、华盛顿大学、谢菲尔德大学、清华大学、北京大学、南京大学等海内外知名高校的学生，也有来自微软、联想、京东、抖音、网易游戏等海内外知名企业，以及中科院计算所等学术机构的行业精英。经过 36 小时的极限编程，诞生了 30 个充满想象力的产品 Demo。本次路演特别邀请到了百度智能云云计算 AIPaaS 技术总架构师吴健民，百度智能云应用平台产品研发总经理娄双双，SegmentFault 思否 CEO、Answer 联合创始人高阳，开源社理事长、微软数据工厂首席产品经理陈阳担任评委。百度智能云千帆社区、真格基金、天鹰资本、软通动力、英特尔、开源社、Datawhale、HyperAI超神经、开源中国 oschina、创业邦等业界伙伴也为本次活动提供了广泛支持。经过激烈角逐，“剑来”团队打造的《云端回响 Cloud Echoes》赢得一等奖；“ ...继续阅读 (61)

有问必答摘要本文将介绍如何使用Go语言的并发原语来构建一个简单的高并发秒杀系统。我们将使用Go语言的原生库和一些常见的技术手段，包括互斥锁、通道、计数器等，来解决并发访问和数据一致性的问题。本文只是一个简单的示例，重点是Go语言并发原语在业务场景中的应用。在实际应用中，还需要考虑数据库事务、分布式锁、限流等问题。我之前也写过一篇文章，附在了文末。1. 引言秒杀系统是一种高并发场景下的特殊应用，需要处理大量的并发请求和保证数据的一致性。本文将介绍如何使用Go语言的并发原语来构建一个高并发的秒杀系统，以满足用户的需求并保证系统的稳定性。2. 架构设计我们的秒杀系统将采用经典的客户端-服务器架构。客户端发送秒杀请求，服务器处理请求并更新库存。为了保证系统的高并发性能，我们将使用以下技术和原语：互斥锁（sync.Mutex）：用于保护共享资源的并发访问。通道（channel）：用于协程间的通讯。计数器（sync.WaitGroup）：用于等待所有请求完成。3. 实现步骤下面是我们实现秒杀系统的关键步骤：3.1 初始化库存在系统启动时，我们需要初始化商品的库存。var stock = 100 // 商品库存 var mu sync.Mutex3.2 处理秒杀请求当客户端发送秒杀请求时，服务器需要处理请求并更新库存。func handleRequest(user int) { defe ...继续阅读 (74)

🔗 活动SegmentFault 思否写作挑战赛：写文章领取技术图书📙 获奖名单作者博客🎁 礼品Meathill值得关注的 CSS 新特性《机器学习》夕水这么有趣的ts类型，你确定不来看看?《机器学习》AwbeciChatGPT-Next.js+SpringBoot集成通义千问《从程序员到架构师》南城FE一行代码搞定禁用web开发者工具《从程序员到架构师》月弦笙音【探索】Web Worker在Web上实现多线程处理的潜力《从程序员到架构师》查拉图斯特拉如是基于websocket实现im聊天《Java 面向对象数据结构完全学习教程》小隐【2023年最新】独家放送，Springboot3与SpringCloudAlibaba集成指南《Java 面向对象数据结构完全学习教程》朱季谦Dubbo2.7的Dubbo SPI实现原理细节《Java 面向对象数据结构完全学习教程》王中阳GoGolang面试题从浅入深高频必刷「2023版」《Go 语言高级开发与实战》陈明勇一文熟悉 Go 的基础语法和基本数据类型《Go 语言高级开发与实战》spaceme最实用的 go 语言笔记（基础篇）《Go 语言高级开发与实战》小白要生发借助AI像Redis作者那样，用Go实现一个聊天程序《Go 语言高级开发与实战》良猿Go语言入门03—数组和切片《Go 语言高级开发与实战》恭喜以上小伙伴～👀中奖的小伙伴记得填写地 ...继续阅读 (70)

最近，相信大家一定被这么个动效给刷屏了：以至于，基于这个效果的二次创作层出不穷，眼花缭乱。基于跨窗口通信的弹弹球：基于跨窗口通信的 Flippy Bird：我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动，效果如下：代码不多，核心代码 200 行，感兴趣的可以戳这里：Github - broadcastAnimation当然，本文的核心不是去一一剖析上面的效果具体的实现方式，而是讲讲其中比较关键的一个技术点：而是应用如何在多窗口下进行互相通信。所谓多窗口下进行互相通信，是指在浏览器中，不同窗口（包括不同标签页、不同浏览器窗口甚至不同浏览器实例）之间进行数据传输和通信的能力。当然，本文我们探讨的是纯前端的跨 Tab 页面通信，在非纯前端的方式下，我们可以借助诸如 Web Socket 等方式，藉由后端这个中间载体，进行跨页面通信。因此，本文我们更多的重心将放在，如何基于纯前端技术，实现多窗口下进行互相通信。为了实现跨窗口通信，它应该需要具备以下能力：数据传输能力：能够将数据从一个窗口发送到另一个窗口，以及接收来自其他窗口的数据。实时性：能够实现实时或近实时的数据传输，以便及时更新不同窗口的内容。安全性：确保通信过程中的数据安全，防止恶意窃取或篡改通信数据。当然，这个不是本文讨论的重点，但是是实际应用中不应该忽视的一个重点。方式一：Broadcast Channel()Broad ...继续阅读 (115)

在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布局。不要重复自己通过grid-template-columns和grid-template-rows属性，我们可以显式地设置网格中的行数和列数，并指定它们的大小。如果我们希望多行和/或多列的大小相同，这可能会变得重复。repeat()函数可以将我们从重复中解救出来。举个例子，我们可能会这么写：grid-template-columns: 1fr 1fr 1fr 1fr 1fr;使用repeat()，可以这么写：grid-template-columns: repeat(5, 1fr);在上面的例子中，repeat()函数可以让我们指定需要多少列（5列），以及列的大小（1fr，即可用空间的几分之一）。这样，我们的代码就会更高效、更易读。这只是一个简单的例子。下面我们将看到，我们还可以用repeat()函数做很多事情。下面的截图显示了上述代码的一个简单演示。一篇包含十个 div 的文章分为五列。repeat函数的的选项实际上，我们可以在repeat()的括号内做很多事情。它接收两个参数，中间用逗号隔开。第一个参数代表"计数"，第二个参数代表"轨道"：repeat(,)。(轨道是一列或一行的通用名称）。第一个参数可以是以下三种之一：数 ...继续阅读 (106)

你好呀，我是歪歪。关于 RPC 调用，大家肯定都是比较熟悉的了，就是在微服务架构下解决系统间通信问题的一个玩意。其中的典型代表之一就是 Dubbo 了：在微服务架构下，我们针对某个 RPC 接口，我们一般有两个角色。服务消费者 (Dubbo Consumer)，发起业务调用或 RPC 通信的 Dubbo 进程服务提供者 (Dubbo Provider)，接收业务调用或 RPC 通信的 Dubbo 进程假设我是服务消费者，想要调用某个服务，只要我们链接到的是同一个服务注册中心，那么找对应服务要到 API 包对应的 Maven 坐标，引入到项目中，就类似于这样的东西：org.apache.dubbodubbo-spring-boot-demo-interface${project.parent.version}那么对于这个 API 包中的接口，虽然我们没有具体的实现类，但是我们还是能像调用本地方法一样调用该服务提供的接口。这些都是常规的东西了，你肯定是门清。那我现在问你一个问题啊：我是服务消费者，我要调用一个服务提供者的 RPC 接口，但是我又不想引入它的 API 包，或者我根本就拉取不到它的 API 包，那么我应该怎么办？如果你要非给我说：这不可能，既然是要消费别人的接口，那么肯定要拿到 API 包才对，你不拿就是你偷懒。那我再给你举个歪师傅在实际开发过程中遇到的具体的例子：网关服务 ...继续阅读 (100)

大家好，我是煎鱼。前段时间遇到一个朋友，他跟我说他们在开发一个 Go 项目时，遇到了一个争议点，说来也好理解。WEB UI 端选择 GET、POST 类型时，程序是否要区分所传递的值（例如：Body），还是不管是什么类型都传。一派认为无所谓，反正都能传。又没限制。一派认为规范如此，不应该传。应该针对 HTTP POST 类型，使用 POST 请求的 body 来传递参数。在 GET 请求里使用 URI 来进行参数传递。看着似乎都有各自的道理，僵持不下。RFC7231 怎么说要看互联网协议的相关标准，必然是 RFC 了。首先看看RFC7231中的 4.3.1 小节是怎么说的。如下摘抄：A payload within a GET request message has no defined semantics; sending a payload body on a GET request might cause some existing implementations to reject the request.大概意思：在 GET 类型的请求里使用 body 是一个没有定义的语义。如果在 GET 请求的 body 里传递参数可能会被某些实现方拒绝该请求。也就是这个混着传的行为并不符合 RFC 规范，至少官方是不推荐不鼓励这样的使用方式。但并没有禁止这个行为。记住这个结论。接下来 ...继续阅读 (67)

今天进入kubernetes的运维部分（并不是运维kubernetes，而是运维应用），其实日常我们大部分使用kubernetes的功能就是以往运维的工作，现在云原生将运维和研发关系变得更紧密了。今天主要讲解Probe探针相关的功能，探针最实用的功能就是可以控制应用优雅上线。就绪探针举个例子，当我们的 service 关联了多个 Pod 的时候，其中一个 Pod 正在重启但还没达到可以对外提供服务的状态，这时候如果有流量进入。那这个请求肯定就会出现异常，从而导致问题，所以我们需要一个和kubernetes沟通的渠道，告诉它什么时候可以将流量放进来。比如如图所示的情况，红色Pod在未就绪的时候就不会有流量。使用就绪探针就可以达到类似的效果：livenessProbe: failureThreshold: 3 httpGet: path: /ping port: 8081 scheme: HTTP periodSeconds: 3 successThreshold: 1 timeoutSeconds: 1这个配置也很直接：配置一个 HTTP 的 ping 接口每三秒检测一次失败 3 次则认为检测失败成功一次就认为检测成功但没有配置就绪探针时，一旦 Pod 的Endpoint加入到 service 中(Pod 进 ...继续阅读 (65)

提到颜色，大家都能想到rgb颜色表示法，比如rgb(255,0,0)就表示红色，如果希望有透明度，可以用rgba来表示，比如rgba(255,0,0,.5)就表示透明度为50%的红色。除了这些，你还知道哪些？还有哪些新的写法，兼容性如何？今天一起来聊聊rgb和rgba的发展史一、IE8 之前（2012前）我最早工作是需要兼容IE6的，所以对这块还算熟悉。在这个时代，只有rgb，没有rgba，也就是这种最原始的写法rgb(255,0,0)因此如果要实现透明度颜色，要么整体透明，要么切图，是一件非常头疼的事兼容性如下，全兼容二、IE9 ~ Safari 12（2019前）为了解决透明度的问题，从IE9开始支持rgba颜色表示法，这里的a就是alpha，也就是透明的意思rgba(255,0,0,.5)这个阶段应该是目前绝大多数前端开发都经历的时期，由于这段时期，JS框架发展迅猛，导致很多同学误以为CSS颜色就到此为止了，反正平时的开发也够用。需要注意的是，rgba这里的透明度是必须的，即使是1也要写上/*旧浏览器不支持*/ rgba(255,0,0) /*正确的写法*/ rgba(255,0,0,1)还有为啥是Safari 12呢？因为从Safari 12.1开始支持新的rgb颜色，并且是主流浏览器中支持最晚的。兼容性如下，IE9以上全兼容三、Safari 12.1 ~ 至今（2019 ...继续阅读 (66)

在React中，组件之间的通信是一个非常重要的话题。当我们构建复杂的应用程序时，经常需要不同的组件之间共享数据或者进行相互协作。React提供了几种方式来实现跨组件通信，下面我将详细其中几种通信方式，并提供实际的代码示例。使用 React Context基于 React Context 实现跨组件通信的一个常见用例是创建一个能够在不同组件间共享和触发行为的上下文。以下是一个简化的例子，展示了如何在 app.tsx 中触发其他组件（例如，一个弹窗组件）中的方法。1. 创建一个 Context首先，我们创建一个新的 Context。这个 Context 将包含我们想要在应用中共享的方法。import React, { createContext, useContext } from 'react'; // 创建 Context const MyContext = createContext({ togglePopup: () => {}, // 这是一个示例方法 });2. 创建一个 Context Provider接下来，创建一个提供者组件，它将使得在应用的不同部分都能够访问到 Context 中的值。export const MyProvider = ({ children }) => { const togglePopup = () => { // 这里实现弹窗 ...继续阅读 (105)

一年一度的亚马逊云科技 re:Invent 大会又将在美国拉斯维加斯拉开帷幕，从 11 月 27 日到 12 月 1 日的五天时间里，将有超 6 万人在拉斯维加斯云集。回顾过去十几年，云计算已经成为科技创新的底座，而亚马逊云科技 re:Invent 大会也成为了全球开发者看向未来的窗口和行业的风向标，代表着云计算领域最前沿的技术探索。2014 年 11 月的 re:Invent 大会上，亚马逊云科技重磅发布了 Amazon Aurora。作为 Amazon 团队研发的全新数据库引擎，Aurora 意为“新的黎明”。其不仅完全兼容 MySQL，更带来了性能的成倍提升和价格成本的大幅下降。2016 年 11 月的 re:Invent 大会上，亚马逊云科技发布了二十多个新功能，包括在 S3 对象存储中直接查询数据、将构建代码作为部署流水线的一部分、提供高性价比的虚拟专用服务器和通过 ETL 的方式大规模移动数据。而到了2018 年11 月，已经有超过 50 万的数据库迁移到亚马逊云科技。时间来到 2023 年 的 11 月，生成式 AI 已经成为了技术革新的下一波浪潮。无数技术人翘首以盼，期待着又一届 re:Invent 大会带来的全新技术风向标。今年我们广下英雄帖，邀请构建者们一同提笔畅想生成式 AI 与云碰撞的无限可能。无论你是初学乍练的技术萌新，还是深耕多年的领域大神，只要你乐于探 ...继续阅读 (97)

本文翻译自10 Must-Know Git Commands for Software Engineers，作者： Rabi Siddique， 略有删改。Git和GitHub是每个软件工程师必须知道的最基本的东西。这些工具是开发人员日常工作的组成部分，因为我们每天都与它们互动。熟练掌握Git不仅可以简化你的工作，还可以显著提高工作效率。在这篇博客文章中，我们将探索一组命令，可以大幅提升你的生产效率。随着你对这些命令变得更熟练，你将节省宝贵的时间，并成为一个更有效率的软件工程师。Git常用术语现在，在我们探索Git命令之前，让我们熟悉一些基本的Git术语。以帮助您更好地理解命令，避免在本博客的后面部分使用这些术语时产生困惑。HEAD在Git中，HEAD是一个特殊的指针/引用，它总是指向当前分支中的最新提交。当你进行一个新的提交时，HEAD向前移动指向那个新的提交。例如，如果你在main分支上进行了一次新的提交，HEAD现在会指向这个新提交，表明它是main分支中最近的一次提交。^Git中的^符号是浏览项目历史时间轴的一种方式。当你使用HEAD^时，它会引用你当前提交之前的提交。如果你在^后面加上一个数字，比如HEAD^2，它会引用你当前提交之前的第二个提交。简而言之，^符号允许您在项目历史中向后遍历，而数值允许您精确确定希望返回的提交数量。StagingStaging是你组装你想包 ...继续阅读 (76)

概念的东西，先简单过一下，留个印象，主要是文章后方的项目中的应用什么是批处理文件批处理文件是指文件后缀名是.bat或.cmd的文件批处理文件中可以去编写很多命令，用于给电脑自动执行触发条件就是双击这个.bat或.cmd文件 即会自动执行文件中的命令，从而实现我们想要的效果批量处理一些命令——即为：批处理文件就前端而言，我们常常会在vscode的终端去执行一些命令或者git的bash命令，基本一个意思若是对于批处理命令不太熟悉的，可以看看这篇命令的总结：https://zhuanlan.zhihu.com/p/54572985.bat和.cmd批处理文件有什么区别先有的.bat，后有的.cmd（历史发展问题）二者基本上是一样的就相当于word文档中的.doc和.docx的区别二者都可以在windows系统（古老的dos也行）直接运行的长相如下图：编写批处理文件的话，可以直接使用电脑自带的文本文档，写完以后，直接改文件后缀名即可。那么，批处理文件有哪些应用呢？举几个例子，请继续往下看...应用场景一：一键启动多个软件我们每天去上班，第一件事就要打开各种工作软件，少则五六个，多则十几个，比如：要分别双击去打开钉钉、飞书、微信、谷歌火狐Edge浏览器、等...双击操作要执行多次针对这种情况，我们就可以编写一个简单的.bat文件在开机以后，只要双击这个.bat，就会自动打开工作中需要使用的软 ...继续阅读 (71)

本文翻译自19 Practical ES6 Snippets to Solve Common JS Problems，作者： Madza， 略有删改。在实际工作中，开发者常面临一些需巧妙编程解决的挑战。有时几行代码就能迎刃而解。本文整理了一系列实用代码片段，助您轻松处理URL、DOM操作、事件处理、日期处理以及用户偏好设置等常见问题。这些精选代码片段均源自“30 seconds of code”——一个卓越的编程资源库。我强烈推荐您查阅其完整代码，以获得更多灵感。选择这些代码片段的首要准则是它们的实用性。希望您能在这里发现宝贵的资源，并将其应用于未来的项目中，以提升编程效率和质量。1.如何获取base URL？const getBaseURL = url => url.replace(/[?#].*$/, ''); getBaseURL('http://url.com/page?name=Adam&surname;=Smith'); // 'http://url.com/page'2.如何检查URL是否是绝对的？const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str); isAbsoluteURL('https://google.com'); // true isAbsoluteURL('ftp://www.mys ...继续阅读 (82)

2023 年末将至，几乎每个产业都在经历着集体转型—— AI 技术的发展带来了近乎全新的工作方式。微软Ignite 技术大会举办的目的，就在于展示那些为客户、合作伙伴及开发者研发的技术和产品进展，帮助他们充分感受微软技术所带来的价值，并助力他们重塑工作方式。在本年度即将收尾之际，AI 改变工作方式的潜力已经显现。以微软最新发布的《工作趋势指数报告（WTI）》为例：八个月前，微软推出 Microsoft 365 Copilot，以减少数字债务并提高生产力，从而让客户能够专注于手头工作。现在，每个人都想知道，Copilot 真的能够改变工作吗？又是怎样改变的？微软结合调查和实验的研究表明，Copilot 确实帮助用户提高了生产力：70% 的 Copilot 用户表示，他们的工作效率得到了提升；68%的用户表示，他们的工作质量提高了；68% 的用户表示 Copilot 有助于创意类工作的开展。总体而言，用户在特定任务（如搜索、写作和总结）上的效率提高了29%。错过会议时，Copilot 用户可以用比之前快近4 倍的速度了解会议内容。64%的用户表示，Copilot 帮助他们减少了处理电子邮件的时间。87%的用户表示，Copilot 让起草初稿变得更简单。75%的用户表示，Copilot "节约了我查找文件的时间"。77%的用户表示，一旦用上了Copilot，就很难再放下。今天，我们将有1 ...继续阅读 (94)

大家好，我卡颂。长期使用React的同学应该知道，React中存在两种组件：Class Component，类组件Function Component，函数组件既然提到类和函数，那么很自然的，我们会进一步思考：类组件和OOP（面向对象编程）有关系么？函数组件和FP（函数式编程）有关系么？毕竟，如果类组件和OOP有关，那么OOP中的思想（继承、封装、多态...）也能指导类组件的业务开发（函数组件与FP的关系同理）。换言之，我们可以直接用这些编程范式的最佳实践指导React项目开发。那么，函数组件和函数式编程究竟是什么关系呢？本文会围绕这个话题展开讲解。函数组件 和 函数式编程 有关系么？欢迎围观朋友圈、加入人类高质量前端交流群，带飞编程范式与DSL首先，我们应该明确，框架语法本质是一种DSL（领域相关语言），他是为了某个特定领域的开发量身定制的。比如，React作为一款针对view开发的DSL，虽然不同的view使用的框架不同，比如：对于web，框架为ReactDOM对于小程序，框架为Taro对于原生开发，字节内部有个叫React Lynx的框架但这些框架都大体遵循同一套DSL（React语法），这套DSL并不属于某一种编程范式，而应该被视为不同编程范式中，更符合view开发的语言特性的集合。所以，作为React DSL的一部分，函数组件可以体现OOP的思想，类组件也能体现FP的思想 ...继续阅读 (81)

https://www.bilibili.com/video/BV1Cz4y1c7Th/?aid=578747231&ci...;我们上线了 ONES.ai，当然我们用了公开的 LLM(AI)，目前我们最方便使用的就是公开的 LLM，其实是不是公开的 LLM 也不重要，在未来可预见的时间内，总会有一个最好的 LLM(AI) 让我们用。综合效果，性能，价格，选出那个最合适的，这不是什么难题。LLM(AI) 对我们这种应用方来说极其重要，它是应用中智能的灵魂。但它又没那么重要，随时可以被替换。这种感觉很诡异，会让所有应用都失焦，我们到底应该关注什么？我们的价值底线在哪里？对话式交互就可以完成所有任务吗？是否加了 AI 就万事大吉？就是领先？我们习惯了自己工作，习惯了和人类工作。就在过去几个月内，我们学会了使用 AI 写文章、画图，习惯了自己和 AI 工作。但是我们是否想过，我们准备好团队和 AI 一起工作了吗？目前我们习惯的 AI 工具，都是为个人服务，只关注一对一的 Prompt 和反馈，AI 是对一个人工作能力的增强。如果在一个原有很多人类工作的系统中引入 AI，我们怎么评价工作质量？人类之间的关系是否有变化？人类和 AI 之前的关系是什么？不同的人驱动的 AI 之间的关系是什么？如果这些问题不被清晰地定义和解决，我们就无法定义工作，无法定义工作中的同伴，甚至无法定义工作中的自己。 ...继续阅读 (69)

如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/- 4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如果页面是使用服务端选择则不需要这个初始化的JS。以下是本次实现的主要几点：整体文本布局呈正方形，包含需要高量的英文单词，但也包含一些不需要高亮的字母，仅是为了组合整个正方形布局时间的跳动不是以一分钟级别的进行，而是以英文5分钟级别跳动当前时间所需单词需要高亮不需要使用JS定时器，仅做初始化时间获取实现过程这个时钟的核心设计理念是利用英文文本显示时间，时钟面上的每个字母都对应一个特定的时间点，例如，TEN、FIVE、QUARTER、HALF等，用于表示分钟，而下方的ONE、TWO、THREE等则表示小时。这种设计使得时钟在视觉上独特且富有创意。界面布局首先对于HTML中的单词布局，主要目标是将每行的单词排列成相同的长度。如果某些单词长度不足，可以使用其他不需要的字符进行填充，像如下没有高亮的字符都是为了填充长度而增加的字符。摘取部分代码示例，只有在span标签内的才是真正有用会高亮的词：F O U RYF I V ET W OE I G H TCE L E V E NS E V E ...继续阅读 (75)

在本文中，我们将探讨 CSS 尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理，以及如何在每种情况下选择最佳尺寸单位，从而在各种媒体和设备尺寸下优化我们的布局。关于 CSS 尺寸单位CSS 提供了多种指定元素大小或长度的方式，其中一些更为直观。CSS 单位可分为四大类：绝对单位，比如cm和px字体相对单位，比如em和ch视口相对单位，比如vw和vmin容器相对单位，比如cqw和cqh我们将在本文中介绍每种 CSS 单位。在继续之前，先明确下后面频繁提到的有关概念：指定值、计算值和使用值。指定值是文档样式表中显示的 CSS 属性的值。计算值是浏览器应用级联规则、继承规则和属性定义后的属性值。使用值是浏览器进行最终调整和转换后的属性值。在此过程中，相对单位会转换为绝对单位。对于有屏幕的媒体（即有屏幕的设备），物理单位会转换为等效的像素单位。绝对单位绝对单位是特定的、与介质相关的测量值。对于纸张等物理介质，绝对 CSS 单位与相应的物理单位挂钩。对于屏幕来说，绝对单位为像素。一个像素大约是 1/96英寸。绝对单位包括in、cm、mm和Q，分别表示英寸、厘米、毫米和四分之一毫米。点（pt）和派卡（pc）也是绝对单位。它们起源于物理排版和桌面出版。每pt等于 1/72 英寸，而1pc等于 1/6 英寸。下表列出了绝对单位及其等价单位。单位名称等价于cm厘米1cm ≈ 37 ...继续阅读 (75)

大家好，我卡颂。最近Next.js v14发布，发布会的各种梗图刷爆了国外前端社区。Next.js的诸多特性（比如Server Action、App Router），都是在RSC（React Server Component）基础上衍生出的。从名字可以看出，RSC是React的特性。那么，该怎么理解RSC和Next.js的关系呢？欢迎围观朋友圈、加入人类高质量前端交流群，带飞React团队的宿愿对于前端框架的开发范式，有三个重要衡量因素：用户体验维护成本性能但是，通常很难做到三者兼顾（具体原因本文不细究，感兴趣的同学可以看data-fetching-with-react-server-components。简单来说，在前端开发中，IO瓶颈是影响内容渲染速度的重要因素（可以简单理解为，前端需要等待请求返回数据后，再根据数据渲染内容，这期间延迟的时间就是IO瓶颈）。但是，前端框架能够掌控的范围局限在前端，所以无法对IO瓶颈做出极致优化，只能在三个因素中做出取舍（比如考虑用户体验与性能时，代码维护成本就高）。React团队为了同时兼顾三者，需要对服务端拥有更多掌控。这就是RSC诞生的初衷。但是，大部分React的受众只是把React当作前端view库，并不会直接使用RSC相关功能，所以React团队选择和Next.js团队合作，落地RSC。此时我们发现，React有三类受众：普通前端开发 ...继续阅读 (66)

如图所示，这是一个文本阴影效果，阴影有多个颜色，鼠标悬停时文本阴影效果消失，文本回到正常的效果。让我们逐步分解代码，看看如何使用纯CSS实现这个效果的。基于以上动图可以分析出以下是本次实现的主要几个功能点：文本有多个颜色的阴影的效果文本有空心镂空的效果鼠标悬停时文本回到正常效果鼠标悬停时英文字体的粗细有变化实现过程多层颜色阴影文字的阴影用text-shadow实现，但是一般情况下我们都是只控制一个颜色，多个颜色应该怎么控制呢？其实该属性支持添加多个文本阴影层，以创建特殊的阴影效果。每个层各自控制水平偏移量、垂直偏移量、模糊半径和颜色定义。这里的多个颜色的阴影代码如下：text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0, 20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;文本镂空效果文字的镂空效果是用-webkit-text-stroke这个属性实现，-webkit-text-stroke是一个用于在网页中设置文本描边的 CSS 属性。它是WebKit浏览器引擎（如Chrome、Safari）的专有属性。这个属性允许开发者为文字添加一条描边线，使文字看起来更加突出和醒目。通过指定描边的宽度和颜色，可以控制描边的外观。语 ...继续阅读 (76)