- 博客(69)
- 收藏
- 关注
RSS订阅原创 听说你还不会 Tailwind CSS（响应式篇）
1. 前言基础篇：- 听说你还不会 Tailwind CSS(基础·上篇)- 听说你还不会 Tailwind CSS(基础·中篇)- 听说你还不会 Tailwind CSS(基础·下篇)进阶篇：- 听说你还不会 Tailwind CSS(进阶·上篇)- 听说你还不会 Tailwind CSS(进阶·下篇)本篇将会介绍 Tailwind CSS 的响应式开发，如何用一套代码实现...
2024-07-08 20:00:26
311
原创 不要再说搞不清 React 架构了（下）
1. 前言那么双缓存 Fiber 树是如何构建的？在处理好优先级和标记后，就会进入到 render 阶段，此时仍在 Reconciler 中。取决于本次更新为同步还是异步，React 会调用 performSyncWorkOnRoot 或 performConcurrentWorkOnRoot，前者为同步更新，后者为异步更新：```tsx// performSyncWorkOnRoo...
2024-06-16 21:42:37
232
原创 不要再说搞不清 React 架构了（上）
1. 前言最近在温习卡颂老师的《React技术揭秘》，简单地把理念篇和架构篇过了一下，现在梳理成一篇文章分享出来。2. 快速响应的制约React 用于构建前端 UI，影响它快速响应的因素主要体现于两个方面：CPU 瓶颈：组件多，JS 操作多，渲染掉帧IO 瓶颈：需要等待网络请求GUI 渲染线程和 JS 线程互斥，JS 运行和浏览器的布局、绘制无法同时进行。浏览器一般 16...
2024-06-14 21:46:09
345
原创 听说你还不会 Tailwind CSS（进阶·下篇）
1. 前言基础篇：听说你还不会 Tailwind CSS(基础·上篇)听说你还不会 Tailwind CSS(基础·中篇)听说你还不会 Tailwind CSS(基础·下篇)进阶篇：- 听说你还不会 Tailwind CSS(进阶·上篇)经过初始化后，在根目录下有一个 tailwind.config.ts 文件：```tsimport type { Config }...
2024-05-22 20:34:04
368
原创 听说你还不会 Tailwind CSS（进阶·上篇）
1. 前言这个系列的基础篇已经完结。听说你还不会 Tailwind CSS(基础·上篇)听说你还不会 Tailwind CSS(基础·中篇)听说你还不会 Tailwind CSS(基础·下篇)现在来更新进阶部分：上篇：如何复用样式下篇：Tailwind 的配置项这是上篇，主要解决样式复用问题。2. 什么是可以复用的？在开始之前，首先要明确一个问题：什么可以...
2024-05-06 21:31:15
448
原创 听说你还不会 Tailwind CSS（基础·下篇）
1. 前言这是基础篇的最后一篇，本篇结束后，将进入到进阶部分。听说你还不会 Tailwind CSS(基础·上篇)听说你还不会 Tailwind CSS(基础·中篇)听说你还不会 Tailwind CSS(基础·下篇)听说你还不会 Tailwind CSS(进阶·上篇)2. 形变通过 transform 设置，元素可以进行平移、旋转、缩放、倾斜。2.1 平移通过 ...
2024-05-04 21:31:11
383
原创 听说你还不会 Tailwind CSS（基础·中篇）
1. 前言上篇介绍了宽高、边距、边框、文本、颜色等常用基础属性，本篇继续基础内容，包括伪类、伪元素、flex 和 grid 布局、定位。听说你还不会 Tailwind CSS(基础·上篇)听说你还不会 Tailwind CSS(基础·中篇)听说你还不会 Tailwind CSS(基础·下篇)听说你还不会 Tailwind CSS(进阶·上篇)2. 伪类伪类是选择器的一种，...
2024-05-02 22:32:00
572
原创 听说你还不会 Tailwind CSS（基础·上篇）
1. 前言在使用 Vue 开发时，最常用的 UI 库就是 ElementUI 或 Ant Design Vue 了。 而在开发 React 时，特别是使用 Next.js 时，就不得不考虑 Tailwind CSS 这种方案了。使用 Tailwind CSS 就像在使用 Bootstrap，写出对应类名就能快速创建样式。如果你对CSS很有感觉，那么掌握 Tailwind CSS 只要 1 ...
2024-04-30 21:01:59
371
原创 Next.js 14 App Router 海底捞针我帮你做了！（下）
theme: condensed-night-purple1. 前言此为《Next.js 14 App Router 海底捞针我帮你做了！》的下篇，主要讲解在 Next.js 中的网络数据请求，对路由有疑惑的可看上篇。2. 路由中间件在传统的后端框架(Express.js、Koa.js)中，我们可以使用中间件对进入站点的请求进行一些处理，比如身份认证、重定向、日志分析等业务逻辑...
2024-04-26 21:40:13
297
原创 Next.js 14 App Router 海底捞针我帮你做了！（上）
theme: condensed-night-purple1. 前言Next.js 14 提供了新的 App Router 作为默认的路由方案，文件夹的嵌套结构决定了路由的渲染或请求的返回处理。太棒了这逻辑清晰，再也不必手动配置 router 了，开发一路畅通了，家人们。这简直就是危言耸听！那文档翻起来无异于海底捞针。本文分为上下两篇，上篇主要以路由为核心，下篇补充网络请求...
2024-04-22 20:31:09
337
原创 了解了这些你就掌握了 React（下）
theme: condensed-night-purple1. 前言本文将以 React 和 Vue3 进行同步对比，带大家快速掌握 React。这个系列分为上下两篇，上篇内容包括：组件JSX插值数据通信渲染事件状态下篇包括：元素引用跨级传值PortalsSuspenseError BoundariesHooks2. 元素引用想要引用H...
2024-04-20 20:31:20
266
原创 Next.js 14 踩坑：处理API中的JWT登录认证问题
theme: condensed-night-purple前言在使用 Next.js14 开发登录登出功能时遇到一个问题：可以设置 cookie，但无法清除 cookie。在开发这个功能时，借助了 Route Handler 的特性，关于 cookie 的处理，官网提到了 next/headers 的 cookies API；同样可以通过 Request、Response 和 Ne...
2024-04-18 20:11:49
444
原创 了解了这些你就掌握了 React（上）
theme: condensed-night-purple1. 前言本文将以 React 和 Vue3 进行同步对比，带大家快速掌握 React。这个系列分为上下两篇，上篇内容包括：组件JSX插值数据通信渲染事件状态下篇包括：元素引用跨级传值PortalsSuspenseError BoundariesHooks2. 组件第一次遇见“组...
2024-04-16 20:31:10
891
原创 Rails 7 开发总结（下）
theme: condensed-night-purple1. 在 Controller 中操作数据数据库中的每一行都是一个 ActiveRecord 对象，通过对象自带的方法进行 CRUD。每一列是当前对象的属性。1.1 新增```rubyuser = User.new # 新建user.email = '1@x.com'user.password = 'x'u...
2024-04-08 21:09:08
799
原创 Rails 7 开发总结（上）
theme: condensed-night-purple1. MVCRails 采用 MVC 架构 MVC 部分引用于：https://ihower.tw/rails/basic.html#手工打造-crud-應用程式 瀏覽器發出HTTP request請求給Rails 路由(Routing)根據規則決定派往哪一個Controller的Acti...
2024-04-07 22:05:27
820
原创 Docker 常用命令一览表
theme: condensed-night-purple在笔者的《前端工程师也应该了解的docker》一文中记录了使用 docker 部署项目的具体流程，本文做进一步精简，用于记录 docker 常用命令，方便以后开发时及时查询，减少检索信息的压力。容器管理docker ps 查看当前运行的容器docker ps -a 查看现存所有的容器docker start/stop...
2024-03-22 20:10:55
274
原创 Golang语法一览（上）
安装 Go 的方法可以自行查阅相关资料，通过命令 go version 查看 go 版本。如果使用的是 VS Code，推荐安装插件：Go然后设置goMod状态：go env -w GO111MODULE=ongo env -w GOPROXY=https://goproxy.cn,direct如果不设置，将无法正常安装插件，插件很好用，可看函数定义、可格式化代码。零...
2024-03-01 19:59:05
278
原创 一起开源：解决淘宝镜像证书过期问题——https://registry.npm.taobao.org...certificate has expired...
theme: smartblue最近，远方的朋友毕业了发现找工作很难，于是我建议她直接参与开源项目的贡献，我拿出了自己尘封已久的组件库项目给她，麻雀虽小五脏俱全，还有很多组件可以补充，进一步讲工程化上也有很多可以优化升级的地方，这样走出去也可以说参加过开源项目了。与此同时，我也把项目拉到本地看看还能不能运行，果然不能。遇到的第一个问题是npm版本高了，于是我用nvm切换成18，...
2024-02-23 19:57:13
360
原创 你不知道的 JS 单线程
前言本来是完全不想写这篇文章的，奈何 JS 单线程、异步、事件循环经常被拿来面试，而这些其实是个连环、整体。好了言归正传，大家都知道 JS 是一门单线程的语言，类似的语言还有 Python、Ruby 都属于单线程，不过它们各自都有多线程的库来实现多线程编程。JS 的单线程意味着在同一个 JS 引擎上一次只能做一件事，就像这样：tsconsole.time();console.l...
2023-09-11 21:04:30
120
原创 前端工程师也应该了解的 docker compose
theme: condensed-night-purplehighlight: atom-one-dark海面上，一艘满载集装箱的货轮正在驶离港口……1. 前言一个月前，我写了一篇《前端工程师也应该了解的docker》，之后就不断有小伙伴千呼万唤！这次我们的目标是部署一个全栈项目，而这一篇涉及的内容有：docker-compose.yml 容器编排配置文件...
2023-08-04 19:51:13
137
原创 什么？！前端工程师还不会 Docker？
1. 前言曾几何时想到部署那不是运维的工作吗？但最近在尝试部署自己的应用，docker 这一环终究是逃不过。这个技术对于前端来说，还是稍微有一点陌生。但如果你曾经也和我一样把台式电脑当作自己的游戏机，用光盘安装过单机游戏，然后打开游戏玩到“昏天黑地”，那么看完这一篇文章，你一定会使用 docker。2. 什么是 docker？在说 docker 之前，我们需要了解虚拟机。虚拟机...
2023-06-29 20:05:50
237
原创 Ruby on Rails 快速入门
theme: condensed-night-purpleruby china wiki：https://ruby-china.org/wikiThe Rails Doctrine: https://ruby-china.org/wiki/the-rails-doctrineGuides:https://guides.rubyonrails.org/https://ru...
2023-06-11 21:28:23
1470
原创 记录一次 bin/rails db:migrate 报错
theme: condensed-night-purplebin/rails db:migrate最近在倒腾后端，用的是 Ruby on Rails，数据库是 Postgres，在执行数据库迁移命令(bin/rails db:migrate)时，模型更新出错了 :(bin/rails db:migrate:status提示说，已经存在了 users，于是我试着查看一下迁...
2023-06-08 08:58:33
398
原创 浅谈 ChatGPT —— 现代巴别塔
theme: nico一、用 ChatGPT 一搜就到你这了ChatGPT 在去年 11 月发布以后，上线 5 天后就有了 100 万用户，上线两个月后已有上亿用户，可谓一炮而红。起初我对 ChatGPT 是没有什么感知的，我单纯认为人工智能还没有发展到完全超越人类的地步，但是到了今天我突然想起一件事。几年前我刚毕业在苏州工作，租到了在西交利物浦大学的一个床位，有一次和计算机系...
2023-05-30 08:33:17
1040
原创 TypeScript 系列（一）：TS 核心概念
1 前言昨天在掘金上看到了一篇 TypeScript5，是的，TS 都更新到 5 了，我还没开始正式使用。为了赶上时代的潮流，我尝试在自己写的小项目中使用了 TS，然而，直接裂开……于是就有了这个系列，我准备攻克这门技术，并把所思所想记录下来。我打开了 TS 英文文档，等一下，如果你要问我，为什么打开英文文档，我想说我也很懒想看中文文档，可是中文文档有两点弊端：中文更新不及时存...
2023-03-08 01:23:14
352
1
原创 团队协作（一）—— 你不知道的 ESLint + Prettier
theme: condensed-night-purple参考：https://eslint.org/https://prettier.io/https://prettier.io/docs/en/related-projects.htmlhttps://segmentfault.com/a/1190000020835739https://www.robinwieruch.d...
2022-08-30 23:19:12
269
原创 Vue 项目 API 接口封装
Vue 项目 API 接口封装参考：https://axios-http.com/https://cli.vuejs.org/zh/guide/mode-and-env.htmlhttps://codeantenna.com/a/B9ng1xY7vQhttps://stackoverflow.com/questions/43013858/how-to-post-a-file-fro...
2022-08-12 23:22:49
164
原创 nvm-windows —— 克服node版本管理难题
参考：https://github.com/sass/node-sass/releaseshttps://github.com/nvm-sh/nvmhttps://github.com/coreybutler/nvm-windows/releases一、前言一般来说，每个公司里总会存在一些中古的项目需要维护。这不，我就遇到了。为什么要单独开贴说呢？因为当你运行 npm i ...
2022-07-24 16:59:21
41
原创 浅尝浏览器桌面通知 Notification
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/notificationhttps://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification一、前言最近业务开发中，有一个需求，需要弹出桌面通知弹窗。这是我从没做过的，所以开贴与大家分享一下，另...
2022-07-23 10:12:53
140
原创 Git 命令使用（基础篇）
theme: jzmanhighlight: atelier-cave-light0. 前言熟悉 Git 的常用命令，以下将以 Visual Studio Code 作为编辑器、Gitee 作为远程仓库介绍相关使用。 Git 的意义在于控制多版本的代码以及更好的团队协作。Reading && More References：Git 官方教程：ht...
2022-04-10 21:30:42
73
原创 实现一个简单的 node 应用之 todo list
theme: jzmanhighlight: atelier-cave-light前言学习目标：实现一个简单的 node 应用：todo list。功能主要有：添加新任务清空任务列表展示所有任务操作任务修改任务标题修改任务状态删除单个任务一、环境安装nodenpm二、项目初始化新建文件夹 mkdir node-todo-1进入文...
2021-12-19 11:49:06
70
原创 JS 中数组的交集、并集、补集问题
一、背景如图所示，list 里面有 9 个元素，用户选择的被放进了 selectedList，现在要求出剩余的元素组成的数组 result。实际就是求 selectedList 在 list 中的补集。```jsconst list = [1,2,3,4,5,6,7,8,9];const selectedList = [1,5,9];function complement (a...
2021-12-18 21:53:43
195
原创 为什么元素的 scrollTop 一直为 0？
最近在开发时，遇到一个理论与实践不相符的问题：明明 div 可以滚动，偏偏获取不到它的 scrollTop。功能：1. “返回顶部”按钮默认隐藏；2. 当页面往下滚动到 200px 以后时，“返回顶部”按钮出现。3. 当点击“返回顶部”按钮时，页面滚动到顶部。草图：思路：1. 一开始让“返回顶部”按钮隐藏，监听 div 滚动事件，到达指定高度后，让按钮出现。2. “返...
2021-12-09 22:38:49
421
原创 （译）看得见的 JavaScript: 作用域（链）Scope (Chain)
theme: arknightsvar code = "8aecffca-8909-4927-a3e0-49a8d64e4bd6"让我们看一下以下这段代码：```javascriptconst name = "Lydia"const age = 21const city = "San Francisco"function getPersonInfo() { cons...
2021-12-01 22:11:37
49
原创 （译）看得见的 JavaScript：声明提升（Hoisting）
theme: arknights变量提升(Hoisting)是每一个 JS 开发人员都听说过的术语之一。当你在 Google 上搜索了烦人的错误并最终出现在 StackOverflow 上，那里的人告诉你此错误是由于提升引起的。所以，什么是提升？如果你是一个新手，你可能会遇到“怪异”的行为，其中某些变量是 undefined，或是引发了 ReferenceErrors，等等。提升通常的...
2021-11-29 20:44:15
45
原创 Webpack5 系列（九）：TS 打包配置
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到库的打包，本篇将介绍 TypeScript 的打包配置。二、TSTypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts，就需要安装特定的 loader 来“翻译” ts 语法。2...
2021-11-09 19:36:13
101
原创 Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
记录配置 Webpack 时遇到的一个百思不得其解的报错：Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError在看到这个问题以后，我第一时间去 reset.css 中查看语法是否有误；结果是没有任何错误。在确定 css 文件无误以后，我把配置规则中的 css-loader 配置移除，...
2021-11-06 16:57:21
1564
原创 Webpack5 系列（八）：库的打包
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到代码分离，本篇将介绍库的打包。Webpack 除了能够打包项目应用以外，还可以用来打包 JS 库。当其他人安装了我们的库时，他们可能会在不同的环境中去引入，例如：```jsximport lib from 'lib'; // ESMconst lib = requi...
2021-09-28 07:29:26
62
原创 Webpack5 系列（七）：代码分离
theme: jzmanhighlight: atelier-cave-light一、前言上一篇讲到不同模式下的打包配置，本篇将介绍代码分离(Code Splitting)。jsx// index.jsimport _ from 'lodash';let element = document.createElement('div');element.innerHTML ...
2021-09-11 20:25:45
54
原创 Webpack 中的 module、chunk、bundle 究竟是什么？
theme: jzmanhighlight: atelier-cave-light如题，在研究 Webpack 时，这个问题也曾经困扰了我很久。到目前为止，在我看来，这些术语可以这样理解：module：不同文件类型的模块。Webpack 就是用来对模块进行打包的工具，这些模块各种各样，比如：js 模块、css 模块、sass 模块、vue 模块等等不同文件类型的模块。这些文件...
2021-09-11 12:09:06
188
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人