iPhone X review – 3rd party accessories

I shared my iPhone X experience in the last blogpost. I want to add something more. iPhone X hardware is market leading. On the software side, iOS are much more better than Android in many areas:

1. Media playback control is very easy and user-friendly on iOS. I don’t know why I cannot control music or podcast playback on Android lock screen (ASUS Zenfone 3 with Nougat).
2. Speak Screen is another great iOS feature! It is so nice to lay back with closed eyes and listen to great articles found on web. Safari -> Reader -> Speak Screen.
3. Power management. With it and co-processor, we have Listen to “Hey Siri”. It is a heavy duty to listen for instruction around the clock! iPhone X speaker is loud and microphone is sensitive. It is always with its user. If Siri can do more, iPhone X is a better smart speaker than Amazon Echo and Google Home!

Great apps. Overcast, duet, Workflow and Transmit are fantastic!

Besides great apps, third-party hardware makes iPhone a better ecosystem! Especially true in the smart home market (which is my next blogpost topic). Below are some hardware accessories which I am using and I would like to recommend to you:
1. Spigen X Case Rugged Crystal
spigen_x_rugged_crystal
2. Quad Lock Run Kit. I used last year iPhone 7 Plus version. It was a must have when I ran. The new Quad Lock for iPhone X is improved and it fits even better with iPhone X. With its small footprint, iPhone X is better running companion! Special thanks to the improvement in delivery. I ordered before Thanksgiving and I received it on 1st Dec! Quick!

Quad_Lock_iPX_RunKit
3. Momax Q.Pad Wireless Charger

momax_qpad
4. Lamicall Foldable Stand

Lamicall_Foldable_Stand

5. Lead Trend Z-Dock. I can plug and unplug my iPhone with a single hand.

lead_trend_z3

6. PQI i-Cable Charging and Sync Stand for Apple Lightning Devices. I bought it a few years ago for iPhone 5. Subsequent Plus devices are too big and heavy to stay stable with this stand. iPhone X can!

pqi-icable-stand

Advertisements

iPhone X review. It is Freedom.

Like you, Q4 is a busy quarter! I didn’t wrote any blog since last August! There were many interesting things during the period to write! Let me do it now.

Like many lucky people, I’ve been using iPhone X 256GB Sliver for several month. I would like to share my experience and thoughts with you. If I have to use one word to describe iPhone X – it is freedom.

Apple iPhone X

Below are the great things of iPhone X:

1. Form factor. Size, weight and texture. Iphone X is 43.6mm (height) x 70.9mm (width) x 7.7mm (depth )7.7mm and 174g in weight. It maybe the prefect size of modern smartphone. I had to use two hands to operate the iPhone plus models. I like the bigger screen, more content at a glance and more battery life. I traded them with my single-hand control in the 6/6S/7 plus era. With iOS 11 Reachability, I CAN now use my right hand to ALMOST fully control the new iPhone. It is more challenging for my left hand to swipe-down from the top-right corner to activate the Control Center. The Freedom of single-hand control is (almost) back! Thanks Apple!

2. Great screen.

ASUS Zenfone 3 vs Apple iPhone X

3. Wonderful “Tap-to-Wake” feature. Responsiveness is the best competitive advantage of Apple devices. I have being using ASUS Zenfone 3 (ZE520KL) since last Mar. I love its Tap-to-Wake feature. The screen is the largest physical button. It is easy to tap. It is completely silent (comparing to the somehow annoying sound produced by the haptic engine when press on the iPhone 7 virtual home button). However sometimes the ZE520KL Tap-to-Wake does not work and I have to tap several times. Iphone X Tap-to-Wake always works. It just works!

4. Effort-less Face ID. It is easy to migrate from Touch ID to Face ID. Tap-to-Wake, Raise-to-Wake, and Always-on Listen for “Hey Siri” powered by M11 coprocessor, all these lay the foundation of Face ID. Touch ID requires one physical action to activate. Face ID too. No extra effort.

5. Battery life. Iphone X does a amazing job in power management! With a 2716mAh battery, I’ve never run of power in from 8am to 8pm. Or OLED display is less power demanding then LCD. I don’t have to evaluate if I should carry a battery charger. It is another form of freedom.

6. Wireless charging. Even with a 7.5W fast charging Qi charger, it is slower that a physical lightning cable + any 5Vx2.4A modern USB charger. However, wireless charging is a very pleasant experience. We need two hands to plug in and pull out the lightning cable every time we charge iPhone. To put down and bring up iPhone X from a wireless charger is a single-hand-action.

IPhone X is not perfect. To be exact, the Apple iOS ecosystem is not perfect. It is cool that I don’t have to do much to change form iPhone 7 Plus to iPhone X. It is almost effortless. I don’t have to pay special attention other than to avoid dropping it!

