DEV Community: Mario Ruci

The effective Pull Request checklist

Mario Ruci — Sat, 09 Nov 2024 09:42:01 +0000

Pull requests are an integral part of the software engineering process. At some point, you will either need to open your first pull request or review one submitted by a colleague. To help you navigate this essential aspect of development effectively, here’s a concise checklist or guide that can assist you in creating impactful pull requests while minimizing unnecessary feedback.

Opening a PR

When you're ready to submit a pull request, follow these steps to ensure clarity and completeness:

Preparation

🔘 Branching: Ensure your changes are on a separate feature branch.
🔘 Commit Changes: Make sure your commits are well-organized and meaningful.
🔘 Check Files: Review which files are included in the commit to avoid unnecessary changes.

Documentation

🔘 PR Description: Write a clear and concise description of what the PR does, including:
- Purpose of the changes
- Any relevant ticket or issue numbers
- Key features or modifications
🔘 Test Plan: Outline how you tested your changes and any additional testing that may be required.
🔘 Migration Notes: If applicable, document any database migrations or breaking changes.

Quality Checks

Before opening the PR, ensure the following:

🔘 Formatting: Code is properly formatted according to project standards.
🔘 Type Checking: Run type checks (if applicable) to catch any type-related errors.
🔘 Testing: Ensure all relevant tests pass and consider adding new tests for new functionality.
🔘 Documentation Updates: Update any relevant documentation, such as READMEs or inline comments.

Reviewing a PR

When reviewing someone else's pull request, follow these steps to provide constructive feedback:

Initial Assessment

🔘 Read the PR Description: Understand what the author intended with the changes and how it relates to the associated ticket.
🔘 Mental Model: Formulate an idea of what you expect the changes to accomplish based on the description.
🔘 Diff Comparison: Mentally compare the changes in the PR with your expectations.

Code Quality Evaluation

🔘 Functionality Check:
- Verify that the code meets the requirements outlined in the ticket.
- Consider edge cases and potential side effects of the changes.
🔘 Code Style:
- Review for consistency in code style and formatting.
- Evaluate naming conventions for clarity and coherence.
🔘 Duplication and Complexity:
- Look for opportunities to reduce code duplication (DRY principle).
- Identify overly complex or coupled code that could be simplified.

Testing Review

🔘 Test Coverage:
- Ensure that unit tests adequately cover new functionality.
- Review integration and end-to-end tests if applicable.
🔘 Test Plan Evaluation:
- Assess whether the outlined test plan effectively covers all scenarios.

Final Checks

🔘 Documentation Review:
- Ensure that code is adequately commented where necessary.
- Check that any relevant documentation (e.g., READMEs) is updated.
🔘 Constructive Feedback:
- Provide clear, actionable feedback on areas for improvement.
- Engage in respectful discussions with the author if there are disagreements or clarifications needed.
🔘 Approval Process:
- Confirm that all your comments have been addressed before approving the PR.
- Conduct a final review to catch any missed issues before merging.

Setting up Redux on a React application.

Mario Ruci — Sat, 02 Sep 2023 17:05:35 +0000

Setting up Redux on a react application.

❓ What is Redux?

Redux is a state management library that helps you manage the state of your application in a predictable way. It follows the principles of a unidirectional data flow and immutability, making it easier to understand and debug your application's behavior. Redux is not tied to React but is commonly used with it to manage the application's global state.

Installation (On an existing project)

To get started with Redux, you'll need to install both the Redux library and the React bindings for Redux (react-redux):

// On your terminal run
npm install redux react-redux

Project Folder Structure

├── src/
│   ├── components/
│   │   ├── UserProfile.js
│   │   └── ...
│   │
│   ├── state/
│   │   ├── actions/
│   │   │   ├── index.js
│   │   │   └── userActions.js
│   │   │   └── cartActions.js
│   │   │   └── ...
│   │   ├── reducers/
│   │   │   ├── index.js
│   │   │   └── userReducer.js
│   │   │   └── cartReducer.js
│   │   │   └── ...
│   │   └── store.js
│   │
│   ├── App.js
│   ├── index.js
│   └── ...
│
├── package.json
├── package-lock.json
├── README.md
└── ...

