从@Angular/Flex-Layout迁移到Tailwindcss

1. 前言

根据flex-layout官方宣告, @angular/flex-layout当前(2023-06-25)处于deprecated状态. 替代方案为Tailwind或者Angular CDK.

具体原因参考官方的anoucement - Medium post
github上的讨论

建议新项目使用其他css library, 旧项目考虑移植到其他css library.

以下是我从flex-layout的一些实践.

阅读更多

npm debug指南

1. 前言

本指南将帮助您开始调试Node.js应用程序和npm run-script脚本。

阅读更多

记一次npm run问题排查的详细过程

1. 前言

今天遇到一个特别难整的问题, 在执行npm run a_task 出错, 报错信息特别简单, 对于查找问题没有任何帮助. 尝试过几种方法来定位问题, 收效很差, 最后不得不祭出npm的大杀器npm debug来一探究竟.

阅读更多

使用mat-paginator在Angular mat表中进行服务器端分页

1. 前言

在上一篇文章中,我们学习了如何使用 Angular 添加客户端分页。mat-tablemat-paginator

在客户端分页中,我们将从服务器一次获取所有记录并使用 mat-paginator 组件应用分页。

但是,如果我们的数据量很大,即记录数量较多,那么应用客户端分页并不是一个好主意。

这可能会导致严重的性能影响。

在这种情况下,我们将在 Angular mat-table 中实现服务器端分页。

阅读更多

Centos7 上安装 wordpress

1. 前言

当前环境说明:

OS: Centos 7.9

2. 安装要求

安装 WordPress 之前,服务器要求具备两个基本元素:

阅读更多

CodeWhisperer使用详解

1. 说明

AWS的CodeWhisperer是Amazon于2021年12月推出的一款代码补全工具, 与GitHub Copilot类似。与Copilot不同的是CodeWhisperer对于个人用户免费, 也是其优势所在. CodeWhisperer是一款基于机器学习的通用代码生成器,由Amazon出品,可以给我们提供代码建议, 可以帮助程序员更快、更安全地编写代码的工具,可以在他们的开发环境中实时提供代码建议和推荐。

阅读更多

SEO教程

1. 前言

本文详细讲解了如何为网站执行 SEO, 文章中的部分内容及方法有些过时了, 但是涉及理念依然有效, 而且内容比较全面, 希望对正你的 SEO 工作有帮助.

阅读更多

Angular service worker介绍

1. 前言

Service Worker 增强了传统的 Web 部署模型,并使应用程序能够提供与 Native application 相当的可靠性,性能和用户体验。将服务工作进程添加到 Angular 应用程序是将应用程序转换为渐进式 Web 应用程序(也称为 PWA)的步骤之一。

简单来说,Service worker 是在 Web 浏览器中运行并管理应用程序缓存的脚本。

Service worker 充当网络代理。它们拦截应用程序发出的所有 HTTP 请求,并可以选择如何响应这些请求。例如,他们可以查询本地缓存并提供缓存的响应(如果有)。代理不仅限于通过编程 API 发出的请求,例如 fetch;它还包括 HTML 中引用的资源,甚至是对 index.html 的初始请求。因此,基于 Service worker 的缓存是完全可编程的,不依赖于服务器指定的缓存标头。

与组成应用程序的其他脚本(如 Angular application bundle)不同,服务工作进程在用户关闭选项卡后仍然保留。下次浏览器加载应用程序时,Service worker 首先加载,并且可以截获每个资源请求以加载应用程序。如果服务工作进程被设计为这样做,它可以完全满足应用程序的加载,而无需网络。

即使在快速可靠的网络中,往返延迟也会在加载应用程序时引入明显的延迟。使用服务工作进程来减少对网络的依赖可以显著改善用户体验。

阅读更多

Service worker和PWA

1. 前言

本文向你介绍什么是 PWA, 以及如何在 Angular 项目中启用 PWA。然后使用一个示例向您展示一个正在运行的 service worker,演示如何加载和如何在客户端缓存数据。

