前端夜谈-CSDN博客

原创一个简单的命令行图片压缩工具

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

2019-06-01 15:35:57 773

原创小程序多图列表性能优化

写这篇文章的缘由: 最近在公司的小程序项目中遇到了页面图片元素过多导致的性能问题. 从小程序提供的性能检测面板分析, 确定是图片元素占用了过多内存导致.因为本人之前主要是做桌面端应用开发和原生app开发, 没有太顾及过移动端图片的内存占用问题. 这次既然遇到了, 也就趁这个机会学习一下其优化的技巧.什么造成的性能问题简单的来说: DOM节点过多 && 图片节点过多DOM节...

2019-05-28 10:07:38 1591

前端杂谈: 如何实现一个 Promise?首先, 什么是 Promise?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 err...

2018-12-13 16:38:56 317

原创微软宣布 Edge 浏览器将切换至 Chromium 内核

微软宣布 Edge 浏览器将切换至 Chromium 内核简述据微软官方 blog的消息，windows 的默认浏览器 Edge将切换内核至 Chromium，并且微软将秉承开源精神，在未来更多的为 Chromium项目贡献代码。微软具体说了什么？原文如下：For the past few years, Microsoft has meaningfully increased par...

2018-12-07 12:22:01 2752

原创前端杂谈: DOM event 原理

前端杂谈: DOM event 原理DOM 事件是前端开发者习以为常的东西. 事件的监听和触发使用起来都非常方便, 但是他们的原理是什么呢? 浏览器是怎样处理 event绑定和触发的呢?让我们通过实现一个简单的event 处理函数, 来详细了解一下.首先, 如何注册 event ?这个相比大家都很清楚了, 有三种注册方式:html 标签中注册<button onclick="...

2018-11-22 12:35:09 243

原创前端杂谈: CSS 权重 (Specificity)

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

2018-11-19 15:25:40 142

原创 Github Repository 可视化 (D3.js & Three.js)