However, iPhone X is losing my attention too. I spend much more time on the 1.5-year-old ZE520KL in the last few weeks. Why? It is easy to hold (144g). Google Assistant can do more than Siri. There are more Smart Home devices supporting Google Assistant than Apple HomeKit!

More to share in the next blogpost!

“Let no corrupt communication proceed out of your month, but that which is good to the use of edifying, that it may minister grace unto the hearers.” Ephesians 4:29


How to use FlowPlayer to play HLS video without Flash plugin

Last update: 20170811

Flash is dead, announced by Adobe on 25th July 2017.

One major use of Flash is to playback video in browsers. If one uses videos on its website, one should better update its website to playback video without using Flash.

So I am going to do it now.

Mobile first, I use HLS videos in my website. It is year 2017 and HLS is the de facto video streaming communications protocol for mobile devices. However, many desktop browsers such as IE and Chrome do not natively support HLS. They cannot playback HLS video! Here is the list of browsers with HLS native support at Bitmovin.

In order to make videos viewable in all browsers and on all devices, there are video players to achieve cross browser and cross device compatibility. Flowplayer, Video.js and JWPlayer are the most popular ones. I am going to use the free version Flowplayer on my website.

The Flowplayer hlsjs plugin enables HLS playback in modern browsers and devices without requiring Flash. Here is the official setup documentation. In short, I have to do two things:

  • add Flowplayer skin, library and engines in the head section of webpage
  • install Flowplayer & using Pure Javascript methods in the body section

Here is the demo page using Flowplayer hlsjs plugin: demo.cheungwaikin.com/flowplayer.html. The two things above-mentioned can be easily identified in the html source.

music-every-day

Notes:

  1. I use AWS S3 to keep the HLS files. More information at my previous post How to use AWS S3 as Customer Origin for HLS videos
  2. I am comparing Soasta and Pingdom RUM solutions on my demo pages. I need more real users to generate more measurements. Please help to share my demo site demo.cheungwaikin.com with your friends.
  3. I am testing Fastly and NS1 Geotarget routing DNS feature. Here is the testing page: cdn.ns1.cheungwaikin.com

Last but not least, may God bless the people in Jiuzhaigou.


Make your embed Youtube video works in China

Objective:
To make your website videos great again.

A Forbes article says video is of the seven important areas which can improvement a website user experience and engagement.

Many companies agree and add Youtube videos to their websites. Why Youtube? No cost, easy to use (to embed videos in webpage) and easy to consume (to watch and to share, from enduser perspective). Besides some other downsides, one major challenge of using YouTube video on your corporate website is that YouTube is blocked in some countries (China, for example). So you neither can tell your story using Youtube nor you provide a good UX to all users.

Broken Youtube video

It is not unusual to see broken content… it is not great:(

Solution:
Even Google cannot make Youtube works in China. I cannot too. What I am trying to do is to add user location-awareness to the website. To make a website to show different content to users in different locations.

I Cloud can do all things. I am going to use different cloud services to demonstrate the solution.
The key element is a DNS service with Geolocation Routing capability, such as Verizon Route and AWS Route 53. There is one hostname an and URL only. No need to remember xxx.com, xxx.com.cn, xxx.com.jp, etc.
cdn.53.cheungwaikin.com/video.html

 

Geolocation Routing lets you choose the resources that serve your traffic based on the geographic location of your users, meaning the location from which DNS queries originate.

 

Demo setup:

  1. a webpage (a) with Youtube video, hosted on a AWS S3 bucket
  2. a similar webpage (b) using a mp4 video, hosted in another AWS S3 bucket
  3. webpage (a) is accelerated by KeyCDN for Europe, and AWS CloudFront elsewhere
  4. webpage (b) is accelerated by ChinaChina for China and Japan
  5. AWS Route 53 is configured to resolve the hostname cdn.53.cheungwaikin.com to
    • ChinaCache CDN URL for users located in China or Japan
    • KeyCDN CDN URL for user located in Europe
    • CloudFront CDN URL for user elsewhere
AWS Route 53 Geolocation Routing setup

AWS Route 53 Geolocation Routing setup

Verification:
We will use VPN service such as VyprVPN or Hola!VPN to connect to different locations and then browse cdn.53.cheungwaikin.com/video.html and see what content we get. Below video showing that I received the webpage (a) (with embed Youtube video), then I got the webpage (b) when I was using Hola!VPN to connect to Japan.

Cool?

Wish you a joyful weekend:)


Apple iPad Pro 10.5” review – web developer and admin perspective

Last update: 20170709

Objective: to build and operate a Fast and Responsive static website, as a habit

Tool: Apple iPad Pro 10.5” only

I have been using the new Apple iPad Pro 10.5” for nearly a month. My old iPad Air was mainly used to watch TV and to do video conferencing. It could not multi-task. It was too thick and too heavy to carry when compared to iPhone.

