一个简单的 命令行 图片压缩工具 [链接] 是一个图片压缩网站, 在进行图片压缩的同时非常好的保存了图片的质量. 相信做前端的同学很多都用到过. 偶然一次发现该网站有提供Developer API , 点开一看还发现有很多已经封装好的第三方package. 但这些package都是提供编程时使用的, 很多时候我们需要的是快速压缩一两张图片, ...

写这篇文章的缘由: 最近在公司的小程序项目中遇到了页面图片元素过多导致的性能问题. 从小程序提供的性能检测面板分析, 确定是图片元素占用了过多内存导致.

A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle...

据微软官方 blog的消息，windows 的默认浏览器 Edge将切换内核至 Chromium，并且微软将秉承开源精神，在未来更多的为 Chromium项目贡献代码。

DOM 事件是前端开发者习以为常的东西. 事件的监听和触发使用起来都非常方便, 但是他们的原理是什么呢? 浏览器是怎样处理 event绑定和触发的呢?

前端杂谈: CSS 权重 (Specificity) css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短的 css selector id selector 权重高于 class selector. 但是具体规范是什么? 浏览器是按照什么标准来判定不同选择器的权重的呢? 让我们来看一下官方文档是怎么说的~ 第一个关键词: Spe...

前端杂谈: Attribute VS Property 第一个问题: 什么是 attribute & 什么是 property ? attribute 是我们在 html 代码中经常看到的键值对, 例如: {代码...} 上面代码中的 input 节点有三个 attribute: id : the-input type : text value : Name: property 是 attribute 对应的 DOM 节点的 对象属性 (Object field), ...

最初想法是因为 github 提供的页面无法一次看到用户的所有 repository, 也无法直观的看到每个 repository 的量级对比(如 commit 数, star 数),

深度优先遍历, 刷过题的朋友应该都很熟悉了,难是不难,但是理解起来还是要费一些功夫的. 深度优先遍历的实现方法有递归和非递归两种, 这里我们用可视化的角度,讲解前一种: 递归的深度优先遍历.

创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: {代码...} 但是当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对...

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛 前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果 可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中...

记得我之前也为理解 DOM 构建流程查阅过数次资料, 虽然每次查阅完都觉得 DOM 构建流程很简单, 看完便懂, 但是懂了又忘还是让人有些头疼.

原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape译者: ssthouse联系译者: 邮箱(ssthouse@163.com) & 微信(wssst123456789)

在这篇文章中, 我将介绍 d3-selection 的实现原理. 本文可能需要更长的时间来阅读, 但它能揭开 selection 的原理 并让你能真正掌握数据驱动文本的思想(D3的思想)

本文讲解的是关于 D3.js 中 d3-selection 的使用. d3-selection 是 d3 的核心所在, 它提供了一种和以往 Dom 操作 和 数据操作 完全不同的思路, 让我们能非常优雅的进行数据可视化工作.本文是 d3 作者对于 d3-selection 中 嵌套选择集 的讲解, 本人阅读后觉得很有启发, 所以翻译成中文, 希望对读者也能有所帮助.

用D3.js 十分钟实现字符跳动效果 注 本文基于 D3.js 作者 Mike Bostock 的 例子 原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 d3-selection. 如果对d3-selection的基本使用逻辑不太清楚可以参见 这篇文章. 效果图 Step1 首先代码会随机生成一个字符串, 该字符以绿色进入画面. S...

打个比方, 你想用D3画一个 散点图 , 用每一个svg的circle元素来可视化你的数据. 你会惊讶的发现: D3居然没有直接创建多个DOM元素的方法! 怎么回事?

学习D3.js的旅途中看到的风景十分美妙, 壮丽 有时甚至有些崎岖. 你可能会被d3.js文档长长的function列表所吓到(d3’s API documentation ), 或者被成堆的教程弄的疲惫不堪( dozens of tutorials). 这里有超过两万个例子你可以用来学习: 20,000+ d3 examples , 但你不知道哪些是真正对你学习D3.js有帮助的.

D3.js + Canvas 绘制组织结构图 使用 D3.js 默认的 svg 渲染 D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子: [链接] 使用svg有好有坏: 好处是方便操作dom元素, 添加用户交互 坏处是渲染效率不高, 在数据量较大时页面易掉帧, 卡顿 在大多数数据量不是特别大情况下, 使用svg的好处是远远盖过坏处的,但如果我们...