吱托邦

其实我们在写前端项目代码的时候，会使用npm install命令下载某个第三方依赖库到项目。之后在开发过程中就很少会去更新它的版本，因为项目一旦稳定运行了，再去更新依赖库到别的版本或者最新版，很可能会导致兼容性问题，明明项目代码完全没有bug和报错，搞不好就弄一堆bug出来了。

有没有一种方法，让我们无需使用非常复杂难用的专业软件，就可以轻松将不同文件格式的照片压缩到自己所需的文件大小呢？比如将一张1MB大小的jpg格式照片，非常快捷地压缩到100KB大小，从1MB到100KB大约缩小了十倍体积，且清晰度不受到很大的损失。当然是有的，毕竟现在网络科技都这么发达了，很多工具都从本地化转为了在线化，直接在浏览器上就可以实现我们这些小需求。

最近在一个前端项目中，需要实现div元素的高度随着其内部组件数量的变化，而增加高度的情况。具体来说就是，比如现在初始化状态下div的宽度为100%，高度为1000px，如果div里面的组件在增加，并且增加超过了1000px的高度，那么就将div高度修改为2000px，如果div内部组件在减少，并且小于了1000px，那么就将div高度从2000px减少为1000px。

最近在项目中的很多地方需要使用到输入框，以前我自己包括绝大多数人都会想到直接使用input吧，比如vuejs项目配合elementui的el-input组件也比较好用。但是当前的这个项目却不适合使用el-input，甚至连原生的input也不适合使用，为什么呢？第一是输入框原本的样式不适合这个项目，修改el-input和input的样式都有点麻烦；其次最大的问题在于，input很难随着输入内容的增加减少而相应的改变宽度，input一般是固定了某种宽度的，它不能做到fit-content特性。

最近在一个vuejs的前端项目中，需要实现一个通过鼠标点击并拖拽，让页面中的图片框位置发生移动的功能。该图片框是浮在其父div元素之上的，并不参与到其父div的文档结构中。由于功能比较简单，因此没有去用一些复杂的方法或者组件来实现该功能。而且虽然是vue的项目，但是这个功能更应该使用原生的ondrag方式去实现。

quilljs是非常常用并且很经典的一款网页前端富文本编辑器，功能非常的丰富，在vuejs项目中有着广泛的使用。不过在实际实践的过程中遇到一个问题，这个问题的根源在于，quill编辑器会将用户粘贴进来的图片转换成base64格式，并保存到生成的html字符串中。而这个生成的html字符串最终会通过接口发送到服务器，保存在数据库中。可是图片被转为base64格式之后，是很长的一段字符串，会导致整个html字符串的长度超出数据库字段类型的存储上限，从而导致系统报错。

HEXO博客系统是非常受大家欢迎的一款静态博客建站框架，并且提供非常丰富多彩的主题扩展。同时，如果有一定的编程能力，可以自己动手搭建适用于自己的hexo主题，或者对其他人制作的主题进行改造。它的默认主题非常朴素，因此基本上大家都会选择一些比较出名的hexo主题使用。当我们从github克隆安装了第三方主题之后，想要把hexo博客连带主题文件夹整体推送同步至自己的私人github仓库中，却发现无法完成，那么我们该如何处理呢？

我们经常可以看到一些博客之类的网络站点，在其页面上会存在一个“随机文章”板块。通过随机文章板块，可以吸引并促使用户点击网站中的其他文章，提高了用户浏览的深度和广度，对网站十分有利。同时，从SEO的观点来说，随机文章板块可以有效地促进搜索引擎对网站中更多网页的爬取和收录。那么，我们如何在HEXO博客的NEXT主题下，编写修改NEXT主题的代码实现一个“随机文章”功能呢？

GIF动图是在全世界互联网中广泛传播的一种图片文件格式，深受全球网民的喜爱。尤其是近几年，移动互联网的兴起，使得各类表情包大量涌现。大家非常乐于在网络聊天时，发送给对方各种自制的或者收藏的自定义表情包，用以形象生动地表达自己此刻的情绪。这类丰富多彩、包罗万象的表情包说白了其实都是GIF格式的文件。不过众所周知，在很多APP或者平台中，用户想上传自制的GIF文件时，很可能会被提示“表情包文件过大”、“动图大小不能超过3M”这类限制。那么我们怎样能够把GIF动图文件的体积大小进行压缩呢，下面一起来看看。

我们在使用elementui中的form表单组件的时候，经常会需要对表单项目的输入值进行严格的验证，这样才能保证前端提交的表单值是符合系统定义规则的，一方面提升用户体验，同时不容易引起后端代码的异常报错或崩溃，显著提高程序的健壮性。不过按照实例在写表单验证代码的时候，明明在规则rule中设置了type:’number’，却还是无法验证el-input组件中的输入值，让人摸不着头脑。