- 博客(137)
- 资源 (1)
- 收藏
- 关注
原创 别再误用useMemo了!这才是最佳实践的正确打开方式
useMemo是react用作性能优化的一个hook,但有一个现象,不知道的人一次不用,知道的人随时随地到处都用。本文就带你真正搞懂什么情况下可以使用useMemo
2024-09-29 14:04:47 1108
原创 用来跳转的<a> 标签,原来还有这么多强大又实用的功能
说到标签,对于一个前端开发来说应该算是最基础的标签之一了,绝大多数情况都是用来做链接跳转,使用href 配置跳转地址,再设置 target="_blank"在新标签页打开。但是标签的功能远远不止于此,它可以实现很多看似复杂的功能,例如:SEO优化、无感刷新主页面、PV统计、避免重复打开新窗口等。
2024-07-29 12:16:40 1347
原创 微信定时推送LeetCode每日一题,再也不怕没人喊你刷题了
最后,如果你觉得这个功能对你很有帮助,但是自己又不想去开发,回复“交流群”加入前端筱园交流群,就可以免费体验啦。可以在群内添加前端筱园机器人为好友,独自享受更多功能服务。欢迎加入前端筱园交流群:关注我的公众号【前端筱园】,不错过每一篇推送。
2024-07-10 16:13:25 996
原创 微信定时推送LeetCode每日一题,再也不怕没人喊你刷题了
通过微信定时推送功能,每日向用户发送LeetCode的每日题目。这项服务不仅方便了编程爱好者和求职者随时练习算法题,而且解决了缺乏动力或组织者来提醒刷题的问题,鼓励读者养成每日刷题的学习习惯。
2024-07-10 16:04:25 1158
原创 前端视频帧截图:如何实现视频封面选择
在这样一个图像化极其重要的时代,从视频中提取精彩瞬间,即视频帧截图的技术,已成为前端开发中的一个亮点。JavaScript作为网页动态效果和交互的主力军,其在视频处理领域能力逐渐被挖掘和重视,尤其是视频帧截图技术的应用,为网站和应用程序提供了更为丰富和直观的用户体验。
2024-06-03 14:39:45 2516
原创 网页主题自动适配:网页跟随系统自动切换主题
主题切换是网站设计中一个非常有趣的功能,它允许用户在多种预先设计的样式之间轻松切换,以改变网站的视觉表现。最常见的就是白天和黑夜主题的切换,用户可以根据自己的喜好进行设置
2024-05-09 17:02:41 1013
原创 音频可视化:原生音频API为前端带来的全新可能!
音频API是一组提供给网页开发者的接口,允许他们直接在浏览器中处理音频内容。这些API使得在不依赖任何外部插件的情况下操作和控制音频成为可能
2024-05-06 18:07:30 1547
原创 不要只会用conosle.log了,这几个console命令,让你的调试效率翻倍
console在前端开发中是最常用到的语法之一,在开发和调试过程中是不可缺少的工具,可以打印调试信息、查看对象内容、性能分析、错误定位等作用
2024-04-29 13:48:06 2043 1
原创 前端手写Promise.all,你不知道的多个知识点,比想象中更精彩!
本文将通过知识问答、手写实现、知识扩展几个环节,让你彻底摸透promise.all
2024-04-25 09:43:46 1375
原创 【惊人内幕!】断更一年,背后竟隐藏这样的秘密!重新归来,更精彩内容等你来揭秘!
本次更新后,将会继续更新内容,和大家一起共同交流,相互学习,共同进步。也希望大家可以给我提供一些好的建议和想法。欢迎大家访问我的个人网站也欢迎大家关注我的公众号,不错过我的每一篇推送。
2024-04-09 17:50:40 458
原创 10分钟掌握HTML拖放API!让你的网页元素瞬间拥有拖拽功能,轻松提升用户体验!
在日常开发中,拖拽功能无疑是一个常见的需求场景。为了更好地满足这一需求,HTML5提供了一套便捷的拖放API。这些API不仅能够帮助开发者轻松实现拖拽效果,还可以提高排查拖拽问题的效率,甚至可以让我们更加灵活地自定义拖拽场景和设计能力
2024-04-09 17:34:36 2248
原创 FLIP动画实现思路
如果让你实现下面的这种动画效果你会怎么做? 可能很多人第一想法就是使用绝对定位进行布局,当顺序发生变化后,计算出变化后的位置,然后通过动画过渡到指定位置。这是一种很常见的实现方式,但存在几个问题:需要维护每个节点的位置信息顺序变化后,需要计算每个DOM的目标位置使用绝对定位的方式,每行显示的小方块个数是固定的,不能自适应容器的变化。过程分析无论多么复杂的动画,都可以拆解成多个动画的组合。对于上面的效果,就可以看成是每个小方块的变化,这里只涉及到了位置的变化,当然还可能存在大小、颜色等变
2022-05-28 12:59:47 1605
原创 脚手架开发(3) - 执行阶段
点击查看脚手架系列文章总览【正在更新】个人网站:www.dengzhanyong.com关注公众号【前端筱园】,不错过每一篇文章脚手架的第三个阶段:执行阶段,本篇文章以脚手架初始化项目命令为例进行讲解。前言对于脚手架的每个命令的执行,都拆分成了独立的 npm 包来执行,执行相应的命令时,会将对应的 npm 命令包下载到本地缓存中,若缓存中已存在但非最新版本,也命令的注册阶段会帮我们完成自动更新。然后执行本地缓存中的文件即可。为了方便调试,支持传入本地路径,如果符合条件,则会执行本地代码,对.
2022-02-08 16:34:47 795 2
原创 脚手架开发(2)-注册阶段
点击查看脚手架系列文章总览【正在更新】个人网站:www.dengzhanyong.com关注公众号【前端筱园】,不错过每一篇文章在上篇文章,已经完成了第一个阶段:准备阶段,在准备阶段做了许多基础工作,目的为保证满足脚手架的运行环境。现在开始进入第二阶段:注册阶段,主要功能是完成命令的解析,以及命令的动态加载的实现。前期改造首先介绍两个常用的脚手架命令行交互工具包:yargs、commander他们给我们在开发脚手架提供了极大的方便,功能大致相同,本篇文章使用的是 commander 作为.
2022-01-04 21:10:07 1237 1
原创 脚手架开发(1)-准备阶段
脚手架的基本原理点击查看脚手架系列文章总览【正在更新】个人网站:www.dengzhanyong.com关注公众号【前端筱园】,不错过每一篇文章初始化项目1. 创建项目文件mkdir steamed-clicd steamed-cli2. 使用lerna初始化项目lerna init项目默认结构如下:C:.| .git│ lerna.json│ package.json│└─packages在此基础上需要进行一些改动:删除 packages 目录, p
2021-12-27 19:07:12 888
原创 脚手架的基本知识
脚手架的基本原理点击查看脚手架系列文章总览【正在更新】个人网站:www.dengzhanyong.com关注公众号【前端筱园】,不错过每一篇文章什么是脚手架可以理解为是用来提高项目整个流程的工具,从初始化到开发,再到构建部署等。在整个过程中会帮我们完成一些比较复杂,且与实际业务并不太相关的工作。脚手架的作用或必要性自动化:创建项目,运行,构建,部署;这些事情都可以用过一句简单的命令完成。标准化:模板标准化;开发规范标准化;发布流程标准化;数据化:安装原理以 vue-cli 为例
2021-12-13 21:43:26 1597
原创 使用 canvas 制作魔方墙
故事起因我是一个魔方爱好者(只是爱好,但技术并不强),在大学期间担任过魔方社社长,每到招新的时候,一般都会用上千个魔方拼出招新二维码,显得比较有逼格。二维码本身也是一个一个的小格子组成,并且只有两种颜色,把二维码下载下来,然后画一些辅助线用魔方照着拼出来就好了。有一年女朋友过生日,我想用魔方拼出他的照片人像,肯定比较有意义。但是有一个棘手的问题,如何将一张图片转换为6种颜色的小格子呢,当时在网上始终都没有找到符合的工具,于是这个想法也就破灭了。几年过去了,忽然又回想起这件事,想着是不是可以用JavaS
2021-10-28 09:11:05 3430
原创 nginx报错:nginx: [emerg] the “ssl“ parameter requires ngx_http_ssl_module in /project/api/nginx.conf:
报错原因:未安装 ngx_http_ssl_module 模块解决方法:查看nginx安装了哪些模块/usr/local/ngxin/sbin/nginx -Vnginx version: nginx/1.12.2built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) configure arguments:configure arguments 后面没有任何参数,表示没有安装任何模块安装 ngx_http_ssl_modu
2021-10-25 11:05:17 6727 5
原创 JavaScript同步与异步
JavaScript的运行机制运行栈JavaScript的执行环境是 单线程 的,所谓单线程,就是每次都只能做一件事,后面的事必须等前面的执行完才可以进行。console.log(1);console.log(2);console.log(3);console.log(4);// 1, 2, 3, 4但是这有一个弊端,如果中途遇到某个操作长时间无法执行完成,那么后面的任务就必须排队等待,这严重影响了整个执行过程,会导致浏览器无响应。为了解决这个问题,JavaScript将任务分为了 .
2021-08-09 19:54:28 1066 2
原创 你用过Object.is() 方法吗?
方法说明Object.is() 方法用来判断两个值是否相等,它接收两个参数,分别是需要比较的两个值。返回一个 Boolean 值标示这两个值是否相等。Object.is(123, 123); // trueObject.is(123, '123'); // falseObject.is([], []); // falseObject.is(NaN, NaN); // true我们在开发中,基本上都是使用 == 与 === 来判断两个值是否相等,可能有的人会问了,他们与 Object.i
2021-07-21 09:01:10 4039 2
原创 公众号开发【消息自动回复】
申请测试号前期为了方便开发与调试,可以先申请一个测试号用户开发联调。地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login开始接入第一步:配置接口信息 登录微信公众平台官网后,在公众平台官网的开发-基本设置页面,勾选协议成为开发者,点击“修改配置”按钮,填写服务器地址(URL)、Token和EncodingAESKey,其中URL是开发者用来接收微信消息和事件的接口URL。Token可由开发者可以任意填写,用作生成签
2021-07-01 16:26:55 3563 3
原创 React + Koa 实现文件断点续传
断点续传什么是断点续传断点续传,指的是在上传/下载的过程中,由于网络或其他原因导致上传/下载终断。可以从已经上传或下载的部分开始继续上传下载未完成的部分,而没有必要从头开始上传/下载。用户可以节省时间,提高速度。整体思路流程1. 选择文件-解析文件先来一个选择文件的input和一个上传按钮<div> <input type="file" ref={InputRef}/> <Button type="primary" onClick={uploadFil
2021-06-22 13:32:49 893
原创 从零搭建个人网站服务器
准备前提 服务器(以阿里云的轻量应用服务器为列) 已经开发好的网站 服务器简介 内存:2G CPU:2核 系统盘:60G 系统镜像:CentOs 已经预安装了PHP 与 Mysql 环境安装1. node环境搭建如果后端使用的是node开发,那需要安装node的运行环境使用wget命令,下载文件$wget https://nodejs.org/dist/v8.11.3/node-v14.16.1-linux...
2021-05-26 19:53:30 2443
原创 用CSS也可以任意改变PNG图标颜色?
在开发中图标跟我们是形影不离的,在开始之前先聊一些题外话,图标有什么作用?通用图标可以代替文字说明,能更简洁地表达某个设计的意图,让用户看到图标就知道它代表什么?有什么用途?LOGO类图标可以起到品牌宣传,同时因图标更醒目,占据更大的位置,用户更容易点击。看图片更符合人的视觉需求,简洁的图片能降低人的信息焦虑。试想我们如果看到一个满满的文字的页面,是不是常常有信息恐惧,可能就会选择退出。但是大多数情况下只有图标是不行的,还需要配上文字说明,如果用户看到一个图标,花很多时间都不能理解它
2021-03-11 13:49:06 3799
原创 原来CSS的background还可以这么玩
身为一个前端开发者,背景是开发中的常客。大到整个网站的主题背景,小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到,绝大多数情况下我们都只会使用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣,通过本文让你用纯CSS也可以开发出炫酷的背景。开始之前在开始之前,先请你回答下面的问题,如果你能全部回答正确,说明你对 background 属性掌握的还不错哦!1.径向渐变默认形状是什么?A:原型 B:椭圆形2. background 属性的值为多个时
2021-03-09 11:00:05 1323 7
原创 奇思妙想CSS之“故障艺术”
什么是故障艺术顾名思义,Glitch art 就是“故障艺术”。这个词的意思就是“失灵;短时脉冲波干扰”,可以理解成一种自动或人为的bug。但是Glitch art不一定是只限制于数码环境中的,在analog art里出现的机械、或人为干扰产生的故障都可以被归为“故障艺术”;但重要的一点是,这不止是一种故障的呈现和表现,还应该是一种基于“故障”的审美创作,所以Glitch art也可以是看做是“美化故障”,或者通过“故障”完成审美活动的创作手段。身边的故障艺术–抖音LOGO抖音的logo就是一种
2021-02-19 16:40:19 555
原创 小程序“订阅消息”采坑记
我在小程序的【每日一题】中新增了订阅功能,这篇文章就来讲讲设计及开发过程中遇到的坑。什么是订阅消息消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。订阅消息推送位置:服务通知订阅消息下发条件:用户自主订阅订阅消息卡片跳转能力:点击查看详情可跳转至该小程序的页面订阅消息包括两种:一次性订阅消息一次性订阅消息用于解决用户使用小程序后,后续服务环节的通知问题。用户自主订阅后,开发者可不限时间地下发一条对应的服务消息;每条消息可单独订阅或退订。
2021-02-06 11:27:23 1136
原创 我终于也有自己的小程序啦
这是一篇非技术性文章,我想分享一下自己做一些自己的产品的体验与感想。作为一个程序员,也想拥有一些自己的东西。一年多前,开始建设自己的个人网站,当时也才毕业,什么都不懂,我从没有过使用博客构建平台的想法,那与拿别人的东西没什么区别。开始时,一篇空白,也不知道如何下手。从功能出发,自己担任其了产品经理、UI设计、前端开发、后端开发、测试、运维的角色,慢慢的有了一些小的基础,然后在上面一点一点的拓展与优化。又去学习如何建站、学习linux,只要涉及到自己的盲区就要去学习,也习惯了去体验这个过程。通过写博客进
2021-01-26 16:43:06 540 6
原创 博客中添加动漫妹子,总有一个适合你,嘿嘿嘿!
常喜欢逛博客的你,是不是会碰到一些有意思的东西,有很多博客网站都有一个卡通人物,它一直盯着你鼠标移动的地方,俗称看板娘。是不是好想拥有她?今天就来讲讲如何在自己的博客中添加类似的功能。如果你的数学知识和创造力比较好的话,可以自己手写一个简单的动画人物,当然这样的人比较少,毕竟这也是一个很耗时的过程,并且效果比较单一。手写不行就来用现成的,业界已有一些比较成熟的方案,比较受欢迎的就是 L2Dwidget。如何使用急速添加<script type="text/javascript" c.
2020-12-23 14:17:15 4763 5
原创 【你不知道的CSS】mix-blend-mode
mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。它有以下属性值:normal:正常multiply:正片叠底screen:滤色overlay:叠加darken:变暗lighten:变亮color-dodge:颜色减淡color-burn:颜色加深hard-light:强光soft-light:柔光difference:差值exclusion:排除hue:色相saturation:饱和度color:颜色luminos
2020-12-04 15:15:40 1896 2
原创 从现在开始,和copy正则say拜拜!
从现在开始,告别copy正则表达式! 在我们编码过程中,正则表达式是我们常来顾客,尤其是表单字段的校验。为了图方便,常常的做法就是去网上进货,然后作为中间商卖给表单。这种做法虽然方便,但是只能满足普通客户(表单)的需求,如果遇到一个大客户需要定制产品(特性的校验规则),到时我们再去学习如何制作就来不及了,客户不等人,失去了客户不说(项目延期),有可能还有扣你尾款(挨上级批斗);基础知识基本语法/pattern/[modifiers];pattern:模式modifiers:修饰符修饰
2020-11-27 14:26:17 272
原创 React & Render Props
话不多说,直接从一个例子开始,点击元素,为当前元素随机改变一种背景色import React, { useState } from 'react';const ChangeBgColor = (props) => { const [color, setColor] = useState('#fff'); const randomNumber = () => { return Math.floor(Math.random() * 255); };
2020-11-14 13:54:35 244
原创 教你如何3分钟把VUE项目打包成apk,真的只要3分钟
前提准备使用vue-cli3搭建的项目工具HBuilder X,他的图标长这个样子,点击下载做前端的大多数小伙伴们都应该知道,使用起来轻巧、急速,但是他主要是针对于VUE生态打造的,相对于 vscode 缺少了丰富的插件支持以及多语言编译的支持。但是它也有vscode无法满足的功能,比如说今天我们就要用它来把vue项目打包为 apk。打包步骤执行 npm run build 打包vue项目下载并安装HBuilder X依次点击文件》新建》项目,选择 5+APP(A) 选项,并填写好项目名
2020-11-03 16:18:28 10719 5
原创 vue3.0迁移指南(下)
VUE3.0最大的更新就是加入了compositionAPI,我相信你在阅读完这文章后,对3.0的用法会有更深入的认识。如果你想更好地过渡到3.0,建议看一下上篇文章【vue3.0迁移指南(上)】为什么要引入一个全新的API?在 V3.0 以前,我们开发一个组件都使用一个固定的模板结构,我相信大多数使用VScode开发的小伙伴们,已经把该模板配置到了vscode中。当然这个模板你可以自定义为你常用的内容和结构。<template> <div class="wrapper"&.
2020-10-22 11:13:46 779
原创 vue3.0详细迁移指南(上)
Vue3.0从一年前就开始预热,在前几天终于正式发布了。我相信很多小伙伴在很早前就开始关注了3.0的一些改变和新特性,喜欢尝鲜的小伙伴也肯定早就尝过了,在几个月前我也写过一篇关于vue3.0的文章,简单讲了一些新的特性【vue3.0有哪些改变】。虽然3.0已经正式发布了,你也可以开始尝试在新的项目中使用3.0进行开发,但是如果你想对之前的2.x项目升级到3.0的话,我不建议去做升级,我觉得这个没有太大的必要的。但是后面使用3.0开发必然是一个趋势,所以从现在开始去学习3.0的改变是很有必要的,由于内.
2020-09-24 10:01:53 2026
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人