发布于

是否将字体、图片等二进制文件放入Git仓库进行版本管理？

在项目开发中，是否将字体文件、图片文件等二进制文件放入 Git 仓库进行版本管理，主要取决于项目的需求和团队的工作流程。以下是一些常见的考虑因素：

1. 版本管理

文本文件（如 HTML、CSS、JavaScript 文件）通常是较小的文件，并且可以清晰地显示差异（diff）。这些文件在 Git 中的管理非常有效，特别是当多人协作时，Git 可以轻松地比较文件的不同版本、合并更改。

二进制文件（如字体文件、图片、音频、视频等）由于它们的特殊格式，Git 无法像文本文件一样处理它们的差异（diff）。Git 只能在二进制级别进行版本管理，这意味着它无法显示更改的细节，只能存储文件的完整副本。

2. 考虑因素

  • 文件大小：二进制文件（特别是图片和字体文件）的文件大小通常比较大。如果将这些文件直接放入 Git 仓库，会导致仓库的体积迅速增加，尤其是如果你有很多版本的图片或字体文件时，Git 会保存每个版本的完整文件副本，这会显著增加仓库的大小。
  • 是否频繁的修改：如果二进制文件经常修改，例如图片或字体的替换，那么它们的版本管理可能变得非常低效，因为 Git 无法存储“差异”而是存储整个文件。如果有大量的二进制文件频繁修改，Git 仓库会迅速膨胀。
  • 性能问题：随着仓库中二进制文件的增加，Git 的性能可能会受到影响，尤其是在进行 git clone、git pull 和其他操作时，文件大小的增长会增加操作的时间和存储需求。

3. 最佳实践

方法一，使用 Git LFS（Git Large File Storage）

如果必须在 Git 仓库中管理二进制文件（如图片、字体等），可以使用 Git LFS。Git LFS 允许你将大文件（例如图片、音频、视频等）存储在专门的存储服务器上，并在 Git 仓库中仅存储指向这些文件的引用。这样可以避免仓库体积过大，提高 Git 操作的性能。

示例：

git lfs install
git lfs track "*.jpg"
git lfs track "*.png"
git lfs track "*.woff"

方法二，将大文件存储在外部服务器或 CDN

对于大图片和字体文件，可以将它们存储在外部服务器、内容分发网络（CDN）或专门的文件存储服务（如 Amazon S3）中，而不是直接存储在 Git 仓库中。然后在前端项目中通过 URL 引用它们。这样，Git 仓库只需管理轻量级的文件（如配置文件或链接文件），而不需要直接存储这些大的二进制文件。

方法三，避免频繁更新二进制文件

如果你的团队在开发过程中不需要频繁更改字体和图片文件，或者这些文件的更改非常有限，放入 Git 仓库中进行版本管理是可以的。但如果这些文件经常被修改，考虑使用 Git LFS 或其他外部存储方案。

4. 总结

  • 可以放入 Git 仓库的情况：如果二进制文件的变化较少，且文件较小，放入 Git 仓库中进行版本管理是可以的，特别是对于项目中使用的字体文件和小图标等。
  • 应避免直接放入 Git 仓库的情况：如果二进制文件较大或频繁修改，最好使用 Git LFS 或将文件存储在外部存储服务中，以避免 Git 仓库的体积迅速膨胀和性能问题。

发布于

设置Git使用UTF-8编码

运行git status命令，输出如下信息：

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        "m/\345\210\244\346\226\255\347\224\250\346\210\267\345\256\242\346\210\267\347\253\257\346\265\217\350\247\210\345\231\250\350\256\276\345\244\207\347\232\204\347\261\273\345\236\213/"
        "m/\350\247\206\345\217\243/"

说明git不能正常显示中文目录的名字，这个问题通常是由于Git的输出字符编码与终端的编码不匹配导致的。为了解决Git在输出中文目录名称时无法正确显示的问题，你可以通过以下几步进行配置：

1. 设置Git使用UTF-8编码

确保Git提交时使用UTF-8编码：

git config --global i18n.commitencoding utf-8

确保Git输出日志时使用UTF-8编码：

git config --global i18n.logoutputencoding utf-8

关闭路径的引用（即不使用\转义路径中的特殊字符），使路径直接显示：

git config --global core.quotepath off

