Teamcode: Online Judge Collaborative System

Summary Implemented a web-based collaborative code editor which supports multiple users editing simultaneously (ACE,, Redis) Designed and developed a single-page web application for coding problems (Angular2, Node.js, MongoDB) Built a user-code executor service which can build and execute user’s code (Flask, Docker) Refactored and improved system throughput by decoupling services using RESTful API and... Continue Reading →

Shadow DOM

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree. (You can only see it when rendering) Shadow DOM encapsulates DOM and CSS in a web component, for example, <input type="range">, separating itself from the... Continue Reading →

CSS3 Animation – Bounced Button

  animation-name Used to bind the animation to an HTML element @keyframes Rule Use `from to` or `percentage` animation-duration The duration of the animation, default value is 0 animation-delay Specify a delay for the start of an animation animation-iteration-count Specify the number of times an animation should run infinite or a number animation-direction alternate or... Continue Reading →


Typescript is a superset of Javascript which primarily provides optional static typing, classes and interfaces, below are several features of using TypeScript in Angular2: Classes Modules - import use ES6 syntax Decorators - separate concerns, attach metadata for classes, like using @Component metadata to class Closure compatible Dependency injection - inject services in component constructor... Continue Reading →

CSS3 Position

static Default value Position according to the normal flow of the page relative Position relative to its normal position fixed Position relative to the viewport, which means it always stays in the same place even if the page is scrolled. absolution Position relative to the nearest *positioned ancestor (ancestor could be fixed, absolute or relative)... Continue Reading →

AngularJS watch

$ function(watchExp, listener, objectEquality, prettyPrintExpression) watchExp: The expression being watched. It can be a function or a string,it is evaluated at every digest cycle. listener: A callback, fired when the watch is first set, and then each time that during the digest cycle that a change for watchExp's value is detected. objectEquality: true for deep... Continue Reading →

Blog at

Up ↑