20240126 前端开发周报

8年前端，那就聊聊被裁的感悟吧；你还在使用websocket实现实时消息推送吗？；面试理想汽车，给我整懵了。。；尤雨溪再喷 React，这波我要反驳一下 – 转载；前端面试必考题：介绍项目和项目难点；发布 Vue3 让尤雨溪吃尽苦头：犯了3个错，每一个都需开发者警惕；pixi.js实战——《智慧路口（车辆轨迹实时追踪）》WebGL 2D 项目；相见恨晚的前端开发利器-PageSpy

1. 8年前端，那就聊聊被裁的感悟吧

   前端开发，8年工作经验，一共呆了2家公司，一个是做积分兑换的广告公司。这是一个让我成长并快乐的公司，并不是因为公司多好，而是遇到了一群快乐的朋友，直到现在还依旧联系着。 另一家是做电子签名的独角兽，我

2. 你还在使用websocket实现实时消息推送吗？

   本文主要描述在服务端单项对客户端的消息推送中，比websocket更好的技术选择，技术介绍和提供demo演示及demo代码

3. 面试理想汽车，给我整懵了。。

   理想汽车 今天看到一个帖子，挺有意思的。 先别急着骂草台班子。 像理想汽车这种情况，其实还挺常见的。 就是：面试官说出一个错误的结论，我们该咋办？ 比较好的做法还是先沟通确认清楚，看看大家是否针对的为

4. 尤雨溪再喷 React，这波我要反驳一下 – 转载

   这两天几个群都在传尤大喷 React 文档的截图，并且引起了热烈的讨论。然后就有人在问，是不是 React 真的那么坑。 作为一个 React 深度使用者，觉得不应该让新学 React 的朋友留下这样

5. 前端面试必考题：介绍项目和项目难点

   前端面试，以及任何技术岗位的面试，都离不开项目，这是必考题。简历中要写项目，面试时要聊项目。 基础知识、八股文、原理源码等这些，都是可以通过学习甚至背诵来补齐的。但项目不行，你再努力也弥补不了

6. 发布 Vue3 让尤雨溪吃尽苦头：犯了3个错，每一个都需开发者警惕

   作者 | Loraine Lawson译者 | 许学文策划 | 丁晓昀Vue 3 的发布让其创始人尤雨溪吃了不少苦头，也让他知道，未来再处理框架升级时需要在策略上做出重大改变。 在 2023 年 Vu

7. pixi.js实战——《智慧路口（车辆轨迹实时追踪）》WebGL 2D 项目

   智慧城市十字路口：车辆轨迹实时更新。支持航向角、变道、转弯、平滑移动、碰撞检测、线性补帧、debug模式等。

8. 相见恨晚的前端开发利器-PageSpy

   今天介绍一个非常有用的前端开发工具。 做前端开发的你，一定有过以下经历： 我这里是好的啊，你截个图给我看看 不会吧，你打开f12，控制台截个图给我看看 录个屏给我看看你是怎么操作的 … 还有，我们

9. 27K star这款开源可视利器帮你一眼看穿JSON

   今天我们推荐的推荐的项目帮你快速将JSON可视化，让你可以一眼看懂内容，目前在GitHub已超过27K Star，它就是：jsoncrack

10. Vue.js 3 项目开发：迈向现代化前端开发的必经之路

    文章浏览阅读1.3k次，点赞93次，收藏84次。Vue.js是一种用于构建用户界面的渐进式框架。它的核心库专注于视图层，易于与其他库或现有项目集成。Vue.js 3是Vue.js的最新稳定版本，它带来了许多新特性和性能优化，使得开发者能够更高效地构建前端应用。Vue.js 3对自定义指令API进行了改进，使其更加一致和易用。这使得开发者能够更方便地创建和使用自定义指令，从而提高项目的可扩展性。本书是一本实用性很强的Vue.js 3实战项目书。书中结合实际项目场景，构建了一个完整的企业级应用。

