最近看项目视频的时候对里面使用 svg 的方式感到很好奇，于是去网上查了一下，发现 svg 竟然也有类似于 css 雪碧图一样的用法，也就是 svg-sprite（孤陋寡闻了），而且配合插件后能够以组件化的方式使用 svg，非常方便。这里记录下一些相关用法。
官方文档：https://webpack.docschina.org/loaders/url-loader/
2019 年底，微信小程序已经推出了近三个年头，我身边的前端开发者基本都做过至少一次小程序了。很多友商曾打算推动小程序进入 W3C 标准，而微信并不为所动，个人认为，小程序本身在框架设计上称不上「标准」，微信也并没打算做一个「标准的平台」。
前阵子公司的产品经理找我谈个需求，希望能为每个用户生成专属的资讯分享图片及让开通专栏的用户能够生成专属的文章分享图片。这两天刚好有空，就抽空预研了 “生成专属的资讯分享图片” 这个功能。
在本文中，我为前端Web开发人员汇总了30种顶级工具，从代码编辑器和代码游乐场到CSS生成器，JS库等等。
Varlet提供了一些常用的图标，图标都来自 Material Design Icon。
可以自己在html中试一试这一段代码(仔细看，我是直接引用了网络上的d3库，所以在网上都可以正常运行)
参考文章6. 前端水印生成方案 的svg方案是ES6语法的，项目问题，我把它改写成ES5语法了。 js代码如下：
这个题目有点小，本篇博客真正谈论的应该是服务端生成图表的简单方案，这里面有两个关键字：服务端 & 简单，我们知道基于js有很多的图表库，知名的如D3、echarts 、highcharts等等，对于做数据可视化方向的同学可能自己都做过此类chart的研发，无论从零构建还是使用已有的轮子，基本上都是基于js在做，因为大部分数据可视化产品都是to B的产品。
制作扇形其实也是使用 svg的 path 这个属性， 重要的是计算各个扇形区域的点，与弧度 效果图
火焰图（Flame Graph）看起来就像一团跳动的火焰，因此得名，它可以将 CPU 的使用情况可视化，使我们直观地了解到程序的性能瓶颈。我们通常要结合操作系统的性能分析工具（Profiling Tracer）使用火焰图，常见的操作系统的性能分析工具如下。
icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字
英文 | https://us.niemvuilaptrinh.com/article/63-open-source-web-development-tools
目前业务正在逐步迁移到fis3和lego，有许多和业务相关的fis插件需要处理。 fis 编译流程 官方的这张图，对fis的构建流程讲述的很清楚了，主要包括单文件编译和打包，业务中的插件也主要是这两
D3的数轴实际商是由程序员自己来定义参数的函数。调用数轴函数，会生成数轴相关的可见元素，包括轴线、标签和刻度 。
官方的这张图，对fis的构建流程讲述的很清楚了，主要包括单文件编译和打包，业务中的插件也主要是这两种，至于是pre还是post，差别不是特别大。主要记住一点区别：单文件编译阶段，无法获取文件之间的关联信息；打包阶段，能够拿到项目的所有文件
在升级了DeveMobile 主题的时候Jeff 也顺便将主题主页进行了更新，访问主页你会看到首屏的Low-Poly 背景（每次刷新都不同），这个效果就是利用了d3.js 与Trianglify 制作
这个库给的示例代码是 webpack.config.js 但是我们现在在用的是 Vue
上一篇文章「安利一些不错的D3.js资源 - 牛衣古柳 2021.06.29」的反响还不错，记得有新群友说是主管推给她文章才加过来的，也是很神奇。
安利一波CSS、JS炫酷动效在线下载网站 # bttn.css 专注分享网页按钮的样式库 # Hover-Buttons 一个可以生成代码的网站 # granim.js 基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案，使指定元素在这些颜色中执行平滑的渐变色过渡效果。 # micron 可生成炫酷CSS3动画的js动画库插件。通过micron.js插件，你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动
D3指的是Data-Driven Documents，js即Javascript，是后缀名。先看看官网上对D3.js库的定义：
前言： "宁肯像种子一样等待 也不愿像疲惫的陀螺 旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名，看完后又读了两遍，觉得很有味道。后来一寻根究底才知这是出资大诗人汪国真之口，出处《她》。且抛开上下文，单从这短短几句，正恰如其分的折射出有一群人，他们穿着不那么fashion，言辞不那么犀利，但是内心某一块地方像是躁动的火山，拥有无尽的动力和激情，矢志不渝种子般投身到技术研究和心得分享当中。 或许每一次的生长都是那么悄无声息，但是无数次的坚持只是为了破土那日让别人看到坚持
JSshell是一个JavaScript反向Shell工具，该工具可以帮助广大研究人员远程利用XSS漏洞或扫描并发现XSS盲注漏洞。当前版本的JSshell支持在Unix和Windows操作系统上运行，并且同时支持Python2和Python3。跟JShell（一款由s0med3v开发的通过XSS漏洞获取JavaScript反向Shell的工具）相比，这是一个非常大的更新，而且JSshell还不需要Netcat的支持，这一点跟其他的JavaScript Shell也有很大的区别。
js2flowchart 是一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器，真的值得你拥有，看下面截图就知道了，有没有很强大。
https://www.d3js.org.cn/document/d3-shape/#pies
在数据可视化中，地图是很重要的一部分。很多情况会与地图有关联，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。
clip path，话说这个东西是css3中的新特性，它可以遮罩许多形状，圆的、方的、扁的都可以，还有多边形(polygon)，这个polygon最是有趣。 因为clip path的前身是svg，所以
前言 平时大家在在逛 github 时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢? 首先我们先来一睹为快目前前端开发的三大主流框架: var ,看一看他们
上篇文章主要讲了图标组件Icon的实现，主要包括了两种常用的图标。今天就讲一下如何在Icon中加载本地的svg图标。
本文主要讲解了CSS3和JavaScript的一些基础知识，包括字体、CSS3动画、响应式、图片优化、SVG、动画、触发器等。还介绍了一些常用的工具和资源，如GitHub、MDN、CSS Tricks、CSS Media Queries等。同时，也探讨了如何避免重排和重绘，以及提高性能的方法和技巧。
字体方面主要包括：字体渲染方式，浏览器默认字体及重置，@font-face自定义字体，字体性能等
一.背景 前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 1.使用photoshop将文本图层单独导出成图片; 2.直接引入改字体的字体库.ttf文件 首先第一种方案的缺点,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦.同时使用图片,会带来更多的宽带消耗.用户体验方面,用户无法进行文字的选择,复制等操作,体验也不好. 第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M
作者：wenjuanrao，腾讯 PCG 前端开发工程师 最近梳理了下以前 webpack 的相关开发经验，整理和总结了一份入门笔记，欢迎大家围观和批评指正。 随着 web 应用越来越复杂和庞大，前端技术迅猛发展，各路大神各显神通，多种优秀的前端框架、新语言和其他相关技术(如下图所示)不断涌现，这些都极大地提高了我们的开发效率。 前端技术栈 然鹅，我们都知道这些技术都有一个共同点，那就是源代码都无法直接在浏览器上运行。此时，我们就需要通过构建工具将这些代码转换成浏览器可执行的 JS、CSS、HTM
前面两篇内容，我们聊过了如何在尽可能不写代码的情况下，完成一个可用的公式渲染接口，本篇我们深入的聊一下如何调整设计，让服务更可靠，性能更好。
这里，通过attr()给每个div添加bar类。使用style()修改每个div的高度。
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。
D3近年来一直是 JavaScript最重要的数据可视化库之一，在创建者 MikeBostock的维护下，前景依然无量，至少现在没有能打的:
一年一度的 JSConf 大会又召开，这是 2010 的官网：http://2010.jsconf.us/
神经网络（NN）架构图制作起来往往费时耗力，很多时候机器学习研究人员需要从头开始构建相关图。
在这个内卷为王的时代，内卷文化已经渗透到工作和生活的方方面面。不在知识的海洋里翱翔，就会在知识的海洋里溺亡。作为一名新生代农民工，在智商与勤奋已经被工友大佬们双重碾压的同时，面对日新月异的搬砖(编程)技能，学习的速度已经赶不上遗忘的速度，可是还得强忍泪水拥抱变化、不断打怪升级。
在这篇文章中，我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地将 TailwindCSS 与 Nuxt 应用程序结合使用。我们还将了解如何将 SVG 图标与 TailwindCSS 一起使用，而不是直接使用图像或 SVG 图标，以及如何基于给定图像为 TailwinCSS 构建自定义调色板。
从数据获得信息的最佳方式之一是，通过视觉化方式，快速抓住要点信息。另外，通过视觉化呈现数据，也揭示了令人惊奇的模式和观察结果，是不可能通过简单统计就能显而易见看到的模式和结论。
目前大多数博客网站图标都是使用Font Awesome图标库里的图标，本站刚开始也使用了原生的图标，很多网站里面都集成了Font Awesome，使用奥森图标有很多优点，用图标代替图片，加载快，使用灵活。
全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步👉「开始优化」部分直接查看优化手段 背景 前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。 在网络恢复后，尝试访问了下页面，无缓存首次打开需要等待近11s的时间，最大的资源达到了3.7M... 在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内 在这里总结记录一下，基本上都是一些
从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，
先看下博客整体效果。在线预览我的博客https://lemonchann.github.io/
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
