Meet high-performance MapKit JS

Meet high-performance MapKit JS

MapKit JS provides a JavaScript API to embed interactive Apple Maps directly into your webpages or apps across different platforms and operating systems, including iOS and Android. Learn about the latest features to help improve load performance and make your web and native apps more responsive and faster — all while giving you more control.

If you are an Apple Developer Program subscriber and needs an interactive map on your website, you should try MapKit JS.

I made an effort to improve its start-up performance last year. Everything accumulated to this Tech Talk recorded and published on Apple Developer website.

It is also nice to be informed that one of the slides made it to the front page today:

Please redirect technical questions to official channels, such as Developer Forums or Feedback Assistant.

Forget about /etc/hosts and use proxy.pac

I hate to touch /etc/hosts myself when a project asks me to do so as part of development setup. Tools like Vagrant use zeroconfig/Bonjour to dispatch a .local hostname, but no one seems to remember the ancient, all-mighty Proxy auto-config.

Proxy auto-config allows you to setup hostname and URL mapping in JavaScript. It’s supported on every OS and browser. To use that to setup your own development hostname, you would first need to write a PAC file:

function FindProxyForURL(url, host) {
    if (host === 'calypso.localhost') {
        return 'PROXY';
    return "DIRECT";

The example above points calypso.localhost to, as required by the Calypso project. Next, save this file as a private Gist, and get the raw, private, HTTPS URL.

You can file the place to put that URL in the Proxy setting section of your OS, for example, this is how to do it on macOS. Now, open any browser, the hostname should correctly connect to the IP address specified (Firefox comes with it’s own Proxy setting allowing you to specify a PAC, so if you would like the setting to affect only one browser, use Firefox).

This is the simplest way to use a PAC file. The Wikipedia article lists several other use cases for PAC files.

Important considerations

  • Use your own PAC file. I didn't share my PAC file hosting on Gist because you should never trust me nor anyone else for that. PAC file has the potential to redirect all your network traffic.
  • Turn off PAC auto-discovery. It rely on the expired WPAD protocol to discover PAC file served on your local subnet, but implementation hardly know the boundary of your local domain (it could by checking the Public Suffix list but that list changes almost monthly). Thankfully the good folks at WPADblock initiative secured a few public hostnames that could be exploited.

I hope you find this trick useful.


看到朋友不小心 renew 了網址在某愚蠢註冊商搬不出來,想說在這邊紀錄與分享一下我的架站配置,給大家參考一下:

  • 網址註冊商:Gandi。除了網站從台北連操作太慢以外,沒什麼好挑惕的(最近改版之後也變漂亮了)。之前在 PCHome MyName(因為 plainpass 搬出來),再之前在 SEEDNet,更早之前應該是在 TWNIC。更新:Gandi 的客服說他們沒有 的註冊服務,還能不能轉移過去要再問。
  • DNS:Gandi。唯一的問題是沒有 Dynamic DNS。之前還有留另一個 domain 在 Namecheap 只是為了 Dynamic DNS,但是現在就是用這個 domain 然後 CNAME 到一個免費服務的 hostname 處理(不是面向大眾的服務所以沒有很介意信任問題)。
  • 主機:Digital Ocean推薦優惠連結)。只開了最便宜的每月 US$5 主機(希望不要寫在這裡就被打爆了)。Digital Ocean 也有免費 DNS 服務。
  • SSL 憑證:Let’s Encrypt,用 certbot-auto 寫了 cron script 自己 renew。
  • 服務:WordPress、自己的一些靜態內容、自用的一些服務(像是某個我不能告訴你的網址只要 POST 我的手機就會響)

  • 網址註冊商:Gandi。
  • DNS、CDN、SSL 憑證:CloudFlare
  • 主機:GitHub Pages,全部都是靜態的公開內容,CloudFlare 開 flexible SSL 指到 GitHub。

前端的程式碼把大部分的第三方 script 都拔掉了,只剩下 Google FontsGoogle Analytics。後者在靜態網站上如果有看到 Do Not Track 就不會載入。