技术研究
文章平均质量分 89
canyuegongzi
天地一散人
展开
-
如何在Kubernetes中使用cert-manager部署SSL
目前大部分的网站已经升级到 HTTPS,使用 HTTPS 就需要向权威机构申请证书,需要付出一定的成本,如果需求数量多,也是一笔不小的开支。cert-manager 是 Kubernetes 上的全能证书管理工具,如果对安全级别和证书功能要求不高,可以利用 cert-manager 基于 ACME 协议与 Let’s Encrypt 来签发免费证书并自动续期,实现永久免费使用证书,本文主要来记录如在 k3s(单机版 k8s )部署 ssl。原创 2022-12-04 00:15:22 · 861 阅读 · 1 评论 -
作为前端还在使用GIF动画吗?换一种更优雅的方案吧
动画需求在业务开发中是很常见的功能,无论是客户端开发、Web 开发、还是桌面端开发,为了产品有更好的用户体验,UED 设计的视觉效果也愈发的复杂,一般些简单的淡入淡出,旋转效果开发花费些时间即可搞定,甚至稍微复杂些的动画多花费些时间也能完成原创 2022-11-06 23:23:01 · 1121 阅读 · 0 评论 -
如何花一天时间打造一款前端在线代码编辑器——实现代码预览
好久都没写博客了,这两天稍微空闲些打算找个技术专题来写一些东西。本想写写最近非常火的 Turbopack,但考虑到没有深入的研究其运行原理,如果要写可能就要是流于表面讲讲用法,感觉价值也不是很高,故此还是选了之前预研过的在线编辑器。目前社区中一些开源的框架在部署文档时为方便开发者快速了解使用,都会实现一套自己的在线编辑器。如掘金-Code。原创 2022-10-31 01:35:51 · 3519 阅读 · 0 评论 -
新生代的原生 WebComponent 架构设计,邀请你一起参与共建
前言经过一段儿时间对之前 web-core-plus 的架构进行了重新梳理、重构,并在此基础了实现了大部分 ElementUI 的样式组件以及 Api,统一封装成新的 WebComponent 组件库 web-plus-ui。相关资料官方文档项目组织代码仓库WIP(web-core-plus):点击查阅 core 库进度WIP(web-ui-plus):点击查阅 UI 库进度npm包(后面考虑换名)@canyuegongzi/web-core-plus@cany原创 2022-05-29 17:26:55 · 842 阅读 · 6 评论 -
前端开发中如何实现WebGIS数据可视化(四)——鼠标事件
在之前的历史文章中介绍了 leaflet、mapbox、cesium 三种框架下的一些基本操作(点、线、面绘制),除简单的绘制之外,日常基本开发中可能还会用到地图的事件系统(如地图点击),这篇文章先通过点位拾取的功能简单了解下三种框架下不同的事件处理。通过这篇文章,能够有这些收获:- 在 leaflet、cesium、mapBox 中如何进行鼠标事件原创 2022-05-15 19:08:52 · 906 阅读 · 0 评论 -
高级前端如何更优雅的定义WebComponent
前言WebComponent 方式是实现组件化的一种解决方案,目前社区内也有很多成熟对方案,如 Omi 、stencil , 其中腾讯前端团队的 Omi 方案还是相当完善的。早些时间 笔者也在 Omi 的基础上封装了 @canyuegongzi/web-core ,但目前此种方案在使用方面尚存在不足,诸如属性定义繁琐、事件抛出缺乏灵活性、数据无法响应式等;故此最近在 web-core 基础上对相关的逻辑做了重构、升级成为 @canyuegongzi/web-core-plus 。简单对新旧定义组件方式原创 2022-04-17 18:31:22 · 779 阅读 · 2 评论 -
前端开发中如何实现WebGIS数据可视化(一)——地图创建、点位绘制
前言随着前端开发趋于复杂化,地图(Gis)已经成为大多数系统必不可少的一部分,从最常见的 Gis 可视化(点、线、面、各种弹框、插值)到三维模型、场景模拟、场景监控等。主流的智慧园区、智慧城市、数字孪生等基本都离不开 webGis 的开发。通过这篇文章,能够有这些收获:了解常见的 webGis 的实现方式通过 leaflet、cesium、mapBox 创建地图在 leaflet、cesium、mapBox 通过不同方式绘制 Marker文章中相关代码均已提交到 github,欢迎 star原创 2021-07-17 22:26:41 · 18835 阅读 · 4 评论 -
前端中如何使用webWorker对户体验进行革命性的提升
前言随着前端应用场景的逐渐复杂化,伴随而来的对大数据的处理就不可避免。 那么今天就以一个真实的应用场景为例来谈谈前端中如何通过子线程来处理大数据。目前主流显示器的刷新率为 60Hz,即一帧为 16ms,因此播放动画时建议小于 16ms,用户操作响应建议小于 100ms,页面打开到开始呈现内容建议小于 1000ms。– 根据 Chrome 团队提出的用户感知性能模型 RAIL。以上这段应用是 google 团队提出的用户最优体验模型,从 js 运行的角度,大致意思就是尽量保证每一个 js 任务在最原创 2021-06-11 23:58:35 · 447 阅读 · 0 评论 -
k3s系列(一) —— 环境准备及k3s安装
概述K3s 是一个轻量级的 Kubernetes 发行版,它针对边缘计算、物联网等场景进行了高度优化,简单来说就是低配版的k8s;rancher官网,特点如下。简单但功能强大的 batteries-included 功能本地存储提供程序,服务负载均衡器,Helm controller 和 Traefik Ingress controller。使用基于 sqlite3 的轻量级存储后端作为默认存储机制。同时支持使用 etcd3、MySQL 和 PostgreSQL 作为存储机制。最大程度减原创 2021-05-04 16:30:16 · 2089 阅读 · 4 评论 -
前端聚合系统【qiankun】(集成用户权限、布局风格)
概述主系统采用乾坤集成react技术栈,子系统技术栈不限,docker部署;乾坤预览技术栈:主系统:React + Antd + qiankun子系统:Vue演示地址演示地址github系统截图主系统设计框架搭建系统基础搭建// 脚手架创建基础代码npx create-react-app simple-main-app-web// 暴露配置(能更好的优化webpack打包)npm run ejectqiankun常用apia. registerMicr原创 2021-01-04 22:28:08 · 2776 阅读 · 12 评论