阅读更多

申请免费SSL证书

1. 前言

SSL证书(SSL Certificates)可以说是现在一个网站的标配,如果没有用SSL证书,浏览器上会显示不安全,导致一部分用户以为网站有问题。另外在微信小程序和iOS APP上,提供的API必须要用HTTS协议,否则不允许上架,所以掌握好SSL证书的配置是一个后端开发必备的技能。

在阿里云上,提供了每年可以申请一次的免费SSL证书,对于一些个人站点或者小公司的网站来说,确实是一个不错的选择。

阅读更多

nginx配置https

1. 介绍

HTTPS 协议(HyperText Transfer Protocol over Secure Socket Layer):可以理解为HTTP+SSL/TLS, 即 HTTP 下加入 SSL 层,HTTPS 的安全基础是 SSL,因此加密的详细内容就需要 SSL,用于安全的 HTTP 数据传输。HTTPS 相比 HTTP 多了一层 SSL/TLS.

SSL(Secure Socket Layer,安全套接字层):1994年为 Netscape 所研发,SSL 协议位于 TCP/IP 协议与各种应用层协议之间,为数据通讯提供安全支持。

TLS(Transport Layer Security,传输层安全):其前身是 SSL,它最初的几个版本(SSL 1.0、SSL 2.0、SSL 3.0)由网景公司开发,1999年从 3.1 开始被 IETF 标准化并改名,发展至今已经有 TLS 1.0、TLS 1.1、TLS 1.2 三个版本。SSL3.0和TLS1.0由于存在安全漏洞,已经很少被使用到。TLS 1.3 改动会比较大,目前还在草案阶段,目前使用最广泛的是TLS 1.1、TLS 1.2。

阅读更多

使用Terraform在ESXI上创建虚拟机

1. 前言

ESXi 是一种用于创建和管理虚拟机(VM)的系统管理程序。然而,手动创建和管理多个虚拟机可能非常耗时且容易出错。Terraform 是一个开源 IaC 工具,可以在 ESXi 中自动创建和管理虚拟机。在本教程中,我们将学习如何使用 Terraform 在 ESXi 中创建多个虚拟机。

阅读更多

Ubuntu服务器安装图形化界面

1. 前言

最近在阿里云上创建云主机, 主要是需要使用浏览某些网站, 说实在的我只需要浏览器就够用了, 但是无奈阿里云提供了桌面的镜像只有Windows的几个版本.
而使用windows得镜像要比Linux得镜像贵好几倍, 一来是服务器硬件资源要求较Linux高, 而来Windows镜像都是需要License费用或者额外购买License的.
于是考虑在创建Linux云主机后, 安装一个Linux桌面系统, 果然让我实验成功了, 特写此文, 以防遗忘, 另外给后来人以方便.

阅读更多

使用Angular Universal时的重要注意事项

1. 介绍

尽管 Angular Universal 项目的目标是能够在服务器上无缝渲染 Angular 应用程序,但您应该考虑一些不一致之处。首先,服务器和浏览器环境之间存在明显的差异。在服务器上渲染时,应用程序处于短暂或“快照”状态。应用程序被完全渲染一次,返回完整的 HTML,而整个过程中的产生的状态被销毁,直到下一次渲染开始, 再重新计算这些状态。接下来,服务器环境本质上不具有与浏览器相同的功能(也有可能服务器拥有而浏览器没有的功能)。例如,服务器没有任何 cookie 的概念。您可以将此功能和其他功能 polyfill,但没有完美的解决方案来弥合这种差异。在后面的部分中,我们将介绍潜在的缓解措施,以减少在服务器上渲染时的错误机会。
还请注意 SSR 的目标:提高应用程序的初始渲染时间。这意味着,应该避免或充分防范任何可能在初始渲染中降低应用程序速度的情况。同样,我们将在后面的部分中回顾如何实现这一点。

阅读更多