HectorGuo's Blog

Two practices for isolating front-end development from back-end

Sun, 04 Jun 2017 00:00:00 +0000

It is not uncommon that when a project is initialized, engineering team starts to build front-end and back-end simultaneously. Sometimes, there are some dependencies with each other — UI-side needs data from server-side for validation, Server-side needs an interface for testing. However, we can not do nothing until another side’s ready. Below are two practices I want to share for keeping front-end development separate from back-end.

1. Host a local server

Before waiting for server-side being ready, we can communicate with back-end team to come to an agreement that how the APIs and data format looks like. With these APIs, we can easily create some fake data and host a local server for testing. I recommend JSONPlaceholder, a powerful tool for faking Online REST API. It supports all HTTP Methods, and after you POST a data to the server, the data will also be stored in your local machine, which looks like a real web services. Moreover, it also provide a remote service which allow you to test without hosting a local server. In the front-end code, it can be like this:

// Replace this URL when server-side is ready
const SERVER_URL = 'https://jsonplaceholder.typicode.com';
export function getUsers() {
   return fetch(`{SERVER_URL}/users`)
          .then(res => res.json());
}
...
// Use the data
getUsers()
.then((users) => {
   // render users to DOM
});

By doing this, you don’t need to change lots of code when the server-side is ready. Just replace the SERVER_URL, the real data will be shown correctly.

2. Leverage Promise

Sometimes, hosting a local server is not practical for sharing. For example, a Product Manager or Test team need to see the UI-side earlier, you can not expect the PM or test team to install a local server on their machine each by each. Also, it is not easy to host a fake server on the internal development machine which is shared by teams. Therefore, we can fake the data in our codes like this:

// const SERVER_URL = 'https://realhost';
export function getUsers() {
   // return fetch(`{SERVER_URL}/users`);
  
  // Fake data in the code
  return new Promise(resolve, reject) => {
    const users = [{
        uid: "1",
        first_name: "hector",
        last_name: "guo"
    },{
        uid: "2",
        first_name: "john",
        last_name: "lee"
    }]
    resolve(users);
   });
}
...
// Use the data
getUsers()
.then((users) => {
   // render users to DOM
});

In this way, we are leveraging Promise to transfer the sync pattern to async pattern. By doing this, we don’t need a local or remote server to run our UI. Just share a static html file with PMs or test team, they can see the result immediately. After the server-side is ready, all we need to do is just remove / comment the fake data code, and uncomment the fetch from server-side. If there are more practical practices you want to share, please don’t hesitate to comment.

Prototype for improving cooking process on Apple Watch

Wed, 17 May 2017 00:00:00 +0000

We designed a smartwatch prototype for improving cooking process. Its main purpose is to help Blue Apron attract more users.

Wireframe

Prototype

Slides

Slides Source

Architecture and Program Principles

Thu, 22 Sep 2016 00:00:00 +0000

APP (Architecture and Program Principles)

Recommended Books:

Clean Code
The Pragmatic Programmer

Architecture Section Preview

Loosely-Coupled System(SOA)

Challenges: how to define the Services and their interaction

Non-functional Requirements

Remote Interface (RESTful APIs)

Asynchronous Systems

Challenges:

need rethinking with an event-driven approach
cannot rely on remote services even more than before
Testing complicated

Reactive Concept

Stateless Decision Systems

Approach:

how to build decision system that can read to a dynamic state of the world
how to coordinate a collection of systems

Modern Architecture Concepts

Approach:

How to make the right tech and arch decisions for a given problems

Data Pipelines

Approach:

How to develop data-driven use cases

Coding Section Preview

Managing Technical Debt

Handling Logic Failures

Log , but how to prevent too much

Instrumenting for Verification

Approach: how to verify non-functional requirements

Unit and Regression Testing (Continuous ?)

Testing Asynchronous Code

Medical Device Marketplace

multi suppliers multi groups (with different hospitals ) negotiate online

Players:

hospitals
suppliers
manufactures
groups

Concept:

Contract (group, suppliers, negotiation)
Price Lists
Orders
Negotiation
Commitment
Historic Date (Read, Update, Delete )
Returns
Payment Terms

Action: CRUD

Behavior: Hospital <> Group

Negotiate Group, Suppliers, Items, Historic Date (optional, maybe first time)
Commitment Volumes, historical volumes
Volume, items, price when signing contract
volume, items, price when paying

Week 4

4. Error Handling, REST

bad request (get)
depending failure ()
internal error (login)
Bad code (global)

