1、引言有关Web端即时通讯技术的文章我已整理过很多篇，阅读过的读者可能都很熟悉，早期的Web端即时通讯方案，受限于Web客户端的技术限制，想实现真正的“即时”通信，难度相当大。传统的Web端即时通讯技术从短轮询到长连询，再到Comet技术，在如此原始的HTML标准之下，为了实现所谓的“即时”通信，技术上可谓绞尽脑汁，极尽所能。自从HTML5标准发布之后，WebSocket这类...

使用 CSS 框架是当前大部分前后端开发人员都会选择的，CSS框架的好处是帮开发人员节省了开发时间，提高了工作效率，改善用户体验，并且能很好的解决各种浏览器之间的兼容性问题。当然也会存在代码冗余，影响网站打开速度，但是对于好处来说这些问题都不是问题。接下去我会分享我所知道的所有的CSS框架，尽量把网络上现有的框架都收集起来，方便网友们的选择和比较。（框架顺序不代码框架的好坏）B...

前言在写过一段时间 CSS 之后，大家对于常见的属性应该都很熟悉，例如最基本的 display、position、padding、margin、border、background 等等，在写 CSS 的时候不需要特别查什么东西，很顺的就可以写出来。这些属性之所以常见，是因为许多地方都用得到，而有些 CSS 属性只能使用在某些特定的地方，或者只有在某个特定的情境之下才会出现。我经...

这两年我看到很多关于这方面的文章和帖子，这的确是一个非常方便的东西。但是，太多的实现还是有漏洞，残缺不全的实现，等等。整体概念是合理的：使用HTML 5属性来限制可以发送到服务器的内容，然后使用Javascript增强它，以限制用户可以在第一个地方输入的内容。所以让我们来看看这些问题，并更好地实现它。问题1，不好的脚本最常见的缺陷是缺乏适当的降级功能。 如果您要在“electr...

在我们的开发工程中经常会使用到各种图，所谓的图就是由节点和节点之间的连接所形成的系统，数学上专门有一个分支叫图论（Graph Theroy）。利用图我们可以做很多工具，比如思维导图，流程图，状态机，组织架构图，等等。今天我要做的是用开源的HTML5工具来快速构造一个做图的工具。工具选择工预善其事，必先利其器。第一件事是选择一件合适的工具，开源时代，程序员还是很幸福的，选择很多。...

最近在做一个即时聊天项目，用户要求除了可以发送图文，还要发送视频信息。刚开始觉得很简单呐，和普通文件下载不是一样？！谁知联调过程中就垮了，视频加载贼慢，根本无法观看。有的视频还没法加载，你知道的，前端直接裂了！！！<video autoplay loop > <source src="//localhost:8080/gesture.mp4" type...

