搞懂现代Web端即时通讯技术一文就够：WebSocket、socket.io、SSE
1、引言有关Web端即时通讯技术的文章我已整理过很多篇，阅读过的读者可能都很熟悉，早期的Web端即时通讯方案，受限于Web客户端的技术限制，想实现真正的“即时”通信，难度相当大。传统的Web端即时通讯技术从短轮询到长连询，再到Comet技术，在如此原始的HTML标准之下，为了实现所谓的“即时”通信，技术上可谓绞尽脑汁，极尽所能。自从HTML5标准发布之后，WebSocket这类技术横空出世，实现Web端即时通讯技术的便利性大大提前，以往想都不敢想的真正全双工实时通信，如此早已成为可能。本文将专门介绍WebSocket、socket.io、SSE这几种现代的Web端即时通讯技术，从适用场景到技术...
分享20款响应式CSS框架，你平时开发用的是哪一款？
使用 CSS 框架是当前大部分前后端开发人员都会选择的，CSS框架的好处是帮开发人员节省了开发时间，提高了工作效率，改善用户体验，并且能很好的解决各种浏览器之间的兼容性问题。当然也会存在代码冗余，影响网站打开速度，但是对于好处来说这些问题都不是问题。接下去我会分享我所知道的所有的CSS框架，尽量把网络上现有的框架都收集起来，方便网友们的选择和比较。（框架顺序不代码框架的好坏）Bootstrapwww.bootcss.comBootstrap 就不多做介绍了属于老牌框架了，国内教程地址：www.bootcss.com（非官网），该网站目前已经整理了从2.0~5.0的所有教程资料。layuiwww...
一些不好记却很好用的 CSS 属性
前言在写过一段时间 CSS 之后，大家对于常见的属性应该都很熟悉，例如最基本的 display、position、padding、margin、border、background 等等，在写 CSS 的时候不需要特别查什么东西，很顺的就可以写出来。这些属性之所以常见，是因为许多地方都用得到，而有些 CSS 属性只能使用在某些特定的地方，或者只有在某个特定的情境之下才会出现。我经常会忘记这些没不常的属性，但有时候这些属性其实特别重要。所以本文介绍一些我觉得不太好记但是却很好用的 CSS 属性，也是顺便帮自己做个笔记。input 的外框与 “|” 的颜色比起 border， outline 是一个...
H5项目适配系统深色模式方案
一、背景随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比,还能 提供更好的可视性和沉浸感。如何切换深色模式iOS：“设置”--“显示与亮度”--“外观”，选择“深色”Android：“系统设置”--“显示”--“深色模式”。二、问题如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。所以，需要对深色模式进行一些适配。我尝试了一些方案：三、H5项目适配深...
使HTML 5数字输入仅接受整数
这两年我看到很多关于这方面的文章和帖子，这的确是一个非常方便的东西。但是，太多的实现还是有漏洞，残缺不全的实现，等等。整体概念是合理的：使用HTML 5属性来限制可以发送到服务器的内容，然后使用Javascript增强它，以限制用户可以在第一个地方输入的内容。所以让我们来看看这些问题，并更好地实现它。问题1，不好的脚本最常见的缺陷是缺乏适当的降级功能。 如果您要在“electron”或“nw.js”中构建完整的堆栈应用程序，那很好，但是这种形式的东西通常在面向公众的网站中没有位置。就像我经常说的那样，高质量的脚本应该增强已经在工作的页面，而不是用户使用它的唯一方法。解决办法？使用 patter...
链接是Web的核心元素
链接是HTML的基础元素，因为Web的设计初衷就是想把一组文档彼此链接起来组成信息分享网络。HTML的超文本（Hyper Text）部分定义了链接的类型即：超文本链接（hypertext links）,也就是超链接（hyperlinks）。在HTML中，链接是内联元素，使用<a>标签。href（hypertext reference） 属性用来定义链接的目标地址（当点击时跳转或新打开的网页地址）。<p> 要搜索网页动画，请访问 <a href="//www.techbrood.com">Techbrood</a>. </p>要搜索...
用HTML5构建一个流程图绘制工具
在我们的开发工程中经常会使用到各种图，所谓的图就是由节点和节点之间的连接所形成的系统，数学上专门有一个分支叫图论（Graph Theroy）。利用图我们可以做很多工具，比如思维导图，流程图，状态机，组织架构图，等等。今天我要做的是用开源的HTML5工具来快速构造一个做图的工具。工具选择工预善其事，必先利其器。第一件事是选择一件合适的工具，开源时代，程序员还是很幸福的，选择很多。flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chartgo.js http://www.gojs.net/latest/index.ht...
H5聊天video标签和视频文件下载那些怪事
最近在做一个即时聊天项目，用户要求除了可以发送图文，还要发送视频信息。刚开始觉得很简单呐，和普通文件下载不是一样？！谁知联调过程中就垮了，视频加载贼慢，根本无法观看。有的视频还没法加载，你知道的，前端直接裂了！！！<video autoplay loop > <source src="//localhost:8080/gesture.mp4" type="video/mp4"> </video>原来是保存文件时，没有存储文件的content-type，读取的时候都默认成oct-stream文件下载了。但是一个2分钟的视频加载了半天，才能播放。肿么回事...
一个支持将html转为PDF、图片，且支持PDF加水印的项目
今天给大家推荐的这个开源项目是来自于读者的投稿，我超级喜欢这个开源项目。尤其是做小程序开发的时候，经常遇到将内容生成图片分享到朋友圈。这个开源项目就能够解决你的问题，可以将 html 转为图片，还可以转为 PDF ，还支持加水印。这个开源项目就是：Doctron，它是基于 Docker、无状态、简单、快速、高质量的文档转换服务。目前支持将 html 转为 pdf、图片 (使用 chrome (Chromium) 浏览器内核，保证转换质量)。支持 PDF 添加水印。作者认为目前开源界没有较好的服务器端 HTML 转 PDF、图片的工具，像 wkhtmltopdf、dompdf、mpdf 等这些比...
HTML5最新版本介绍
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本，由一群自由思想者设计，最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本，它是用于生成现代 Web内容的一系列相关技术的总称，其中最重要的三个技术是：HTML5核心规范(table)、 CSS (class style)和 JavaScript。一．HTML5 的历史 HTML在1993年第一次作为互联网草稿发布，随后经历了2.0、3.2和4.0，直到1999年 HTML4.01版本稳定下来。慢慢地，随着发展，越来越严格的 XHTML取代了它。XHTML 的兴衰史 ...