Reducers

In Redux, reducers specify how your application's state changes in response to actions. Begin by creating individual reducers for different parts of your application's state. Here's an example of two reducers:

// src/state/reducers/userReducer.js
const userReducer = (state = {}, action) => {
  switch (action.type) {
    // Handle user-related actions here
    default:
      return state;
  }
};

export default userReducer;

// src/state/reducers/cartReducer.js

const cartReducer = (state = [], action) => {
  switch (action.type) {
    // Handle shopping cart actions here
    default:
      return state;
  }
};

export default cartReducer;

Combine Reducers

The setup follows a combined reducers structure to mirror a more realistic production environment with multiple reducers and actions based on sections of your application. To manage these individual reducers in your Redux store, create a root reducer by using Redux's combineReducers function:

// src/state/reducers/index.js

import { combineReducers } from 'redux';
import userReducer from './userReducer';
import cartReducer from './cartReducer';

const rootReducer = combineReducers({
  user: userReducer,
  cart: cartReducer,
  // Add more reducers here if needed
});

export default rootReducer;

Actions

Actions are payloads of information that send data from your application to your store. Define action types and action creators to describe what should happen in your application.

// src/state/actions/userActions.js

export const updateUser = (userData) => ({
  type: 'UPDATE_USER',
  payload: userData,
});

// src/state/actions/cartActions.js

export const addToCart = (item) => ({
  type: 'ADD_TO_CART',
  payload: item,
});

Store

In your store.js (or equivalent) file, create the Redux store using the combined root reducer and set up Redux DevTools for easier debugging:

// src/state/store.js

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Optional
);

export default store;

Configure the Redux Store and Wrap the Application

In your store.js (or equivalent) file, create the Redux store using the combined root reducer and set up Redux DevTools for easier debugging:

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './state/store'; // Import your Redux store
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Use in your components

Finally you can start using and manipulating the state in your components.

// src/components/UserProfile.js

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateUser } from '../redux/actions/userActions'; // Import your Redux action

const UserProfile = () => {
  // Use useSelector to access the user state from Redux
  const user = useSelector((state) => state.user);

  // Use useDispatch to get the dispatch function
  const dispatch = useDispatch();

  const [newName, setNewName] = useState('');

  const handleNameChange = (event) => {
    setNewName(event.target.value);
  };

  const handleUpdateUser = () => {
    // Dispatch the updateUser action to update the user state in Redux
    dispatch(updateUser({ name: newName }));
    setNewName('');
  };

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <div>
        <input
          type="text"
          placeholder="Enter new name"
          value={newName}
          onChange={handleNameChange}
        />
        <button onClick={handleUpdateUser}>Update Name</button>
      </div>
    </div>
  );
};

export default UserProfile;

Exploring Object-Oriented Programming Concepts with Diagrams

Mario Ruci — Mon, 24 Apr 2023 07:26:45 +0000

Guide to LeetCode: A Personal Guide to the Most Common and Useful Patterns for Solving Algorithm Questions

Mario Ruci — Thu, 23 Feb 2023 19:26:47 +0000

Are you tired of struggling with algorithm questions on LeetCode? As someone (with 5+ years of experience) who has started practicing and studying these problems, I can relate to the frustration of not knowing where to start or how to approach a particularly tricky question. After much trial and error, I have come up with a personal guide to the most common and useful patterns for solving algorithm questions, which I hope can help others navigate this challenging terrain.

For each pattern I have listed 10 LeetCode questions to practice on and the list is sorted by learning curve.

Brute Force - Beginner

Start simple. Try all possible solutions and check if they work.

Practice:

Two Sum: https://leetcode.com/problems/two-sum/
Reverse Integer: https://leetcode.com/problems/reverse-integer/
Palindrome Number: https://leetcode.com/problems/palindrome-number/
Climbing Stairs: https://leetcode.com/problems/climbing-stairs/
Valid Parentheses: https://leetcode.com/problems/valid-parentheses/
Roman to Integer: https://leetcode.com/problems/roman-to-integer/
Remove Duplicates from Sorted Array: https://leetcode.com/problems/remove-duplicates-from-sorted-array/
Plus One: https://leetcode.com/problems/plus-one/
Merge Two Sorted Lists: https://leetcode.com/problems/merge-two-sorted-lists/
Maximum Subarray: https://leetcode.com/problems/maximum-subarray/

