<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Candy_home的专栏]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Candy_home</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Candy_home]]></copyright><item><title><![CDATA[从 sketch 中获取颜色、字体组件内容]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/127361728</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/127361728</guid><author>Candy_home</author><pubDate>Mon, 17 Oct 2022 13:45:10 +0800</pubDate><description><![CDATA[颜色组件：就是可以复用的颜色，可以在“外观”里（参考位置下方截图的绿框）选择和新建（如果找不到，可以选中一个颜色块，就会展示了）字体组件：同上，也是可以复用的字体样式，在“外观”(下方绿色框)中选择和新建]]></description><category></category></item><item><title><![CDATA[简单讲讲设计四大原则 - 前端读《写给大家看的设计书》收获]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/110638227</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/110638227</guid><author>Candy_home</author><pubDate>Fri, 04 Dec 2020 14:27:54 +0800</pubDate><description><![CDATA[文/ 阿里淘系 F(x) Team - 郁结

原书 Robin williams 著《写给大家看的设计书》 The Non-Designer's Design Book




最近想看一些设计相关的文章，来提升一下自己的审美~

就看了《写给大家看的设计书》，这本比较适合入门的书籍~

本篇文章主要从设计四大基本原则来讲的，我也从这四个带你来讲下，附上几个例子，帮助大家了解



设计四大原则

设计的四大原则，分别是：亲密性、对齐、重复、对比，缺一不可！

我们来挨个说一说



亲密性（Pr...]]></description><category></category></item><item><title><![CDATA[bizcharts带图片和时间单独刻度，自定义tooltip marker效果]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/106478238</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/106478238</guid><author>Candy_home</author><pubDate>Tue, 02 Jun 2020 14:57:02 +0800</pubDate><description><![CDATA[最终效果

废话不多说~上图~



觉得不清楚的可以点击高清链接



bizcharts改造

X轴坐标拓展 - 增加图片、时间

"bizcharts" 推荐"3.5.9" 版本


const labelSetting = {
    htmlTemplate: (text, item, index) =&gt; {
      let info = typoList &amp;&amp; typoList[index];
      if (!info) return;
      retu...]]></description><category></category></item><item><title><![CDATA[2019年度总结篇！]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/103809659</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/103809659</guid><author>Candy_home</author><pubDate>Fri, 03 Jan 2020 00:07:21 +0800</pubDate><description><![CDATA[2019不想2018，感觉一瞬间就过去了~

时间啊~逝者如斯夫，不舍昼夜~



技术文章

数目和大致总结

19年 - 11篇【同样虎头蛇尾的结束 - 11月、12月 0篇】【其中一篇年终总结】

果然。我就是我，说风是雨的我。。。



2019文章分析

阅读量最佳：【果然还是 入门笔记阅读人数多】





技术深度：【认真研究了一下 Grafana的插件，并且写了个基础的表格...]]></description><category></category></item><item><title><![CDATA[Grafana Table插件源码阅读（进阶） - 前端视角]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/102697203</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/102697203</guid><author>Candy_home</author><pubDate>Wed, 23 Oct 2019 16:55:37 +0800</pubDate><description><![CDATA[前言

之前已经带大家阅读了Grafana 入门、安装和命令 (mac)和Grafana 插件开发入门 - 前端视角（React）两片文章~

相信大家对于Grafana插件已经有了一个初步的认识，下一步，我们来进阶版，看下 table插件 的书写





Table源文件分析

源文件位置：https://github.com/grafana/grafana/tree/master/...]]></description><category></category></item><item><title><![CDATA[Grafana 插件开发入门 - 前端视角（React）]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/102665934</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/102665934</guid><author>Candy_home</author><pubDate>Tue, 22 Oct 2019 11:32:23 +0800</pubDate><description><![CDATA[前言

接上一篇Grafana 入门、安装和命令 (mac)，如果你木有安装的话，记得先安装一下哦

我自己觉得开发一个插件不难，但是开发一个通用化的插件有点小麻烦（主要是配置那块）



插件学习(参考)



1.官网插件

官网plugin Demo链接：https://grafana.com/docs/plugins/developing/development/

官网有五个demo...]]></description><category></category></item><item><title><![CDATA[Grafana 入门、安装和命令  (mac)]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/102629703</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/102629703</guid><author>Candy_home</author><pubDate>Mon, 21 Oct 2019 15:01:20 +0800</pubDate><description><![CDATA[前要

有一天，开发哥哥抓着我，说要给我加个前端需求，界面是这个样子的，让一脸懵逼的我来写个插件。



我内心，那我先去调研一下吧。。



阅读步骤

1.下载brew 安装 grafana

2.启动grafana

3.找到相关安装目录位置

4.plungin项目研究（放下一篇文章解说）





安装



1.安装brew

mac我使用的是brew安装（参考链接：h...]]></description><category></category></item><item><title><![CDATA[JS 全屏对象操作【FullScreen对象随拿随用】]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/100530048</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/100530048</guid><author>Candy_home</author><pubDate>Tue, 03 Sep 2019 23:33:31 +0800</pubDate><description><![CDATA[起源

相信大家都有需要全屏的时候，页面的全屏怎么做呐？目前浏览器的原生支持以及很不错了，大家可以尝试下，目前在chrome浏览器上尝试！可用！



封装成FullScreen对象的代码


/** 
 * 全屏操作
 *
 * 	- 是否可以切换到全屏状态【属性】   fullscreenEnabled
 * 	- 是否处于全屏状态【函数】 isFullScreen 
 *  - 展开全屏【...]]></description><category></category></item><item><title><![CDATA[iconfont 和 antd Spin  实现自定义的loading效果]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/99292410</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/99292410</guid><author>Candy_home</author><pubDate>Mon, 12 Aug 2019 11:19:40 +0800</pubDate><description><![CDATA[前言

有个通过iconfont实现的loading效果的需求，实践了下，还蛮简单的，几行代码就可以搞定~记录下



代码实践


import { Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1150144_gcj3uq1p6vp.j...]]></description><category></category></item><item><title><![CDATA[nodejs npm 卸载 + 重新安装]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/89314217</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/89314217</guid><author>Candy_home</author><pubDate>Mon, 15 Apr 2019 16:14:37 +0800</pubDate><description><![CDATA[nodejs npm 卸载


 sudo npm uninstall npm -g
 
 sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
 
 sudo rm -rf /usr/local/include/node /Users/$USER/.npm
 
 sudo...]]></description><category></category></item><item><title><![CDATA[React流式打字效果实现（不需要CSS） - Typing Effect with out  use Css]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/89093059</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/89093059</guid><author>Candy_home</author><pubDate>Mon, 08 Apr 2019 18:03:56 +0800</pubDate><description><![CDATA[前言

最近有个云栖大会的demo展示需求，要实现个类似的打字效果，所以我找了找相关的库。找到一个还不错的~叫iTyped.js。但是最终的效果和我想要的不太一样，会有回删效果，看了下源码，所以就自己写了一个~

再夸奖下 iTyped.js 只有3K，非常小而美，完全靠JS实现的效果！


最终效果

边播放语音，边出现文字的打字效果，gif 效果如下~





源码分享



变量设置...]]></description><category></category></item><item><title><![CDATA[13界D2大会 Sven Sauleau - Understanding the Differences Is Accepting（我猜名字又叫JS冷知识）]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/87785088</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/87785088</guid><author>Candy_home</author><pubDate>Wed, 20 Feb 2019 15:57:28 +0800</pubDate><description><![CDATA[有两个相关议题, 一个是 “Understanding the Differences Is Accepting”，主要科普下JS相关的冷知识。 另外一个是“WebAssembly becoming the biggest platform” ，科普下如何使用和上手WebAssembly。

Sven Sauleau是个很帅气的]]></description><category></category></item><item><title><![CDATA[用Moment.js 计算两个时间直接的间隔]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/86547918</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/86547918</guid><author>Candy_home</author><pubDate>Fri, 18 Jan 2019 23:38:29 +0800</pubDate><description><![CDATA[原因

啦啦啦啦~

之前算数据的直接具体的小时的时候就想要直接用 Moment.js来计算

简直方便，所以就想写个短小精悍的一篇来正面下，周五还坐在项目室的我



 

操作步骤

1、打开  Moment.js官网链接  ，打开控制台

2、代码如下（替换AA、BB的值）


AA = &quot;2019-01-09 10:15:00&quot;;
BB = &quot;2019-01-08 18:10:00&quot;;

...]]></description><category></category></item><item><title><![CDATA[第13届D2大会 - 参会感受和总结]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/86088625</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/86088625</guid><author>Candy_home</author><pubDate>Wed, 09 Jan 2019 12:29:42 +0800</pubDate><description><![CDATA[参与身份：志愿者

今年~

又一次参与了D2大会~

又一次当了的志愿者，感觉今年是蹭票的一年

D2头一年采用收费制度，没想到票居然还卖完了~

今年是在二号厅当微博直播的志愿者，顺便帮嘉宾演讲做倒计时举牌

 

参与议程主题：见下图红框



 

面向美学原则和应用需求的大规模图布局与交互研究

主讲人：汪云海 / 博士 山东大学“齐鲁青年学者”特聘教授 博士生导师

感觉：

1.算法...]]></description><category></category></item><item><title><![CDATA[2018年~年度总结篇！]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/85635538</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/85635538</guid><author>Candy_home</author><pubDate>Wed, 02 Jan 2019 21:16:18 +0800</pubDate><description><![CDATA[2018已经悄悄过去啦~

2018年真是过的惊险刺激呐~

 

技术文章

数目和大致总结

18年 - 11篇【虎头蛇尾的结束 - 11月、12月 0篇】

17年 - 8篇【重新捡回写文章的乐趣】

16年只写了一篇【入职阿里的迷茫期】

15年 - 10篇【面试前的焦虑】

14年 - 18篇【开始写文章的兴奋感】

 

2018文章分析

阅读量最佳：



 

文笔风格改变：

...]]></description><category></category></item><item><title><![CDATA[微信图文分享 - 公众号配置&&填坑]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/83183412</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/83183412</guid><author>Candy_home</author><pubDate>Fri, 19 Oct 2018 17:49:50 +0800</pubDate><description><![CDATA[写在前面

本来以为对接个微信图文分享会比较容易，结果，万万没想到啊。。这个坑坑的我简直是要]]></description><category></category></item><item><title><![CDATA[等待中loading 菊花图CSS 效果实现【Antd spin 源码实现】]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/81540247</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/81540247</guid><author>Candy_home</author><pubDate>Thu, 09 Aug 2018 17:35:32 +0800</pubDate><description><![CDATA[缘起：

今天闲来无事，调试一个单页面VUE的效果，94年的开发小哥哥说，让我给他加个菊花图...Excuse me? 菊花图？长这样么？

还是？长这样？简直让我脑洞大开。。

其实呐，他说的是这个。。等待状态，我内心 

 

好了，那怎么实现呐

 

 

第一反应：gif

找个gif 图好麻烦~

想了想、、一定有别的解决方式。

 

 

第二反应：看别的怎么做

第一个想起来宠幸...]]></description><category></category></item><item><title><![CDATA[iframe传值之Postmessage]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/81294286</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/81294286</guid><author>Candy_home</author><pubDate>Wed, 01 Aug 2018 14:49:38 +0800</pubDate><description><![CDATA[缘由：

最近遇到一个神奇的问题，淘宝WindVane不支持多层嵌套，只支持一层嵌套的形式，所以就像使用一层传值的方式来交互iframe,调研了几种方案以后，发现还是window.postMessage传值在iframe最靠谱，但是相对的要改动原来的页面，所以自己衡量啦~

 

API：

MDN API

 

传值方式：

父页面给子页面传值方式，写法基本是一致的，收到值监听message事...]]></description><category></category></item><item><title><![CDATA[【Swiper】4.3.2  自动滚屏错位问题解决（含demo）]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/80766407</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/80766407</guid><author>Candy_home</author><pubDate>Thu, 21 Jun 2018 22:06:36 +0800</pubDate><description><![CDATA[起因：Swiper由于设置了autoplay，会自己滚动，怎么解决呐，我先升级到了4.3.2发现，默认调用没有解决这个问题，查看了Swiper API 发现了个解决方式，分享给大家。PS: 查看了3.X.X 的API 感觉没办法解决，建议升级到4.X.X版本 , 不能完全兼容，但是改动成本不大解题思路：1.分析原因滚动错位原因我分析有两个A. 前后创建了两首尾个元素, 导致获取的不是真正的元素，下...]]></description><category></category></item><item><title><![CDATA[【React】锚点效果实现（点击跳转定位位置）（内含demo）]]></title><link>https://blog.youkuaiyun.com/Candy_home/article/details/80738052</link><guid>https://blog.youkuaiyun.com/Candy_home/article/details/80738052</guid><author>Candy_home</author><pubDate>Tue, 19 Jun 2018 20:32:38 +0800</pubDate><description><![CDATA[锚点：超链接的一种形式，快速定位到想要看的位置，常用在文章目录等位置。那么问题来了React不支持原生锚点的书写方式所以怎么在React里实现类似锚点的效果我的解题思路1.在 url里 使用 anchor 参数2.页面 解析 是否有anchor参数对应的id3.有对应id的话, 滚动到相应位置代码实践1.在 url里 添加 anchor 参数                            ...]]></description><category></category></item></channel></rss>