- 博客(108)
- 收藏
- 关注
RSS订阅
原创 【数据结构与算法】专栏系列文章目录
本系列文章是对绝大部分【数据结构与算法】的超详细讲解以及封装我是Lpyexplore，一个因Python爬虫而进入前端的探索者本篇博客是用于存放【数据结构与算法】专栏的文章目录的，大家可以在这看到文章的顺序，并点击进行跳转阅读。同时也建议大家按顺序阅读，因为我在写这个专栏的时候也是按照由浅入深的顺序写的，希望我每篇文章里详细生动的讲解能让大家收获更多注：所有的数据结构与算法的封装都是用JavaScript写的，如果不懂该语言的小伙伴可以只看文章中的讲解，其与语言无关，主要讲的是思想目录为什.
2020-10-08 08:54:04
7841
6
原创 CSS 穿墙术，太强了
大家好，我是零一，今天给大家分享 CSS 中一个神奇的属性：filter，为什么说它神奇？正如我标题所说的，我突然发现它能帮我们轻松实现 穿墙特效，类似这种的👇看起来就跟我们在科幻电影里看到的经过一个穿梭门时的效果一样，真的很酷！然而这个效果对于开发者来说毫无难度，因为只设置了两个属性从这个例子引出的 CSS 中超级牛逼的 filter 属性，到底还有哪些牛逼属性呢？一起来了解一下！filter 支持的属性借用了一下 MDN 上的例子，filter 一共支持以下这些属性：filter: blur
2022-05-24 08:57:27
2552
6
原创 JavaScript即将推出新的两个原始数据类型
JavaScript即将推出两个新的数据类型：Record 和 Tuple ，这俩是啥呢？其实就是一个只读的 Object 和 Array，其实在其它语言中已经有类似的数据类型了，例如 Python 中也有 Tuple（元祖）这一类型，作用也是一个只读的数组（在Python里叫只读的列表），一起来了解一下基础写法// Recordsconst myRecord = #{ name: '01', age: 23}// Tupleconst myTuple = #['1',
2022-05-09 11:52:31
1478
原创 CSS 中的简写到底有多少坑？以后不敢了...
大家好，我是零一，简写（语法糖）可能给我们编码带来了很多便利，但简写也会带来一些问题，今天来讨论一下 CSS 中的简写的"爱恨情仇"为什么说是爱恨情仇呢？因为简写给我们带来了很多的便利，但凡事都有好有坏，你不能说简写一点坏处都没有。所以我们就聊聊简写的 “好” 和 “坏”background这个 CSS 属性大家肯定是再熟悉不过了，给元素设置背景色是这样？.demo { background: #333;}还是这样？.demo { background-color: #333;
2022-05-07 08:50:44
1556
原创 Node18 支持 import HTTP资源
大家好，我是零一，最近看到Node官方提交了一条commit ，并且已经合入 master分支 ，如下图所示：由此可见，Node18可能会支持一个非常 nice 的功能，那就是 支持 import 远程HTTPS资源和本地的HTTP资源，啥意思？看个例子🌰尝鲜现在有这样一个文件：// demo.mjsimport sayHelloWorld from "https://example/say-helloWorld.mjs";console.log(sayHelloWorld());可以看
2022-04-27 14:33:13
2657
原创 仅用一个HTML标签，实现带动画的抖音LOGO
大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形的拼接组合，因为之前很多业界大佬已经扒过抖音的Logo的结构了，我就拿来借用一下：好的，有点复杂，简化一下，其实就是 4 个部分每个颜色划出来的区域代表一个部分，所以最后是：1/4圆环 + 半圆 + 长条矩形 + 半径略大一些的1/4圆环制作思路
2022-04-25 09:08:45
2588
4
原创 在CSS中写 when/else 是什么体验
大家都知道CSS已经有@media、@support 查询形式的条件，可以非常灵活地选择对应的样式，然而还有一个新的提议叫做 when/else，这语法似乎看起来更加明了方便在这篇文章完稿前，when 的提议已经被 CSSWG 通过了，而 else 是一个单独的提案，目前是一个4级规范让我们来看看 when/else 是如何使用的吧when/else 语法先来看看为了实现页面响应式是如何做的，这就要用到 CSS媒体查询@media (min-width: 800px) { /* 宽度大于800
2021-12-15 10:06:58
1671
原创 那些与 IE 相伴的日子
大家好，我是零一，IE 大家都不陌生，毕竟出现在大家的视野中已经很久很久，久到有20多年，当然也因前端技术的快速更新，给需要兼容IE浏览器的前端程序员带来了不少的困扰。之前发过一个47张图带你走进浏览器的文章，感兴趣的可以看一看！慢慢地，大家都在尝试抛弃IE，比如Vue3考虑彻底放弃对IE的支持，甚至连微软自己都决定在2021年8月17日起逐渐放弃支持IE时间久了，对 IE 多少有点感情了，跟大家一起回顾一下跟 IE 的抗争史吧！利用高渲染模式因为 IE 不兼容的东西太多了，很多人都选择使用相
2021-12-13 09:48:52
3612
6
原创 React、Nextjs中的TS类型过滤原来是这么做的~
大家好，我是零一，相信大家在阅读同事写的代码或者优秀的开源库的代码时，一定见过各种各样的风骚的TS写法，不花点时间下去根本看不懂，换作是我们，可能就直接一个 any 完事了，但是真正当项目体积变大后，你会发现这些 TS骚操作真的很重要，因为它能很好地帮助你做静态类型校验今天就来介绍一个在其它开源库中见到的既花里胡哨，又实用的TS类型——TS类型过滤自我介绍TS类型过滤，英文名叫 FilterConditionally，这是它完整的样子????type FilterConditionally<S
2021-12-08 08:50:47
2348
原创 Edge 联动 VsCode，这功能爱了
大家好，我是零一，你们一定一定一定遇到过这样一个情况：假设我们在浏览器的开发者工具调试自己写的页面样式，调了半天终于调好了，于是打开你本地的代码找到对应的代码把你刚刚在浏览器调试修改的代码一个个在本地代码中再修改一遍。如下图所示：确实怪麻烦的。你如果改的代码少一点还好说，要是改的多了，又碰上项目热更新导致页面刷新，你刚才改的所有代码都找不到记录了，得，瞎忙活！基于这个痛点，Microsoft Edge团队提出了一个不错的点子，并且已经正在实验这个功能了，那就是 "将Edge浏览器开发者工具中代码的修
2021-12-06 09:48:31
6551
5
原创 JavaScript 奇怪又实用的姿势又增加了六个
大家好，我是零一，今天给大家带来一些JavaScript的冷知识，可能你有所耳闻，但也有可能会让你大吃一惊。废话不多说，一起来看看吧！一、解构小技巧平常我们需要用到一个嵌套多层的对象中某些属性，会将其解构出来使用let obj = { part1: { name: '零一', age: 23 }}// 解构const { part1: { name, age } } = obj// 使用console.log(name, age) // 零一 23这种情况下
2021-12-02 10:17:28
1857
原创 近 20k Star 的项目说不做就不做了，但总结的内容值得借鉴
大家好，我是零一。最近在社区看到一个让人惊讶的消息，近20k Star的构建工具库 Snowpack的作者 Fred K.Schott （文中简称Fred）表示已经没有精力去维护snowpack了，其使用量和下载量都开始呈现下降的趋势。Fred也借此回顾了Snowpack的一生，反思、总结，并且借助这些经验投身到另外一个新项目Astro中，而Sonwpack打算交给社区维护。这 … 作者是说不做就不做了吗？翻译：讲真的，我不确定Snowpack之后会怎么样。去年年底，维护snowpack劳累过度，现
2021-09-23 08:35:59
2183
原创 终于有人对 jQuery下手了，一键移除项目对它的依赖
大家好，我是零一。虽然现在很多前端项目都在用Vue、React，但依赖jquery的项目也不少，尤其是年代比较久远的项目，那些还正在维护jquery项目的你，是否想将jquery从你的项目中移除？毕竟这个库那么大，你能用到的代码也就只有15%~30%，而且jquery对各个浏览器的兼容性也做了很大的处理（代码量up up），但其实很多老项目也不会去考虑兼容很边缘的浏览器了，所以其实jquery中兼容处理的代码也没太大必要最近新发现了一个有意思的工具，仅上线2周，就有600+的Star，它说能帮助你的项目脱
2021-09-16 10:16:25
2118
1
原创 28个在线游戏编程学习网站
大家好，我是零一，经常有读者问我：自学怎么学，要学的知识那么多，根本记不住怎么办？我一般刚开始回答的时候都是说要多做笔记总结，更重要的就是要上手敲代码实践，如果抛开任何场景在那学习知识，不光记不住，说不定对知识应用的掌握程度也不够另外，学习也是需要靠兴趣的，希望你们在上手实践敲代码的过程中能感受到乐趣所以，今天我给大家推荐28个辅助你学习巩固知识的网站，让你边玩边学边记！本文大致的目录结构如下：CSS相关的学习网站1 xxxx2 xxxxn xxxxJavaScript相关的学习
2021-09-15 08:45:47
3270
1
原创 热议：CSS为什么这么难学？一定是你的方法不对
文章首发公众号：前端印象，如需转载请联系我开白！大家好，我是零一。前段时间我在知乎刷到这样一个提问：为什么CSS这么难学？看到这个问题以后，我仔细一想，CSS学习起来好像是挺困难的，它似乎没有像JavaScript那样非常系统的学习大纲，大家平时也不会用到所有的CSS，基本上用来用去就是那么几个常用的属性，甚至就连很多培训机构的入门教学视频都也只会教你一些常用的CSS（不然你以为一个几小时的教学视频怎么能让你快速入门CSS的呢？）一般别人回答你CSS很好学也是因为它只用那些常用的属性，他很有可能.
2021-08-23 10:51:43
2800
1
原创 设计方案，写了才知道有多香
大家好，我是零一，今天要跟大家聊聊开发流程中不起眼的环节——设计方案。你们可能没听过，也可能只是简单得走过过场，别划走，这非常重要！在字节，我接触到了更完善、更规范、更高效的开发流程：产品需求设计 => 需求粗评 => 做设计方案 => 粗估时 => 需求细评 => 排期 => 开发 => 提测、修bug => code review => 上线其实在我未工作之前，大部分的流程我都听说过或者在实习时经历过，比较少接触的可能就是设计方案和code r
2021-08-18 14:35:26
3032
3
原创 我优化了进度条，页面性能竟提高了70%
前言大家好，我是零一。最近我准备在组里进行代码串讲，所以我梳理了下项目之前的业务代码。在梳理的过程中，我看到了有个进度条组件写的非常好，这又想起我刚开始学前端时写的进度条的代码，跟这个比起来真的差距太大了（大部分的初学者应该都想不到，而且我第一次家实习公司带我的mentor亦是如此）。因此，我想给大家分享一下这个思路极好的进度条组件，同时它也存在非常严重的性能问题，本文末尾也会讲解一下问题所在以及优化方式进度条的应用场景一般进度条组件都出现在类似抖音播放视频的这样场景中，如图中底部的箭头所示：进
2021-06-23 09:08:02
12310
134
原创 圆满了！最后一次疯狂
大学四年过的真的好快！原谅我又要感慨一下了！从浙江到很远的山东烟台上大学，宿舍是8人的，地方有点挤，但室友都是很可爱的。我也是第一次感受到山东人民的热情，他们大大咧咧、不拘小节、乐于助人，作为一个外省的学生，4年他们也帮了我很多很多，很感激很感激！说来也有意思，我们每个人的名字似乎都对应着一种动物（各种谐音）：????、????、????、????、????、????、????。我们也从没啥矛盾，一起吃吃喝喝玩玩记得刚到宿舍时，我看到每个室友都"高大威猛"，我属实有点吓到了，以致于我们宿舍每次集体出去
2021-06-22 09:19:05
5525
49
原创 聊聊！面对内卷，我们是该一起卷还是躺平？
前几天我刚刚从学校毕业，经历了写毕业论文的内卷事件，还差点没毕业，还特地写了一篇文章。平常都是在群里看大家疯狂学习搞"内卷"，但从这件事情中我才真正发现内卷已经渗入到生活的方方面面了这社会真的可以避免内卷吗？不可能，想都别想我记得当时写论文时，我都准备躺平60分过就得了，看到大家一个个卷的不行，我最终也妥协了，我当时还深深地叹了一口气，唉~~~~~~~~~~~ 因为我不跟着一起卷，我就是被淘汰的那个。所以我就一直在思考，我们到底该怎么办避免这种情况呢？还得从内卷的由来开始，无非是内部竞争嘛，就拿一
2021-06-15 09:08:59
33033
93
原创 卷死我了，终于毕业了！！
很多小伙伴都知道我今年3月份拿到了字节的前端岗位校招offer，我也立马前往去实习了。但是作为毕业生来说，还有一件天大的事必须要完成，那就是毕业论文，我本以为我可以边实习边抽空写论文，等答辩的那天请几天假回去就完事了（因为身边大部分的实习生都是这样的）。但没想到的是，我们专业的老师给我们下通缉令，要是不早点回来学校写论文，到时候就别答辩了（此处瑟瑟发抖！）。就这样，才刚实习了2个月的我，早早得买上了回学校的车票。我的专业是「安全工程」，是煤矿安全，所以要写的东西非常枯燥！！！！此时才5月3日，距离
2021-06-11 08:56:38
19752
94
原创 手把手带你10分钟手撸一个简易的Markdown编辑器
前言最近我在项目中需要实现一个 markdown编辑器 的需求，并且是以React框架为开发基础的，类似掘金这样的：我的第一想法肯定是能用优秀的开源就一定用开源的，毕竟不能老是重复造轮子。于是我在我的前端群里问了很多群友，他们都给了甩过来一堆开源的markdown编辑器项目，但我一看全是基于Vue使用的，不符合我的预期，逛了一下github，也没看到我满意的项目，所以就想自己实现一个啦需要实现的功能我们自己实现的话，看看需要支持哪些功能，因为做一个初版的简易编辑器，所以功能实现得不会太多，但绝对
2021-06-01 09:36:32
23640
78
原创 【css炫酷动画】让面试官眼前一亮的故障风格文字动画
今天分享一个用 css3 来实现一个最近特别流行的故障风格的文字展示动画，我敢说，只要你在你的项目中用到这个动画，面试官看到了一定会眼前一亮。下面先来看一下成品图该动画效果就比较复杂了，用到的知识比较多，例如 css伪元素 、元素自定义属性 、蒙版属性 、animation动画等等标签元素部分<body> <div class="txt" data-text="我是故障风格的文字"> 我是故障风格的文字 </div> <
2021-05-24 08:32:03
4453
23
原创 一个非常实用的CSS小技巧，帮你应对各种场景
问题背景在设计页面时，我们经常会遇到类似这样的页面布局：图中一个容器内有多个内容块，每块都有一个底部的下划线，但是一般为了美观，最后一个内容块儿的下划线是要去掉的接下来我们看看通常情况下，是如何处理这种样式的：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
2021-05-19 09:02:17
3309
101
原创 CSS实现图片悬停文字叠加效果
引言在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。编写HTML我们的 html 代码非常简单，只有几行：<div class="image"> <img class="image__img" src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072__340.jpg" alt="Bricks"
2021-05-18 09:29:56
5084
123
原创 如何理性看待Tailwind和styled-components争宠React
几天前，我发表了一篇新的博文，详细介绍了我使用styled-components的经验，以及如何将动态样式整合到 js 域中，避免使用 CSS 文件。后来我发现了另一种将样式整合到应用程序中的方法… 那就是 TailwindCSS。我以前看过一些关于这个的讨论，也看过很多关于 TailwindCSS 的视频和帖子，但是没有多想。因此，既然有人再次告诉我这件事，我也想尝试一下，这样我就可以比较我的经历了。我决定利用TailwindCSS建立一个网站。
2021-05-14 09:07:44
3046
19
原创 一看就会的保姆级教程，10分钟搭建个人博客
前言相信很多人都想拥有一个自己的个人博客，现有的个人博客搭建框架已经有很多了，例如 hexo 、vuepress 、jekyll 等等，这里我选用 vuepress 来快速搭建个人博客网上教程千千万，但总归都是零零散散的，没人会给你讲解得清清楚楚，所以我这里就手把手来讲解一下如何从零搭建这里先放上 vuepress 的官网链接：https://www.vuepress.cn/(opens new window)一、准备工作首先我们要把需要的东西都下好，例如：node 、git 、vuepress
2021-05-11 09:40:15
3986
78
原创 昨晚尤大的连麦直播，我学到了很多！！！
昨晚朋友圈已经被连麦尤大的直播刷屏了，主要就是答答疑，聊聊天～ 总共大概聊了一个半小时。给你们看看帅气的尤大我也抱着 「学习」 、「长见识」 的态度去直播间听了一个多小时（因为前半段有事，所以没能来得及赶上开场），说真的，虽然只听了一个多小时，但是收获还是很大的，这里也凭借着我7秒钟的记忆，记录下了一些尤大的一些答疑和闲聊本文不是100%的原话复述，也略微掺杂了一些个人看法，当然接下来所有括号()中的内容都是我自己加的，是为了你们更好得阅读尤大，对于看源码你怎么看？这个问题是我在进入直播间以后，
2021-05-10 08:35:23
10161
81
原创 一文带你了解如何排查内存泄漏导致的页面卡顿现象
什么是内存泄漏呢？借助别的大佬给出的定义，内存泄漏就是指由于疏忽或者程序的某些错误造成未能释放已经不再使用的内存的情况。简单来讲就是假设某个变量占用100M的内存，而你又用不到这个变量，但是这个变量没有被手动的回收或自动回收，即仍然占用100M的内存空间，这就是一种内存的浪费，即内存泄漏
2021-04-06 09:03:38
3886
11
原创 好事多磨！6轮面试后终于拿到字节前端校招offer（内含6轮面经）
大概1月初的时候，我在各个渠道就收到了**字节跳动年前扩招**的喜讯，我心想，春招压力这么大（因为春招的求职者大多都是备战了很久的大佬或者是秋招实习结束回来更有经验的同学），字节竟然年前开始扩招了，那我不如抓住这个机会尝试一下，降低一些竞争压力于是我就用了一周的时间边准备面试，边投简历
2021-03-12 14:07:08
4100
24
原创 从未看过源码，到底该如何入手？分享一次完整的源码阅读过程
前言我觉得每个人可能都有过看源码的想法吧，也包括我。因为看源码不光能使自己对这个库更加熟悉，还能学习到作者强大的思想，久而久之，自己的水平和思想也会有明显的提升的。但对于我来说，之前从来没有阅读过源码，想阅读源码却不敢迈出那一步，因为一个成熟的库有着太多的方法、逻辑，阅读起来可能会比较困难，但人总要勇于尝试的嘛，于是我就准备把 Vuex 的源码 clone 下来，没有别的原因，只是因为这个库体积比较小，算上注释，核心代码只有1000行不到，我觉得非常适合第一次阅读源码的人拿来练手说干就干，我就先在
2021-01-28 14:14:39
5596
3
原创 如何充分利用Composition API对Vue3项目进行代码抽离
背景介绍在2020年，Vue3的学习一直被我鸽到了11月份，在学完以后，我自己做了一个Vue3的小项目nav-url，也整理了我对于如何快速上手Vue3的几篇博客，很高兴受到了大家的指点和喜欢：自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）(237+ 个????)在上一篇博客中，我详细介绍了一下我发的第一版项目的特色、亮点以及所有核心功能的实现，希望大家可以前往阅读体验一下（记得用电脑打开，因为这是一个PC端的项目）然而，这项目只是实现了一些功能，但我感觉并没有很好地利用Com
2021-01-07 09:15:16
15975
23
原创 迟来的2020年度总结，顺带附上被鸽了很久的自我介绍
介绍大家好，我是小澎，一个热爱前端的2021届的应届毕业生，大学专业是安全工程，不，不是网络安全，而是工程安全，所以我是非科班。今天呢，想跟大家介绍介绍我自己如何进入前端首先，我是怎么进入前端这个领域的呢？说来也挺有意思，因为今年前半年一直在家出不了门，然后就在家里思考我大学四年到底干了些什么，最后发现只有被老师组织去考来的 全国CAD一级证书、学校组织报考的 普通话证书和考了三次才过的 英语四级。咦？我到底有什么特长啊，感觉这些证书在手上好像不足以让我变得非常出彩，于是静下心来思考了很久很久，回想起
2021-01-03 18:09:38
9532
35
原创 自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）
对于项目的逻辑代码，你们可以直接查看我的源码，全部都是用的 Vue3 语法写的在最初做这个项目时，还没找到合适的 Vue3 组件库，所以我就根据自己的需求，封装了 message 、dialog 、input 、button 、popover 这样五个组件，其中重点讲一下 message 和 dialog 吧，另外还有这个项目的亮点：配置导入与导出
2020-12-12 11:42:08
13509
12
原创 关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充
getCurrentInstance方法只有在 development，即开发环境下才能获取到当前组件的实例，换句话说就是这个方法只是在开发环境下用于调试使用的
2020-11-29 09:45:13
28116
61
原创 快速使用Vue3最新的15个常用API（1W5+字详解，建议收藏）
大家都知道，现在Vue3的各个版本已经陆续发布了，并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级，我们当然也不能落后，所以赶紧将你手中的Vue2升级到Vue3，跟着本文一起学习新的API吧
2020-11-20 12:26:05
22756
68
原创 聊聊CommonJS与ES6 Module的使用与区别
学了JS并且用过Node.js后，对模块化应该是有所了解和使用了，那么一定见过以下两种模块导入导出的方式第一种： ES6 Module；第二种： CommonJS
2020-11-18 08:53:01
6983
26
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人