DOCSEARCHbyAlgolia
Submit Docs

Logravel Technical Blog

website·Indexed 30 days ago

https://logravel.com

A collection of technical guides and tutorials by Eero Chiao covering frontend development, JavaScript core concepts (closures, event loop, data types, shallow/deep copy), React ecosystem (React Router v7, MUI), web performance (Google Core Web Vitals), and general software engineering topics like MVC and Git.

Tokens
9.6K
Snippets
54
Records
72
Agent score
50%

What's inside Logravel

  1. Define the roles of Model, View, and Controller

    In an MVC architecture, each component has a specific responsibility:

    • Model: Handles data operations. It receives instructions from the Controller, performs actions on the database, and returns the resulting data to the Controller.
    • View: Handles the presentation layer. It takes data provided by the Controller to generate the HTML structure and final web page content.
    • Controller: Acts as the intermediary bridge. It receives requests from the browser, coordinates the interaction between the Model and the View, and sends the final response back to the browser.

  2. Understand JavaScript Closures and their benefits

    A Closure is a programming concept where an inner function retains access to the variables of its outer lexical scope, even after the outer function has finished executing. This enables several key software engineering patterns:

    • Private Variables: Variables exist only within the closure and cannot be accessed directly from the outside.
    • Data Hiding: Prevents external code from arbitrarily modifying internal function data.
    • Encapsulation: Packages data and logic together, preventing pollution of the global namespace.
    function example() {
  let num = 0;

  return () => {
    num++;
    console.log(num);
  };
}

const count = example();

count(); // 1
count(); // 2
count(); // 3

  3. Understand Google Core Web Vitals metrics

    Core Web Vitals are a set of three metrics defined by Google to quantify the user experience (UX) of a webpage. These metrics influence a website's ranking in Google search results. They focus on loading performance, responsiveness, and visual stability.

  4. Understand Shallow Copy vs Deep Copy in JavaScript

    In JavaScript, object types are handled by reference. To avoid mutating original data, you must choose between shallow and deep copying based on the data structure:

    • Shallow Copy: Copies only the top-level (parent) properties. Nested objects (child levels) still reference the same memory location. Modifying a nested object in a shallow copy will mutate the original data.
    • Deep Copy: Copies all levels of the data structure. Modifying any part of a deep copy will not affect the original data.

  5. Understand the Model-View-Controller (MVC) architectural pattern

    MVC is a software design architecture commonly used in early Server-Side Rendering (SSR) where the frontend and backend are not decoupled. It separates an application into three main components to manage data and presentation: the Model, the View, and the Controller.

  6. Understand the Data Shaping process

    Data Shaping is the process of preparing data (typically from API responses) to ensure it conforms to the specific format and requirements of a target system. This is essential when collaborating with backend engineers or third-party APIs where the response structure may not match the frontend's needs. The process consists of three primary stages: Data Cleaning, Data Transformation, and Data Standardization.

  7. Implement multi-theme color schemes in MUI v7

    MUI v7 introduces a multi-theme architecture using colorSchemes. Unlike v5/v6, which used a single theme with a mode property, v7 allows defining multiple theme sets (e.g., light and dark) within a single createTheme call. Use useColorScheme to programmatically toggle between these modes.
    import { createTheme, ThemeProvider, useColorScheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: { main: '#4f46e5' },
        background: { default: '#ffffff' },
      },
    },
    dark: {
      palette: {
        primary: { main: '#818cf8' },
        background: { default: '#0f172a' },
      },
    },
  },
});

function ThemeToggle() {
  const { mode, setMode } = useColorScheme();
  if (!mode) return null;
  return (
    <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
      Toggle Mode
    </button>
  );
}

export default function App() {
  return (
    <ThemeProvider theme={theme} defaultMode="system">
      <CssBaseline />
      <ThemeToggle />
    </ThemeProvider>
  );
}

  8. Understand JavaScript Data Type Categories

    JavaScript data types are divided into two main categories: Primitive types and Object types. While the typeof operator is commonly used to determine a value's type, it has historical inconsistencies (e.g., typeof null returns 'object'), requiring alternative validation methods for certain types.

  9. Implement custom component variants in MUI themes

    You can create new custom variants (e.g., a 'dashed' button) by adding to the variants array within styleOverrides. To support these custom variants in TypeScript, you must use module augmentation to extend the component's props interface.
    // 1. TypeScript Module Augmentation
import '@mui/material';
declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    dashed: true;
  }
}

// 2. Theme Configuration
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          variants: [
            {
              props: { variant: 'dashed' },
              style: { border: '4px dashed red' },
            },
          ],
        },
      },
    },
  },
});

// Usage
<Button variant="dashed">Dashed Button</Button>

  10. Create responsive layouts with MUI v7 Grid

    MUI v7 uses a 12-column grid system. The Grid component acts as a container when the container prop is present. Child grids use the size prop to define how many columns they occupy across different breakpoints (xs, md, xl). Use spacing on the container to control gaps between items.
    import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';

function ResponsiveLayout() {
  return (
    <Grid container spacing={2}>
      {/* Occupies 12 cols on xs, 6 on md, 4 on xl */}
      <Grid size={{ xs: 12, md: 6, xl: 4 }}>
        <Button variant="contained" fullWidth>Item 1</Button>
      </Grid>
      {/* Use size="grow" to automatically fill remaining space */}
      <Grid size="grow">
        <Button variant="contained" fullWidth>Item 2 (Auto-fill)</Button>
      </Grid>
    </Grid>
  );
}

  11. Create reusable styled components with styled()

    For styles that need to be reused across multiple instances, use the styled() utility from @mui/material/styles. This approach allows you to define a new component with baked-in styles and access the MUI theme object via a callback function.
    import Slider, { type SliderProps } from '@mui/material/Slider';
import { styled } from '@mui/material/styles';

const CustomSlider = styled(Slider)<SliderProps>(({ theme }) => ({
  width: theme.spacing(10),
  color: theme.palette.success.main,
  '& .MuiSlider-thumb': {
    '&:hover, &.Mui-focusVisible': {
      backgroundColor: 'red',
    },
  },
}));

function Demo() {
  return <CustomSlider />;
}

  12. Implement Dark Mode using useColorScheme

    Enable dark mode support by setting colorSchemes.dark: true in the theme configuration. Use the useColorScheme hook to access the current mode (light, dark, or system) and the setMode function to toggle between them.
    import { createTheme, ThemeProvider, useColorScheme } from '@mui/material/styles';
import CSSBaseline from '@mui/material/CssBaseline';

const theme = createTheme({
  colorSchemes: {
    dark: true,
  },
});

function ThemeToggle() {
  const { mode, setMode } = useColorScheme();
  if (!mode) return null;

  return (
    <select value={mode} onChange={(e) => setMode(e.target.value)}>
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  );
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CSSBaseline />
      <ThemeToggle />
    </ThemeProvider>
  );
}