2. 配置终端编码使用UTF-8编码

如果你使用的是Linux或macOS系统，确保终端的编码设置为UTF-8。你可以检查终端的当前编码，运行以下命令：

echo $LANG

如果输出不是UTF-8，你可以设置终端使用UTF-8编码。修改你的终端配置文件（例如.bashrc或.zshrc），加入以下内容：

export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

然后重新加载配置文件：

source ~/.bashrc  # 或者 source ~/.zshrc

3. 确保文件系统支持中文字符

确认你所在的文件系统支持中文字符。大多数现代文件系统（如ext4）都支持UTF-8编码，如果你在不同的文件系统上工作，确保它支持中文路径。

4. 重新运行git status

在配置完成之后，重新运行git status，应该能够正确显示中文目录和文件名。

发布于

设备像素比（device pixel ratio, DPR）、设备的逻辑宽度和物理宽度、CSS像素（逻辑像素）和物理像素

设置了width=device-width后，iPhone 7 Plus的浏览器执行alert(document.body.clientWidth);显示的值是398，但是iPhone 7 Plus屏幕的分辨率是1920 x 1080像素分辨率，为什么不是显示1920呢？

当你在 iPhone 7 Plus 上使用 width=device-width 并执行 alert(document.body.clientWidth) 显示值为 398 时，这个值并不是显示的设备屏幕分辨率（1920 x 1080 像素），而是与设备的物理像素密度和设备像素比（device pixel ratio）相关的值。

设备像素比（device pixel ratio, DPR）

iPhone 7 Plus的屏幕分辨率为1920 x 1080像素，但它的设备像素比（DPR）为3。这意味着每个CSS像素（即网页设计时的逻辑像素）实际上由3个物理像素组成。例如，屏幕上实际的1 CSS像素会占用3 x 3 = 9物理像素。

width=device-width的作用

当你设置width=device-width时，浏览器会将视口的宽度设为设备的逻辑宽度，而不是真正的物理屏幕分辨率。

对于iPhone 7 Plus，视口宽度通常会设置为375px（iPhone 7 Plus设备的逻辑宽度）。这意味着你看到的document.body.clientWidth是375px，而不是1920px。

为什么会显示为398px？可能是因为浏览器在处理视口的宽度时考虑到了页面的边距、缩放因子或者其它因素。此外，浏览器还可能通过屏幕的设备像素比来进行相应的调整，从而显示为398px，而不是375px。这个值也可能受浏览器界面、工具栏或状态栏的影响。

发布于

判断用户客户端浏览器设备的类型

方法一，在客户端浏览器中使用js代码判断

借助navigator对象：

  • navigator.userAgent浏览器信息
  • navigator.appName浏览器版本名称
  • navigator.appVersion浏览器版本号
  • navigator.language浏览器语言
  • navigator.platform浏览器平台

示例代码如下：

<script type="text/javascript">
console.log('浏览器信息：');
console.log(navigator.userAgent);
console.log('浏览器版本名称：');
console.log(navigator.appName);
console.log('浏览器版本号：');
console.log(navigator.appVersion);
console.log('浏览器语言：');
console.log(navigator.language);
console.log('浏览器平台：');
console.log(navigator.platform);

// 从navigator.userAgent即可判断用户客户端浏览器设备的类型
// test()方法用于检测一个字符串中是否匹配某个正则模式，以下代码的功能是当用户客户端设备的类型匹配Android或webOS或iPhone或iPod或BlackBerry时，就跳转到移动端m站，否则跳转到PC端网站
window.location.href=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)?"phone.html":"pc.html";
</script>

方法二，在服务器端使用nginx判断

根据用户设备不同返回不同样式的站点，以前经常使用的是纯前端的自适应布局，但无论是复杂性和易用性上面还是不如分开编写的好，比如我们常见的淘宝、京东……这些大型网站就都没有采用自适应，而是用分开制作的方式，根据用户请求的 user-agent 来判断是返回 PC站点还是移动端站点。

首先在 /usr/share/nginx/html 文件夹下 mkdir 分别新建两个文件夹 PC 和 mobile，vim 编辑两个 index.html 随便写点内容。

cd /usr/share/nginx/html
mkdir pc mobile
cd pc
vim index.html   # 随便写点比如 hello pc!
cd ../mobile
vim index.html   # 随便写点比如 hello mobile!

