A Software Engineer's Blog

Hi, I’m Xinrui

10 years experiences software engineer focus on Frontend now and working for Amazon AWS in Seattle WA

SDE & FEE

fullstackguy@gmail.com

Seattle WA

Download my resume:

DOWNLOAD RESUME CONTACT ME

Over 10 years of experience

My Experience

June 2020 - Present

Front End Engineer II

Lead Frontend projects in AWS IAM and AWS T&C

Amazon - Seattle, WA

July 2019 - May 2020

SDE II

Build Expedia Insurance Widget

Expedia Group - Seattle, WA

Sep 2018 - Mar 2019

Senior Member of Technical Staff

OCI Console Development

Oracle - Seattle, WA

July 2017 - Sep 2018

Software Engineer / Senior Associate

Built Capital One Investing Tools

Capital One - McLean, VA

Oct 2015 - July 2017

Software Engineer

AOL On Team, built App Generator

AOL - Sterling, VA

June 2014 - Oct 2015

Web Developer

Build AP, SAT tests registration system

College Board - Reston, VA

Master and Bachelor, with a PhD Offer

Education

2012 - 2014

Master of Science in Computer Science

George Washington University

Washington DC

South-Central Minzu University For Nationalities

2008 - 2012

BS - Computer Science

South-Central Minzu University For Nationalities

Hubei Wuhan, China

10+ Years of Experience

My Resume

2008 - 2014

Education Quality

MS in Computer Science

George Washington University (2012 - 2014)

3.90/4

The training provided by universities in order to prepare me to work in various sectors of the computer science area.

BS in Computer Science

South-Central Minzu University For Nationalities (2008 - 2012)

4.75/5

I get my foundation of CS built here, I learn from the lower level operation system, network, Assembly language to Database, Java and data structure.

2014 - Present

Job Experience

Front End Engineer II

AWS IAM Team, AWS ILT Team, AWS PxT - (2020 - Present)

SEATTLE

Using React, Redux, React Query, Webpack and TypeScript to build AWS IAM Console, integrate with backend APIs, develop a widget system that can plug and play with other AWS Console.

SDE II

Expedia Insurance Team - (2019 - 2020)

SEATTLE

Re-design the Expedia checkout insurance module experience, re-write the jQuery based module to React widgets.

Senior Member of Technical Staff

Oracle Cloud Infrastructure - (2018 - 2019)

SEATTLE

The India economy has grown strongly over recent years, having transformed itself from a producer and innovation-based economy.

2014 - Present

Job Projects

App Generator

AOL On Team - (2015 - 2017)

Sterling VA

App Generator is an all-in-one platform designed for businesses or individuals lacking a development team but wishing to create their own video app. It utilizes technologies such as Angular, Java, and Swift to offer a user-friendly interface where users can select their desired video content and target platform. Ultimately, it generates a customizable app tailored to their needs. Additionally, the platform allows for on-the-fly updates to app content and themes, eliminating the need for frequent app version upgrades.

Re-write IAM Console

AWS IAM Team - (2020 - 2021)

Seattle WA

The AWS IAM Console, ranking as the third most trafficked service on the AWS platform, currently operates on an outdated framework that incorporates a blend of technologies like AngularJS 1.6, Backbone, and Ruby, making it challenging to read and maintain. We are embarking on a complete overhaul of the entire IAM console to enhance usability and maintainability. By adopting modern technologies such as React, Redux, TypeScript, React Query, and REST API, we aim to streamline the architecture while preserving the original user experience.

AWS re:Invent - Access Analyzer

AWS IAM Team

Seattle WA

I spearheaded the frontend segment of the re:Invent project titled "Least Privilege Policy Generator." This tool is designed to analyze a policy over a certain period, identify the services accessed, and refine the policy to limit its scope to only necessary permissions. Consequently, it mitigates the risk associated with granting overly broad policies to unintended recipients.

2014 - Present

Personal Projects

Rescue Diver

PADI Certified Rescue Diver

Bonarie & Mexico

I have successfully completed scuba diving training and achieved certifications in various disciplines, including PADI Open Water, Advanced Open Water, Enriched Air Diver, and EFR-Primary Care (CPR) & Secondary Care. Additionally, I am an SSI-certified Freediver.

Web Developer and Instructor

always on the road

USA

I have developed numerous websites, including e-commerce platforms for companies such as Biovive, Reflexgroup, and WolfTech Studio, showcasing this very site as an example of my work. Leveraging my extensive experience, I also mentor individuals aspiring to learn website development. My expertise spans across all web technologies, from historical methods like modifying HTML/CSS for IE6 compatibility, crafting class-like JavaScript structures before the advent of ES6 and TypeScript, to implementing functionalities traditionally handled by modern frameworks like React and Bootstrap using plain JavaScript/CSS. Furthermore, I am skilled in creating responsive designs with pure CSS, alongside other now less commonly discussed techniques.

Game Developer

Personal projects for fun

AT HOME

