vortesnail
vortesnail
 something wrong... how to solve this?
## 引言 在 2022 年的今天，弹幕在国内的各大视频网站已经成为了一个最基本的评论交互形式，它为视频社交增添了很大的活力，人是渴望交流且拥有共情能力的物种，对于同一个视频某一个时间节点，不同的人可以在弹幕中看到与自己有相同看法或有趣的评论，这无形中增加了视频观看者的共同参与感。 回想一下没有弹幕的过去，我们对某个情节有讨论或看法时，只能暂停视频，来到评论区，敲下几个字再回去播放视频。这种视频与用户的割裂感问题在弹幕出现后得到了很好的解决。 本文会介绍下弹幕是什么以及相比传统的聊天室（滚动评论）模式有哪些优点，之后会以一个较为简单的思路给大家说说如何在 web 端开发我们自己的弹幕系统，包括**滚动弹幕**、**顶部固定弹幕**和**底部固定弹幕**。 ## 弹幕简介 弹幕的读音为 `dàn mù`，因为大量评论在视频上方滚动时很像飞行射击游戏里的“弹幕”，所以国人命名如此，而在日语中被称为 `danmaku` ，注意了，不是 `danmuku` 。 弹幕的发明者具体到个人不是很清楚，这种评论形式最初是在日本的线上影片分享网站 [Niconico 动画](https://www.nicovideo.jp/) 出现，后来被 [AcFun](https://www.acfun.cn/) 引进，再后来大家都知道了，[Bilibili](https://www.bilibili.com) 出现后将这种形式发扬光大，可以说弹幕成就了B站，B站也发扬了弹幕这种形式。 现如今国内各大视频平台，发弹幕已经成为了最基本的功能了，不过就我目前体验来看，还是B站的弹幕花样最多，但实际上对于腾讯视频、爱奇艺这种偏影视的视频网站来说，也不需要多少花样，不然适得其反。 ## 弹幕得以发展的原因 在弹幕这种评论形式出现之前，对于在线视频的用户，他们之间的实时交流方式主要是**聊天室**模式，用户输入文本内容后，文本列表将整体从下向上滚动，如下图： ...
# 如何画一个只能在已显示区域进行事件绑定的三角形 **前言:** 这个问题是去一家公司面试的时候，技术经理问到我的，我第一想法是用CSS中的`border`去画，但是我们现在的要求是在那个三角形区域，才能进行事件的绑定，比如：click事件，那`border`所用到的`transparent`仅仅是透明度为0，那个区域还是在的，这就无法完成特定区域的事件绑定。 ### 1.先来试试border方法到底行不行吧！ Html: ```html ``` Css: ```css .triangle { width: 0px; height: 0px; border-left: 50px solid yellow; border-right: 50px solid blue; border-top: 50px solid red; border-bottom:...
## 前言 最近看了《css 揭秘》这本神书，学到了很多技巧，工作中遇到的一些问题在这本书中得到了很好的解决。这篇文章也不是把书中的内容随便抄一下就拿来给大家说，我会在此基础上向外扩展一些，请求大家理性评论！另外，有几个案例是我工作中遇到过的比较棘手的问题的解决方案，总结出来让大家有个印象，万一哪天你也要实现同样的需求呢？😁 > 如果对大家有帮助，请各位老爷务必留下你宝贵的 star🌟，这是我的 [github/blog](https://github.com/vortesnail/blog) 。 我会从以下 4 个纬度介绍各个案例： - 需求描述：客户（产品）就是上帝； - 尝试方案：每个人都有第一次； - 改进方案：我不敢称其为最佳，万一有更牛的人有更好的实现呢？ - 在线演示：shut up and show me the code! DJ, drop the beat!...
## 前言 之前学习或工作经历中都是 React 技术栈相关的，现来到新公司后需要使用 Vue2 相关技术栈维护项目，开发需求。大概花了一周时间左右刷了刷 Vue2 的官方文档，现在为了加强自己在 Vue2 **使用上**的熟练度，也为了防止因为以后 React 不太常用但是特定时刻又要切换回去的时候能快速记忆起用法，于是就有了这篇讲解 Vue2 与 React 在基础使用上的对应关系的文章。 强调一下，这篇文章不会在两个框架的原理上有过多深入（我还没读过源码 😂），仅仅是从我们常规开发中需要用到的实现上做了比对，简单来说就是，**我在 React 中的实现如何用 Vue2 去实现**。 ## 设计理念 一个庞大而复杂的项目拥有分工明确的代码结构是很重要的，这对于项目维护具有非常重要的意义，**所以 React 和 Vue 都推崇组件化的方式去组织我们的项目**，就像一台完整的计算机一样，打散开来各个模块都可以独立设计、开发、互不耦合，最后按照大家统一的协议去设计好接口，最终才能组装成一台强大、完整的计算机。...
## 前言 现在我们开发一个 React 项目最快的方式便是使用 Facebook 官方开源的脚手架 [create-react-app](https://github.com/facebook/create-react-app) ，但是随着业务场景的复杂度提升，难免会需要我们再去添加或修改一些配置，这个时候如果对 webpack 不够熟练的话，会比较艰难，那种无力的感觉，就好像是女朋友在旁边干扰你打游戏一样，让人焦灼且无可奈何。 这篇文章的主要目的是让大家（新手）对**webpack 构建 react + typescript 项目开发环境**有一个很感性的认知，以及 **会配合使用 rollup 打包组件并发布至 npm 全流程**，坦白说，相关的文章真的很多了，但是我仍然想再写一篇属于我自己风格的文章，什么风格呢？ > 1.从零开始搭建至完整的项目开发环境流程！ > 2.尽量做到每一步操作、每一行代码都能尽量解释给读者！ > 3.若完全跟着做下来，一定能实现同样的功能！ ## 你能学到什么？...
# 从零配置webpack 4+react脚手架（一） ## 前言： 如果你和我一样学习了webpack相关的教程，并跟着webpack官方[指南](https://webpack.js.org/guides/)进行了一些简单的配置，但是不知道如何去使用它，那么这个系列的文章将通过搭建webpack+react脚手架给予你一定的配置经验，写这个系列的文章一是为了方便以后自己有配置需求时可以及时回顾，二是加强自己对于webpack的理解。我会尽可能详细地一步一步讲解这个脚手架配置步骤，也会对一些需要注意的点进行提醒，希望能帮助到大家～ ## 前提： - 务必安装Node.js的最新版本，在控制台中输入 `node -v` 查看当前版本，若没有安装或不是最新版本，这里提供[Node.js官网](https://nodejs.org/en/)以便下载 - 已经了解过webpck的相关配置，不然你跟着这篇文章操作并不能增加多少熟练度，当然了，你可以先关注一下，之后再来看，题外话，如果你是webpack老手了，请务必关闭这篇文章，你的时间非常值钱。 - 当前文章的写作基于mac os环境下完成，若是windows，与我相同操作却得不到结果的，请Google - 保持耐心，我会将这篇文章分为许多小节，防止太多时间专注造成的疲劳，你可以休息一会儿看一节。 ## 开始吧！ ### 建一个空文件夹 让我们在桌面建一个空文件夹，名为 `webpck-react-scaffold` ，并使用你的编辑器打开它。将此文件夹拖到终端，执行： ```bash npm init...
## 前言 经过前三节的学习，我们已经大概能自己配出一个react脚手架了，但是仍有许多配置未完成，比如图片，字体图标的配置，Source Map的配置等，通过前面的学习，我相信你已经能够做到这些简单的配置了，实在还不是很清楚，那我们就往下看吧！ ## 添加图片的loader `file-loader` 可以对图片文件进行打包，但是 `url-loader` 可以实现 `file-loader` 的所有功能，且能在图片大小限制范围内打包成base64图片插入到js文件中，这样做的好处是什么呢？先一步一步走着！ ### 安装url-loader 这里需要注意，url-loader依赖于file-loader，所有我们两个loder都要安装 ```bash npm install file-loader url-loader --save-dev ``` ### 引入url-loader 在 `webpack.common.config.js` 中的rules中添加一个新的对象，并输入以下代码： ```javascript module: {...
> 最近在搭建自己的网站时，以前一直被自己认为写起来很简单的路由狠狠地给了我一巴掌，我既然怎么也想不到该怎么去合理地设计路由，痛定思痛，阅读了很多文章及官方文档，过程中也读到了这一篇很好的文章，想翻译下来向大家分享下！同时，文中一些没讲到点上的，我都会进行补充，欢迎大家阅读与留言！ > > 另外，Twitter 已经私信给原作者，得到了翻译许可！ [React Router](https://reactrouter.com/web/guides/quick-start) 是 React 社区最受欢迎的路由库，当你需要在一个有多个页面的 React 应用程序中根据 URL 来导航到对应的页面时，就可以使用 React Router 来处理这个问题，它会使你的应用的 UI 和 URL 保持同步。 本教程将会向你介绍 React Router 5 以及你可以利用它而做到的一大堆事情。 ## 介绍...
## 契机 最近在搭建一个开源的项目环境时，我需要打一个 ES 模块的包，以便开发者可以直接通过 `npm` 就能安装并使用，但是这个项目注定了会有样式，而且我希望打出的包的文件目录和我开发目录是一致的，似乎 `Rollup` 是一个不错的选择，但是我（自虐般地）选择了 `Typescript` 自带的编译器 `tsc` ，然后我就开始我的填坑之旅～ ## tsc 遇到的坑 在使用 `tsc` 编译我的代码时，对我目前来说，有**三个**基本的坑，下面我会对它们进行简单的阐述，在此之前看下即将被编译的目录结构。 ``` |-- src |-- assets |-- test.png |-- util |-- classnames.ts...