唐志远の博客

基于 Hexo 从零开始搭建个人博客系列文章：基于 Hexo 从零开始搭建个人博客（一）基于 Hexo 从零开始搭建个人博客（二）基于 Hexo 从零开始搭建个人博客（三）基于 Hexo 从零开始搭建个人博客（四）基于 Hexo 从零开始搭建个人博客（五）基于 Hexo 从零开始搭建个人博客（六） 前言 本站基于Hexo搭建，用的 🦋 hexo-theme-butterfly 主题 v3.7.1，请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.2.2 。如果你是 v3.7.1 之外的版本，可能有些地方会有出入，请留意。 主题特点 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替） 时间轴式的归档页 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等） 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax 可设置复制文章内容时追加版权信息 Gitalk、Gitme ...

本系列文章摘自 JavaScript 核心进阶。 前言本系列文章旨在带给读者地道的前端基础知识体系，深入底层原理，了解最权威的前端基础，循序渐进，带领读者领略正确学习方法的独特魅力。通过完整的知识体系，帮助读者突破瓶颈，更上一层楼。 为你解读JavaScript不可绕过的核心概念，帮你从庞杂而分散的前端知识中，找到核心基线，用最通俗易懂的方式帮助你掌握它们。 适宜人群 刚入门的前端小伙伴 进阶遇到瓶颈的小伙伴 想要重新夯实基础的小伙伴 需要完善自己前端知识体系的任何阶段的小伙伴 连载目录 前端基础进阶（一）：内存空间详细图解 前端基础进阶（二）：执行上下文详细图解 前端基础进阶（三）：变量对象详解 前端基础进阶（四）：作用域与作用域链 前端基础进阶（五）：闭包 前端基础进阶（六）：setTimeout与循环闭包面试题详解 前端基础进阶（七）：全方位解读this 前端基础进阶（八）：在chrome开发者工具中观察函数调用栈、作用域链与闭包 前端基础进阶（九）：函数与函数式编程 前端基础进阶（十）：深入详解函数的柯里化 前端基础进阶（十一）：详解面向对象、构造函数、原型与原型链 ...

更新记录 2021-04-27 butterfly3.4.0 -> 3.7.1 更新v3.7.1适配方案注意一点的是，butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache} 改为 { cache:true }。 点开查看外挂标签配置教程 下载资源文件 下载Tag_Plugins_v1.5.zip 将下载的Tag_Plugins.zip解压得到butterfly文件夹。将butterfly文件夹复制到[Blogroot]/node_modules/hexo-theme-butterfly目录下，覆盖当前的butterfly主题文件夹，提示重复则选择替换。(如果担心覆盖自己的其他魔改内容，可以根据静态文件内容自主比对修改)修改[Blogroot]/_config.butterfly.yml的inject配置项，添加CDN依赖项。由于issues写入timeline和site-card标签要用到jquery，请务必根据注释指 ...

更新记录 2021-06-18 新增几款后台管理系统模板。注意一点的是，在原基础上直接加在后面（未按starts数排序）。 2021-03-06 推荐一些 Vue 常用后台管理系统模板。 前言Vue.js 是一个目前比较流行的前端框架，已经到了前端人人都会的地步，今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue，另外还有Vuetify、Buefy （Bulma css）、Vue Material 等等。基于这些组件库封装的后台管理模板，推荐一些常用 VUE后台模板 给大家。按照 Github 星标数量来依次介绍。 vue-element-admin (68.6k)Vue-Element-Admin（github上的标星数为63.3k）是一个后台前端解决方案，它基于 Vue 和 Element-UI 实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快 ...

今天分享的主题是：「一种自动化生成骨架屏的方案」， 先看下市场上常见的骨架屏优化效果。 某宝 PC端 某东 PC端 某推 APP 某博 APP 今天的分享主要分为三个部分： 首屏加载状态演进 如何构建骨架屏 将骨架屏打包的项目中 首屏加载的演进我们先来看一些权威机构所做的研究报告。 一份是 Akamai 的研究报告，当时总共采访了大约 1048 名网上购物者，得出了这样的结论： 大约有 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，大约有 40% 的用户选择离开或关闭页面。 这是 TagMan 和眼镜零售商 Glasses Direct 合作进行的测试，研究页面加载速度和最终转化率的关系： 在这份测试报告中，发现了网页加载速度和转化率呈现明显的负相关性，在页面加载时间为1~2 秒时的转化率是最高的，而当加载时间继续增长，转化率开始呈现一个下降的趋势，大约页面加载时间每增加 1s 转化率下降6.7个百分点。 另外一份研究报告是 MIT 神经科学家在 2014 年做的研究，人类可以在 13ms 内感知到离散图片的存在，并将图片的大概 ...

