果酱的博客

手机应用一般都会提供原生的摇一摇功能，但是由于系统的差异性，H5 想要实现摇一摇功能，没法统一调用系统所提供的原生接口，便需要额外监听浏览器的事件。今天便将实现 H5 摇一摇功能的问题记录下来，方便以后学习查看。因为 H5 的使用场景不同，可能内嵌于 app 中，也可能存在于小程序平台，因此为了实现摇一摇，便依赖于浏览器的监听事件。通过监听 devicemotion 的事件属性，从而获取设备的加速度、倾斜角度等参数，从而进行摇一摇次数的判定。本文为个人记录开发过程中的疑问，如有错误，还请指正。

有时候列表存在许多图片，那么一次性加载会阻塞 http 请求，为了避免在可视窗口之外的元素进行不必要的图片加载，可以尝试使用懒加载进行优化。懒加载可以显著提高页面加载性能，特别是当页面包含大量图片时。为了实现延迟加载图片（也称为懒加载），可以使用 JavaScript 和 Intersection Observer API。但这样不可避免的会存在一定视觉效果上的体验缺失，在页面滚动特别快速时，由于浏览器来不及绘制刚刚进入视图的元素，便会导致出现短暂的白屏现象。这便需要在开发过程中，去做出一定地取舍。

随着区块链技术的流行，也促进了 subgraph 工具的兴起。那么如何在前端接入 graphql 节点就成了关键，其接入方式既存在与 restful 接口相类似的方式，也有其独特接入风格。本文将介绍如何接入 graphql 以及如何应对多个 graphql 节点的情况。如有不当之处，还望批评指正。GraphQL 服务是通过定义类型和这些类型的字段来创建的，然后为每种类型的每个字段提供函数。

web3 项目中，前端不可缺少地需要调用智能合约的代码，但是智能合约只有合约地址及对应的 ABI 文档，而没有相应的 typescript 类型声明。本文讲述如何使用 typechain 将智能合约的 ABI 文件自动生成类型声明，这样可以在项目中使用对应的属性和方法。通过采用 TypeChain 并将其集成到开发环境中，便可以轻松地与合约交互并提升整体开发人员体验。

写在前面CSS 一直以来都是本人比较薄弱的点，当前的各种框架各种 UI 库都很好地封装了样式。难得遇上需要自己写样式，也查了一些资料，记录下来，方便日后遇到同样问题再进行查看。而此次的需求，是需要实现以下效果：这里既有了文字渐变、也有背景渐变以及输入框边框的颜色渐变。因此将从这三个方面实现不同渐变的需求。渐变背景渐变背景采用 CSS3 的线性渐变，更多的渐变方式可查看文档：菜鸟教程-渐变背景渐变代码：#grad1 { height: 200px; background-image

写在前面出于学习目的，简单搭建了一个关于 electron + react 的项目，记录下搭建过程中的学习过程，还望各位大佬们多多指教~相关资料：electron 官方文档React 官网地址初始化项目创建 react + typescript 项目npx create-react-app my-app --typescript安装 electron 环境npm i -D electron创建 electron 入口文件main.js 文件// Modules to contr

Easy-monitor背景在开发公司官网响应式布局及演示需求时，由于对服务端渲染的开发并不熟悉，以及nginx日志的获取不便捷，在过程中遇到层层阻碍，从而引发思考：是否应该针对Node或者是PM2进程，进行必要的日志获取？市场上较为成熟的方案有NSolidAliNodeKeymetrics（PM2官方？）Easy-Monitor方案对比以下将针对下面几个方案的用法及可行性展开讨论。NSolid该方案，在Egg文档中提及，在尝试时，由于不支持Windows系统，因此未实际进行调

写在前面对于使用hook大家都有一定的经验，能够很好地使用React强大的能力。而下一版本也顺着富哥的要求需要将service提取到hook中，我正好深入学习了一下，可能理解的不对，还请指正。什么是Hook这个时候往往会有好几个版本的定义。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 ——这使得你不使用 class 也能使用 React。官网如是说。从阮老师的博客中，也提到：React Hooks

前言因为一些特殊原因，刚入职半年又重新找工作，发现之前的面试题已经忘了，因此在此记录并不断更新。面试题不是靠死记硬背，而是在短时间尽量多的备战可能问到的题目，答案则是需要理解更深层的原理，回答时才能够从容不迫，这便需要花费更多的时间。共勉！希望每个人面试都能有个好结果~CSS部分元素水平垂直居中1、margin 已知高宽1）margin为auto.box { backgr...

写在前面：产品需求为了实现用户点击按钮后复制指定内容到手机的剪切板。其主要思路在于将内容赋值给input或者textarea标签，然后选中其内容，在执行document.execCommand函数。局限性：如上面所言，核心主要在于execCommand函数，该函数在一些系统下的兼容性并不理想。Ios在10.3版本以上效果较好，安卓兼容性可参考官网：https://developer.mo...

前言：由于工作要求，需要写个文件上传的接口。之前接触的较少，都是使用现成的接口，自己写接口时却是遇到了难点。该项目是在vue、koa基础上搭建的，关于路由及其他相关知识，可查看其他文章。现将自己的理解写下了，方便日后差异。如有不当地方，还请指正。前端：htmlhtml结构可以写的很简单，一个input标签就足够。代码如下：<input type="file" id="uploa...

具体的怎么安装webpack和构建项目在官方文档已经描述得很详细，在此就不抄袭搬运了。我只是简单进行学习的总结，希望对各位能有所帮助。官方文档地址： https://doc.webpack-china.org/guides/installation/安装安装建议的是项目目录下进行局部安装，避免不同项目之间的版本冲突，可使用以下命令进行安装：npm install --save-dev webpac

好久没有学习了。这是最近接触的一些模板学习笔记。xsl是将xml转化为HTML的一种模板。通过XPath来获取xml的节点路径等信息。工作原理为：使用XPath来匹配xml中定义的部分，找到之后将该部分转化为指定的结果文档。直接进入主题：<xsl:stylesheet>元素以及<xsl:transform>元素类似于HTML文件一样，需要对文档进行声明，其中以下两种方式均可：代码如下：<xsl:st