开发与产品的战争之自动播放视频
起因产品提了个需求,对于网站上的宣传视频,进入页面就自动播放。但是基于我对chromium内核的一些浅薄了解,我当时就给拒绝了: “浏览器不允许”。(后续我们浏览器默认都是chromium内核的,其它内核的应该也是如此,只是我自己没一一验证)
但是,产品拿着一堆竞品过来:”你看看,这个行,这个也行,你们开发行不行”。
作为技术,最怕这种时刻,丢了自己的脸事小,明显这个产品打击面有点大,不能怂,先整理思路,一会甩他脸上。
下面,我们开始来了解了解视频自动播放这个需求。
使用过video标签的肯定知道,现在像下面添加autoplay字段,或者获取元素执行play()方法现在已经不起作用了。
1<video id="video" src="/1.mp4" autoplay controls></video>
12let el = document.getElementById('video');el.play();
那么原因到底在哪呢?其实一个视频能否播放取决于浏览器的播放策略。
播放策略依稀记得几年前的 ...
图片总丢?为何不自己搭建一个图床服务
经常写博客或者Markdown文章的同学都知道,图片资源总莫名其妙丢了,我们或者每次把图片随着md文件移过来换过去,或者找一个提供图床服务的产品,又或者扔到自己的服务器,然后将资源目录发布出来。
但是,这些方法总归存在一些问题,随着md文章移动,容易丢失;放在图床服务,不安全且可能存在提供商关闭后续不可用的情况;放在自己服务器,可行但是上传不太方便,然而借助picGo或者picList接合sftp等等,我们可以实现一个比较不错的图床管理,这也是我一度使用的方式。但是今天我要介绍的不仅仅是PicGo+sftp的方式,而是一个开源服务easyImage,它和picGo来结合管理,这样我就可以不用一直开着我服务器的ssh端口了。
先看看easyImage自己本身的搭建后效果:
再看看我通过和picList结合的效果:
easyImage是一个图床服务,自己本身就支持web端图床管理,见图一。常见功能如下:
支持API
支持仅登录后上传
支持设置图片质量
支持压缩图片大小
支持文字/图片水印
支持设置图片指定宽/高
支持上传图片转换为指定格式
支持限制最低宽度 ...
Nginx配置其实很简单
不管作为前端还是后端,我们工作中或多或少得接触反向代理,比如代理静态页面或者文件,代理接口解决跨域,配置https,缓存,负载等等。而这些需要的满足,我们肯定能接触到Nginx,即使我们使用Caddy等等其它方式,也肯定知道Nginx的存在。如果喜欢命令行,并且熟悉Nginx语法的大牛,可能直接编辑配置文件没什么问题,但是毕竟还是有一些人在命令行里面操作有点麻烦。所以,为什么不试试界面化的Nginx项目nginxWebUI呢?
nginxWebUI常用功能
Nginx代理:Nginx最基本的反向代理等等
https证书管理:管理https证书,自动续签
负载:Nginx负载
静态网页上传管理:一键上传静态网页,然后配置部署
远程服务器:可以管理同样部署nginxWebUI的其它机器的代理配置
开发接口:支持通过接口进行nginx配置,适合一些第三方开发
搭建1. 配置文件第一步,我们还是先利用docker-compose进行搭建。
在我们选定的nginxWebUI数据存储目录,例如我在/docker/nginxWebUI目录下,创建docker-compose.yml文件,并编写脚 ...
包管理工具之npm也慌了?
起因因为npm的种种问题,我很早就换成了pnpm和yarn(但是其实npm也在使用),已经很久没有关注npm的功能更新了。最近无意间进入Node18版本的安装目录,发现其除了常规的node,npm等默认安装了一个新的包corepack,这个就是今天我要分享的东西了。
注: 我因为18版本的node上发现了这个包,目前最新lts已经是20了,最新都21了。后来去追溯其历史发现其已经在14.21.3上就有了,但是14.0.0没有,没再具体去查。
这是一个什么东西呢?来看看官方介绍。
Corepack是一个零运行时依赖的Node.js脚本,用作Node.js项目与其开发过程中所需的软件包管理器之间的桥梁。从实际角度来看,Corepack允许您在不安装Yarn、npm和pnpm的情况下使用它们。
在构建软件包时,只需像平常一样使用您的包管理器即可。在Yarn项目中运行,在pnpm项目中运行,在npm项目中运行。Corepack将捕获这些调用,并根据情况进行处理:
如果本地项目已配置您要使用的包管理器,Corepack将静默地下载并缓存最新的兼容版本。
如果本地项目配置的是不同的包管理器 ...
我的自建博客之旅06之Mrdoc
这个是我折腾笔记项目的最后一篇文章了,这个项目是类似于语雀的文档笔记项目,因为我当初想找一个既可以当做笔记,又可以作为团队文档分享的笔记,除了语雀,就发现了这个项目。
这个开源项目的界面或者文档组织方式其实是我最喜欢的,但是我后来放弃它的原因是它的后台编辑逻辑有点不习惯,并且我还是习惯本地写markdown文件。这个项目有高级版和开源版本,高级版终身1000元左右,但是只能保证更新一年,开源版本其实也已经很稳定了,完全够用,也没有引导买付费版的链接广告什么的。
搭建
创建一个存放MrDoc数据的文件夹,例如/docker/MrDoc,再目录下拉取代码:
1git clone https://gitee.com/zmister/MrDoc.git
在/docker文件夹下创建编写docker-compose.yml文件
12345678910version: "3"services: server: image: zmister/mrdoc:v7 container_name: mrdoc restart: unless-stoppe ...
我的自建博客之旅05之Wiz
这一款感觉已经和博客作用不大了,只是一个笔记应用。
如果你想要一款类似于有道云笔记的私有笔记,那么wiz笔记可能比较适合。
看看这界面,感觉和有道云笔记感觉差不多。
搭建依旧利用docker-compose来搭建。
创建docker-compose.yml文件,编写wiz启动构建脚本。
123456789101112version: "3"services: server: image: wiznote/wizserver:latest container_name: wiz restart: always volumes: - ./wizdata:/wiz/storage #数据 - /etc/localtime:/etc/localtime:ro ports: - "8082:80" # Web界面端口,8082可以自己调整 - "9269:9269/udp"
启动
脚本目录执行以下命令启动服务
1docker-compose u ...
我的自建博客之旅04之Halo
Halo是我无意间发现的一款博客框架,如果你讨厌Hexo,Vuepress等静态框架本地编辑,构建部署等方式,如果你想要一款一次搭建,前台是博客,后台是文章维护,并且支持各种定制化折腾的博客框架,可能Halo会比较适合你。
因为我个人还是比较偏技术,所以最后选用了Hexo,为了省点服务器资源,这款博客服务也就停了,没法预览了,就截取几张图预览预览。
搭建依旧采用docker-compose模式搭建,Halo由服务和数据库构成,我数据库依旧依据自己的习惯采用了pg:
编写docker-compose.yml文件:
123456789101112131415161718192021222324252627282930313233343536373839404142434445version: "3"services: halo: image: halohub/halo:2.12 # 注意,halo每个版本都是单独发布的,截止2024年2月27日是2.11 container_name: halo restart: always ...
我的自建博客之旅03之vuepress和Vitepress
VuePress是Vue 驱动的静态网站生成器。
vitePress则是由 Vite 和 Vue 驱动的静态站点生成器。
预览网址:https://home.dllcnx.com:19999
前言VuePress和VitePress 是一个以 Markdown 为中心的静态网站生成器。我们可以使用 Markdown在新窗口打开来书写内容(如文档、博客等),然后 Vue(Vite)Press 会帮助你生成一个静态网站来展示它们。
VuePress以及后续VitePress诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。其实在国内,因为Vue的特殊地位,前端几乎都因为Vue而了解VuePress和VitePress。因为VuePress是vue2的官方文档构建工具,而VitePress则是vue3的官方文档构建器。两者其实一脉相承,配置也几乎差不多。
通过上面两个官方介绍,大体我们可以看出来。vue2时代,因为vue采用了webpack进行默认项目构建(VuePress v2版本也开始支持vite构建),所以 ...
我的自建博客之旅02之Hexo
上篇主要介绍了一下自己用过的文档或者博客项目,本篇就主要讲一下自己博客搭建的过程。
预览网址:https://dllcnx.com:18888
Hexo其实Hexo严格来说,和Docker没啥关系,针对我来说,可能稍微能扯上点关系的就是我搭建好hexo配置后,配置了持续部署,而持续部署借助的docker环境在服务端进行编译构建的。
1.环境
Node(官方建议Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本。本人版本v18.12.1)
Git
2.初始化博客针对不同hexo版本,其实也要注意Node的版本,建议都最新。
Hexo 版本
最低版本 (Node.js 版本)
最高版本 (Node.js 版本)
7.0+
14.0.0
latest
6.2+
12.13.0
latest
6.0+
12.13.0
18.5.0
5.0+
10.13.0
12.0.0
初始化博客项目:
12345npx hexo init <folder>cd <folder>npm install
scaffo ...
我的的自建博客之旅01
本来题目准备叫”烂大街的博客之旅”,一篇就发完介绍和搭建,但是我2024年给自己定了每周一篇文章的任务,但是大过年期间,一是时间实在不可控,二是发现每一个博客项目都好像有很多注意点需要记录。就水水字数,就分开来介绍。首篇介绍自己搭建博客的想法与心里变化,后边逐个整理部分博客的部署方法。
至于为什么叫”烂大街的博客之旅”呢?记得以前,自建博客还能在简历上面提提分,但是2024年了,博客貌似已经完全没有什么技术含量了,不管复杂还是简单,反正技术博客一搜全是。即使如此,我为什么还要写这篇文章呢?其实也是对自己博客折腾经历心里历程的一个记录,因为最近心态发生了一些变化,回归简单也不在折腾了。同时也给那些因为拖延症有想法搭建但是还没有行动的人,或者还有那些非计算机相关专业的人一个入门引子。
关于我自己博客搭建的经验中,博客按照方式分为静态编译(最终本地写文章,最终编译为静态html网页部署)和服务模式(即搭建服务,前台文章展示,后台文章编辑)。如果按照文章的类别又分为文档类和博客类。其实博客笔记项目几乎琳琅满目,我不可能每个都尝试一遍,所以以下只是部分自己了解或者用过的。
Hexo
静态类博客框 ...