http status code

2xx
- 200
- 201
4xx (Client Side)
- 400
- 401
- 403
- 404
- 405
5xx (Error)
- 500
- 501

GET http://server/car/298

Response:

{
    statusCode: 404,
    errorCode: 1132, // (reserved not valid)
    errorMsg: 'Car is not a valid resource'
}

Table of error code & message:

Code	Message	Properties
1132	{} is not a resource

POST /user

Possible error: 
Invalid resource (url not exist)
Empty Body
Invalid Format (XML, JSON)
Invaild Attribute
Missing Required Attribute
Id should not be provided
Duplication Attribute
Attribute not unique (email address, etc.)
Invaild Attribute value (type error)

Instrumentaion

Rate limites (day, hour, month)
- log: count API calls by user/api key.
- check against quota/limit
Measure Performance (Response, load)
- timestamp
throttling
- check for total api call count
Usage Patterns
- logging
Logging -> Error
Documentation Errors

5. Persistence (database), API Version Management

6. Scale, Performance, Security

7. Async, Reactive programming, Data pipeline

Universities in United States

Mon, 30 Nov 2015 00:00:00 +0000

Using Mapbox to visualize the distribution of universities in United States, the data is from Linkedin University Rankings and offical admission sites of universities.

Data format is GeoJSON, you can modify and add other universities on it if you want.

Welcome to fork it on Github!

Ivy League

Linkedin Rank

Top for DEV
Top for DES
Hide

TOEFL

100+
90~100
80~90
0~80
No-Spec

Data Categories

Ivy League
Best graduate universities for software developers
Best graduate universities for designers
TOEFL minimum requirement

Should We Abandon GIF ?

Tue, 24 Nov 2015 00:00:00 +0000

Recently, I captured an interesting video and prepared to share with my friends. I wondered which way I should choose to share it online, uploading to Youtube, or just converting it into a GIF ? Given that gif is really common and more compatible for a variety of devices than video, so I upload it into Imgur, the most popular gif distributing platform. Unfortunately, after converting my video into gif, I found the gif format was even much larger than my video. It did astonish me. If gif’s size is larger than a video, why not use video ? Afterall, it can load faster and cost lower than gif.

I found the gif format was even much larger than my video.

Therefore, I start to search for the best practice in this case. I find that imgur’s website have replaced gif with video for a long time, which is called as GIFV, using HTML5 <video> to load animation images. The advantage of this technology is that a video can be compressed more than a gif does, and it runs more smooth than gif. Because it can be encoded with H264, H265 or VP9, which is an Advanced Video Coding. It sounds interesting. In comparison with gif, I am willing to see how the actual benefit of video is. Let’s convert my video into VP9 format that is the latest coding standard.

Install FFMPEG

Af first, we have to install the encoder of VP9 to finish our task. Here is the offical guide. But it is really hard to install because of lots of dependencies. And here is the easiest way I think to install all of them by using Homebrew.

brew install ffmpeg --with-libvpx

And if you don’t have installed Homebrew yet, here is the quick way:

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Convert video to VP9 format

I admit that there are lots of options in ffmpeg command. If you just want to see the result, here is the common use:

# Convert a.mp4 to output.webm without audio channel
ffmpeg -i a.mp4 -c:v libvpx-vp9 -threads 8 -speed 1 -tile-columns 6 -frame-parallel 1 -auto-alt-ref 1 -lag-in-frames 25 -an -strict experimental output.webm

-i a.mp4 means to get the source a.mp4
-c:v libvpx-vp9 means to encode video with vp9
-threads 8 -speed 1 -tile-columns 6 -frame-parallel 1 all these options are used to optimize efficiency of encoding and decoding
-an means to eliminate the audio channel (to eliminate video channel, you can use -vn)
-strict experimental means to use experimental encoder that has not been supported such as libopus

For more information about them, you can visit vp9-encoding-guide.

Comparison

After a few hours, I have successfully converted my videos to VP9 format. Here is the size comparison between VP9 video and gif.

Here is a comparison between VP9 format and H264 format:

You can see, the quality of video aren’t reduced even though the size of VP9 is 67% less than that of H264.

Summary

After viewing the result above, I think it is time to abandon GIF, even though it is really convenient to share on the web platform. Maybe you don’t notice that most of media websites (Twitter, Facebook, Imgur, gyfcat, etc.) have used video instead of gif already.

After this practice, the reason why I can still view a HD video on Youtube even in a poor speed may have been found by myself. 😊