Github Repository 可视化 (D3.js & Three.js)先上 Demo 链接 & 效果图demo 链接github 链接效果图 2D:效果图 3D:为什么要做这样一个网站?最初想法是因为 github 提供的页面无法一次看到用户的所有 repository, 也无法直观的看到每个 repository 的量级对比(如 commit 数, s...

2018-10-17 18:42:52 2401

原创可视化讲解深度优先遍历(DFT)

可视化讲解深度优先遍历(DFT)深度优先遍历, 刷过题的朋友应该都很熟悉了,难是不难,但是理解起来还是要费一些功夫的. 深度优先遍历的实现方法有递归和非递归两种, 这里我们用可视化的角度,讲解前一种: 递归的深度优先遍历.为什么要以可视化的方式来讲解呢? 因为人是视觉的动物, 如果和你说二叉树或栈 , 相信大家脑中出现的都是下面的图形:而不是下面的代码:// b...

2018-09-16 12:07:45 419

原创创建, 发布自己的 Vue UI 组件库

创建, 发布自己的 Vue UI 组件库前言在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI, Vuetify 等.只需一行命令, 即可方便的将这些库引入我们当前的项目:npm install vuetify// oryarn add vuetify但是当我们自己开发了一个 UI Component, 需要在多个项目...

2018-07-22 13:09:53 13102 3

原创用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

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

2018-07-16 10:04:50 1676

原创可视化讲解 DOM 构建过程

可视化讲解 DOM 构建过程前言最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.记得我之前也为理解 DOM 构建流程查阅过数次资料, 虽然每次查阅完都觉得 DOM 构建流程很简单, 看完便懂, 但是懂了又忘还是让人有些头疼.为了给自己加深印象, 也为了为大家提供一个可视化的理解 DOM 构建过程的方式, 笔者制作了...

2018-07-10 12:09:20 990 1

翻译 [译] D3.js 之 d3-shap 简介

[译] D3.js 之 d3-shap 简介译者注原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape 译者: ssthouse 联系译者: 邮箱([email protected]) & 微信(wssst123456789)译文假设你现在想创建一个用于学习特定数据集的工具, 你最容易想到的呈现...

2018-07-02 17:50:24 1164

翻译 [译]D3.js 之 d3-selection 原理

[译]D3.js 之 d3-selection 原理译者注原文: 来自 D3.js 作者 Mike Bostock 的How Selections Works 译者: ssthouse译文在前一篇文章中, 我介绍了关于 D3 selection 的基础, 这些基础足以让你开始使用 D3 selection.在这篇文章中, 我将介绍 d3-selecti...

2018-06-29 11:04:34 1876

翻译 [译] D3.js 嵌套选择集 (Nested Selection)

译者注: 原文: Mike Bostock (D3.js 作者) – Nested Selections 译者: ssthouse本文讲解的是关于 D3.js 中 d3-selection 的使用. d3-selection 是 d3 的核心所在, 它提供了一种和以往 Dom 操作和数据操作完全不同的思路, 让我们能非常优雅的进行数据可视化工作. 本文是 d3 作者...

2018-06-26 18:44:38 481

原创使用 github pages, 快速部署你的静态网页

使用 github pages, 快速部署你的静态网页Github Pages 官网 Github Pages: Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.前言...

2018-06-25 17:48:02 28565 10

原创用D3.js 十分钟实现字符跳动效果

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

2018-06-16 13:52:34 1857 1

翻译以 Join 的方式来思考D3.js

以 Join 的方式来思考D3.js声明原文链接: 来自 D3作者 Mike Bostock https://bost.ocks.org/mike/join/译文地址: github repository如果觉得还不错, 不妨去github给个star ?Content打个比方, 你想用D3画一个散点图 , 用每一个svg的circle元素来可视化你的数据. 你会...

2018-06-13 12:57:33 716

翻译 D3.js学习之路

D3.js 简介原文: https://medium.com/@enjalot/the-hitchhikers-guide-to-d3-js-a8552174733a 译文源代码地址: https://github.com/ssthouse/d3-blog/blob/master/d3-guide/d3_roadmap_cn.md如果这篇文章对你有帮助的话, 不妨点个赞 ...

2018-06-12 12:44:44 722

原创 D3.js + Canvas 绘制组织结构图

D3.js…# D3.js + Canvas 绘制组织结构图使用 D3.js 默认的 svg 渲染D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子:https://bl.ocks.org/mbostock/4339083使用svg有好有坏: - 好处是方便操作dom元素, 添加用户交互 - 坏处是渲染效率不高, 在数据量较大时页面易掉帧, 卡顿在大多数数...

2018-06-01 15:37:18 6736

原创 Github Visualization / Github 数据可视化

Github Visualization / Github 数据可视化效果: 一个简单的Github数据展示网页, 目前功能有:Tech: 使用到的技术:Purpose:Github Visualization / Github 数据可视化效果: 一个简单的Github数据展示网页, 目前功能有:输入github username, 展示所有reposit...

2018-05-12 09:14:52 2037

原创 android基于Activity共享元素切换效果的实现

先上一张效果图:主要用到的类有:android.support.v4下的三个类:ActivityOptionsCompat, ActivityCompat, ViewCompat这三个类的主要作用就是适配不同的android版本, 即使是在不支持这种效果的设备上也不回发生异常;下面开始贴代码: gv.setOnItemClic

2015-08-27 10:49:17 7349 1

原创 Meta-data的作用和自定义

经常用第三方库的同学们应该经常会用到mata-data这个标签,, 比如:android:value="***************************USER-KEY****************" />这一段就是百度地图的用户信息配置那么他的作用很明显就是用来配置用户信息的, 但是百度地图是怎么获取到我们在manifest中定义的信息的呢?答案是: 我们在配

2015-08-26 16:30:44 6203

原创 Android透明顶栏(沉浸式)在android4.4上的实现

android的透明顶栏是在android5.0加入的新特性, 虽然其实在ios中早就有了.....:在5.0中的实现方式很简单:在style.xml中的application 的主题中添加colorPrimary,即可, 还可以设置更多的默认颜色来进行主题的搭配,当然这不是我今天要说的重点;为了在android4.4及以上的设备上也有沉浸式的体验,其实我们只要加入下面

2015-08-24 20:34:30 821 1

ssthouse的博客