11. 阿里员工自曝：某多多的4轮面试都通过了，但到了谈薪资的环节，被HR为难

    HR 的为难 又是一期「排雷+心理按摩」，正在密谋年底跳槽的同学需要额外注意。 起源是我看到了这么一篇帖子分享： 一位目前应该还是在职的阿里巴巴的员工，前后花了一个多月的时间，顺利通过了某多多的 4

12. 前端实现汉堡菜单

    如果你曾经在浏览网页时看到三条线堆叠在一起，那么你就遇到了汉堡菜单。它是移动和响应式网页设计中使用的一种流行设计元素，用于创建干净、简约的界面。 单击时，这个小菜单会从屏幕的任一侧滑出，显示导航项或选

13. 一文学会用 react-spring 做弹簧动画

14. 深入剖析 Git 对象底层原理

    我们知道，Git 是一个内容寻址文件系统，其核心部分是一个键值对数据库。 当我们向 Git 仓库中插入任意类型的内容时，它会返回一个唯一的键。我们可以通过该键在任意时刻再次取回插入的内容。

15. 中高级前端工程师必备14种性能优化方案

    马上又是金三银四了，又要面对头疼的面试题了。经常容易被问到性能优化相关的问题，没准备的小伙伴进来看看吧，准备了的也可以考虑再熟悉熟悉呀，记忆更深刻一点。

16. 2024 前端趋势预测：React 不会被取代，AI 崛起，追求全栈宇宙

    作者丨Jamie Birch 译者 | 明知山 策划 | Tina 对于前端来说，2023 是非同寻常的一年。我们见证了争相抢占甚至是发明服务器端渲染（SSR）市场的热潮、AI 的不断进步、Web 渲

17. 2024年，开源AI潜力更大？

    开源（OS）正在驱动生成式 AI 的创新。得益于像 GitHub 和 Hugging Face 等学术研究平台，我们得以见证 AI 技术的蓬勃发展。

18. 重塑提交历史，让PR更优雅：Git Rebase的实践运用

    不知道大家有没有这个坏习惯：就是平常在开发项目时虽然会用 Git 做版本控制，但 commit message 都是乱写一通（反正也没人看），什么 Update code 、 Add some fil

19. 时隔5年重拾前端开发，却倒在了环境搭建上

20. 2024 年成为全栈 Web 开发人员需要掌握的技能

21. 前端金额运算精度丢失问题及解决方案

    前言 前端开发中难免会遇到价格和金额计算的需求，这类需求所要计算的数值大多数情况下是要求精确到小数点后到多少位。但是因为JS语言本身的缺陷，在处理浮点数的运算时会出现一些奇怪的问题，导致计算不精确。

22. 074：vue+mapbox 加载here地图（影像瓦片图 v2版）

    文章浏览阅读294次，点赞55次，收藏46次。本示例的目的是介绍演示如何在vue+mapbox中加载here地图的影像瓦片图 v2软件版本。

23. 如何应对Android面试官-> 玩转 ViewPager 懒加载

24. Vue 3 + Ts 钩子函数（hooks）的用法，以＜script setup lang=“ts“/＞语法糖形式 #reactive #ref

    文章浏览阅读125次，点赞4次，收藏5次。Vue 3 + Ts 钩子函数（hooks）的用法，以语法糖形式 #reactive #ref

25. 爆肝手写 · 一镜到底特效· 龙年大吉 【CSS3】

    前言 作为一名有多年开发经验的前端技术开发人员， 我最爱的还是用前端技术实现各种炫酷的特效，对于我来说，CSS3不仅仅是一种样式语言，更是一种表达情感、对美好事物追求的一种体现吧， 虽然每天要沉浸在代

26. 点击页面元素打开IDE源码的开源提效工具——支持webpack/vite/rspack/react/vue/SSR等众多场景

    code-inspector-plugin 插件点击页面元素，就能自动跳转 vscode 对应的源代码位置。支持 webpack/vite/rspack/vue/react/solid/preact等

27. 如何应对Android面试官->我用RecyclerView实现了探探的滑动效果

    大厂面试官带你轻松理解RecyclerView缓存复用原理，实战探探左滑一下，右滑一下，轻松应对面试官连环炮

