多页面WebApp项目脚手架方案

传统的 web 网站,是多页面的,不借助新出的框架,比如 react 或者 vue 等。

这里给出一个脚手架项目,可以 clone 后,具备:

  • 使用 webpack/babel 将 es 语法编译为兼容低版本浏览器语法
  • 开发模式下,web 页面随着程序改动自动更新
  • 生产模式下
    • 压缩 JavaScript 和 CSS 文件,自动引用到 html 页面
    • 编译输出可发布的所有静态文件
    • html 文件配置强制不缓存
    • js/css 文件名带 hash 值,每次发布的文件名称不同,方便做 cdn
    • 多个页面需要的公共库,比如 jQuery,单独编译,在多页面共享

本文参考了 Static website, multiple html pages, using Webpack + example on Github

Read More

Flutter widget, rendering和dart.ui的基本使用

Flutter渲染界面的架构,分三个层次:

其中:

  • dart.ui
    • 提供了最底层的渲染界面的封装
    • 主要包括一个Canvas类,以及围绕它的各种基本图形API,包括:点、线、矩形、路径、文本等等
    • dart.ui封装了和渲染引擎的交互
    • dart:ui library
  • rendering
    • 使用dart.ui的API,提供更高级更简便的渲染功能
    • 将界面抽象为一个RenderObject的树,渲染整个树将显示界面的内容
    • 树中的RenderObject是可变更的,变更后将触发新的渲染
    • 可以近似看作Web开发中的DOM
    • 见:rendering library
  • widget
    • 使用rendering API,提供更高级的抽象,便于开发可复用图形组件和界面
    • 可以创建一个Widget树生成界面,树中的Widget实例都是不可变的,更新Widget实质上是创建新的Widget,取代旧的
    • 一般情况下,开发Flutter主要是使用Widget,从这个层面上看,一切Flutter界面都是Widget
    • widgets library

下面我们用具体示例展示各个API的基本使用。

Read More

在macOS 10.14.1下使用DVD刻录机

先锋蓝光DVD刻录机,之前使用没有问题,这次在新版本macOS 10.14.1下出现问题。

在Finder(访达)中找不到光驱。

这是一个Bug,见:

其实也不影响刻录,将需要刻录的文件,都汇集到一个目录下,然后选择目录,鼠标右键:

就可以刻录了。刻录完成后,在Finder(访达)中就能看到该光驱了,可以选择光驱正常推出。

Read More

通过D3.js绘制一份中国分省地图

通过D3.js和互联网上公开的中国地图分省数据geoJSON,可以很容易的绘制出中国分省地图。

本文示例使用D3.js的v5.7.0版本,网上的示例以3.x4.x居多,直接在5.x上运行这些示例会有兼容性问题。

源代码见这里:https://github.com/MarshalW/d3.hello/blob/master/3.chinamap.html

感谢yezongyang提供的geoJSON,数据很准确,西藏包括藏南地区,之前用的一个数据缺了一块。

以下是地图效果实例:

Read More