<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[He Manyuan]]></title><description><![CDATA[一只正值壮年的前端攻城狮]]></description><link>https://blog.youkuaiyun.com/hemyWeb</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; hemyWeb]]></copyright><item><title><![CDATA[css实现红心点赞动态效果]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/114935906</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/114935906</guid><author>hemyWeb</author><pubDate>Wed, 17 Mar 2021 16:22:36 +0800</pubDate><description><![CDATA[实现效果：

素材：

思路：
逐帧动画，设置素材图片在每一帧的位置移动。
刚开始的思路是把素材图片作为动画区域的background-image，然后再通过animation来改变background-position。但是实际操作之后发现这样做实际上是平滑过渡，没有达到我想要的效果，后来了解到了steps这个函数。
steps实际上是animation-timing-function的参数，以为不连续执行动画。
steps有两个参数，第一个参数是要分布执行的步数，在本例中，我的素材图片一共有29帧，也就]]></description><category></category></item><item><title><![CDATA[记一个让我“翻车”的css问题]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/113120862</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/113120862</guid><author>hemyWeb</author><pubDate>Mon, 25 Jan 2021 16:31:01 +0800</pubDate><description><![CDATA[昨天读了大漠老师的《CSS现状和如何学习》一文，遇到了一个让我“翻车”的问题。
例：
.red {
  color: red
}
.blue {
  color: blue
}

&lt;div class="red blue"&gt;Text1&lt;div&gt;
&lt;div class="blue red"&gt;Text2&lt;div&gt;

那么问题来了？Text1和Text2最终都会呈现出什么样式？
再比如：
.a {
  color: red;
}
.b {
  color: blue]]></description><category></category></item><item><title><![CDATA[记一个让我“翻车”的css问题]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/112347294</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/112347294</guid><author>hemyWeb</author><pubDate>Fri, 08 Jan 2021 10:54:42 +0800</pubDate><description><![CDATA[昨天读了大漠老师的《CSS现状和如何学习》一文，遇到了一个让我“翻车”的问题。
例：
.red {
  color: red
}
.blue {
  color: blue
}

&lt;div class="red blue"&gt;Text1&lt;div&gt;
&lt;div class="blue red"&gt;Text2&lt;div&gt;

那么问题来了？Text1和Text2最终都会呈现出什么样式？
再比如：
.a {
  color: red;
}
.b {
  color: blue]]></description><category></category></item><item><title><![CDATA[d3.js数据可视化从入门到放不下（四）—— 给图表加点“料”]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/108715354</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/108715354</guid><author>hemyWeb</author><pubDate>Mon, 21 Sep 2020 17:49:33 +0800</pubDate><description><![CDATA[上一篇，我们已经构建了一个基本的平面直角坐标系。本篇主要讲讲给如何给坐标系加上数据和过渡动画。
先整理一下svg的一些基础知识点：
示例代码：
&lt;style&gt;
  svg line {
    stroke: grey;
    stroke-width: 2;
  }

  svg circle {
    stroke: red;
    fill: none;
    stroke-width: 2;
  }

  svg rect {
    stroke: steelblue;
   ]]></description><category></category></item><item><title><![CDATA[d3.js数据可视化从入门到放不下（三）—— 构建平面直角坐标系]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/108447002</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/108447002</guid><author>hemyWeb</author><pubDate>Fri, 11 Sep 2020 14:58:58 +0800</pubDate><description><![CDATA[构建步骤

]]></description><category></category></item><item><title><![CDATA[js取数组最后一个值]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/108442664</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/108442664</guid><author>hemyWeb</author><pubDate>Mon, 07 Sep 2020 10:30:52 +0800</pubDate><description><![CDATA[例：
let arr = [1, 2, 3, 4, 5, 6]

第一种：
console.log(arr[arr.length-1])    // 6

Tips：不够精简
第二种：
console.log(arr.pop())    // 6

Tips：pop()方法会影响原数组
第三种：
console.log(arr.slice(-1)[0])    // 6

Tips：推荐

...]]></description><category></category></item><item><title><![CDATA[d3.js数据可视化从入门到放不下（二）—— 实现一个基础图表]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/108389566</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/108389566</guid><author>hemyWeb</author><pubDate>Thu, 03 Sep 2020 17:52:36 +0800</pubDate><description><![CDATA[接上回的enter-update-exit模式，其实看书上的概念的话也不难理解，就是把整个图表的的生命周期分为进入-更新-退出三个阶段，再换句话说，可以把这三个阶段理解为三个函数，在不同生命周期执行相应函数即可。
个人觉得在学习一个新的框架或工具的时候，最重要的还是理解其使用思路和模式，这点极为重要，只要这点搞懂了，其它的也不是什么大问题了，剩下的无非就是语法的问题，语法这个东西嘛，多练习就行了。
本次主要分享基于d3.js来实现一个基本的图表demo，旨在深入理解其enter-update-exit模式。]]></description><category></category></item><item><title><![CDATA[Invalid attempt to spread non-iterable instance 错误解决办法js]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/108337493</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/108337493</guid><author>hemyWeb</author><pubDate>Tue, 01 Sep 2020 11:25:51 +0800</pubDate><description><![CDATA[一句话文章：

当抛这个错的时候，百分之大多数的情况都是你解构了，不能解构的东西，比如undefined。
]]></description><category></category></item><item><title><![CDATA[d3.js数据可视化从入门到放不下（一）]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/108260994</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/108260994</guid><author>hemyWeb</author><pubDate>Thu, 27 Aug 2020 17:42:25 +0800</pubDate><description><![CDATA[背景：

D3：指数据驱动文档（Data-Drive Document），D3严格遵循Web标准；
d3.js：可以把D3理解为一种思路或者说是“风格”，d3.js正是基于这种“风格”开发的JavaScript库。

说到JavaScript的库，就不得不提起jQuery，作为最知名的JavaScript库，没有之一。即使是在现今前端主流SPA框架盛行的情况下，它仍然有这不可替代的地位。它提供了及其简便的API来替代原生JavaScript中低难度却高度重复的DOM操作方法。
同样，d3.js也是一个Jav]]></description><category></category></item><item><title><![CDATA[grid布局基本概念整理]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/107788016</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/107788016</guid><author>hemyWeb</author><pubDate>Tue, 11 Aug 2020 17:47:52 +0800</pubDate><description><![CDATA[回顾一下web页面布局的历程，于我个人而言，经历了最开始的学习计算机编程时的table布局和基础的div+css布局，都后来有

]]></description><category></category></item><item><title><![CDATA[Mac下的终端神器iTerm的插件之PowerLine配置（下）]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/107665575</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/107665575</guid><author>hemyWeb</author><pubDate>Wed, 29 Jul 2020 15:59:28 +0800</pubDate><description><![CDATA[上篇说到，怎么安装配置PowerLine插件，顺利的话，来看我这篇文章的大佬你应该已经搞好了。本来我也是打算装完就OK了，但是，今天用了一下感觉仍然不是很舒服，原因在于输入行的文件路径显示太长了，导致文字换行看起来特别别扭，再加之我平时一般都是要同时分屏开好几个窗口，于是它在我工作状态下就成了这样式儿：

丑丑丑！这种状况完全无法满足我提升工作效率的目的（zhuangbi）啊，况且一般正常情况下路径是不需要显示这么长的。pwd它不香？？?
果断优化配置一下，所以这篇文章就来记录一下怎么来个性化配置Power]]></description><category></category></item><item><title><![CDATA[Mac下的终端神器iTerm的插件之PowerLine配置（上）]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/107611620</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/107611620</guid><author>hemyWeb</author><pubDate>Mon, 27 Jul 2020 14:49:14 +0800</pubDate><description><![CDATA[iTerm是Mac下的一个终端工具，之所以喜欢用这个呢，正经说，是因为这个比自带的终端更加好(ku)用(xuan)。之前配置过一些插件，但是最近偶然在网上发现，好多大佬配置的比我自己搞的这个更加酷炫，于是乎，决定跟着弄一下。
来一张配置成功后，正常工作状态下的效果图看看：

咋样？好看吧，不仅可以清晰的知道自己所处的目录，还能直观的看到当前所处的git分支，这个就是PowerLine的作用。
因在配置过程中搜寻了很多文章，发现说的都太复杂了，所以本文只说干活，不扯别的。希望你看完之后能一次成功~
第一步：安]]></description><category></category></item><item><title><![CDATA[盘点那些你可能不知道的css选择器]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/106334108</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/106334108</guid><author>hemyWeb</author><pubDate>Mon, 25 May 2020 15:54:04 +0800</pubDate><description><![CDATA[any-link
 之所以要选择先说这个，是因为前段时间在面试的时候遇到个奇葩问题，二面面试官问我，怎么选中页面上所有的带有href属性的a标签？我当时懵逼。。答：如果给我jQuery，我可以做到。。我tm真机智。。后来看到了一篇文章在做慕课网的测试题的时候遇到了has选择器的问题，于是去百度发现了一篇整理了一些不常用的css选择器的文章，又在这片文章里面发现这any-link这个选择器，便回想到了当时那位面试官问我的那个问题。。这不就是答案嘛，受此启发，决定水一篇博文来整理盘点一些不常用的css选择...]]></description><category></category></item><item><title><![CDATA[Antd的validator自定义校验导致其它校验规则失效]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/105639437</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/105639437</guid><author>hemyWeb</author><pubDate>Mon, 20 Apr 2020 17:17:06 +0800</pubDate><description><![CDATA[&lt;FormItem
  label="新账号"
  name="phone"
  rules={[
    { required: true, message: "不能为空" },
    { max: 20, message: "最长20个字符" },
    {
      whitespace: true,
      message: "不能输入空格",
    },
    {
 ...]]></description><category></category></item><item><title><![CDATA[Ant Design 4.0更新指南（2）——Form]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/105416410</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/105416410</guid><author>hemyWeb</author><pubDate>Thu, 09 Apr 2020 17:58:52 +0800</pubDate><description><![CDATA[antd 原有的 Form 组件其实已经足够好用了，但是这次 4.0 对 Form 的更新开始注重不止要好用，还要“优雅”。“优雅”这个东西一直都很玄学。
antd 的 Form 一直以来都很特例独行，区别于其它 antd 组件，Form 的调用并不只是简单的引入组件即可，而是先要进行 Form.create()创建一个 Form 实例，使用 FormItem 时还需在 jsx 中调用 form....]]></description><category></category></item><item><title><![CDATA[Ant Design 4.0更新指南（1）——ProTable]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/105195175</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/105195175</guid><author>hemyWeb</author><pubDate>Mon, 30 Mar 2020 11:26:23 +0800</pubDate><description><![CDATA[作为React技术栈的坚定拥护者，一定离不开阿里爸爸的大怀抱。作为国内最好用的组件库【之一】的Ant Design迎来个跨版本大更新，年后复工后我在第一时间便进行了尝鲜，刚好公司有老项目重构，在初步了解之后，决定尝试在新项目中使用And Design 4.0进行开发，与之对应的Ant Design Pro也更新到了4.0版本，Ant Design Pro是给予Ant Design的开箱即用中台前端...]]></description><category></category></item><item><title><![CDATA[【从入门到放不下系列】记一次用 puppeteer 爬数据的历程（下）—— 爬取搜狗微信搜索的公众号文章]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/103686714</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/103686714</guid><author>hemyWeb</author><pubDate>Tue, 24 Dec 2019 17:57:52 +0800</pubDate><description><![CDATA[上回书说到，使用 puppeteer 库做了截图操作简单展示了 puppeteer 的特性和基本使用方法。这回我们来说说用 puppeteer 做爬取页面数据并写入 Excel 的操作。
puppeteer 实战：爬取搜狗微信搜索的公众号文章并写入 Excel
首先背景：搜狗搜索现在有个功能可以根据关键字来查询微信公众号文章，而我们要做的就是把指定关键字的文章给它爬下来，由于这个需求是从我司业务部...]]></description><category></category></item><item><title><![CDATA[【从入门到放不下系列】记一次用 puppeteer 爬数据的历程（上）]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/103681827</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/103681827</guid><author>hemyWeb</author><pubDate>Tue, 24 Dec 2019 13:42:58 +0800</pubDate><description><![CDATA[最近因工作需要，学习了 Node 爬虫，简单记录一下我的心路历程。
首先来说说 puppeteer 这个库，顺手查了一下 puppeteer 这个单词，它貌似有【操纵木偶的人；操纵傀儡】这方面的含义，这就很好理解啦。这个库本质上来讲是用来做自动化测试的，它提供了一些 API 来直接控制 Chrome 的操作，利用它的这些特性，我们可以用来做 UI Test 或者当做爬虫来爬取页面数据。
说好了是从...]]></description><category></category></item><item><title><![CDATA[p 标签里面不能嵌套 div 标签]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/103558577</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/103558577</guid><author>hemyWeb</author><pubDate>Mon, 16 Dec 2019 10:47:12 +0800</pubDate><description><![CDATA[p 标签里面不能嵌套 div 标签
开头先放大加粗的展示这句话
作为一名半专业的切图仔，怎么能够犯如此低级的错误？？
某日…
正常搬砖中，突遇一奇葩问题，尝试各种方案均试无法解决
大致情况如下(JSX)：

...

&lt;p className={styles.item1}&gt;

&lt;span&gt;Item1&lt;/span&gt;

&lt;Component1 /&gt;

&...]]></description><category></category></item><item><title><![CDATA[next.js下css-module和组件的import样式共存的配置方法]]></title><link>https://blog.youkuaiyun.com/hemyWeb/article/details/95362004</link><guid>https://blog.youkuaiyun.com/hemyWeb/article/details/95362004</guid><author>hemyWeb</author><pubDate>Wed, 10 Jul 2019 18:19:01 +0800</pubDate><description><![CDATA[Next.js是一个轻量级的 React 服务端渲染应用框架。还是头一回用这种服务端渲染的框架，之所以会做服务端渲染，是因为这个项目是一个纯展示性的品牌官网，所以需要为SEO考虑，由于SPA对搜索引擎并不友好，所以选择了Next.js来进行服务端多页渲染。使用了之后发现，其实从编码的思维来看，其实还是组件式的单页思想。

这里想拿出来说说的是在这个项目中，我们开启了css-module，但在后来的...]]></description><category></category></item></channel></rss>