nextjs中使用tailwindcss添加自定义字体
nextjs中使用tailwindcss添加自定义字体写在前面指路官方文档
项目框架
next.js
tailwindcss
app router
步骤
在public目录中添加字体文件（我的是个.TTF文件）
在global.css文件中添加字体
12345/* 自定义字体，注意这里url()中路径已然是public目录下 */@font-face { font-family: "lcd-font"; src: url("/DS-DIGIB.TTF") format("truetype");}
在tailwind.config.js中配置字体
123456789101112131415module.exports = { theme: { extend: { fontFamily: { 'sans-serif': 'Helvetica, Arial, sans-serif', ...
JS验证URL的新方法
MDN URL.carParse()
文章摘自
瀑布流布局Demo
写在前面早上我查了很多瀑布流实现的方法，展示逻辑都不是很喜欢。
纸鹤给我看了一个使用了瀑布流布局的网页，网页利用transform对每个条目进行定位……恍然大悟。
中午做饭的时候看了B站一up主的瀑布流实现视频(麦克阿瑟还是有点实力的)，大概知道怎样实现了。
瀑布流布局雏形思路用一个定长数组存放第n列某行条目的top值，每次便利找最小top值所在元素，添加一条新条目，并更新top值。等我去画个图。
不完整的代码(仅提供一种思路)使用react实现，和原生JS有些差别（是哟个原生JS实现可以直接看上面那个视频）
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106export defualt testPage() { ...
无限列表Demo
无限列表Demo写在前面工组中遇到的，想手搓一个，慢慢优化吧。
React实现，在这里仅分享逻辑。
简单的一个实现方法实现中：如何抽成一个组件呢？实现中：结合图片瀑布流
为什么要问我如何用CSS实现三角形啊
为什么要问我如何用CSS实现三角形啊？
在前端面试中，被问及如何使用CSS实现一个三角形的问题可能有几个不同的目的和价值：
基本CSS知识测试：这个问题可以用来测试面试者对基本的CSS属性和技巧是否熟悉。实现一个三角形通常涉及使用CSS的一些常见属性，例如width、height、border、border-color和transparent等。如果面试者能够正确回答这个问题，表明他们掌握了基本的CSS技能。
问题解决能力：这个问题也可以用来测试面试者的问题解决能力。即使他们之前没有直接实现过三角形，但如果他们能够通过分析和试验找到解决方法，这显示了他们的思维方式和解决问题的能力。
CSS的 kung fu 水平：实现一个三角形可以有多种方法，包括使用border、transform、伪元素（::before或::after）等。通过问这个问题两次，面试官可能想要了解面试者在CSS方面的深度和广度。如果第一次问的方法是使用border，而第二次问的是使用伪元素，那么面试者需要展示他们对多种CSS技巧的了解。
检验经验：在前端开发中，有时需要实现各种各样的形状和效果。问关于实现三 ...
Next.js中间件的使用探索
Next.js中间件的使用探索至于为啥探索，因为牵扯到一些新的东西，广泛搜索查不到对胃口的，只能自行探索记录。
中间件是啥？
Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。
创建文件创建middleware.js文件
1234567891011121314import { NextResponse } from "next/server";// 尝试写一下中间件，中间件主要作用是：在请求完成之前修改对请求的响 ...
啃犀牛书——类
三种实例化对象的方式两种形式定义类工厂函数123456789101112131415161718192021222324function range(from, to) { let r = Object.create(range.methods) // 挂上方法 r.from = from // 公有属性 r.to = to return r // 返回创建好的对象}range.methods = { includes(x) { // 一个判断范围的方法 return x >= this.from && x <= this.to }, *[Symbol.iterator]() { // 一个设置可迭代的生成器方法 for (let i = Math.ceil(this.from); i <= this.to; i ++) { yield i } }, ...
蒜法-二叉树DFS
979. 在二叉树中分配硬币邪门二叉树+DFS，根本设计不出来，图解那么巧妙，我直接大口啃菜。
题目要求大致：
给你一个二叉树，每个节点有随机数量个硬币，要求通过父子传递一次一硬币的方式使二叉树内节点上的硬币数量全部分成1。
先放代码：
123456789101112131415161718192021222324252627282930313233343536/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 : val) * this.left = (left===undefined ? null : left) * this.right = (right===undefined ? null : right) * } *//** * @param {TreeNode} root * @return {number} */v ...
蒜法-数字各种和
先开个头，今天和前天的题涉及到了数的加和处理。
打算再整一个数字加和系列算法题汇总，前提是我的股票算法之旅能够善终（第四个卡壳了）
蒜法-买卖股票
买卖股票最近做了一个动规算法题（1911），发现有一个买卖股票系列很值得循序渐进地上手动规，于是做了做 汇总了一下。
LeeCode教你学炒股：
1.买卖股票的最佳时机
2.买卖股票的最佳时机 II
3.买卖股票的最佳时机 III
4.买卖股票的最佳时机 IV
5.买卖股票的最佳时机含手续费
6.最佳买卖股票时机含冷冻期
最后做一下1911，会发现简单好多
121. 买卖股票的最佳时机只有一次购入和一次出售，找到一个最大利润方案。
12345678910111213/** * @param {number[]} prices * @return {number} */var maxProfit = function(prices) { let now = -prices[0], // 假设如果第一天买入，手里还有这么多钱（负成本） max = 0 // 假设第一天买了接着卖出，利润为0（利润初始值） for (let i = 0, len = prices.length; i < len; i+ ...