| Tel: (+852) 5224 7740 | Email: ccm.rex17@gmail.com |
Gained fulltime and freelance experience in the below corporations.
Developed knowledge and skills in the below educational organizations.
Participated in the following projects in frontend web development career.
The following presents my skillset in the industry.
I experienced in the following platforms.
I practice the following concepts of modern frontend web frameworks during development.
Finite-state machine (FSM) is a design pattern applied in modern frontend web frameworks which provide a clear representation of a finite number of states with transitions between these states triggered by events or specific conditions.
The view updates automatically through data-binding when the state of data model changes so as to synchronize state and visual presentation. For instance, React hooks and Vue Reactivity APIs are variants of reactive state management systems.
State management consists of three parts:
Mastered Adobe Photoshop with rich experience in digital art. The following portraits representing myself and my friends.
Familiar with web animation which adds the dimension of time to the GUI of a web page in order to convey information organized by data, feedback, and aesthetic qualities to end-users through storytelling.
Trained by Japanese traditional animation education and learned animation theory and practical skills which can transfer to web animation development.
Developed scroll event-driven animations for Midea Eureka and Heybike product pages.
Storyboard is a blueprint of a story or concept that is used to plan and organize the sequence of actions in an animation or storytelling flow in pre-production.
An animation can be breakdown into frames including keyframes, breakdowns, and in-betweens.
Each frame of an action should be number in the top-right corner on the animation paper. We should always circle keyframe numbers and put parenthesis around breakdown number.
With the frames numbered, we should create an action chart with a direction from left (first key) to right (next key) on the first keyframe. This chart indicates how many in-betweens are needed and how they will be spaced between two keyframes.
The more in-betweens there are in an animation, the slower and smoother the action will appear.
We can utilize skeletons in both 2D and 3D animations while skeleton is a structure for animating articulate and hierarchical actions in order to simulate the actions of physical bodies or machines.
Thus, the child bones linked to another bone will follow their parent once the parent is rotated around the determined pivot points known as joints.
Skeletal structures can represent by a tree data structure where it has single root joint, several parent joints, and several child joints.
The action of child bone follows its parent is called overlapping action and this motion relate to or is the result of the main action.
The CSS box model is essentially a box wraps around each HTML element where a box consists of the below:
Implemented SEO strategies such as semantic HTML, metadata, JSON-LD, heading hierarchy, and HTML attributes.
Asynchronous JavaScript and XML (AJAX) is a set of web development techniques that allows client-side scripts send requests to the web server programs in an asynchronous format without reloading the entire page.
Web server response was in XML format in the early days of AJAX, but most modern web services use JSON format for data interchange.
XML and JSON are used for data interchange in client-server communication.
In modern web development, JSON is preferred whenever the additional features implemented by XML are deemed to be unnecessary.
Extensible Markup Language (XML) is a markup language which represents data as tag-based tree structure in data interchange.
Unlike JSON, XML uses namespaces to distinguish between properties that are different but share the same name.
While JSON limited data types to basic types, XML supports many complex data types.
XML has to be parsed with an XML parser.
JavaScript Object Notation (JSON) is the most popular interchange language in modern web development since JSON is directly understandable to JavaScript on the grounds of vast majority of JavaScript popularity.
JSON is a lightweight interchange format which is parsed quicker than XML with less computational resource usage.
JSON uses a map with key-value pairs while it can use array in value.
Unlike XML, JSON can be directly parsed by a standard JavaScript function.
Web Components refers to a set of web native APIs which allows web developers to create reusable modular custom elements.
Custom elements are HTML element which allow web developers to define their own properties, behaviors, and styles.
A custom element is implemented as a class that extends the base class HTMLElement or standard HTML elements such as HTMLParagraphElement) and img (HTMLImageElement).
After defining the class, we must register the custom element to the current page and start using it in our code.
The Custom Elements API provides lifecycle callbacks including connectedCallback and disconnectedCallback that enable us to register and unregister events.
The CustomStateSet and :state() are mechanisms for defining and managing custom state within custom elements based on state management.
Shadow DOM serves for encapsulation of internal DOM structure and style rules to prevent style leakage from the light DOM.
Slots only exist in Shadow DOM and act as placeholder to get content from Light DOM.
It allows us to build web components modularly while we can modify component instances to hold different components so as to offer more flexibility and versatility.
In shadow DOM, slot element with attribute name="X" defines an insertion point to render elements with attribute slot="X".
For rendering purposes for each slot element with attribute name="X" in Shadow DOM, the browser looks for slot="X" with the same name in the light DOM.
The slot attribute is only valid for top-level children of the shadow host while the grandchildren with this attribute are ignored.
The multiple elements in light DOM are appended into the slot one after another if they have the same name.
A template is a declarative element to define a reusable snippet of HTML that can be cloned and inserted in the document by script while the browser ignores templates when loading DOM content.
We can create multiple instances of the same HTML with dynamic content without having to rewrite values inside the code by using standard DOM manipulation APIs.
Each template element has an associated DocumentFragment object as template content.
Rasterizers like WebGL and DirectX convert 3D vector primitives included triangles (polygons), points (vertices), and lines (edges) into 2D pixel-based graphics on the screen.
Created basic scrolling event-driven 3D transformation animation including rotation and translation of 3D box object for CLEARgo oversea expansion page using Three.js library on WebGL environment.
Developed Chrismas gift delivery mini game implemented AABB collision detection using DirectX in Higher Diploma course
User research is to use various methods to understand users' pain points consist of desires, behaviors, habits, motivations, and environments in order to create useful, usable, and delightful digital products.
Practiced user stories in Movie Web Application project.
We should visualize state changes through visual cues and animations to draw attention and explain to end-users about their actions and the system's responses.
For progress of a task, we should provide the degree of completion to indicate the current status and expected completion time.
Storytelling uses spatial and temporal signs to convey experience consists of narrative, emotion and aesthetic qualities in imagination of a user.
One of the strength strategies is to use storytelling to take a non-tangible concept and making it relatable through concrete ideas.
Branding refers to a specific style of fonts, layouts, animation, interactions, and visual elements used in the presentation of information system by organizations.
Unified styles enable users to associate a particular organization with a professional brand image represented by its assaesthetic qualities, timing of animations, and usability of interactions.
A/B testing is a quantitative research method comparing two or more variants of a design to determine which one performs better in terms of conversion rate, click-through rate (CTR), bounce rate, retention rate, return on investment (ROI), and average revenue per user (ARPU).
This continous design improvement approach helps design and marketing teams make data-driven decisions to optimize user experience and reach business goals.
Learned Unified Modeling Language (UML) such as class diagram, use case diagram, and activity diagram.
Learned fundamental knowledge and skills of design, art, and traditional animation, and passed examination of elementary drawing held by amps, a duly constituted animation school under Cool Japan Policy introduced by Japanese government.
Experienced in pre-production, production, and post-production of freelance design and digital painting commissions.
In semiotics, all relations on canvas are paradigmatic and syntagmatic relations where a design no matter user interface, animation, or interaction is constructed of paradigmatic axis and syntagmatic axis.
Visual metaphor is the ability of image to convey intellectual and emotional meanings, mood, tone, atmosphere, and subtext in addition to their straightforward reality.
Every visual elements carry an implied meaning that can be a powerful storytelling tool.
For instance, the colour scheme of a design can be a visual metaphor for the brand's identity and values.
A mood board is a visual tool that gathers images, colours and textures that represent the desired aesthetic and atmosphere of a project. Mood boards are prototypes of colour schemes and entire visual identity.
In general design, a effective colour scheme is applying the golden ratio: 60:30:10. Under this proportion, we can divide the colour schema of a design as primary colour, secondary colour, and accent colours.
Kept practicing and improving my artistic skills over the years.
Developed basic concepts of CRUD, salting, and injections by PHP in Internet Programming course in Higher Diploma programme.
Built-up a login and signup system by using PHP and MySQL on XAMPP environment.
Create, read, update, and delete (CRUD) are the basic operations of data manipulation.
Salting is a security technique used to enhance password hashing by adding a random value called salt. This makes it more difficult for attackers to use precomputed tables such as rainbow tables to crack passwords.
In this process, the salt is concatenated and processed with a cryptographic hashing algorithm, and the output is stored along with the salt in the database.
rexChan123
(Password)
rexChan123rteZb
(Password + Salt)
4b6f9b7e5e2a6b4e6e5b1d32b9b96b223b6f2c5b5dbb5d3e1ff9d3d06b6a3b5a
(Hashed Password + Salt)
Injection attacks like SQL injection occur when an attacker is able to inject malicious code into a query or command in order to exfiltrate data or damage storage.
To prevent injection attacks, developers should apply data validation and verification techniques from pre-processing to post-processing.
SQL injection attack consists of injection of malicious SQL commands via input data from the client to the application that are later passed to an instance of a database for execution and aim to affect the execution of predefined SQL commands.
The primary form of SQL injection consists of direct insertion of code into user-input variables which are concatenated with SQL commands and executed.
A less direct attack injects malicious code into strings are subsequently concatenated into a dynamic SQL commands, the malicious code is then executed.
A successful SQL injection exploit can access sensitive data in the database, modify database data, execute administrative operations within the database, for instance, shutdown the DBMS, recover the content of a given file present on the DBMS file system and in some cases issue commands to the operating system.
Dynamic websites are more vulnerable to a type of code injection called Cross-Site Scripting (XSS).
In this form of injection attack, the attackers introduce improper scripts into the web browsers.
This technique often used is to inject JavaScript, HTML or any other types of codes that web browsers may execute.
Once the injection is successfully performed, hackers can carry out a variety of malicious attacks including account hijacking, changing of user settings, cookie theft and poisoning, or false advertising.
Normalization is a systematic approach of decomposing tables to eliminate data redundancy. A flat file database store all the data in one table which led to anomalies.
Data redundancy refers to repetition of data stored in different locations. Storing same data redundantly in more than one place within a database can lead to anomalies.
A data dictionary is a collection of table structures which explains an unfamiliar dataset and clarifies the meanings of various data terms to developers and users by listing codes, data types, lengths, examples, and descriptions of the fields.
To against SQL injection, ORM is a backend approach that provides a layer of abstraction that helps prevent SQL injection attacks by automatically escaping user input and generating safe SQL queries.
An object-relational mapping (ORM), also referred to as object-relational manager, is a process of connecting objects in an object-oriented programming language to tables in an underlying relational database.
When building backends, developers define objects as a SQL-free data representation in a modular application to query and manipulate data in databases using the same logic as the backend code.
However, this approach slows down CRUD performance because of the overhead of abstraction.