The new Apple iPad Pro 10.5” is more, VERY to be exact, powerful. Can do better multi-tasking with iOS11. With larger screen and Smart Keyboard, it can do somethings which are difficult to do on iPhone, such as webpage coding and cloud service management.

To build and operate a website, we need both Development Tools and Cloud Services. Since we’re using iPad only, we need to make sure the platforms provide fast and easy to use web portal. After trying many options, below are my suggestions for Cloud Services (1-3) and Development Tools (4-6) to achieve our above-mentioned objective.

1.Cloud storage: AWS S3 (upload/download and edit via Transmit)


2.CDN: AWS CloudFront, KeyCDN, ChinaCache


3.Analytics

    • User demographics & behavior: Google Analytics
    • Real User Measurement: Soasta mPulse

    • Synthetic Performance Measurement: Uptrends

4.HTML Editor: Nitro HTML (split view to edit HTML source and visualize page at the same time)


5.FTP: Transmit (build-in editor to make small/quick modification on the fly is a bonus!)

6.Testing/checking Tools

    • VPN: VyprVPN
    • DNS checking: DIG

    • HTTP response header: WebScope

All these Cloud Services and Development Tools are good values and inexpensive, some of them are FREE!

With all these, I built and launched my revamped demo site demo.cheungwaikin.com .


How to use CDN: demos to show performance improvement

Latest update: 20170709

Why?
I am happy to tell you that my CDN demo site demo.cheungwaikin.com is relaunched today! The objectives of the new demos is to show how CDN improves website performance, and to help people visualize and understand how to make website faster.

My CDN demo site was first launched in early 2012 with the objective to show how to use different EdgeCast CDN products to improve the delivery of static, dynamic, video content and software download. Then in 2016 I made some demos to show how to use HolaCDN solutions to improve video streaming quality. All these demos before 2017 were focusing on HOW to use the CDN products to do somethings. For the new demos, I will focus on Why and What of parts of the equation.

“When you Speed Up service, people become more engaged – and when people become more engaged, they click and buy more” The Google Gospel of Speed, Jan 2012.

What is it?
The new demo webpages are constructed inline with the current Internet norms

  • using RWD to fit different screen sizes. Faster is a feature. Responsive too. [1][2]
  • the demo webpage size is about 3MB. According to HTTP Archive, 3MB is the average webpage size in June 2017. It was 1.0MB in June 2012!
  • there are 3rd party web components, usually for analytics and social networking[3]
  • in terms of #HTTP objects, 60% is image, 25% is JS, 15% is CSS/fonts/html.
  • in terms of object byte size, 90% is image, 5% JS and 2% fonts.
  • following the Google PageSpeed and Yslow guidelines of high performance website.
  • all demos are the same from coding perspective. They look the same. The only difference is the delivery arrangement of the first party content (1 HTML file and 13 images) – from which origin and with/without CDN(s). As of 20170707, I tired three CDNs: ChinaCache, AWS CloudFront and Google Cloud CDN. [4]

democheungwaikin.com

It looks nice, doesn’t it?

How to use the demos?
To see is to believe it. Each demo is using different Origin and CDN (if any). By clicking it and watch it, you can feel how fast your browser loads the webpage.

Besides your visual observation, there are some good online tools which provide quantitative analysis of website performance. GTmetrix.com is one of them. Below is a GTmetrix comparison of my new Demo#1 (AWS S3 Origin and no CDN) and Demo#3 (AWS Origin and ChinaCache)

GTmetrixcomparison.png

Which one is faster?

Notes:

  1. Besides focusing on mobile-friendly demos, I am trying to use mobile device (iPad), rather than laptop, to prepare the demos. Apple iPad Pro 10.5” with iOS11 Is a powerful content production device!
  2. RWD is cool. It is fun to develop a good-looking website as a habit. As a game. Do it anywhere, using iPad. Thank you w3schools.com!
  3. I am using a few 3rd party analytics tools: Google Analytics, Alexa and Soasta.
  4. AWS S3 and Google Cloud Storage are very similar. But there are many differences between CloudFront and Google Cloud CDN!

More blog posts on these topics are coming.

Please feel free to try demo.cheungwaikin.com. Wish you a nice weekend:)

Updates:

20170708 add a new demo – Origin: AWS S3, CDN: KeyCDN. Add a new performance analytics JS from uptrends.com

20170709 add e new demo – Origin: AWS S3, CDN: multi-CDN (ChinaCache for China, KeyCDN for Europe and CloudFront anywhere else)


How does a CDN work?

Last update: 20170628

Last Friday I was asked “how does a CDN work?” The first time I was asked the same question was year 1999. I acquired a lot of CDN knowledge and experience since I join the industry in 2012. CDN is not yet an everyday business in Asia nowadays. I want to help. An one page brief explanation. Hope you like it.

