1

搞懂现代Web端即时通讯技术一文就够:WebSocket、socket.io、SSE

1、引言有关Web端即时通讯技术的文章我已整理过很多篇,阅读过的读者可能都很熟悉,早期的Web端即时通讯方案,受限于Web客户端的技术限制,想实现真正的“即时”通信,难度相当大。传统的Web端即时通讯技术从短轮询到长连询,再到Comet技术,在如此原始的HTML标准之下,为了实现所谓的“即时”通信,技术上可谓绞尽脑汁,极尽所能。自从HTML5标准发布之后,WebSocket这类技术横空出世,实现Web端即时通讯技术的便利性大大提前,以往想都不敢想的真正全双工实时通信,如此早已成为可能。本文将专门介绍WebSocket、socket.io、SSE这几种现代的Web端即时通讯技术,从适用场景到技术...

阅读全文>>

1

分享20款响应式CSS框架,你平时开发用的是哪一款?

使用 CSS 框架是当前大部分前后端开发人员都会选择的,CSS框架的好处是帮开发人员节省了开发时间,提高了工作效率,改善用户体验,并且能很好的解决各种浏览器之间的兼容性问题。当然也会存在代码冗余,影响网站打开速度,但是对于好处来说这些问题都不是问题。接下去我会分享我所知道的所有的CSS框架,尽量把网络上现有的框架都收集起来,方便网友们的选择和比较。(框架顺序不代码框架的好坏)Bootstrapwww.bootcss.comBootstrap 就不多做介绍了属于老牌框架了,国内教程地址:www.bootcss.com(非官网),该网站目前已经整理了从2.0~5.0的所有教程资料。layuiwww...

阅读全文>>

0

一些不好记却很好用的 CSS 属性

前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什么东西,很顺的就可以写出来。这些属性之所以常见,是因为许多地方都用得到,而有些 CSS 属性只能使用在某些特定的地方,或者只有在某个特定的情境之下才会出现。我经常会忘记这些没不常的属性,但有时候这些属性其实特别重要。所以本文介绍一些我觉得不太好记但是却很好用的 CSS 属性,也是顺便帮自己做个笔记。input 的外框与 “|” 的颜色比起 border, outline 是一个...

阅读全文>>

0

H5项目适配系统深色模式方案

一、背景随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗,减弱强光对比,还能 提供更好的可视性和沉浸感。如何切换深色模式iOS:“设置”--“显示与亮度”--“外观”,选择“深色”Android:“系统设置”--“显示”--“深色模式”。二、问题如果系统设置了深色模式,H5页面不做相应的处理,会出现背景色冲突、深色文字显示异常,深色图标显示异常等一些显示上的问题。所以,需要对深色模式进行一些适配。我尝试了一些方案:三、H5项目适配深...

阅读全文>>

1

使HTML 5数字输入仅接受整数

这两年我看到很多关于这方面的文章和帖子,这的确是一个非常方便的东西。但是,太多的实现还是有漏洞,残缺不全的实现,等等。整体概念是合理的:使用HTML 5属性来限制可以发送到服务器的内容,然后使用Javascript增强它,以限制用户可以在第一个地方输入的内容。所以让我们来看看这些问题,并更好地实现它。问题1,不好的脚本最常见的缺陷是缺乏适当的降级功能。 如果您要在“electron”或“nw.js”中构建完整的堆栈应用程序,那很好,但是这种形式的东西通常在面向公众的网站中没有位置。就像我经常说的那样,高质量的脚本应该增强已经在工作的页面,而不是用户使用它的唯一方法。解决办法?使用 patter...

阅读全文>>

0

链接是Web的核心元素

链接是HTML的基础元素,因为Web的设计初衷就是想把一组文档彼此链接起来组成信息分享网络。HTML的超文本(Hyper Text)部分定义了链接的类型即:超文本链接(hypertext links),也就是超链接(hyperlinks)。在HTML中,链接是内联元素,使用<a>标签。href(hypertext reference) 属性用来定义链接的目标地址(当点击时跳转或新打开的网页地址)。<p> 要搜索网页动画,请访问 <a href="//www.techbrood.com">Techbrood</a>. </p>要搜索...

阅读全文>>

0

用HTML5构建一个流程图绘制工具

在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(Graph Theroy)。利用图我们可以做很多工具,比如思维导图,流程图,状态机,组织架构图,等等。今天我要做的是用开源的HTML5工具来快速构造一个做图的工具。工具选择工预善其事,必先利其器。第一件事是选择一件合适的工具,开源时代,程序员还是很幸福的,选择很多。flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chartgo.js http://www.gojs.net/latest/index.ht...

阅读全文>>

0

H5聊天video标签和视频文件下载那些怪事

最近在做一个即时聊天项目,用户要求除了可以发送图文,还要发送视频信息。刚开始觉得很简单呐,和普通文件下载不是一样?!谁知联调过程中就垮了,视频加载贼慢,根本无法观看。有的视频还没法加载,你知道的,前端直接裂了!!!<video autoplay loop > <source src="//localhost:8080/gesture.mp4" type="video/mp4"> </video>原来是保存文件时,没有存储文件的content-type,读取的时候都默认成oct-stream文件下载了。但是一个2分钟的视频加载了半天,才能播放。肿么回事...

阅读全文>>

0

一个支持将html转为PDF、图片,且支持PDF加水印的项目

今天给大家推荐的这个开源项目是来自于读者的投稿,我超级喜欢这个开源项目。尤其是做小程序开发的时候,经常遇到将内容生成图片分享到朋友圈。这个开源项目就能够解决你的问题,可以将 html 转为图片,还可以转为 PDF ,还支持加水印。这个开源项目就是:Doctron,它是基于 Docker、无状态、简单、快速、高质量的文档转换服务。目前支持将 html 转为 pdf、图片 (使用 chrome (Chromium) 浏览器内核,保证转换质量)。支持 PDF 添加水印。作者认为目前开源界没有较好的服务器端 HTML 转 PDF、图片的工具,像 wkhtmltopdf、dompdf、mpdf 等这些比...

阅读全文>>

0

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 的兴衰史 ...

阅读全文>>