分类
css

CSS 网页保持全屏并自动伸长

其实是个小需求,以前也搞过很多次,没想到前几天被坑了一下,记一笔。

以前,如果想要页面在内容任意多的时候都能占满浏览器,可以简单设置:

html,
body {
  height: 100%;
}

但是这样设置,在 Safari 浏览器上,会将 <body> 固定为窗口高度,如果内容多,就会被底部挡住内容。解决方案是 body 高度用 min-height:100%

如果是三行一列的结构,即上面是导航条,下面是脚部,中间随内容自适应,可以用:

body {
  display: flex;
  flex-direction: column;
}

这个时候,不能用 flex-basis,在 Safari 上会失去弹性,也要用 min-height。所以,最终样式大概就是:

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#nav {
  height: 4rem;
}
#bottom {
  height: 10rem;
}
#content {
  flex-grow: 1;
  min-height: 40rem;
}

另外,因为基本只有桌面浏览器需要这个功能,所以可以考虑加一个 @media (min-width: 576px) 做限制。

分类
学习

从 uiprint.co 聊一聊“练习作品”

我一直有做 Side project 的心,经常想实践一些 idea,不过多数止步于画原型。

虽然我常年购买 Adobe Creative 和 Sketch,也经常使用 Photoshop、XD、Sketch 切页面,不过并不擅长真刀实枪的“创作”。一旦涉及到画原型,进度就会很慢,经常让我的 indie hacker 之路止步于此。于是我就想,要不还是画在纸上。

然后我就找到这个网站:uiprint.co。上面有很多做好的 PDF,直接下载打印,就可以得到很好的设计底图,然后连连画画(上面有网格点),就能画出很棒的设计原型。这样做最大的好处是,设计思路不会中断,可以专注于产品逻辑。

为了方便大家理解,我截了一张图

接着聊聊“练习作品”。

我经常逛技术论坛和问答区,常常看到有同学提问:“自学前端,能仿着教程写出 demo,接下来该怎么做?”,或者“应届生,该写什么项目经历?”

面对这种问题,我都会建议他:

  1. 不要仿做 demo,要做有人用的东西
  2. 认真地进行推广、迭代
  3. 解决遇到的各种问题

模仿写 demo,意味着作品没有得到真正的检验。没有职业经验的新人,他眼里的“也做得出来”、“挺好”,在商业产品里多半连及格都算不上。满足于做这样的作品,没有办法获得真正的提升,写到简历里,也没什么价值。

接下来的问题是:做什么?

首先,不要贪大求全。你当然可以做电商网站,或者自己从头写个博客、论坛,看起来很高端,但实际上既耗时耗力,也没有什么价值,因为没有人真的会用。

其次,要把眼界放宽。互联网已经是一种基础设施,大部分行业都能被互联网赋能提升。与其照抄千篇一律的 todo-list,电商网站首页,好好想想自己周围的人需要什么,做一个他们会用的东西更有价值。

uiprint.co 就是一个很好的例子:

  1. 它本身很简单,就是网页+可以下载的 PDF,纯静态,开发成本维护成本都很低。即使是前端新人,也不太会遭遇无法攻克的技术难题。
  2. 有价值,是 Product Hunt 日榜第一,所有需要做产品设计的人都可以获得帮助。不断有人用,作者就有不断更新的动力,也有不断升级的需求,比如视觉效果调整、访问量统计、添加内容的后台等等。
  3. 就更不用说这个网站本身可能带来的价值

其实我们身边类似这样的机会并不少。比如 2010 年的时候,智能手机刚刚兴起,就有一个人告诉我,他想做一个应用,告诉你在北京上海这样的大城市怎么做地铁,哪站有厕所,哪站车门开在那边、等等。

这样的项目坚持下来,虽然未必有经济收益,但一定能获得很多有价值的项目经验,对入行、对找工作,都会有很大帮助。


总结一下:

  1. 想自学、想提升自己、想找工作,做项目一定要做有人用的东西,不要模仿做 demo
  2. 选择题目不需要特别大,也不需要纯互联网,有人用 是首要原则
  3. 接下来就是坚持,坚持开发、坚持维护、坚持推广

希望对大家有帮助。

分类
开发工具

PhpStorm 添加其它目录到本项目

小笔记,低技术含量。

分类
前端

给 Markdown 里的图片增加样式

在 markdown 里添加图片很容易,用这个语法即可:

![alt](/path/to/image "title")

但是如果图片需要一些特殊样式,就不太好搞。比如前两天,老板觉得博文中的二维码太大,不好看,让我改小点。我一开始只知道可以用 HTML 来做,因为 Markdown 内建支持所有 HTML,但总觉得不够优雅,尤其是,不知道怎么要求将来写博客的人都用 HTML 来写。

