Candy_home-CSDN博客

原创从 sketch 中获取颜色、字体组件内容

颜色组件：就是可以复用的颜色，可以在“外观”里（参考位置下方截图的绿框）选择和新建（如果找不到，可以选中一个颜色块，就会展示了）字体组件：同上，也是可以复用的字体样式，在“外观”(下方绿色框)中选择和新建

2022-10-17 13:45:10 1515 1

原创简单讲讲设计四大原则 - 前端读《写给大家看的设计书》收获

文/ 阿里淘系 F(x) Team - 郁结原书 Robin williams 著《写给大家看的设计书》 The Non-Designer's Design Book最近想看一些设计相关的文章，来提升一下自己的审美~就看了《写给大家看的设计书》，这本比较适合入门的书籍~本篇文章主要从设计四大基本原则来讲的，我也从这四个带你来讲下，附上几个例子，帮助大家了解设计四大原则设计的四大原则，分别是：亲密性、对齐、重复、对比，缺一不可！我们来挨个说一说亲密性（Pr...

2020-12-04 14:27:54 398

原创 bizcharts带图片和时间单独刻度，自定义tooltip marker效果

最终效果废话不多说~上图~觉得不清楚的可以点击高清链接bizcharts改造X轴坐标拓展 - 增加图片、时间"bizcharts" 推荐"3.5.9" 版本const labelSetting = { htmlTemplate: (text, item, index) => { let info = typoList && typoList[index]; if (!info) return; retu...

2020-06-02 14:57:02 1470

原创 2019年度总结篇！

2019不想2018，感觉一瞬间就过去了~时间啊~逝者如斯夫，不舍昼夜~技术文章数目和大致总结19年 - 11篇【同样虎头蛇尾的结束 - 11月、12月 0篇】【其中一篇年终总结】果然。我就是我，说风是雨的我。。。2019文章分析阅读量最佳：【果然还是入门笔记阅读人数多】技术深度：【认真研究了一下 Grafana的插件，并且写了个基础的表格...

2020-01-03 00:07:21 694 6

原创 Grafana Table插件源码阅读（进阶） - 前端视角

前言之前已经带大家阅读了Grafana 入门、安装和命令 (mac)和Grafana 插件开发入门 - 前端视角（React）两片文章~相信大家对于Grafana插件已经有了一个初步的认识，下一步，我们来进阶版，看下 table插件的书写Table源文件分析源文件位置：https://github.com/grafana/grafana/tree/master/...

2019-10-23 16:55:37 2625

原创 Grafana 插件开发入门 - 前端视角（React）

前言接上一篇Grafana 入门、安装和命令 (mac)，如果你木有安装的话，记得先安装一下哦我自己觉得开发一个插件不难，但是开发一个通用化的插件有点小麻烦（主要是配置那块）插件学习(参考)1.官网插件官网plugin Demo链接：https://grafana.com/docs/plugins/developing/development/官网有五个demo...

2019-10-22 11:32:23 5247 4

原创 Grafana 入门、安装和命令 (mac)

前要有一天，开发哥哥抓着我，说要给我加个前端需求，界面是这个样子的，让一脸懵逼的我来写个插件。我内心，那我先去调研一下吧。。阅读步骤1.下载brew 安装 grafana2.启动grafana3.找到相关安装目录位置4.plungin项目研究（放下一篇文章解说）安装1.安装brewmac我使用的是brew安装（参考链接：h...

2019-10-21 15:01:20 3040

原创 JS 全屏对象操作【FullScreen对象随拿随用】

起源相信大家都有需要全屏的时候，页面的全屏怎么做呐？目前浏览器的原生支持以及很不错了，大家可以尝试下，目前在chrome浏览器上尝试！可用！封装成FullScreen对象的代码/** * 全屏操作 * * - 是否可以切换到全屏状态【属性】 fullscreenEnabled * - 是否处于全屏状态【函数】 isFullScreen * - 展开全屏【...

2019-09-03 23:33:31 670

原创 iconfont 和 antd Spin 实现自定义的loading效果

前言有个通过iconfont实现的loading效果的需求，实践了下，还蛮简单的，几行代码就可以搞定~记录下代码实践import { Icon } from 'antd';const IconFont = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1150144_gcj3uq1p6vp.j...

2019-08-12 11:19:40 3186

原创 nodejs npm 卸载 + 重新安装

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...

2019-04-15 16:14:37 62679 2

原创 React流式打字效果实现（不需要CSS） - Typing Effect with out use Css

前言最近有个云栖大会的demo展示需求，要实现个类似的打字效果，所以我找了找相关的库。找到一个还不错的~叫iTyped.js。但是最终的效果和我想要的不太一样，会有回删效果，看了下源码，所以就自己写了一个~再夸奖下 iTyped.js 只有3K，非常小而美，完全靠JS实现的效果！最终效果边播放语音，边出现文字的打字效果，gif 效果如下~源码分享变量设置...

2019-04-08 18:03:56 2023

原创 13界D2大会 Sven Sauleau - Understanding the Differences Is Accepting（我猜名字又叫JS冷知识）

有两个相关议题, 一个是 “Understanding the Differences Is Accepting”，主要科普下JS相关的冷知识。另外一个是“WebAssembly becoming the biggest platform” ，科普下如何使用和上手WebAssembly。Sven Sauleau是个很帅气的

2019-02-20 15:57:28 557

原创用Moment.js 计算两个时间直接的间隔

原因啦啦啦啦~之前算数据的直接具体的小时的时候就想要直接用 Moment.js来计算简直方便，所以就想写个短小精悍的一篇来正面下，周五还坐在项目室的我操作步骤1、打开 Moment.js官网链接，打开控制台2、代码如下（替换AA、BB的值）AA = "2019-01-09 10:15:00";BB = "2019-01-08 18:10:00";...

2019-01-18 23:38:29 30759 1

原创第13届D2大会 - 参会感受和总结

参与身份：志愿者今年~又一次参与了D2大会~又一次当了的志愿者，感觉今年是蹭票的一年D2头一年采用收费制度，没想到票居然还卖完了~今年是在二号厅当微博直播的志愿者，顺便帮嘉宾演讲做倒计时举牌参与议程主题：见下图红框面向美学原则和应用需求的大规模图布局与交互研究主讲人：汪云海 / 博士山东大学“齐鲁青年学者”特聘教授博士生导师感觉：1.算法...

2019-01-09 12:29:42 740

原创 2018年~年度总结篇！

2018已经悄悄过去啦~2018年真是过的惊险刺激呐~ 技术文章数目和大致总结18年 - 11篇【虎头蛇尾的结束 - 11月、12月 0篇】17年 - 8篇【重新捡回写文章的乐趣】16年只写了一篇【入职阿里的迷茫期】15年 - 10篇【面试前的焦虑】14年 - 18篇【开始写文章的兴奋感】 2018文章分析阅读量最佳：文笔风格改变：...

2019-01-02 21:16:18 268 2

原创微信图文分享 - 公众号配置&&填坑

写在前面本来以为对接个微信图文分享会比较容易，结果，万万没想到啊。。这个坑坑的我简直是要

2018-10-19 17:49:50 587

原创等待中loading 菊花图CSS 效果实现【Antd spin 源码实现】

缘起：今天闲来无事，调试一个单页面VUE的效果，94年的开发小哥哥说，让我给他加个菊花图...Excuse me? 菊花图？长这样么？还是？长这样？简直让我脑洞大开。。其实呐，他说的是这个。。等待状态，我内心好了，那怎么实现呐第一反应：gif找个gif 图好麻烦~想了想、、一定有别的解决方式。第二反应：看别的怎么做第一个想起来宠幸...

2018-08-09 17:35:32 6003

原创 iframe传值之Postmessage

缘由：最近遇到一个神奇的问题，淘宝WindVane不支持多层嵌套，只支持一层嵌套的形式，所以就像使用一层传值的方式来交互iframe,调研了几种方案以后，发现还是window.postMessage传值在iframe最靠谱，但是相对的要改动原来的页面，所以自己衡量啦~ API：MDN API 传值方式：父页面给子页面传值方式，写法基本是一致的，收到值监听message事...

2018-08-01 14:49:38 3360 4

原创【Swiper】4.3.2 自动滚屏错位问题解决（含demo）

起因：Swiper由于设置了autoplay，会自己滚动，怎么解决呐，我先升级到了4.3.2发现，默认调用没有解决这个问题，查看了Swiper API 发现了个解决方式，分享给大家。PS: 查看了3.X.X 的API 感觉没办法解决，建议升级到4.X.X版本 , 不能完全兼容，但是改动成本不大解题思路：1.分析原因滚动错位原因我分析有两个A. 前后创建了两首尾个元素, 导致获取的不是真正的元素，下...

2018-06-21 22:06:36 2849

原创【React】锚点效果实现（点击跳转定位位置）（内含demo）

锚点：超链接的一种形式，快速定位到想要看的位置，常用在文章目录等位置。那么问题来了React不支持原生锚点的书写方式所以怎么在React里实现类似锚点的效果我的解题思路1.在 url里使用 anchor 参数2.页面解析是否有anchor参数对应的id3.有对应id的话, 滚动到相应位置代码实践1.在 url里添加 anchor 参数 ...

2018-06-19 20:32:38 16900

原创 JS 获取链接(link)图片的大小or体积

最近PD小姐姐又有了新的需求，是获取图片的大小，不能超过1M可是我查遍了全网的都是讲获取宽高的，宽高我知道，直接onload就可以获取了，那么体积怎么获取呐？后来，搜到一个英文问题，解决了体积的问题，但是感觉不是特别准确~记录下获取体积或者叫大小： function getImageSizeInBytes(imgURL) { var request = new XMLHttpRe...

2018-05-16 20:55:41 3119 3

原创轮播滚动效果+动画淡入淡出切换图片（内含demo）

起因：做了个滚动效果，除了自适应以外，都和腾讯AI开发平台的效果相似。主要技术点：1.动画淡入淡出切换图片2.轮播滚动效果 + hover改变选中滚动状态3.文字切换展示1.动画淡入淡出切换图片（通过控制CSS来改变效果）JS代码：// 替换class达到淡入淡出的效果 fadeIn(e) { e.className = "time-slider-item fadein"; }...

2018-04-27 16:43:41 3052

原创 IOS h5页面采坑记录

1. input 输入框样式IOS上回会有个很丑的内边框添加 -webkit-appearance: none; 就可以去掉 input { height: 100%; width: 100%; box-shadow: none; outline: none; padding: 0 10*@p; border: none; borde...

2018-04-23 22:17:59 731

原创使用AlloyFinger 的手势缩放，外部按钮操控缩放, 3D改为2D减少放大模糊

项目中需要手势放大图片，懒得自己写组件库~找了好久，决定用AlloyFinger，但是呐~光用AlloyFinger不满足要求，只能中心放大，后续加入了AlloyCrop来达到可以按照手势点击位置放大，最后发现有“微信”浏览器等有部分不兼容matrix3d的，会变模糊。最后改动transform.js变成matrix的2d缩放。1.AlloyFinger的使用【中心放大图片，太粗糙，达不到PD小姐...

2018-04-23 10:41:04 4887 7

原创 CSS 多行省略失效 (-webkit-box-orient 失效)

很神奇的使用多行省略的时候原始代码为：.line-ellipsis-2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical;}默认编译的时候，会过滤 -webkit-box-orie...

2018-03-21 21:52:40 10298 1

原创改变head中的 title 标签+兼容钉钉、微信

问题发现：IOS11版本的钉钉，目前只使用更改title的时候有概率不生效，后续调研了下，出了JQuery和JS两个版本的方便使用和粘贴。目前除了钉钉以外，没有找到不好的适配情况，PC端只使用初级的就可以。JS版本：document.title = title;JQuery版本:$(document).attr('title','新title名字'); // 将 title 的值改为 ‘新titl...

2018-02-08 17:22:52 2205

原创 Sketch文件转成PSD格式手把手教程

主要需求来源：window没有sketch的不能下载，设计做了sketch版本，不好意思让他重做，就想看下有没有可以转换的工具

2017-12-13 22:13:37 48993 1

原创移动端H5页面截图【含 domtoimage、html2canvas 】

移动端H5页面截图【含 domtoimage、html2canvas 】起因：由于云栖大会项目需要支持名片保存到本地功能【如下图红框】，所以，需要单独截取页面中的名片信息，并且保存到本地。推荐给：需要获取页面内容，给页面截图的小伙伴介绍两个工具：html2canvas + domtoimage官方地址：https://github.com/n

2017-11-02 16:35:08 27020 13

原创 H5音频<audio/>样式修改，拖拽、点击进度操作、总时长加载

H5音频自定义样式，拖拽、点击改变进度操作，总时长 during 加载1>“点击播放”和"点击暂停" 调用原生audio.play() 和 audio.pause()来对进度条进行操作2>总时长加载：解析 audio.duration 来获取总时长，会有部分浏览器兼容问题，下面列举部分兼容方式。3>点击跳转进度：获取当前的鼠标点击位置【e.pageX】 - 进度条.offsetLeft【相对于它的直接父元素的偏移量】，使用 translateX 改变 “蓝色小球”的播放进度位置。4>拖拽跳转

2017-10-30 14:19:05 19629 2