然后和设置二级域名虚拟主机时候一样，去 /etc/nginx/conf.d 文件夹下新建一个配置文件 fe.sherlocked93.club.conf：

# /etc/nginx/conf.d/fe.sherlocked93.club.conf

server {
  listen 80;
server_name fe.sherlocked93.club;

location / {
root  /usr/share/nginx/html/pc;
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
      root /usr/share/nginx/html/mobile;
    }
index index.html;
}
}

使用 $http_user_agent 全局变量来判断用户请求数据中的的user-agent，指向不同的root路径，返回对应站点。

参考

《你不知道的Nginx（万字详解）》

方法三，在服务器端使用编程来判断

例如，如果你使用PHP作为服务器端开发语言，那么可以Jenssegers/Agent包来判断客户端设备的类型。

发布于

CSS Global Initial Styles

Setting CSS global initial styles is mainly for ensuring compatibility across different browsers. Here’s an example:

/* Global Initial Styles */
html, body, div, span, h1, h2, h3, h4, h5, h6, a, em, img, p, dd, dl, dt, ul, li, ol, form, label, table, tr, td, input {
    margin: 0;
    padding: 0;
    color: #333;
}
p {
    font-size: 14px;
}
body {
    width: 100%;
    font-size: 12px;
    font-family: "Microsoft YaHei", Arial, Helvetica, serif;
    background-color: #f5f4f9;
}
a, a:link, a:visited {
    text-decoration: none;
}
a:hover {
    color: #e60012;
}
li {
    list-style: none;
}
img {
    border: none;
}
.clear {
    clear: both;
}

If you’re using CSS frameworks like Bootstrap, LayUI, or Tailwind CSS, they’ve already set these global initial styles for you, so you don’t need to set them yourself.

发布于

CSS全局初始样式

设置CSS全局初始样式，主要为了兼容不同浏览器。以下是一个示例：

/* 全局初始样式 */
html,body,div,span,h1,h2,h3,h4,h5,h6,a,em,img,p,dd,dl,dt,ul,li,ol,form,label,table,tr,td,input{
    margin: 0;
    padding: 0;
    color:#333;
}
p{
    font-size:14px;
}
body{
    width:100%;
    font-size: 12px;
    font-family: 微软雅黑,Arial,Helvetica, serif;
    background-color:#f5f4f9;
}
a, a:link, a:visited{
    text-decoration: none;
}
a:hover{
    color:#e60012;
}
li{
    list-style:none;
}
img{
    border:none;
}
.clear{
    clear:both;
}

如果你使用一些CSS框架，例如Bootstrap、LayUI、Tailwind CSS等，它们已经为你设置了CSS全局初始样式，无需自己设置了。

发布于

许多人需要的其实不是实用的忠告，而是充满暖意的附和

村上春树说过，世界上许多人需要的其实不是实用的忠告，而是充满暖意的附和。

世界上最难的两件事情，一件事是把别人的钱放进自己的口袋，一件事是把自己的思想装进别人的脑袋。

一个人能吃饱穿暖，大概接下来最重要的就是被认可。一个例子，你逼着一个小孩子好好过马路很难，但是如果你说我害怕，你可不可以牵着我的手过马路？小孩子会很乖的承担起这个角色，因为他体会到了被认可的感觉。

发布于

web前端应用分类

web前端应用分类：

  • 移动端M站（移动端web App），一般是指手机浏览器里的网站。有些人也把它称为H5网页，H5是HTML5的简称，是一种高级的开发网页的技术
  • 移动端App，是手机上的软件，一般通过应用商店(App store)安装
  • 移动端小程序，微信小程序、支付宝小程序、抖音小程序、美团小程序、电报小程序等，可以理解为是大型移动端App内置的M站。M站一般可以容易地打包成小程序。PC端的软件里面也可以有小程序，例如微信PC端也可以访问小程序
  • PC端，笔记本电脑和台式电脑等大屏幕上的网站
发布于

Choosing a City, a Major, and an Industry

For most people, choosing the right city, major, and industry is crucial. Picking the right city ensures that you won’t struggle to find a job, choosing the right major can propel you into the middle class, and selecting the right industry can elevate you two whole social classes.