于是 Google 之,找到这篇文章:How to Style Images With Markdown,写得非常好,列举了很多添加样式的方法,尤其是使用 #hash + CSS 选择器的方法,很有想象力,推荐给大家。

首先,在 Markdown 里,给图片的 URL 添加 hash。这个动作并不会造成任何实质性的影响。

![alt](/path/to/image#thumbnail)

然后,在 CSS 里,定义“src 里包含字符串 #thumbnail”的规则即可:

img[src*="#thumbnail"] {
  max-width: 10rem;
}

[attr*=val] 选择器的意思是 attr 属性里包含 val 字符串。这里用 [src$="#thumbnail"] 效果是一样的。如果你想了解所有 CSS 属性选择器,还是推荐看 MDN 文档

分类
服务器端

解决 Raspberry Pi 4 安装 php-mbstring/php-curl 的问题

最近要在 flarum 上做二次开发,尝试直接用 php -S localhost:8080 未果,于是打算在树莓派上搭个开发环境,省得它整日落灰。

因为在本地创建过仓库,所以这次直接从 GitHub clone 项目下来,然后打算执行 composer install 安装依赖。结果提示差了 php-mbstring(解决汉字等多字节字符)和 php-curl(用于远程请求)两个模块。然后我就打算用 apt install php-curl 安装模块,没想到失败了,仔细看错误信息,因为这个模块依赖 libcurl3,但是系统里是 libcurl4,所以不行。

那就安装 libcurl3 呗,结果系统认为明显 libcurl4 更新,不给装 3,哪怕删了重装都不行。

后来查了半天,找到答案。原来我添加的源是 stretch 的,也就是面向 Debian 9 的;而 Raspberry Pi 的系统是基于 Debian 10,也就是 buster 的,所以依赖处理上,两方面就冲突了。

这个时候,需要用 sh -c 'echo "deb https://packages.sury.org/php/ buster main" > /etc/apt/sources.list.d/php.list' 把属于“buster”的源添加进系统,接着删掉之前 stretch 的源,然后 apt update 之后,就可以正常安装了。


参考链接:https://github.com/oerdnj/deb.sury.org/issues/1193

分类
技术

笔记:七牛云续费免费证书

这是一篇笔记,没啥技术含量。

七牛云有一定的免费额度,对于我这种技术博客来说,可用量充足,所以我很早就开始使用他们家的服务。我启用了二级域名 qiniu.meathill.com,用来存放所有静态资源。

主站 HTTPS 之后,如果加载非 HTTPS 资源,也会报错。所以需要在七牛也开启 HTTPS。这就需要 SSL 证书。七牛提供免费的 TrustAsia 证书,但是一次只能买一年份,不能自动续期,每次换证书都要折腾好久,所以简单写个笔记记一下。

分类
php

PHP built-in web server 支持自动查找入口

使用 php -s localhost:8080 可以快速启动一个开发服务器,非常方便,是我现在需要简单服务器支持时的首选。

不过我最初了解到这个功能的时候,它(可能)还不支持请求重写,也就是说,我们访问 /foo/bar,它就会去当前目录里查找 /foo/bar,找不到就 404。如果想要实现 index.php 重定向,必须手动编写路由文件,比较麻烦。我宁可用 nginx 实现,因为部署上线的时候早晚要用。

最近偶然发现,PHP built-in web server 已经支持请求重写了,如果命中,就会直接返回目标文件;如果没有命中,就会沿着目录往上找,直到找到 index.php 或者 index.html,或者到启动服务器的根目录,然后把请求地址放在 $_SERVER['PATH_INFO'] 里,留待 php 处理。

这样一来,无论是 WordPress,还是 Laravel,还是其它基于路由的单一入口项目,都可以直接使用 PHP built-in web server 开发了,简单方便快捷。甚至连纯前端项目,如果你不熟悉服务器端的配置,也可以简单的安装一个 PHP 来实现。

比如,在本地开发 WordPress,可以这样:

# 安装 php 和 mysql
brew install php
brew install mysql

# 配置 mysql root 用户密码,替换下面的 `NEWPASS` 
$(brew --prefix mysql)/bin/mysqladmin -u root password NEWPASS

# 下载并解压 wordpress.zip,进入目录,启动服务器
php -s localhost:8080

# 完成!

参考文档:

PHP manual: Built-in web server

分类
服务器端

配置 nginx 支持目录别名

我有一个小项目,我们假定它叫 up,是用 PHP 写的私人图床,部署在服务器上,域名是 up.meathill.com。因为是 PHP,不需要编译,直接 `git clone` 仓库然后配置 nginx 指过去就好。

后来想做一个在线预览的功能,是个单页应用,也放在这个仓库里,目录是 `up/fe`,项目用 Vue + Webpack 来做,源码放在 `up/fe/src`,生成的文件放在 `up/fe/dist`。

这样一来,我就需要在原本的 nginx 里配置一个虚拟目录 `/admin`,指向生成的文件。预览的文件路径就是 `/admin/${file}`,所以我还要把未命中的文件重定向到 `index.html

经过反复摸索,最终的配置如下:

{
        location / {
                # 未直接命中的请求都交给根目录里的 index.php 处理
                try_files $uri $uri/ /index.php$args;
        }

        # 默认的 nginx 1.14 + PHP 7.1 + php-fpm 配置
        location ~ .php$ {
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/var/run/php/php7.1-fpm.sock;
        }

        # /admin 的访问指向编译后的前端资源
        location /admin {
                alias /mnt/www/uploader/fe/dist;
        }

        # 直接访问的地址解析,正则其实不必要
        location ~ "/admin/(?<page>d{8}-d{6})$" {
                alias /mnt/www/uploader/fe/dist/index.html;
                # 这里的定义很重要,默认是 application/octet-stream 会启动下载
                default_type text/html;
        }
        
        # 把不希望看到的请求屏蔽掉
        location /fe {
                return 404;
        }
}
分类
教程

给 Bootstrap Modal 增加缩放功能

需求

Bootstrap 应该还是目前最流行的前端基础框架之一。因为架构方面的优势,它的侵入性很低,可以以各种方式集成到其它项目当中。在我厂的各种产品里,都有它的用武之地。

前两天,老板抱怨,说 Modal(弹窗)在他的屏幕上太小,浪费他的 5K 显示器。

我看了一下,按照 Bootstrap 的设计,超过 1200px 就算是 XL,此时 .modal-lg 的宽度固定在 1140px。其实 Bootstrap 这么设计也有它的道理,因为人眼聚焦后宽度有限,如果弹窗太宽的话,内容一眼看不全,也不好。不过在我厂的产品里,弹窗要呈现火焰图,所以宽一些也有好处。

技术方案

那么,综合来看,最合适的做法,就给 Modal 添加一个拖拽的功能:用户觉得够大了,就这么着;用户想看大一点,就自己拉大一些,然后我记录用户的选择,以便复用。

看过我《用 `resize` 和 MutationObserver 实现缩放 DOM 并记录尺寸》的同学,应该知道 resize 这个 CSS 属性,使用它可以很方便的给元素添加缩放功能。参考 caniuse 上面的普及度,大部分新版本的浏览器都已经支持,可以放心使用。

使用它的时候要注意两点:

首先,我们在缩放元素的同时,也会对它的子元素、父元素同时造成影响。因为在静态文档流当中,块级元素的宽度默认是父元素 content-box 的 100%,而高度由子元素决定。所以,对一个块级元素的缩放,不可能宽过它的父元素(如果限制了宽度的话),也不可能矮于它的子元素。

其次,拖拽手柄的显示优先级很低,会被子元素盖住,哪怕子元素没有填充任何内容。换言之,一定要有 padding 的元素才适合添加 resize 缩放。

实施方案

总而言之,把这个属性加在哪个元素上面,很有讲究。具体到本次需求,Bootstrap Modal,最合适添加 resize 属性的的是 modal-content,因为它有 1rem 的内边距。

但是限制宽度的是父元素,也就是 modal-dialog,它是响应式的,会根据显示器的宽度设置一个最大宽度。如果不修改它的 max-widthmodal-content 的最大宽度就无法超过它,达不到预期效果。但是也不能改成 width,这样的话,弹窗会失去弹性,分辨率低的时候表现不好。

所以还是要在 max-width 上做文章。如果直接去掉它,modal-dialog 的宽度就会是 100%,失去弹窗效果,所以也不能这样做。最终,我的方案是:

  1. 窗口完全展开后,获取宽高,赋给 modal-content
  2. 去掉 modal-dialogmax-width
  3. 用 MutationObserver 监测 modal-content 的宽高,保存 localStorage,以便接下来使用

完整代码展示

我厂的产品基于 Vue 开发,所以部分逻辑用 Vue 组件实现。

效果演示

为方便在 Codepen 里呈现,有部分修改。

代码及解释

<template lang="pug">
.modal.simple-modal(
  :style="{display: visibility ? 'block' : 'none'}",
  @click="doCloseFromBackdrop",
)
  .modal-dialog.modal-dialog-scrollable(
    ref="dialog",
    :class="dialogClass",
  )
    .modal-content(ref="content", :style="contentStyle")
      .modal-header.p-2
        slot(name="header")
          h4 {{title}}
        span.close(v-if="canClose", @click="doClose") ×
      .modal-body
        slot(name="body")
</template>

<script>
import debounce from 'lodash/debounce';

const RESIZED_SIZE = 'resized_width_key';
let sharedSize = null;

export default {
  props: {
    canClose: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: null,
      validator: function(value) {
        return ['sm', 'lg', 'xl'].indexOf(value) !== -1;
      },
    },
    resizable: {
      type: Boolean,
      default: false,
    },
    backdrop: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: 'Modal title',
    },
  },

  computed: {
    dialogClass() {
      const classes = [];
      if (this.size) {
        classes.push(`modal-${this.size}`);
      }
      if (this.resizable) {
        classes.push('modal-dialog-resizable');
      }
      if (this.resizedSize) {
        classes.push('ready');
      }
      return classes.join(' ');
    },
    contentStyle() {
      if (!this.resizable || !this.resizedSize) {
        return null;
      }
      const {width, height} = this.resizedSize;
      return {
        width: `${width}px`,
        height: `${height}px`,
      };
    },
  },

  data() {
    return {
      visibility: false,
      resizedSize: null,
    };
  },

  methods: {
    async doOpen() {
      this.visibility = true;
      this.$emit('open');
      if (this.resizable) {
        // 通过 debounce 节流可以降低函数运行次数
        const onResize = debounce(this.onEditorResize, 100);
        // 这里用 MutationObserver 监测元素尺寸
        const observer = this.observer = new MutationObserver(onResize);
        observer.observe(this.$refs.content, {
          attributes: true,
        });

        if (sharedSize) {
          this.resizedSize = sharedSize;
        } 
        // 第一次运行的时候,记录 Modal 尺寸,避免太大
        if (!this.resizedSize) {
          await this.$nextTick();
          // 按照张鑫旭的说法,这里用 `clientWidth` 有性能问题,不过暂时还没有更好的解决方案
          // https://weibo.com/1263362863/ImwIOmamC
          const width = this.$refs.dialog.clientWidth;
          this.resizedSize = {width};
          // 这里产生纪录之后,上面的 computed 属性就会把 `max-width` 去掉了
        }
      }
    },
    doClose() {
      this.visibility = false;
      this.$emit('close');
    },
    doCloseFromBackdrop({target}) {
      if (!this.backdrop || target !== this.$el) {
        return;
      }
      this.doClose();
    },

    onEditorResize([{target}]) {
      const width = target.clientWidth;
      const height = target.clientHeight;
      if (width < 320 || height < 160) {
        return;
      }
      sharedSize = {width, height};
      localStorage.setItem(RESIZED_SIZE, JSON.stringify(sharedSize));
    },
  },

  beforeMount() {
    const size = localStorage.getItem(RESIZED_SIZE);
    if (size) {
      this.resizedSize = JSON.parse(size);
    }
  },

  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }
  },
};
</script>

<style lang="stylus">
.simple-modal
  background-color: rgba(0, 0, 0, 0.5)
  .modal-content
    padding 1em

    .close
      cursor pointer

.modal-dialog-resizable
  &.ready
    max-width unset !important

  .modal-content
    resize both
    margin 0 auto
</style>

注意

因为浏览器的异步加载机制,有可能在 modal 打开并完成布局后,高度和宽度被内容撑开导致记录不准,或者内容被异常遮盖。请读者自己想办法处理,就当练习题吧。

总结

本次组件开发非常符合我理想的组件模式:

  1. 充分利用浏览器原生机制
  2. 配合尽量少的 JS
  3. 需要什么功能就加什么功能,不需要大而全

在 MVVM 框架的配合下,这样的方案很容易实现。另一方面,每个项目都有独特的使用场景,通过长期在特定场景下工作,我们可以逐步整理出适用于这个场景的组件库,不断改进该项目的开发效率。我认为这才是组件化的正道。

分类
chrome

Chrome Devtool Protocol 开发笔记

周末动笔写教程,越写越长暂时收不了笔;周日发现上一台 iMac 回收被坑了,显示器从烧屏变闪屏了,心情大坏,简直写不动了,哎……

Chrome Devtool Protocol(下面简称 CDP)是一个非常强大工具,简单来说,它可以揭开束缚 Chrome 的各种封印,从浏览器角度深入页面(及其它领域,包括 worker),完成一些平日里难以完成的操作。

我目前研究它主要是想优化我厂官网的首屏 CSS,顺便为将来 QA 插件的深入开发做准备。

不过 CDP 的文档、资料各种不全,Google 也没什么结果,所以我会把日常踩到的坑记到这里,以备回顾。