I Like many others, I enjoy playing video games, which inspired me to learn how to create them myself. I self-taught various game engines, including Phaser, Unity, and Three.js, and have used these tools to develop games such as Flappy Bird and Ping-Pong, among others.

Script Writter

When I need robots do something for me.

Cypress

I write scripts to automate some tasks, mostly using Cypress Integration Test framework.

Visit my blog and keep your feedback

November 6, 2024

JavaScript中apply, bind, call 的区别

apply、bind 和 call 是 JavaScript 中的三个方法，都是用来控制函数的 this 指向的。它们有相似之处，但在传递参数和调用方式上有一些区别。我们可以逐一看看它们的定义和使用场景。

1. `call` 方法

语法：func.call(thisArg, arg1, arg2, ...)

作用：直接调用一个函数，并显式指定 this 的指向。
参数：thisArg 是我们希望 this 指向的对象，后面的 arg1, arg2, ... 是传递给函数的参数。
特点：立即执行函数。

示例

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Alice" };

greet.call(person, "Hello", "!"); // 输出: "Hello, Alice!"

在这里，call 方法将 this 设置为 person 对象，并将 "Hello" 和 "!" 作为参数传递给 greet 函数。

2. `apply` 方法

语法：func.apply(thisArg, [argsArray])

作用：与 call 类似，也用来指定 this 的指向并调用函数。
参数：thisArg 是 this 的指向，argsArray 是一个数组，表示传递给函数的参数。
特点：立即执行函数，但参数以数组形式传递。

示例

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Alice" };

greet.apply(person, ["Hello", "!"]); // 输出: "Hello, Alice!"

在这里，apply 的作用与 call 类似，但传递参数的方式不同。apply 使用一个数组来传递参数，而 call 使用的是一组独立的参数。

3. `bind` 方法

语法：func.bind(thisArg, arg1, arg2, ...)

作用：返回一个新的函数，并将 this 永久绑定为 thisArg。
参数：thisArg 是要绑定的 this 指向，arg1, arg2, ... 是可以预设的参数。
特点：不会立即调用函数，而是返回一个绑定了 this 的新函数，可供后续调用。

示例

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Alice" };

const boundGreet = greet.bind(person, "Hello");
boundGreet("!"); // 输出: "Hello, Alice!"

在这里，bind 创建了一个新函数 boundGreet，这个函数的 this 永远绑定为 person，并预设了第一个参数 "Hello"。当我们调用 boundGreet("!") 时，它会使用 this.name 和预设的 "Hello"，最终输出 "Hello, Alice!"。

主要区别总结

方法	立即调用	`this` 绑定方式	参数传递方式
`call`	是	直接设置并调用	独立传入参数
`apply`	是	直接设置并调用	以数组形式传入参数
`bind`	否	返回一个绑定了 `this` 的函数	可预设参数，后续调用时继续传参

使用场景总结

call：适用于需要立即调用函数，并且参数数量是已知、固定的情况。
apply：适用于需要立即调用函数，且参数数量动态、以数组形式传递的情况。比如在函数调用参数不确定时，可以通过 apply 使用数组传参。
bind：适用于需要创建一个函数并永久绑定 this，可以在稍后调用的情况。常见的例子是在事件回调、延迟函数中使用 bind 来确保 this 指向正确。

October 30, 2024

Unlocking the Lock: Solving the “Open the Lock” Problem with BFS

Today, we’re diving into a classic interview problem, Open the Lock. This problem requires us to use Breadth-First Search (BFS) to find the shortest path by simulating a lock mechanism with four wheels. Let’s walk through the problem step-by-step, analyze the solution, and cover key details in the code.

Problem Overview

The problem describes a lock with four rotating wheels, each numbered from 0 to 9. The lock starts at “0000”, and each wheel can be rotated up or down to the next number. For instance, “0” can rotate to “1” or “9”.

We have a list of deadend combinations. If we reach one of these, the lock stops, and we can’t proceed further from that position. Given these constraints, we need to find the minimum number of moves to turn the lock from “0000” to a target combination target. If it’s impossible, we return -1.

Approach

Since we’re trying to find the shortest path to the target, this problem is a perfect candidate for Breadth-First Search (BFS). BFS explores all paths level by level, ensuring we reach the target in the fewest moves possible.

Step-by-Step Solution Outline:

Initialization: Store all deadends in a Set for quick lookup.
BFS: Begin from “0000” and explore every possible combination by turning each wheel up or down.
Track Moves: Use a queue to store each combination and the current move count, increasing it by one each level.

Code Implementation with Comments

/**
 * @param {string[]} deadends - List of dead-end combinations
 * @param {string} target - Target combination
 * @return {number} - Minimum moves to reach target from "0000", or -1 if impossible
 */