前言最近关于H5和APP的开发中使用到了webSocket，由于web/app有时候会出现网络不稳定或者服务端主动断开，这时候导致消息推送不了的情况，需要客户端进行重连。查阅资料后发现了一个心跳机制，也就是客户端间隔一段时间就向服务器发送一条消息，如果服务器收到消息就回复一条信息过来，如果一定时间内没有回复，则表示已经与服务器断开连接了，这个时候就需要进行重连。 被动断开则进行重连，主动断开的不重连。 说明：下图针对两个Tab项（Open Trades 和 Closed Trades），只希望在 tabIndex = 0 （Open Trades 高亮时）触发webSocket , 如果点击第二个栏目 , tabIndex = 1（Closed Trades高亮时）则主动关闭webSodket连接。 TabIndex = 0 时 ，被动断开则自动重连。 效果 webScoket连接并接收推送的消息 将接收的消息转换成目标数据，并渲染 如果主动关闭，则不进行重连，监听关闭事件 显示已关闭，不重连 监听错误事件，比如地址，协议错误等，则会自动重连五次，五次重连仍失败后则需要进行手动重连 ...

这里有一些值得分享的网站，快快添加到你的收藏夹吧。 Random Image via API网址：https://source.unsplash.com/ 世界上最强大的照片引擎。Unsplash API 是一种现代 JSON API，它显示了为用户构建任何体验所需的所有信息 Embeddable Widget Apps for Notion网址：http://apption.co/ 这个网站上面有很多小工具，你可以将它们直接添加到自己的网站上，或者自定义更改后嵌入到网站上，非常简单方便 Carbon这个网站可以把你的代码转成一张精美海报，我一直在用，非常不错，carbon 具有以下功能特性： 从GitHub的要点导入：只需将一个 GitHub gist id 追加到url 定制：自定义图片的语法主题，窗口样式等等 快速分享：点击一下即可保存您的图片或者点击链接 网址：http://carbon.now.sh Peppertype利用AI可以在几秒钟内生成内容，扩写你的博客内容，假如你平常不写博客，这个网站用处应该不大。 网址：https://www.peppert ...

这里将记录自己工作或学习中关于Vue+element-ui的系列问题，如果您有有更好的解决方法可以在下面进行评论喔~ DatePicker快捷选项/* * @name: range-pick-opt.js 日期选择器快捷选项 * @Author: tzy1997 * @Date: 2020-11-18 17:30:20 * @LastEditors: tzy1997 * @LastEditTime: 2021-11-22 15:16:14 */import i18n from '@/lang' // 如果不需要 中英文则注释掉//时间选择const rangePickerOptions = { shortcuts: [{ // text: "今天", text: i18n.t('shortcuts.t1'), onClick(picker) { const end = new Date(); const start = new Date(); ...

前言对我来说，书籍或在线课程可以被认为是网页设计和开发领域的学习和专业发展非常有用的资源。因为它是作者在学习过程中的经验总结，以及将这些知识应用到实际项目中。 如果您有足够的钱能够购买最好的编程书籍和课程来发展您的技能，而不用看它的价格，自然是更好的。不过和我一样，刚开始还是个没有收入的学生的时候，花钱买编程方面的书也是一个很艰难的想法。因此，我经常收集一些电子书版本，免费的编程课程，以帮助我专业发展，而不必担心经济问题。 在今天的文章中，我将向您介绍 34 个有关 HTML、CSS 和 Javascript 的免费电子书。希望它对您在Web开发过程中有所帮助。（如果你负担得起，你应该买书或支持这些电子书的作者！） HTML and CSS BookLearn to Code HTML & CSS 链接地址：https://learn.shayhowe.com/html-css/ HTML5 Notes for Professionals book 链接地址：https://goalkicker.com/HTML5Book/ Htmldog 链接地址：https:// ...

前言随着开发经验的积累，很多人会有自己的常用站点，一些网址收藏，自己造的轮子或者别人的轮子，工具函数库等等。这里提供一些常用的工具函数，如果你也有一些觉得挺不错的库，欢迎在下方评论💓。 格式化时间戳export function formatDateTimeStamp(date, fmt) { // 格式化时间戳 : formatDateTimeStamp(new Date(time),'yyyy-MM-dd hh:mm:ss') if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': d ...