能力说明:
掌握HTML5与CSS3的核心技术,掌握前端主流语言和开发框架JavaScript、jQuery和Ajax的基本知识,具备搭建动态交互网页的基本能力。
暂时未有相关云产品技术能力~
WEB 动画世界已经变成了一个庞大的工具和技术丛林,像 GSAP 和 Framer Motion 以及 React Spring 这样的库如雨后春笋般涌现,帮助WEB项目开发向 DOM 添加动作。
过去 WEB 需要实现交互动画效果是使用 flash 、javascript、Gif,近年来随着 flash 的淘汰,javascript 和 CSS 功能的增强,使得现代 WEB 应用的交互越来越丰富。借此总结一下 CSS 交互动画实现的基础,关键的知识点是 keyframes ,文章涉及的代码示例效果可以点击查看动画效果。
现代互联网时代,打开一个Web平台,是留下还是离开,只需要 1 分钟,因此前端的性能优化至关重要。
作为开发人员,经常使用 Web API 来轻松实现复杂的功能,或者创建它们来抽象复杂性。Web API 允许服务之间进行对话,分享信息到朋友圈或显示地图等操作。
浏览器允许 JavaScript 脚本读写剪贴板,自动复制或粘贴内容,而这一切都是通过 navigator clipboard 的API来实现的。剪贴板可以用于存储数据并在应用程序内部或应用程序之间使用的临时空间。这些操作的 API 都是异步操作并返回一个 promise。
渐进式 Web 应用程序 (PWA) 可能是现代移动应用程序开发的主流技术之一。这个技术工具结合了本地应用程序和web应用程序的功能。使用现代api来提供可靠性和可安装性,同时使用单一代码库访问任何人、任何地点、任何设备。PWA 在web开发中正在兴起,大大小小的公司都在利用这一强大的技术。本文将介绍PWA及通过代码开始一个基本的应用。
service worker 是现代web开发的关键部分,在最近几年获得了关注,这都要归功于 PWA(渐进式 Web 应用程序) 的流行。service worker 通过向典型的 Web 应用程序添加后台同步、离线渲染和推送通知等功能,缩小了本机应用程序和 Web 应用程序之间的差距,主要任务之一是充当代理。
QUIC协议是一个新的通讯协议,基于 UDP 的传输协议并希望最终取代所有基于TCP的HTTP请求。熟悉 UDP 的人都应该清楚为什么要使用 QUIC。UDP 是的特点是不可靠、数据包经常丢失、重新排序、重复等等。UDP 不包括任何更高级别协议(如 HTTP)严格要求的 TCP 的可靠性和顺序保证,这就是 QUIC 的用武之地。
随着消费者期望的提高,API 性能从未像今天这样重要。众所周知,如果网页加载时间超过 3 秒,超过半数的网络用户会放弃继续浏览网页。
Promise 对象是 ECMAScript 6 中新增的对象,主要将 JavaScript 中的异步处理对象和处理规则进行了规范化。前面介绍了《Promise.any() 原理解析及使用指南》、《Promise.all() 原理解析及使用指南》和《Promise.allSettled() 原理解析及使用指南》
Promise 对象是ECMAScript 6中新增的对象,主要将 JavaScript 中的异步处理对象和处理规则进行了规范化。前面介绍了《Promise.any() 原理解析及使用指南》和《Promise.all() 原理解析及使用指南》,本文继续来介绍 Promise 另一个方法 Promise.allSettled(promises) ,返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise ,并带有一个对象数组,每个对象表示对应的promise 结果。
Promise 对象是ECMAScript 6中新增的对象,主要将 JavaScript 中的异步处理对象和处理规则进行了规范化。前面介绍了《Promise.any() 原理解析及使用指南》,本文来介绍另一个方法 Promise.all(promises) ,能够一次并行处理多个 promise,并且只返回一个 promise 实例, 那个输入的所有 promise 的 resolve 回调的结果是一个数组。
Promise.any(promises) 是 ES2021 新增的特性,它能够并行运行 promise,并解析为 promises 列表中第一个成功解析的 promise 的值。需要注意的是 Promise.any() 方法依然是实验性的,尚未被所有的浏览器完全支持。
Node.js 默认单进程运行,对于32位系统最高可以使用 512MB 内存,对于64位最高可以使用 1GB 内存。对于多核CPU的计算机来说,这样做效率很低,因为只有一个核在运行,其他核都在闲置,pm2 利用的 node 原生的 cluster 模块可以顺利解决该问题。
WebAssembly(缩写为 Wasm)是一种用于基于堆栈的虚拟机的二进制指令格式, Wasm 被设计为编程语言的可移植编译目标,支持在 Web 上部署客户端和服务器应用程序,它可能会终结所知道的互联网上的隐私和安全。
Math.random() 将生成一个介于0(包括)和 1(不包括)之间的伪随机浮点数(带有小数的数),随机数并不意味着总是得到一个唯一的数字,它会在一段时间后产生相同的数字。这里的间隔很长,所以可能不会得到两次相同的数。
Cron 是一款类Unix的操作系统下的基于时间的任务管理系统,Cron 用于操作系统(CentOS)周期性执行程序或者脚本。例如有一个程序,想要每天凌晨 2 点执行,或者需要每周备份一次文件,类似这些事情可以通过一个由 cron 执行的脚本来完成。
回想过去,CSS 需要兼容各种版本的浏览器,那种在效果和可用之间痛苦选择的经历记忆犹新。现在的 CSS 能够做很多事情,而对于浏览器的兼容性只需考虑主流的,并且大部分主流的浏览器都支持最新 CSS 特性。本文来总结一下CSS中数学函数之min、max、calc、clamp。
选择对 API 请求的正确响应有助于保护应用程序,并能够提高项目开发效率。虽然表面上看起来可能并非如此,但每一条不必要的信息都使攻击者更容易了解如何获得访问权限。另一方面,每一个缺失的信息都会让 API 的使用者更难理解对 HTTP 请求的响应。
最近打算对个人博客进行优化,主要涉及两个方面,文章编辑器和代码展示分享模块,因此就需要考虑选择什么样的在线编辑器,顺道总结一下在线代码编辑及分享一些可能用得上的优秀代码编辑器。
关于 TypeScript 是什么,可以在掘金找到很多文章,如想学习一下TypeScript,GitHub是个不错的平台,在文章《收藏GitHub上的7个热门TypeScript项目》介绍几个不错的开源项目。本文将使用TypeScript创建单页应用程序(SPA)示例,天气查询。
在前端开发中,大部分时间都是使用人肉加上 console.log 或者 debuger 进行测试,效率及测试质量都是因人而异,加上JavaScript语言本身缺少类型检查,编译期间无法定位到错误,还有常见兼容性问题,都是影响前端开发常见问题。
Github 不仅仅是代码托管平台,也是一个学习、开源存储库、教程和指南手册的资源平台。通常遇到技术瓶颈或者有解决不了的问题,都会借助 Github 查找学习资源,本文分享6个JavaScript学习资源。
昨天在文章《JavaScript单元测试的“抹茶”组合:Mocha和Chai》介绍了JavaScript单元测试常用组合,本文展示使用 Chai 和 Mocha 为API编写简单的测试用例。
mocha是一个javascript的测试框架,chai是一个断言库,两者搭配使用更佳,所以合称“抹茶”(其实mocha是咖啡)。“抹茶”特点是: 简单,node和浏览器都可运行。
Vue 已经成为很多公司前端项目的首选框架,而要成为一个会用 Vue 的开发者并不需要花太多时间和精力去学习大的概念,但作为成为一个更高级的开发者就需要去深入框架和基础知识的学习。本文跟分享几个在Vue 项目开发中可以用到的小技巧。
在程序开发过程中,比较两个变量是否相等是很常见的需求,在 JavaScript 中两种变量类型的比较是有所不同的,本文就一起来回顾一下在 JavaScript 如何比较两个变量是否相等。
搜索、匹配和聚合是日常网络活动的重要组成部分,例如,当浏览或搜索某些关键字时,会进行大量搜索。为了使 搜索/匹配 高效和精确,像 VsCode 和 Sublime 这样的流行编辑器都是使用正则表达式来支持搜索和替换。因此,在使用这些编辑器的时候,当按下 CTRL + F 组合键时,就可以搜索和匹配选择的文本。
Vue3已经发布一段时间了,版本趋于稳定并且可以用于生产。虽然很多开发人员对这个版本褒奖不一,新版本由于算是重新构建生态系统,相关资源的缺乏。与Vue2丰富的UI框架相比,Vue3就显得有点少,也算是影响开发人员使用Vue3的原因之一。
CSS 中 position 属性用于指定元素的定位方法的类型(static、relative、absolute、fixed、sticky)。
昨天在文章《JavaScript中的 async 和 await》中简单的介绍了其使用方法。那么 async 和 await 如何工作,如何正确的使用 async 和 await 。
在 ECMAScript 2017 中添加了 async 函数和 await 关键字,并在主流脚本库和其他 JavaScript 编程中得到广泛的应用。今天带大家一起来学习一下。
前面写过文章来对比 WebSockets 和 HTTP ,本文来简单对比WebSockets和长轮询。
CSS 伪元素用于为元素的指定部分设置样式,作为回顾,先来看下 Mozilla 开发者网站上的解释: 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。例如 ::first-line 伪元素可用于更改段落首行文字的样式。
之前写过一个专栏《布道API》来介绍API的REST风格及推荐实践,今天开始来构建一个管理系统的API服务,首先需要处理的就是数据存储,本文将结合实际开发总结在 NodeJS 下使用 Sequelize 快速构建 PostgreSQL 数据的 CRUD 操作。
Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档。
在文章中《Web 身份验证:Cookie 与 Token》介绍过使用 Token 的好处,如无状态、自我存储等, 也提到过将 Token 存储在 Cookie 中的方式。可能有人会疑问,使用了 Token 为什么还用 Cookie,可以把 Token 存储在本地,如 localStorage 。
应用开发一般都少不了身份验证,而身份验证机制的稳定性对所有应用程序都变得至关重要。具体选择何种方式进行身份验证可以根据项目及团队情况来衡量,在决定之前需要先理解WEB身份验证常见的两种方式:基于 Cookie 的身份验证和基于令牌(Token)的身份验证。
现在构建前端应用程序不像以前那么简单,现在,应用程序更加复杂和多样。这就需要在构建前端应用程序的时候考虑很多,错误/异常处理是最重要的方面之一。
节流(Throttle)和防抖(Debounce)对于前端开发人员来说应该是十分熟悉的,节流(Throttle)和防抖(Debounce)是两种可以节省性能的编程技术,两者的目的都是为了优化性能,提高用户体验,都是基于 DOM 事件限制正在执行的 JavaScript 数量的方法。但两者的有什么不一样呢?
随着新工具和技术的发展,开发人员的技术格局一直在变化。在进行了大量面试和阅读了多数的职业描述后,总结了一下 JavaScript 开发人员应该掌握的现代技术栈,或许你使用的是 VUE,或者是 React、Angular 或Svelte 等。
浏览器扩展是可以修改和增强 WEB 浏览器功能的小程序,可以用于各种各样的任务,例如屏蔽广告、管理密码、组织标签、改变网页的外观和行为等等。
作为一名开发人员,特别的前端开发人员,已经无数次的听到过 URL 和 URI,对于 URN 可能听过的要少点,那么它们之间有什么区别呢?本文带大家巩固一下基本概念。
favicons是在浏览器选项卡中看到的小图标,当浏览浏览器的书签和标签时,它们可以帮助用户清晰的知道是哪个网站。它们是互联网历史的一部分,能够实现一些很酷的效果。
在实时应用程序中,毋庸置疑,需要在信息可用时立即从服务器获取信息。而且,从根本上说,经典的 HTTP 请求/响应模式无法胜任这项工作。因为服务器将保持沉默,无论是否有新数据,除非或直到消费者请求更新。
WebSocket 协议为 Internet 通信创造了新的可能性,并为真正的实时通讯打开了大门。本文将介绍 WebSockets 的发展史,并深入学习 WebSockets 是如何产生的、它们是什么、如何工作,以及 WebSockets 如何在实际应用程序中工作的。
PHP如何导入带图片的Excel表格呢?图片又如何导出到Excel中呢?导出的Excel如何定义样式使其更加漂亮?带着这些问题开始本文的分享。
如果你的项目有生成唯一 key 或者使用 uuid 的场合,那么从现在开始,请使用 NanoID。之前在文章《分享8个可以提高开发效率的JavaScript库》介绍过 NanoID 。NanoID 是一个创建唯一 key 的轻量级的脚本库,在过去有类似需求首先想到的是 uuid ,与其相比 NanoID 要小得多。
随着 Javascript 越来越流行,使其应用的场景越来越多,不仅限于前端,可以是后端、混合应用程序、嵌入式设备等等,于是就有了大前端的叫法。本文开始带大家一起回顾总结 Javascript 的构建块以及它们是如何协同工作,理解其原理,将有助于编写更优的代码。
前端编程很有趣,开发人员有能力创建他们想要的任何东西,任何效果。不幸的是,当遇到bug时,这种乐趣就会消失。JavaScript开发人员可能首先想到的是alert、console.log语句。添加console.log()是可视化代码状态的一种快速方法。