2. Greedy - Beginner

Make the locally optimal choice at each step and hope that it leads to a global optimum solution.

Practice:

Jump Game: https://leetcode.com/problems/jump-game/
Best Time to Buy and Sell Stock: https://leetcode.com/problems/best-time-to-buy-and-sell-stock/
Gas Station: https://leetcode.com/problems/gas-station/
Minimum Number of Arrows to Burst Balloons: https://leetcode.com/problems/minimum-number-of-arrows-to-burst-balloons/
Non-overlapping Intervals: https://leetcode.com/problems/non-overlapping-intervals/
Assign Cookies: https://leetcode.com/problems/assign-cookies/
Jump Game II: https://leetcode.com/problems/jump-game-ii/
Lemonade Change: https://leetcode.com/problems/lemonade-change/
Queue Reconstruction by Height: https://leetcode.com/problems/queue-reconstruction-by-height/
Candy: https://leetcode.com/problems/candy/

3. Two-Pointers - Beginner

Use two pointers to traverse an array or a linked list simultaneously.

Practice:

Remove Duplicates from Sorted Array: https://leetcode.com/problems/remove-duplicates-from-sorted-array/
Container With Most Water: https://leetcode.com/problems/container-with-most-water/
Trapping Rain Water: https://leetcode.com/problems/trapping-rain-water/
Merge Two Sorted Lists: https://leetcode.com/problems/merge-two-sorted-lists/
Remove Element: https://leetcode.com/problems/remove-element/
Squares of a Sorted Array: https://leetcode.com/problems/squares-of-a-sorted-array/
3Sum: https://leetcode.com/problems/3sum/
Backspace String Compare: https://leetcode.com/problems/backspace-string-compare/
Valid Palindrome: https://leetcode.com/problems/valid-palindrome/
Longest Palindromic Substring: https://leetcode.com/problems/longest-palindromic-substring/

4. Sliding Window - Beginner

Maintain a window of elements in an array or a string and move the window to find the solution. Combined with 2 pointers.

Practice:

Longest Substring Without Repeating Characters: https://leetcode.com/problems/longest-substring-without-repeating-characters/
Minimum Size Subarray Sum: https://leetcode.com/problems/minimum-size-subarray-sum/
Longest Repeating Character Replacement: https://leetcode.com/problems/longest-repeating-character-replacement/
Permutation in String: https://leetcode.com/problems/permutation-in-string/
Minimum Window Substring: https://leetcode.com/problems/minimum-window-substring/
Maximum Erasure Value: https://leetcode.com/problems/maximum-erasure-value/
Fruit Into Baskets: https://leetcode.com/problems/fruit-into-baskets/
Minimum Operations to Reduce X to Zero: https://leetcode.com/problems/minimum-operations-to-reduce-x-to-zero/
Get Maximum in Generated Array: https://leetcode.com/problems/get-maximum-in-generated-array/
Subarrays with K Different Integers: https://leetcode.com/problems/subarrays-with-k-different-integers/

5. Backtracking - Intermediate

Systematically explore all possible solutions by building candidates and then abandoning them as soon as you determine that they cannot lead to a valid solution.

Practice:

Letter Combinations of a Phone Number: https://leetcode.com/problems/letter-combinations-of-a-phone-number/
Generate Parentheses: https://leetcode.com/problems/generate-parentheses/
Combination Sum: https://leetcode.com/problems/combination-sum/
Permutations: https://leetcode.com/problems/permutations/
Word Search: https://leetcode.com/problems/word-search/
Palindrome Partitioning: https://leetcode.com/problems/palindrome-partitioning/
N-Queens: https://leetcode.com/problems/n-queens/
Subsets: https://leetcode.com/problems/subsets/
Combination Sum II: https://leetcode.com/problems/combination-sum-ii/
Restore IP Addresses: https://leetcode.com/problems/restore-ip-addresses/

