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

    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 n... Read More


  2. Prototype for improving cooking process on Apple Watch

    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 Read More


  3. Architecture and Program Principles

    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) Asynchron... Read More


  4. Universities in United States

    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! ... Read More


  5. Should We Abandon GIF ?

    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 ... Read More


  6. iOS App - Decision Terminator

    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 ... Read More


  7. Red Packet Design

    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 ... Read More


  8. Responsive Lists Layout - Three CSS solutions

    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 ... Read More


  9. CSS: Font Setting to Adapt for Multi Platforms

    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 m... Read More


  10. Use iPhone to build a Wiimote-style Controller

    Do you like playing motion-sensing games like this? Have you ever thought that it might be prohibitively expensive to play such a cool game? Actually, you can use your mobile phone to play just like that. Below is a demo. If you want to use your phone to play games like above, you c... Read More


  11. Left 4 Dead Level Design:HIT Campus

    This is a custom map for Left 4 Dead 2. I rebuild the department I ever lived in during my campus life. This campus maps is in progress. The final version will show an entire HIT campus in Left 4 Dead 2. Phase 1 - Complete construction Phase 2 - Adding Zombies Phase 3 - Building t... Read More


  12. iOS App - Filltime

    This is a Time Log App, used for curing procrastination. I often found myself having wasted much time on some trivial stuff, such as surfing Twitter, Weibo, or watching the same movies over and over again. So I decided to develop an application to log what I have done every hour, and this visual ... Read More


  13. How to detect File Type through HTML5

    Generally, a file’s type is identified by server side to check if this file is legal for storing. For instance, a cloud document editor can only allow users to import .doc/.docx/.pages files. However, only detecting the expanded-name is not enough, some of users can change the file expanded-name... Read More


  14. BA Methods Summaries (Part I) - Control variable method

    There was a tough issue about requirement analysising I ever met on one of supply management projects. It was mainly to address BOQ changing case when customers do not need the products any more. In the perspective of customers, when they don’t want some products any more, all they need to do is... Read More


  15. Uniforms Design

    This was desgined during the graduation season. When I looked at the logo of KFC, I though that this kind of style may be useful for our uniforms. So I though about a method which can translate the pictures of all my classmates to monochromatic avatars. Principles of Design Alignment - Edg... Read More


  16. Web App - Make Search Easier

    It is a web app developed by myself in Technology Innovation Competition. Purpose The purpose of the app is to recognize a Traffic Sign quickly by using mobile phones or PCs. I like go hiking and often enounter some weird traffic signs I don’t know. Given this situation, I decided to develop it... Read More


  17. Browser Interface Design

    Inspired by new generation of Browsers such as Safari and Chrome, I decided to desgin a new user interface of browsers to improve the expericence of surfing online. Then I found that the Maxthon Browser support more flexible custom on the interface than other browsers. So I decided to use it to r... Read More