视野修炼-技术周刊第85期 | 图小小

欢迎来到第 85 期的【视野修炼 - 技术周刊】,下面是本期的精选内容简介

🔥强烈推荐

  1. pic-smaller - 图小小
  2. 精美的 CSS 背景图
  3. js 进阶问题

🔧开源工具&技术资讯

  1. Vue Fluid DnD - 适用于Vue的拖拽库
  2. 径向渐变背景生成
  3. TrasHTTPandas - HTTP 状态码测试

📚 教程&文章

  1. 不使用font-weight实现文字变瘦或变胖效果
  2. 256字节生成一个动态的城市画面

​也推荐大家关注一下最后的推荐内容(周刊的主要内容来源渠道)

下面开始本期内容的介绍,预计阅读时间 7 分钟。

🔥强烈推荐

1. pic-smaller - 图小小

基于 Web WASM 实现的在线图片压缩工具(纯前端,无需上传至服务端),支持多种常见图片格式JPEG, PNG, WEBP, AVIF, SVG, GIF

压缩质量可以媲美 tinypng ,操作界面也非常友好。

支持预览压缩前后效果对比。

整体效果还是很不错滴。

2. 精美的 CSS 背景图

支持一键复制 CSS 代码,比如下面这个。

css 复制代码
html {
  --s: 120px; /* control the size*/
  --c1: #e7525b;
  --c2: #b3ffc6;
  
  --_g: 80%,var(--c1) 25.4%,#0000 26%;
  background:
   radial-gradient(at 80% var(--_g)),
   radial-gradient(at 20% var(--_g)),
   conic-gradient(from -45deg at 50% 41%,var(--c1) 90deg,var(--c2) 0) 
      calc(var(--s)/2) 0;
  background-size: var(--s) var(--s);
}

3. js 进阶问题

仓库收集了许多 js 语法特色相关的问题究极八股,感兴趣的可以下来尝试一下。

我来摘抄2个有意思的。

🔧开源工具&技术资讯

4. Vue Fluid DnD - 适用于Vue的拖拽库

专为列表场景设计。

使用非常简单,对原代码极低的侵入性。

html 复制代码
<script setup lang="ts">
import { useDragAndDrop } from "vue-fluid-dnd";
const { parent } = useDragAndDrop(list);
<script>
<template>
   <ul ref="parent">
      <li v-for="(element, index) in list" :index="index">
        {{ element }}
      </li>
   </ul>
</template>

5. 径向渐变背景生成

6. TrasHTTPandas - HTTP 状态码测试

网站提供各种状态码的 HTTP 响应,可以用来调试各种状态码的响应情况。

📚 教程&文章

7. 不使用font-weight实现文字变瘦或变胖效果

利用 SVG 滤镜实现,核心代码如下

html 复制代码
<style>
data {
  font-size: 2.5rem;
  font-family: system-ui;
}
.erode {
  filter: url(#erode);
}
</style>
<data class="erode">苗条文案</data>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
</svg>

8. 256字节生成一个动态的城市画面

全部代码如下

html 复制代码
<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)>

利用 canvas + 一段算法。

牛逼!当然作者也在文章里揭秘了原理,感兴趣的可以深入研究一下。

😛趣图


篇幅有限,如果你还没看够,可移步后面的推荐渠道,继续游览,历史周刊(<20)移步博客

⭐️强力推荐关注

相关推荐
慧一居士4 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead6 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app