iOS App - Decision Terminator

Fri, 13 Nov 2015 00:00:00 +0000

This is a mobile app to help people make a decision - just shake your phone and will get a random result. It is based on Google Polymer and Cordova, which can support most of mobile platforms. It is under development.

Demo

Scan the QR code below, experience Beta Version.

iOS and Android version are coming!

Red Packet Design

Sun, 25 Oct 2015 00:00:00 +0000

The monitor of my university class is going married. So some of my classmates prepared a gift for him.

In order to give him a surprise, I designed a red packet embed in avatars of our classmates who have donated money to our monitor. (If I just put our classmates’ names on it, it is not cool at all.) I believe that it will become a valuable memory of his whole life.

The Finished Product

The Design Draft

Principles of Design

Consistency
Alignment

Responsive Lists Layout - Three CSS solutions

Sun, 25 Oct 2015 00:00:00 +0000

Recently, I just need to make a lists layout to adapt for PC and mobile devices. Through viewing some design websites, I get three css solutions to make it.

Requirement:

Every item has to be aligned center and their width and height have to be equal
The layout can be auto wrapped according to the width of different devices

Three CSS Solutions:

1. Float

It is the most common solution, but many websites avoid to use them because of unstable height of content that might cause text overflow. But there is a tricky solution that can avoid this issue. We just need to use :after to add an extra blank content without float to make sure the height can be controlled. Here is the solution.

/*float layout*/
.float {
  max-width: 1200px;
  margin: 0 auto;
}
.float:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.float-item {
  float: left;
}

2. Inline-block

Inline-block is simple to add, but one of the shortages is that there will be an backspace between items. Given the extra margin between items, we cannot keep an ideal space between items, even though the extra space is not obvious.

/*inline-block*/
.inline-b {
  max-width:1200px;
  margin:0 auto;
}
.inline-b-item {
  display: inline-block;
}

3. Flexbox

Flexbox is a new feature of CSS3, and it makes the layout of pages more flexible. Given the complexity of this feature, no more descripion about it will be shown here. If you want to know more about it, please view CSS-Tricks.

/*Flexbox*/
.flex {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

Here is the demo of three solutions.

See the Pen Responsive List Layout (Flexbox vs Float vs Inline-Block) by Hector Guo (@hectorguo) on CodePen.

Summary

	Description	Compatibility	Reference
Float	Common use, adapted for lists layout with lots of items.	Any device	dribble
Inline-block	adapted for some cases that do not care much about the margin	IE8+
Flexbox	Different device, different exclusive design. More flexible solution. Emphasis on center alignment.	IE10+（IE10 partial support with prefix: `-ms-`）	CSS-tricks

CSS: Font Setting to Adapt for Multi Platforms

Thu, 17 Sep 2015 00:00:00 +0000

Apple just publish its new systems iOS 9 and OS X EI Capitan recently. With these new systems, a new kind of font are also published, which called San Francisco. It looks like more light and readable than Helvetica, so I decide to use it on my website. However, I realize that the declaration on my style is:

body {
  font-family: "Helvetica Neue",Helvetica,sans-serif;
}

With this style, you can not render this page in new font. I just search for the solution, and find a trick on Webkit site, you can just add -apple-system in front of other font declaration:

body {
  font-family: -apple-system,"Helvetica Neue",Helvetica,sans-serif;
}

With this generic family name, the browser will render web pages with the system default font automaticlly. However, this name just adapt for Apple browser or web view. If you want to use it in Chrome or another browser, it is suggested to do the following:

body {
  font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica,sans-serif;
}

It is said that:

The .SFNSDisplay-Regular is the private font name for the regular face of San Francisco in the current beta release (remember, it can change at any time!) The system generic family name doesn’t currently exist, but I’d encourage browser manufacturers to adopt this technique. It would be helpful for coders on all platforms.

Therefore, I suggest that we can also add some other family name to adapt for Windows and Android. The following is my final style:

body {
  font-family: system,-apple-system,"Helvetica Neue",Helvetica,"Lucida Grande","Open Sans","Microsoft YaHei",sans-serif;
}

"Open Sans" works for Android and "Microsoft YaHei" works for Windows. Even though it isn’t a perfect solution, it works fine in Windows, Android and Apple platform after I use my devices to check if it shows correctly.

BTW, I recommend a tool called Whatfont to help you identify what kind of font it is on a web page.

Reference

[1] I Left My System Fonts in San Francisco

[2] Using the System Font in Web Content