随笔分类 - Html&JavaScript&Css
网页知识
摘要:脚手架大家一定都不陌生,比如我们经常使用的 vue-cli、create-react-app,它可以帮助我们快速的初始化一个项目,无需从零配置,极大的方便我们的开发。到这里你可能会疑惑,既然市面上有成熟的脚手架,为什么需要写一个属于自己的脚手架呢。因为公共脚手架虽然强大,但并不能满足我们的实际开发需求。
例如项目中已有的沉淀,项目架构、接口请求的统一处理、换肤、业务组件、eslint配置等,这些想要用到新项目中,只能通过复制粘贴,会存在以下弊端:
重复性劳动,繁琐且浪费时间
已有项目沉淀分散在各处,很容易有所遗漏
项目间的配置差异很可能会被忽略
人工操作永远都有可能犯错,建新项目时,总要花时间去排错
如果我们自己开发一套脚手架,定制自己的模板,复制粘贴的人工流程就会转换为 cli 的自动化流程, 还可以通过维护不同的模板以适应不同业务需求。既然要开发一套脚手架,站在巨人肩膀上显然省事多了,我们先来看看业界知名脚手架Vue CLI是如何实现的。
阅读全文
摘要:在现有的大环境下,越来越注重用户体验,因此对图片库的要求也日益攀升。从成本的角度来看,使用 AVIF 格式可以节省大量的网络带宽和存储空间,减少网站加载时间,可以改善用户体验,进而提高网站的效率和收益,节约大量的费用。
AVIF 的优点在于它可以提供更好的图像质量和更小的文件大小。与 JPEG 相比,AVIF 可以将文件大小减少50%以上,同时保持相同的图像质量。这是因为AVIF使用了更先进的压缩算法,包括可变长度编码(VLC)、帧间预测和深度学习等技术。
它还支持高动态范围(HDR)和广色域(WCG)图像,这意味着它可以呈现更真实的颜色和更明亮的亮度。这对于需要高质量图像的应用程序非常重要,例如医学成像、卫星图像和艺术品复制等。并且 AVIF 还具有广泛的兼容性。它可以在各种设备和平台上使用,包括桌面、移动和Web。此外,AVIF 还可以与现有的图像格式进行兼容,例如 JPEG、PNG 和 WebP 等。
阅读全文
摘要:交互设计原则有很多,《小红书的52条设计原则》可以学习下,非常棒的输出,值得做产品设计的童鞋学习一下。
阅读全文
摘要:从 1989 年万维网(www)诞生,HTTP(HyperText Transfer Protocol)经历了众多版本迭代,WebSocket 也在期间萌芽。1991 年 HTTP0.9 被发明。1996 年出现了 HTTP1.0。2015 年 HTTP2 正式发布。2020 年 HTTP3 或能正式使用。以下将会简单介绍。
阅读全文
摘要:正文开始之前,我们先要了解一个概念,就是什么是 登录态。
主流Web应用比如浏览器是基于http协议的,而http协议是 无状态 的。什么是 无状态?就是服务器不知道是谁发送了这个http请求,无法识别区分用户身份。
所以登录态就是服务端用来区分用户身份,同时对用户进行记录的技术方案。
阅读全文
摘要:前端界有两个“教派”,一个叫 Vue,一个叫 React。Vue 的成员看不起 React,React 成员鄙视 Vue,他们认为手中的“教义”就是真理,可以消灭世界一切苦难。
但正如没有绝对的真理,也没有绝对完美的系统框架,我们需要一双明辨是非的眼睛去解析所面对的难题,带我们找到正确的方法,解决所面对的困难。我们需要抱着怀疑的眼光去看待现代前端开发框架,它们真的能解决我们的问题吗?答案是肯定的,也是否定的。框架并不能独立的发挥作用,其中开发者是一个很大的变量,而开发者这个最大的变量才是最终影响问题是否能够被解决的重要因素。
本文从对现代前端框架的“崇拜”现象,引出了前端开发面临的过于强调工具本身,忽视了开发者怎么写好代码才是影响代码质量的本质问题,最后给出了一种我认为可解决业务型前端项目的代码架构方案(也可以说是一种开发思想),希望能给大家带来一些思路和帮助。
阅读全文
摘要:自 90 年代初开启 PC 时代以来,随着移动网络的快速普及,在 2010 年左右,进入移动时代、IOT 时代,各种移动互联设备不断涌现,除了最常见的 PC、Pad、智能手机外,它还可能是小小的一块智能手表,也可以是一个大屏终端。智能设备层出不穷,填满了人们生活的各个角落,设备的系统类型、屏幕大小等也是愈发碎片化。
阅读全文
摘要:WebDAV 是超文本传输协议 (HTTP) 的一组扩展,为 Internet 上计算机之间的编辑和文件管理提供了标准.利用这个协议用户可以通过Web进行远程的基本文件操作,如拷贝、移动、删除等。
在IIS 7.0中,WebDAV是作为独立扩展模块,需要单独进行下载,而IIS 7.5以及以上版本中将集成WebDAV,然而WebDav把Put,Delete禁用了。
所以在IIS 7.5上部署的RESTful服务(WCF Data Service,WCF Rest Service,ASP.NET Web API,ASP.NET MVC)后,当发送Put请求就会发生HTTP Error 405.0 – Method Not Allowed错误。
阅读全文
摘要:为了提升应用稳定性,我们对前端项目开展了脚本异常治理的工作,对生产上报的js error进行了整体排查,试图通过降低脚本异常的发生频次来提升相关告警的准确率,结合最近在这方面阅读的相关资料,尝试阶段性的做个总结,下面我们来介绍下js异常处理的一些经验。
阅读全文
摘要:今天我们来聊一个老生常谈的话题,跨域!又是跨域,烦不烦 ?网上跨域的文章那么多,跨的我眼睛都疲劳了,不看了不看了 🤣 别走...我尽量用最简单的方式将常见的几种跨域解决方案给大家阐释清楚,相信认真看完本文,以后不管是作为受试者还是面试官,对于这块的知识都能够游刃有余。
阅读全文
摘要:就像在学习之前先要识字,我想在介绍优化 JavaScript 代码之前,先介绍一下自己对编程语言的理解。故事要从一只叫做 Theseus 的机械鼠和其发明人克劳德-香农(Claude Shannon)说起。在传记《A Mind at Play:How Claude Shannon Invented the Information Age》中,作者 Jimmy Soni 和 Rob Goodman 强烈希望将香农的作品 Theseus 展示给广大读者。面对复杂的迷宫,Theseus 仅用一堆继电器、ROM 存储等简单而古老的电子元器件,就完成了对复杂迷宫的探索和成功线路的记忆,第二次沿着正确道路走出迷宫的 Theseus 没犯一点儿错误。大多数人认为这不过是骗人的把戏和小玩意儿,弃之如敝履。少数聪明人眼里 Theseus 蕴含的惊人智慧简直可以和牛顿、爱因斯坦媲美,香农凭借一己之力将布尔代数引入电子电路设计启发了后世数字电路乃至计算机的发明。
阅读全文
摘要:导读:面对多种多样的跨端诉求,有哪些跨端方案?跨端的本质是什么?作为业务技术开发者,应该怎么做?本文分享阿里巴巴ICBU技术部在跨端开发上的一些思考,介绍了当前主流的跨端方案,以及跨端开发的经验心得。
阅读全文
摘要:随着前端的范畴逐渐扩大,深度逐渐下沉,富前端必然带来的一个问题就是性能。特别是在大型复杂项目中,重前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至崩溃。本文基于Quick BI(数据可视化分析平台)历年架构变迁中性能的排查、解决和总结出的“个性”问题,尝试总结整个前端层面相对“共性”的问题,提供一些前端性能解决思路。
阅读全文
摘要:Web 水印技术在信息安全和版权保护等领域有着广泛的应用,对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印(盲水印),本文将分别予以介绍,带你探秘 web 水印技术。
阅读全文
摘要:对于开发者而言,网络安全的重要性不言而喻。任何一处代码错误、一个依赖项漏洞或是数据库的端口暴露到公网,都会有可能直接送你上热搜。
那么,哪里可以找到详细的避雷指引呢?OWASP's top 10 清单太短了,而且它更关注的是漏洞罗列,而非对预防。相比之下,ASVS 是个很好的列表,但还是满足不了实际需求。
本文这份清单将介绍 72 个实操要点,让你全方位保护你的 Web 应用程序。各位看官,准备入坑啦!
阅读全文
摘要:在使用flv.js播放高清视频时出现Failed to execute ‘appendBuffer’ on ‘SourceBuffer’ 错误,反复查询资料均没有明确解决方法。 最终在https://github.com/Bilibili/flv.js/issues/256找到了原因。 问题解决:在
阅读全文
摘要:介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handleba
阅读全文
摘要:脚本用于在Chrome的Console内定时刷新网页 timeout=prompt("Set timeout (Second):"); count=0 current=location.href; if(timeout>0) setTimeout('reload()',1000*timeout);
阅读全文
摘要:live2d-widget-model-gf
live2d-widget-model-haru/01
live2d-widget-model-haru/02
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
阅读全文
摘要:经常我们打开外国网站的时候出现乱码,又或者打开很多非英语的外国网站的时候,显示的都是口口口口口的字符, WordPress程序是用的UTF-8,很多cms用的是GB2312。 ● 为什么有这么多编码? ● UTF-8和GB2312有什么区别? ● 我们在国内做网站是用UTF-8编码格式还是GB2312编码格式好? 一. 各种编码的来历 可能很多同学...
阅读全文