今天给大家推荐的这个开源项目是来自于读者的投稿，我超级喜欢这个开源项目。尤其是做小程序开发的时候，经常遇到将内容生成图片分享到朋友圈。这个开源项目就能够解决你的问题，可以将 html 转为图片，还可以转为 PDF ，还支持加水印。这个开源项目就是：Doctron，它是基于 Docker、无状态、简单、快速、高质量的文档转换服务。目前支持将 html 转为 pdf、图片 (使用 ...

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本，由一群自由思想者设计，最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本，它是用于生成现代 Web内容的一系列相关技术的总称，其中最重要的三个技术是：HTML5核心规范(table)、 CSS (class style)和 JavaScript。一...

说到表单其实在生活中可以接触到各种各样的表单，主要目的就是让用户填写来「收集用户信息」。初看这些表单，你可能觉得很简单，就是一些标签、非常基础的小组件，但是在实际业务中，想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节，常常会让设计师陷入无限的纠结中，比如：文字标签是左对齐还是右对齐？确定按钮是放左边还是右边？控件颗粒长度是整齐划一还是与输入预期一样错落有致？反馈内容...

简单调用就能满足网址扫码预览和分享、登录扫码认证等二维码功能。QRCanvas 能用来做什么动态生成带二维码的海报是业务型产品中很常见的需求，之前分享过如何通过 html2canvas 将html+css写出来的布局生成海报，而今天分享的 QRCanvas 则是专门满足如何在前端生成动态二维码的需求。QRCanvas 功能特性API 非常简单，简单到只需要一个文本参数就能生成二...

上传文件的能力是许多Web和移动应用的关键需求，从将照片上传到社交媒体上到将简历发布到工作门户网站上，文件上传无处不在。作为一名Web开发人员，我们一定知道HTML提供了原生文件上传的支持，并借助于JavaScript的一点帮助。在HTML5中，File API被添加到DOM中。利用它，我们可以读取 FileList 和其中的 File 对象，这就解决了文件的多种用例，即在本地...

作为服务端开发的同学，经常会与linux服务器打交道，一些用的命令必须要掌握。1.top命令-观察服务端负载情况top命令是Linux下常用的性能分析工具，能够实时显示系统中各个进程的资源占用状况，类似于Windows的任务管理器1.top命令2.free命令-查看服务端内存情况free 命令显示系统内存的使用情况，包括物理内存、交换内存(swap)和内核缓冲区内存2.free...

介绍Quill是一个所见即所得的富文本编辑器，是一个集兼容性和可扩展性于一体的优秀编辑器，Githubhttps://github.com/quilljs/quillQuill特点开发友好通过简单的API可以细粒度地访问编辑器的内容，更改和事件。使用JSON作为输入和输出一致且确定性的工作兼容性好支持台式机，平板电脑和手机上的所有现代浏览器。体验相同的一致行为，并跨平台生成HT...

介绍GSAP是一个JavaScript库，用于构建可在每种主流浏览器中使用的高性能动画。CSS动画，SVG，画布，React，Vue，WebGL，颜色，字符串，运动路径，通用对象... JavaScript可以接触的任何东西！ScrollTrigger插件可让你以最少的代码创建令人叹为观止的基于滚动的动画,GSAP解决了无数浏览器不一致的问题。以下是一个官方简短的视频介绍： ...

图片合成最常见的需求有验证码图片，亦或者图片加水印等，这种实现一般都是后端实现的。随着HTML5发展和现代浏览器的占比越来越高，我们其实也可以在前端直接进行图片的合成。优点在于，响应更快，体验更好；如果是和文字进行合成，我们可以利用客户端字体，视觉展现效果更丰富；同时展示和合成全部都是前端完成，因此更利于维护。这里通过举个例子，演示如何在前端实现多个图片合成的效果，主要是借助H...

之前有给大家分享2个超棒的视频播放器。今天继续分享一款高质量的H5视频播放器插件LivePlayer。HTML5 开源视频播放器DPlayerVue 视频播放组件Vue-CoreVideoPlayerliveplayer 一款集m3u8、rtmp、hls、flv于一身的H5视频流媒体播放器。使用简单，功能强大，免费使用。功能特点支持MP4播放;支持m3u8/HLS播放;支持HT...

虽然是要Canvas和SVG，但每次提起Canvas，脑海总会想起SVG，因此先做个简单的对比。 *Canvas 和 SVG 对比 Canvas 和 SVG 都是 HTML5 中推荐的也是主要的2D图形绘制技术Canvas 提供画布标签和绘制API，技术比较新，注重栅格图像处理。SVG是一套独立的矢量图形语言，成为W3C标准已经有十几年，发展缓慢。Canvas 基于像素，提供 ...

CSS是Web开发的基础之一。但是，我们中的一些人却感到非常困惑。这是因为我们没有遵循适当的学习流程，因此我们很难理解CSS的行为。本文旨在通过两种方式为你提供CSS的学习帮助：借助专用工具对CSS进行编码以及通过一些交互环境学习CSS。网上学习制作工具1、 EnjoyCSS地址：https://enjoycss.com/这个工具非常简单，是我们学习使用CSS时的救星。你可以使...

介绍Xterm.js是一个用TypeScript编写的前端组件，它允许应用程序在浏览器中为用户提供功能齐全的终端。它被VS Code，Hyper和Theia等热门项目所使用。Github（7k stars）https://github.com/xtermjs/xterm.js组件特性终端应用程序正常工作：Xterm.js适用于大多数终端应用程序，如bash，vim和tmux，这...

前言“字节跳动”现今也是如日中天，旗下产品，除头条外，还有短视频平台“抖音”，人气也是非常高，据说拥有7亿用户。今天我们就来研究研究抖音的logo，蹭蹭热度。效果预览：CSS3动画解析抖音 LOGO制作主要用css3新增属性mix-blend-mode，混合模式来实现。分解我们先来看看它的组成，由大写的“J”组成，然后有3种颜色，白色、红色、和天蓝色。ok，我们先来完成一个“J...

介绍Anime.js是一个轻量级的JavaScript动画库，具有简单但功能强大的API。它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。Github在Github上已收获近35k的star数，可见其非常受广大使用者的热爱！https://github.com/juliangarnier/anime/特性复杂的交错动画变得简单css分层转换在单个HTML元...

介绍和往常一样，jsPDF是一个开源的客户端的PDF解决方案，在之前的文章中已经介绍过几个Web端和PDF相关的库，jsPDF同样是一个不错的客户端PDF引 SDK，你可以通过jsPDF在客户端完成相关操作，它包含了非常丰富的API，帮助你完成一系列的复杂操作！可以说它是相当领先的HTML5客户端解决方案了！Githubhttps://github.com/MrRio/jsPD...

1、组件简介webuploader（官方定义）：是一个以 HTML5 为主， Flash为辅的文件上传组件，采用大文件分片/并发上传的方式，极大地提高了文件上传的效率，同时兼容多种浏览器版本；链接： WebUploader官网.2、前端代码实现首先，下载组件，并引入到项目文件；t/wealth_nana/article/details/105051649本例子模拟后台所需参数：...

Flash死亡，Adobe推荐大家拥抱HTML5。其实Flash本身也是支持手机端的。一、Flash宣告死亡Adoebe官方网站发布了公告，2020年12月30日起终止支援Flash。目前Chrome、Edge等浏览器都会有提醒。用户默认不开启Flash，如果页面视频采用Flash进行播放，都会收到如下提示：==默认被阻止====阻止了Flash====需要手动开启，才能打开F...