- 博客(297)
- 收藏
- 关注
原创 认识一下npx
npx 的好处肯定就显而易见了,不用全局安装,节省了空间,每次使用的包都是远程最新的,对于那些只需要偶尔使用某些命令或工具的情况非常有用,如果是想要用不同的版本,npx 的优势也是很明显,根本不会版本冲突。缺点就是每次都得下载一下,网络不好的情况,需要一定的时间,如果不是常用的,用 npx 会很方便快捷,如果是常用的,还是建议全局安装一下。如果想看 npx 的缓存位置可以用 npm config get cache,里面_npx 就有,但是时效和什么时候清除,怎么样的机制清除,没找到对应的官方文档。
2024-01-22 10:52:29 421
原创 免费部署静态网页,国内外访问套餐 GitHub Pages、Vercel、CLOUDFLARE
部署自己的博客或者前端静态页面,要嘛找一些免费托管平台,要嘛自己买服务器和域名。买了服务器,还得自己配置 nginx 和域名解析等。如果希望国内外都能访问,服务器最好是香港的,域名也可以不用备案。如果只是博客,有一些免费的托管平台,可以很容易的实现。
2023-12-26 15:38:29 913
原创 不用框架,本地启动接口代理
当在一些很古早的项目,或者非常临时的,想要在项目里请求一下服务器的接口,这时候,很少有那么好的后端临时开启所有可跨域,需要前端自己解决。使用框架,无非就是本地启动了一个服务,转发了本地发起的请求,在没有使用框架的情况下,我们也可以使用 node,自己启动一个服务做代理。一些不用框架,或者临时使用的话,还是蛮好用的,当作一个项目放着,用的时候就启动,甚至可以放到自己所在的项目里面,当作工具用。欢迎关注订阅号 coding个人笔记。
2023-12-21 17:08:20 418
原创 mongodb 安装
作为一个前端开发,操作数据库太过困难了,而 mongo 的操作语法就是 json,对前端非常友好,对于我这种技术水平,肯定是非常合适的。
2023-12-13 16:59:41 360
原创 GitHub Copilot 替代品?
应该没人不知道代码补全这个东西了吧,第一次使用 GitHub Copilot 之后,只觉得真香,现在居然还有一点离不了了。后面因为收费原因,就没再用了,找了一个 tabnine 替代,用了几天,体验是真的比不上 GitHub Copilot。现在市面上 AI 代码提示补全的插件蛮多的,好用不好用就得另说了,今天推荐几个。功能、支持的 IDE、支持的语言,大同小异。
2023-11-24 16:53:49 1449
原创 Web Component
MDN 上面的解释是 Web Component 是一套不同的技术,允许你创建可重用的定制元素(它们的功能封装在你的代码之外)并且在你的 web 应用中使用它们。其实挺语义化的,就是组件的意思。相对于 react 和 vue 可以很容易的创建一些组件,原生的最早之前对组件的概念非常弱。Web Component 的一个愿景就是可以使用原生的创建组件,跨越不同团队不同项目不同框架共用组件。
2023-11-14 13:56:54 123
原创 tailwindcss 与 daisyUI
说句实话,开发过的大部分项目,UI 都是参考了 element、antd 等流行的 UI 组件库,而且一些组件是真的开箱即用,如果只是 input、button、select 等,很容易就封装了,但是一些 swiper、transfer、tree、dialog 等,涉及交互的,要自己封装一遍,是真的有难度,时间成本也真的挺高的。其实代码是否优雅,取决于写代码的人,不在于插件、框架,所以使用tailwindcss存在的那些问题,肯定也是有很好的解决方式,只是还没get到。,确实是非常精美的 UI 库。
2023-11-09 16:39:31 237
原创 内网穿透 cpolar
为什么需要内网穿透,因为公网 IP 是有数量限制的,IPV4(由 32 位二进制数组成)只有 2^32 个,IPV6(由 128 位二进制数组成)理论有 2^128 个,所以没法满足公网 IP 人手一个。然后就是下载,windows 直接双击安装,一直 next 就行,然后链接账号,打开 cmd,输入第三步给的命令,不需要./,生成之后就可以直接用了。用 vite 新建项目进行穿透映射,发现,本地开发的时候,可以实时的更新,外部访问就跟本地开发一样,挺有意思的。,注册一下,选择免费的套餐。
2023-11-02 14:40:12 178
原创 有人真的会去分析代码吗
不分析不知道,其中一个也没这么大,也是怪自己,当时为了扫码,用了好几个插件,代码没删除,所以这么大。而 lodash,最开始的时候没去查一下,lodash 提供了 esmodule 版本,可以按需引入,因为使用的也没有点多,改不改还在思考中(大概率是不改了,怕麻烦)。挺好用的,如果每个项目都大概分析一些,一些比较大的文件,进行优化,应该对越来越大的项目有挺大的帮助,只是,有人真的会去这样分析项目吗。所以,真的有人会去分析代码吗,还是,所做的项目,所在的团队,所在的公司,真的有在做这件事?
2023-08-11 15:03:09 110
原创 程序员也有资源可以互换?
好像每一个到了 30 的程序员都会发出一些不是很正能量的感慨。各种中年危机、离职 X 个月、被裁、转行等的分享文章在不同平台都能搜索到。
2023-07-24 14:45:43 66
原创 本地调试 https
前端开发,正常情况是不需要用到 https,免不了一些比较特殊的功能需要 https 才能调试,之前做的拍照扫码之类的,要用到摄像头,电脑 localhost 可以直接用,想用手机去测试就得 https。如果都是用 webpack、vite 等搭建的项目,自带提供了 https 的启动。除了自带的会很方便调试,其他就得自己本地安装证书了,用 OpenSSL 之类的,按照文档一步一步下来应该也能实现,只不够对于小模块功能调试,最理想的还是能快速启动,而不是还需要生成配置之类的。
2023-07-12 15:50:03 153
原创 vite新建vue3项目及安装插件笔记
有时候安装了依赖,typescript 会报错,修改编辑器和项目的 typescript 版本,ctrl+shift+p,然后输入 typescript,选择版本,使用 work space 的版本。tips:后面安装了一些其他东西,不知道为什么主题色不生效了,被覆盖了,在 main.ts 用 import()定时器引入才有用,没找到是因为配置哪个导致的。不知道是不是先入为主的观念,vue 就是使用 element,antd 用过一次,感觉是比 element 好,安装 antd 就不试了。
2023-06-13 17:17:48 2331
原创 了解一下ES module 和 Commonjs
最近测试了几个 ES module 和 Commonjs 的例子,理解了之前不太理解的概念,记录一下。当然,不会系统的从模块化 xxx 开始,要是想多了解的可以去看看阮老师的 Module 那部分。会贴一小部分的代码,不会贴所有验证的代码。
2023-05-26 14:10:46 1036
原创 WEBRTC 实现浏览器拍照
另外视频可以设置前置和后置摄像头,分辨率,video 是对象,user 是前置,environment 是后置,width/height 是分辨率,移动端可能还反着来,就是这个分辨率一直不知道是怎么可以设置全,因为拍照的框是固定的,所以很难设置的刚好,如果只是播放视频还好,通过判断分辨率然后用 css 控制 object-fit,是 cover 还是 contain,如果是 fill 就有肯能变形。欢迎关注订阅号 coding 个人笔记。
2023-04-18 15:13:04 195 1
原创 了解了解设计原则
设计模式都是为了让代码迎合其中一个或多个设计原则而出现的,所以面向对象的设计原则可以说是设计模式的基础思想。也有一些人用 SOLID 表示设计原则,首字母组合,最后一个合成复用原则被认为不够经典也不容易违背。
2023-03-23 09:59:16 195
原创 canvas 实现签名小 demo
现在使用网页进行签名的业务场景非常多,自己用到的就有银行和移动办理业务的时候使用电子签名。网页实现电子签名其实也挺容易的,canvas 标签非常容易实现,再加上可以导出签名图片,几十行代码就实现了。
2023-03-20 16:09:01 101
原创 WebRTC实现一个网页在线录制视频
电脑录制视频几乎不会用到,当有需要的时候就各种找软件找工具,并且都会找免费的。现在市场上肯定有很多符合需求,只是那么偶尔的情况下,而且使用场景不是那么多要求的情况下,一个网页在线直接录屏,nice
2022-11-22 11:23:19 1124
原创 你不知道的cookie
提起cookie最基础的几个属性肯定是可以请求自动携带、大小、本地缓存、后端自动注入、携带cookie会引起跨域。而有几个不常用的却很少提及。
2022-11-17 17:06:31 293
原创 flex的几个属性
flex弹性布局已经是本人开发css布局的第一首选了,各种布局都能够非常轻松的实现,只是一直只使用两个属性justify-content、align-items。当我深入学习了一下各种属性之后,发现之前的用法有点没眼看。
2022-09-23 16:57:03 560
原创 Pinia不就是Vuex5?
刚开始使用vue3的时候,全局状态管理器都是使用pinia。还没去了解的时候并不明白为什么要换掉vuex,毕竟是用了好几年的状态管理器,能达到的效果和语法跟vuex几乎一模一样,所以为什么要换?当时创建模板项目的也没说清楚,就说是vue3团队推荐使用的,大家都在用,那就用吧。其实并不喜欢这样的答案,大家都用那就用。去官网看看,去Vuex GitHub看看,这不就是vuex5吗,只是换了个名字。
2022-09-05 14:36:07 305
原创 了解一下pnpm
pnpm早在五年前就发布了第一个正式的版本,一直到现在使用的还是不多。抛开速度和安全性(并不觉得这两点是抛开npm或者yarn的重点),高效利用磁盘空间和支持monorepo是最大的特性
2022-08-12 13:43:07 1046
原创 了解一下Monorepo
Monorepo和pnpm很早之前听说过,只是一直觉得暂时用不上,就没有去了解。而越来越多的知名开源项目开始使用Monorepo策略,vue3、vite在去年九月十月就迁移使用pnpm。
2022-08-10 15:40:02 307
原创 node版本管理器nvm安装及切换
这两年,只要是安装最新的稳定版本的node,一般都不会出现版本过低的情形。然而,自己碰上了版本过高,依赖安装失败、依赖版本语法不兼容。能怎么办,只能更换版本。第一次安装node,npm版本是跟node版本绑定一起的,之后重新覆盖node,npm并不会跟着更新,需要手动更新npm到最新:npm install -g npm也可以更新到指定版本:npm -g install npm@6.8.0安装node到指定版本方法就多了,最简单就是安装覆盖,没试过使用第三方卸载node再去安装会怎么样,直接覆盖是可以的
2022-06-30 15:40:56 1053
原创 CSS命名法BEM与scoped、module
CSS命名法之BEM与scoped、module。CSS命名其实挺随意的,使用驼峰、-、_都可以,并不影响使用,常用的应该是-和下划线
2022-06-14 15:21:58 242
原创 IntersectionObserver 是否进入了“视口“(viewport)
是否进入视口的使用场景还是很多的,一般第一时间想到的就是监听滚动,关键是scroll很密集,计算量很大,如果做个防抖节流性能还能优化一些,否则性能问题就很有可能发生。IntersectionObserver这个API已经存在很多年了,从来没用过,兼容性几乎也不用考虑:使用API:var io = new IntersectionObserver(callback, option);// 开始观察io.observe(element);// 停止观察io.unobserve(element);
2022-05-27 14:46:10 169
原创 vue使用对象进行父子组件双向绑定
vue父子组件传值,子组件不难直接修改父组件的值,所以都是用emit去修改。vue也提供了.sync和v-model组件传值的语法糖,可以更快的修改,但总归是要使用emit。这次做项目,发现了一个可以直接双向绑定到input的方法,那就是直接传递对象,用深浅拷贝的原理,直接双向绑定。直接引入vue2.x试了一下:<div id="app"> <children :obj="obj"></children></div><script src
2022-05-17 15:14:11 674
原创 npm安装PYTHON env
最近拉了几个GitHub的项目,好多个安装依赖的时候就报错了,其中一个node-sass的我是真没想到。先说说npm、cnpm、yarn install的时候,同一个项目会有不同的结果,在同一个项目下: npm:npm ERR! Found: swiper@6.8.4npm ERR! node_modules/swipernpm ERR! swiper@"^6.3.5" from the root projectnpm ERR!npm ERR! Could not resolve depe
2022-05-11 15:00:35 2407
原创 CSI.JS前端日志系统
做了那么多项目,后端的日志系统是必须的,前端的日志系统倒是从来没做过。 如果有机会,倒是很想试试,今天分享一个前端的报错插件CSI.JS,标题就是重建犯罪现场。 CSI.JS GitHub地址 CSI
2022-05-06 14:15:03 260
原创 vite-plugin-mock使用
开发流程很多,不同公司都有自己的一套流程,甚至一套公司里面不同的组都有自己单独的开放流程。对前端来说,很多情况静态页面写好了,接口给了字段,要是有模拟的数据,页面开发完成,对接的时候只需要稍微调整。所以mock的存在可以节省很多的时间,只不过以前都没用过,因为后端也有很多工具,从来没有前端自己mock过。这次业务需要自己mock数据,所以就使用了一下,发现还挺好用的。今天分享的是vite-plugin-mock,记录一下使用流程及一些用到的配置。安装:npm i mockjs vite-plu
2022-04-15 14:10:02 14322 7
原创 vue模板编译流程
原本是想理一理虚拟dom,结果根本不知道虚拟dom是怎么来的,于是先理清楚模板编译的流程。因为自身能力问题,没法手写实现,只是单纯的理清除模板编译的流程,然后贴一些关键代码,可以自己去源码找到关键的地方。我是直接在vue.js里面直接看,并不是下载vue的npm去找各个模块,所以有什么理解错误的欢迎指教。一、获取HTML(template)先了解一下,vue有两个运行环境的编译,一个是npm运行时的runtime版本,一个是浏览器引入vuejs的runtime-compile版本。runtime
2022-03-31 13:59:23 2177
原创 这应该是性能最优的数组转树结构方法
前端使用树插件是一个非常常见的使用场景。树插件的数据格式在我使用过的插件都是一样的。而这个数据格式是由后端组装好返回给前端还是前端自己组装,这个问题在前端和后端也经常拿来撕逼。大多数情况下后端会组装好,也有一部分前端自己处理,早之前我合作过的一个后端提出了一个观点,浏览器是每一个用户都有的,服务器是所有用户共同访问的,后端递归遍历组装树数据比前端处理更耗费性能。那时候我居然无言以对,几十条数据组装成树结构的数据居然能牵扯到服务器性能问题,那这个服务器还能做什么?也不是想讨论由前端还是后端处理的问题
2022-03-29 14:05:02 1098
原创 学会这几个API,vue3直接上手
vue2开发过项目的,想直接上手vue3很快,几个API熟悉了就够了,其它的特性在使用vue3的过程慢慢去了解。任何在熟悉了使用之后再去研究一些API的原理,慢慢就能把vue3掌握。而且vue3的使用结合ts,开发过程中ts的比重没有那么大,之前分享的ts那些基础会了,完全就够用来开发了。全局 API 和应用 APIvue3的一个新概念,返回一个提供应用上下文的应用实例,应用实例挂载的整个组件树共享同一个上下文:const app = createApp(App);app.use(store).
2022-03-15 14:27:29 1185
原创 typescript基础笔记
typescript早在2013年就发布了第一个正式版本,印象中一直到了19年才大火起来。三年过去了,一直是可用可不用的状态,于是很多人都没学习使用。直到react和vue开始捆版上了ts,前端圈也开始了“内卷”,ts已经是不得不用的状态了。这次分享的是自己学习过程觉得掌握了就可以上手的内容,上手了之后通过项目多实践,实践过程再学习深入的内容,应该就能比较快的掌握。学习过程贴的代码都是在在线的这个平台的演练场调试的:https://www.typescriptlang.org/zh/tips:
2022-03-09 16:02:39 553
原创 快速创建vite+vue3+ts项目及首次缓慢问题
vite推出之后,在国内火的一塌糊涂,在前端圈立马就卷了起来。我这撸着JQ项目的还没开始用过。公司用vite+vue3+ts的项目拿来跑了一下,第一次启动慢的我怀疑人生,后来才知道已经有插件解决了这个问题。先用vite快速创建项目吧,现在快速创建项目的命令很多:npm init vite-app <project name>npm init @vitejs/app两个命令都试了一下,都是可以创建的,创建出来的项目不太一样,第一个vite的版本是"vite": “^1.0.0-rc.1
2022-03-03 15:12:52 4733 5
原创 H5小游戏
最近水群的时候,发现有人分享了纯H5的小游戏,不需要服务器直接就能玩,试玩了几个游戏,是之前挺流行的那些游戏,有兴趣的可以下载下来看看。关注订阅号 coding个人笔记 回复 小游戏...
2022-03-02 15:25:35 3614 3
原创 除了是程序猿
算算时间,敲程序已经是第六个年头了,这个公众号的第一篇文章是2018-05-20,那是第一次离职期间,面试了几家公司,备受打击,于是开始学习和记录。说来惭愧,虽然写了那么多笔记,很多东西学的当下理解了,到现在,忘的也差不多了。能力多少还是长进了,只是长进的程度不高。现在的状态,既想躺平混吃等死,又想努力学习然后平步青云。说回这个号的分享,内容方面没什么体系,也没那么的干货,跟号的名字“个人笔记”确实是做倒了一致,连排版都跟笔记一样。早开始,代码连格式都没有,到现在,排版一如既往的难看。别人的文章,有图有
2022-02-28 17:15:01 156
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人