var openLock = function(deadends, target) {
    // Initialize a Set for deadends for quick lookup
    const seen = new Set(deadends);
    
    // Handle edge cases: if "0000" or target is in deadends, we can't proceed
    if (seen.has(target) || seen.has('0000')) return -1;
    
    // If the start is already the target, no moves are needed
    if (target === '0000') return 0;
    
    // Initialize BFS queue and moves counter
    const queue = ["0000"];
    seen.add("0000"); // Mark "0000" as visited
    let steps = 0;

    // Main BFS loop
    while (queue.length > 0) {
        // Number of nodes in the current level
        let size = queue.length;
        
        // Process each node in the current level
        while (size > 0) {
            const current = queue.shift(); // Remove the first element in queue
            
            // If we've reached the target, return the steps taken
            if (current === target) return steps;
            
            // Generate all possible next moves and add to queue
            const comb = generateComb(current);
            for (const next of comb) {
                if (!seen.has(next)) { // Only add unvisited nodes
                    queue.push(next);  // Add new combination to queue
                    seen.add(next);     // Mark new combination as visited
                }
            }
            size--; // Decrement level size
        }
        steps++; // Move to the next level (increment moves)
    }
    
    // If BFS completes without finding target, return -1
    return -1;
};

/**
 * generateComb - Generates all possible next moves for a given lock state
 * @param {string} input - Current lock state
 * @return {string[]} - Returns all possible next moves
 */
var generateComb = function(input) {
    const combinations = [];
    
    // Loop through each of the four wheels
    for (let i = 0; i < 4; i++) {
        // Get the current digit of the wheel
        const digit = parseInt(input[i]);
        
        // Roll the digit up by one (wrap around from 9 to 0)
        const up = input.slice(0, i) + ((digit + 1) % 10) + input.slice(i + 1);
        combinations.push(up); // Add the new combination to the result array
        
        // Roll the digit down by one (wrap around from 0 to 9)
        const down = input.slice(0, i) + ((digit - 1 + 10) % 10) + input.slice(i + 1);
        combinations.push(down); // Add the new combination to the result array
    }
    
    return combinations;
};

Detailed Code Explanation

Main Function openLock:
- The seen set stores all visited states to prevent revisiting deadends and previous combinations.
- We initialize a queue to store each combination and mark “0000” as visited to prevent reprocessing.
- The BFS loop processes nodes level by level, allowing us to find the shortest path to target.
Combination Generator generateComb:
- For each digit in the 4-digit lock, we generate two new states: one by rolling the digit up and one by rolling it down.
- Each new combination is added to the result array, which is then returned to the BFS loop for further processing.
Core Logic:
- BFS systematically expands from the start state, checking all possible next moves.
- The algorithm uses steps to count levels, ensuring that when we reach target, it’s in the minimum moves.
- If BFS finishes without finding target, we return -1, as it’s impossible to reach.

Example Walkthrough

Consider the case where deadends = ["0201","0101","0102","1212","2002"] and target = "0202":

Initial State: queue = ["0000"], steps = 0
First Level (step = 1): From “0000”, we expand to “1000”, “9000”, “0100”, “0900”… adding all valid moves to the queue.
Subsequent Levels: We keep expanding outward, avoiding deadends and marking visited states.
Final Steps: Eventually, we reach “0202” in the minimum moves and return the step count.

Conclusion

This problem is an excellent example of BFS’s utility in finding shortest paths. Key takeaways include:

Using BFS: For shortest path problems where each move has equal weight, BFS provides an efficient approach.
Tracking Visited States: By storing visited states, we avoid deadends and reduce redundant processing.
Generating Moves: By iterating through each digit and generating moves, we simulate all possible paths from a given state.

By practicing with problems like this, you’ll improve your understanding of BFS and how to apply it to real-world scenarios!

Contact

Contact With Me

Xinrui Ma

Software Engineer

I am available for freelance work, or you have a great job opportunity. Connect with me via email below. The contact form I would advise you not to use that due to connection issue.

Email: fullstackguy@gmail.com

Hi, I’m Xinrui

My Experience

Front End Engineer II

Lead Frontend projects in AWS IAM and AWS T&C

SDE II

Build Expedia Insurance Widget

Senior Member of Technical Staff

OCI Console Development

Software Engineer / Senior Associate

Built Capital One Investing Tools

Software Engineer

AOL On Team, built App Generator

Web Developer

Build AP, SAT tests registration system

Education

Master of Science in Computer Science

George Washington University

BS - Computer Science

South-Central Minzu University For Nationalities

My Resume

Education Quality

MS in Computer Science

BS in Computer Science

Job Experience

Front End Engineer II

SDE II

Senior Member of Technical Staff

Life Skills

Scuba Diving

Basketball

Saltwater fish aquarium

Cooking Chinese food

Piano

Development Skill

React

NodeJS

JAVASCRIPT

AWS

Java

Job Projects

App Generator

Re-write IAM Console

AWS re:Invent - Access Analyzer

Personal Projects

Rescue Diver

Web Developer and Instructor

Game Developer

Script Writter

JavaScript中apply, bind, call 的区别

Unlocking the Lock: Solving the “Open the Lock” Problem with BFS

简单易懂的TypeScript哈希表教程

Contact With Me

Xinrui Ma