火狐用户的忧郁

知乎上看到过一句话:'IE 是微软的,Chrome 是谷歌的,FF 是我的。'

现在的火狐和【我的】渐行渐远了。每次升级都会非常焦虑,界面会不会改,扩展支不支持,细节上有没改动。

关于样式

可以修改浏览器的样子,这是 FF 很大一个特点。但是 57 版本大改后样式类扩展已经不能修改火狐界面了,需要修改配置文件中的 Chrome/userChrome.css 配置文件的位置在 about:support 中找到。

65 版本,样式名大改了一次,导致之前的样式无法继续使用,需要重新写一遍。也就是说旧版本的用户可考虑先升级到 65 之后的版本再修改界面,省的升级后傻眼。

地址栏输入:chrome://browser/content/browser.xul,用开发者查看器中获取样式名(新版已经没有这个功能了)。如果这个不能满足你,可以通过打开调远程试模式直接编辑浏览器外观,具体参考 这里

修改 userChrome.css,下面提供常用的样式(适用于 65 版本):


/**
 * chrome://browser/content/browser.xul
 */

/* -----------------------------------地址栏----------------------------------- */
#nav-bar {
    -moz-box-ordinal-group: 1;
    background: none !important;
    margin-left: 75px;
    box-shadow: none !important;
}
#nav-bar:not([tabs-hidden="true"]) {
}

/* -----------------------------------书签栏----------------------------------- */
#PersonalToolbar {
    -moz-box-ordinal-group: 2;
    background: none !important;
}
/* 书签文件夹 */
#personal-bookmarks .toolbarbutton-icon {
    display: none;
}
/* 书签字体 */
.bookmark-item {
    font-family: 'PingFang SC';
    font-size: 15px;
    margin-bottom: 3px !important;
}
/* 书签栏整体左右空间 */
#personal-bookmarks {
    padding: 0 8px 0;
}

/* -----------------------------------标签栏----------------------------------- */
#titlebar {
    -moz-box-ordinal-group: 3;
}
/*标签样式*/
#tabbrowser-tabs tab {
    font-family: 'PingFang SC';
    font-size: 15px !important;
    text-shadow: none !important;
}
/* 调整标签宽度 */
.tabbrowser-tab:not([pinned])[fadein] {
    max-width: 260px !important;
    min-width: 80px !important;
}
/* osx 的按钮 */
.titlebar-buttonbox-container {
    position: absolute;
    top: 4px;
    z-index: 10000;
    overflow: hidden;
}
/* 按钮和标签的空间 */
.titlebar-spacer {
    display: none;
}
/* 选中标签 */
#TabsToolbar .tabbrowser-tab[selected] .tab-line {
    border-top: 2px solid #2F706F;
}


/* -----------------------------------搜索栏----------------------------------- */
.browserContainer > findbar:-moz-lwtheme {
    background-color: #d9e9c4;
}



之后的版本,可以到这里看看,作者维护了几个常用的样式,需要就粘贴到文件里。

关于扩展

常用扩展安利:

  • 样式修改: Stylus
  • 油猴类脚本: Tampermonkey
  • 屏蔽广告: uBlock Origin
  • 鼠标手势: 闪耀拖拽

2019-05-04 附加组件签名出 bug,大部分扩展原地爆炸,也是用了十几年第一次遇到。

关于新版本提示

63 之后 FF 就不提供不检查更新这个选项了(脑残)。然后每隔12小时,或者重开 FF 的时候弹出新版本提示(脑残,脑残,脑残)。

mac 版本 FF 解决方法:

# 没有文件的话 自行创建目录和文件
vim /Applications/Firefox.app/Contents/Resources/distribution/policies.json

# 输入
{
    "policies": {
        "DisableAppUpdate": true
    }
}

重启后,就能在 about:preferences 的 Firefox 更新一项中发现 “更新已被系统管理员禁用”。从此就再也不用看到恼人的更新了!

其他平台可以看 这里 DavidPostill♦ 的回答

之后如果升级了新版本,这个文件会移除,如果 Mozilla 继续作恶,只能重复上面的操作。

其他细节

  • .dev .app 这类的开发用的后缀已经和 Chrome 一样强制使用 https 了,这意味着就算本地开发测试用的域名,还是需要配置 https。

tips:

  • 火狐中国是流氓,切勿下载中国版!

替代品

https://www.waterfox.net/ 缺点明显,一直留在 FF 56 版本,虽然支持旧组件,也支持部分新组件,但是 57 版本后才开发的组件不支持。优点是去掉了部分收集用户数据的功能。基于 FF 的魔改产品,长久使用非良策。

Mac 定时打开应用

编辑脚本

打开应用脚本

~/open.sh:

#!/bin/sh
open -jga <应用名称>
  • -j 隐藏应用
  • -g 不焦点应用
  • -a 打开 /Applications 中的应用

chmod +x ~/open.sh 赋予执行权限

- 阅读剩余部分 -

装修弱电心得

硬装部分

线材

  1. 超五类,电工会做的主要是五类或超五类,靠谱的超五类线在一定距离情况下能够达到千兆速度,但是抗干扰性能不如六类,优点是成本低。比较适合单纯上网、内网分享一些不大的文件的普通用户。
  2. 六类线比超五类多了十字骨架,双绞线也有所不同,线材粗硬,稍贵一点(后续的配件也一样贵),优点是稳定的千兆。适合内网观看几十G视频之类的传输大文件需求的用户。
  3. 六类屏蔽线,家装不推荐。
  4. 光线,土豪就上吧。

- 阅读剩余部分 -

[翻译]How To Create an SSL Certificate on Apache for CentOS 7

Introduction

在本指南中,我们将向您展示如何设置自签名 SSL 证书,以便在 CentOS 7 VPS 上与 Apache Web 服务器配合使用。自签名证书不会验证您的服务器的身份,因为它不是由受信任的证书颁发机构签名的,但它将允许您加密服务器和访问者之间的通信。

Step One — Install Mod SSL

安装 Apache SSL 支持模块:mod_ssl

sudo yum install mod_ssl

重启 Apache 后就能使用 SSL 证书。

- 阅读剩余部分 -

在 2016 年学 JavaScript 是一种什么样的体验?[转载]

嘿,我最近接到一个 Web 项目,不过老实说,我这两年没怎么接触 Web 编程,听说 Web 技术已经发生了一些变化。听说你是这里对新技术最了解的 Web 开发工程师?

准确地说,我是一名「前端工程师」。不过你算是找对人了。我对今年的技术别提多熟了,前端可视化、音乐播放器、能踢足球的无人机,你尽管问吧。我刚去 JS 大会和 React 大会逛了一圈,没有什么新技术是我不知道的。

厉害。是这样的,我要开发一个网页,用来展示用户的最新动态。我想我应该通过后端接口获取数据,然后用一个 table 来展示数据,用户可以对数据进行排序。如果服务器上的数据变化了,我还需要更新这个 table。我的思路是用 jQuery 来做。

- 阅读剩余部分 -

Laravel 验证表单数组

需求:在创建用户的时候,选择用户的角色(可以不选/单选/多选),用户角色是一个包含角色 id 的数组。

表单内容:

<input type="checkbox" name="roles[]" value="{{ $v->id }}"> {{ $v->name }}

自定义 Request rules() 方法:

public function rules()
{
    $rules = [
        'name' => 'required|max:255|unique:users,name',
        'email' => 'required|email|max:255|unique:users,email',
        'password' => 'required|max:255',
        'active' => 'boolean',
        'admin' => 'boolean',
        // 'roles' => 'numeric|exists:roles,id', 错误的方法
    ];
    if ( $this->request->get('roles') )
    {
        foreach( $this->request->get('roles') as $k=>$v )
        {
            $rules['roles.'.$k] = 'numeric|exists:roles,id';
        }
    }
    return $rules;
}

当 role id 不存在报错:The selected roles.0 is invalid.

以上的方法用于 laravel 5.1,在 5.2 中可以直接使用 'roles.*' => 'numeric|exists:roles,id', 来验证。

CI 多国语言

需求

  1. 默认访问与浏览器相同语言的页面
  2. 使用便于 SEO 的链接形式
  • sample.com/ - 默认简体中文
  • sample.com/sc/ - 简体中文
  • sample.com/tc/ - 繁体中文
  • sample.com/en/ - 英语

- 阅读剩余部分 -

[记录] Mac安装LAMP,以及后续升级

开启Apache,整理一些常用的目录

Mac 自带 apache,安装以 Yosemite 10.10 为例。

  • open /etc,把etc文件夹拖到 finder 侧栏方便访问。
  • open /Library/WebServer/Documents 放在侧栏方便使用。
  • 修改网站目录所有者 chown 用户名:wheel /Library/WebServer/Documents
  • 开启虚拟主机:apache配置文件 /etc/apache2/httpd.conf 配置文件中去掉 Include /private/etc/apache2/extra/httpd-vhosts.conf 的注释。
  • 虚拟主机配置:文件 /etc/apache2/extra/httpd-vhosts.conf,注意去掉默认两项配置,配置自己需要的。
  • hosts:文件路径 /etc/hosts。
  • 开启 apache 重写:apache配置文件 /private/etc/apache2/httpd.conf 去掉 LoadModule rewrite_module libexec/apache2/mod_rewrite.so 的注释。
  • 开启 apache sudo apachectl start

- 阅读剩余部分 -