What is a CDN?

A Content Delivery Network (CDN) is a collection of web servers distributed among multiple locations to deliver content to users more efficiently.[1]

What is the job to be done by CDN?

To send web content to enduser faster. How? By moving data close to the endusers to reduce round trips and network.

Ilya Grigorik, web performance engineer at Google, says [2]:

  • Latency, not bandwidth, is the performance bottleneck for most websites.
  • Four major latency types: propagation delay, transmission delay, process delay, queuing delay
  • To improve performance of our applications… we need to reduce round trips, move the data closer to the client.


Centralized Server vs CDN [3]

How does a CDN work?

In essence, CDN puts your content in many places at once, providing superior coverage to your users. For example, when someone in London accesses your US-hosted website, it is done through a local UK CDN server. This is much quicker than having the visitor’s requests, and your responses, travel the full width of the Atlantic and back.[4]

How??

By connecting users who request your website content to CDN, instead of connecting directly to your web server.

Using traditional centralized server model, a website, say www .abc.com, will usually have a “A Record” in the DNS configuration (of abc.com) to inform people to connect to the web server with the specific IP address, say 1.1.1.1. We call this Customer Origin. When a user John in Beijing browses www .abc.com the following (behind the scene) steps will happen:

  1. John’s computer will ask the its local DNS resolver to figure out the IP address of www .abc.com
  2. the resolver will then ask the root DNS server what is the authoritative DNS server of abc.com
  3. The resolver will then ask the authoritative DNS sever of abc.com what is the IP address of www .abc.com and will get the answer of 1.1.1.1.
  4. John’s computer will then connect to 1.1.1.1 to get the web content of www .abc.com

With CDN, www .abc.com will have a “CNAME Record” in the DNS configuration to inform people to connect to the server with the specific hostname, say abc.customer.cdn.com provided by the CDN provider. When John browses the website www .abc.com, we will have the same first two steps above-mentioned, but subsequent steps will become:

  1. The resolver will then ask the authoritative DNS server of abc.com what is the IP address of www .abc.com and will get the answer of abc.customer.cdn.com
  2. The resolver will then ask the authoritative DNS server of cdn.com what is the IP address of abc.customer.cdn.com. The authorization DNS server of cdn.com will, based on the IP address of John’s local DNS resolver and the CDN provider’s routing algorithm, provide the answer, say 2.2.2.2, which is the IP address of the CDN cache server located in/near Beijing and is the best machine to deliver the content of www .abc.com to John
  3. John’s computer will then connect to 2.2.2.2 to retrieve the web content of www .abc.com

Say there is another user Mary in Singapore going to browse www .abc.com, we will have the similar four steps, but the CDN provider will use, say 3.3.3.3, which is the IP address of the CDN cache server located in/near Singapore which can serve Mary most efficiently.

Do I need to upload my website content to CDN?

Not necessary. In most cases, CDN will on-demand fetch content from the Customer Origin.

When the CDN cache serve receives the HTTP GET request of www .abc.com from an enduser, the cache server will check if the requested content of www .abc.com is already stored in its storage:

  • If yes, then the cache server will send the content stored on it to the enduser. We call this “Cache Hit”
  • If no, then the cache server will fetch the content from the Customer Origin, then store it and send it to the enduser. We call the situation of missed content “Cache Miss”, and the process of fetching content from Customer Origin “Cache Fill”. CDN will Cache Fill when it needs to update the stored content.

The higher the Cache Hit rate, the faster the content delivery. High Cache Hit rate better utilizes CDN and reduces Customer Origin loading.

How long will the CDN keep my web content?

CDN provider will usually honor the Cache-Control header setting in Customer Origin. During the Cache Fill process, the CDN cache server will cache both the web content and the HTTP header information, including the Cache-Control header attributes. CDN provider will keep the content according to the Cache-Control setting or based on the customer CDN configuration.

What else?

CDN nowadays offers more features and services. Below are the key benefits of using CDN:

  • Faster delivery of both cacheable and non-cacheable content
  • Higher availability by leveraging CDN’s global footprint and scale.
  • More secure by shielding the Customer Origin from public access.
  • Reduce the expense on Customer Origin resources (computer and connectivity)

That’s all.

Reference:

  1. High Performance Web Sites, Steve Souders
  2. High Performance Browser Networking, Ilya Grigorik
  3. CDN, Wikipedia
  4. Essential Guide to CDN, Incapsula
  5. Cache-Control header, Mozilla.org

Notes

I prepare this blogpost on the new iPad Pro 10.5” with Smart Keyboard. It is GREAT. Looking forward to iOS 11!

img_1194

[Update: 20170628] Apple iPad Pro 10.5” with iOS 11 beta

IMG_3538