28. 你和时间管理大师，就差一个开源工具「GitHub 热点速览」

    在这个快节奏的生活中，我们努力地在平衡工作、生活和个人发展，但常常感到时间不够用。如何在繁忙的日程中找到一丝丝“喘息”的机会，这个名叫 cal.com 开源项目能让你更轻松地管理日程。不管每天再怎么忙

29. Git入门详细教程

    一、Git概述 Git官网 Git是一个开源的分布式版本控制系统，用于跟踪文件的变化和协作开发。它允许多个开发者在同一项目中共同工作，并能够有效地管理代码的版本和历史记录。

30. 详细介绍下我们做的开源项目-赫兹跳动

    做了这么久，好像都没有出文章详细介绍了我们做的这个开源项目，在这里给大家介绍一波。一个拥有强大自定义监控能力，高性能集群，兼容 Prometheus，无需 Agent 的开源实时监控告警系统。

31. Flutter 组件集录 | 下拉菜单 DropdownMenu 组件

    1. 前言 Flutter 框架中新增了 DropdownMenu 下拉按钮，可以让我们更方便地实现下拉选择的交互。本文案例源码可以详见 【FlutterUnit 的 DropdownMenu】 2.

32. Vue Router 入门指南：从零开始构建单页应用的路由系统

    vue的整个项目中其实只有一个html文件，在vue中我们写的每个页面其实只是html文件中的一个代码片段，我们通过一些特殊的手段来实现每次只让一个代码片段生效，这样就实现了多个html文件一样的效果

33. 记一次CSS3和SVG实现箭头拐弯动画

    这不最近我司的设计师又给笔者整活了，在数据大屏页面的中间位置，做了一个效果图，不过需要做一个箭头沿着路径实现拐弯的动画效果；这可咋整呢，本文就结合CSS3的特性和svg，看一下实现的思路。

34. 前端基础-布局与间距

    往期回顾 设计风格 设计层次 空间 在提到间距和布局，它的本质就是对于空间的合理分配和理由，所以这一节也是直接从空间开始。 清爽的空间 一个设计最简单也最常用的方式就是给每一个元素之间都加上足够多的间

35. 140：vue+leaflet加载here地图（v2软件多种形式）

    文章浏览阅读249次，点赞49次，收藏40次。本示例介绍如何在vue+leaflet中添加HERE地图（v2版本的软件），并且含多种的表现形式。包括地图类型，文字标记的设置、语言的选择、PPI的设定。 v3版本和v2版本有很大的区别，关键是引用方法上，请参考文章尾部的API链接。

36. 前端项目打包并部署

    一、vue项目打包 1.1 方式一：vue项目命令行打包 在当前项目路径下，执行命令 在当前项目路径下，生成 一个dist文件夹。  将来部署项目，是部署的dist这个文件。 1.2 方式二：使用vu

37. Vue与React：核心异同点解析

    文章浏览阅读125次，点赞4次，收藏2次。对于正在考虑或已经在使用这两个框架的开发者来说，理解它们的异同点是至关重要的。本文将详细解析Vue和React的核心异同点，帮助读者更好地理解和使用这两个框架。Vue和React都是前端开发领域的强大框架，各有其独特的特性和应用场景。理解两者的核心异同点有助于更好地利用它们的优点并避免可能的缺点，从而提高项目的开发效率和性能。Vue和React是前端开发领域的两大主流框架，它们在核心概念、特性和应用场景上存在一些异同点。本文将深入探讨Vue和React的核心异同点，帮助读者更好地理解两者的关系和差异。

38. vue和react的差异梳理

    文章浏览阅读163次，点赞4次，收藏4次。vue和react的差异梳理

39. vue中的router-view组件是如何生成的？

40. Rust Vs Go:从头构建一个web服务

41. [前端请求]Ajax知识点 Jquery接口封装 fetch原生js请求

    Ajax学习 大家应该都知道mysql数据库，服务器是一台机器，他的的作用就是用来存储各种数据资源，而数据库存在的意义就是帮助服务器更好得打理数据！ 比如，我们的页面上有一个按钮，用户点了一下这个按钮

