Run Google Lighthouse in Docker Container

Thanks to my Colleague Simon’s suggestion, I was introduced to Google Lighthouse, an opensource nodejs framework to use Google Chrome to audit a website’s performance.

I like Lighthouse because:

  • opensource
  • good portability
  • can run as CLI command or as a nodejs module

Here’s a sample Dockerfile to have a container ready to run Lighthouse with Google Chrome for Linux.

FROM debian:stretch

USER root
WORKDIR /root
ENV CHROME_VERSION="google-chrome-stable"

# system packages
RUN apt update -qqy && \
  apt install -qqy build-essential gnupg wget curl jq

# nodejs 10
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && \
  apt install -qqy nodejs && \
  npm install -g lighthouse

# google-chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
  echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list && \
  apt update -qqy && \
  apt install -qqy ${CHROME_VERSION:-google-chrome-stable}

# python3 (optional for metric processing)
RUN apt install -qqy python3 python3-pip && \
  pip3 install influxdb

# lighthouse
RUN useradd -ms /bin/bash lighthouse
USER lighthouse
WORKDIR /home/lighthouse

Then lighthouse can be executed in the container to audit $url:

CHROME_PATH=$(which google-chrome) lighthouse $url --emulated-form-factor=none --output=json --chrome-flags="--headless --no-sandbox"

The result json will be sent to stdout, and it can be easily piped to other scripts for post processing, eg. parse json and extract metrics, etc…

🙂

Build a Chrome Extension with VueJS

It turns out quite easy to build a Chrome Extension. Basically the extension is a web application containing HTML, JS, images, etc. I tried to build a simple extension using VueJS recommended by colleagues.

There’s just 1 limitation that affected me: The eval JS function is disabled in Chrome Extensions for security reasons. That means there will be no dynamic templates, but only pre-compiled Vue components. Here’s the blog which explained in detail: https://dzone.com/articles/what-i-learned-about-vuejs-from-building-a-chrome

And this blog has very good instructions on how to start a Chrome Extension development with NPM and Vue:  https://blog.damirmiladinov.com/vuejs/building-chrome-extension-with-vue.html#.We7W8OBxW-Y

After all the steps in the above blog are done, I started working on the `app/scripts.babel/popup/Popup.vue` file and adding UI and functions in it while gulp watch is running to rebuild the project when any watched file has been changed. There was 1 issue where gulp can’t watch too many files so here’s the fix:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

🙂

Cherokee 完美配置 Joomla! 1.7.x

下面是从头开始配置 Joomla! 1.7.x 的步骤. 环境是 Ubuntu 11.10 64bit + Cherokee 1.2 + PHP 5.3 + MySQL 5.1:

  1. 登录到 cherokee-admin
  2. vServers > + > Manual. 以下假设建立的 vServer 是 mysite
  3. vServers > mysite > Basics :
    1. 在 Document Root 填写 Joomla! 的安装路径, 例如 /var/www …
    2. Dirctory Indexes: index.php, index.html
  4. vServers > mysite > Behavior:
    1. 添加 PHP 支持: + > Languages > PHP. 如果添加失败, 可能是没有安装 php5-cgi
    2. 将 Default > Handler 改为 Redirection, 并添加如下重定向规则:
      1. (External) ^/administrator/?$ /administrator/index.php
      2. (Internal) ^/(.*)$ /index.php?/$1
    3. 添加漏洞保护:
      1. + > Manual > Regular Expression, 并添加一下表达式, 它们之间是 OR 的关系即可
        1.  mosConfig_[a-zA-Z_]{1,21}(=|\=)
        2. (\<|<).*script.*(\>|>)
        3. base64_encode.*\(.*\)
        4. GLOBALS(=|\[|\%[0-9A-Z]{0,2})
        5. _REQUEST(=|\[|\%[0-9A-Z]{0,2})
      2. Handler : HTTP Error, HTTP Error: 403
    4. 不是必须的, 可以添加静态内容的压缩和过期时间
      1. + > Manual > Extensions : .html, .htm, .css, .js
      2. + > Manual > Extensions : .jpg, .png, .gif, .jpeg
  5. 在 Joomla! 管理后台里, 开启 URL 重写

参考链接: http://www.cherokee-project.com/doc/cookbook_joomla.html (Cherokee 娘家的文档, 竟然没有 URL 重写那部分, 奇怪. )

Joomla! 1.7.x 缺省模板的 Page Class

真是不理解, Joomla! 1.7的缺省模板Beez2里居然没有把 Page Class 写在 <body> 里面. 在菜单条目里可以给每一个页面设置 Page Class, 但如果 Page Class 不是出现在模板的 <body> 里, 那通过 Page Class 来做特定页面的 CSS 布景就不能实现.

还好, 找到了实现方法: 编辑/templates/beez_20/index.php.

在33行找到:

$doc->addScript($this->baseurl.’/templates/beez_20/javascript/md_stylechanger.js’, ‘text/javascript’, true);

在之后添加成:

$doc->addScript($this->baseurl.’/templates/beez_20/javascript/md_stylechanger.js’, ‘text/javascript’, true);
$pageclass =  & $app->getParams(‘com_content’);

然后, 找到 <body> 并改为:

<body class=”<?php echo $pageclass ->get(‘pageclass_sfx’); ?>”>

任务完成. 😀

参考链接: http://forum.joomla.org/viewtopic.php?f=619&t=623802&p=2653319#p2653319