6. Depth-First Search (DFS) - Intermediate

Traverse a graph or tree by exploring as far as possible along each branch before backtracking.

Practice:

Invert Binary Tree: https://leetcode.com/problems/invert-binary-tree
Binary Tree Inorder Traversal: https://leetcode.com/problems/binary-tree-inorder-traversal
Maximum Depth of Binary Tree: https://leetcode.com/problems/maximum-depth-of-binary-tree
Symmetric Tree: https://leetcode.com/problems/symmetric-tree
Binary Tree Preorder Traversal: https://leetcode.com/problems/binary-tree-preorder-traversal
Path Sum: https://leetcode.com/problems/path-sum
Kth Smallest Element in a BST: https://leetcode.com/problems/kth-smallest-element-in-a-bst
Lowest Common Ancestor of a Binary Search Tree: https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-search-tree
Validate Binary Search Tree: https://leetcode.com/problems/validate-binary-search-tree
Recover Binary Search Tree: https://leetcode.com/problems/recover-binary-search-tree

7. Bepth-First Search (BFS) - Intermediate

Traverse a graph or tree by exploring all the neighbors at the current level before moving on to the next level.

Practice:

You can practice the same as DFS and the following.

Populating Next Right Pointers in Each Node: https://leetcode.com/problems/populating-next-right-pointers-in-each-node
Populating Next Right Pointers in Each Node II: https://leetcode.com/problems/populating-next-right-pointers-in-each-node-ii
Surrounded Regions: https://leetcode.com/tag/breadth-first-search/#:~:text=130-,Surrounded%20Regions,-36.5%25
Number of Islands: https://leetcode.com/problems/number-of-islands
Course Schedule: https://leetcode.com/problems/course-schedule

8. Divide and Conquer - Advanced

Break down a problem into smaller sub-problems, solve each sub-problem independently, and then combine the solutions to get the final result.

Maximum Subarray: https://leetcode.com/problems/maximum-subarray/
Pow(x, n): https://leetcode.com/problems/powx-n/
Merge k Sorted Lists: https://leetcode.com/problems/merge-k-sorted-lists/
Count of Smaller Numbers After Self: https://leetcode.com/problems/count-of-smaller-numbers-after-self/
Find K Closest Elements: https://leetcode.com/problems/find-k-closest-elements/
Majority Element: https://leetcode.com/problems/majority-element/
Unique Binary Search Trees: https://leetcode.com/problems/unique-binary-search-trees/
Kth Largest Element in an Array: https://leetcode.com/problems/kth-largest-element-in-an-array/
Search for a Range: https://leetcode.com/problems/search-for-a-range/
Closest Binary Search Tree Value II: https://leetcode.com/problems/closest-binary-search-tree-value-ii/

9. Dynamic Programming - Advanced

Break down a complex problem into smaller sub-problems and solve them individually. This approach can be used to solve problems that exhibit overlapping subproblems.

Practice:

Climbing Stairs: https://leetcode.com/problems/climbing-stairs/
Best Time to Buy and Sell Stock: https://leetcode.com/problems/best-time-to-buy-and-sell-stock/
Longest Increasing Subsequence: https://leetcode.com/problems/longest-increasing-subsequence/
Coin Change: https://leetcode.com/problems/coin-change/
Maximum Subarray: https://leetcode.com/problems/maximum-subarray/
House Robber: https://leetcode.com/problems/house-robber/
Unique Paths: https://leetcode.com/problems/unique-paths/
Decode Ways: https://leetcode.com/problems/decode-ways/
Maximum Product Subarray: https://leetcode.com/problems/maximum-product-subarray/
Palindrome Partitioning II: https://leetcode.com/problems/palindrome-partitioning-ii/

Notes:

I would suggest you start with some data structure basics, then solve around 20 easy questions to get an idea of the questions and their formatting
These are not all the patterns that exist, and the questions are not listed by difficulty. Each pattern might have variations or be combined with another one. By practicing you will get better.
The questions listed for practice might not be the most suitable ones, but you get the idea.
This list serves as a starting point for those who don't know how to get started. Follow the path or just create your own, "memento mori".

Thanks for reading.