42. Flutter开发-01-JSON和序列化在Flutter中的最佳实践

    本文记录下在Flutter中使用JSON和序列化相关的方法和要点，方便记忆。主要有两种方式，其中json_serializable为官方推荐使用的代码工具生成方式。另一种是直接使用插件生成序列化实体

43. 鸿蒙–canvas 画时钟

    HarmonyOS使用 canvas实现时钟效果，纯 canvas 绘制。使用定时器定时更新同步时间。

44. Vite5.0 自定义插件实战

    vite插件是基于rollup插件上面拓展而来的，如不了解可以看看如下两篇文章： Rollup 插件机制 Vite 插件开发 rollup插件机制文章的配图是旧版本的，与此时rollup官网上面配图有

45. 详解ES6的导入和导出

46. 如何在 React 中使用 SolidJS 的 Signal？

47. 字节跳动开源 Gödel Scheduler：在离线统一调度器

48. 他凌晨1:30给我开源的游戏加了UI｜模拟龙生，挂机冒险

    白泽花了点时间，用 800 行 Go 代码写了一个控制台的小游戏：模拟龙生，在游戏中你将模拟一条新生的巨龙，开始无尽的冒险！

49. VueUse、View Transitions API实现暗黑模式主题动画切换效果

    View Transitions API View Transitions API 是原生JavaScript提供一种能让Dom更加丝滑的API 示例

50. React和Vue的生态系统有何不同？

    文章浏览阅读127次，点赞4次，收藏3次。React和Vue是目前最受欢迎的前端框架之一，它们都拥有庞大而活跃的社区生态系统。

51. Webhook技术解析：实时数据同步的利器

    Webhook技术简介 Webhook，作为一种高效的数据传输方式，在现代Web开发中扮演着重要的角色。它是一种“反向API”，允许一个应用程序向另一个应用程序提供实时信息。简单来说，当在一个应

52. 纯 CSS 实现文字换行环绕效果

    ⌛ 三年前。。。 ‍♂️ 一同事问我：“你说用 css 能不能直接实现这个效果，不想用 js 写，好麻烦啊” 我回答道：“应该不行吧，好像没什么好用的方法。。。”

53. 前端必刷系列之红宝书——第 4、5 章

54. 前端使用Lottie实现炫酷的开关效果

    前言 在平时的开发过程中，前端或多或少都会遇到实现动画效果的场景。手写动画是一件相当麻烦的事情，调来调去不仅费时费力，可能还会被产品/UI吐槽：这动画效果也不难呀，为什么就不能实现呢？/为什么就没有还

55. 66K star想画出高颜值的流程图，试试这个手绘风开源白板

    今天我们推荐的推荐的项目帮你画出手绘风的高颜值图表，目前在GitHub已超过66K Star，它就是：excalidraw

56. 关于Vite插件的内容

    终于学会用Vite了，但是Vite插件还不会开发？咋办，那就来看看吧，手把手教学，包教包会，速来观看。

57. 使用html,css,js 实现一个龙年春节祝福卡片效果

    1. Demo 介绍 前天看到掘金酱发的这个活动,便想着参加一下. 毕竟有奖品哈哈哈. 然后呢,我打算实现了一个春节祝福卡片的效果. 这是下面的效果: –

58. 解密最受欢迎的开源 Serverless 框架：流量篇

    对于 web 应用来说，通过请求流量的并发数、qps、rt 等指标，可以很好的衡量当前的 web 服务质量。Knative 中提供了基于请求驱动的 Serverless 能力，包括多版本管理流量，流量

59. vue2都停止更新维护了，你还没学会打包优化吗？（打包体积减少78%，冷启动速度提升93%， 打包速度提升73%）

    前言 之前的开发工作中对vue2项目也有做过不同的优化，但是都比较零散且没有系统化的记录下来。 正好最近接手了一个老项目，虽然项目不大性能也还过得去，但是我觉得可优化的空间还是比较多的。 所以也趁此机

60. 手把手教你—搭建Vue3企业级项目规范+基础封装配置

    本文详细介绍了如何在现代 Web 项目中实践规范校验以及提供必要的项目配置，以维护代码质量、保持一致性和提升开发效率。