Commentary

簡評二十

Base64 Encoding & Performance, Part 1: What’s Up with Base64?

有時諗住將D file encode做base64 embed入CSS會減低network connection overhead，但係唔一定好

  • base64 encoding會增加file size
  • embed base64 入 frequently change 嘅CSS會搞到D file cache唔到

What every JavaScript developer should know about Unicode

  • Unicode provides a unique number for every character
    • Abstract character (or character) is a unit of information used for the organization, control or representation of textual data.
    • Code point is a number assigned to a single character.
      • the range U+0000 to U+10FFFF
    • Plane is a range of 65,536 (or 1000016) contiguous Unicode code points from U+n0000 up to U+nFFFF, where n can take values from 016 to 1016.
      • There are 17 plane
      • last 2 plane for private use
    • Code unit is a bit sequence used to encode each character within a given encoding form.
      • Computer use this to store
      • Encoding like UTF-8 UTF-16 UTF-32 translate abstract character to code units
  • UTF-16
    • 當16bit唔夠store個charactor果時，就會折開2個code units (Surrogate pair)
  • A grapheme, or symbol, is a minimally distinctive unit of writing in the context of a particular writing system.
    • 姐係一粒我地睇到個字，可能由幾個code unit組成
    • Combining mark is a character that applies to the precedent base character to create a grapheme.
      • 字+combining mark會係個字上面加decoration，係由多個code unit組成一個graphme嘅例子
  • Unicode in js
    • JS 係用UTF-16，所以有時一粒字，但length可以係2。
    • Most of the JavaScript string methods are not Unicode-aware
    • Escape unicode
      • \x
      • \u<0000-ffff>
        • at most 2 bytes only
      • \u{1F639}
        • introduced in es2015
    • String comparsion
      • 同一隻字(glyph)，係可以由唔同嘅code units 組成
        • ç vs c\u0327a
        • 可以用normalization 解決E個問題

谷歌是如何构建Web框架的

  • Google share one repo for all project
    • no versioning problem (all component use the same version)
    • if you code break other teams’ code, you can fix the problem in other teams’ code, as they are in the same repo
  • Use code to refactor code when there is big update

Best Practices for Long Scrolling

A guide for long scrolling UX, also mentioned long scrolling on E-Commerce and Parallax

  • When To Use Long Scrolling?
    • for storytelling (creates a linear structure)
    • for continuous and lengthy content, such as a long article or a multi-step tutorial (avoid break the content to serveral pages)
  • 10 rules for good long scroll UX
    • Encourage Users To Scroll
      • By telling them what is this page about
    • Keep Navigation Options Persistent
      • Sticky menu
      • mobile menu may not always be sticky, as screen is small
    • Make Sure the “Back” Button Works Properly
      • Back return user to the position the user scrolled, don’t require them to scroll again
    • Change URL Based on Scroll Position
    • Consider Jump-To Options
      • Provide jump to section feature
    • Provide Visual Feedback When Loading New Content
    • Don’t Hijack Scrolling
      • If all content on this page is tied to scrolling, the visitor is forced to browse the page at a slow pace.
    • Optimize Page-Loading Time
    • Consider How Much Resources Your Page Consumes
      • Can use lazy load to resolve the problem
    • Consider User Behavior on the Page

13 Jan 2019

Can re-read the last section, which talk about some example

Security 101 for SaaS startups

A nice tutorial for start up founder/engineer on security. The tutorial told you what do you need to prepare in different stage of start up. It also have a list of security risks.

Tap vs. Click: Death by Ignorance

Mobile browser為左相容冇handle touch event嘅web page，會係touch event之後fire一個click event。但係有2個問題。

  • Click event 會有D delay
  • Event target係由一D複雜嘅heuristics去決定，touch 同 event 嘅 event target可能唔同
    點解唔統一click 同 touch event？好似係因為有patent嘅問題。

Medium’s CSS is actually pretty fucking good.

篇文講左佢地點樣tune Medium嘅CSS

  1. Extract image from style sheet and lazyload them in a separated, data-url file
  2. Use icon font
  3. Set up z-index scale
  4. Style guide
  5. Design for future
    • Introduce new CSS variable, mixin, and classname semantics to avoid run-on classnames and improve readability
    • Add tooling around CSS performance — to make it easier to track style changes and regressions over time
  6. Improve semantics on css class name
    • Add prefix to distinguish css for js, style and utility

以下無需重讀

The Cost Of JavaScript

  • Load 1 byte javascript 嘅時間同 load 1 byte image 嘅時間長，因為js要 parse 同 execute
  • “Time to interactive” 係一個好嘅indicator
    • reduce time to interactive
      • progressive bootstrap

CPU Flame Graphs

Flame graph 係透過sampling call stack去generate出黎

  • The y-axis shows stack depth
  • The top box shows the function that was on-CPU
  • The x-axis does not show the passing of time from left to right
  • 個box 闊，姐係execute嘅時間耐

使用CSS offset-path让元素沿着不规则路径运动

用一個叫offset-path嘅css property去做到element按不規則嘅path去移動。條path似乎係SVG嘅path